:root {
    --bg:#0c0f14; --panel:#151a22; --line:#232a35; --txt:#eef2f6; --dim:#93a0ae;
    --acc:#3dd68c; --bad:#f2555a; --warn:#e3b341;
}
* { box-sizing:border-box; margin:0; }
[hidden] { display:none !important; }
html { scrollbar-color:#333 var(--bg); }
body { background:var(--bg); color:var(--txt); font:15px/1.55 -apple-system,'Segoe UI',Roboto,sans-serif; min-height:100vh; }
a { color:var(--acc); text-decoration:none; }
h1 { font-size:30px; font-weight:700; letter-spacing:-.01em; }
.container { max-width:1320px; margin:0 auto; padding:0 24px 60px; }
.dim { color:var(--dim); }
.pill { display:inline-block; padding:2px 10px; border-radius:12px; font-size:12px; border:1px solid var(--line); color:var(--dim); }
.crumb { margin:18px 0 10px; font-size:13px; }
.crumb a { color:var(--dim); }
.crumb a:hover { color:var(--txt); }
.pagetitle { margin:12px 0 6px; }
.page-sub { color:var(--dim); margin:0 0 26px; }
.row-title { font-size:17px; font-weight:600; margin:34px 0 14px; }

/* ---------- buttons / chips ---------- */
.btn { display:inline-block; background:var(--panel); border:1px solid var(--line); color:var(--txt);
       padding:8px 16px; border-radius:8px; font-size:14px; cursor:pointer; }
.btn:hover { border-color:var(--dim); }
.btn-primary { background:var(--acc); border-color:var(--acc); color:#07130c; font-weight:600; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-danger { background:transparent; border-color:var(--bad); color:var(--bad); }
.btn-dl { background:var(--acc); border-color:var(--acc); color:#07130c; font-weight:600; }
.btn-sm { padding:4px 10px; font-size:13px; }
.chip { display:inline-block; padding:2px 10px; border-radius:10px; font-size:12px; font-weight:600; }
.chip.ok { background:rgba(61,214,140,.15); color:var(--acc); }
.chip.work { background:rgba(227,179,65,.15); color:var(--warn); }
.chip.wait { background:rgba(147,160,174,.15); color:var(--dim); }
.chip.bad { background:rgba(242,85,90,.15); color:var(--bad); }
.dl-ok { color:var(--acc); font-size:13px; }

.site-foot { text-align:center; padding:26px 0 34px; color:var(--dim); font-size:13px; }
.site-foot a { color:var(--dim); text-decoration:none; padding:0 6px; }
.site-foot a:hover { color:var(--txt); }
.site-foot a.active { color:var(--txt); font-weight:600; }

/* ---------- home / login ---------- */
.center-wrap { min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:24px; }
.brand-big { font-size:34px; font-weight:300; letter-spacing:.02em; }
.brand-big b { color:var(--acc); font-weight:700; }
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:36px; width:340px; }
.login-box label, .form-grid label, .panel label { display:block; color:var(--dim); font-size:12px; margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }
.login-box input, .form-grid input, .form-grid textarea,
.panel input:not([type=file]):not([type=checkbox]):not([type=color]) {
    width:100%; background:var(--bg); border:1px solid var(--line); border-radius:8px;
    color:var(--txt); padding:9px 12px; font-size:14px; font-family:inherit; }
.form-grid input:focus, .form-grid textarea:focus, .login-box input:focus,
.panel input:focus { outline:none; border-color:var(--acc); }
.err { background:rgba(242,85,90,.12); border:1px solid var(--bad); color:var(--bad); border-radius:8px; padding:8px 12px; font-size:13px; margin-bottom:12px; }

/* ---------- admin ---------- */
.topnav { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.topnav .brand { color:var(--txt); font-size:17px; }
.topnav .brand b { color:var(--acc); }
.topnav div a { margin-left:20px; font-size:14px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .span2 { grid-column:span 2; }
.form-grid input[type=color] { width:60px; height:36px; padding:2px; cursor:pointer; }
.checkline { display:flex; align-items:end; }
.checkline label { text-transform:none; letter-spacing:0; font-size:14px; color:var(--txt); }
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.pcard { border-radius:12px; padding:28px 20px; min-height:130px; display:flex; flex-direction:column; justify-content:end;
         border:1px solid var(--line); transition:transform .15s; }
.pcard:hover { transform:translateY(-3px); }
.pcard-name { color:#fff; font-size:19px; font-weight:700; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.pcard-meta { color:rgba(255,255,255,.75); font-size:13px; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.admin-hero { border-radius:12px; padding:30px 24px; display:flex; justify-content:space-between; align-items:center; }
.admin-hero h1 { text-shadow:0 1px 8px rgba(0,0,0,.5); }
.admintable { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.admintable th, .admintable td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); font-size:14px; white-space:nowrap; }
.admintable th { color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.admintable tr:last-child td { border-bottom:0; }
.rowthumb img { width:74px; border-radius:6px; display:block; }
.drop { border-style:dashed; text-align:center; padding:34px 20px; }
.drop.over { border-color:var(--acc); background:rgba(61,214,140,.05); }
.linklike { color:var(--acc); cursor:pointer; }
.upitem { text-align:left; margin-top:14px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 14px; font-size:13px; }
.upbar { height:5px; background:var(--line); border-radius:3px; margin-top:6px; overflow:hidden; }
.upbar i { display:block; height:100%; background:var(--acc); border-radius:3px; transition:width .3s; }
.thumbpick { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.thumbopt { position:relative; cursor:pointer; }
.thumbopt input { position:absolute; opacity:0; }
.thumbopt img { width:100%; border-radius:8px; border:2px solid transparent; display:block; opacity:.7; transition:.15s; }
.thumbopt input:checked + img { border-color:var(--acc); opacity:1; }
.thumbopt:hover img { opacity:1; }
pre.log { background:#0a0d12; border:1px solid var(--line); border-radius:8px; padding:12px;
          font:12px/1.6 ui-monospace,Menlo,monospace; color:var(--dim); overflow:auto; max-height:220px; margin-top:8px; white-space:pre-wrap; }

/* ---------- public program page ---------- */
.hero { position:relative; min-height:340px; display:flex; align-items:end; overflow:hidden;
        background:linear-gradient(135deg,var(--gf),var(--gt)); }
.hero-img { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.45; }
.hero-fade { position:absolute; inset:0; background:linear-gradient(to top, var(--bg) 0%, transparent 55%),
             linear-gradient(to right, color-mix(in srgb, var(--gt) 70%, transparent), transparent 60%); }
.hero-inner { position:relative; max-width:1320px; margin:0 auto; width:100%; padding:60px 24px 34px; }
.hero-inner h1 { font-size:44px; }
.hero-desc { max-width:640px; color:#d7dee6; margin-top:10px; }
.hero-meta { color:var(--dim); font-size:13px; margin-top:14px; text-transform:uppercase; letter-spacing:.08em; }
.hero .crumb { color:rgba(255,255,255,.6); font-size:12px; text-transform:uppercase; letter-spacing:.14em; margin:0 0 6px; }

/* ---------- live ---------- */
.live-dot-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(242,85,90,.15);
    color:var(--bad); font-size:12px; font-weight:700; letter-spacing:.08em; padding:3px 12px; border-radius:12px; }
.live-dot-badge i { width:8px; height:8px; border-radius:50%; background:var(--bad); animation:livepulse 1.6s infinite; }
@keyframes livepulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.live-pulse { display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor;
    margin-right:6px; animation:livepulse 1.6s infinite; }
.live-wait { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:14px; padding:24px;
    background:radial-gradient(ellipse at top, color-mix(in srgb, var(--gf, #223) 30%, transparent), transparent 65%); }
.live-chip { font-size:12px; font-weight:700; letter-spacing:.14em; padding:4px 14px; border-radius:12px; }
.live-chip-soon { background:rgba(61,214,140,.15); color:var(--acc); }
/* chips overlaid on cover images need a solid dark backdrop for contrast */
.vthumb .live-chip, .feat-thumb .live-chip, .feat-thumb .live-dot-badge {
    background:rgba(10,13,18,.82); backdrop-filter:blur(4px); }
.live-chip-ended { background:rgba(147,160,174,.15); color:var(--dim); }
.countdown { display:flex; gap:18px; margin-top:10px; }
.countdown span { font-size:44px; font-weight:700; font-variant-numeric:tabular-nums; background:var(--panel);
    border:1px solid var(--line); border-radius:12px; padding:10px 18px; min-width:86px; }
.lp-wrap { position:relative; }
.lp-wrap video { width:100%; height:100%; background:#000; }
.lp-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.25); cursor:pointer; z-index:2; }
.lp-bigbtn { width:76px; height:76px; border-radius:50%; background:rgba(10,13,18,.72);
    border:1.5px solid rgba(255,255,255,.7); color:#fff; font-size:26px; display:flex;
    align-items:center; justify-content:center; padding-left:6px; }
.lp-bar { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:14px;
    padding:14px 18px; background:linear-gradient(transparent, rgba(0,0,0,.75)); z-index:3;
    transition:opacity .25s; }
.lp-bar.lp-hide { opacity:0; pointer-events:none; }
.lp-nocursor { cursor:none; }
.lp-btn { background:none; border:0; color:#fff; cursor:pointer; padding:4px 6px; display:flex; align-items:center; }
.lp-btn:hover { opacity:.8; }
.lp-btn svg { display:block; }
#lp-play .i-pause, #lp-mute .i-voff { display:none; }
.lp-playing #lp-play .i-play { display:none; }
.lp-playing #lp-play .i-pause { display:block; }
.lp-muted #lp-mute .i-von { display:none; }
.lp-muted #lp-mute .i-voff { display:block; }
.lp-unmute svg { vertical-align:-4px; margin-right:6px; }
.lp-bigbtn svg { margin-left:2px; }
.lp-livebtn { border:0; cursor:pointer; font-family:inherit; }
.lp-unmute { position:absolute; top:18px; left:18px; z-index:4; background:rgba(10,13,18,.85);
    border:1.5px solid rgba(255,255,255,.65); color:#fff; padding:10px 20px; border-radius:26px;
    font-size:15px; font-weight:600; cursor:pointer; animation:livepulse 2.4s infinite; }
.lp-unmute:hover { animation:none; background:rgba(10,13,18,.95); }
.lp-livebtn.lp-behind { background:rgba(147,160,174,.2); color:var(--dim); }
.lp-livebtn.lp-behind i { background:var(--dim); animation:none; }
.keymask { cursor:pointer; }
.live-banner { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:14px 18px; margin-top:24px; }
.live-banner b { font-size:15px; }
.btn-live { background:var(--bad); border-color:var(--bad); color:#fff; font-weight:700; }
.btn-live:hover { filter:brightness(1.12); }
.feat-livebadge { position:absolute; left:12px; top:12px; font-size:14px; padding:5px 16px; }

/* ---------- featured spotlight ---------- */
.feat { display:grid; grid-template-columns:minmax(0,56%) 1fr; gap:30px; align-items:center; padding:30px 0 8px; }
.feat-thumb { position:relative; display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--panel); }
.feat-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.feat-thumb:hover img { transform:scale(1.03); }
.feat-eyebrow { color:var(--acc); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; }
.feat-info h2 { font-size:26px; font-weight:700; margin:0 0 10px; }
.feat-desc { color:#c6cfd8; margin-bottom:12px; }
.feat-meta { color:var(--dim); font-size:13px; margin-bottom:18px; }
.feat-play { padding:10px 26px; }
@media (max-width:820px){ .feat { grid-template-columns:1fr; gap:16px; } }

/* ---------- seasons ---------- */
.season-tabs { display:flex; gap:8px; flex-wrap:wrap; padding:22px 0 18px; }
.season-head { font-size:17px; font-weight:600; margin:30px 0 4px; }
.season-head span { color:var(--dim); font-size:13px; font-weight:400; margin-left:4px; }
.season-head:first-of-type { margin-top:6px; }
.vgrid-season { padding-top:12px; }
.stab { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:18px;
        border:1px solid var(--line); color:var(--dim); font-size:14px; }
.stab span { font-size:12px; opacity:.7; }
.stab:hover { color:var(--txt); border-color:var(--dim); }
.stab.active { background:var(--txt); color:var(--bg); border-color:var(--txt); font-weight:600; }
.stab.active span { opacity:.6; }
.season-list { display:flex; gap:10px; flex-wrap:wrap; }
.trim-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.trim-cols { display:grid; grid-template-columns:minmax(0,1.7fr) 1fr; gap:22px; align-items:start; margin-bottom:28px; }
.trim-side { display:flex; flex-direction:column; gap:16px; }
@media (max-width:900px){ .trim-cols { grid-template-columns:1fr; } }
.form-grid.panel { margin-bottom:28px; }
.live-cols { display:grid; grid-template-columns:minmax(0,1.6fr) 1fr; gap:18px; margin-top:20px; align-items:start; }
.lp-prevpanel { padding:10px; }
.lp-prevpanel video { width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; display:block; }
.live-stats { display:grid; gap:12px; }
#lv-spark, #lv-vspark { width:100%; height:34px; margin-top:10px; display:block; border-bottom:1px solid var(--line); }
.stat-tick { animation:stattick .5s ease; }
@keyframes stattick { 0% { color:var(--acc); transform:scale(1.05); } 100% { transform:scale(1); } }
@media (max-width:900px){ .live-cols { grid-template-columns:1fr; } }
.proc-row { padding:12px 0; border-bottom:1px solid var(--line); }
.proc-row:last-child { border-bottom:0; padding-bottom:2px; }
.season-item { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:4px 12px; font-size:14px; }
.form-grid select { width:100%; background:var(--bg); border:1px solid var(--line); border-radius:8px;
                    color:var(--txt); padding:9px 12px; font-size:14px; }

/* ---------- video cards ---------- */
.vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px 18px; padding-top:26px; }
.vrow { display:grid; grid-auto-flow:column; grid-auto-columns:260px; gap:16px; overflow-x:auto; padding-bottom:14px; }
.vcard { display:block; color:var(--txt); }
.vthumb { position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:var(--panel); }
.vthumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.vcard:hover .vthumb img { transform:scale(1.04); }
.noimg { width:100%; height:100%; background:linear-gradient(135deg,#1c2430,#0f141b); }
.dur { position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.75); color:#fff; font-size:12px;
       padding:2px 7px; border-radius:5px; }
.q4k { position:absolute; left:8px; top:8px; background:var(--acc); color:#07130c; font-size:11px; font-weight:700;
       padding:2px 7px; border-radius:5px; }
.vcard-current .vthumb { outline:2px solid var(--acc); outline-offset:-2px; }
.vcard-current .vthumb img { opacity:.55; }
.nowplaying { position:absolute; left:8px; top:8px; background:var(--acc); color:#07130c; font-size:11px;
              font-weight:700; padding:2px 7px; border-radius:5px; }
.vtitle { font-weight:600; margin:10px 0 2px; font-size:15px; }
.vmeta { color:var(--dim); font-size:13px; display:flex; align-items:center; }
.dl-arrow { margin-left:auto; font-weight:700; font-size:14px; }

/* ---------- player page (SVT Play-ish) ---------- */
.player-bg { position:fixed; inset:0; z-index:-1;
             background:linear-gradient(160deg, color-mix(in srgb, var(--gf) 36%, var(--bg)) 0%, var(--bg) 55%); }
.player-stage { width:100%; display:flex; justify-content:center; position:relative; overflow:hidden;
    background:color-mix(in srgb, var(--gf, #000) 22%, #08090c); }
.stage-backdrop { position:absolute; inset:0; background-size:cover; background-position:center;
    filter:blur(48px) brightness(.30) saturate(1.15); transform:scale(1.2); }
/* vh must stay inline in each rule — Safari doesn't recompute vh inside custom properties on resize */
.player-wrap { width:min(100%, max(820px, calc(62vh * 1.7778))); aspect-ratio:16/9; background:#000; position:relative; z-index:1; }
.player-wrap video { width:100% !important; height:100% !important; object-fit:contain; }
.player-wrap .fluid_video_wrapper { width:100% !important; height:100% !important; }
.player-wrap .fluid_video_wrapper, .player-wrap .fluid_video_wrapper video { border-radius:0 !important; }
/* seekbar hover preview: kill FluidPlayer's 1px #262626 border, round the corners */
.player-wrap .fluid_timeline_preview_container { border:none !important; border-radius:8px; box-shadow:0 6px 22px rgba(0,0,0,.55); }
.player-wrap .fluid_timeline_preview_container_shadow { border-radius:8px; }
/* big play button: FluidPlayer fills the circle with primaryColor inline (white on white) — force a dark glass circle */
.player-wrap .fluid_initial_play { background-color:rgba(10,13,18,.72) !important; border:1.5px solid rgba(255,255,255,.7); }
/* taller control bar with breathing room (FluidPlayer default: 53px, buttons at top:23px) */
.player-wrap .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container { height:78px; }
.player-wrap .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_progress_container { top:16px; }
.player-wrap .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_left,
.player-wrap .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_right { top:auto; bottom:15px; }
.player-container { max-width:none; width:min(100% - 32px, max(820px, calc(62vh * 1.7778))); padding:0 0 60px; }
.player-info { padding:10px 4px; }
.title-row { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.title-row h1 { font-size:32px; }
.player-meta { display:flex; align-items:center; gap:16px; color:var(--dim); font-size:14px; margin:16px 0 4px; flex-wrap:wrap; }
.desc { max-width:820px; color:#c6cfd8; margin-top:12px; min-height:1.4em; }
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media (max-width:900px){ .cols2 { grid-template-columns:1fr; } }
.modal { background:var(--panel); color:var(--txt); border:1px solid var(--line); border-radius:14px;
         padding:22px; width:min(520px, 92vw); margin:auto; }
.modal::backdrop { background:rgba(0,0,0,.65); backdrop-filter:blur(2px); }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-x { background:none; border:0; color:var(--dim); font-size:16px; cursor:pointer; padding:4px 8px; }
.modal-x:hover { color:var(--txt); }
.del-list { margin:10px 0 0 18px; color:var(--dim); }
.del-list li { margin:3px 0; }
.under-player { width:min(100% - 32px, max(820px, calc(62vh * 1.7778))); margin:8px auto 0; display:flex;
                justify-content:space-between; align-items:center; min-height:30px; }
.under-player .crumb { margin:0; }
.qsel { position:relative; }
.meta-i { display:inline-flex; align-items:center; gap:6px; }
.meta-i svg { width:15px; height:15px; opacity:.7; flex-shrink:0; }
.qsel-btn { background:var(--panel); border:1px solid var(--line); color:var(--txt);
            padding:5px 12px; border-radius:8px; font-size:13px; cursor:pointer; }
.qsel-btn:hover { border-color:var(--dim); }
.qsel-btn b { font-weight:600; }
.qsel-menu { position:absolute; right:0; top:calc(100% + 6px); background:var(--panel);
             border:1px solid var(--line); border-radius:10px; padding:6px; display:flex;
             flex-direction:column; min-width:110px; z-index:30; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.qsel-opt { background:none; border:0; color:var(--txt); text-align:left; padding:7px 12px;
            border-radius:6px; font-size:13px; cursor:pointer; }
.qsel-opt:hover { background:var(--line); }
@media (max-width:700px) {
    .hero-inner h1 { font-size:30px; }
    .player-info h1 { font-size:22px; }
}