: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:1180px; 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; }

/* ---------- 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:1180px; 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; }

/* ---------- seasons ---------- */
.season-tabs { display:flex; gap:8px; flex-wrap:wrap; padding:22px 0 4px; }
.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; }
.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; }

/* ---------- 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; }
.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; }
}