:root {
    --bg: #0b0b0f;
    --bg-soft: #14141b;
    --surface: #1b1b24;
    --surface-2: #23232e;
    --border: rgba(255, 255, 255, 0.08);
    --text: #f4f4f6;
    --muted: #9a9aa6;
    --brand: #e50914;
    --brand-2: #ff4d6d;
    --accent-grad: linear-gradient(135deg, #e50914 0%, #ff4d6d 100%);
    --radius: 14px;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Outfit', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font-family: inherit; cursor: pointer; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2c2c38; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Brand ---------- */
.brand {
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
}

/* ---------- Buttons ---------- */
.btn {
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.15s var(--ease), background 0.2s, opacity 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: #fff; color: #111; }
.btn-primary:hover { background: #e6e6e6; }
.btn-brand { background: var(--accent-grad); color: #fff; box-shadow: 0 8px 24px rgba(229, 9, 20, 0.35); }
.btn-ghost { background: rgba(255,255,255,0.12); color: #fff; backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,0.2); }
.btn-danger { background: #b0060f; color: #fff; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.input {
    width: 100%;
    padding: 13px 15px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 1rem;
    outline: none;
    transition: border 0.2s;
}
.input:focus { border-color: var(--brand-2); }
label.field { display: block; margin-bottom: 14px; }
label.field span { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }

/* ---------- Auth / Profiles centered ---------- */
.center-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1200px 600px at 70% -10%, rgba(229,9,20,0.18), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(255,77,109,0.12), transparent 60%),
        var(--bg);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: rgba(20, 20, 26, 0.85);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 38px 32px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}
.auth-card .brand { display: block; text-align: center; margin-bottom: 6px; font-size: 2rem; }
.auth-card .sub { text-align: center; color: var(--muted); margin-bottom: 26px; }
.auth-error { background: rgba(229,9,20,0.15); border: 1px solid rgba(229,9,20,0.4); color: #ff9aa4; padding: 10px 14px; border-radius: 10px; font-size: 0.9rem; margin-bottom: 14px; }
.auth-switch { text-align: center; margin-top: 18px; color: var(--muted); font-size: 0.9rem; }
.auth-switch a { color: var(--brand-2); font-weight: 600; cursor: pointer; }

/* ---------- Profiles ---------- */
.profiles-wrap { text-align: center; }
.profiles-wrap h1 { font-weight: 700; margin-bottom: 34px; }
.profile-grid { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; }
.profile-item { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; }
.profile-avatar {
    width: 120px; height: 120px; border-radius: 16px;
    background: var(--accent-grad);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; font-weight: 700; color: #fff;
    border: 3px solid transparent;
    transition: transform 0.2s var(--ease), border-color 0.2s;
}
.profile-item:hover .profile-avatar { transform: scale(1.06); border-color: #fff; }
.profile-item.add .profile-avatar { background: var(--surface-2); color: var(--muted); font-weight: 300; }
.profile-avatar.kids { background: linear-gradient(135deg, #f5c518, #ff9d00); }
.kids-badge { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: 0.62rem; font-weight: 700; padding: 1px 8px; border-radius: 6px; white-space: nowrap; }
.kids-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.kids-toggle input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--brand); cursor: pointer; flex: 0 0 auto; }
.profile-item span { color: var(--muted); font-size: 1rem; }
.profile-item .del { font-size: 0.75rem; color: #ff6b74; opacity: 0; transition: opacity 0.2s; }
.profile-item:hover .del { opacity: 1; }

/* ---------- Navbar ---------- */
.nav {
    position: fixed; top: 0; left: 0; right: 0; height: 66px; z-index: 900;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(16px, 4vw, 48px);
    transition: background 0.3s;
}
.nav.scrolled { background: rgba(11,11,15,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-left { display: flex; align-items: center; gap: 28px; flex:1; min-width:0; }
.nav-left > .brand { flex:0 0 auto; }
.nav-links { display: flex; gap: 20px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.nav-links::-webkit-scrollbar { display:none; }
.nav-links a { color: var(--muted); font-weight: 500; transition: color 0.2s; flex:0 0 auto; white-space:nowrap; }
.nav-links a[href="#/live-tv"] { margin-left:auto; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-right { display: flex; align-items: center; gap: 14px; flex-shrink:0; margin-left:20px; }
.nav-avatar { width: 36px; height: 36px; border-radius: 9px; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.nav-menu-btn { background: transparent; border: none; color: var(--text); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }

/* ---------- Hero ---------- */
/* Keep the negative image/gradient layers inside the hero, above the page background. */
.hero { position: relative; isolation: isolate; height: 82vh; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(16px, 4vw, 60px) 8vh; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; z-index: -2; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, var(--bg) 6%, rgba(11,11,15,0.2) 55%, rgba(11,11,15,0.6) 100%),
                linear-gradient(to right, rgba(11,11,15,0.9) 0%, rgba(11,11,15,0) 55%); }
.hero h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; margin: 0 0 14px; max-width: 640px; line-height: 1.05; text-shadow: 0 4px 24px rgba(0,0,0,0.6); }
.hero p { max-width: 520px; color: #d0d0d6; font-size: 1.05rem; line-height: 1.5; margin-bottom: 22px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-meta { display: flex; gap: 12px; align-items: center; color: var(--muted); margin-bottom: 12px; font-size: 0.95rem; }
.hero-actions { display: flex; gap: 14px; }
.badge { background: rgba(255,255,255,0.12); border: 1px solid var(--border); padding: 3px 10px; border-radius: 6px; font-size: 0.8rem; }

/* ---------- Rows ---------- */
.rows { padding: 0 0 60px; margin-top: -4vh; position: relative; z-index: 2; }
.origin-filter {
    display: flex; align-items: center; gap: 8px;
    margin: 0 clamp(16px, 4vw, 60px) 18px;
    width: fit-content; max-width: calc(100% - 32px);
    padding: 6px; border: 1px solid var(--border); border-radius: 999px;
    background: rgba(18,18,24,.9); box-shadow: 0 12px 28px rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
}
.origin-filter-label { color: var(--muted); font-size: .85rem; font-weight: 600; padding: 0 8px 0 10px; }
.origin-filter-btn {
    border: 0; border-radius: 999px; padding: 8px 16px;
    background: transparent; color: var(--muted); font-weight: 700;
    transition: color .2s, background .2s, box-shadow .2s;
}
.origin-filter-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.origin-filter-btn.active { color: #fff; background: var(--brand); box-shadow: 0 5px 16px rgba(229,9,20,.3); }
.origin-filter-empty { padding-top: 36px; }
.row { margin: 34px 0; }
.row h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 14px; padding: 0 clamp(16px, 4vw, 60px); }
.row-track { position: relative; }
.row-scroller { display: flex; gap: 12px; overflow-x: auto; padding: 6px clamp(16px, 4vw, 60px); scroll-behavior: smooth; scrollbar-width: none; }
.row-scroller::-webkit-scrollbar { display: none; }
.row-nav {
    position: absolute; top: 6px; bottom: 6px; z-index: 12;
    width: clamp(42px, 4vw, 62px);
    display: flex; align-items: center; justify-content: center;
    border: 0; color: #fff; font-size: 3rem; font-weight: 300;
    opacity: 0.9; transition: opacity 0.2s, background 0.2s;
    text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.row-nav:hover { opacity: 1; }
.row-nav-prev { left: 0; background: linear-gradient(90deg, rgba(11,11,15,.98), rgba(11,11,15,.3)); }
.row-nav-next { right: 0; background: linear-gradient(270deg, rgba(11,11,15,.98), rgba(11,11,15,.3)); }
.row-nav.is-hidden { opacity: 0; pointer-events: none; }

.card { position: relative; flex: 0 0 auto; width: 200px; aspect-ratio: 2/3; border-radius: 12px; overflow: hidden; background: var(--surface); cursor: pointer; transition: transform 0.28s var(--ease), box-shadow 0.28s; }
.card:hover { transform: scale(1.07); box-shadow: var(--shadow); z-index: 5; }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card .noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; color: var(--muted); font-weight: 600; }
.card .card-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.6); border-radius: 6px; padding: 2px 8px; font-size: 0.72rem; backdrop-filter: blur(4px); }
.card .card-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.25); }
.card .card-progress > i { display: block; height: 100%; background: var(--brand); }
.card .play-fab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; background: rgba(0,0,0,0.35); transition: opacity 0.2s; }
.card:hover .play-fab { opacity: 1; }
.play-fab .circle { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.9); color: #111; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; padding-left: 3px; }

/* ---------- Top 50 collection ---------- */
.top50-eyebrow { color:#ffb879; font-size:.75rem; font-weight:800; letter-spacing:.13em; }
.top50-collection { margin:26px clamp(16px,4vw,60px); border:1px solid rgba(255,184,121,.16); border-radius:18px; background:linear-gradient(115deg,rgba(255,184,121,.05),rgba(229,9,20,.035)); overflow:hidden; }
.top50-collection-head { padding:24px 26px 8px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.top50-collection-head h2 { margin:7px 0 5px; padding:0; font-size:1.6rem; }
.top50-collection-head p { margin:0; color:var(--muted); }
.top50-collection .row { margin:18px 0 22px; }
.top50-collection .row h2 { padding:0 26px; font-size:1rem; color:var(--muted); }
.top50-collection .row-scroller { padding-left:26px; padding-right:26px; }
.top50-card-rank { position:absolute; left:8px; bottom:5px; font-size:4rem; font-weight:800; line-height:1; color:#fff; text-shadow:0 3px 12px #000; pointer-events:none; }
.top50-page { max-width:1520px; }
.top50-intro { padding:30px 34px; border-radius:22px; border:1px solid rgba(255,184,121,.18); background:radial-gradient(ellipse at 100% 30%,rgba(229,9,20,.15),transparent 65%),var(--bg-soft); display:flex; gap:28px; align-items:center; justify-content:space-between; }
.top50-intro > div { max-width:850px; }
.top50-intro h1 { margin:10px 0 14px; font-size:clamp(2.4rem,4.5vw,4.2rem); }
.top50-intro p { color:var(--muted); line-height:1.65; margin:0 0 22px; }
.top50-intro-number { font-size:clamp(5rem,11vw,10rem); line-height:1; font-weight:800; color:rgba(255,184,121,.12); }
.top50-total { color:var(--text); font-size:1rem; }
.top50-total strong { color:#ffcfaa; font-size:1.2rem; margin-right:6px; }
.top50-total span { color:var(--muted); }
.top50-progress { height:6px; background:var(--surface-2); border-radius:20px; overflow:hidden; margin-top:14px; max-width:520px; }
.top50-progress i { display:block; height:100%; background:linear-gradient(90deg,#e50914,#ffb879); border-radius:20px; }
.top50-tools { display:flex; gap:18px; align-items:center; justify-content:space-between; margin-top:28px; }
.top50-filters { display:flex; gap:6px; padding:5px; border:1px solid var(--border); border-radius:12px; background:var(--bg-soft); }
.top50-filters button { padding:10px 14px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-weight:600; white-space:nowrap; }
.top50-filters button.active { background:var(--brand); color:#fff; }
#top50Search,#imdb250Search { max-width:340px; }
.top50-result-count { color:var(--muted); font-size:.85rem; margin:18px 0; }
.top50-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:24px 18px; align-items:start; }
.top50-film { min-width:0; background:var(--bg-soft); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.top50-poster { position:relative; aspect-ratio:2/3; background:var(--surface); overflow:hidden; }
.top50-poster img { width:100%; height:100%; object-fit:cover; }
.top50-poster::after { content:''; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.75)); pointer-events:none; }
.top50-poster .noimg { display:flex; height:100%; align-items:center; justify-content:center; text-align:center; padding:22px; color:var(--muted); }
.top50-rank { position:absolute; top:10px; left:10px; z-index:1; min-width:35px; height:35px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:rgba(0,0,0,.8); color:#ffcfaa; border:1px solid rgba(255,184,121,.3); font-weight:800; font-size:1.1rem; }
.top50-status { position:absolute; left:10px; bottom:12px; z-index:1; padding:6px 9px; border-radius:7px; color:#ececf0; background:rgba(0,0,0,.8); font-size:.75rem; font-weight:600; }
.top50-status.loaded { color:#a1f3b5; background:rgba(15,55,28,.94); border:1px solid rgba(93,214,128,.35); }
.top50-status.catalog,.top50-status.review { color:#ffcfaa; }
.top50-film-body { padding:14px; }
.top50-film h2 { margin:0 0 7px; font-size:1.03rem; line-height:1.35; }
.top50-original { font-size:.78rem; line-height:1.4; color:var(--muted); }
.top50-year { margin:8px 0 12px; font-size:.75rem; color:#c5c5ce; line-height:1.5; }
.top50-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.top50-actions .btn { padding:8px 11px; font-size:.8rem; }
.top50-tmdb { color:var(--muted); font-size:.8rem; padding:5px 0; }
.top50-tmdb:hover { color:#fff; }
.top50-collision { color:#ffcfaa; font-size:.76rem; line-height:1.5; padding:9px; border:1px solid rgba(255,184,121,.2); border-radius:8px; }
.top50-sources { margin-top:36px; padding-top:22px; border-top:1px solid var(--border); color:var(--muted); font-size:.78rem; line-height:1.7; }
.top50-sources a { color:#c6c6d0; text-decoration:underline; }
.top50-filters button:focus-visible,.top50-actions a:focus-visible,.top50-actions button:focus-visible { outline:2px solid #ffb879; outline-offset:3px; }
.imdb250-collection { border-color:rgba(245,197,24,.22); background:linear-gradient(115deg,rgba(245,197,24,.08),rgba(245,197,24,.015)); }
.imdb250-collection .top50-eyebrow,.imdb250-page .top50-eyebrow,.imdb250-card-rank { color:#f5c518; }
.imdb250-page .top50-intro { border-color:rgba(245,197,24,.22); background:radial-gradient(ellipse at 100% 30%,rgba(245,197,24,.12),transparent 65%),var(--bg-soft); }
.imdb250-page .top50-intro-number { color:rgba(245,197,24,.14); }
.imdb250-page .top50-total strong,.imdb250-page .top50-rank { color:#f5c518; }
.imdb250-page .top50-progress i { background:linear-gradient(90deg,#be9109,#f5c518); }
.imdb250-page .top50-filters button.active { background:#f5c518; color:#17130a; }
.imdb250-rating { position:absolute; top:10px; right:10px; z-index:1; background:rgba(0,0,0,.85); color:#f5c518; padding:8px; border-radius:8px; font-size:.9rem; font-weight:700; }
@media (max-width:900px) {
    .top50-tools { flex-wrap:wrap; }
    .top50-intro-number { display:none; }
    .nav-left { gap:16px; }
    .nav-links { gap:12px; }
    .nav-links a { font-size:.88rem; white-space:nowrap; }
}
@media (max-width:640px) {
    .top50-intro { padding:23px 20px; }
    .top50-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }
    .top50-film-body { padding:11px; }
    .top50-film h2 { font-size:.94rem; }
    .top50-filters { max-width:100%; overflow-x:auto; }
    .top50-filters button { padding:10px 11px; font-size:.8rem; }
    #top50Search,#imdb250Search { max-width:none; }
    .top50-collection-head { padding:20px; flex-wrap:wrap; }
    .top50-collection .row h2 { padding-left:20px; }
    .top50-collection .row-scroller { padding-left:20px; padding-right:20px; }
}

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade 0.2s ease; }
.modal { width: 100%; max-width: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); max-height: 92vh; overflow-y: auto; }
.modal-hero { position: relative; height: 300px; background-size: cover; background-position: center; }
.modal-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--surface) 4%, transparent 60%); }
.modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: #fff; font-size: 1.2rem; z-index: 2; }
.modal-body { padding: 0 30px 30px; margin-top: -70px; position: relative; z-index: 1; }
.modal-body h2 { font-size: 2rem; margin: 0 0 10px; }
.modal-actions { display: flex; gap: 12px; margin: 16px 0 20px; flex-wrap: wrap; }
.modal-desc { color: #d0d0d6; line-height: 1.6; }
.modal-meta { color: var(--muted); margin-bottom: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.unlinked-note { background: rgba(255,180,0,0.12); border: 1px solid rgba(255,180,0,0.35); color: #ffd27a; padding: 10px 14px; border-radius: 10px; font-size: 0.9rem; margin-top: 10px; }

.ep-season { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 20px 0 12px; }
.ep-row { position: relative; min-height: 60px; display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: 12px; cursor: pointer; background: var(--surface); border: 1px solid transparent; margin-bottom: 8px; transition: transform 0.18s var(--ease), background 0.18s, border-color 0.18s; }
.ep-continue { display: inline-block; margin-left: 12px; font-size: 0.72rem; font-weight: 700; color: var(--brand-2); vertical-align: middle; }
.ep-progress { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 2px; overflow: hidden; }
.ep-progress > i { display: block; height: 100%; background: var(--brand); }
.ep-row:hover { background: var(--surface-2); border-color: var(--border); transform: translateX(5px); }
.ep-row .ep-no { flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--muted); font-weight: 700; transition: background 0.18s, color 0.18s; }
.ep-row:hover .ep-no { background: var(--brand); color: #fff; }
.ep-row .ep-title { flex: 1; min-width: 0; font-weight: 500; color: #e6e6ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-row:hover .ep-title { color: #fff; }
.ep-row .ep-play { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding-left: 2px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; transition: background 0.18s, transform 0.18s; }
.ep-row:hover .ep-play { background: var(--brand); transform: scale(1.08); }
.ep-row.ep-disabled { opacity: 0.45; cursor: default; }
.ep-row.ep-disabled:hover { background: var(--surface); border-color: transparent; transform: none; }
.ep-row.ep-disabled .ep-play { display: none; }

.ep-hovercard { position: fixed; width: 320px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); z-index: 1300; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.16s var(--ease), transform 0.16s var(--ease); }
.ep-hovercard.show { opacity: 1; transform: translateY(0); }
.ep-hovercard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.ep-hovercard .ehc-body { padding: 12px 14px; }
.ep-hovercard .ehc-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; color: #fff; }
.ep-hovercard .ehc-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
textarea.input { resize: vertical; min-height: 60px; font-family: inherit; }

/* ---------- Admin ---------- */
.page { padding: 96px clamp(16px, 4vw, 60px) 60px; max-width: 1100px; margin: 0 auto; }
.admin-page { width:100%; max-width:1560px; padding-left:clamp(16px,2.5vw,44px); padding-right:clamp(16px,2.5vw,44px); }
.page h1 { font-size: 2rem; margin: 0 0 8px; }
.page .lead { color: var(--muted); margin-bottom: 30px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.panel h3 { margin: 0 0 16px; }
.tmdb-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin-top: 16px; }
.tmdb-card { background: var(--surface-2); border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; transition: border 0.2s, transform 0.2s; }
.tmdb-card:hover { transform: translateY(-3px); }
.tmdb-card.selected { border-color: var(--brand-2); }
.tmdb-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
.tmdb-card .t { padding: 8px; font-size: 0.82rem; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.help { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }

.admin-list { width: 100%; border-collapse: collapse; }
.admin-tabs { display: flex; gap: 6px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.admin-tab { background: transparent; border: none; color: var(--muted); font-size: 1rem; font-weight: 600; padding: 10px 18px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tab.active { color: #fff; border-bottom-color: var(--brand); }

.admin-list th, .admin-list td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.admin-list th { color: var(--muted); font-weight: 600; }
.admin-table-wrap { width:100%; overflow-x:auto; scrollbar-width:thin; }
.users-admin-list { min-width:900px; }
.user-location { color:#e8e8ee; white-space:nowrap; }
.user-location.empty-location { color:var(--muted); font-style:italic; }
.user-location-source { margin:-8px 0 16px; }
.user-editor-modal { max-width:680px; overflow:hidden; }
.user-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:24px 26px 18px; border-bottom:1px solid var(--border); }
.user-editor-head h2 { margin:0 0 5px; font-size:1.45rem; }
.user-editor-head .modal-close { position:static; flex:0 0 auto; }
.user-editor-body { padding:24px 26px 26px; }
.user-editor-body .field small { color:var(--muted); font-weight:400; }
.user-admin-toggle { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 16px; margin:4px 0 22px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.025); cursor:pointer; }
.user-admin-toggle b, .user-admin-toggle span { display:block; }
.user-admin-toggle b { color:#fff; margin-bottom:3px; }
.user-admin-toggle span { color:var(--muted); font-size:.82rem; }
.user-admin-toggle input { width:20px; height:20px; accent-color:var(--brand); }
.user-editor-actions { display:flex; justify-content:flex-end; gap:10px; }
.pill { padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; }
.pill.ok { background: rgba(46,160,67,0.2); color: #7ee787; }
.pill.neutral { background: rgba(88,166,255,.16); color: #8dc4ff; }
.pill.no { background: rgba(255,180,0,0.15); color: #ffd27a; }
.prep-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.prep-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:20px; }
.prep-summary > div { background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.prep-summary b { display:block; color:#fff; font-size:1.35rem; }
.prep-summary span { color:var(--muted); font-size:.8rem; }
.prep-state { display:inline-flex; align-items:center; border-radius:20px; padding:4px 9px; font-size:.75rem; font-weight:650; white-space:nowrap; }
.prep-state.ok { color:#7ee787; background:rgba(46,160,67,.18); }
.prep-state.busy { color:#79c0ff; background:rgba(56,139,253,.18); }
.prep-state.wait { color:#c9d1d9; background:rgba(139,148,158,.16); }
.prep-state.warn { color:#ffd27a; background:rgba(255,180,0,.15); }
.prep-state.error { color:#ff9b9b; background:rgba(229,9,20,.18); }
.prep-progress { width:130px; height:6px; overflow:hidden; border-radius:9px; background:rgba(255,255,255,.09); display:inline-block; vertical-align:middle; margin-right:7px; }
.prep-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand),#ff5c65); }
.prep-table small { color:var(--muted); }
.prep-error { color:#ff9b9b; font-size:.76rem; max-width:380px; margin-top:4px; }
.prep-note { color:#ffd27a; font-size:.73rem; max-width:430px; margin-top:4px; line-height:1.35; }
.presence-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.presence-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px; }
.presence-card { background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:12px; padding:15px; }
.presence-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.presence-email { display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:.92rem; overflow-wrap:anywhere; }
.presence-profile { color:var(--muted); font-size:.78rem; margin:4px 0 0 17px; }
.presence-dot { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:#38d878; box-shadow:0 0 0 4px rgba(56,216,120,.12); display:inline-block; }
.presence-live { color:#7ee787; background:rgba(46,160,67,.16); border-radius:20px; padding:3px 8px; font-size:.65rem; font-weight:800; letter-spacing:.05em; }
.presence-activity { color:#c9d1d9; font-size:.88rem; margin-top:15px; min-height:21px; }
.presence-activity.playing { color:#fff; }
.presence-time { color:var(--muted); font-size:.72rem; margin-top:7px; }
.presence-progress { height:4px; overflow:hidden; border-radius:8px; background:rgba(255,255,255,.1); margin-top:5px; }
.presence-progress i { display:block; height:100%; border-radius:inherit; background:var(--brand); }
.presence-meta { display:flex; flex-wrap:wrap; gap:6px 12px; color:var(--muted); font-size:.7rem; margin-top:13px; }
.presence-empty { color:var(--muted); padding:18px 4px; display:flex; align-items:center; gap:10px; }

/* ---------- Canli TV ---------- */
.live-tv-page { max-width: 1280px; }
.live-tv-heading, .tv-admin-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.live-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; color:#fff; background:rgba(229,9,20,.16); border:1px solid rgba(255,77,109,.25); font-size:.72rem; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.live-badge i { width:8px; height:8px; border-radius:50%; background:#ff3b4d; box-shadow:0 0 0 0 rgba(255,59,77,.6); animation:livePulse 1.8s infinite; }
.live-tv-welcome { min-height:190px; margin-bottom:28px; padding:28px; border:1px solid var(--border); border-radius:18px; background:radial-gradient(circle at 15% 50%,rgba(229,9,20,.14),transparent 34%),var(--surface); display:flex; align-items:center; justify-content:center; gap:18px; color:var(--muted); }
.live-tv-welcome b, .live-tv-welcome span { display:block; }
.live-tv-welcome b { color:#fff; font-size:1.15rem; margin-bottom:4px; }
.live-tv-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:17px; background:var(--accent-grad); color:#fff; font-weight:800; box-shadow:0 10px 30px rgba(229,9,20,.28); }
.live-player-shell { margin-bottom:32px; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:#060608; box-shadow:var(--shadow); }
.live-player-head { display:flex; align-items:center; gap:13px; padding:14px 18px; background:linear-gradient(90deg,rgba(229,9,20,.11),transparent 45%),var(--surface); }
.live-player-head small { color:var(--brand-2); font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.live-player-head h2 { margin:0; font-size:1.22rem; }
.live-channel-position { margin-left:auto; color:var(--muted); font-size:.78rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.live-now-logo { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; overflow:visible; background:transparent; color:#fff; }
.live-now-logo img { width:100%; height:100%; object-fit:contain; padding:0; }
.live-video-wrap { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.live-video-wrap video { width:100%; height:100%; display:block; background:#000; }
.live-video-wrap iframe { width:100%; height:100%; display:block; border:0; background:#000; }
.live-tv-status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; color:#ddd; background:rgba(0,0,0,.42); pointer-events:none; }
.live-tv-status i { width:38px; height:38px; border:3px solid rgba(255,255,255,.18); border-top-color:var(--brand-2); border-radius:50%; animation:spin .8s linear infinite; }
.live-epg-overlay { position:absolute; left:22px; right:22px; bottom:22px; z-index:7; padding:16px 18px 14px; border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#fff; background:linear-gradient(100deg,rgba(13,13,17,.96),rgba(22,22,29,.88)); box-shadow:0 15px 45px rgba(0,0,0,.48); opacity:0; transform:translateY(22px); transition:opacity .28s ease,transform .28s ease; pointer-events:none; backdrop-filter:blur(12px); }
.live-epg-overlay.visible { opacity:1; transform:translateY(0); }
.live-video-wrap .live-epg-overlay { bottom:64px; }
.live-zap { position:absolute; top:50%; transform:translateY(-50%); z-index:8; width:44px; height:64px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:12px; background:rgba(8,8,12,.48); color:#fff; opacity:.55; transition:opacity .18s,background .18s; cursor:pointer; touch-action:manipulation; }
.live-zap span { font-size:3rem; line-height:1; margin-top:-4px; }
.live-zap-prev { left:14px; }
.live-zap-next { right:14px; }
.live-video-wrap:hover .live-zap, .radio-visual:hover .live-zap { opacity:.85; }
.live-zap:hover, .live-zap:focus-visible { opacity:1; background:rgba(8,8,12,.8); }
.live-zap:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (max-width:640px) {
    .live-zap { width:36px; height:48px; border-radius:9px; }
    .live-zap-prev { left:8px; }
    .live-zap-next { right:8px; }
    .live-video-wrap .live-epg-overlay { left:54px; right:54px; bottom:56px; padding:9px 10px; }
    .live-video-wrap .live-epg-current-row { flex-direction:column; align-items:stretch; gap:3px; }
}
@media (prefers-reduced-motion:reduce) { .live-epg-overlay, .live-zap { transition:none; } }
.live-epg-current-row { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.live-epg-current-row > span { flex:0 0 auto; color:#d5d5dc; font-size:.83rem; font-variant-numeric:tabular-nums; }
.live-epg-program { min-width:0; display:flex; align-items:center; gap:11px; }
.live-epg-program small, .live-epg-next small { color:var(--brand-2); font-size:.64rem; font-weight:900; letter-spacing:.12em; }
.live-epg-program strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.12rem; }
.live-epg-progress { height:4px; margin:11px 0 10px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.16); }
.live-epg-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }
.live-epg-next { min-width:0; display:flex; align-items:center; gap:10px; color:#c7c7ce; }
.live-epg-next strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; }
.live-epg-next span { margin-left:auto; color:#9b9ba6; font-size:.78rem; font-variant-numeric:tabular-nums; }
.live-channel-title { margin:0 0 16px; font-size:1.45rem; }
.live-channel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:13px; }
.live-channel-grid > .empty { grid-column:1/-1; }
.live-channel-card { min-width:0; display:flex; align-items:center; gap:13px; padding:13px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:#fff; text-align:left; transition:transform .2s var(--ease),border-color .2s,background .2s; }
.live-channel-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.2); background:var(--surface-2); }
.live-channel-card.active { border-color:var(--brand-2); box-shadow:0 0 0 1px rgba(255,77,109,.18); }
.live-channel-logo { width:62px; height:50px; flex:0 0 62px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:#f5f5f7; color:#111; font-size:1.25rem; }
.live-channel-logo img { width:100%; height:100%; object-fit:contain; padding:5px; }
.live-tv-page .live-channel-logo { overflow:visible; border-radius:0; background:transparent; color:#fff; }
.live-tv-page .live-channel-logo img { padding:0; }
.live-channel-meta { min-width:0; flex:1; }
.live-channel-meta strong, .live-channel-meta small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-channel-meta strong { font-size:1rem; }
.live-channel-meta small { color:var(--muted); margin-top:3px; }
.live-channel-play { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.09); color:var(--brand-2); font-size:.78rem; }

/* ---------- Radyo ---------- */
.radio-page { max-width:1280px; }
.radio-welcome { min-height:250px; margin-bottom:30px; padding:34px; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:linear-gradient(90deg,rgba(5,6,10,.48),rgba(5,6,10,.7)),url('/images/radio-stage.svg') center/cover no-repeat; display:flex; align-items:center; justify-content:center; gap:20px; color:var(--muted); box-shadow:var(--shadow); }
.radio-welcome b, .radio-welcome span { display:block; }
.radio-welcome b { color:#fff; font-size:1.22rem; margin-bottom:5px; }
.radio-welcome-icon { width:70px; height:70px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:50%; color:#fff; background:rgba(255,50,82,.18); box-shadow:0 0 36px rgba(255,48,82,.22); font-size:2rem; }
.radio-player-shell { margin-bottom:34px; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:#090a0e; box-shadow:0 24px 70px rgba(0,0,0,.38); }
.radio-visual { position:relative; min-height:410px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px 42px; background:radial-gradient(circle at 18% 68%,rgba(255,46,82,.13),transparent 38%),radial-gradient(circle at 82% 64%,rgba(181,76,255,.12),transparent 38%),linear-gradient(180deg,#0b0711,#05050a); isolation:isolate; }
.radio-spectrum-canvas { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; transition:opacity .35s ease,filter .35s ease; opacity:.58; filter:saturate(.82); }
.radio-player-shell.playing .radio-spectrum-canvas { opacity:1; filter:saturate(1.16); }
.radio-visual-shade { position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle at 50% 38%,transparent 0,rgba(3,4,7,.08) 32%,rgba(3,4,7,.42) 100%),linear-gradient(180deg,rgba(3,4,7,.02),rgba(3,4,7,.34)); }
.radio-on-air { position:absolute; z-index:3; top:22px; right:24px; display:flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid rgba(255,78,105,.28); border-radius:999px; color:#ffd7de; background:rgba(49,7,17,.62); font-size:.69rem; font-weight:850; letter-spacing:.1em; backdrop-filter:blur(8px); }
.radio-on-air i { width:7px; height:7px; border-radius:50%; background:#ff3657; box-shadow:0 0 12px #ff3657; }
.radio-featured-logo { position:relative; z-index:2; width:178px; height:178px; display:grid; place-items:center; overflow:hidden; border:7px solid rgba(255,255,255,.92); border-radius:28px; color:#111; background:#fff; box-shadow:0 24px 65px rgba(0,0,0,.55),0 0 55px rgba(255,48,82,.2); transform:translateZ(0); transition:transform .35s var(--ease),box-shadow .35s; }
.radio-player-shell.playing .radio-featured-logo { transform:scale(1.035); box-shadow:0 28px 75px rgba(0,0,0,.58),0 0 70px rgba(255,48,82,.34); }
.radio-featured-logo img { width:100%; height:100%; object-fit:contain; }
.radio-featured-logo b { font-size:3.2rem; }
.radio-featured-meta { position:relative; z-index:2; margin-top:20px; text-align:center; }
.radio-featured-meta small { display:block; color:#ff8da0; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.radio-featured-meta h2 { margin:5px 0 15px; color:#fff; font-size:clamp(1.55rem,3vw,2.25rem); text-shadow:0 3px 18px rgba(0,0,0,.45); }
.radio-control-bar { min-height:92px; display:flex; align-items:center; gap:16px; padding:16px 22px; border-top:1px solid rgba(255,255,255,.07); background:linear-gradient(90deg,rgba(255,49,80,.08),transparent 42%),var(--surface); }
.radio-play-button { width:54px; height:54px; flex:0 0 54px; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:var(--accent-grad); box-shadow:0 10px 28px rgba(229,9,20,.34); font-size:1rem; letter-spacing:-.12em; }
.radio-play-button:hover { transform:scale(1.06); }
.radio-control-copy { min-width:0; flex:1; }
.radio-control-copy b, .radio-control-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.radio-control-copy b { color:#fff; font-size:1.04rem; }
.radio-control-copy span { margin-top:3px; color:var(--muted); font-size:.82rem; }
.radio-volume { width:min(220px,28vw); display:flex; align-items:center; gap:10px; color:#c8c8d0; }
.radio-volume > span { font-size:1.2rem; }
.radio-volume input { width:100%; accent-color:var(--brand-2); cursor:pointer; }
.radio-station-card { min-height:78px; }
.radio-card-logo { width:58px; height:58px; flex-basis:58px; border-radius:13px; }
.radio-admin-badge { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid rgba(255,77,109,.25); border-radius:999px; color:#fff; background:rgba(229,9,20,.13); font-size:.72rem; font-weight:850; letter-spacing:.09em; }
#radioAdminList { overflow-x:auto; }
.radio-admin-table tbody tr[data-radio-row] { position:relative; transition:opacity .16s,background .16s,box-shadow .16s; }

.tv-admin-options { align-items:end; }
.tv-order-help { min-height:51px; margin-bottom:14px; padding:10px 13px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.tv-order-help b, .tv-order-help span { display:block; }
.tv-order-help b { color:#fff; font-size:.9rem; }
.tv-order-help span { margin-top:3px; color:var(--muted); font-size:.78rem; }
.tv-active-toggle { min-height:51px; margin-bottom:14px; }
.tv-auto-toggle { margin:0 0 14px; }
.tv-auto-fields { margin:0 0 16px; padding:16px; border:1px solid rgba(255,77,109,.22); border-radius:12px; background:rgba(229,9,20,.055); }
.tv-auto-fields .field:last-of-type { margin-bottom:10px; }
.tv-admin-channel { display:flex; align-items:center; gap:10px; min-width:155px; }
.tv-admin-channel > span { width:44px; height:36px; flex:0 0 44px; display:grid; place-items:center; overflow:visible; background:transparent; color:#fff; font-weight:800; }
.tv-admin-channel img { width:100%; height:100%; object-fit:contain; padding:0; }
.tv-source-host { display:block; max-width:165px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.tv-source-cell small, .tv-channel-status small { display:block; max-width:175px; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; }
.tv-source-cell small, .tv-resolve-ok { color:#7ee787; }
.tv-resolve-error { color:#ff7b86; }
.tv-channel-status { min-width:95px; }
.tv-order-controls { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.tv-order-controls strong { width:24px; color:#fff; text-align:center; font-variant-numeric:tabular-nums; }
.tv-drag-handle { width:34px; height:32px; display:grid; place-items:center; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:#c7c7d0; font-size:1.25rem; line-height:1; cursor:grab; user-select:none; transition:border-color .16s,background .16s,color .16s,transform .16s; }
.tv-drag-handle:hover, .tv-drag-handle:focus-visible { outline:none; border-color:var(--brand-2); background:rgba(255,77,109,.12); color:var(--brand-2); transform:scale(1.04); }
.tv-drag-handle:active { cursor:grabbing; }
.live-tv-admin-table tbody tr[data-tv-row] { position:relative; transition:opacity .16s,background .16s,box-shadow .16s; }
.live-tv-admin-table tbody tr.tv-row-dragging { opacity:.38; background:rgba(255,77,109,.08); }
.live-tv-admin-table tbody tr.tv-drop-before { box-shadow:inset 0 3px 0 var(--brand-2); }
.live-tv-admin-table tbody tr.tv-drop-after { box-shadow:inset 0 -3px 0 var(--brand-2); }
.live-tv-admin-table tbody.tv-order-saving { opacity:.62; pointer-events:none; }
#tvAdminList { overflow-x:auto; }
.live-tv-admin-table { width:100%; min-width:920px; table-layout:fixed; }
.live-tv-admin-table th, .live-tv-admin-table td { padding-left:8px; padding-right:8px; vertical-align:middle; }
.live-tv-admin-table th:nth-child(1) { width:20%; }
.live-tv-admin-table th:nth-child(2) { width:9%; }
.live-tv-admin-table th:nth-child(3) { width:21%; }
.live-tv-admin-table th:nth-child(4) { width:13%; }
.live-tv-admin-table th:nth-child(5) { width:11%; }
.live-tv-admin-table th:nth-child(6) { width:26%; }
.tv-admin-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; white-space:nowrap; }
.tv-admin-actions .btn { flex:0 0 auto; padding:7px 10px; }

@keyframes livePulse {
  0% { box-shadow:0 0 0 0 rgba(255,59,77,.6); }
  70% { box-shadow:0 0 0 8px rgba(255,59,77,0); }
  100% { box-shadow:0 0 0 0 rgba(255,59,77,0); }
}

@media (max-width:760px) {
  .prep-head { flex-direction:column; }
  .prep-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .prep-table { min-width:760px; }
  #prepList { overflow-x:auto; }
  .presence-head { flex-direction:column; }
  .live-tv-heading, .tv-admin-heading { align-items:flex-start; }
  .live-channel-grid { grid-template-columns:1fr; }
  .live-epg-overlay { left:10px; right:10px; bottom:10px; padding:12px 13px 11px; }
  .live-epg-program { gap:7px; }
  .live-epg-program strong { font-size:.93rem; }
  .live-epg-current-row > span { font-size:.7rem; }
  .radio-visual { min-height:340px; padding-top:54px; }
  .radio-featured-logo { width:140px; height:140px; border-radius:23px; }
  .radio-control-bar { gap:12px; padding:14px; }
  .radio-play-button { width:48px; height:48px; flex-basis:48px; }
  .radio-volume { width:105px; }
}

@media (hover:none), (pointer:coarse) {
    .row-nav { display:none; }
}

/* ---------- Player ---------- */
.player-page { position: fixed; inset: 0; background: #000; z-index: 1500; }
.player-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 18px 24px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent); transition: opacity 0.3s; }
.player-topbar.hide { opacity: 0; pointer-events: none; }
.player-topbar .back { background: rgba(0,0,0,0.4); border: none; color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 1.3rem; }
.player-topbar h3 { margin: 0; font-weight: 600; }
#art-container { width: 100%; height: 100%; }
.visiona-youtube-stage { position: absolute; inset: 0; overflow: hidden; background: #000; color: #fff; }
#visiona-youtube-frame, #visiona-youtube-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visiona-youtube-surface { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: default; }
.visiona-youtube-center-play { position: absolute; z-index: 4; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; color: #fff; background: rgba(18,18,22,.82); font-size: 30px; padding-left: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.45); transition: opacity .18s, transform .18s; }
.visiona-youtube-center-play:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--brand-2); }
.visiona-youtube-center-play.is-hidden { opacity: 0; pointer-events: none; }
.visiona-youtube-controls { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 70px 28px 22px; opacity: 0; pointer-events: none; transform: translateY(10px); background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.42) 58%, transparent); transition: opacity .2s, transform .2s; }
.visiona-youtube-controls.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.visiona-youtube-seek { display: block; width: 100%; height: 5px; margin: 0 0 14px; accent-color: var(--brand-2); cursor: pointer; }
.visiona-youtube-control-row { display: flex; align-items: center; min-height: 40px; gap: 13px; }
.visiona-youtube-control-row button { min-width: 40px; height: 40px; padding: 0 9px; border: 0; border-radius: 8px; color: #fff; background: rgba(255,255,255,.11); font: inherit; font-weight: 700; cursor: pointer; }
.visiona-youtube-control-row button:hover { background: rgba(255,255,255,.22); }
.visiona-youtube-time { min-width: 138px; font-variant-numeric: tabular-nums; font-weight: 600; }
.visiona-youtube-quality { padding: 5px 9px; border: 1px solid rgba(255,255,255,.42); border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.visiona-youtube-spacer { flex: 1; }
.visiona-youtube-volume-icon { font-size: 18px; }
.visiona-youtube-volume { width: 150px; accent-color: var(--brand-2); cursor: pointer; }
.visiona-youtube-native-ui .visiona-youtube-surface,
.visiona-youtube-native-ui .visiona-youtube-center-play,
.visiona-youtube-native-ui .visiona-youtube-controls { display: none; }
@media (max-width: 720px) {
    .visiona-youtube-controls { padding: 60px 14px 14px; }
    .visiona-youtube-control-row { gap: 7px; }
    .visiona-youtube-control-row button { min-width: 36px; height: 36px; padding: 0 7px; }
    .visiona-youtube-quality, .visiona-youtube-volume-icon, .visiona-youtube-volume { display: none; }
    .visiona-youtube-time { min-width: 0; font-size: 13px; }
}
.player-loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; color: var(--muted); z-index: 20; }

/* ---------- misc ---------- */
.spinner { width: 44px; height: 44px; border: 4px solid rgba(255,255,255,0.15); border-top-color: var(--brand-2); border-radius: 50%; animation: spin 0.8s linear infinite; }
.empty { text-align: center; color: var(--muted); padding: 60px 20px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--border); padding: 12px 20px; border-radius: 10px; z-index: 2000; box-shadow: var(--shadow); animation: fade 0.2s ease; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 640px) {
    .card { width: 140px; }
    .nav-links { display: none; }
    .row-2, .row-3 { grid-template-columns: 1fr; }
    .origin-filter { overflow-x: auto; scrollbar-width: none; }
    .origin-filter::-webkit-scrollbar { display: none; }
    .origin-filter-label, .origin-filter-btn { flex: 0 0 auto; }
    .hero { height: 70vh; }
    .admin-tabs { overflow-x:auto; scrollbar-width:none; }
    .admin-tabs::-webkit-scrollbar { display:none; }
    .admin-tab { flex:0 0 auto; padding-left:13px; padding-right:13px; }
    .user-editor-head, .user-editor-body { padding-left:18px; padding-right:18px; }
    .user-editor-actions { flex-direction:column-reverse; }
    .user-editor-actions .btn { width:100%; }
    .live-tv-heading .lead { margin-bottom:20px; }
    .live-badge { padding:7px 9px; }
    .live-tv-welcome { min-height:150px; }
}