/* Stockertim — unified personal home. Sleek, minimalist, dark. */
:root{
  --bg:#05070d; --bg2:#080b14; --panel:#0b1120; --panel2:#0e1526; --line:rgba(120,150,210,.14);
  --ink:#eef3fb; --dim:rgba(255,255,255,.93); --muted:rgba(255,255,255,.93); --cyan:#3dd7f0; --green:#2fd17e; --red:#ff5c77;
  --amber:#ffb347; --violet:#a78bfa; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-padding-top:120px}
body{background:radial-gradient(1100px 640px at 82% -8%,#0d1730 0,var(--bg) 56%);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.h-wrap{max-width:1240px;margin:0 auto;padding:0 20px}

/* Top bar */
.h-top{position:sticky;top:0;z-index:40;
  background:rgba(5,7,13,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.h-top-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:70px}
.h-logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.01em;flex:0 0 auto;min-width:0}
.h-logo img{height:26px;width:auto}
.h-brand{display:flex;flex-direction:column;gap:2px;min-width:0}
.h-brand strong{font-size:17px;line-height:1;color:#fff;font-weight:800;letter-spacing:-.02em}
.h-brand small{font-size:11px;line-height:1.2;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.h-search{position:relative;flex:1 1 auto;max-width:520px;margin:0 auto}
.h-search input{width:100%;background:#0a1322;border:1px solid var(--line);color:var(--ink);border-radius:11px;padding:10px 14px 10px 38px;font:inherit;font-size:14px}
.h-search input:focus{outline:none;border-color:var(--cyan)}
.h-search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--dim)}
.h-ac{position:absolute;top:calc(100% + 10px);left:0;right:0;background:linear-gradient(180deg,rgba(8,12,22,.98),rgba(7,10,18,.98));border:1px solid rgba(120,150,210,.18);border-radius:18px;overflow:hidden;display:none;z-index:80;max-height:min(68vh,520px);overflow-y:auto;box-shadow:0 22px 60px rgba(0,0,0,.42)}
.h-ac.open{display:block}
.h-command{position:relative;padding:22px 0 8px;z-index:20}
.h-command-label{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:10px}
.h-command-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(61,215,240,.18);border-radius:999px;background:rgba(61,215,240,.06);font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.h-command-label p{margin:0;max-width:74ch;font-size:13px;line-height:1.5}
/* Universal search row — full-width, sits directly above the main menu toggles. */
.h-msearch{display:block;position:relative;margin:0 auto 12px;max-width:1120px;z-index:25}
.h-msearch .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--dim)}
.h-msearch input{width:100%;background:linear-gradient(180deg,rgba(10,19,34,.98),rgba(10,19,34,.92));border:1px solid rgba(120,150,210,.2);box-shadow:0 20px 50px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.02);color:var(--ink);border-radius:18px;padding:19px 18px 19px 50px;font:inherit;font-size:17px}
.h-msearch input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(61,215,240,.08),0 20px 50px rgba(0,0,0,.18)}
.h-ac-sec{padding:12px 14px 6px;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.h-ac-item{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;border-bottom:1px solid rgba(120,150,210,.07);transition:background .12s,border-color .12s}
.h-ac-item:hover{background:rgba(68,241,255,.06)}
.h-ac-item:last-child{border-bottom:none}
.h-ac-badge{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border-radius:11px;font:800 12px/1 var(--mono);letter-spacing:.04em;color:#fff;background:linear-gradient(160deg,#15455e,#0d2f44);border:1px solid rgba(255,255,255,.08)}
.h-ac-badge.inst{background:linear-gradient(160deg,#5e4a12,#3a2e0c);color:#ffce6b}
.h-ac-main{flex:1 1 auto;min-width:0}
.h-ac-row{display:flex;align-items:center;gap:8px;min-width:0}
.h-ac-item b{font-family:var(--mono);font-size:13px;color:#fff;flex:0 0 auto}
.h-ac-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--muted)}
.h-ac-meta{display:flex;align-items:center;gap:7px;margin-top:4px;min-width:0}
.h-ac-pill{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;border:1px solid rgba(61,215,240,.2);font:700 10px/1 var(--mono);letter-spacing:.06em;color:var(--cyan);text-transform:uppercase}
.h-ac-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--dim)}
.h-ac-country{flex:0 0 auto;display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;background:rgba(120,150,210,.12);font:600 10px/1 var(--mono);letter-spacing:.03em;color:#aeb9d6;white-space:nowrap}
.h-ac-empty{padding:18px 14px;color:var(--dim);font-size:13px;text-align:center}
.h-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.h-btn{font:inherit;font-size:14px;font-weight:700;cursor:pointer;border-radius:12px;padding:10px 16px;border:1px solid rgba(120,150,210,.18);background:rgba(255,255,255,.03);color:var(--ink);white-space:nowrap}
.h-btn.cyan{background:linear-gradient(180deg,#5ef6ff,#28c8e0);color:#04121a;border:none}
.h-burger{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:44px;font:inherit;font-size:20px;line-height:1;cursor:pointer;border:1px solid rgba(120,150,210,.18);background:rgba(255,255,255,.03);color:var(--ink);border-radius:12px;padding:0 12px}

/* Toggle bar */
.h-toggles{display:flex;gap:8px;justify-content:center;padding:2px 0 10px;flex-wrap:wrap}
.h-toggle{font:inherit;font-size:15px;font-weight:700;cursor:pointer;border:1px solid rgba(120,150,210,.18);background:rgba(255,255,255,.02);color:var(--dim);border-radius:999px;padding:10px 22px;min-width:140px}
.h-toggle.on{color:#04121a;background:linear-gradient(180deg,#5ef6ff,#28c8e0);border-color:transparent}
/* Home is a nav LINK styled as a toggle pill (goes to the globe landing). */
a.h-toggle{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.h-toggle-home{color:#9fe9ff;border-color:rgba(68,241,255,.3)}
.h-toggle-home:hover{background:rgba(68,241,255,.08);color:#d6f6ff}
.h-sub{display:flex;gap:7px;justify-content:center;margin:8px 0 4px;flex-wrap:wrap}
.h-subtab{font:inherit;font-size:13px;cursor:pointer;border:1px solid rgba(120,150,210,.18);background:rgba(255,255,255,.02);color:var(--dim);border-radius:999px;padding:7px 15px}
.h-subtab.on{color:var(--ink);border-color:var(--cyan)}

.h-pane{display:none;padding:14px 0 70px}
.h-pane.on{display:block}

/* Cards / generic */
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 18px 44px rgba(0,0,0,.18)}
.card h3{margin:0 0 12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:700}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-head-wrap{flex-wrap:wrap}
.card-head-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.card-titlebox{min-width:0}
.card-titlebox h3{margin:0}
.card-meta{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--dim)}
.kpis{display:grid;gap:14px}
.kpi{font-size:30px;font-weight:820;line-height:1}
.kpi small{display:block;font-size:11px;letter-spacing:.16em;color:var(--dim);margin-top:6px;text-transform:uppercase}
.muted{color:var(--muted)}.dim{color:var(--dim)}.mono{font-family:var(--mono)}
.up{color:var(--green)}.down{color:var(--red)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--dim);font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:9px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid rgba(120,150,210,.08)}
tr.clickable{cursor:pointer}tr.clickable:hover td{background:rgba(255,255,255,.02)}
.pill{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:2px 9px;color:var(--muted)}
.tag{font-size:11px;border-radius:6px;padding:2px 8px;font-weight:700}
.btn{font:inherit;font-weight:650;cursor:pointer;border-radius:10px;padding:9px 15px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink)}
.btn.cyan{background:linear-gradient(180deg,#5ef6ff,#28c8e0);color:#04121a;border:none}
.btn.sm{padding:6px 11px;font-size:13px}
.empty{color:var(--dim);text-align:center;padding:26px 0}
input,select{background:#0a1322;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit}
input:focus,select:focus{outline:none;border-color:var(--cyan)}
.flash{padding:10px 13px;border-radius:10px;margin-top:10px;font-size:13px;display:none}
.flash.show{display:block}.flash.err{background:rgba(255,92,119,.12);border:1px solid rgba(255,92,119,.4);color:#ffc2cd}
.flash.ok{background:rgba(47,209,126,.12);border:1px solid rgba(47,209,126,.4);color:#aef3d3}

/* Range tabs */
.h-range{display:flex;gap:5px;flex-wrap:wrap}
.h-range button{font:inherit;font-size:12px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:8px;padding:5px 11px}
.h-range button.on{color:#04121a;background:var(--cyan);border-color:var(--cyan);font-weight:700}

/* Heatmap */
.h-heat-card .st-hm{height:clamp(300px,48vw,440px);border-radius:16px;background:linear-gradient(180deg,rgba(6,10,18,.92),rgba(4,6,12,.78))}
#mkt-heat-idx.st-hm{height:clamp(220px,28vw,260px)}
.h-copyicon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;border:1px solid rgba(120,150,210,.18);background:rgba(255,255,255,.03);color:var(--dim);border-radius:12px;cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.h-copyicon:hover{color:var(--cyan);border-color:var(--cyan);background:rgba(61,215,240,.08)}
.heat-controls{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.heat-controls button{font:inherit;font-size:12px;cursor:pointer;border:1px solid rgba(120,150,210,.18);background:rgba(255,255,255,.02);color:var(--dim);border-radius:999px;padding:6px 13px}
.heat-controls button.on{color:var(--ink);border-color:var(--cyan)}
/* Period selector — compact segmented strip (1D…MAX) on each heatmap card. */
.heat-range{display:inline-flex;gap:2px;flex-wrap:wrap;margin:0;padding:2px;border:1px solid rgba(120,150,210,.18);border-radius:999px;background:rgba(255,255,255,.02)}
.heat-range button{font:inherit;font-size:11px;font-weight:600;letter-spacing:.02em;cursor:pointer;border:0;background:transparent;color:var(--dim);border-radius:999px;padding:5px 10px;line-height:1;transition:color .12s,background .12s}
.heat-range button:hover{color:var(--ink)}
.heat-range button.on{color:#031018;background:var(--cyan)}
@media (max-width:640px){.heat-range{width:100%;justify-content:space-between}.heat-range button{flex:1 1 0;text-align:center;padding:6px 4px}}
.heat{display:flex;flex-wrap:wrap;gap:4px}
.heat-tile{flex:1 1 auto;min-width:64px;min-height:54px;border-radius:8px;padding:7px 8px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;overflow:hidden;border:1px solid rgba(0,0,0,.25)}
.heat-tile b{font-family:var(--mono);font-size:12.5px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.heat-tile span{font-size:11px;color:rgba(255,255,255,.92);font-weight:700}

/* Search-result news + chart drawer */
.h-scrim{position:fixed;inset:0;background:rgba(3,5,10,.6);backdrop-filter:blur(3px);z-index:60;opacity:0;pointer-events:none;transition:.2s}
.h-scrim.open{opacity:1;pointer-events:auto}
.h-drawer{position:fixed;top:0;right:0;height:100vh;width:min(720px,96vw);background:linear-gradient(180deg,#0b1120,#070b13);border-left:1px solid var(--line);z-index:61;transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.8,.2,1);overflow:auto}
.h-drawer.open{transform:none}
/* Wider screens: let the drawer slide further in so the chart is genuinely larger,
   not just a narrow side panel. Width and chart height scale up with the viewport. */
@media (min-width:1200px){.h-drawer{width:min(940px,66vw)}.chart-box{height:380px}}
@media (min-width:1600px){.h-drawer{width:min(1140px,58vw)}.chart-box{height:440px}}
.h-drawer-h{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px;border-bottom:1px solid var(--line)}
.h-drawer-b{padding:18px 20px}
.chart-box{height:300px;width:100%}
.posbar{display:flex;flex-wrap:wrap;gap:18px;padding:12px 14px;border-radius:12px;background:#0a1322;border:1px solid var(--line);margin-bottom:12px}
.posbar div span{display:block;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.posbar div b{font-size:18px}

/* Hamburger drawer */
.h-menu{position:fixed;top:0;right:0;height:100vh;width:min(320px,90vw);background:linear-gradient(180deg,#0b1120,#070b13);border-left:1px solid var(--line);z-index:71;transform:translateX(102%);transition:transform .24s;overflow:auto;padding:18px}
.h-menu.open{transform:none}
.h-menu a{display:flex;align-items:center;gap:11px;padding:13px 12px;border-radius:11px;font-size:15px;font-weight:600;color:var(--ink)}
.h-menu a:hover{background:rgba(255,255,255,.04)}
.h-menu .sec{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:14px 12px 4px}

@media(max-width:820px){
  .grid2{grid-template-columns:1fr !important}
  .kpis{grid-template-columns:repeat(2,1fr) !important}
  /* Centre the markets strip tiles (Magnificent stocks / index KPIs) on mobile. */
  #mkt-indices .card{text-align:center}
  /* With an ODD number of tiles the last one (e.g. the 9th Magnificent card, PLTR)
     is left stranded in the first column. Span it across the row and centre it at
     exactly one column's width — gap is 14px, so that's 50% − 7px. */
  .kpis > *:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}
  table{display:block;overflow-x:auto;white-space:nowrap}
  /* 16px inputs everywhere → stops iOS from zooming the page on focus. */
  input,select,.h-search input{font-size:16px}
  /* Tighter topbar so logo + Sign in + menu fit comfortably. */
  .h-wrap{padding:0 14px}
  .h-top-inner{min-height:62px;gap:10px}
  .h-logo img{height:23px}
  .h-brand small{display:none}
  .h-command{padding:16px 0 6px}
  .h-command-label{display:block;margin-bottom:8px}
  .h-command-label p{margin-top:8px}
  .h-msearch{margin:0 0 10px;max-width:none}
  .h-msearch input{padding:17px 16px 17px 46px}
  .h-right{gap:8px;margin-left:auto}
  .h-btn{padding:9px 13px;font-size:13px}
  .h-burger{min-width:42px;height:42px;padding:0 11px;font-size:18px}
  /* Toggles + sub-tabs wrap instead of overflowing. */
  .h-toggles{gap:7px;padding:14px 0 2px;flex-wrap:wrap}
  .h-toggle{font-size:14px;padding:9px 18px;min-width:0;flex:1 1 160px}
  .h-sub{flex-wrap:wrap;margin:6px 0 4px}
  .h-pane{padding:12px 0 64px}
  .card-head,.card-head-side{width:100%}
  .card-head-side{justify-content:space-between}
  .h-heat-card .st-hm{height:clamp(280px,70vw,420px)}
  /* Drawer fills the screen; comfortable padding. */
  .h-drawer{width:100vw}
  .h-drawer-h,.h-drawer-b{padding:14px 16px}
  .chart-box{height:240px}
  .posbar{gap:12px 16px}
  .posbar div b{font-size:16px}
}
@media(max-width:480px){
  .h-brand strong{font-size:15px}
  .h-command-kicker{font-size:10px}
  .h-command-label p{font-size:12px}
  .h-toggle{font-size:13px;padding:8px 14px}
  .h-toggles{gap:6px}
  .tv-grid{grid-template-columns:1fr}
  .kpi{font-size:24px}
  .h-logo img{height:21px}
  .h-btn{padding:9px 12px}
  .h-msearch input{font-size:16px}
  .h-ac{left:-2px;right:-2px}
  .h-ac-item{padding:12px 12px}
  .h-ac-badge{flex-basis:40px;width:40px;height:40px}
  .heat-controls{width:100%}
  .heat-controls button{flex:1 1 0;text-align:center}
  .card{padding:14px}
}

/* ── Live ticker tape (mirrors the gateway ticker) ─────────────────────────── */
.gw2-tickerBar{position:sticky;top:70px;z-index:39;width:100%;height:46px;background:#0a1322;border-bottom:1px solid var(--line);overflow:hidden}
@media(max-width:820px){.gw2-tickerBar{top:62px}}
.gw2-liveTicker{position:relative;display:flex;align-items:center;width:100%;height:100%;overflow:hidden}
.gw2-liveTicker-pill{flex-shrink:0;display:inline-flex;align-items:center;height:100%;padding:0 12px;font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);background:linear-gradient(90deg,rgba(61,215,240,.16),rgba(61,215,240,0));border-right:1px solid rgba(61,215,240,.22)}
.gw2-liveTicker-viewport{flex:1;min-width:0;position:relative;overflow:hidden}
.gw2-liveTicker-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:gw2TickerScroll 125s linear infinite}
.gw2-liveTicker-track:hover{animation-play-state:paused}
@keyframes gw2TickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gw2-liveTicker-empty{padding:0 12px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.gw2-liveTicker-item{display:inline-flex;align-items:center;gap:5px;padding:0 13px;height:46px;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;border-right:1px solid rgba(156,180,255,.06);white-space:nowrap}
.gw2-liveTicker-item:hover{background:rgba(255,255,255,.03)}
.gw2-liveTicker-sym{color:#fff;font-weight:800}
.gw2-liveTicker-price{color:rgba(240,245,255,.82)}
.gw2-liveTicker-chg{display:inline-flex;align-items:center;gap:3px;font-weight:800}
.gw2-liveTicker-chg.up{color:var(--green)}.gw2-liveTicker-chg.dn{color:var(--red)}

/* ── Real-time alerts rail (PC / large screens, right side) ────────────────── */
.h-alerts-rail{display:none}
@media(min-width:1140px){
  body{padding-right:336px}
  .h-alerts-rail{display:flex;flex-direction:column;position:fixed;top:71px;right:0;width:336px;height:calc(100vh - 71px);
    background:linear-gradient(180deg,var(--panel),var(--bg2));border-left:1px solid var(--line);z-index:30}
}
.h-rail-head{padding:13px 15px;border-bottom:1px solid var(--line)}
.h-rail-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.h-rail-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--cyan)}
.h-livedot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:hpulse 1.6s infinite}
@keyframes hpulse{0%,100%{opacity:1}50%{opacity:.35}}
.h-rail-actions{display:flex;align-items:center;gap:5px}
.h-rail-btn,.h-rail-tab{font:inherit;font-size:11.5px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:7px;padding:4px 9px}
.h-rail-tab.on{color:#04121a;background:var(--cyan);border-color:var(--cyan);font-weight:700}
.h-rail-btn.off{color:var(--dim);opacity:.6}
.h-rail-list{flex:1;overflow:auto;padding:8px 10px}
.h-rail-item{padding:10px 11px;border-radius:10px;border:1px solid transparent;margin-bottom:7px;background:rgba(255,255,255,.015)}
.h-rail-item.is-new{animation:hflash 1.4s ease-out;border-color:rgba(61,215,240,.4)}
@keyframes hflash{0%{background:rgba(61,215,240,.18)}100%{background:rgba(255,255,255,.015)}}
.h-rail-item .msg{font-size:13px;line-height:1.4}
.h-rail-item .meta{font-size:10.5px;color:var(--dim);margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.h-rail-chip{font-size:10px;border:1px solid rgba(61,215,240,.4);color:var(--cyan);border-radius:20px;padding:1px 7px;cursor:pointer}

/* ── Live TV (channels brought from the gateway) ───────────────────────────── */
.tv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tv-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0a1322}

/* ── News / Notes cards ───────────────────────────────────────────────────────
   The News and Notes grids re-use .tv-grid/.tv-card but add .tv-thumb/.tv-info/
   .tv-title/.tv-meta — which had NO styling at all. .tv-thumb was therefore an
   unstyled <div> with no height: the cover image WAS loading (via img-proxy) but
   collapsed to zero pixels, so every news card rendered as bare text. These rules
   give the thumbnail its 16:9 box and the body its type. (Video cards use
   .tv-embed/<img> instead and are unaffected.) */
.tv-thumb{position:relative;width:100%;aspect-ratio:16/9;background-color:#05070d;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.tv-thumb-fallback{font-size:26px;opacity:.45}
.tv-info{padding:10px 12px}
.tv-title{font-size:13.5px;font-weight:700;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tv-meta{margin-top:5px;font-size:11px;color:var(--dim)}
a.tv-card{display:block;text-decoration:none;transition:border-color .18s ease,transform .18s ease}
a.tv-card:hover{border-color:rgba(61,215,240,.45);transform:translateY(-2px)}
.tv-label{display:flex;align-items:center;gap:7px;padding:9px 12px;font-size:12px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.tv-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 7px var(--red);animation:hpulse 1.6s infinite}
.tv-embed{position:relative;width:100%;aspect-ratio:16/9;background:#05070d;cursor:pointer}
.tv-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,rgba(61,215,240,.12),rgba(5,7,13,.78));transition:opacity .2s}
.tv-play.hidden{opacity:0;pointer-events:none}
.tv-playbtn{width:54px;height:54px;border-radius:50%;border:1px solid rgba(61,215,240,.5);background:rgba(8,16,28,.7);color:var(--cyan);display:flex;align-items:center;justify-content:center;cursor:pointer}
.tv-playbtn:hover{background:rgba(61,215,240,.16)}

/* Videos — reuse the Live-TV grid; thumbnail card with tier badge + premium lock */
.vid-filter{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02)}
.vid-filter button{font:inherit;font-size:11px;font-weight:600;cursor:pointer;border:0;background:transparent;color:var(--dim);border-radius:999px;padding:5px 11px;line-height:1}
.vid-filter button:hover{color:var(--ink)} .vid-filter button.on{color:#031018;background:var(--cyan)}
.vid-card{cursor:pointer;transition:border-color .15s} .vid-card:hover{border-color:rgba(61,215,240,.5)}
.vid-card .tv-label::before{display:none}
.vid-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vid-thumb img.is-blurred{filter:blur(5px) brightness(.6)}
.vid-badge{position:absolute;left:8px;top:8px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:6px;background:rgba(5,8,14,.82);color:var(--dim);border:1px solid var(--line)}
.vid-badge.is-premium{color:#ffd66b;border-color:rgba(255,200,80,.5);background:rgba(40,30,5,.82)}
.vid-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;background:radial-gradient(circle at 50% 50%,rgba(255,200,80,.1),rgba(5,7,13,.72))}
.vid-lock-ov{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(2,4,8,.7);backdrop-filter:blur(3px)}
.vid-lock-ov[hidden]{display:none}
.vid-lock-box{position:relative;max-width:420px;width:92%;text-align:center;background:var(--panel,#0a111d);border:1px solid var(--line);border-radius:16px;padding:26px 24px}
.vid-lock-x{position:absolute;right:12px;top:8px;background:none;border:0;color:var(--dim);font-size:24px;cursor:pointer;line-height:1}
.vid-lock-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#ffd66b;font-weight:700;margin-top:8px}
.vid-lock-t{font-size:17px;font-weight:750;margin-top:4px}

/* ── Mobile refinements (audit) — dvh drawers, safe-area, pill tap targets ──── */
.h-drawer,.h-menu{height:100vh;height:100dvh;padding-bottom:env(safe-area-inset-bottom,0px)}
.h-top{padding-top:env(safe-area-inset-top,0px)}
@media (hover:none){
  .h-subtab,.heat-controls button,.heat-range button,.vid-filter button{min-height:36px}
}