:root {
    color-scheme: dark;
    --background: #070b13;
    --surface: #0d1421;
    --surface-soft: #111a2a;
    --surface-elevated: #172237;
    --border: rgba(148, 163, 184, 0.18);
    --text: #f8fafc;
    --text-soft: #cbd5e1;
    --text-muted: #7f8da3;
    --primary: #7dd3fc;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #fb7185;
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.09), transparent 28rem),
        var(--background);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select, a { font: inherit; }
a { color: inherit; text-decoration: none; }

.topbar {
    width: min(calc(100% - 40px), 1500px);
    min-height: 112px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid var(--border);
}

.topbar > div { text-align: center; }
.topbar h1, .section-heading h2 { margin: 0; }
.topbar h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.04em; }

.back-link { color: var(--text-soft); font-weight: 700; }
.back-link:hover, .back-link:focus-visible { color: var(--primary); }
.generated-at { justify-self: end; color: var(--text-muted); font-size: 13px; }

.eyebrow {
    margin: 0 0 5px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.layout {
    width: min(calc(100% - 40px), 1500px);
    margin: 0 auto;
    padding: 32px 0 60px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
    gap: 20px;
    align-items: start;
}

.library-panel, .player-panel, .error-panel {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(17, 26, 42, 0.97), rgba(12, 19, 32, 0.97));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.library-panel, .player-panel { padding: clamp(22px, 3vw, 32px); }
.player-panel { position: sticky; top: 20px; }

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}
.section-heading h2 { font-size: 25px; letter-spacing: -0.025em; }

.count-badge, .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.status-success { color: var(--success); border-color: rgba(74, 222, 128, 0.3); }
.status-warning { color: var(--warning); border-color: rgba(251, 191, 36, 0.3); }
.status-danger { color: var(--danger); border-color: rgba(251, 113, 133, 0.3); }
.status-neutral { color: var(--text-muted); }

.toolbar {
    margin-top: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 12px;
}
.toolbar label { display: grid; gap: 7px; color: var(--text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.toolbar input, .toolbar select {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}

.video-list { margin-top: 20px; display: grid; gap: 12px; }
.video-card {
    width: 100%;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(13, 20, 33, 0.84);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.video-card:hover, .video-card:focus-visible, .video-card[aria-current="true"] {
    border-color: rgba(125, 211, 252, 0.45);
    background: var(--surface-elevated);
    outline: none;
}
.video-thumbnail {
    aspect-ratio: 9 / 16;
    width: 72px;
    border-radius: 9px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, rgba(56,189,248,.18), rgba(192,132,252,.12));
    color: var(--primary);
    font-size: 22px;
}
.video-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.video-copy { min-width: 0; }
.video-copy strong { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-copy span { display: block; margin-top: 5px; color: var(--text-muted); font-size: 13px; }
.video-meta { display: grid; justify-items: end; gap: 8px; }

.player-shell {
    margin-top: 22px;
    aspect-ratio: 9 / 16;
    max-height: 62vh;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #020408;
}
.player-shell video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-placeholder {
    width: 100%; height: 100%; display: grid; place-content: center; gap: 10px; padding: 28px; text-align: center;
    color: var(--text-muted);
}
.player-placeholder strong { color: var(--text-soft); font-size: 19px; }

.video-actions {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.action-button {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-soft);
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.action-button:hover:not(.is-disabled),
.action-button:focus-visible:not(.is-disabled) {
    border-color: rgba(125, 211, 252, 0.45);
    background: var(--surface-elevated);
    color: var(--text);
    outline: none;
}

.action-primary {
    border-color: rgba(74, 222, 128, 0.3);
    color: var(--success);
}

.action-button:last-child { grid-column: 1 / -1; }
.action-button.is-disabled,
.action-button:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.video-details { margin: 22px 0 0; display: grid; gap: 0; }
.video-details div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.video-details dt { color: var(--text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.video-details dd { margin: 0; color: var(--text-soft); overflow-wrap: anywhere; }
.player-message, .action-message { margin: 18px 0 0; color: var(--text-muted); }
.action-message { margin-top: 9px; font-size: 13px; }
.empty-state { margin: 22px 0 0; color: var(--text-muted); }
.error-panel { width: min(calc(100% - 40px), 1500px); margin: 0 auto 40px; padding: 24px; border-color: rgba(251, 113, 133, 0.34); }
.error-panel h2 { margin-top: 0; color: var(--danger); }

@media (max-width: 960px) {
    .topbar { grid-template-columns: 1fr; padding: 22px 0; text-align: center; }
    .topbar > div { order: -1; }
    .generated-at { justify-self: center; }
    .back-link { justify-self: center; }
    .layout { grid-template-columns: 1fr; }
    .player-panel { position: static; }
    .player-shell { max-height: none; }
}

@media (max-width: 620px) {
    .topbar, .layout, .error-panel { width: min(calc(100% - 24px), 1500px); }
    .toolbar, .video-actions { grid-template-columns: 1fr; }
    .action-button:last-child { grid-column: auto; }
    .video-card { grid-template-columns: 62px minmax(0, 1fr); }
    .video-thumbnail { width: 52px; }
    .video-meta { grid-column: 2; justify-items: start; }
    .video-details div { grid-template-columns: 1fr; gap: 4px; }
}