:root {
    --bg: #05060a;
    --bg-soft: #0e111a;
    --panel: rgba(18, 21, 31, 0.82);
    --panel-solid: #151925;
    --panel-strong: #1d2332;
    --line: rgba(255, 255, 255, 0.11);
    --line-strong: rgba(255, 255, 255, 0.18);
    --text: #f6f7fb;
    --muted: #a9b0c1;
    --muted-soft: #767f91;
    --accent: #e50935;
    --accent-2: #ff4f6d;
    --accent-soft: rgba(229, 9, 53, 0.22);
    --success: #3ddc97;
    --danger: #ff5c7a;
    --warning: #ffbc42;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% -10%, rgba(229, 9, 53, 0.22), transparent 34rem),
        radial-gradient(circle at 85% 8%, rgba(86, 105, 255, 0.16), transparent 30rem),
        linear-gradient(180deg, #0b0d13 0%, var(--bg) 46%, #030408 100%);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { outline-color: rgba(229, 9, 53, 0.75); }
code {
    color: #ffd5dd;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 0.4rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.glass {
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 74px;
    padding: 0.85rem clamp(1rem, 4vw, 3rem);
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 12px 30px rgba(229, 9, 53, 0.35);
    font-size: 0.85rem;
}

.nav-toggle { display: none; }

.top-nav {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.top-nav a,
.nav-dropdown-toggle,
.logout-link,
.admin-tabs a,
.ghost-button,
.primary-button,
.danger-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0 1rem;
    cursor: pointer;
    font-weight: 800;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
}

.top-nav a,
.nav-dropdown-toggle,
.logout-link {
    color: var(--muted);
    border: 0;
    background: transparent;
}

.top-nav a.active,
.top-nav a:hover,
.nav-dropdown-toggle.active,
.nav-dropdown-toggle:hover,
.logout-link:hover,
.nav-search.active {
    color: var(--text);
    background: rgba(255, 255, 255, 0.11);
}

.nav-dropdown { position: relative; }
.genre-menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 0;
    display: none;
    min-width: 235px;
    max-height: min(420px, 70vh);
    overflow: auto;
    padding: 0.55rem;
    border-radius: 18px;
}
.nav-dropdown:hover .genre-menu,
.nav-dropdown:focus-within .genre-menu,
.nav-dropdown.is-open .genre-menu { display: grid; gap: 0.25rem; }
.genre-menu a,
.genre-menu-empty {
    display: block;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    color: var(--muted);
}
.genre-menu a:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }

.nav-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    width: clamp(160px, 19vw, 280px);
    color: var(--muted);
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 0.8rem;
}
.nav-search input {
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--text);
    background: transparent;
}
.nav-search input::placeholder { color: var(--muted-soft); }

.user-chip {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffdce4;
    background: rgba(229, 9, 53, 0.16);
    border: 1px solid rgba(229, 9, 53, 0.34);
    border-radius: 999px;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 800;
}

.page-shell {
    width: min(1540px, calc(100% - clamp(2rem, 6vw, 6rem)));
    margin: 0 auto;
    padding: 1.8rem 0 5rem;
}

.library-shell { padding-top: 1.2rem; }
h1, h2, h3, p { margin-top: 0; }
.page-title,
h1 {
    max-width: 920px;
    margin-bottom: 0.75rem;
    font-size: clamp(2rem, 4.8vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.admin-shell .page-title,
.movie-page-shell .page-title,
.login-card .page-title {
    font-size: clamp(2rem, 4vw, 3.8rem);
}

h2 {
    margin-bottom: 0;
    font-size: clamp(1.35rem, 2.4vw, 2.05rem);
    letter-spacing: -0.045em;
}
h3 { margin-bottom: 0.65rem; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #ff9aae;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section-subtitle,
.muted,
.muted-count,
.movie-meta small,
.admin-movie-card small,
.admin-movie-card p,
.genre-admin-item small,
.user-admin-item small {
    color: var(--muted);
}

.primary-button {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(229, 9, 53, 0.35);
}
.ghost-button,
.admin-tabs a {
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--line);
}
.danger-button {
    color: #fff;
    background: rgba(255, 92, 122, 0.16);
    border: 1px solid rgba(255, 92, 122, 0.34);
}
.primary-button:hover,
.ghost-button:hover,
.danger-button:hover,
.admin-tabs a:hover,
.movie-card:hover .poster-wrap {
    transform: translateY(-1px);
}
.small { min-height: 34px; padding: 0 0.75rem; font-size: 0.85rem; }
.text-link { color: #ff9aae; font-weight: 900; }

.content-section { margin-top: 2rem; }
.first-content-section { margin-top: 0.6rem; }
.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.section-actions { display: flex; align-items: center; gap: 0.75rem; }

.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.carousel-section { position: relative; }
@supports (content-visibility: auto) {
    .carousel-section {
        content-visibility: auto;
        contain-intrinsic-size: auto 430px;
    }
}
.movie-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(148px, 14vw, 205px);
    gap: clamp(0.8rem, 1.4vw, 1.1rem);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0.25rem;
    padding: 0.25rem 0 1.1rem;
    scrollbar-width: none;
}
.movie-row::-webkit-scrollbar { display: none; }
.movie-row .movie-card { scroll-snap-align: start; }

.carousel-buttons { display: inline-flex; gap: 0.45rem; }
.carousel-button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--text);
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}
.carousel-button:hover { background: rgba(255, 255, 255, 0.2); }
.carousel-button:disabled { opacity: 0; pointer-events: none; }
.no-scroll-needed .carousel-buttons { display: none; }

.movie-card {
    position: relative;
    display: block;
    width: 100%;
    color: inherit;
    transition: transform 170ms ease, opacity 220ms ease;
}
.movie-card.is-removing { opacity: 0; transform: scale(0.96); }
.movie-card-link { display: grid; gap: 0.72rem; }
.poster-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 18px;
    background: var(--panel-solid);
    border: 0;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    transition: transform 170ms ease, box-shadow 170ms ease, filter 170ms ease;
}
.movie-card:hover .poster-wrap {
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.55);
    filter: brightness(1.06);
}
.poster-wrap img,
.detail-poster img,
.admin-movie-card img,
.mini-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.movie-poster {
    display: block;
}
.movie-meta {
    display: grid;
    gap: 0.1rem;
    text-align: center;
    justify-items: center;
    min-width: 0;
}
.movie-meta strong {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.98rem;
    letter-spacing: -0.02em;
}
.movie-meta small {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.28;
}
.movie-year:empty { display: none; }
.watchlist-toggle {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.74);
    background: rgba(0, 0, 0, 0.54);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}
.watchlist-toggle:hover { transform: scale(1.06); color: #fff; }
.watchlist-toggle.is-active { color: #ffd166; background: rgba(229, 9, 53, 0.72); }
.watchlist-toggle:disabled { opacity: 0.65; cursor: wait; }

.empty-state {
    padding: 2rem;
    border-radius: var(--radius-md);
    border: 1px dashed var(--line-strong);
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
}
.empty-state.large {
    min-height: 340px;
    display: grid;
    align-content: center;
    justify-items: start;
}
.empty-state h1,
.empty-state h2,
.empty-state h3 { color: var(--text); }

.toast-region {
    position: fixed;
    right: clamp(1rem, 4vw, 2rem);
    bottom: clamp(1rem, 4vw, 2rem);
    z-index: 100;
    display: grid;
    gap: 0.6rem;
    pointer-events: none;
}
.toast {
    padding: 0.9rem 1rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(16, 18, 26, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.44);
    backdrop-filter: blur(14px);
    font-weight: 800;
    animation: toastIn 180ms ease both;
}
.toast.is-hiding { animation: toastOut 240ms ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* Movie detail page */
.detail-shell { width: min(1240px, calc(100% - clamp(2rem, 6vw, 6rem))); }
.movie-detail {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 4vw, 3rem);
}
.detail-backdrop,
.movie-detail::before {
    content: "";
    position: absolute;
    inset: 0;
}
.movie-detail::before {
    background:
        linear-gradient(90deg, rgba(8, 10, 16, 0.98), rgba(8, 10, 16, 0.88) 48%, rgba(8, 10, 16, 0.74)),
        var(--detail-image) center / cover no-repeat;
    filter: blur(1px) saturate(0.86);
    transform: scale(1.02);
}
.movie-detail > *:not(.detail-backdrop) { position: relative; z-index: 1; }
.detail-poster {
    align-self: start;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 24px;
    border: 0;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72);
}
.detail-content {
    display: grid;
    align-content: center;
    gap: 1.1rem;
    min-height: min(700px, calc(100vh - 11rem));
}
.detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.detail-title-row .detail-star { position: static; flex: 0 0 auto; width: 50px; height: 50px; }
.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.detail-tags span {
    color: #edf0f7;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.48rem 0.75rem;
    font-size: 0.9rem;
}
.detail-description {
    max-width: 780px;
    color: #d5dae8;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
}
.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8rem;
    max-width: 880px;
}
.detail-info-grid div {
    display: grid;
    gap: 0.22rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid var(--line);
}
.detail-info-grid span { color: var(--muted); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; }
.back-link { justify-self: start; }

/* Forms and admin */
input,
textarea,
select {
    width: 100%;
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}
textarea { resize: vertical; }
input[type="file"] { padding: 0.75rem; }
button[type="submit"],
.search-form button,
.genre-create-form button {
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 14px;
    padding: 0.8rem 1.05rem;
    cursor: pointer;
    font-weight: 900;
}
.stacked-form { display: grid; gap: 1rem; }
.form-two-columns,
.file-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.required-note { color: #ffd1da; }

.admin-shell { max-width: 1460px; }
.flash {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--line);
    font-weight: 800;
}
.flash.success { color: #d4ffe8; background: rgba(61, 220, 151, 0.12); border-color: rgba(61, 220, 151, 0.3); }
.flash.error { color: #ffe2e8; background: rgba(255, 92, 122, 0.12); border-color: rgba(255, 92, 122, 0.3); }
.flash.warning { color: #fff1c4; background: rgba(255, 188, 66, 0.12); border-color: rgba(255, 188, 66, 0.3); }

.admin-hero,
.admin-card {
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
}
.admin-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}
.admin-hero p { max-width: 780px; color: var(--muted); margin-bottom: 0; }
.admin-stats { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: flex-end; }
.admin-stats span {
    display: grid;
    gap: 0.15rem;
    min-width: 106px;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid var(--line);
    color: var(--muted);
}
.admin-stats strong { color: var(--text); font-size: 1.25rem; }
.admin-tabs {
    position: sticky;
    top: 82px;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1rem 0;
    padding: 0.55rem;
    border-radius: 999px;
    background: rgba(8, 10, 15, 0.68);
    backdrop-filter: blur(14px);
}
.admin-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(420px, 1.22fr);
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}
.admin-grid.single-column { grid-template-columns: 1fr; }
.users-grid { grid-template-columns: minmax(280px, 0.55fr) minmax(420px, 1.45fr); }
.movie-form-card { position: sticky; top: 150px; }
.movie-manager-card { min-width: 0; }

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.55rem;
    border: 0;
    padding: 0;
    margin: 0;
}
.checkbox-grid legend {
    margin-bottom: 0.65rem;
    font-weight: 900;
}
.checkbox-grid label,
.inline-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    font-weight: 800;
}
.checkbox-grid input,
.inline-check input { width: auto; }
.current-files,
.subtitle-box {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.045);
    border-radius: 18px;
    padding: 1rem;
}
.current-files {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}
.mini-poster {
    width: 96px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    border: 0;
}
.subtitle-upload-rows { display: grid; gap: 0.85rem; margin: 1rem 0 0.75rem; }
.subtitle-upload-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) minmax(120px, 0.8fr) minmax(105px, 0.6fr) minmax(105px, 0.5fr) minmax(105px, 0.5fr) auto;
    gap: 0.75rem;
    align-items: end;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}
.editable-subtitles { display: grid; gap: 0.55rem; margin: 0 0 1rem; padding-left: 0; }
.form-note { margin: 0.2rem 0 0; font-size: 0.9rem; }
.genre-create-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.admin-search { min-width: min(280px, 100%); }
.admin-search input { padding: 0.75rem 0.9rem; }

.admin-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
    max-height: min(980px, 120vh);
    overflow: auto;
    padding-right: 0.25rem;
}
.admin-movie-card,
.genre-admin-item,
.user-admin-item {
    display: grid;
    gap: 0.9rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}
.admin-movie-card {
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start;
}
.admin-movie-card img {
    width: 82px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    border: 0;
}
.admin-movie-body { min-width: 0; }
.admin-movie-card strong,
.admin-movie-card small { display: block; }
.admin-movie-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-movie-card p { margin: 0.3rem 0 0.75rem; font-size: 0.9rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.inline-form { display: inline-flex; margin: 0; }
.genre-admin-list,
.user-admin-list { display: grid; gap: 0.75rem; }
.genre-admin-item { grid-template-columns: 1fr auto; align-items: center; }
.user-admin-item { grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.1fr) auto; align-items: center; }
.reset-form { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.reset-form input { padding: 0.65rem 0.75rem; }

/* Login */
.login-page {
    display: grid;
    place-items: center;
    padding: 1rem;
}
.login-shell { width: min(460px, 100%); }
.login-card { border-radius: var(--radius-lg); padding: clamp(1.4rem, 6vw, 2.2rem); }
.login-brand { margin-bottom: 1.5rem; }

/* Player */
.player-page { overflow: hidden; background: #000; }
.video-player {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
    overflow: hidden;
    user-select: none;
}
.video-player video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}
.player-click-zone {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}
.player-chrome {
    position: absolute;
    z-index: 3;
    transition: opacity 220ms ease, transform 220ms ease;
}
.player-topbar {
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 2rem);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.74), transparent);
}
.player-title-block { min-width: 0; }
.player-title-block strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-title-block span { display: block; color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-back {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 2rem;
    line-height: 1;
    flex: 0 0 auto;
}
.big-play {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 94px;
    height: 94px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.54);
    backdrop-filter: blur(12px);
    cursor: pointer;
    font-size: 2rem;
    font-weight: 900;
}
.video-player.is-playing .big-play { opacity: 0; pointer-events: none; }
.player-controls {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent);
}
.timeline-row,
.control-row,
.control-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.timeline-row { margin-bottom: 0.8rem; }
.timeline-row > span {
    min-width: 58px;
    color: rgba(255, 255, 255, 0.82);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}
.seek-shell { position: relative; flex: 1; display: grid; align-items: center; }
#seekRange,
#volumeRange { padding: 0; accent-color: var(--accent); }
#seekRange { width: 100%; }
.seek-tooltip {
    position: absolute;
    bottom: 1.45rem;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 900;
    transition: opacity 130ms ease;
}
.seek-shell.show-tooltip .seek-tooltip { opacity: 1; }
.control-row { justify-content: space-between; }
.left-controls,
.right-controls { flex-wrap: wrap; }
.icon-button,
.select-control {
    min-height: 42px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
.icon-button {
    width: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    font-weight: 900;
}
.select-control {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.45rem 0 0.8rem;
    font-weight: 900;
}
.select-control select {
    width: auto;
    min-width: 96px;
    padding: 0.48rem 0.58rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
}
#volumeRange { width: 120px; }
.video-player.hide-chrome .player-chrome { opacity: 0; transform: translateY(8px); pointer-events: none; }
.video-player.hide-chrome .player-topbar { transform: translateY(-8px); }
.player-error {
    min-height: 100vh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    background: radial-gradient(circle at 50% 20%, rgba(229, 9, 53, 0.18), transparent 30rem), #050509;
}

@media (max-width: 1120px) {
    .site-header { grid-template-columns: auto auto; }
    .nav-toggle {
        justify-self: end;
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        color: var(--text);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid var(--line);
        border-radius: 14px;
    }
    .top-nav {
        grid-column: 1 / -1;
        justify-self: stretch;
        display: none;
        border-radius: 22px;
        padding: 0.65rem;
        flex-wrap: wrap;
    }
    .top-nav.is-open { display: flex; }
    .nav-search { order: 8; width: 100%; }
    .genre-menu { left: auto; right: 0; }
    .movie-form-card { position: static; }
    .admin-grid,
    .users-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .page-shell,
    .detail-shell { width: min(100% - 1rem, 1540px); padding-top: 0.8rem; }
    .section-heading,
    .admin-hero,
    .movie-detail { grid-template-columns: 1fr; }
    .section-heading,
    .admin-hero { align-items: stretch; }
    .admin-stats { justify-content: flex-start; }
    .movie-detail { gap: 1.25rem; }
    .detail-poster { width: min(58vw, 280px); }
    .detail-content { min-height: 0; }
    .form-two-columns,
    .file-grid,
    .subtitle-upload-row,
    .genre-create-form,
    .user-admin-item { grid-template-columns: 1fr; }
    .admin-tabs { top: 86px; border-radius: 20px; }
    .movie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .movie-row { grid-auto-columns: minmax(138px, 42vw); }
    .admin-library-grid { grid-template-columns: 1fr; max-height: none; }
}

@media (max-width: 620px) {
    .site-header { padding: 0.75rem; }
    .brand span:last-child { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
    .top-nav a,
    .nav-dropdown-toggle,
    .logout-link { flex: 1 1 calc(50% - 0.5rem); }
    .nav-dropdown { flex: 1 1 calc(50% - 0.5rem); }
    .nav-dropdown-toggle { width: 100%; }
    .genre-menu { left: 0; right: 0; min-width: 100%; }
    .user-chip { flex: 1 1 100%; max-width: none; text-align: center; }
    .page-title, h1 { font-size: clamp(2rem, 11vw, 3.1rem); }
    .section-actions { width: 100%; justify-content: space-between; }
    .carousel-button { width: 40px; height: 40px; }
    .movie-grid { gap: 0.85rem; }
    .poster-wrap { border-radius: 14px; }
    .movie-meta strong { font-size: 0.92rem; }
    .movie-meta small { font-size: 0.8rem; }
    .watchlist-toggle { width: 38px; height: 38px; }
    .admin-movie-card { grid-template-columns: 74px minmax(0, 1fr); }
    .admin-movie-card img { width: 74px; }
    .control-row { align-items: stretch; gap: 0.65rem; }
    .control-row,
    .left-controls,
    .right-controls { flex-direction: row; flex-wrap: wrap; }
    .right-controls { justify-content: flex-end; }
    #volumeRange { width: 92px; }
    .select-control select { min-width: 80px; max-width: 110px; }
    .timeline-row > span { min-width: 46px; font-size: 0.8rem; }
    .big-play { width: 78px; height: 78px; }
}

/* UX/UI refinements */
:root {
    --nav-bg: rgba(5, 6, 10, 0.92);
    --menu-bg: rgba(7, 8, 13, 0.98);
    --gold: #f5b84b;
    --gold-2: #d8922e;
    --gold-soft: rgba(245, 184, 75, 0.18);
}

.site-header.glass {
    background: rgba(6, 7, 12, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.top-nav {
    background: rgba(0, 0, 0, 0.28);
}
.nav-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.85rem;
}
.genre-menu {
    top: calc(100% + 0.45rem);
    background: var(--menu-bg);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.58);
}
.genre-menu a:hover {
    background: rgba(245, 184, 75, 0.11);
}

.admin-shell .page-title,
.movie-page-shell .page-title,
.login-card .page-title {
    font-size: clamp(1.8rem, 3.4vw, 3.15rem);
    letter-spacing: -0.055em;
}

.watchlist-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    line-height: 1;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(11, 10, 8, 0.72);
    border-color: rgba(255, 255, 255, 0.18);
}
.watchlist-toggle span {
    display: block;
    line-height: 1;
    transform: translateY(-0.02em);
}
.watchlist-toggle:hover {
    color: #fff5d6;
    background: rgba(48, 38, 20, 0.86);
}
.watchlist-toggle.is-active {
    color: #211607;
    background: linear-gradient(135deg, #ffe28a, var(--gold) 54%, var(--gold-2));
    border-color: rgba(255, 224, 138, 0.62);
    box-shadow: 0 14px 34px rgba(216, 146, 46, 0.28);
}
.toast {
    border-color: rgba(245, 184, 75, 0.22);
}

.carousel-button {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    aspect-ratio: 1 / 1;
}

/* Admin subpages */
.admin-subnav a.active {
    color: #211607;
    background: linear-gradient(135deg, #ffe28a, var(--gold));
    border-color: rgba(255, 224, 138, 0.5);
}
.admin-page-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin: 1.2rem 0 1rem;
}
.admin-page-heading p {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--muted);
}
.admin-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.admin-dashboard-card {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    min-height: 230px;
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 2.5vw, 1.8rem);
    transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}
.admin-dashboard-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 184, 75, 0.34);
    background: rgba(24, 22, 17, 0.88);
}
.admin-card-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #211607;
    background: linear-gradient(135deg, #ffe28a, var(--gold));
    font-weight: 900;
}
.admin-dashboard-card strong {
    font-size: 1.2rem;
    letter-spacing: -0.025em;
}
.admin-dashboard-card p {
    margin: 0;
    color: var(--muted);
}
.admin-form-layout,
.full-width-card {
    max-width: 1120px;
}
.admin-split-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.55fr) minmax(420px, 1.45fr);
    gap: 1rem;
    align-items: start;
}
.users-page-layout {
    grid-template-columns: minmax(280px, 0.65fr) minmax(420px, 1.35fr);
}
.admin-create-form {
    margin: 1rem 0 0;
}
.admin-tools-heading {
    align-items: center;
}
.manage-grid {
    max-height: none;
    overflow: visible;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.two-column-list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.user-admin-identity {
    min-width: 0;
}
.user-admin-identity strong,
.user-admin-identity small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-submit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Better movie page scaling */
.movie-detail {
    min-width: 0;
}
.detail-content,
.detail-title-row > div {
    min-width: 0;
}
.detail-title-row {
    flex-wrap: wrap;
}
.detail-description,
.detail-info-grid span,
.detail-tags span {
    overflow-wrap: anywhere;
}
.detail-actions .primary-button,
.detail-actions .ghost-button {
    white-space: nowrap;
}

/* Custom player timeline and subtitles */
.subtitle-overlay {
    position: absolute;
    left: 50%;
    bottom: clamp(128px, 17vh, 190px);
    z-index: 2;
    width: min(88vw, 980px);
    transform: translateX(-50%);
    display: none;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    transition: bottom 220ms ease, opacity 220ms ease;
}
.subtitle-overlay.is-visible {
    display: flex;
}
.subtitle-overlay span {
    display: inline-block;
    max-width: 100%;
    padding: 0.28rem 0.55rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.68);
    border-radius: 0.45rem;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9);
    font-size: clamp(1rem, 2.6vw, 1.55rem);
    font-weight: 800;
    line-height: 1.34;
}
.video-player.hide-chrome .subtitle-overlay {
    bottom: clamp(42px, 9vh, 92px);
}
.seek-shell {
    min-height: 26px;
    cursor: pointer;
    touch-action: none;
}
.seek-track {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}
.seek-buffered,
.seek-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
}
.seek-buffered {
    background: rgba(255, 255, 255, 0.32);
}
.seek-progress {
    background: linear-gradient(90deg, #ffe28a, var(--gold));
    box-shadow: 0 0 18px rgba(245, 184, 75, 0.38);
}
#seekRange {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
.seek-shell:focus-visible .seek-track {
    outline: 2px solid rgba(245, 184, 75, 0.8);
    outline-offset: 4px;
}
#volumeRange {
    accent-color: var(--gold);
}
.control-row,
.left-controls,
.right-controls {
    min-width: 0;
}
.left-controls,
.right-controls {
    flex-wrap: nowrap;
}
.select-control select {
    color: #fff;
}

@media (max-width: 1120px) {
    .admin-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-split-layout,
    .users-page-layout { grid-template-columns: 1fr; }
    .admin-form-layout,
    .full-width-card { max-width: none; }
}

@media (max-width: 860px) {
    .admin-page-heading {
        display: grid;
        align-items: start;
    }
    .admin-heading-actions {
        justify-content: flex-start;
    }
    .admin-tools-heading {
        display: grid;
    }
    .manage-grid {
        grid-template-columns: 1fr;
    }
    .movie-detail {
        padding: clamp(1rem, 4vw, 1.4rem);
        border-radius: 22px;
    }
    .detail-poster {
        justify-self: center;
        width: min(56vw, 240px);
        border-radius: 18px;
    }
    .detail-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .page-shell,
    .detail-shell {
        width: min(100% - 0.8rem, 1540px);
    }
    .top-nav {
        background: rgba(4, 5, 9, 0.96);
    }
    .genre-menu {
        position: static;
        flex-basis: 100%;
        max-height: 300px;
        margin-top: 0.35rem;
        background: rgba(5, 6, 10, 0.98);
    }
    .nav-dropdown::after { display: none; }
    .admin-dashboard-grid { grid-template-columns: 1fr; }
    .admin-dashboard-card { min-height: auto; }
    .admin-tabs {
        border-radius: 18px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tabs a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .admin-page-heading .page-title,
    .movie-page-shell .page-title {
        font-size: clamp(1.75rem, 9vw, 2.55rem);
        line-height: 1.04;
    }
    .movie-row { grid-auto-columns: minmax(134px, 42vw); }
    .carousel-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        flex-basis: 40px;
        border-radius: 50%;
    }
    .watchlist-toggle {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        font-size: 1rem;
    }
    .detail-shell {
        padding-bottom: 3rem;
    }
    .movie-detail {
        gap: 1rem;
        overflow: hidden;
    }
    .detail-title-row .detail-star {
        width: 44px;
        height: 44px;
    }
    .detail-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .detail-actions .primary-button,
    .detail-actions .ghost-button {
        width: 100%;
        white-space: normal;
    }
    .detail-tags span {
        font-size: 0.82rem;
        padding: 0.38rem 0.58rem;
    }
    .admin-movie-card {
        grid-template-columns: 72px minmax(0, 1fr);
    }
    .row-actions .small {
        min-height: 32px;
        padding: 0 0.62rem;
    }
    .user-admin-item,
    .genre-admin-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .reset-form {
        grid-template-columns: 1fr;
    }

    .player-topbar {
        padding: 0.75rem;
        gap: 0.65rem;
    }
    .player-back {
        width: 40px;
        height: 40px;
    }
    .player-controls {
        padding: 0.65rem 0.65rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    }
    .timeline-row {
        gap: 0.45rem;
        margin-bottom: 0.55rem;
    }
    .timeline-row > span {
        min-width: 42px;
        font-size: 0.74rem;
    }
    .control-row {
        flex-wrap: nowrap;
        gap: 0.35rem;
        align-items: center;
    }
    .control-group {
        gap: 0.35rem;
    }
    .right-controls {
        margin-left: auto;
        justify-content: flex-end;
    }
    .icon-button {
        width: 38px;
        min-width: 38px;
        min-height: 38px;
    }
    .select-control {
        min-height: 38px;
        gap: 0.28rem;
        padding: 0 0.28rem 0 0.55rem;
        font-size: 0.82rem;
    }
    .select-control select {
        min-width: 58px;
        max-width: 64px;
        padding: 0.38rem 0.3rem;
        font-size: 0.78rem;
    }
    #volumeRange {
        display: none;
    }
    .subtitle-overlay {
        bottom: clamp(112px, 19vh, 148px);
        width: 94vw;
    }
    .video-player.hide-chrome .subtitle-overlay {
        bottom: clamp(34px, 8vh, 70px);
    }
}

@media (max-width: 410px) {
    .brand span:last-child { max-width: 170px; }
    .movie-row { grid-auto-columns: minmax(124px, 46vw); }
    .movie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .control-row { gap: 0.25rem; }
    .control-group { gap: 0.25rem; }
    .icon-button { width: 36px; min-width: 36px; min-height: 36px; }
    .select-control { padding-left: 0.42rem; }
    .select-control span { display: none; }
    .select-control select { min-width: 56px; max-width: 58px; }
    .player-title-block span { display: none; }
}

/* Mobile player viewport and fullscreen fixes */
:root {
    --player-viewport-height: 100dvh;
    --player-viewport-width: 100vw;
}

body.player-page {
    min-height: var(--player-viewport-height, 100vh);
    background: #000;
    overscroll-behavior: none;
}

.video-player {
    height: var(--player-viewport-height, 100vh);
    min-height: var(--player-viewport-height, 100vh);
}

.icon-button span,
.big-play span {
    display: grid;
    place-items: center;
}

.icon-button svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.player-locked {
    overflow: hidden;
    touch-action: none;
}

.video-player.is-fallback-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100vw;
    height: var(--player-viewport-height, 100vh);
    min-height: var(--player-viewport-height, 100vh);
    overflow: hidden;
    background: #000;
}

.video-player.is-fallback-fullscreen .player-controls {
    bottom: 0;
}


@media (max-width: 700px), (pointer: coarse) and (max-width: 920px) {
    body.player-page {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.player-page.player-locked {
        overflow: hidden;
    }

    .video-player {
        width: 100%;
        height: max(var(--player-viewport-height, 100dvh), 520px);
        min-height: max(var(--player-viewport-height, 100dvh), 520px);
    }

    .video-player.is-fallback-fullscreen {
        height: var(--player-viewport-height, 100dvh);
        min-height: var(--player-viewport-height, 100dvh);
    }

    .player-topbar {
        padding: max(0.55rem, env(safe-area-inset-top, 0px)) 0.6rem 0.5rem;
        gap: 0.55rem;
    }

    .player-back {
        width: 38px;
        height: 38px;
        font-size: 1.65rem;
    }

    .player-controls {
        padding: 0.55rem max(0.55rem, env(safe-area-inset-right, 0px)) max(0.7rem, env(safe-area-inset-bottom, 0px)) max(0.55rem, env(safe-area-inset-left, 0px));
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.72) 58%, transparent);
    }

    .timeline-row {
        gap: 0.42rem;
        margin-bottom: 0.46rem;
    }

    .timeline-row > span {
        min-width: 40px;
        font-size: 0.72rem;
    }

    .seek-shell {
        min-height: 28px;
    }

    .seek-track {
        height: 9px;
    }

    .control-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.35rem;
    }

    .left-controls,
    .right-controls {
        min-width: 0;
        flex-wrap: nowrap !important;
        gap: 0.3rem;
    }

    .right-controls {
        justify-content: end;
        margin-left: 0;
    }

    .icon-button {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 0.95rem;
    }

    .icon-button svg {
        width: 18px;
        height: 18px;
    }

    .select-control {
        width: 62px;
        min-width: 0;
        max-width: 62px;
        min-height: 36px;
        justify-content: center;
        gap: 0;
        padding: 0 0.2rem;
        overflow: hidden;
    }

    .select-control span {
        display: none;
    }

    .select-control select {
        width: 58px;
        min-width: 58px;
        max-width: 58px;
        padding: 0.34rem 0.16rem;
        font-size: 0.76rem;
        text-align: center;
        background: transparent;
        border-color: transparent;
    }

    #volumeRange {
        display: none;
    }

    .subtitle-overlay {
        bottom: clamp(98px, 18vh, 142px);
        width: 94vw;
    }

    .subtitle-overlay span {
        font-size: clamp(0.95rem, 4vw, 1.28rem);
        line-height: 1.28;
    }

    .video-player.hide-chrome .subtitle-overlay {
        bottom: clamp(30px, 8vh, 64px);
    }
}

@media (max-width: 370px) {
    .timeline-row > span {
        min-width: 36px;
        font-size: 0.68rem;
    }

    .left-controls,
    .right-controls,
    .control-row {
        gap: 0.22rem;
    }

    .icon-button {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }

    .select-control {
        width: 56px;
        max-width: 56px;
    }

    .select-control select {
        width: 52px;
        min-width: 52px;
        max-width: 52px;
        font-size: 0.7rem;
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    .video-player {
        height: max(var(--player-viewport-height, 100dvh), 390px);
        min-height: max(var(--player-viewport-height, 100dvh), 390px);
    }

    .video-player.is-fallback-fullscreen {
        height: var(--player-viewport-height, 100dvh);
        min-height: var(--player-viewport-height, 100dvh);
    }

    .player-topbar {
        padding-top: 0.45rem;
        padding-bottom: 0.3rem;
    }

    .player-title-block span {
        display: none;
    }

    .big-play {
        width: 62px;
        height: 62px;
        font-size: 1.35rem;
    }

    .player-controls {
        padding-top: 0.42rem;
        padding-bottom: max(0.48rem, env(safe-area-inset-bottom, 0px));
    }

    .timeline-row {
        margin-bottom: 0.32rem;
    }

    .subtitle-overlay {
        bottom: clamp(84px, 26vh, 122px);
    }
}

.video-player:fullscreen,
.video-player:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    background: #000;
}

.video-player:fullscreen video,
.video-player:-webkit-full-screen video {
    width: 100%;
    height: 100%;
}

/* v4 refinements: navbar search placement, admin movie table, mobile playback compatibility */
.site-header {
    grid-template-columns: auto minmax(220px, 460px) minmax(0, 1fr);
    background: rgba(4, 5, 9, 0.96);
}
.header-search {
    justify-self: start;
    width: min(460px, 100%);
    max-width: 100%;
}
.top-nav {
    justify-self: end;
}
.nav-spacer {
    flex: 1 1 clamp(0.75rem, 4vw, 4rem);
    min-width: clamp(0.75rem, 4vw, 4rem);
}
.genre-menu {
    background: rgba(3, 4, 8, 0.985);
}

.movie-table-card {
    max-width: none;
    padding: clamp(1rem, 2.5vw, 1.5rem);
}
.movie-table-toolbar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}
.movie-admin-search {
    flex: 1 1 340px;
    min-width: min(100%, 240px);
}
.per-page-control {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    color: var(--muted);
    font-weight: 800;
}
.per-page-control select {
    min-height: 38px;
    min-width: 74px;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--line);
}
.movie-table-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}
.movie-table-summary span {
    padding: 0.36rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.045);
    font-size: 0.84rem;
    font-weight: 800;
}
.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
}
.admin-movie-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
}
.admin-movie-table th,
.admin-movie-table td {
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    text-align: left;
    vertical-align: middle;
}
.admin-movie-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--muted);
    background: rgba(5, 6, 10, 0.98);
    font-size: 0.78rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}
.admin-movie-table th a:hover {
    color: var(--text);
}
.admin-movie-table tbody tr:hover {
    background: rgba(245, 184, 75, 0.055);
}
.admin-movie-table tbody tr:last-child td {
    border-bottom: 0;
}
.movie-title-cell {
    min-width: 220px;
}
.movie-title-cell strong,
.movie-title-cell small {
    display: block;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.movie-title-cell small {
    display: none;
    color: var(--muted-soft);
    font-size: 0.78rem;
}
.genres-cell {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
}
.actions-col {
    width: 245px;
}
.table-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    justify-content: flex-end;
}
.ghost-button.tiny,
.danger-button.tiny {
    min-height: 32px;
    padding: 0 0.62rem;
    font-size: 0.78rem;
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    color: var(--muted);
    font-weight: 800;
}
.ghost-button.disabled {
    pointer-events: none;
    opacity: 0.45;
}

.video-player {
    --player-pad-x: clamp(1rem, 3vw, 2rem);
    --player-pad-y: clamp(1rem, 3vw, 2rem);
}
.player-topbar {
    padding: var(--player-pad-y) var(--player-pad-x);
}
.player-controls {
    padding: 1rem var(--player-pad-x) var(--player-pad-y);
}
.subtitle-overlay span {
    font-size: clamp(1.12rem, 2.9vw, 1.78rem);
}
.player-warning {
    position: absolute;
    left: 50%;
    bottom: clamp(126px, 19vh, 210px);
    z-index: 5;
    width: min(92vw, 780px);
    transform: translateX(-50%);
    padding: 0.85rem 1rem;
    border: 1px solid rgba(245, 184, 75, 0.35);
    border-radius: 16px;
    color: #fff4d1;
    background: rgba(8, 7, 5, 0.86);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    text-align: center;
    font-weight: 800;
    pointer-events: none;
}
.player-warning[hidden] {
    display: none;
}

@media (max-width: 1120px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .brand {
        grid-column: 1;
        grid-row: 1;
    }
    .nav-toggle {
        grid-column: 2;
        grid-row: 1;
    }
    .header-search {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-self: stretch;
    }
    .top-nav {
        grid-row: 3;
    }
    .nav-spacer {
        display: none;
    }
}

@media (max-width: 760px) {
    .movie-table-toolbar {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    .movie-admin-search {
        grid-column: 1 / -1;
        width: 100%;
    }
    .per-page-control {
        justify-self: start;
    }
    .admin-movie-table {
        min-width: 760px;
    }
    .hide-sm {
        display: none;
    }
    .movie-title-cell small {
        display: block;
    }
    .actions-col {
        width: 220px;
    }
    .table-actions {
        justify-content: flex-start;
    }
    .pagination {
        justify-content: space-between;
    }
    .player-warning {
        bottom: clamp(110px, 22vh, 162px);
        font-size: 0.9rem;
    }
    .subtitle-overlay span {
        font-size: clamp(1.08rem, 4.6vw, 1.45rem);
    }
}

@media (max-width: 620px) {
    .movie-table-toolbar {
        grid-template-columns: 1fr;
    }
    .movie-table-toolbar .ghost-button.small,
    .movie-table-toolbar .per-page-control {
        width: 100%;
    }
    .per-page-control select {
        margin-left: auto;
    }
    .admin-table-wrap {
        border-radius: 14px;
    }
    .pagination {
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
    }
    .pagination .ghost-button {
        width: 100%;
    }
    .player-controls {
        padding-left: max(0.55rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.55rem, env(safe-area-inset-right, 0px));
    }
}

/* Home Cinema polish and requested UX updates */
:root {
    --list-pink: #ff5ca8;
    --list-pink-2: #ff8ac4;
    --list-pink-soft: rgba(255, 92, 168, 0.18);
}

.brand-mark {
    color: #f8fafc;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.user-chip {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.watchlist-toggle:hover {
    color: #fff;
    background: rgba(255, 92, 168, 0.24);
    border-color: rgba(255, 92, 168, 0.36);
}
.watchlist-toggle.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--list-pink), var(--list-pink-2));
    border-color: rgba(255, 138, 196, 0.64);
    box-shadow: 0 14px 34px rgba(255, 92, 168, 0.28);
}

@media (min-width: 1121px) {
    .movie-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

.detail-content {
    align-content: center;
    gap: 1rem;
}
.detail-title {
    margin-bottom: 0.1rem;
}
.detail-primary-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.detail-play-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0 1.25rem;
    color: #05060a;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 10px;
    font-weight: 950;
    letter-spacing: 0.045em;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.detail-play-button:hover {
    transform: translateY(-1px);
    background: #f4f6fb;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.42);
}
.detail-heart {
    position: static;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    font-size: 1.15rem;
}
.detail-meta-row {
    margin-top: 0.15rem;
}
.detail-meta-row span {
    color: #eef2f8;
    background: rgba(255, 255, 255, 0.075);
}
.detail-description {
    margin: 0;
    color: #d8deea;
    font-size: clamp(1rem, 1.25vw, 1.13rem);
    line-height: 1.65;
}
.detail-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.3rem;
}

.subtitle-overlay i,
.subtitle-overlay em {
    font-style: italic;
}
.subtitle-overlay b,
.subtitle-overlay strong {
    font-weight: 950;
}

@media (pointer: fine) {
    .video-player:fullscreen.hide-chrome,
    .video-player:-webkit-full-screen.hide-chrome,
    .video-player.is-native-fullscreen.hide-chrome,
    .video-player.is-fallback-fullscreen.hide-chrome,
    .video-player:fullscreen.hide-chrome .player-click-zone,
    .video-player:-webkit-full-screen.hide-chrome .player-click-zone,
    .video-player.is-native-fullscreen.hide-chrome .player-click-zone,
    .video-player.is-fallback-fullscreen.hide-chrome .player-click-zone {
        cursor: none;
    }
}


@media (max-width: 860px) {
    .detail-content {
        align-content: start;
    }
    .detail-primary-row {
        align-items: stretch;
    }
    .detail-play-button {
        flex: 1 1 min(220px, 100%);
    }
}

@media (max-width: 620px) {
    .detail-primary-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 48px;
        gap: 0.65rem;
    }
    .detail-play-button {
        width: 100%;
        min-height: 48px;
    }
    .detail-heart {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
    .detail-meta-row {
        gap: 0.45rem;
    }
    .detail-description {
        font-size: 0.98rem;
        line-height: 1.58;
    }
}

/* v6 player and movie-detail fixes */
.brand-mark {
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: 0;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

body.hide-player-cursor,
body.hide-player-cursor *,
.video-player.hide-cursor,
.video-player.hide-cursor * {
    cursor: none !important;
}

.video-player {
    --player-pad-x: clamp(1rem, 3vw, 2rem);
    --player-pad-y: clamp(1rem, 3vw, 2rem);
    --player-fullscreen-pad-x: var(--player-pad-x);
    --player-fullscreen-pad-y: var(--player-pad-y);
}

.video-player .player-topbar {
    padding: var(--player-pad-y) var(--player-pad-x) !important;
}

.video-player .player-controls {
    padding: 1rem var(--player-pad-x) var(--player-pad-y) !important;
}

.video-player.is-fallback-fullscreen,
.video-player:fullscreen,
.video-player:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
}

.movie-page-shell {
    padding-top: clamp(0.85rem, 2vw, 1.4rem);
}

.movie-page-shell .movie-detail {
    align-items: start;
}

.movie-page-shell .detail-content {
    align-content: start;
    min-height: auto;
    padding-top: 0;
}

.movie-page-shell .detail-title {
    margin-top: 0;
}

@media (max-width: 700px), (pointer: coarse) and (max-width: 920px) {
    .video-player .player-topbar {
        padding: max(0.55rem, env(safe-area-inset-top, 0px)) 0.6rem 0.5rem !important;
    }

    .video-player .player-controls {
        padding: 0.55rem max(0.55rem, env(safe-area-inset-right, 0px)) max(0.7rem, env(safe-area-inset-bottom, 0px)) max(0.55rem, env(safe-area-inset-left, 0px)) !important;
    }
}


/* v7 mobile spacing and people feature */
@media (max-width: 860px) {
    .page-shell,
    .detail-shell {
        width: min(100% - 2.5rem, 1540px);
    }
}

@media (max-width: 620px) {
    .page-shell,
    .detail-shell,
    .person-page-shell {
        width: min(100% - 2.5rem, 1540px);
    }
}

.people-assignment-box {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.045);
}
.subtitle-box-heading,
.person-input-heading,
.admin-tools-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.subtitle-box-heading h2,
.person-input-heading h3,
.admin-tools-heading h2 {
    margin: 0;
}
.people-assignment-grid,
.people-admin-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.person-input-group,
.person-input-rows {
    display: grid;
    gap: 0.75rem;
}
.person-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
}
.person-input-row input {
    width: 100%;
}
.detail-people {
    display: grid;
    gap: 0.9rem;
    margin-top: 0.1rem;
}
.detail-people-row {
    display: grid;
    gap: 0.55rem;
}
.detail-people-row h2 {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.detail-people-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.person-chip,
.person-admin-main {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.person-chip {
    padding: 0.4rem 0.65rem 0.4rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #f2f5fa;
    background: rgba(255, 255, 255, 0.06);
    font-weight: 850;
}
.person-chip:hover,
.person-admin-main:hover {
    background: rgba(255, 255, 255, 0.1);
}
.person-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--panel-solid);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.people-admin-list {
    display: grid;
    gap: 0.65rem;
}
.person-admin-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
}
.person-admin-main span {
    display: grid;
    gap: 0.1rem;
}
.person-admin-main small {
    color: var(--muted);
}
.person-page-shell {
    padding-top: 1.2rem;
}
.person-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    padding: clamp(1.1rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
}
.person-hero-avatar {
    width: clamp(112px, 18vw, 180px);
    height: clamp(112px, 18vw, 180px);
    object-fit: cover;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--panel-solid);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.person-hero-content {
    min-width: 0;
}
.person-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.person-stats span {
    display: inline-grid;
    gap: 0.12rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.055);
}
.person-stats strong {
    color: var(--text);
    font-size: 1.05rem;
}

@media (max-width: 860px) {
    .people-assignment-grid,
    .people-admin-layout,
    .person-hero {
        grid-template-columns: 1fr;
    }
    .subtitle-box-heading,
    .person-input-heading,
    .admin-tools-heading,
    .person-admin-item {
        align-items: stretch;
        flex-direction: column;
    }
    .person-admin-item {
        display: grid;
    }
}

@media (max-width: 520px) {
    .person-input-row {
        grid-template-columns: 1fr;
    }
    .detail-people-list {
        display: grid;
    }
    .person-chip {
        border-radius: 16px;
    }
}

/* v8 person avatar editing and movie detail polish */
.person-admin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.person-avatar-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.person-avatar-form input[type="file"] {
    width: min(230px, 100%);
    padding: 0.52rem 0.6rem;
    border-radius: 10px;
    font-size: 0.82rem;
}
.person-avatar {
    border: 0;
    border-radius: 10px;
}
.detail-people .person-chip {
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    border-radius: 10px;
}
.detail-people .person-avatar {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 10px;
    border: 0;
}
.detail-primary-row {
    margin-top: 20px;
}
.detail-play-button {
    position: relative;
    overflow: hidden;
    color: #04120b;
    background: linear-gradient(135deg, #44f08f, #19c76d 55%, #0ea85a);
    border-color: rgba(113, 255, 176, 0.62);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34), 0 0 32px rgba(25, 199, 109, 0.28);
}
.detail-play-button::after {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: -35%;
    width: 32%;
    transform: translateX(-160%) skewX(-22deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
    pointer-events: none;
    animation: watch-button-shine 3.1s ease-in-out infinite;
}
.detail-play-button:hover {
    background: linear-gradient(135deg, #66ffa5, #28df7e 55%, #14bb66);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.42), 0 0 42px rgba(25, 199, 109, 0.38);
}
.detail-play-button span {
    position: relative;
    z-index: 1;
}
@keyframes watch-button-shine {
    0%, 48% { transform: translateX(-170%) skewX(-22deg); opacity: 0; }
    58% { opacity: 1; }
    78%, 100% { transform: translateX(520%) skewX(-22deg); opacity: 0; }
}

@media (max-width: 860px) {
    .person-admin-actions,
    .person-avatar-form {
        justify-content: flex-start;
    }
}

/* v7 admin people table */
.people-table-card {
    max-width: none;
}
.person-create-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, auto) auto;
    gap: 0.65rem;
    align-items: end;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}
.person-create-name input {
    width: 100%;
}
.person-create-image {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 850;
}
.admin-people-table {
    min-width: 1060px;
}
.person-title-cell {
    min-width: 260px;
}
.person-table-identity {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: var(--text);
}
.person-table-identity:hover strong {
    text-decoration: underline;
}
.person-table-identity span,
.person-table-identity strong,
.person-table-identity small {
    display: block;
    min-width: 0;
}
.person-table-identity strong,
.person-table-identity small {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.person-table-identity small {
    color: var(--muted-soft);
    font-size: 0.78rem;
}
.person-table-avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--panel-solid);
}
.person-name-input {
    width: min(240px, 100%);
    min-height: 38px;
    padding: 0.48rem 0.62rem;
    border-radius: 12px;
}
.person-image-control input[type="file"] {
    width: min(230px, 100%);
    font-size: 0.78rem;
}
.person-count-cell {
    color: var(--muted);
    font-weight: 900;
}
.person-updated-cell {
    white-space: nowrap;
    color: var(--muted);
}
.person-table-actions {
    min-width: 245px;
}
.primary-button.tiny {
    min-height: 32px;
    padding: 0 0.62rem;
    font-size: 0.78rem;
}

@media (max-width: 760px) {
    .person-create-toolbar {
        grid-template-columns: 1fr;
    }
    .person-create-toolbar .primary-button.small,
    .person-create-image {
        width: 100%;
    }
    .admin-people-table {
        min-width: 820px;
    }
    .person-table-actions {
        min-width: 220px;
    }
}

/* Responsive, cinema-style subtitles */
.video-player {
    --subtitle-font-size: clamp(1rem, 4vh, 5.5rem);
    --subtitle-picture-bottom: 15.5vh;
    --subtitle-controls-bottom: 15.5vh;
    --subtitle-max-width: 88vw;
}

.subtitle-overlay,
.video-player.hide-chrome .subtitle-overlay {
    bottom: var(--subtitle-controls-bottom);
    width: min(var(--subtitle-max-width), 92%);
    opacity: 1;
}

.video-player.hide-chrome .subtitle-overlay {
    bottom: var(--subtitle-picture-bottom);
}

.subtitle-overlay > span,
.subtitle-overlay > span span {
    display: inline;
    max-width: 100%;
    padding: 0;
    color: #fff;
    background: transparent;
    border-radius: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-shadow: inherit;
}

.subtitle-overlay > span {
    font-size: var(--subtitle-font-size);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: 0.005em;
    white-space: pre-line;
    overflow-wrap: break-word;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.98),
        0 0 2px rgba(0, 0, 0, 0.96),
        1px 1px 1px rgba(0, 0, 0, 0.88),
        -1px -1px 1px rgba(0, 0, 0, 0.72);
}

/* v11 series library, episodes, and playback progress */
.card-progress {
    position: relative;
    z-index: 3;
    display: block;
    height: 5px;
    margin: -0.92rem 0.45rem 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}
.card-progress > span,
.episode-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.continue-card .movie-meta strong { color: #fff; }
.continue-section { content-visibility: visible; }
.series-seasons-section { margin-top: 1.5rem; }
.season-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 0.85rem;
}
.season-tile {
    display: grid;
    gap: 0.25rem;
    min-height: 94px;
    align-content: center;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.045);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.season-tile span { color: var(--muted); font-size: 0.84rem; }
.season-tile.is-owned:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 9, 53, 0.55);
    background: var(--accent-soft);
}
.season-tile.is-missing {
    opacity: 0.48;
    filter: grayscale(0.75);
    cursor: not-allowed;
}
.season-page-shell { padding-top: 1.35rem; }
.season-header {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    gap: 1.3rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
}
.season-header img {
    width: 118px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 14px;
}
.season-header h1 { margin: 0.3rem 0; }
.season-header p { margin: 0; color: var(--muted); }
.season-switcher {
    display: flex;
    gap: 0.55rem;
    margin: 1rem 0 0;
    padding: 0.25rem 0 0.55rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.season-switcher::-webkit-scrollbar { display: none; }
.season-switcher a,
.season-switcher span {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 48px;
    min-height: 42px;
    padding: 0 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font-weight: 900;
}
.season-switcher a:hover,
.season-switcher a.active {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent-soft);
}
.season-switcher .is-missing { opacity: 0.34; cursor: not-allowed; }
.episode-section { margin-top: 0.5rem; }
.episode-list { display: grid; gap: 0.75rem; }
.episode-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: none;
}
.episode-row.is-completed { border-color: rgba(61, 220, 151, 0.3); }
.episode-number {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
    font-weight: 950;
}
.episode-copy { min-width: 0; }
.episode-title-line { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.episode-title-line h3 { margin: 0; font-size: 1rem; }
.episode-title-line span,
.episode-copy small { color: var(--muted); white-space: nowrap; }
.episode-copy p { margin: 0.3rem 0; color: var(--muted); font-size: 0.9rem; }
.episode-progress {
    width: 100%;
    height: 4px;
    margin-top: 0.65rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}
.episode-actions { display: flex; align-items: center; gap: 0.55rem; }
.episode-play {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding-left: 3px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 10px 28px rgba(229, 9, 53, 0.35);
}
.next-episode-panel {
    position: absolute;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: clamp(7.5rem, 16vh, 11rem);
    z-index: 18;
    display: grid;
    gap: 0.65rem;
    width: min(390px, calc(100vw - 2rem));
    padding: 1rem;
    border-radius: 18px;
    background: rgba(13, 15, 22, 0.94);
}
.next-episode-panel[hidden] { display: none; }
.next-episode-kicker { color: var(--accent-2); font-size: 0.78rem; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; }
.next-episode-panel > strong { font-size: 1.05rem; }
.next-episode-panel > div { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.admin-season-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.75rem;
}
.admin-season-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
}
.admin-season-card > div { display: grid; }
.admin-season-card span { color: var(--muted); font-size: 0.82rem; }
.admin-season-card.is-empty { opacity: 0.72; }
.admin-episode-list { display: grid; gap: 0.5rem; }
.admin-episode-link {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}
.admin-episode-link:hover,
.admin-episode-link.active { border-color: rgba(229, 9, 53, 0.55); background: var(--accent-soft); }
.admin-episode-link span,
.admin-episode-link small { color: var(--muted); }
.danger-zone { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
    .season-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .season-header { grid-template-columns: 82px minmax(0, 1fr); gap: 0.9rem; }
    .season-header img { width: 82px; border-radius: 11px; }
    .episode-row { grid-template-columns: 38px minmax(0, 1fr); gap: 0.75rem; padding: 0.85rem; }
    .episode-number { width: 36px; height: 36px; }
    .episode-actions { grid-column: 2; justify-content: flex-start; }
    .episode-title-line { display: grid; gap: 0.1rem; }
    .next-episode-panel { right: 0.75rem; bottom: 8.5rem; width: calc(100vw - 1.5rem); }
    .admin-season-grid { grid-template-columns: 1fr; }
}

/* Continue Watching refinements */
.continue-action-label {
    color: var(--accent-2) !important;
    font-weight: 850;
}
.start-over-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.episode-actions .ghost-button.tiny {
    white-space: nowrap;
}

/* Personalized recommendations */
.recommendation-section { content-visibility: visible; }