:root {
    --bg:       #0f0f0f;
    /* What is ACTUALLY behind the page. --bg is not it below 768px, where the
       body is repainted a dark purple, and anything fading to --bg there met
       that purple in a line. Anything that has to blend into the page reads
       this instead. */
    --page-bg:     #0f0f0f;
    --page-bg-rgb: 15, 15, 15;
    --bg-card:  #181818;
    --bg-raise: #222222;
    --accent:   #ff571a;
    --accent-h: #ff6b2b;
    --text-1:   #ffffff;
    --text-2:   #a8a8a8;
    --text-3:   #6b6b6b;
    --border:   rgba(255,255,255,0.08);
    --glass:    rgba(15,15,15,0.88);
    --radius:   8px;
    --shadow:   0 8px 32px rgba(0,0,0,0.6);
}

/* --- Reset & base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text-1);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Keep the layout fixed on touch: no double-tap zoom, no rubber-band
       scroll past the ends, no automatic text reflow on rotation. */
    touch-action: manipulation;
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
}

/* --- Auth overlay --- */
.hidden { display: none !important; }

.auth-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: #000;
    overflow-y: auto;
}
.auth-overlay.hidden { display: none !important; }


/* --- AUTH / FLIXED-STYLE LOGIN --- */
.auth-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: #0e0e12;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 100vh;
}
.auth-overlay.hidden { display: none !important; }

.fx-card {
    width: 100%; max-width: 420px;
    background: #18181f;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 40px 36px 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}

.fx-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
}
.fx-logo-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(255,87,26,0.45));
}
.fx-logo-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 4px;
    background: linear-gradient(135deg, #ff571a 0%, #ffaa00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    user-select: none;
}

.fx-tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 0;
}
.fx-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: rgba(255,255,255,0.45); font-size: 0.95rem; font-weight: 500;
    padding: 0 2px 12px; cursor: pointer; transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}
.fx-tab.active { color: #fff; border-bottom-color: #fff; }
.fx-tab:hover:not(.active) { color: rgba(255,255,255,0.7); }

.fx-field {
    display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px;
}
.fx-field label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 1.2px;
    color: rgba(255,255,255,0.45);
}
.fx-field input {
    background: #111116; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 12px 14px;
    color: #fff; font-size: 0.95rem; outline: none;
    transition: border-color 0.15s;
    width: 100%;
}
.fx-field input:focus { border-color: rgba(255,255,255,0.35); }
.fx-field input::placeholder { color: rgba(255,255,255,0.25); }

.fx-submit {
    width: 100%; margin-top: 8px;
    padding: 13px; border: none; border-radius: 8px;
    background: #fff; color: #0e0e12;
    font-size: 0.95rem; font-weight: 700; cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    letter-spacing: 0.2px;
}
.fx-submit:hover { background: #e8e8e8; }
.fx-submit:active { transform: scale(0.99); }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.fx-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.fx-submit:disabled:hover { background: #fff; }

.auth-pw-wrap { position: relative; display: flex; }
.auth-pw-wrap input { flex: 1; padding-right: 40px; }
.auth-pw-eye {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 38px; background: none; border: none;
    color: var(--text-3); cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: color 0.15s;
}
.auth-pw-eye:hover { color: var(--text-1); }

.auth-error {
    font-size: 12px; color: #ff5555; min-height: 16px;
    padding: 0 2px;
}

/* --- Admin panel --- */
.admin-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.88);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.admin-panel {
    width: 560px; max-width: 100%; max-height: 88vh;
    background: #141414; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px; display: flex; flex-direction: column; overflow: hidden;
}
.admin-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 14px; border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.admin-panel-title { font-size: 15px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.admin-panel-title i { color: var(--accent); }
.admin-close-btn {
    background: none; border: none; color: var(--text-3);
    font-size: 17px; cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1;
}
.admin-close-btn:hover { color: var(--text-1); background: rgba(255,255,255,0.07); }
.admin-pane-actions {
    padding: 14px 22px 10px; flex-shrink: 0;
}
.admin-action-btn {
    background: var(--accent); border: none; color: #fff;
    font-size: 13px; font-weight: 600; padding: 8px 16px;
    border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    transition: opacity 0.15s;
}
.admin-action-btn:hover { opacity: 0.85; }
.admin-list {
    flex: 1; overflow-y: auto; padding: 0 22px 16px;
    display: flex; flex-direction: column; gap: 6px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.admin-row {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.04); border-radius: 8px; padding: 10px 14px;
}
.admin-row-main { font-size: 13px; color: var(--text-1); font-family: monospace; letter-spacing: 0.5px; flex: 1; }
.admin-row-sub { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.admin-row-sub.unused { color: #0c8; }
.admin-row-sub.used { color: var(--text-3); }
.admin-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-btn {
    background: none; border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-2); border-radius: 6px; padding: 4px 8px;
    font-size: 12px; cursor: pointer; transition: all 0.15s; line-height: 1;
}
.admin-btn:hover { color: var(--text-1); border-color: rgba(255,255,255,0.3); }
.admin-btn.danger:hover { color: #f55; border-color: rgba(255,80,80,0.4); }
.admin-loading, .admin-empty { color: var(--text-3); font-size: 13px; padding: 12px 0; }
.admin-error { color: #f55; font-size: 13px; padding: 12px 0; }

/* --- Sidebar --- */
/* --- Top Nav --- */
/* Added to the Home Screen the app runs standalone with a translucent status
   bar, so the page starts at the very top of the screen and the nav links sat
   under the clock. --nav-h is what everything else pads itself by, so the
   inset belongs inside it; in a browser tab it is 0 and nothing changes. */
:root { --nav-bar-h: 68px; --nav-h: calc(68px + env(safe-area-inset-top, 0px)); }

.topnav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: var(--nav-h); padding-top: env(safe-area-inset-top, 0px);
    background: linear-gradient(to bottom, rgba(0,0,0,0.82) 0%, transparent 100%);
    transition: background 0.4s ease;
}
.topnav.scrolled {
    background: rgba(15,15,15,0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

.tn-inner {
    display: flex; align-items: center;
    height: var(--nav-bar-h); padding: 0 4%; gap: 20px;
}
.tn-left {
    display: flex; align-items: center; gap: 28px; flex: 1; min-width: 0;
}
.tn-logo {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none; flex-shrink: 0; text-decoration: none;
}
.tn-logo-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(255,87,26,0.4));
    transition: transform 0.18s;
}
.tn-logo:hover .tn-logo-icon { transform: scale(1.08); }
.tn-links {
    display: flex; align-items: center; gap: 0;
    list-style: none; margin: 0; padding: 0;
}
.tn-link {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.72); font-size: 13.5px; font-weight: 500;
    font-family: 'Inter', sans-serif; padding: 6px 12px; border-radius: 6px;
    white-space: nowrap; transition: color 0.15s, background 0.15s;
}
.tn-link:hover { color: #fff; background: rgba(255,255,255,0.07); }
.tn-link.active { color: #fff; font-weight: 600; }

.tn-right {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}

.tn-profile-wrap { position: relative; }
.tn-profile-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    border-radius: 8px; transition: background 0.15s;
}
.tn-profile-btn:hover { background: rgba(255,255,255,0.08); }

/* --- Topnav search bar --- */
.tn-search-bar {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: rgba(10,10,10,0.98); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 14px 4%;
    display: none;
}
.tn-search-bar.open { display: block; animation: tnSearchIn 0.2s ease; }
@keyframes tnSearchIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Mobile bottom nav --- */
.mobile-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: rgba(13,13,13,0.97); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
}
.mn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; color: rgba(255,255,255,0.45);
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
    font-family: 'Inter', sans-serif;
    padding: 9px 4px 7px; cursor: pointer;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    text-transform: uppercase;
}
.mn-item i { font-size: 18px; transition: transform 0.15s; }
.mn-item.active { color: #fff; }
.mn-item.active i { transform: scale(1.1); }

/* --- Main wrap --- */
.main-wrap { /* nav floats above; no margin-left needed */ }

/* --- Sidebar shared transition helpers --- */
.profile-nav-avatar {
    width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800; color: #fff;
    font-family: 'Inter', sans-serif;
    border: 2px solid transparent; transition: border-color 0.2s;
}
.tn-profile-btn:hover .profile-nav-avatar { border-color: rgba(255,255,255,0.5); }
.profile-caret {
    font-size: 10px; color: rgba(255,255,255,0.6); flex-shrink: 0;
    transition: transform 0.22s;
}
.profile-wrap.open .profile-caret { transform: rotate(180deg); }

/* --- Always-visible player exit button --- */
.player-exit-btn {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 30; /* above top bar, above rd-custom-controls */
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(0,0,0,0.55); border: none; color: #fff;
    font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s, background 0.2s, transform 0.15s;
    backdrop-filter: blur(6px);
}
.player-exit-btn.show { opacity: 0.55; pointer-events: auto; }
.player-exit-btn.show:hover { opacity: 1; background: rgba(0,0,0,0.75); transform: scale(1.08); }
/* hide when modal is not active so it doesn't overlap the detail panel */
.video-modal:not(.active) .player-exit-btn { display: none; }

/* Touch devices have no hover, and in embed mode the whole player area is an
   <iframe> that swallows taps before they reach the wrapper --- so the chrome
   that normally reveals this button can never be triggered. Without this rule
   there is no way out of the embed player at all. Keep it on screen always. */
@media (hover: none) {
    .video-modal.active .player-exit-btn {
        opacity: 0.92;
        pointer-events: auto;
        background: rgba(0,0,0,0.72);
    }
}


/* --- Profile dropdown (opens upward from sidebar bottom) --- */
.profile-wrap { position: relative; }
.profile-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 220px; background: rgba(20,20,20,0.97);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
    padding: 8px 0; z-index: 2000;
    box-shadow: 0 8px 40px rgba(0,0,0,0.9);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.profile-wrap.open .profile-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.pd-divider {
    height: 1px; background: rgba(255,255,255,0.1); margin: 6px 0;
}
.pd-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 16px; background: none; border: none;
    color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 500;
    font-family: 'Inter', sans-serif; cursor: pointer; text-align: left;
    transition: background 0.15s, color 0.15s;
}
.pd-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pd-item i { width: 16px; text-align: center; opacity: 0.7; }
.pd-signout-btn { color: rgba(255,255,255,0.5); }
.pd-signout-btn:hover { color: var(--accent); }

/* Profile switch rows inside dropdown */
.pd-switch-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 8px 16px; background: none; border: none;
    cursor: pointer; transition: background 0.15s;
}
.pd-switch-row:hover { background: rgba(255,255,255,0.08); }
.pd-switch-name {
    font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 500;
    font-family: 'Inter', sans-serif;
}
.pd-switch-row.active-profile .pd-switch-name { color: #fff; font-weight: 700; }
.pd-add-row { color: rgba(255,255,255,0.5); }
.pd-add-row:hover { color: rgba(255,255,255,0.9); }

/* --- Profile Manager overlay --- */
.profile-manager {
    position: fixed; inset: 0; z-index: 3000;
    background: #141414;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.profile-manager.active { opacity: 1; visibility: visible; }
.pm-content { text-align: center; }
.pm-title {
    font-family: 'Inter', sans-serif; font-size: 3.2rem; font-weight: 400;
    color: #fff; margin-bottom: 48px; letter-spacing: -0.5px;
}
.pm-grid {
    display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 48px;
}
.pm-profile-card {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    cursor: pointer; width: 100px;
    transition: transform 0.2s;
}
.pm-profile-card:hover { transform: scale(1.05); }
.pm-avatar {
    width: 100px; height: 100px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 44px; font-weight: 900; color: #fff;
    border: 3px solid transparent;
    transition: border-color 0.2s;
    position: relative;
}
.pm-profile-card:hover .pm-avatar { border-color: #fff; }
.pm-avatar-active { border-color: #fff !important; }
.pm-edit-overlay {
    position: absolute; inset: 0; border-radius: 6px;
    background: rgba(0,0,0,0.55); opacity: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff;
    transition: opacity 0.2s;
    /* This covers the whole avatar, so while it is invisible it must not take
       the click --- otherwise choosing a profile silently opens Edit instead of
       entering it. Editing is offered in manage mode and by the switcher's
       own pill below; everywhere else the avatar means "use this profile". */
    pointer-events: none;
}
.pm-name {
    font-size: 14px; color: rgba(255,255,255,0.65); font-weight: 500;
    font-family: 'Inter', sans-serif;
}
.pm-profile-card:hover .pm-name,
.pm-profile-card.is-active .pm-name { color: #fff; }
.pm-add-card .pm-avatar {
    background: rgba(255,255,255,0.1); border: 3px solid rgba(255,255,255,0.3);
}
.pm-add-card:hover .pm-avatar { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.6); }
.pm-actions { display: flex; gap: 12px; justify-content: center; }
.pm-manage-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.65); padding: 12px 32px;
    font-size: 15px; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; border-radius: 3px; cursor: pointer;
    font-family: 'Inter', sans-serif; transition: all 0.2s;
}
.pm-manage-btn:hover { border-color: #fff; color: #fff; }
.pm-done-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.65); padding: 12px 32px;
    font-size: 15px; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; border-radius: 3px; cursor: pointer;
    font-family: 'Inter', sans-serif; transition: all 0.2s;
}
.pm-done-btn:hover { border-color: #fff; color: #fff; }

/* --- Edit Profile modal --- */
.edit-profile-modal {
    position: fixed; inset: 0; z-index: 3100;
    background: rgba(0,0,0,0.75); display: flex;
    align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.edit-profile-modal.active { opacity: 1; visibility: visible; }
.ep-modal-box {
    background: #1e1e1e; border-radius: 18px;
    padding: 32px 28px 28px; width: 420px; max-width: 94vw;
    max-height: 90vh; overflow-y: auto; scrollbar-width: none;
    box-shadow: 0 40px 100px rgba(0,0,0,0.95);
    position: relative; display: flex; flex-direction: column; gap: 14px;
}
.ep-modal-box::-webkit-scrollbar { display: none; }
.ep-modal-box .ep-close-btn {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: none;
    color: #fff; font-size: 14px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: background 0.15s;
}
.ep-modal-box .ep-close-btn:hover { background: rgba(255,255,255,0.2); }
.ep-modal-box h2 { font-size: 20px; font-weight: 700; color: #fff; text-align: center; margin: 0; }
.ep-subtitle { font-size: 13px; color: var(--text-3); text-align: center; margin: 0; }

/* Avatar grid --- image cards */
.ep-avatar-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.ep-avatar-opt {
    aspect-ratio: 1; border-radius: 10px; overflow: hidden;
    cursor: pointer; border: 3px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
    background: rgba(255,255,255,0.07);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
}
.ep-avatar-opt img { width: 100%; height: 100%; object-fit: cover; }
.ep-avatar-opt:hover { transform: scale(1.06); border-color: rgba(255,255,255,0.5); }
.ep-avatar-opt.selected { border-color: #fff; }

/* Upload button */
.ep-upload-btn {
    width: 100%; padding: 11px; background: transparent;
    border: 1.5px dashed rgba(255,255,255,0.2); border-radius: 10px;
    color: var(--text-2); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.15s; display: flex;
    align-items: center; justify-content: center; gap: 8px;
}
.ep-upload-btn:hover { border-color: rgba(255,255,255,0.5); color: #fff; }

/* Name input */
.ep-name-input {
    width: 100%; background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.12);
    color: #fff; padding: 12px 16px; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
    outline: none; transition: border-color 0.2s; box-sizing: border-box;
}
.ep-name-input:focus { border-color: rgba(255,255,255,0.4); }
.ep-name-input::placeholder { color: var(--text-3); }

/* Kids toggle row */
.ep-kids-row {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 12px 14px;
}
.ep-kids-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-1); }
.ep-kids-sub { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.ep-kids-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ep-kids-toggle input { opacity: 0; width: 0; height: 0; }
.ep-kids-slider {
    position: absolute; inset: 0; background: rgba(255,255,255,0.12);
    border-radius: 24px; cursor: pointer; transition: background 0.2s;
}
.ep-kids-slider::before {
    content: ''; position: absolute; width: 18px; height: 18px;
    left: 3px; top: 3px; background: #fff; border-radius: 50%;
    transition: transform 0.2s;
}
.ep-kids-toggle input:checked + .ep-kids-slider { background: #0071eb; }
.ep-kids-toggle input:checked + .ep-kids-slider::before { transform: translateX(20px); }

/* PIN input in edit modal */
.ep-pin-input {
    width: 80px; background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 8px; padding: 8px 10px; color: var(--text-1);
    font-size: 20px; text-align: center; letter-spacing: 6px;
    outline: none; transition: border-color 0.2s; flex-shrink: 0;
}
.ep-pin-input:focus { border-color: rgba(255,255,255,0.4); }
.ep-pin-input::placeholder { letter-spacing: 4px; font-size: 18px; }

/* PIN Entry Overlay */
.pin-entry-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.92);
    display: flex; align-items: center; justify-content: center;
}
.pin-entry-overlay.hidden { display: none; }
.pin-entry-box {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 40px 32px; max-width: 320px; width: 100%;
}
.pin-avatar {
    width: 72px; height: 72px; border-radius: 8px;
    background: #e50914; display: flex; align-items: center;
    justify-content: center; font-size: 32px; overflow: hidden;
}
.pin-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pin-profile-name { font-size: 18px; font-weight: 700; color: var(--text-1); }
.pin-title { font-size: 14px; color: var(--text-3); }
.pin-dots {
    display: flex; gap: 14px; margin: 4px 0;
}
.pin-dots span {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    transition: background 0.15s, border-color 0.15s;
}
.pin-dots span.filled { background: #fff; border-color: #fff; }
.pin-error { font-size: 13px; color: #ff4444; min-height: 18px; }
.pin-numpad {
    display: grid; grid-template-columns: repeat(3, 72px);
    gap: 10px; margin-top: 4px;
}
.pin-key {
    width: 72px; height: 56px; border-radius: 10px;
    background: rgba(255,255,255,0.08); border: none;
    color: var(--text-1); font-size: 22px; font-weight: 600;
    cursor: pointer; transition: background 0.12s; font-family: 'Inter', sans-serif;
}
.pin-key:hover { background: rgba(255,255,255,0.16); }
.pin-key:active { background: rgba(255,255,255,0.24); }
.pin-back { font-size: 18px; }
.pin-cancel {
    margin-top: 4px; background: none; border: none;
    color: var(--text-3); font-size: 13px; cursor: pointer;
    padding: 6px 16px; border-radius: 6px; transition: color 0.15s;
}
.pin-cancel:hover { color: var(--text-1); }
@keyframes pin-shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}
.pin-dots.shake { animation: pin-shake 0.4s ease; }

/* Save button */
.ep-save-btn {
    width: 100%; padding: 13px; background: #fff; color: #111;
    border: none; border-radius: 10px; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: background 0.15s; font-family: 'Inter', sans-serif;
}
.ep-save-btn:hover { background: #e0e0e0; }

/* Profile order */
.ep-order-section { display: flex; flex-direction: column; gap: 10px; }
.ep-order-label { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 0.8px; text-align: center; }
.ep-order-list { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ep-order-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ep-order-avatar {
    width: 54px; height: 54px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; overflow: hidden; flex-shrink: 0;
}
.ep-order-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ep-order-name { font-size: 11px; color: var(--text-2); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-order-arrows { display: flex; gap: 4px; }
.ep-order-arrows button {
    width: 22px; height: 22px; background: rgba(255,255,255,0.1);
    border: none; color: #fff; border-radius: 4px; cursor: pointer;
    font-size: 11px; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.ep-order-arrows button:hover { background: rgba(255,255,255,0.25); }
.ep-order-arrows button:disabled { opacity: 0.25; cursor: default; }
.ep-order-hint { font-size: 11px; color: var(--text-3); text-align: center; margin: 0; }

/* Delete button */
.ep-delete-btn {
    width: 100%; padding: 13px; font-size: 14px; background: transparent;
    border: 1.5px solid rgba(255,87,26,0.5); color: rgba(255,87,26,0.85);
    border-radius: 10px; cursor: pointer; font-family: 'Inter', sans-serif;
    font-weight: 600; transition: all 0.2s;
}
.ep-delete-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,87,26,0.08); }

/* --- Managing mode --- */
.pm-profile-card.manage-mode .pm-edit-overlay { opacity: 1; pointer-events: auto; }

/* --- Hero --- */
.hero {
    height: 92vh; min-height: 600px;
    position: relative; display: flex; align-items: flex-end;
    padding: 0 48px 80px;
    transition: opacity 0.5s ease;
}
/* The artwork, on its own layer under the scrims and the text. */
.hero-art {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center 20%;
}
.hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(to right,  rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 45%, transparent 75%),
        linear-gradient(to top,    rgba(0,0,0,0.9)  0%, rgba(0,0,0,0.1) 40%, transparent 70%);
}
.hero-fade {
    /* left: 0 matters. Without it this sits at its static position - inside
       the hero's 48px padding - while still being 100% wide, so it ran 48px
       past the right edge and gave the whole page a horizontal scroll. */
    position: absolute; bottom: 0; left: 0; width: 100%; height: 22vh;
    background: linear-gradient(to top, var(--page-bg) 0%, transparent 100%); z-index: 1;
}
.hero-content { max-width: 600px; z-index: 2; }
.hero-meta {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; font-size: 13px; font-weight: 600;
}
.match-score {
    color: #4ade80; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; gap: 5px;
}
.match-score::before { content: '✦'; font-size: 9px; }
.year, .rating {
    color: var(--text-2); border: 1px solid rgba(255,255,255,0.25);
    padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.hero-title {
    font-family: 'Bebas Neue', sans-serif; font-size: clamp(3.5rem, 7vw, 5.5rem);
    line-height: 0.95; letter-spacing: 1px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
    margin-bottom: 18px;
}
.hero-description {
    font-size: 1rem; line-height: 1.7; margin-bottom: 28px;
    color: rgba(255,255,255,0.85);
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
    max-width: 520px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.hero-buttons { display: flex; align-items: center; gap: 12px; }

/* --- Buttons --- */
.btn {
    padding: 11px 28px; border: none; border-radius: 6px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 9px;
    transition: all 0.2s ease; font-family: 'Inter', sans-serif;
    letter-spacing: 0.2px; white-space: nowrap;
}
.btn-play {
    background: var(--text-1); color: #000;
}
.btn-play:hover { background: rgba(255,255,255,0.88); transform: scale(1.03); }
.btn-play:active { transform: scale(0.98); }
.btn-info {
    background: rgba(255,255,255,0.14); color: var(--text-1);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    margin-left: 0;
}
.btn-info:hover { background: rgba(255,255,255,0.22); transform: scale(1.03); }
.btn-info:active { transform: scale(0.98); }

/* --- Content rows --- */
.content { padding: 0 0 100px; margin-top: -40px; position: relative; z-index: 3; }
.mobile-catalog-head, .mobile-view-all { display: none; }
.row {
    margin-bottom: 48px; padding: 0 48px;
    position: relative;
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.row.visible { opacity: 1; transform: translateY(0); }
.row-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.row-title {
    font-size: 1.05rem; font-weight: 700; color: var(--text-1);
    letter-spacing: 0.2px; display: flex; align-items: center; gap: 8px;
}
.row-title::before {
    content: ''; display: inline-block;
    width: 3px; height: 1em; background: var(--accent);
    border-radius: 2px; vertical-align: middle;
}
#continue-watching-section .row-title::before { display: none; }
.row-nav { display: flex; gap: 4px; visibility: hidden; }
.row--overflow .row-nav { visibility: visible; }
.row-nav-btn {
    background: rgba(255,255,255,0.07); border: 1px solid var(--border);
    color: var(--text-2); width: 28px; height: 28px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 11px; transition: all 0.18s;
}
.row-nav-btn:hover { background: rgba(255,255,255,0.16); color: var(--text-1); transform: scale(1.1); }
/* --- Catalogue filter menus --- */
.mobile-filter-row button.open {
    border-color: rgba(255,255,255,0.45) !important;
    color: #fff !important;
}
.mobile-filter-row button i { transition: transform 0.15s; }
.mobile-filter-row button.open i { transform: rotate(180deg); }
.filter-menu {
    position: absolute; z-index: 60;
    min-width: 172px; max-height: 320px; overflow-y: auto;
    background: rgba(20,18,24,0.98);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.75);
    display: flex; flex-direction: column; gap: 2px;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.filter-menu-item {
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 14px;
    color: #d8cde0; text-align: left;
    padding: 9px 12px; border-radius: 8px; white-space: nowrap;
}
.filter-menu-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.filter-menu-item.active { color: var(--accent); font-weight: 600; }

/* While a filter is on, the page's own curated rows are replaced by results. */
.content-page.filtered > section.row:not([id^="dyn-row-"]) { display: none; }

/* --- Endless rows sentinel --- */
.endless-sentinel { height: 8px; }
.endless-sentinel.loading {
    height: 76px; display: flex; align-items: center; justify-content: center;
}
.endless-sentinel.loading::after {
    content: ''; width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.16);
    border-top-color: rgba(255,255,255,0.7);
    animation: endless-spin 0.7s linear infinite;
}
@keyframes endless-spin { to { transform: rotate(360deg); } }
.endless-sentinel.done { height: 48px; }

.row-edge-arrow {
    position: absolute; top: 40px; bottom: 0;
    width: 54px; z-index: 30;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s; cursor: pointer;
    /* These sit above the first and last card of every row. Without this they
       stay clickable while invisible, so on a touch screen --- where the hover
       that reveals them never happens --- tapping the edge of a row scrolls it
       instead of opening that title. Hit-testing follows visibility. */
    pointer-events: none;
}
.row--overflow:hover .row-edge-arrow { opacity: 1; pointer-events: auto; }
.row-edge-arrow-left  { left: 0;  background: linear-gradient(to right, rgba(15,15,15,0.95) 20%, transparent 100%); }
.row-edge-arrow-right { right: 0; background: linear-gradient(to left,  rgba(15,15,15,0.95) 20%, transparent 100%); }
.row-edge-arrow i { font-size: 20px; color: rgba(255,255,255,0.75); transition: color 0.15s, transform 0.15s; }
.row-edge-arrow:hover i { color: #fff; transform: scale(1.25); }
.row-posters {
    display: flex; overflow-x: auto; overflow-y: visible;
    gap: 12px; padding: 16px 4px 28px; scroll-behavior: smooth;
    scrollbar-width: none;
}
.row-posters::-webkit-scrollbar { display: none; }

/* --- Continue watching cards --- */
.continue-card {
    flex-shrink: 0; width: 220px; cursor: pointer; position: relative;
}
.cc-thumb {
    width: 220px; height: 124px;
    background-size: cover; background-position: center top;
    border-radius: 6px; position: relative; overflow: hidden;
    transition: transform 0.22s, box-shadow 0.22s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.continue-card:hover .cc-thumb {
    transform: scale(1.06) translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
}
.cc-play-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.2s;
    pointer-events: none; /* decoration over the card --- never a hit target */
}
.continue-card:hover .cc-play-overlay { opacity: 1; }
.cc-play-overlay i { font-size: 28px; color: #fff; drop-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.cc-ep-label {
    position: absolute; top: 7px; left: 7px;
    font-size: 10px; font-weight: 800; color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.65); padding: 2px 7px; border-radius: 3px;
    letter-spacing: 0.3px;
}
.cc-time-label {
    position: absolute; bottom: 12px; right: 7px;
    font-size: 10px; color: rgba(255,255,255,0.65);
    background: rgba(0,0,0,0.6); padding: 2px 6px; border-radius: 3px;
}
.cc-progress-bar {
    position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: rgba(255,255,255,0.18);
}
.cc-progress-fill {
    height: 100%; background: var(--accent);
    border-radius: 0 2px 2px 0;
}
.cc-info { padding: 6px 2px 0; }
.cc-title {
    font-size: 12px; font-weight: 600; color: var(--text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-sub {
    font-size: 11px; color: var(--text-3); margin-top: 2px;
}

/* --- Poster cards --- */
.poster-card {
    position: relative; width: 185px; height: 278px; flex-shrink: 0;
    border-radius: var(--radius);
    /* overflow:hidden keeps everything inside --- prevents any layout scroll on hover */
    overflow: hidden; cursor: pointer;
    transition: transform 0.28s cubic-bezier(0.34,1.2,0.64,1),
                box-shadow 0.28s ease, border-radius 0.28s ease;
    z-index: 1;
}
.poster-card:hover {
    transform: scale(1.08);
    box-shadow: 0 18px 48px rgba(0,0,0,0.88), 0 0 0 1px rgba(255,255,255,0.12);
    z-index: 50;
    border-radius: calc(var(--radius) + 1px);
}
.poster-card-img-wrap {
    width: 100%; height: 100%;
    border-radius: inherit; overflow: hidden;
    position: relative;
}
.poster-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: filter 0.28s, transform 0.28s; display: block;
}
.poster-card:hover img { filter: brightness(0.55); transform: scale(1.04); }

.p-play {
    opacity: 0; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.22s;
    pointer-events: none; /* decoration over the card --- never a hit target */
}
.poster-card:hover .p-play { opacity: 1; }
.p-play svg {
    width: 44px; height: 44px; fill: white;
    filter: drop-shadow(0 3px 12px rgba(0,0,0,0.9));
    transform: scale(0.82); transition: transform 0.22s;
}
.poster-card:hover .p-play svg { transform: scale(1); }

.poster-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.7) 45%, transparent 100%);
    color: var(--text-1); font-size: 11px; font-weight: 600;
    padding: 38px 11px 11px; line-height: 1.35;
    opacity: 0; transition: opacity 0.22s; pointer-events: none;
}
.poster-card:hover .poster-label { opacity: 1; }

/* --- Hover info panel --- positioned inside the card (no scroll side-effects) --- */
.poster-hover-panel {
    position: absolute; bottom: 0; left: 0; right: 0; top: auto;
    background: linear-gradient(to top,
        rgba(10,10,14,0.99) 0%,
        rgba(10,10,14,0.93) 55%,
        transparent 100%);
    padding: 52px 12px 13px;
    opacity: 0; pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.22s 0.04s, transform 0.22s 0.04s;
    z-index: 5;
}
.poster-card:hover .poster-hover-panel {
    opacity: 1; pointer-events: auto; transform: translateY(0);
}
.php-title {
    font-size: 12px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 9px;
}
.php-actions { display: flex; gap: 6px; align-items: center; }
.php-play-btn {
    flex: 1; background: #fff; color: #111; border: none;
    border-radius: 5px; padding: 7px 0;
    font-size: 11px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: background 0.15s, transform 0.1s; font-family: 'Inter', sans-serif;
}
.php-play-btn:hover { background: rgba(255,255,255,0.85); transform: scale(1.03); }
.php-add-btn {
    width: 28px; height: 28px; background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.35); color: #fff;
    border-radius: 50%; cursor: pointer; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
}
.php-add-btn:hover { background: rgba(255,255,255,0.18); border-color: #fff; transform: scale(1.1); }
.php-add-btn.in-list { background: rgba(61,220,132,0.15); border-color: #3ddc84; color: #3ddc84; }
.php-meta {
    font-size: 10px; color: rgba(255,255,255,0.42);
    margin-top: 7px; display: flex; gap: 6px; align-items: center;
}
.php-meta-dot { width: 3px; height: 3px; background: rgba(255,255,255,0.3); border-radius: 50%; flex-shrink: 0; }

/* Skeleton */
@keyframes shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}
.poster-skeleton {
    width: 185px; height: 278px; flex-shrink: 0; border-radius: var(--radius);
    background: linear-gradient(90deg, #1a1a1a 25%, #242424 50%, #1a1a1a 75%);
    background-size: 800px 100%;
    animation: shimmer 1.6s infinite linear;
}

/* Broken poster */
.poster-card.no-poster {
    background: #1a1a1a;
    display: flex; align-items: center; justify-content: center;
}
.poster-card.no-poster img { opacity: 0; }
.poster-card.no-poster::after {
    content: '\f03d'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 28px; color: var(--text-3);
}

/* --- Search --- */
.search-page-wrap {
    padding: calc(var(--nav-h) + 28px) 48px 80px;
    min-height: 100vh;
    background: var(--bg);
}

/* Inline search bar (lives inside the results section, matches the reference look) */
.search-inline-bar {
    display: flex; align-items: center; gap: 14px;
    border-bottom: 2px solid rgba(255,255,255,0.12);
    padding-bottom: 14px; margin-bottom: 22px;
}
.search-inline-icon { color: var(--text-2); font-size: 1.1rem; flex-shrink: 0; }
.search-inline-input {
    flex: 1; background: none; border: none; outline: none;
    font-size: 1.6rem; font-weight: 400; color: var(--text-1);
    caret-color: var(--accent);
}
.search-inline-input::placeholder { color: rgba(255,255,255,0.22); }

.search-query-label {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
    color: var(--text-2); text-transform: uppercase;
    margin: 16px 0 14px; min-height: 1em;
}
.search-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.sft-btn {
    padding: 7px 20px; border-radius: 20px; border: none; cursor: pointer;
    font-size: 0.88rem; font-weight: 500;
    background: rgba(255,255,255,0.08); color: var(--text-2);
    transition: background 0.18s, color 0.18s;
}
.sft-btn:hover { background: rgba(255,255,255,0.16); color: var(--text-1); }
.sft-btn.active { background: #fff; color: #111; }

.search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
.no-results {
    color: var(--text-2); font-size: 1rem; padding: 60px 0;
    grid-column: 1/-1; text-align: center; line-height: 1.6;
}
.no-results strong { color: var(--text-1); }

/* --- Episode picker --- */
.episode-picker {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.episode-picker.active { opacity: 1; visibility: visible; }

.ep-box {
    background: #181818; border-radius: 10px;
    width: 780px; max-width: 96vw; max-height: 88vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.07);
    transform: translateY(16px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}
.episode-picker.active .ep-box { transform: translateY(0) scale(1); }

/* Header */
.ep-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px; flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ep-header-left {}
.ep-episodes-label {
    font-size: 10px; font-weight: 700; color: var(--text-3);
    text-transform: uppercase; letter-spacing: 1.5px;
    display: block; margin-bottom: 4px;
}
.ep-box h3 {
    font-family: 'Inter', sans-serif; font-size: 1.3rem;
    font-weight: 700; letter-spacing: 0; line-height: 1.2;
}
.ep-header-right {
    display: flex; align-items: center; gap: 16px;
}
.ep-close-btn {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-2); width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.ep-close-btn:hover { background: rgba(255,255,255,0.16); color: var(--text-1); }

/* Season dropdown */
.ep-season-dropdown { position: relative; }
.ep-season-btn {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-1); padding: 7px 14px; border-radius: 6px;
    cursor: pointer; font-size: 13px; font-weight: 600;
    font-family: 'Inter', sans-serif;
    display: flex; align-items: center; gap: 8px;
    transition: background 0.2s; white-space: nowrap;
}
.ep-season-btn:hover { background: rgba(255,255,255,0.14); }
.ep-season-btn i { font-size: 10px; opacity: 0.7; }
.ep-season-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: #252525; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px; min-width: 130px; z-index: 10;
    box-shadow: 0 8px 24px rgba(0,0,0,0.7);
    display: none; overflow: hidden;
}
.ep-season-menu.open { display: block; }
.ep-season-option {
    padding: 10px 16px; cursor: pointer; font-size: 13px;
    color: var(--text-2); font-family: 'Inter', sans-serif;
    transition: background 0.15s;
}
.ep-season-option:hover { background: rgba(255,255,255,0.08); color: var(--text-1); }
.ep-season-option.active { color: var(--text-1); font-weight: 700; }

/* Info line */
.ep-info-line {
    padding: 9px 24px;
    font-size: 11px; color: var(--text-3);
    font-weight: 700; letter-spacing: 0.8px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

/* Episode grid */
.ep-episode-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 16px 24px 20px;
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.ep-episode-grid::-webkit-scrollbar { width: 4px; }
.ep-episode-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* Episode card */
.ep-grid-card {
    cursor: pointer;
    border-radius: 4px;
    overflow: visible;
    transition: transform 0.2s;
}
.ep-grid-card:hover { transform: scale(1.05); }
.ep-thumb {
    position: relative; aspect-ratio: 16/9;
    background: #2a2a2a; border-radius: 4px; overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
.ep-grid-card.now .ep-thumb { border-color: rgba(255,255,255,0.9); }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-thumb-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: rgba(255,255,255,0.12);
}
.ep-meta-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 18px 7px 5px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 100%);
    display: flex; justify-content: space-between; align-items: flex-end;
}
.ep-num-label {
    font-size: 10px; font-weight: 800; color: rgba(255,255,255,0.92);
    font-family: 'Inter', sans-serif;
}
.ep-dur-label {
    font-size: 10px; color: rgba(255,255,255,0.5);
    font-family: 'Inter', sans-serif;
}
.ep-now-badge {
    position: absolute; top: 5px; left: 5px;
    background: rgba(255,255,255,0.96); color: #000;
    font-size: 8px; font-weight: 900; letter-spacing: 0.3px;
    padding: 2px 6px; border-radius: 3px;
    font-family: 'Inter', sans-serif;
}
.ep-grid-title {
    font-size: 11px; color: rgba(255,255,255,0.6);
    padding: 5px 1px 0;
    line-height: 1.35; font-weight: 500;
    font-family: 'Inter', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ep-grid-card:hover .ep-grid-title { color: rgba(255,255,255,0.9); }
.ep-grid-card.now .ep-grid-title { color: rgba(255,255,255,0.95); font-weight: 600; }

.ep-loading {
    grid-column: 1 / -1;
    padding: 40px; color: var(--text-3); font-size: 13px; text-align: center;
}

@media (max-width: 600px) {
    .ep-episode-grid { grid-template-columns: repeat(3, 1fr); padding: 12px 16px 16px; }
    .ep-box { border-radius: 8px; }
}

/* --- Video modal --- */
.video-modal {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.88); backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: none; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.video-modal.active { display: flex; opacity: 1; }
/* Closing state: fade out then display:none is set by JS */
.video-modal.closing { display: flex; opacity: 0; pointer-events: none; }

.modal-content {
    background: var(--bg-card); width: 88%; max-width: 1120px;
    border-radius: 14px; overflow: hidden; position: relative;
    box-shadow: 0 32px 80px rgba(0,0,0,0.95), 0 0 0 1px var(--border);
    transform: translateY(40px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
    max-height: 92vh; overflow-y: auto;
}
.video-modal.active .modal-content { transform: translateY(0) scale(1); }

/* Hide scrollbar on modal-content */
.modal-content::-webkit-scrollbar { display: none; }
.modal-content { scrollbar-width: none; }

/* --- Playback loading overlay --- */
#pbl-overlay {
    display: none; position: fixed; inset: 0; z-index: 99999;
    align-items: center; justify-content: center; flex-direction: column;
    background: #000;
}
#pbl-overlay.active { display: flex; }
#pbl-backdrop {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0.25; filter: blur(4px);
}
#pbl-content {
    position: relative; z-index: 1;
    text-align: center; padding: 40px 60px;
    display: flex; flex-direction: column; align-items: center; gap: 0;
}
#pbl-logo {
    max-width: 360px; max-height: 170px; object-fit: contain;
    margin-bottom: 18px; display: none;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.8));
}
#pbl-logo.visible { display: block; }
#pbl-title {
    font-size: 2.6rem; font-weight: 800; color: #fff; letter-spacing: -0.5px;
    text-shadow: 0 4px 24px rgba(0,0,0,0.9); margin: 0 0 28px;
}
.pbl-bar-wrap {
    width: 280px; height: 3px; background: rgba(255,255,255,0.18);
    border-radius: 2px; overflow: hidden; margin-bottom: 18px;
}
#pbl-bar {
    height: 100%; background: #fff; border-radius: 2px; width: 0;
    transition: width 0.1s linear;
}
.pbl-status { color: rgba(255,255,255,0.75); font-size: 15px; margin: 0 0 8px; }
#pbl-resume { color: rgba(255,255,255,0.5); font-size: 14px; margin: 0; }

/* --- Detail panel (Flixed-style) --- */
.detail-panel {
    display: none; position: relative; background: #141414;
    border-radius: 14px; overflow: hidden;
}
.detail-panel.active { display: block; }
/* When detail is active, hide the player */
.detail-panel.active ~ .iframe-wrapper,
.detail-panel.active ~ .modal-info { display: none; }

.detail-close-btn {
    position: absolute; top: 14px; right: 14px; z-index: 10;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(50,50,50,0.9); border: none; color: #fff;
    font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.detail-close-btn:hover { background: rgba(80,80,80,0.95); }

.detail-backdrop {
    width: 100%; height: 380px; background-size: cover; background-position: center top;
    background-color: #1a1a1a;
}
.detail-backdrop-fade {
    margin-top: -120px; height: 120px;
    background: linear-gradient(to bottom, transparent, #141414);
}
.detail-logo-wrap {
    position: absolute; top: 220px; left: 32px;
}
.detail-logo-wrap img { max-width: 260px; max-height: 110px; object-fit: contain; }
.detail-logo-wrap h1 {
    font-size: 32px; font-weight: 800; color: #fff; margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.9);
    line-height: 1.1;
}

.detail-body { padding: 0 32px 32px; }

.detail-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.detail-play-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 28px; border-radius: 6px;
    background: #fff; color: #000; border: none;
    font-size: 16px; font-weight: 700; cursor: pointer; letter-spacing: 0.5px;
    transition: background 0.15s;
}
.detail-play-btn:hover { background: rgba(255,255,255,0.85); }
.detail-icon-btn {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.5);
    color: #fff; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.detail-icon-btn:hover { background: rgba(255,255,255,0.2); border-color: #fff; }
.detail-icon-btn.active { color: #ff571a; border-color: #ff571a; }

.detail-meta {
    display: flex; align-items: center; gap: 14px;
    font-size: 14px; color: rgba(255,255,255,0.75); margin-bottom: 16px;
    flex-wrap: wrap;
}
.detail-meta .detail-rating { color: #f5c518; font-weight: 600; }
.detail-meta span { display: flex; align-items: center; gap: 4px; }

.detail-columns { display: flex; gap: 40px; margin-bottom: 28px; }
.detail-desc-col { flex: 2; }
.detail-desc-col p { color: rgba(255,255,255,0.85); font-size: 14px; line-height: 1.65; margin: 0; }
.detail-side-col { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.detail-side-col p { font-size: 13px; color: rgba(255,255,255,0.6); margin: 0; line-height: 1.5; }
.detail-side-col strong { color: rgba(255,255,255,0.4); }

.detail-similar-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 14px; }
.detail-similar-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.detail-similar-card {
    border-radius: 6px; overflow: hidden; cursor: pointer; position: relative;
    aspect-ratio: 2/3; background: #222;
    transition: transform 0.2s;
}
.detail-similar-card:hover { transform: scale(1.04); }
.detail-similar-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-similar-card-title {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    font-size: 11px; color: #fff; font-weight: 600;
}

/* --- Detail panel episodes section --- */
.detail-episodes-section { margin-bottom: 32px; }

.detail-ep-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.detail-ep-label { font-size: 20px; font-weight: 700; color: #fff; margin: 0; }
.detail-ep-controls { display: flex; align-items: center; gap: 10px; }

.detail-mark-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 6px;
    background: transparent; border: 1.5px solid rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.75); font-size: 13px; cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.detail-mark-btn:hover { border-color: #fff; color: #fff; }
.detail-mark-btn i { font-size: 11px; }

.detail-ep-drop { position: relative; }
.detail-ep-drop-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 6px;
    background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff; font-size: 13px; cursor: pointer; font-weight: 600;
    transition: background 0.15s;
}
.detail-ep-drop-btn:hover { background: rgba(255,255,255,0.18); }
.detail-ep-drop-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: #1f1f1f; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px; min-width: 150px; z-index: 20;
    display: none; box-shadow: 0 8px 24px rgba(0,0,0,0.6); overflow: hidden;
}
.detail-ep-drop-menu.open { display: block; }
.detail-ep-drop-option {
    padding: 10px 16px; cursor: pointer; font-size: 14px; color: rgba(255,255,255,0.8);
    transition: background 0.1s;
}
.detail-ep-drop-option:hover { background: rgba(255,255,255,0.1); color: #fff; }
.detail-ep-drop-option.active { color: #ff571a; font-weight: 600; }

.detail-ep-list { display: flex; flex-direction: column; }
.detail-ep-loading { color: rgba(255,255,255,0.4); font-size: 14px; padding: 20px 0; }

.detail-ep-card {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 12px; border-radius: 6px; cursor: pointer;
    transition: background 0.15s;
}
.detail-ep-card:hover { background: rgba(255,255,255,0.07); }

.detail-ep-num {
    width: 24px; text-align: center; font-size: 18px;
    color: rgba(255,255,255,0.35); font-weight: 500; flex-shrink: 0;
}
.detail-ep-card:hover .detail-ep-num { color: rgba(255,255,255,0.6); }

.detail-ep-thumb {
    width: 160px; flex-shrink: 0; border-radius: 4px;
    overflow: hidden; aspect-ratio: 16/9; background: #222; position: relative;
}
.detail-ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-ep-thumb-fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.2); font-size: 24px;
}
.detail-ep-play-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.15s;
    pointer-events: none; /* decoration over the card --- never a hit target */
}
.detail-ep-card:hover .detail-ep-play-overlay { opacity: 1; }
.detail-ep-play-overlay i { font-size: 28px; color: #fff; }

.detail-ep-info { flex: 1; min-width: 0; }
.detail-ep-title {
    font-size: 15px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.detail-ep-meta { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 6px; }
.detail-ep-desc {
    font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.detail-ep-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.detail-ep-action-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: transparent; border: 1.5px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.6); font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.detail-ep-action-btn:hover,
.detail-ep-action-btn.active { border-color: #fff; color: #fff; background: rgba(255,255,255,0.1); }

.iframe-wrapper {
    position: relative; overflow: hidden; width: 100%; height: 630px;
    background: #000; cursor: none;
}
.iframe-wrapper:hover { cursor: default; }
.iframe-wrapper:fullscreen,
.iframe-wrapper:-webkit-full-screen {
    width: 100vw; height: 100vh; background: #000;
}
.iframe-wrapper:fullscreen #video-player,
.iframe-wrapper:-webkit-full-screen #video-player {
    width: 100%; height: calc(100% + 120px); margin-top: -60px;
}
/* Subs-hidden: zoom in and shift up so the subtitle strip at the bottom is clipped */
.iframe-wrapper:not(:fullscreen) #video-player.subs-hidden {
    transform: scale(1.1) translateY(-4.5%);
}
.iframe-wrapper:fullscreen #video-player.subs-hidden,
.iframe-wrapper:-webkit-full-screen #video-player.subs-hidden {
    height: calc(100% + 220px); margin-top: -60px;
}
.iframe-wrapper:fullscreen #rd-player,
.iframe-wrapper:-webkit-full-screen #rd-player {
    position: absolute; inset: 0; width: 100% !important; height: 100% !important;
    margin-top: 0 !important; object-fit: contain;
}
#player-fs-overlay {
    display: none; position: absolute; inset: 0; z-index: 10; cursor: none;
}
.iframe-wrapper:fullscreen #player-fs-overlay,
.iframe-wrapper:-webkit-full-screen #player-fs-overlay {
    display: block;
}
/* iOS fake fullscreen --- used when native Fullscreen API is unavailable (iOS Safari) */
.iframe-wrapper.fake-fs {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100dvh !important;
    z-index: 99999 !important;
    border-radius: 0 !important;
    background: #000;
}
.iframe-wrapper.fake-fs #video-player { width: 100%; height: calc(100% + 120px); margin-top: -60px; }
.iframe-wrapper.fake-fs #video-player.subs-hidden { height: calc(100% + 220px); margin-top: -60px; }
.iframe-wrapper.fake-fs #rd-player { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin-top: 0 !important; object-fit: contain; }
.iframe-wrapper.fake-fs #player-fs-overlay { display: block; }
#video-player {
    width: 100%; height: calc(100% + 120px); margin-top: -60px;
    background: #000; border: none; display: block;
}

/* RD native mode: hide custom chrome, show custom RD controls */
.iframe-wrapper.rd-native-mode .player-top-bar,
.iframe-wrapper.rd-native-mode .player-bottom-bar { display: none !important; }
.iframe-wrapper.rd-native-mode #rd-player {
    width: 100%; height: 100%; margin-top: 0;
    position: absolute; inset: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.iframe-wrapper.rd-native-mode .rd-custom-controls { opacity: 1; pointer-events: auto; }

/* --- RD Custom Control Bar --- */
.rd-custom-controls {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; flex-direction: column;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
    padding: 32px 0 0;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 30;
}
/* Show control bar and overlays when in RD native mode */
.iframe-wrapper.rd-native-mode .rd-custom-controls:not(.hide) { opacity: 1; pointer-events: auto; }
.iframe-wrapper.rd-native-mode .rd-settings-panel:not(.hidden) { display: block; }
.iframe-wrapper.rd-native-mode .rd-caching-overlay:not(.hidden) { display: flex; }
.rd-custom-controls.hide { opacity: 0 !important; pointer-events: none !important; }
/* Fullscreen: show cursor + controls by default */
.iframe-wrapper:fullscreen,
.iframe-wrapper:fullscreen *,
.iframe-wrapper:-webkit-full-screen,
.iframe-wrapper:-webkit-full-screen * { cursor: default !important; }
.iframe-wrapper.rd-native-mode:fullscreen .rd-custom-controls,
.iframe-wrapper.rd-native-mode:-webkit-full-screen .rd-custom-controls {
    opacity: 1 !important; pointer-events: auto !important;
}
/* fs-idle: hide both cursor and controls after 3s of no movement */
.iframe-wrapper:fullscreen.fs-idle,
.iframe-wrapper:fullscreen.fs-idle *,
.iframe-wrapper:-webkit-full-screen.fs-idle,
.iframe-wrapper:-webkit-full-screen.fs-idle * { cursor: none !important; }
.iframe-wrapper:fullscreen.fs-idle .rd-custom-controls,
.iframe-wrapper:-webkit-full-screen.fs-idle .rd-custom-controls {
    opacity: 0 !important; pointer-events: none !important;
}

/* Pause overlay */
#rd-pause-overlay {
    display: none; position: absolute; inset: 0; z-index: 25;
    background: rgba(0,0,0,0.5);
    align-items: center; justify-content: center;
    flex-direction: column;
}
.iframe-wrapper.rd-native-mode.rd-paused #rd-pause-overlay { display: flex; }
#rd-pause-play-btn {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.6);
    color: #fff; font-size: 28px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
#rd-pause-play-btn:hover { background: rgba(255,255,255,0.28); }
#rd-pause-play-btn i { margin-left: 4px; }
/* Pause overlay top bar */
#rd-pause-topbar {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; padding: 16px 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
}
#rd-pause-back-btn {
    background: none; border: none; color: #fff; font-size: 18px;
    cursor: pointer; padding: 8px; border-radius: 50%;
    transition: background 0.15s; flex-shrink: 0;
}
#rd-pause-back-btn:hover { background: rgba(255,255,255,0.15); }
#rd-pause-topbar-title {
    flex: 1; text-align: center; color: #fff; font-size: 15px; font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
#rd-pause-topbar-right { display: flex; gap: 4px; flex-shrink: 0; }
#rd-pause-topbar-right button {
    background: none; border: none; color: rgba(255,255,255,0.85); font-size: 17px;
    cursor: pointer; padding: 8px; border-radius: 50%; transition: background 0.15s;
}
#rd-pause-topbar-right button:hover { background: rgba(255,255,255,0.15); }

#rd-pause-info {
    position: absolute; bottom: 80px; left: 32px;
    display: flex; flex-direction: column; gap: 6px;
}
#rd-pause-title {
    font-size: 22px; font-weight: 700; color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
#rd-pause-meta { font-size: 13px; color: rgba(255,255,255,0.7); }

/* JS-driven mouse-active state (cursor already handled above) */

/* Seek bar row --- full width */
.rd-seek-wrap {
    width: 100%; padding: 0 14px; box-sizing: border-box;
    cursor: pointer;
}
.rd-seek-bar {
    position: relative; width: 100%; height: 3px;
    background: rgba(255,255,255,0.25); border-radius: 2px;
    transition: height 0.12s;
}
.rd-seek-wrap:hover .rd-seek-bar { height: 5px; }
.rd-seek-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: #ff571a; border-radius: 2px; width: 0;
    pointer-events: none;
}
.rd-seek-thumb {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 13px; height: 13px; border-radius: 50%;
    background: #fff; left: 0;
    opacity: 0; transition: opacity 0.15s;
    pointer-events: none;
}
.rd-seek-wrap:hover .rd-seek-thumb { opacity: 1; }

/* Buttons row */
.rd-ctrl-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 8px 10px;
}
.rd-controls-left, .rd-controls-right {
    display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.rd-ctrl-btn {
    background: none; border: none; color: rgba(255,255,255,0.88);
    font-size: 16px; cursor: pointer; padding: 5px 7px;
    transition: color 0.15s, transform 0.1s; line-height: 1;
}
.rd-ctrl-btn:hover { color: #fff; transform: scale(1.12); }
.rd-ctrl-playpause { font-size: 19px; }

.rd-time-current {
    font-size: 13px; color: rgba(255,255,255,0.9);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    margin-left: 6px;
}

.rd-time-ends {
    font-size: 12px; color: rgba(255,255,255,0.55);
    white-space: nowrap; margin-left: 8px;
}

/* AD-only controls: only show when actually streaming via AD */
.rd-wrong-lang-btn, #rd-ad-ctrl-btn { display: none; }
.iframe-wrapper.rd-native-mode .rd-wrong-lang-btn,
.iframe-wrapper.rd-native-mode #rd-ad-ctrl-btn { display: inline-flex; }

/* Wrong-language skip button */
.rd-wrong-lang-btn {
    font-size: 10px !important; font-weight: 700; letter-spacing: 0.05em;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 4px; padding: 3px 7px !important;
    color: rgba(255,255,255,0.75) !important;
    transition: border-color 0.15s, color 0.15s !important;
}
.rd-wrong-lang-btn:hover { border-color: #ff571a !important; color: #ff571a !important; transform: none !important; }

/* Volume slider */
.rd-volume-slider {
    -webkit-appearance: none; appearance: none;
    width: 66px; height: 3px;
    background: rgba(255,255,255,0.28); border-radius: 2px;
    outline: none; cursor: pointer; margin: 0 2px;
}
.rd-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 11px; height: 11px;
    border-radius: 50%; background: #fff; cursor: pointer;
}
.rd-volume-slider::-moz-range-thumb {
    width: 11px; height: 11px; border-radius: 50%;
    background: #fff; border: none; cursor: pointer;
}

/* --- Narrow screens: keep the whole control row on one line --- */
@media (max-width: 600px) {
    /* iOS gives JS no control over output volume, so the slider does
       nothing there --- drop it and let the mute button do the job. */
    .rd-volume-slider { display: none; }
    .rd-ctrl-row      { padding: 5px 4px 10px; }
    .rd-ctrl-btn      { padding: 5px 5px; }
    /* The time readout may compress; the buttons may not. */
    .rd-controls-left  { min-width: 0; flex-shrink: 1; overflow: hidden; }
    .rd-controls-right { flex-shrink: 0; }
}
@media (max-width: 420px) {
    .rd-time-ends { display: none; }
}

/* --- RD Caching Overlay --- */
@keyframes rd-spin { to { transform: rotate(360deg); } }

/* --- RD Settings Panel --- */
.rd-settings-panel {
    position: absolute; bottom: 58px; right: 12px;
    width: 240px;
    background: rgba(20,20,20,0.97);
    border-radius: 12px;
    overflow: hidden;
    z-index: 40;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
.rd-settings-panel.hidden { display: none; }

.rd-sp-view { padding: 4px 0; }
.rd-sp-view.hidden { display: none; }

.rd-sp-header {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.45); padding: 12px 16px 8px;
}
.rd-sp-subheader {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85);
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.rd-sp-back {
    background: none; border: none; color: rgba(255,255,255,0.6);
    font-size: 13px; cursor: pointer; padding: 2px 4px;
    transition: color 0.15s;
}
.rd-sp-back:hover { color: #fff; }

/* 2---2 grid tiles */
.rd-sp-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px; padding: 6px 10px 10px;
}
.rd-sp-tile {
    background: rgba(255,255,255,0.07); border: none; border-radius: 8px;
    padding: 10px 10px 8px; text-align: left; cursor: pointer;
    transition: background 0.15s;
}
.rd-sp-tile:hover { background: rgba(255,255,255,0.13); }
.rd-sp-tile-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.09em;
    color: rgba(255,255,255,0.4); margin-bottom: 4px;
}
.rd-sp-tile-val {
    font-size: 14px; font-weight: 600; color: #fff;
}

/* List rows */
.rd-sp-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px; width: 100%; box-sizing: border-box;
    background: none; border: none; color: rgba(255,255,255,0.85);
    font-size: 13px; cursor: pointer; text-align: left;
    border-top: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
}
.rd-sp-row:hover { background: rgba(255,255,255,0.06); }
.rd-sp-row-toggle, .rd-sp-row-static { cursor: default; }
.rd-sp-row-toggle:hover, .rd-sp-row-static:hover { background: none; }
.rd-sp-row-static { cursor: default; }
.rd-sp-row-right { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.45); font-size: 12px; }
.rd-sp-row-right i { font-size: 10px; }
.rd-sp-row > i.fa-chevron-right { color: rgba(255,255,255,0.35); font-size: 11px; }

/* Sub-panel option rows */
.rd-sp-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px; width: 100%; background: none; border: none;
    color: rgba(255,255,255,0.8); font-size: 13px; cursor: pointer;
    border-top: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s; text-align: left;
}
.rd-sp-option:hover { background: rgba(255,255,255,0.07); }
.rd-sp-option.active { color: #fff; font-weight: 600; }
.rd-sp-option.active::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #ff571a; font-size: 12px; }

/* Toggle switch */
.rd-sp-toggle { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; }
.rd-sp-toggle input { opacity: 0; width: 0; height: 0; }
.rd-sp-tog-track {
    position: absolute; inset: 0; border-radius: 20px;
    background: rgba(255,255,255,0.2); transition: background 0.2s;
}
.rd-sp-toggle input:checked ~ .rd-sp-tog-track { background: #ff571a; }
.rd-sp-tog-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    transition: left 0.2s;
}
.rd-sp-toggle input:checked ~ .rd-sp-tog-track .rd-sp-tog-thumb { left: 18px; }

/* Select in settings */
.rd-sp-select {
    background: rgba(255,255,255,0.1); border: none; border-radius: 5px;
    color: #fff; font-size: 12px; padding: 4px 6px; cursor: pointer; outline: none;
}

/* --- Player top overlay bar --- */
.player-top-bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
    opacity: 0; transition: opacity 0.3s ease;
    pointer-events: none;
}
.player-top-bar.visible { opacity: 1; pointer-events: auto; }
.player-back-btn {
    background: rgba(0,0,0,0.45); border: none;
    color: #fff; width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 15px; backdrop-filter: blur(8px);
    transition: background 0.2s, transform 0.15s; flex-shrink: 0;
}
.player-back-btn:hover { background: rgba(255,255,255,0.18); transform: scale(1.08); }
.player-title-bar {
    font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.92);
    letter-spacing: 0.3px; text-align: center; flex: 1; padding: 0 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-top-spacer { width: 36px; flex-shrink: 0; }

/* --- Player bottom overlay bar --- */
.player-bottom-bar {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; overflow: visible;
    background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, transparent 100%);
    opacity: 0; transition: opacity 0.3s ease;
    pointer-events: none;
}
.player-bottom-bar.visible { opacity: 1; pointer-events: auto; }
.player-bottom-bar.ad-active .player-servers,
.player-bottom-bar.ad-active #rd-wrap { display: none; }
.player-servers {
    display: flex; align-items: center; gap: 10px;
}
.player-server-label {
    font-size: 10px; font-weight: 800; color: rgba(255,255,255,0.45);
    text-transform: uppercase; letter-spacing: 1.2px;
}
.source-switcher { display: flex; gap: 6px; }
.source-btn {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.75); width: 30px; height: 26px; border-radius: 5px;
    cursor: pointer; font-size: 11px; font-weight: 700;
    font-family: 'Inter', sans-serif; transition: all 0.18s;
}
.source-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }
.source-btn.active { background: var(--accent); color: #fff; border-color: transparent; }
.source-hint {
    font-size: 10px; color: rgba(255,255,255,0.28);
}
.player-cc-btn {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85); padding: 0 10px; height: 30px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em; transition: all 0.18s; flex-shrink: 0;
}
.player-cc-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }
.player-cc-btn.subs-off { background: rgba(255,87,26,0.55); border-color: rgba(255,87,26,0.7); color: #fff; text-decoration: line-through; }
.rd-audio-menu { position: absolute; bottom: calc(100% + 8px); right: 0; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; overflow: hidden; min-width: 120px; z-index: 200; }
.rd-audio-menu.hidden { display: none; }
.rd-audio-track { display: block; width: 100%; padding: 9px 14px; background: none; border: none; color: rgba(255,255,255,0.85); font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; }
.rd-audio-track:hover { background: rgba(255,255,255,0.1); }
.rd-audio-track.active { color: #ff571a; font-weight: 600; }
.player-fs-btn {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85); width: 34px; height: 30px; border-radius: 7px;
    cursor: pointer; font-size: 13px; display: flex; align-items: center;
    justify-content: center; transition: all 0.18s; flex-shrink: 0;
}
.player-fs-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* --- Real-Debrid UI --- */
.rd-wrap { position: relative; flex-shrink: 0; }
.rd-btn {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85); height: 30px; padding: 0 10px;
    border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; gap: 5px; transition: all 0.18s;
    font-family: 'Inter', sans-serif; white-space: nowrap; letter-spacing: 0.3px;
}
.rd-btn i { font-size: 12px; }
.rd-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }
.rd-btn.active {
    background: rgba(61,220,132,0.2); border-color: rgba(61,220,132,0.5);
    color: #3ddc84;
}
.rd-btn.loading { opacity: 0.55; pointer-events: none; }
.rd-popup {
    position: fixed; bottom: 70px; right: 18px;
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: 16px; width: 260px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6); z-index: 1100;
    max-width: calc(100vw - 16px); max-height: calc(100vh - 80px); overflow-y: auto;
}
.rd-popup.hidden { display: none; }
.rd-section { display: flex; flex-direction: column; gap: 10px; }
.rd-section.hidden { display: none; }
.rd-popup-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin: 0; }
.rd-popup-hint { font-size: 11px; color: var(--text-3); margin: 0; line-height: 1.4; }
.rd-input {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-1); border-radius: 7px; padding: 8px 10px;
    font-size: 12px; width: 100%; box-sizing: border-box;
}
.rd-save-btn {
    background: #3ddc84; border: none; color: #000; font-size: 13px;
    font-weight: 700; padding: 8px 0; border-radius: 7px; cursor: pointer;
    transition: opacity 0.15s;
}
.rd-save-btn:hover { opacity: 0.85; }
.rd-quality-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.rd-quality-btn {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-1); border-radius: 8px; padding: 9px 12px;
    cursor: pointer; text-align: left; font-size: 12px; transition: all 0.15s;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.rd-quality-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
.rd-quality-btn.active { border-color: #3ddc84; background: rgba(61,220,132,0.12); }
.rd-quality-tag {
    font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
    background: rgba(255,255,255,0.12); color: #fff; white-space: nowrap;
}
.rd-quality-tag.q4k    { background: rgba(61,220,132,0.25); color: #3ddc84; }
.rd-quality-tag.q1080  { background: rgba(255,87,26,0.25); color: #e86; }
.rd-quality-tag.q720   { background: rgba(255,200,0,0.2); color: #fc8; }
.rd-quality-tag.q-local { background: rgba(90,160,255,0.25); color: #7ab8ff; }
.rd-quality-name { flex: 1; color: var(--text-2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-disconnect-btn {
    background: none; border: 1px solid rgba(255,255,255,0.1); color: var(--text-3);
    border-radius: 7px; padding: 7px 0; font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s;
}
.rd-disconnect-btn:hover { color: #f55; border-color: rgba(255,80,80,0.35); }
.rd-empty { font-size: 12px; color: var(--text-3); text-align: center; padding: 12px 0; }

.modal-info { display: none; }
#modal-title {
    font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem;
    margin-bottom: 10px; letter-spacing: 1px; line-height: 1;
}
.modal-meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.modal-tag {
    background: rgba(255,255,255,0.07); border: 1px solid var(--border);
    color: var(--text-2); font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: 20px; letter-spacing: 0.3px;
}
#modal-desc {
    color: var(--text-2); line-height: 1.7; font-size: 0.9rem;
    max-width: 760px;
}

/* --- Toast --- */
.toast {
    position: fixed; bottom: 36px; left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--bg-raise); color: var(--text-1);
    padding: 12px 24px; border-radius: 8px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--border);
    opacity: 0; pointer-events: none; z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    transition: opacity 0.25s, transform 0.25s;
    white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Pages --- */
.page { display: none; }
.page.active { display: block; }

/* --- Page hero (sub-pages) --- */
.page-hero {
    height: 38vh; min-height: 280px;
    background: #0d0d0d;
    background-size: cover; background-position: center 30%;
    position: relative; display: flex; align-items: flex-end;
    padding: 0 48px 100px;
}
.page-hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%),
        linear-gradient(to top,   rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.55) 100%);
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,87,26,0.15); border: 1px solid rgba(255,87,26,0.4);
    color: var(--accent); font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;
}
.page-hero-title {
    font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.8rem, 5vw, 4.5rem);
    letter-spacing: 2px; line-height: 1; margin-bottom: 10px;
}
.page-hero-sub {
    color: var(--text-2); font-size: 0.95rem; font-weight: 500;
}

/* Gradient fade at bottom of page-hero into content */
.page-hero::after {
    content: ''; position: absolute; bottom: 0; width: 100%; height: 80px;
    background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
    z-index: 1;
}

/* --- Content page (sub-pages) --- */
.content-page {
    margin-top: -60px; position: relative; z-index: 3;
    padding: 0 24px 100px;
}

/* --- 3-dot card menu --- */
.card-dots-btn {
    position: absolute; top: 7px; right: 7px;
    width: 28px; height: 28px;
    background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85); border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px;
    transition: background 0.15s, transform 0.15s;
    backdrop-filter: blur(4px); z-index: 5;
}
.poster-card:hover .card-dots-btn { display: flex; }
.card-dots-btn:hover { background: rgba(255,255,255,0.18); transform: scale(1.08); }

.card-context-menu {
    position: absolute; top: 40px; right: 7px;
    background: rgba(18,18,18,0.96);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
    padding: 6px; z-index: 20; min-width: 168px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.85);
    backdrop-filter: blur(16px);
    display: none; flex-direction: column; gap: 2px;
    opacity: 0; transform: scale(0.92) translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
    transform-origin: top right;
}
.card-context-menu.open {
    display: flex; opacity: 1; transform: scale(1) translateY(0);
}
.ccm-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 8px;
    background: none; border: none;
    color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500;
    font-family: 'Inter', sans-serif; cursor: pointer; text-align: left;
    transition: background 0.12s, color 0.12s; white-space: nowrap;
}
.ccm-item i { width: 14px; text-align: center; opacity: 0.7; }
.ccm-item:hover { background: rgba(255,255,255,0.09); color: #fff; }

/* --- Kids mode banner --- */
body.kids-mode .main-wrap::before {
    content: '🐼 Kids Mode';
    position: fixed; top: 12px; right: 20px; z-index: 150;
    background: #0071eb; color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    padding: 4px 10px; border-radius: 20px;
    pointer-events: none;
}

/* --- LIVE TV PAGE --- */
#page-livetv { background: var(--bg); min-height: 100vh; padding: 0; position: relative; }

.ltv-wrap { padding: 24px 28px 60px; }

.ltv-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.ltv-title {
    font-size: 21px; font-weight: 800; color: var(--text-1);
    letter-spacing: 0.06em; margin: 0;
}
.ltv-date-label { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: 0.08em; }

/* Featured */
.ltv-section-label {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em;
    color: var(--text-3); text-transform: uppercase; margin-bottom: 9px;
}
.ltv-featured-wrap { margin-bottom: 16px; }
.ltv-featured-scroll {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none;
}
.ltv-featured-scroll::-webkit-scrollbar { display: none; }
.ltv-feat-loading { color: var(--text-3); font-size: 12px; padding: 20px 0; }

.ltv-feat-card {
    flex-shrink: 0; width: 215px;
    background: linear-gradient(145deg, #182035 0%, #0d1422 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 9px; padding: 12px 13px; cursor: pointer;
    transition: border-color 0.15s; position: relative; overflow: hidden;
}
.ltv-feat-card:hover { border-color: rgba(255,255,255,0.22); }
.ltv-feat-sport {
    font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.45);
    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px;
    padding-right: 44px;
}
.ltv-feat-live-badge {
    position: absolute; top: 11px; right: 10px;
    background: #ff571a; color: #fff; font-size: 8px; font-weight: 800;
    letter-spacing: 0.06em; padding: 2px 6px; border-radius: 3px;
}
.ltv-feat-time-badge {
    position: absolute; top: 11px; right: 10px;
    background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.65);
    font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
}
.ltv-feat-matchup {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; margin-bottom: 9px;
}
.ltv-feat-team {
    display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1;
}
.ltv-feat-logo {
    width: 34px; height: 34px; object-fit: contain; border-radius: 50%;
    background: rgba(255,255,255,0.04);
}
.ltv-feat-team-name {
    font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.8);
    text-align: center; max-width: 68px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ltv-feat-score {
    font-size: 22px; font-weight: 800; color: #fff; text-align: center;
    flex-shrink: 0; min-width: 58px; letter-spacing: -0.5px;
}
.ltv-feat-vs {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.28);
    text-align: center; flex-shrink: 0; min-width: 28px;
}
.ltv-feat-meta {
    font-size: 9px; color: rgba(255,255,255,0.3);
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Controls bar */
.ltv-controls {
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 10px; margin-bottom: 9px;
}
.ltv-tabs-scroll { flex: 1; overflow-x: auto; scrollbar-width: none; }
.ltv-tabs-scroll::-webkit-scrollbar { display: none; }
.ltv-tabs { display: flex; gap: 2px; white-space: nowrap; }
.ltv-tab {
    background: none; border: none; color: rgba(255,255,255,0.4);
    font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
    padding: 6px 11px; border-radius: 6px; cursor: pointer;
    transition: background 0.15s, color 0.15s; font-family: 'Inter', sans-serif;
}
.ltv-tab:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.05); }
.ltv-tab.active { color: #fff; background: rgba(255,255,255,0.1); }

.ltv-controls-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ltv-view-toggle {
    display: flex; border: 1px solid rgba(255,255,255,0.11); border-radius: 6px; overflow: hidden;
}
.ltv-vbtn {
    background: none; border: none; color: rgba(255,255,255,0.4);
    font-size: 11px; font-weight: 600; padding: 5px 10px; cursor: pointer;
    transition: background 0.15s, color 0.15s; font-family: 'Inter', sans-serif;
    border-right: 1px solid rgba(255,255,255,0.11);
}
.ltv-vbtn:last-child { border-right: none; }
.ltv-vbtn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06); }
.ltv-vbtn.active { color: #fff; background: rgba(255,255,255,0.12); }
.ltv-multi-btn { font-size: 10px; padding: 5px 8px; }

.ltv-search-box { position: relative; display: flex; align-items: center; }
.ltv-search-icon { position: absolute; left: 8px; color: rgba(255,255,255,0.3); font-size: 10px; pointer-events: none; }
.ltv-search-input {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
    border-radius: 6px; color: #fff; font-size: 11px;
    padding: 5px 8px 5px 26px; width: 130px; outline: none;
    font-family: 'Inter', sans-serif; transition: border-color 0.15s;
}
.ltv-search-input::placeholder { color: rgba(255,255,255,0.28); }
.ltv-search-input:focus { border-color: rgba(255,255,255,0.22); }

.ltv-stats {
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.32);
    letter-spacing: 0.05em; margin-bottom: 8px;
}

/* Guide grid */
.ltv-guide { border: 1px solid rgba(255,255,255,0.06); border-radius: 9px; overflow: hidden; }
.ltv-row {
    display: grid; grid-template-columns: 185px 1fr;
    border-bottom: 1px solid rgba(255,255,255,0.045); min-height: 68px;
}
.ltv-row:last-child { border-bottom: none; }

.ltv-ch {
    display: flex; align-items: center; gap: 10px; padding: 10px 13px;
    border-right: 1px solid rgba(255,255,255,0.04);
    cursor: pointer; transition: background 0.15s;
    background: rgba(255,255,255,0.008);
}
.ltv-ch:hover { background: rgba(255,255,255,0.06); }
.ltv-ch-logo {
    width: 42px; height: 42px; object-fit: contain; border-radius: 7px;
    flex-shrink: 0; background: rgba(255,255,255,0.04);
}
.ltv-ch-name {
    font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.7);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.ltv-ch-sub { font-size: 9px; color: rgba(255,255,255,0.28); margin-top: 2px; }

.ltv-programs { display: flex; overflow: hidden; }
.ltv-prog {
    flex: 1; padding: 9px 12px; border-right: 1px solid rgba(255,255,255,0.035);
    position: relative; cursor: pointer; transition: background 0.15s; overflow: hidden;
    min-width: 0;
}
.ltv-prog:last-child { border-right: none; }
.ltv-prog:hover { background: rgba(255,255,255,0.04); }
.ltv-prog-now { background: rgba(255,255,255,0.018); }
.ltv-prog-now::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 2px; background: #ff571a;
}

.ltv-prog-badge {
    font-size: 8px; font-weight: 800; letter-spacing: 0.07em;
    color: rgba(255,255,255,0.36); margin-bottom: 4px;
    display: flex; align-items: center; gap: 4px;
}
.ltv-prog-badge.is-now { color: #4ade80; }
.ltv-prog-badge.is-now::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: #4ade80; flex-shrink: 0;
}
.ltv-prog-ends { font-size: 8px; font-weight: 800; color: #f97316; letter-spacing: 0.04em; margin-bottom: 4px; }
.ltv-prog-title {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.84);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px;
}
.ltv-prog-time { font-size: 9px; color: rgba(255,255,255,0.28); white-space: nowrap; }

/* Skeleton */
@keyframes ltv-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.ltv-skel-row {
    height: 68px; border-bottom: 1px solid rgba(255,255,255,0.04);
    background: linear-gradient(90deg,rgba(255,255,255,0.025) 25%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.025) 75%);
    background-size: 600px 100%; animation: ltv-shimmer 1.5s infinite linear;
}

/* Cards view */
.ltv-cards-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
    padding: 4px 0;
}
.ltv-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 9px; overflow: hidden; cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}
.ltv-card:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-2px); }
.ltv-card-thumb {
    aspect-ratio: 16/9; background: #0f1218;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.ltv-card-thumb img { height: 46px; object-fit: contain; }
.ltv-card-live-dot {
    position: absolute; top: 8px; left: 8px;
    width: 7px; height: 7px; background: #ff571a; border-radius: 50%;
    box-shadow: 0 0 7px rgba(255,87,26,0.6);
}
.ltv-card-info { padding: 9px 11px; }
.ltv-card-ch { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.35); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 2px; }
.ltv-card-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltv-card-time { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 2px; }

/* Channel player overlay */
.ltv-player {
    position: fixed; inset: 0; background: #000; z-index: 200;
    display: flex; flex-direction: column;
}
.ltv-player.hidden { display: none; }
.ltv-player-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px; padding: 14px 18px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
}
.ltv-player-ch { display: flex; align-items: center; gap: 8px; }
.ltv-player-ch img { height: 26px; width: 26px; object-fit: contain; border-radius: 4px; background: rgba(255,255,255,0.06); }
#ltv-player-name { font-size: 13px; font-weight: 700; color: #fff; }
.ltv-player-prog { flex: 1; font-size: 11px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltv-player-close {
    background: rgba(255,255,255,0.1); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center; transition: background 0.15s; margin-left: auto;
}
.ltv-player-close:hover { background: rgba(255,255,255,0.22); }
.ltv-player-vid { width: 100%; height: 100%; object-fit: contain; }
.ltv-player-err {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: rgba(255,255,255,0.4); gap: 8px;
}
.ltv-player-err.hidden { display: none; }
.ltv-player-err i { font-size: 38px; margin-bottom: 6px; }
.ltv-player-err p { font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.7); margin: 0; }
.ltv-player-err span { font-size: 12px; text-align: center; max-width: 280px; }
.ltv-player-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); z-index: 10; }
.ltv-player-spinner.hidden { display: none; }
.ltv-spinner-ring { width: 48px; height: 48px; border: 4px solid rgba(255,255,255,0.15); border-top-color: #ff571a; border-radius: 50%; animation: ltv-spin 0.8s linear infinite; }
@keyframes ltv-spin { to { transform: rotate(360deg); } }
/* --- My List page --- */
.mylist-page-hero { background: #0a0a0a; }

.mylist-empty {
    padding: 80px 80px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; gap: 16px; color: var(--text-2);
}
.mylist-empty-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(255,87,26,0.1); border: 1px solid rgba(255,87,26,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--accent); margin-bottom: 8px;
}
.mylist-empty h3 { font-size: 1.4rem; font-weight: 700; color: var(--text-1); }
.mylist-empty p { font-size: 0.95rem; line-height: 1.6; max-width: 340px; }
.mylist-empty p strong { color: var(--text-1); }
.mylist-empty .btn { margin-top: 8px; }

/* --- Profile Page --- */
.profile-page-wrap {
    max-width: 860px; margin: 0 auto; padding: calc(var(--nav-h) + 16px) 24px 100px;
    display: flex; flex-direction: column; gap: 32px;
}
.mobile-more-page { display: none; }
.mobile-settings-page { display: none; }
.pp-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 32px; backdrop-filter: blur(8px);
}
.pp-card-inner { display: flex; align-items: flex-start; gap: 28px; }
.pp-avatar-wrap {
    flex-shrink: 0; width: 88px; height: 88px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 44px; box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.pp-info { flex: 1; min-width: 0; }
.pp-name-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.pp-name { font-size: 1.8rem; font-weight: 800; color: var(--text-1); }
.pp-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,87,26,0.15); border: 1px solid rgba(255,87,26,0.35);
    color: #ff571a; font-size: 10px; font-weight: 800; letter-spacing: 1px;
    padding: 3px 10px; border-radius: 20px; text-transform: uppercase;
}
.pp-since { font-size: 13px; color: var(--text-2); margin-bottom: 20px; }
.pp-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-stat {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; padding: 5px 14px; font-size: 13px;
}
.pp-stat-num { font-weight: 700; color: var(--text-1); }
.pp-stat-lbl { color: var(--text-2); }

.pp-section {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px; padding: 24px;
}
.pp-section-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.pp-section-title {
    font-size: 1rem; font-weight: 700; color: var(--text-1);
    display: flex; align-items: center; gap: 10px;
}
.pp-section-title i { color: var(--accent); font-size: 14px; }
.pp-clear-btn, .pp-view-btn {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-2); font-size: 12px; font-weight: 600; padding: 6px 14px;
    border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
.pp-clear-btn:hover { background: rgba(255,87,26,0.2); border-color: rgba(255,87,26,0.4); color: #ff571a; }
.pp-view-btn:hover { background: rgba(255,255,255,0.14); color: var(--text-1); }

.pp-history-list { display: flex; flex-direction: column; gap: 10px; }
.pp-history-row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    transition: background 0.15s;
}
.pp-history-row:hover { background: rgba(255,255,255,0.06); }
.pp-history-thumb {
    width: 96px; height: 54px; border-radius: 6px; flex-shrink: 0;
    background-size: cover; background-position: center; background-color: #1e1e1e;
    position: relative; overflow: hidden;
}
.pp-history-thumb-icon {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: rgba(255,255,255,0.2);
}
.pp-history-info { flex: 1; min-width: 0; }
.pp-history-title { font-size: 14px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-history-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.pp-history-progress { margin-top: 6px; height: 3px; background: rgba(255,255,255,0.12); border-radius: 2px; }
.pp-history-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; }
.pp-history-time { font-size: 11px; color: var(--text-2); flex-shrink: 0; }

.pp-list-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px;
}
.pp-list-item { border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
.pp-list-item:hover { transform: scale(1.05); }
.pp-list-item img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.pp-empty { color: var(--text-2); font-size: 14px; padding: 12px 0; }

/* --- Animations --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-content { animation: fadeInUp 0.9s cubic-bezier(0.25,0.46,0.45,0.94) both; }

/* --- MOBILE RESPONSIVE --- */

@media (max-width: 1024px) {
    .tn-link { padding: 6px 9px; font-size: 13px; }
    .tn-inner { padding: 0 3%; }
}

@media (max-width: 768px) {
    /* Flixed-inspired mobile shell. Desktop selectors above remain untouched. */
    .mobile-nav { display: flex; }
    .tn-logo, .tn-right { display: none; }
    .tn-left { justify-content: center; gap: 0; }
    .tn-links { display: flex; width: 100%; justify-content: center; }
    .tn-links li:nth-child(n+5) { display: none; }
    .tn-link {
        padding: 11px 18px; border-radius: 28px; font-size: 14px;
        color: #a997b9;
    }
    .tn-link.active { color: #1c1222; background: #f8f3fa; font-weight: 700; }

    /* Tighter topnav */
    /* This was a flat bar in every state, and the cover runs underneath it -
       so the artwork began at a straight line 68px down, which is the edge at
       the top of the screen. Unscrolled it is now a gradient that reaches
       nothing at its lower edge, with the border off; once the page has moved
       the solid bar comes back, because by then there is a row behind it. */
    .topnav {
        background: linear-gradient(to bottom,
            rgba(23,11,31,.9) 0%, rgba(23,11,31,.62) 45%,
            rgba(23,11,31,.26) 75%, rgba(23,11,31,0) 100%);
        border-bottom-color: transparent;
    }
    .topnav.scrolled {
        background: rgba(23,11,31,0.96);
        border-bottom-color: rgba(231,162,94,0.18);
    }
    .tn-inner { padding: 0 8px; gap: 0; justify-content: center; }

    /* Main wrap bottom padding for mobile nav */
    .main-wrap { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    body, .main-wrap, .page { background: #180d22; }
    /* Kept in step with the line above - they are the same colour, and
       everything that blends into the page depends on them matching. */
    :root { --page-bg: #180d22; --page-bg-rgb: 24, 13, 34; }
    .mobile-nav {
        height: calc(72px + env(safe-area-inset-bottom, 0px));
        background: rgba(22,9,30,0.98); border-top: 1px solid rgba(231,162,94,0.2);
        padding: 8px 8px env(safe-area-inset-bottom, 0px);
    }
    .mn-item {
        padding: 6px 2px 5px; gap: 5px; color: #a997b9;
        font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none;
    }
    .mn-item i { font-size: 19px; }
    .mn-item.active { color: #f6eef9; }
    .mn-avatar {
        width: 22px; height: 22px; display: grid; place-items: center;
        border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.12);
    }
    .mn-avatar i { font-size: 11px; }

    /* Mobile home uses content-first rows instead of the desktop billboard. */
    #page-home .hero { display: none; }
    #page-home .content { margin-top: 0; padding-top: calc(var(--nav-h) + 18px); }
    #main-rows-container { display: flex; flex-direction: column; }
    #trending-now { order: 1; }
    #continue-watching-section { order: 2; }
    #top-anime { order: 3; }
    #action-movies { order: 4; }
    #sci-fi-shows { order: 5; }
    .hero-title { font-size: clamp(2rem, 8vw, 3.5rem); }
    .hero-description { font-size: 0.875rem; -webkit-line-clamp: 2; margin-bottom: 18px; }
    .hero-buttons { gap: 10px; }
    .hero-buttons .btn { padding: 10px 20px; font-size: 14px; }

    /* Catalog pages */
    #page-tv .page-hero, #page-movies .page-hero, #page-anime .page-hero { display: none; }
    #page-tv .content-page, #page-movies .content-page, #page-anime .content-page {
        margin-top: 0; padding: calc(var(--nav-h) + 24px) 20px 110px;
    }
    .mobile-catalog-head { display: block; margin-bottom: 24px; }
    .mobile-catalog-head h1 { margin: 0 0 20px; color: #fff; font-size: 26px; }
    .mobile-filter-row { display: flex; flex-wrap: wrap; gap: 9px; position: relative; }
    .mobile-filter-row button {
        min-height: 48px; padding: 0 18px; display: flex; align-items: center; gap: 13px;
        border: 1px solid rgba(226,141,90,.3); border-radius: 12px;
        background: rgba(255,255,255,.045); color: #f1e8f5;
        font: 500 14px Inter, sans-serif;
    }
    .mobile-filter-row button i { color: #b7a4c3; font-size: 10px; }
    #page-tv .content-page .row, #page-movies .content-page .row, #page-anime .content-page .row {
        margin: 0 0 16px; padding: 0; opacity: 1; transform: none;
    }
    #page-tv .content-page .row-header, #page-movies .content-page .row-header, #page-anime .content-page .row-header {
        display: none;
    }
    #page-tv .content-page .row-posters, #page-movies .content-page .row-posters, #page-anime .content-page .row-posters {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px 12px; padding: 0; overflow: visible;
    }
    #page-tv .content-page .poster-card, #page-movies .content-page .poster-card, #page-anime .content-page .poster-card,
    #page-tv .content-page .poster-skeleton, #page-movies .content-page .poster-skeleton, #page-anime .content-page .poster-skeleton {
        width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.08);
    }
    .page-hero-title { font-size: 2rem; }

    /* Content rows */
    .row { padding: 0 20px; margin-bottom: 52px; }
    .row-header { padding: 0 0 12px; }
    .mobile-view-all {
        display: flex; align-items: center; gap: 8px; border: 0; background: none;
        color: #b49fc0; font: 500 14px Inter, sans-serif;
    }
    .row-title { font-size: 20px; }
    .row-title::before { display: none; }
    .row-posters { gap: 12px; padding: 4px 0 18px; }
    #page-home .poster-card, #page-home .poster-skeleton {
        width: clamp(116px, 34vw, 160px); height: auto; aspect-ratio: 2 / 3;
        border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.08);
    }
    #page-home .continue-card { width: min(68vw, 300px); }
    #page-home .cc-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
    #page-home .cc-title { font-size: 14px; margin-top: 5px; }
    .card-dots-btn { display: flex !important; }

    /* Hide heavy hover panel on touch */
    .poster-hover-panel { display: none !important; }

    /* Detail modal */
    .video-modal { align-items: stretch; background: #09050d; backdrop-filter: none; }
    /* svh, not dvh: dvh grows as Safari's address bar collapses on scroll,
       so anything measured in it resizes under your finger while you are
       reading. svh is the height with the bar out, which never changes. */
    .modal-content { width: 100%; max-width: none; max-height: 100svh; border-radius: 0; box-shadow: none; }
    .detail-panel { border-radius: 0; max-height: 100svh; background: #21102f; }
    .detail-backdrop { height: 310px; background-position: center top; }
    /* Shrink the gradient fade so it doesn't eat too much of the shorter backdrop */
    .detail-backdrop-fade { margin-top: -110px; height: 110px; background: linear-gradient(to bottom, transparent, #21102f); }
    /* Pull title out of absolute positioning --- on desktop top:220px sits nicely
       over the 380px backdrop, but with a 220px backdrop it lands on the buttons */
    .detail-logo-wrap { position: absolute; top: 112px; left: 24px; right: 24px; padding: 0; }
    .detail-logo-wrap h1 { font-size: 30px; max-width: 82%; }
    .detail-logo-wrap img { max-width: 240px; max-height: 104px; }
    .detail-body { padding: 0 24px 36px; }
    .detail-close-btn {
        top: 16px; left: 20px; right: auto; width: auto; height: 38px;
        padding: 0 15px; border-radius: 22px; background: rgba(20,16,24,.76);
    }
    .detail-close-btn i::after { content: '  Back'; font-family: Inter, sans-serif; font-weight: 600; }
    .detail-columns { flex-direction: column; gap: 14px; }
    .detail-actions { flex-wrap: nowrap; gap: 10px; margin-top: -18px; }
    .detail-play-btn { border-radius: 26px; min-width: 136px; justify-content: center; }
    .detail-icon-btn { width: 40px; height: 40px; border-width: 0; background: rgba(20,15,27,.68); }
    .detail-meta { gap: 9px; font-size: 13px; }
    .detail-desc-col p { font-size: 15px; line-height: 1.65; }
    .detail-side-col { gap: 8px; }
    .detail-similar-title { font-size: 22px; margin-bottom: 16px; }
    .detail-similar-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 14px; }
    .detail-similar-card { border-radius: 10px; }

    .detail-ep-header { align-items: center; gap: 10px; }
    .detail-ep-label { font-size: 22px; }
    .detail-ep-controls { gap: 8px; }
    .detail-mark-btn, .detail-ep-drop-btn { min-height: 44px; border-radius: 12px; padding: 8px 12px; }
    .detail-ep-drop-menu { max-height: 330px; overflow-y: auto; background: rgba(25,27,34,.98); }
    .detail-ep-card { display: grid; grid-template-columns: 174px 1fr; gap: 10px 14px; padding: 12px 0; align-items: start; }
    .detail-ep-num { display: none; }
    .detail-ep-thumb { width: 174px; grid-row: 1 / span 2; border-radius: 10px; }
    .detail-ep-title { white-space: normal; line-height: 1.25; font-size: 15px; }
    .detail-ep-meta { font-size: 12px; }
    .detail-ep-desc { -webkit-line-clamp: 3; }
    .detail-ep-actions { grid-column: 2; }

    .rd-settings-panel {
        inset: auto 0 0 0 !important; width: 100% !important; max-height: 62svh;
        border-radius: 24px 24px 0 0 !important; background: rgba(24,21,29,.98) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Profile manager */
    .pm-title { font-size: 2rem; }
    .pm-avatar { width: 68px; height: 68px; font-size: 26px; }
    .pm-profile-card { width: 68px; }
    .pm-grid { gap: 14px; }
    .profile-manager.switcher-mode {
        background: radial-gradient(circle at 50% 38%, rgba(46,24,58,.22), transparent 38%), #030303;
    }
    .profile-manager.switcher-mode .pm-content {
        width: 100%; max-width: 560px; padding: 0 24px; transform: translateY(-4vh);
    }
    .profile-manager.switcher-mode .pm-title {
        margin-bottom: 56px; font-size: clamp(30px, 8vw, 40px); font-weight: 400;
        letter-spacing: -1.2px;
    }
    .profile-manager.switcher-mode .pm-grid {
        display: grid; grid-template-columns: repeat(var(--profile-count), 100px); justify-content: center;
        align-items: start; gap: 38px 24px; margin: 0 auto;
    }
    .profile-manager.switcher-mode .pm-profile-card {
        position: relative; width: 100px; gap: 13px; padding-bottom: 44px;
    }
    .profile-manager.switcher-mode .pm-avatar {
        width: 100px; height: 100px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
        font-size: 38px; overflow: visible; box-shadow: 0 12px 32px rgba(0,0,0,.48);
    }
    .profile-manager.switcher-mode .pm-avatar > img { border-radius: 11px !important; }
    .profile-manager.switcher-mode .pm-name {
        width: 100%; overflow: hidden; color: #c8b7d2; font-size: 16px;
        line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
    }
    .profile-manager.switcher-mode .pm-edit-overlay {
        inset: auto auto -67px 50%; transform: translateX(-50%);
        width: 52px; height: 34px; border-radius: 18px; opacity: 1;
        pointer-events: auto;
        background: rgba(28,22,31,.92); border: 1px solid rgba(226,141,90,.25);
        color: #cbb8d7; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
    }
    .profile-manager.switcher-mode .pm-add-card {
        grid-column: 1 / -1; justify-self: center; margin-top: 14px; padding-bottom: 0;
    }
    .profile-manager.switcher-mode .pm-add-card .pm-avatar {
        background: rgba(255,255,255,.018) !important;
        border: 2px dashed rgba(203,184,215,.38) !important;
        color: #cbb8d7; font-size: 38px !important; box-shadow: none;
    }
    .profile-manager.switcher-mode .pm-add-card .pm-name { overflow: visible; }

    /* Mobile More sheet */
    #page-profile { background: #14091d; min-height: 100svh; }
    #page-profile .profile-page-wrap { display: none; }
    .mobile-more-page {
        position: relative; z-index: 2; display: block;
        /* Clear of the top nav: at 34px the sheet's rounded corners and its
           drag handle were drawn underneath it, and the handle read as part
           of the nav rather than as the thing you pull the sheet down by. */
        min-height: calc(100svh - var(--nav-h) - 12px);
        margin-top: calc(var(--nav-h) + 12px);
        padding: 44px 22px 112px; border-radius: 28px 28px 0 0;
        color: #f7f0fa; background: #14091d;
        box-shadow: 0 -1px 0 rgba(226,141,90,.22);
    }
    .more-drag-handle {
        position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
        width: 54px; height: 5px; margin: 0;
        border-radius: 5px; background: rgba(255,255,255,.28);
    }
    .mobile-more-page h1 { margin: 0 0 2px; font-size: 36px; line-height: 1.15; letter-spacing: -.8px; }
    .more-subtitle { margin: 0 0 20px; color: #a994b7; font-size: 16px; }
    .more-profile-card {
        width: 100%; min-height: 88px; display: flex; align-items: center; gap: 14px;
        padding: 14px 18px; margin-bottom: 22px; border-radius: 18px;
        color: #fff; text-align: left; background: rgba(255,255,255,.055);
        border: 1px solid rgba(226,141,90,.3); font-family: inherit;
    }
    .more-profile-avatar {
        width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center;
        border-radius: 11px; font-size: 26px; overflow: hidden;
    }
    .more-profile-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; }
    .more-profile-copy strong { font-size: 18px; }
    .more-profile-copy small { color: #a994b7; font-size: 13px; }
    .more-profile-card > i { color: #b7a2c4; font-size: 16px; }
    .more-section-label {
        margin: 0 6px 12px; color: #a994b7; font-size: 12px;
        font-weight: 800; letter-spacing: .08em;
    }
    .more-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
    .more-quick-card {
        min-height: 132px; padding: 18px 8px 14px; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 7px; border-radius: 18px;
        border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.075);
        color: #f7f0fa; font-family: inherit; text-align: center;
    }
    .more-quick-card i { font-size: 21px; margin-bottom: 8px; }
    .more-quick-card strong { font-size: 14px; white-space: nowrap; }
    .more-quick-card small { color: #a994b7; font-size: 12px; }
    .more-quick-card:nth-child(4) { grid-column: 1; }
    .more-options-group {
        margin-bottom: 18px; overflow: hidden; border-radius: 18px;
        border: 1px solid rgba(226,141,90,.28); background: rgba(255,255,255,.05);
    }
    .more-options-group button {
        width: 100%; min-height: 67px; display: grid; grid-template-columns: 32px 1fr 18px;
        align-items: center; gap: 8px; padding: 0 22px; border: 0;
        border-bottom: 1px solid rgba(226,141,90,.19); color: #f7f0fa;
        background: transparent; font: 600 17px/1 Inter, sans-serif; text-align: left;
    }
    .more-options-group button:last-child { border-bottom: 0; }
    .more-options-group button > i:first-child { font-size: 19px; text-align: center; }
    .more-options-group button > i:last-child { color: #b7a2c4; font-size: 14px; text-align: right; }
    .more-settings-group { margin-top: 8px; }

    #page-settings { min-height: 100svh; background: #180d22; }
    .mobile-settings-page {
        display: block; min-height: 100svh; padding: calc(var(--nav-h) + 28px) 24px 110px;
        color: #f8f1fa; background: radial-gradient(circle at 72% 18%, rgba(88,47,116,.24), transparent 34%), #180d22;
    }
    .settings-kicker, .settings-section-kicker, .settings-member-line {
        color: #b69ec4; font-size: 12px; font-weight: 700; letter-spacing: .24em;
    }
    .mobile-settings-page h1 { margin: 14px 0 22px; font-size: 40px; line-height: 1; }
    .settings-member-line { margin: 0 0 9px; }
    .settings-tabs {
        display: grid; grid-template-columns: 1.15fr 1fr 1fr 50px; gap: 4px;
        margin: 28px 0 24px; padding-top: 22px; border-top: 1px solid rgba(226,141,90,.24);
    }
    .settings-tabs button {
        min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px;
        border: 0; border-radius: 12px; color: #ad99ba; background: transparent;
        font: 500 14px/1 Inter, sans-serif; white-space: nowrap;
    }
    .settings-tabs button.active { color: #fff; background: rgba(255,255,255,.09); }
    .settings-section-kicker { margin-top: 4px; }
    .mobile-settings-page h2 { margin: 20px 0 28px; font-size: 29px; }
    .settings-card {
        margin-bottom: 20px; padding: 26px 24px; border-radius: 20px;
        background: rgba(255,255,255,.035); border: 1px solid rgba(226,141,90,.3);
    }
    .settings-card h3 { margin: 0 0 12px; font-size: 20px; }
    .settings-card p { margin: 0 0 24px; color: #ae9ab9; font-size: 15px; line-height: 1.65; }
    .settings-card label { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 700; }
    .settings-card input {
        width: 100%; height: 60px; margin: 0 0 18px; padding: 0 20px;
        border: 1px solid rgba(226,141,90,.3); border-radius: 13px; outline: 0;
        background: rgba(255,255,255,.035); color: #fff; font: 400 16px Inter, sans-serif;
    }
    .settings-card input:focus { border-color: rgba(255,255,255,.48); }
    .settings-card input::placeholder { color: rgba(255,255,255,.25); }
    .settings-current { margin: 0 0 24px; color: #ad99ba; font-size: 14px; overflow-wrap: anywhere; }
    .settings-submit, .settings-pin-row button {
        min-height: 54px; padding: 0 24px; border: 0; border-radius: 12px;
        background: #f8f3fa; color: #18101d; font: 700 15px Inter, sans-serif;
    }
    .settings-pin-row {
        display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
        padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .settings-pin-row:last-child { border-bottom: 0; padding-bottom: 0; }
    .settings-pin-copy { display: flex; flex-direction: column; gap: 7px; }
    .settings-pin-copy strong { font-size: 16px; }
    .settings-pin-copy small { color: #ad99ba; font-size: 14px; }
    .pp-card { padding: 20px 16px; }
    .pp-card-inner { flex-direction: column; gap: 16px; }

    /* Auth card */
    .fx-card { padding: 28px 20px 24px; }

    /* Search bar */
    .tn-search-bar { padding: 12px 16px; }

    /* Mylist */
    .mylist-empty { padding: 60px 24px; }

    /* Fix Live TV hidden under topnav */
    .ltv-wrap { padding-top: calc(var(--nav-h) + 20px); }

    /* Fix sub-pages: content rows were overlapping hero text on mobile */
    .content-page { margin-top: 0; }

    /* Safari iOS fix: overflow-y:auto on modal-content absorbs touch events
       before they reach the iframe. Make modal-content non-scrolling;
       the detail panel handles its own scroll when active. */
    .modal-content { overflow: hidden; }
    .detail-panel.active { overflow-y: auto; -webkit-overflow-scrolling: touch; }

    /* Remove the negative margin that clips the iframe top on mobile */
    #video-player { margin-top: 0; height: 100%; }
}

@media (max-width: 480px) {
    .hero { height: 88vw; min-height: 260px; padding: 0 14px 36px; }
    .hero-title { font-size: clamp(1.8rem, 7vw, 2.8rem); margin-bottom: 10px; }
    .hero-description { display: none; }
    .hero-buttons .btn { padding: 9px 16px; font-size: 13px; }
    .hero-buttons { gap: 8px; }

    .row { padding: 0 10px; }
    .poster-card { width: 96px; }

    .detail-body { padding-left: 20px; padding-right: 20px; }
    .detail-ep-card { grid-template-columns: minmax(128px, 44%) 1fr; }
    .detail-ep-thumb { width: 100%; }
    .detail-mark-btn { font-size: 0; }
    .detail-mark-btn i { font-size: 12px; }

    .pm-grid { gap: 10px; }
    .pm-profile-card { width: 60px; }
    .pm-avatar { width: 60px; height: 60px; font-size: 22px; }

    .search-page-wrap { padding: calc(var(--nav-h) + 16px) 16px 80px; }
    .search-inline-input { font-size: 1.2rem; }
    .search-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}




/* --- Profile tiles on phones ---
   These were 60px with a 54px pencil overlay sitting on top, so a profile
   photo was almost entirely hidden behind the edit icon. The tiles are now
   large enough to read as pictures and the pencil is a pill underneath.
   Scoped below .switcher-mode's own rules, which are more specific and keep
   their existing layout. */
@media (max-width: 600px) {
    .pm-avatar {
        width: 104px; height: 104px; font-size: 40px;
        border-radius: 14px; overflow: visible;
    }
    .pm-avatar > img { border-radius: inherit; }
    .pm-profile-card { width: 104px; gap: 11px; padding-bottom: 38px; position: relative; }
    .pm-grid { gap: 20px 16px; }
    .pm-name { font-size: 16px; }
    .pm-edit-overlay {
        inset: auto auto -40px 50%; transform: translateX(-50%);
        width: 50px; height: 32px; border-radius: 16px; font-size: 13px;
        background: rgba(28,22,31,.92);
        border: 1px solid rgba(226,141,90,.25);
        color: #cbb8d7; box-shadow: 0 6px 18px rgba(0,0,0,.35);
    }
}
@media (max-width: 420px) {
    .pm-avatar       { width: 92px; height: 92px; font-size: 36px; }
    .pm-profile-card { width: 92px; }
}
/* --- Audit fixes ---
   Reported by tests/audit.html. Three separate things:

   1. prefers-reduced-motion. The hero uses `animation: fadeInUp .9s both`, and
      the fill mode means it holds the 0% keyframe - opacity 0 - until the
      animation actually runs. An animation that never runs therefore leaves a
      600x372 invisible box sitting over the hero, still taking every tap. The
      audit hit exactly that. Honouring reduced motion removes the window in
      which that can happen and respects the setting at the same time.

   2. Tap targets under 44x44. Apple's own floor is 44pt; the poster menu and
      the row arrows were 28x28 and "View all" was 69x17. The hit areas are
      grown without changing how anything looks.

   3. 10px metadata text, bumped to the 11px floor the audit checks for.
   --- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Anything whose resting state is supplied by an animation or a reveal
       class has to be made visible outright, or it stays invisible. */
    .hero-content { animation: none !important; opacity: 1 !important; transform: none !important; }
    .row          { opacity: 1 !important; }
}

/* The dots button keeps its 28px circle; the pseudo-element grows only the
   area that receives the tap. */
.card-dots-btn { position: absolute; }
.card-dots-btn::after {
    content: ''; position: absolute; inset: -9px; border-radius: 50%;
}

@media (max-width: 600px) {
    .mobile-view-all {
        min-height: 44px; padding: 0 4px 0 0;
    }
    .php-meta { font-size: 11px; }

    /* Keyed to width rather than (hover: none): a desktop browser narrowed to
       phone width still reports hover, so a hover query would skip exactly the
       case being measured. */
    .row-nav-btn { position: relative; width: 34px; height: 34px; }
    .row-nav-btn::after {
        content: ''; position: absolute; inset: -5px; border-radius: 50%;
    }
    /* The poster card clips its own overflow, so the dots button cannot grow
       upwards past the card edge - it grows itself instead and takes the
       pseudo-element only for the room it has. */
    .card-dots-btn { width: 34px; height: 34px; top: 5px; right: 5px; }
    .card-dots-btn::after { inset: -5px; }
}
/* == Phone player ============================================================
   On a phone the player IS the screen, the way every video app does it.

   It was a fixed 630px box, which left a 2.39:1 film as a thin strip with
   roughly 450px of black under it. Fitting the box to the film instead was
   worse in a different way: at 240px tall the controls bar covered a third of
   the picture, and #rd-pause-info - positioned bottom:80px for a tall desktop
   player - landed in the middle of that box, printing the title straight
   through the centred play button.

   Filling the viewport fixes both at once. The picture is centred with the
   black around it belonging to the player rather than being dead space, the
   controls sit at the bottom of the screen, and the overlays get the room
   their geometry was designed for.
   ========================================================================== */
@media (max-width: 900px) {
    .video-modal.active .modal-content { display: flex; flex-direction: column; }
    .iframe-wrapper:not(:fullscreen):not(:-webkit-full-screen) {
        height: 100dvh;
        max-height: 100dvh;
        flex: 1 1 auto;
    }
    .iframe-wrapper #rd-player {
        width: 100% !important; height: 100% !important;
        object-fit: contain; background: #000;
    }
    /* Clear of the controls bar, and of the centred play button. */
    #rd-pause-info { bottom: 96px; left: 20px; right: 20px; }
    #rd-pause-title { font-size: 19px; }

    /* The flex rule above turns the detail panel into a flex item, which is
       then clipped by its own overflow:hidden instead of making its parent
       scroll. Below 769px the panel already scrolls itself; without this it
       scrolled nowhere between 769 and 900, leaving later episodes of a long
       season unreachable by any means. min-height:0 is what lets a flex item
       shrink below its content and actually scroll. */
    .detail-panel.active {
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        max-height: 100dvh; min-height: 0;
    }
    .video-modal.active .modal-content { overflow: hidden; }
}
/* Landscape on a phone: not enough height for the desktop offsets. */
@media (max-width: 900px) and (max-height: 430px) {
    #rd-pause-info { bottom: 68px; }
    #rd-pause-title { font-size: 16px; }
}
/* == Offline banner =========================================================
   Shown when the catalogue cannot be reached. It sits above the mobile nav
   and is not a dialog on purpose: cached rows and anything already on screen
   stay usable while it is up.
   ========================================================================= */
#net-banner {
    position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px);
    z-index: 4000; display: none; align-items: center; gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 11px 13px 11px 16px; border-radius: 12px;
    background: rgba(28, 22, 31, .97);
    border: 1px solid rgba(226, 141, 90, .3);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
    color: #ece6f0; font: 500 14px Inter, sans-serif;
    opacity: 0; transition: opacity .2s, transform .2s;
}
#net-banner.show { display: flex; opacity: 1; transform: translate(-50%, 0); }
#net-banner span { line-height: 1.3; }
#net-banner button {
    flex-shrink: 0; min-height: 36px; padding: 0 14px; border-radius: 9px;
    border: 0; cursor: pointer; font: 600 14px Inter, sans-serif;
    background: #e28d5a; color: #1a141c;
}
#net-banner button:hover { filter: brightness(1.08); }
@media (min-width: 901px) { #net-banner { bottom: 28px; } }
/* == The episode you were watching ==========================================
   Marked when returning from the player so the place you left is obvious in
   a long season list, and scrolled to at the same time.
   ========================================================================= */
.detail-ep-card.now-playing {
    background: linear-gradient(90deg, rgba(226,141,90,.16), rgba(122,79,208,.14));
    border: 1px solid rgba(226,141,90,.45);
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.detail-ep-card.now-playing .detail-ep-title { color: #fff; font-weight: 700; }
.detail-ep-card.now-playing .detail-ep-num   { color: #e28d5a; font-weight: 700; }
/* ===== Mobile home: the cover large at the top, Continue Watching under it ==
   The hero was switched off on phones, so the home screen opened straight on
   a row of small posters and Continue Watching sat below Trending. On the one
   screen this app is mostly used on, the thing you are part way through and
   the thing being featured were both the hardest to reach. The desktop hero is
   unchanged; this is the same markup laid out for a tall screen. */
@media (max-width: 900px) {
    #page-home .hero {
        display: flex;
        /* Tall enough for the artwork to be the screen rather than a banner on
           it, but never so tall that the first row is out of reach. */
        height: min(86vh, 142vw);
        min-height: 420px;
        padding: 0 20px 26px;
        align-items: flex-end;
        justify-content: center;
    }
    /* The seam. The artwork used to be covered over at the bottom by a
       gradient that ran to var(--bg), a near-black, while the page behind it
       is a dark purple - so the two met in a line straight across the screen.
       Nothing is painted over it now: the image itself fades to nothing, onto
       whatever the page is, so there is no colour to match and no edge. */
    #page-home .hero-art {
        background-position: center top;
        /* The scrim above does the blending; this only stops the image from
           having an edge of its own underneath it. */
        -webkit-mask-image: linear-gradient(to bottom,
            #000 0%, #000 58%, rgba(0,0,0,.6) 82%, transparent 100%);
        mask-image: linear-gradient(to bottom,
            #000 0%, #000 58%, rgba(0,0,0,.6) 82%, transparent 100%);
    }
    /* With the hero back, the rows start under it rather than under the nav. */
    #page-home .content { margin-top: 0; padding-top: 4px; }

    /* What you were watching comes first - ahead of the endless-scroll rows
       too, which carry no order of their own and so default to 0. */
    #continue-watching-section { order: -1; }
    #trending-now              { order: 1; }

    /* Only as much shade as the words need to be readable, and all of it
       transparent black - no opaque colour anywhere near the bottom edge. */
    #page-home .hero-overlay {
        background:
            /* Ends in the page's own colour, so the bottom of the hero and
               the top of the page are literally the same pixel value, and
               gets there over more than half the height so there is no band
               to see. Fading to transparent instead left the dark scrim
               sitting on purple, which is the edge that was still showing. */
            linear-gradient(to top,
                rgb(var(--page-bg-rgb))        0%,
                rgba(var(--page-bg-rgb), .98)  7%,
                rgba(var(--page-bg-rgb), .9)   16%,
                rgba(var(--page-bg-rgb), .72)  28%,
                rgba(var(--page-bg-rgb), .45)  42%,
                rgba(var(--page-bg-rgb), .2)   56%,
                rgba(var(--page-bg-rgb), .06)  68%,
                transparent                    80%),
            linear-gradient(to bottom, rgba(0,0,0,.5) 0%, transparent 30%);
    }
    /* This was the other half of the line: a band of flat var(--bg) across
       the bottom. The mask replaces it. */
    #page-home .hero-fade { display: none; }

    #page-home .hero-content {
        max-width: none; width: 100%;
        display: flex; flex-direction: column; align-items: center;
        text-align: center;
    }
    /* The chips and the synopsis are desktop furniture; the single meta line
       below the title says the same thing in the space a phone has. */
    #page-home .hero-meta,
    #page-home .hero-description,
    #page-home #btn-info { display: none; }

    #page-home .hero-logo {
        display: none; width: auto;
        max-width: min(78%, 320px); max-height: 92px;
        object-fit: contain; margin-bottom: 12px;
        filter: drop-shadow(0 3px 18px rgba(0,0,0,.7));
    }
    #page-home .hero-logo.visible { display: block; }
    #page-home .hero-logo.visible + .hero-title { display: none; }

    #page-home .hero-title {
        font-size: clamp(2.4rem, 13vw, 4.2rem);
        line-height: 0.92; margin-bottom: 10px;
        text-shadow: 0 3px 24px rgba(0,0,0,.65);
    }
    .hero-sub {
        display: flex; align-items: center; justify-content: center;
        gap: 9px; margin-bottom: 18px;
        font-size: 13px; font-weight: 600; color: rgba(255,255,255,.88);
        text-shadow: 0 1px 8px rgba(0,0,0,.7);
    }
    .hero-sub .hero-sub-dot { opacity: .45; }
    .hero-sub .hero-sub-star { color: #f5c518; }

    #page-home .hero-buttons {
        display: flex; width: 100%; gap: 10px;
        align-items: stretch; justify-content: center;
    }
    #page-home .hero-buttons .btn {
        height: 50px; padding: 0 18px; border-radius: 10px;
        font-size: 14px; font-weight: 700; letter-spacing: .4px;
        text-transform: uppercase; justify-content: center;
    }
    #page-home .hero-buttons .btn-play { flex: 1 1 0; background: #fff; color: #000; }
    #page-home .hero-buttons #btn-hero-list {
        flex: 1 1 0;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.14);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        color: #fff;
    }
    #page-home .hero-buttons #btn-hero-list.in-list i { color: #e28d5a; }
    #page-home .hero-buttons .hero-icon-btn {
        flex: 0 0 56px; padding: 0;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.14);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        color: #fff;
    }
    /* Id-scoped so these beat the defaults below, which come later in the
       file and would otherwise win on equal specificity. */
    #page-home .hero-mobile-btn { display: inline-flex; }

    #page-home .hero-dots {
        display: flex; gap: 7px; justify-content: center;
        margin-top: 16px;
    }
    .hero-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: rgba(255,255,255,.3);
        border: none; padding: 0;
        position: relative;
        transition: background .25s ease, width .25s ease;
    }
    /* A dot is 6px of paint and 44px of target. The circle stays small; only
       the area that receives the tap grows, the same trick the card menus use. */
    .hero-dot::after {
        content: ''; position: absolute;
        left: 50%; top: 50%; transform: translate(-50%, -50%);
        width: 44px; height: 44px;
    }
    .hero-dot.active { background: #fff; width: 18px; border-radius: 3px; }
}

/* The two extra buttons, the dots and the title lettering belong to the phone
   layout only; the desktop hero is unchanged. */
.hero-mobile-btn { display: none; }
.hero-dots       { display: none; }
.hero-logo       { display: none; }
/* ============================================================
   PREMIUM CONTROL LANGUAGE
   One shape vocabulary for every button on the site, taken from
   the hero pair: a solid white pill for the one thing you came to
   do, a translucent blurred pill for everything beside it, and a
   squared-off tile for an icon on its own.
   ============================================================ */
:root {
    --ctl-radius: 12px;
    --ctl-fill:   rgba(255,255,255,.12);
    --ctl-line:   rgba(255,255,255,.14);
    --ctl-fill-h: rgba(255,255,255,.2);
}

.btn {
    padding: 0 26px; height: 46px;
    border-radius: var(--ctl-radius);
    font-size: 13.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    justify-content: center;
}
.btn-play {
    background: #fff; color: #000;
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.btn-play:hover { background: #fff; transform: translateY(-1px) scale(1.015); }
.btn-info {
    background: var(--ctl-fill); color: #fff;
    border: 1px solid var(--ctl-line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn-info:hover {
    background: var(--ctl-fill-h); transform: translateY(-1px) scale(1.015);
}
.btn:focus-visible,
.detail-icon-btn:focus-visible,
.rd-ctrl-btn:focus-visible {
    outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px;
}

/* Row arrows join the same family instead of being bare circles. */
.row-nav-btn {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--ctl-fill); border: 1px solid var(--ctl-line);
    color: rgba(255,255,255,.85);
}
.row-nav-btn:hover { background: var(--ctl-fill-h); color: #fff; transform: translateY(-1px) scale(1.04); }
/* 32px of paint, 44px of target - the same trick the hero dots use. */
.row-nav-btn { position: relative; }
.row-nav-btn::after {
    content: ''; position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px;
}

/* Desktop nav links sit in one capsule, the way the hero buttons do. */
@media (min-width: 769px) {
    .tn-links {
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 999px; padding: 4px;
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    }
    .tn-link { border-radius: 999px; padding: 7px 15px; }
    .tn-link.active { background: rgba(255,255,255,.14); color: #fff; }
    .tn-profile-btn { border-radius: 999px; padding: 4px 8px 4px 4px; background: rgba(255,255,255,.07); }
}

/* ---- Player control bar ------------------------------------
   One line: transport, elapsed, the scrubber taking the room that
   is left, then the rest. The scrubber used to sit on a line of
   its own above a half-empty row.
   ------------------------------------------------------------ */
.rd-custom-controls { padding: 46px 0 0; }
.rd-ctrl-row {
    display: flex; align-items: center; gap: 14px;
    padding: 4px 18px 16px; justify-content: flex-start;
}
.rd-controls-left  { gap: 10px; }
.rd-controls-right { gap: 2px; margin-left: auto; }
.rd-seek-wrap { flex: 1 1 auto; min-width: 60px; padding: 0; }
.rd-seek-bar  { height: 4px; background: rgba(255,255,255,.22); }
.rd-seek-wrap:hover .rd-seek-bar { height: 6px; }
.rd-seek-fill { background: #fff; }
.rd-seek-thumb { width: 14px; height: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.6); }

.rd-ctrl-round {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.6px solid rgba(255,255,255,.5);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; font-size: 15px; position: relative;
    transition: border-color .15s, background .15s, transform .12s;
}
.rd-ctrl-round:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: none; }
/* The digits ride inside the circular arrow, as on a remote. */
.rd-skip-n {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -44%);
    font-size: 8.5px; font-weight: 800; letter-spacing: -.03em;
    pointer-events: none;
}
.rd-ctrl-skip i { transition: transform .15s; }
#rd-skip-back.rd-skip-go i { animation: rdSkipBack .45s ease; }
#rd-skip-fwd.rd-skip-go  i { animation: rdSkipFwd  .45s ease; }
@keyframes rdSkipBack { 45% { transform: rotate(-42deg); } 100% { transform: rotate(0); } }
@keyframes rdSkipFwd  { 45% { transform: rotate(42deg);  } 100% { transform: rotate(0); } }

.rd-ctrl-playpause {
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; color: #000; font-size: 17px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; box-shadow: 0 4px 18px rgba(0,0,0,.4);
    transition: transform .12s, background .15s;
}
.rd-ctrl-playpause:hover { background: #fff; color: #000; transform: scale(1.06); }
.rd-ctrl-playpause:active { transform: scale(.95); }

.rd-time-current { font-size: 13px; font-weight: 600; margin-left: 4px; }
.rd-time-ends { margin-right: 6px; }

/* CC reads on or off at a glance instead of only in the menu. */
.rd-ctrl-cc { position: relative; }
.rd-ctrl-cc.active { color: #fff; }
.rd-ctrl-cc.active::after {
    content: ''; position: absolute; left: 7px; right: 7px; bottom: 0;
    height: 2px; border-radius: 2px; background: #fff;
}

@media (max-width: 600px) {
    /* No room for all three on one line: the scrubber takes its own. */
    .rd-ctrl-row { flex-wrap: wrap; gap: 8px 6px; padding: 4px 10px 14px; }
    /* Line one is the scrubber with the clock on its end; line two is every
       button, so nothing is left stranded on a row of its own. */
    /* basis 0, or the bar's own full-width child makes it too wide to share
       the line with the clock and everything wraps apart. */
    .rd-seek-wrap { order: -2; flex: 1 1 0; min-width: 0; }
    .rd-time-current { order: -1; flex: 0 0 auto; }
    /* A zero-height item that cannot share a line: it ends the scrubber row
       so the buttons start a clean one below it. */
    .rd-ctrl-row::after {
        content: ''; order: -1; flex: 1 0 100%; height: 0;
    }
    .rd-ctrl-round { width: 36px; height: 36px; }
    .rd-ctrl-playpause { width: 44px; height: 44px; }
    .rd-controls-left  { gap: 7px; flex: 0 1 auto; }
    .rd-controls-right { gap: 0; flex: 0 0 auto; }
    .rd-controls-right .rd-ctrl-btn { padding: 5px 5px; font-size: 15px; }
    .rd-time-ends { display: none; }
    .rd-time-current { font-size: 12px; margin-left: 2px; }
}

/* ---- Phone shell ------------------------------------------- */
@media (max-width: 768px) {
    /* The bottom bar lifts off the edge and becomes a floating
       capsule, with the pill behind whichever tab you are on. */
    /* A flat bar across the full width, with one hairline above it - the
       floating capsule put a shadow and two gutters between the tabs and
       the edge of the screen, which is not how this bar should sit. */
    .mobile-nav {
        left: 0; right: 0; bottom: 0;
        height: calc(74px + env(safe-area-inset-bottom, 0px));
        padding: 10px 4px env(safe-area-inset-bottom, 0px);
        border-radius: 0; border: 0;
        border-top: 1px solid rgba(231,162,94,.18);
        background: rgba(20,9,29,.97);
        backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
        box-shadow: none;
    }
    .mn-item {
        border-radius: 0; background: none; padding: 4px 2px; gap: 7px;
        font-size: 11.5px; font-weight: 500;
        transition: color .2s;
    }
    /* No pill behind the tab you are on; the label and icon brightening is
       the whole indicator, as on the bar this was taken from. */
    .mn-item.active { background: none; color: #f6eef9; }
    .mn-item i { font-size: 22px; }
    .mn-avatar { width: 26px; height: 26px; border-radius: 5px; }
    .main-wrap { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

    .btn { height: 50px; }
}
/* ---- The same vocabulary on the detail sheet ---------------- */
.detail-play-btn {
    height: 48px; padding: 0 30px; border-radius: var(--ctl-radius);
    font-size: 13.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; justify-content: center;
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
    transition: background .15s, transform .15s;
}
.detail-play-btn:hover { background: #fff; transform: translateY(-1px) scale(1.015); }
.detail-icon-btn {
    width: 48px; height: 48px; border-radius: var(--ctl-radius);
    background: var(--ctl-fill); border: 1px solid var(--ctl-line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: background .18s, border-color .18s, transform .15s;
}
.detail-icon-btn:hover { background: var(--ctl-fill-h); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.detail-icon-btn.active { color: #ff571a; border-color: rgba(255,87,26,.55); }

/* ---- Filter tabs and the search field ----------------------- */
.sft-btn {
    padding: 9px 20px; border-radius: 999px;
    border: 1px solid var(--ctl-line);
    background: var(--ctl-fill); color: rgba(255,255,255,.75);
    font-weight: 600; letter-spacing: .02em;
    transition: background .18s, color .18s, transform .15s;
}
.sft-btn:hover { background: var(--ctl-fill-h); color: #fff; transform: translateY(-1px); }
.sft-btn.active { background: #fff; color: #111; border-color: transparent; }

/* A field you can see the edges of, rather than a rule under the text. */
.search-inline-bar {
    border-bottom: none;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px; padding: 0 20px; height: 58px;
    transition: border-color .18s, background .18s;
}
.search-inline-bar:focus-within {
    border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08);
}
.search-inline-input { font-size: 1.15rem; }
.ltv-search-input { border-radius: 999px; }

@media (max-width: 768px) {
    .search-inline-bar { height: 52px; padding: 0 16px; border-radius: 14px; }
    .search-inline-input { font-size: 1rem; }
    .detail-play-btn { height: 50px; }
    .detail-icon-btn { width: 50px; height: 50px; }
}
/* ============================================================
   THE SAME VOCABULARY ON SETTINGS AND THE PROFILE PAGES
   Settings and More were the last places still using their own
   shapes - a 3px manage button, square-ish cards, a submit that
   looked nothing like WATCH NOW. Everything below is the hero
   pair again: solid white for the one action, translucent and
   blurred for everything beside it, one radius throughout.
   ============================================================ */

/* The submit on each settings card is the WATCH NOW of that card. */
.settings-submit, .settings-pin-row button {
    height: 50px; min-height: 50px; padding: 0 28px;
    border-radius: var(--ctl-radius); border: 0;
    background: #fff; color: #000;
    font: 700 13.5px Inter, sans-serif;
    letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
    transition: transform .15s, box-shadow .15s;
}
.settings-submit:active, .settings-pin-row button:active { transform: scale(.98); }

/* Account / Billing / Support become the nav's capsule group, with
   the pill sitting behind whichever tab you are on. */
.settings-tabs {
    background: rgba(255,255,255,.055);
    border: 1px solid var(--ctl-line);
    border-radius: 999px; padding: 4px; gap: 2px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.settings-tabs button {
    min-height: 46px; border-radius: 999px;
    color: rgba(255,255,255,.6);
}
.settings-tabs button.active {
    background: rgba(255,255,255,.14); color: #fff;
}

/* Fields match the search bar: edges you can see, not a rule. */
.settings-card input {
    border-radius: 14px; border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.055);
    transition: border-color .18s, background .18s;
}
.settings-card input:focus {
    border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.08);
}

/* Cards and option rows share one line colour, so Settings and More
   read as one surface rather than two tinted ones. */
.settings-card,
.more-options-group,
.more-profile-card,
.more-quick-card {
    border-color: var(--ctl-line);
    background: var(--ctl-fill);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.more-options-group button { border-bottom-color: rgba(255,255,255,.08); }
.more-quick-card, .more-profile-card { border-radius: 18px; }
.more-quick-card:active, .more-profile-card:active { background: var(--ctl-fill-h); }

/* Clear History / View All are the LIBRARY pill in miniature. */
.pp-clear-btn, .pp-view-btn {
    padding: 8px 18px; border-radius: 999px;
    background: var(--ctl-fill); border: 1px solid var(--ctl-line);
    color: rgba(255,255,255,.8);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}

/* Manage Profiles / Done: the pair, not two outlines at 3px. */
.pm-manage-btn, .pm-done-btn {
    padding: 0 28px; height: 48px; border-radius: var(--ctl-radius);
    font-size: 13.5px; font-weight: 700; letter-spacing: .06em;
}
.pm-manage-btn {
    background: var(--ctl-fill); border: 1px solid var(--ctl-line);
    color: #fff;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pm-manage-btn:hover { background: var(--ctl-fill-h); border-color: var(--ctl-line); }
.pm-done-btn {
    background: #fff; border: 0; color: #000;
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.pm-done-btn:hover { background: #fff; color: #000; }

.settings-submit:focus-visible,
.settings-tabs button:focus-visible,
.pp-clear-btn:focus-visible,
.pp-view-btn:focus-visible,
.pm-manage-btn:focus-visible,
.pm-done-btn:focus-visible,
.more-quick-card:focus-visible,
.more-profile-card:focus-visible,
.more-options-group button:focus-visible {
    outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px;
}
/* The grid is three equal columns, but "Content Request" is set not to
   wrap, so its min-content width pushed the third card off the screen. */
.more-quick-card { min-width: 0; }
.more-quick-card strong { white-space: normal; }
@media (max-width: 768px) {
    /* Four cards in three columns left Roadmap alone on a row with a hole
       beside it; two by two fills the block and gives the labels room to
       sit on one line again. */
    .more-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .more-quick-card { min-height: 112px; padding: 16px 10px 14px; }
    .more-quick-card:nth-child(4) { grid-column: auto; }
    .mn-item { font-size: 12px; }
    .mn-item i { font-size: 23px; }
}
@media (max-width: 768px) {
    /* With More open the page behind it is frozen: at the top of a scrollable
       document a downward swipe is Safari's pull-to-refresh, and reloading
       the app was far too easy to do by accident while reaching for the
       sheet's own close gesture. The sheet scrolls itself instead, and
       contains its overscroll so the pull never reaches the page. */
    html.more-open, body.more-open { overflow: hidden; height: 100%; }
    html, body { overscroll-behavior-y: none; }
    body.more-open .mobile-more-page {
        max-height: calc(100svh - var(--nav-h) - 12px);
        overflow-y: auto; overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 768px) {
    /* On its own layer for the duration of the drag, so each frame is a
       composite rather than a repaint of the whole sheet. */
    .mobile-more-page.is-dragging { will-change: transform; }
}
@media (max-width: 768px) {
    /* The sheet's own background is opaque, so a blur inside it has nothing
       to blur - but it still costs a re-raster of every card on every frame
       of the pull, which is most of what made the gesture feel heavy. */
    .mobile-more-page .more-profile-card,
    .mobile-more-page .more-quick-card,
    .mobile-more-page .more-options-group,
    .mobile-settings-page .settings-card,
    .mobile-settings-page .settings-tabs {
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    /* The bar sits over the sheet the whole way down, and at .97 alpha the
       blur behind it was never visible anyway. */
    .mobile-nav {
        background: #140a1d;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
}
/* ── inline SVG icons ──────────────────────────────────────────────────────
   Stands in for a Font Awesome <i> where the icon is an inline SVG symbol
   rather than a font glyph, so every existing `button i` rule - size, colour,
   margin - still lands on it unchanged. */
.icon-svg { display: inline-flex; align-items: center; justify-content: center; }
.icon-svg svg { width: 1em; height: 1em; fill: currentColor; }