/* Vantage - minimal, neutral UI with light/dark themes. Brand yellow lives in the logo only.
   Fonts follow veon.com: Montserrat (headings/UI) + Open Sans (body). */
:root{--bg:#f7f7f6;--card:#fff;--txt:#111;--mut:#6b6b6b;--line:#e7e7e4;--line2:#d2d2ce;--field:#fff;--ink:#111;--ink-inv:#fff;--hover:#f0f0ed;--up:#0e8f36;--dn:#c62828;--brand:#FFC836;--r:12px}
html[data-theme=dark]{--bg:#0c0c0c;--card:#151515;--txt:#ececec;--mut:#9b9b9b;--line:#262626;--line2:#3a3a3a;--field:#1b1b1b;--ink:#f1f1f1;--ink-inv:#101010;--hover:#1e1e1e;--up:#4be36a;--dn:#ff6b70;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font:400 14.5px/1.6 'Open Sans',-apple-system,Segoe UI,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,button,.btn,th{font-family:Montserrat,-apple-system,Segoe UI,Arial,sans-serif}
a{color:inherit}.hide{display:none!important}.muted{color:var(--mut)}.sp{flex:1}code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.container{max-width:1240px;margin:0 auto;padding:0 32px 72px;width:100%}

/* ---------- layout: full-width top bar (logo) + collapsible sidebar + content ---------- */
.layout{display:flex;flex-direction:column;min-height:100vh}
.topbar{position:sticky;top:0;z-index:70;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 24px 0 26px;height:68px;flex:0 0 68px}
.tbrand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--txt);white-space:nowrap}
.tbrand img{height:26px;width:auto;display:block}
.tbrand .bt{font:500 36px/26px Montserrat,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;border-left:2px solid var(--brand);padding-left:12px}
.logo-for-dark{display:none!important}html[data-theme=dark] .logo-for-dark{display:block!important}html[data-theme=dark] .logo-for-light{display:none!important}
.shell-body{display:flex;flex:1;align-items:stretch;min-width:0}
.side{position:sticky;top:68px;height:calc(100vh - 68px);width:236px;flex:0 0 236px;background:#000;color:#fff;display:flex;flex-direction:column;z-index:60;overflow:hidden;transition:width .22s ease,flex-basis .22s ease}
.side nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 14px 12px;scrollbar-width:thin;scrollbar-color:#2a2a2a #000}
.grp{font:700 10px Montserrat,Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#6a6a6a;padding:20px 12px 6px;white-space:nowrap}
.side nav a,.side .collapse{display:flex;align-items:center;gap:13px;width:100%;padding:9px 12px;margin:1px 0;border-radius:9px;color:#a9a9a9;text-decoration:none;font:600 13px Montserrat,Arial,sans-serif;white-space:nowrap;border:0;background:transparent;cursor:pointer;transition:background .15s,color .15s;text-align:left}
.side .ico{display:inline-flex;width:19px;height:19px;flex:0 0 19px}.side .ico svg{width:19px;height:19px}
.side nav a:hover,.side .collapse:hover{background:#161616;color:#fff}
.side nav a.on{background:#1f1f1f;color:#fff}.side nav a.on .ico{color:var(--brand)}
.side .collapse{margin:0 14px 14px;width:calc(100% - 28px);color:#7d7d7d;border-top:1px solid #1b1b1b;border-radius:0 0 9px 9px;padding-top:12px}
.side .collapse .ico{transition:transform .22s}
.layout.collapsed .side{width:68px;flex-basis:68px}
.layout.collapsed .side .label{display:none}
.layout.collapsed .side .grp{font-size:0;padding:10px 0 4px;border-top:1px solid #1b1b1b;margin:8px 10px 0}
.layout.collapsed .side .grp-wrap:first-child .grp{border-top:0}
.layout.collapsed .side nav a,.layout.collapsed .side .collapse{justify-content:center;padding-left:0;padding-right:0}
.layout.collapsed .side .collapse .ico{transform:rotate(180deg)}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.pagebar{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:22px 20px 22px}
.pagebar h1{margin:0;font:700 22px/1.2 Montserrat,Arial,sans-serif;letter-spacing:-.2px}
.pagemeta{font-size:12px;color:var(--mut)}
.iconbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--txt);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s}
.iconbtn:hover{background:var(--hover)}.iconbtn svg{width:17px;height:17px}.iconbtn.sm{width:30px;height:30px}.iconbtn.sm svg{width:15px;height:15px}
.iconbtn .ico{display:inline-flex;width:17px;height:17px}.iconbtn.sm .ico{width:15px;height:15px}
.avatar{width:36px;height:36px;border-radius:50%;border:0;background:var(--brand);color:#111;font:700 14px Montserrat,Arial,sans-serif;cursor:pointer;text-transform:uppercase}
.avatar:focus-visible,.iconbtn:focus-visible,.btn:focus-visible,a:focus-visible{outline:2px solid var(--line2);outline-offset:2px}
.burger{display:none}
.menuwrap{position:relative}
.menu{position:absolute;right:0;top:46px;min-width:230px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 36px rgba(0,0,0,.14);padding:8px;z-index:70}
.menu .who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}.menu .who b{display:block;font-size:13px;word-break:break-all}
.menu .role{display:inline-block;margin-top:5px;font:700 10px Montserrat,Arial,sans-serif;text-transform:uppercase;letter-spacing:.9px;color:var(--mut);border:1px solid var(--line2);border-radius:99px;padding:1px 9px}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:transparent;border-radius:8px;color:var(--txt);font:600 13px Montserrat,Arial,sans-serif;text-decoration:none;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:var(--hover)}.menu .ico{display:inline-flex;width:16px;height:16px}.menu svg{width:16px;height:16px}
.scrim{display:none}
@media(max-width:900px){
  .side{position:fixed;left:0;top:68px;bottom:0;height:auto;width:260px;flex-basis:auto;transform:translateX(-102%);transition:transform .24s ease;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .layout.collapsed .side{width:260px}.layout.collapsed .side .label{display:inline}.layout.collapsed .side .grp{font-size:10px;padding:20px 12px 6px;border:0;margin:0}
  .layout.collapsed .side nav a,.layout.collapsed .side .collapse{justify-content:flex-start;padding-left:12px}.layout.collapsed .side .collapse .ico{transform:none}
  .layout.open .side{transform:none}.layout.open .scrim{display:block;position:fixed;inset:68px 0 0 0;background:rgba(0,0,0,.5);z-index:55}
  .burger{display:inline-flex}.topbar{padding:0 14px}.tbrand .bt{display:none}.pagebar{padding:18px 20px}.container{padding:0 18px 72px}
}
@media (prefers-reduced-motion:reduce){.side,.side .collapse .ico{transition:none}}

/* ---------- ticker: pinned quotes (static) + scrolling marquee ---------- */
.ticker{background:#0f0f0f;color:#fff;border-top:1px solid #1d1d1d;border-bottom:1px solid #1d1d1d;display:flex;align-items:stretch;overflow:hidden}
.ticker .pins{display:flex;flex:0 0 auto;background:#0f0f0f;position:relative;z-index:2;border-right:1px solid #2a2a2a}
.ticker .row{flex:1;min-width:0;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ticker .track{display:inline-flex;width:max-content;animation:tickscroll 60s linear infinite;will-change:transform}
.ticker:hover .track{animation-play-state:paused}
@keyframes tickscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:baseline;gap:9px;padding:11px 22px;white-space:nowrap;color:inherit;text-decoration:none;transition:background .15s}
a.tk:hover{background:#1a1a1a}a.tk:hover .s{text-decoration:underline;text-underline-offset:3px}
.pins .tk{padding:11px 20px;border-right:1px solid #1f1f1f}.pins .tk:last-child{border-right:0}
.tk .s{font:700 12px Montserrat,Arial,sans-serif;color:#fff;letter-spacing:.3px}.tk .n{font-size:10.5px;color:#8c8c8c;letter-spacing:.4px}
.tk .p{font-size:13px;color:#d6d6d6;font-variant-numeric:tabular-nums}.tk .c{font:600 12px 'Open Sans',Arial,sans-serif;font-variant-numeric:tabular-nums}
.tk .c.up{color:#4be36a}.tk .c.dn{color:#ff6b70}
.ticker .empty{padding:12px 24px;color:#8f8f8f;font-size:12.5px;text-align:left}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none}.ticker .row{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}


/* ---------- page head ---------- */
.pagehead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:14px 0 18px}
.pagehead h1{margin:0;font:700 26px/1.2 Montserrat,Arial,sans-serif;letter-spacing:-.3px}
.pagehead p{margin:6px 0 0;color:var(--mut);max-width:680px;font-size:14px}
.updated{font-size:12px;color:var(--mut);margin-top:6px}

/* ---------- buttons / inputs ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--card);color:var(--txt);border-radius:8px;padding:8px 16px;font-weight:600;font-size:13px;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s;line-height:1.25}
.btn:hover{background:var(--hover)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pri{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}.btn.pri:hover{opacity:.88;background:var(--ink)}
.btn.dark{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}.btn.dark:hover{opacity:.88}
.btn.dng{color:var(--dn);border-color:var(--line2)}.btn.dng:hover{background:var(--dn);color:#fff;border-color:var(--dn)}
.btn.sm{padding:5px 11px;font-size:12px}.btn.ghost{border-color:transparent;background:transparent}.btn.ghost:hover{background:var(--hover)}
.btn .ico{display:inline-flex;width:16px;height:16px}.btn svg{width:16px;height:16px}
input,select,textarea{width:100%;background:var(--field);color:var(--txt);border:1px solid var(--line2);border-radius:8px;padding:9px 12px;font:400 14px 'Open Sans',Arial,sans-serif;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--line2);box-shadow:0 0 0 3px color-mix(in srgb,var(--txt) 12%,transparent)}
input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--ink);cursor:pointer}textarea{min-height:100px;resize:vertical;line-height:1.5}
.field{display:grid;gap:6px}.field>label{font:600 12px Montserrat,Arial,sans-serif;color:var(--mut)}.field small{color:var(--mut);font-size:12px}
.field.ck{display:flex;align-items:center;gap:10px}.field.ck label{font:600 13px Montserrat,Arial,sans-serif;color:var(--txt)}
.search{position:relative;min-width:220px}.search input{padding-left:36px}
.search:before{content:"";position:absolute;left:13px;top:50%;width:10px;height:10px;border:1.8px solid var(--mut);border-radius:50%;transform:translateY(-62%)}
.search:after{content:"";position:absolute;left:23px;top:56%;width:5px;height:1.8px;background:var(--mut);transform:rotate(45deg)}

/* ---------- cards / tables / badges ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tablecard{overflow:auto}table{width:100%;border-collapse:collapse}
th{background:var(--hover);color:var(--mut);text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:11px 16px;white-space:nowrap;border-bottom:1px solid var(--line)}
td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13.5px}tr:last-child td{border-bottom:0}tbody tr:hover td{background:var(--hover)}
td .tagline{display:flex;flex-wrap:wrap;gap:5px;max-width:360px}.pill{background:var(--hover);border:1px solid var(--line);border-radius:99px;padding:1px 9px;font-size:11.5px;font-weight:600}
.badge{display:inline-block;white-space:nowrap;padding:2px 10px;border-radius:99px;font:700 10.5px Montserrat,Arial,sans-serif;text-transform:uppercase;letter-spacing:.5px;border:1px solid var(--line2);color:var(--mut);background:transparent}
.badge.ok{color:var(--up);border-color:color-mix(in srgb,var(--up) 45%,transparent)}.badge.bad{color:var(--dn);border-color:color-mix(in srgb,var(--dn) 45%,transparent)}
.badge.warn{color:var(--txt);background:var(--hover)}.badge.off{color:var(--mut)}
.rowact{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.empty{padding:56px 20px;text-align:center;color:var(--mut)}.empty .big{font:700 17px Montserrat,Arial,sans-serif;color:var(--txt);margin-bottom:4px}
.skel{background:linear-gradient(90deg,var(--hover) 25%,var(--line) 37%,var(--hover) 63%);background-size:400% 100%;animation:sk 1.3s infinite;border-radius:8px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- news feed ---------- */
.feedwrap{max-width:1080px;margin:0 auto}
.feedtools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 0 6px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;padding:2px;background:var(--card)}
.seg button{border:0;background:transparent;border-radius:6px;padding:5px 14px;font:600 12.5px Montserrat,Arial,sans-serif;cursor:pointer;color:var(--mut)}
.seg button.on{background:var(--ink);color:var(--ink-inv)}.seg button:not(.on):hover{color:var(--txt)}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-top:16px;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;padding:10px 0;font:600 13.5px Montserrat,Arial,sans-serif;color:var(--mut);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab:hover{color:var(--txt)}.tab.on{color:var(--txt);border-bottom-color:var(--txt)}.tab .ct{margin-left:6px;font-weight:500;opacity:.6;font-size:12px}
.regions{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 2px}
.rtab{border:1px solid var(--line2);background:transparent;color:var(--mut);border-radius:99px;padding:3px 12px;font:600 11.5px Montserrat,Arial,sans-serif;cursor:pointer}
.rtab:hover{color:var(--txt)}.rtab.on{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}.rtab .ct{opacity:.6;margin-left:5px;font-weight:500}
.stories{margin-top:6px}
.story{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:22px 0;border-bottom:1px solid var(--line)}
.story:last-child{border-bottom:0}
.story .pick{margin-top:5px;opacity:.28;transition:opacity .15s}.story:hover .pick,.story .pick:checked{opacity:1}
.smeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font:600 11px Montserrat,Arial,sans-serif;letter-spacing:.7px;text-transform:uppercase;color:var(--mut)}
.smeta .sec{color:var(--txt)}.smeta .rest{white-space:nowrap}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tg{border:1px solid var(--line2);border-radius:6px;padding:1px 8px;font:600 11.5px Montserrat,Arial,sans-serif;color:var(--mut)}.tg.rg{color:var(--txt);border-color:var(--line2);background:var(--hover)}
.story.nopick{grid-template-columns:1fr}
.story h3{margin:9px 0 6px;font:700 19px/1.35 Montserrat,Arial,sans-serif;letter-spacing:-.15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}   /* full headline; only extreme ones are cut at 3 lines */
.story h3 a{text-decoration:none}.story h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.story p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.65;max-width:70ch}
.story.picked h3{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.story.skel{height:104px;margin:14px 0;border:0}
.actionbar{position:sticky;bottom:22px;z-index:30;margin:22px auto 0;background:var(--ink);color:var(--ink-inv);border-radius:12px;padding:8px 8px 8px 20px;display:flex;align-items:center;gap:8px;box-shadow:0 12px 36px rgba(0,0,0,.28);width:fit-content;max-width:100%;font-size:13px}
.actionbar .btn{background:transparent;color:var(--ink-inv);border-color:transparent}.actionbar .btn:hover{background:rgba(127,127,127,.25)}
.actionbar .btn.pri{background:var(--ink-inv);color:var(--ink);font-weight:700}.actionbar .btn.pri:hover{opacity:.9;background:var(--ink-inv)}

/* ---------- modal + toast ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .15s}
.modal{background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:14px;width:min(640px,100%);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;animation:pop .18s}
.modal.wide{width:min(760px,100%)}.modal.tall{height:90vh}
.modal header{padding:16px 22px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.modal header h3{margin:0;font-size:15px;flex:1}.modal header .x{background:transparent;border:0;color:var(--mut);font-size:22px;cursor:pointer;line-height:1}
.modal .body{padding:22px;overflow:auto;display:grid;gap:16px}.modal .foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;align-items:center}
.modal iframe{width:100%;flex:1;border:0;background:#f1f1f1}
@keyframes fade{from{opacity:0}}@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:0}}
.toasts{position:fixed;right:20px;bottom:20px;z-index:100;display:grid;gap:10px}
.toast{background:var(--ink);color:var(--ink-inv);padding:12px 18px;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.3);max-width:380px;font-weight:600;font-size:13px;animation:pop .2s}
.toast.err{background:var(--dn);color:#fff}.toast.ok{background:var(--ink)}

/* ---------- login ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:.77fr 1fr}
.auth .hero{background:#000;color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:flex-start;gap:28px;position:relative;overflow:hidden;min-height:600px}
.auth .hero img{height:34px;width:fit-content}.auth .hero h1{font:800 clamp(30px,3.6vw,48px)/1.1 Montserrat,Arial,sans-serif;margin:0 0 16px;max-width:520px}.auth .hero h1 em{font-style:normal;color:var(--brand)}
.auth .hero p{color:#bdbdbd;max-width:460px;font-size:15px}.auth .hero small{color:#777}.auth .hero .copy{margin-top:auto}
.vrow{position:relative;height:clamp(170px,34vh,340px);margin:0 -56px -56px 0}.vrow small{position:absolute;left:0;bottom:30px;color:#777}
.vmark{position:absolute;bottom:0;height:100%;width:auto;aspect-ratio:46/40;pointer-events:none}
.vmark.front{right:-14%;bottom:-14%;height:100%;fill:var(--brand);z-index:2}.vmark.back{right:-6%;bottom:-22%;height:100%;fill:#1c1c1c;z-index:1}
.auth .panel{display:flex;align-items:center;justify-content:center;padding:32px;background:var(--bg)}.auth .box{width:min(400px,100%);display:grid;gap:18px}
.auth .box h2{margin:0;font:700 26px Montserrat,Arial,sans-serif}.codein{letter-spacing:14px;font:700 28px Montserrat,Arial,sans-serif;text-align:center;padding:14px}
.auth .field>label{text-transform:uppercase;letter-spacing:.6px;font-size:11px}
.err{color:var(--dn);font-weight:600;font-size:13px;min-height:20px}
@media(max-width:860px){.auth{grid-template-columns:1fr}.auth .hero{padding:32px;min-height:340px}}

/* ---------- accents + loading states ---------- */
.btn.ai{background:#000;color:#fff;border-color:#000}html[data-theme=dark] .btn.ai{border-color:#4a4a4a}.btn.ai:hover{background:#1c1c1c}
.spark{color:var(--brand);font-size:14px;line-height:1}
.loading .btn,.loading .seg,.loading .search,.loading .iconbtn{opacity:.5;pointer-events:none}
.tab .skel{vertical-align:middle}

/* ---------- ticker: expandable VEON + NASDAQ-100, skeleton ---------- */

.expander{background:transparent;border:0;color:#8f8f8f;cursor:pointer;padding:0 12px;display:inline-flex;align-items:center;justify-content:center}
.expander:hover{color:#fff}.expander .ico{display:inline-flex;width:14px;height:14px}.expander svg{width:14px;height:14px;transform:rotate(180deg);transition:transform .2s}
.pins.open .expander svg{transform:rotate(0deg)}
.ticker .pgroup{display:flex;align-items:stretch;border-right:1px solid #2a2a2a}.ticker .pgroup:last-child{border-right:0}
.ticker .pin{display:flex;align-items:stretch}.ticker .pin .tk{padding-right:10px}
.ticker .subs{display:none;align-items:stretch;background:#161616;border-left:1px solid #1f1f1f;max-width:62vw;overflow-x:auto;scrollbar-width:none}.ticker .subs::-webkit-scrollbar{display:none}.pgroup.open .subs{display:flex}
.tk.sub .s{color:#d0d0d0}
.ticker .skelblock{padding:0;width:110px;height:12px;margin:15px 22px;border-radius:99px;background:linear-gradient(90deg,#1b1b1b 25%,#2a2a2a 37%,#1b1b1b 63%);background-size:400% 100%;animation:sk 1.3s infinite}

/* ---------- feed: grid / list toggle, grid cards ---------- */
.regions{align-items:center}
.stories.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;margin-top:14px}
.stories.grid .story{display:block;position:relative;border:0;border-radius:12px;padding:16px 18px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:box-shadow .15s}
.stories.grid .story:hover{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.stories.grid .story:last-child{border-bottom:0}
.stories.grid .story .pick{position:absolute;top:14px;right:14px;margin:0}
.stories.grid .story h3{font-size:16.5px}.stories.grid .story p{font-size:13.5px}
.stories.grid .story.skel{height:170px;border:0;margin:0}.stories.grid .empty{grid-column:1/-1}

/* ---------- feed meta line: keywords live at the end of the line, max three, faint dividers ---------- */
.skelline{display:inline-block;width:200px;height:12px;border-radius:99px;vertical-align:middle}

/* ---------- listen on the go: audio player ---------- */
.btn.listen{border-color:var(--line2)}.btn.listen .ico{color:var(--brand)}
.player{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:80;width:min(720px,calc(100% - 32px));display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto auto;
  grid-template-areas:"play meta voice speed exp x" "spec spec spec spec spec spec" "lyr lyr lyr lyr lyr lyr" "prog prog prog prog prog time";align-items:center;gap:8px 12px;
  padding:12px 14px 10px;background:#0f0f0f;color:#fff;border:1px solid #2a2a2a;border-radius:18px;box-shadow:0 22px 60px rgba(0,0,0,.45);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.player.loading .pl-play{opacity:.5;pointer-events:none}.player.loading .pl-spec{opacity:.35}
.pl-play{grid-area:play;width:44px;height:44px;border-radius:50%;border:0;background:var(--brand);color:#000;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.pl-play svg{width:20px;height:20px}
.pl-meta{grid-area:meta;min-width:0}.pl-title{font:700 14px Montserrat,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pl-sub{font-size:12px;color:#a8a8a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-voices{grid-area:voice;display:inline-flex;background:#1a1a1a;border:1px solid #333;border-radius:99px;padding:2px}.pl-voices button{border:0;background:transparent;color:#bbb;border-radius:99px;padding:4px 11px;font:700 11.5px Montserrat,Arial,sans-serif;cursor:pointer}.pl-voices button.on{background:#fff;color:#000}
.pl-speed{grid-area:speed;background:#1d1d1d;border:1px solid #333;color:#fff;border-radius:99px;padding:4px 10px;font:700 12px Montserrat,Arial,sans-serif;cursor:pointer;min-width:46px}
.pl-exp,.pl-x{background:transparent;border:0;color:#9a9a9a;cursor:pointer;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}.pl-exp{grid-area:exp}.pl-x{grid-area:x}.pl-exp svg,.pl-x svg{width:18px;height:18px}
.pl-exp svg{transform:rotate(90deg);transition:transform .2s}.player.expanded .pl-exp svg{transform:rotate(-90deg)}
.pl-spec{grid-area:spec;width:100%;height:46px;display:block;transition:height .25s}.player.expanded .pl-spec{height:150px}
.pl-prog{grid-area:prog;width:100%;height:18px;padding:0;margin:0;background:transparent;border:0;accent-color:var(--brand);box-shadow:none;cursor:pointer}
.pl-time{grid-area:time;font:600 12px 'Open Sans',Arial,sans-serif;color:#cfcfcf;font-variant-numeric:tabular-nums;white-space:nowrap}
body.has-player{padding-bottom:150px}body.has-player .vfab{bottom:170px}body.has-player .actionbar{bottom:160px}

/* ---------- Viewy chat ---------- */
.vfab{position:fixed;right:22px;bottom:22px;z-index:75;display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border:1px solid #2f2f2f;border-radius:99px;padding:10px 18px 10px 12px;font:700 13px Montserrat,Arial,sans-serif;cursor:pointer;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:transform .15s}
.vfab:hover{transform:translateY(-2px)}html[data-theme=dark] .vfab{background:#1a1a1a}
.vm{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#000;align-items:center;justify-content:center}.vm svg{width:15px;height:13px}
.vpanel{position:fixed;right:22px;bottom:22px;z-index:85;width:min(420px,calc(100vw - 24px));height:min(640px,calc(100dvh - 44px));display:flex;flex-direction:column;background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.35);overflow:hidden;animation:pop .2s}
.vpanel header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.vav{display:inline-flex;width:36px;height:36px;border-radius:12px;background:var(--brand);color:#000;align-items:center;justify-content:center}.vav .vm{background:transparent;width:auto;height:auto}.vav svg{width:18px;height:16px}
.vh{flex:1;min-width:0}.vh b{display:block;font:700 15px Montserrat,Arial,sans-serif}.vh small{color:var(--mut);font-size:12px}
.vx{background:transparent;border:0;color:var(--mut);cursor:pointer;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.vx:hover{background:var(--hover)}.vx svg{width:18px;height:18px}
.vmsgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;overscroll-behavior:contain}
.vb{max-width:88%;min-width:0;padding:11px 15px;border-radius:18px;font-size:14px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.vb.me{align-self:flex-end;background:var(--brand);color:#111;border-bottom-right-radius:5px;font-weight:600}
.vb.bot{align-self:flex-start;background:var(--hover);border:1px solid var(--line);border-bottom-left-radius:5px}.vb.err{color:var(--dn)}
.vb.typing{display:flex;gap:5px;padding:14px 16px}.vb.typing i{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:vdot 1s infinite}.vb.typing i:nth-child(2){animation-delay:.15s}.vb.typing i:nth-child(3){animation-delay:.3s}
@keyframes vdot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.vcite{display:inline-block;background:var(--ink);color:var(--ink-inv);border-radius:6px;font:700 10px Montserrat,Arial,sans-serif;padding:0 5px;margin:0 2px;vertical-align:baseline;line-height:1.5}
.vsrc{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:10px;min-width:0}
.vlink{min-width:0;max-width:100%;display:flex;align-items:center;gap:8px;text-decoration:none;font-size:12.5px;color:var(--txt);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 10px}.vlink:hover{border-color:var(--line2);background:var(--hover)}
.vlink b{flex:0 0 auto;display:inline-flex;width:18px;height:18px;border-radius:6px;background:var(--ink);color:var(--ink-inv);font:700 10px Montserrat,Arial,sans-serif;align-items:center;justify-content:center}.vlink span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.vchip{background:var(--card);border:1px solid var(--line2);color:var(--txt);border-radius:99px;padding:7px 13px;font:600 12.5px Montserrat,Arial,sans-serif;cursor:pointer;text-align:left}.vchip:hover{background:var(--hover)}
.vform{display:flex;gap:8px;padding:12px 14px 6px;border-top:1px solid var(--line)}.vform input{flex:1;border-radius:99px;padding:11px 16px}
.vsend{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:var(--ink-inv);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.vsend:disabled{opacity:.4}.vsend svg{width:18px;height:18px}
.vnote{display:block;padding:0 16px 12px;color:var(--mut);font-size:11px;text-align:center;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}

/* ---------- mobile ---------- */
@media (hover:none){.story .pick{opacity:1}.vfab:hover{transform:none}}
@media (max-width:900px){
  .container{padding:0 16px 72px}.feedwrap{max-width:none}
  .feedtools{gap:8px}.feedtools .sp{display:none}
  .search{flex:1 1 100%;min-width:0;order:5}
  .feedtools .btn{flex:1 1 auto;justify-content:center}
  .tabs{gap:18px;margin-right:-16px;padding-right:16px}
  .regions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}.regions::-webkit-scrollbar{display:none}.rtab{white-space:nowrap}
  .story{padding:18px 0}.story h3{font-size:17px}.story p{font-size:14px}
  .pagehead{padding-bottom:12px}.pagehead h1{font-size:22px}
  .tablecard{margin:0 -16px;border-radius:0;border-left:0;border-right:0}
  th,td{padding:11px 12px}
}
@media (max-width:640px){
  html{font-size:15px}
  input,select,textarea{font-size:16px}                        /* stops iOS zooming into fields */
  .btn,.seg button,.iconbtn,.rtab,.tab{min-height:40px}.btn.sm{padding:8px 13px;font-size:13px}.iconbtn{min-width:40px}.iconbtn.sm{min-height:36px;min-width:36px}
  .seg{flex:1 1 auto}.seg button{flex:1;padding:8px 12px}
  .feedtools .ltxt{display:inline}
  .pagebar{padding:14px 16px 6px}.pagemeta{flex-basis:100%}
  .topbar{padding:0 12px;gap:6px}.tbrand img{height:22px}
  .ticker .tk{padding:10px 14px}
  .stories.grid{grid-template-columns:1fr}
  .actionbar{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));flex-wrap:wrap;padding:10px 12px}
  .overlay{padding:0;align-items:flex-end}.modal,.modal.wide{width:100%;max-height:100dvh;border-radius:18px 18px 0 0}.modal.tall{height:calc(100dvh - 24px)}.modal header,.modal .body,.modal .foot{padding-left:16px;padding-right:16px}
  .toasts{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}.toast{max-width:none}
  /* player becomes a full-width bottom sheet with a bigger spectrogram; Viewy a full-screen chat */
  .player{left:0;right:0;bottom:0;transform:none;width:100%;border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;grid-template-columns:auto minmax(0,1fr) auto auto auto;
    grid-template-areas:"play meta speed exp x" "voice voice voice voice voice" "spec spec spec spec spec" "lyr lyr lyr lyr lyr" "prog prog prog prog prog" "time time time time time";gap:8px 10px;padding:14px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .pl-voices{justify-self:start}.pl-spec{height:84px}.player.expanded .pl-spec{height:42dvh}
  .pl-time{text-align:center}
  body.has-player{padding-bottom:260px}body.has-player .vfab{bottom:285px}body.has-player .actionbar{bottom:275px}
  .vfab{right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:10px}.vfab-t{display:none}
  .vpanel{inset:0;width:100%;height:100dvh;border-radius:0;border:0}
  body.viewy-open{overflow:hidden}body.viewy-open .player{display:none}
  .auth .panel{padding:24px 18px}.auth .hero{min-height:300px;padding:28px 22px}
  .auth .vrow{height:150px;margin:0 -22px -28px 0}
}
@media (prefers-reduced-motion:reduce){.vpanel,.vb.typing i{animation:none}.vfab{transition:none}}

/* ---------- ticker: groups and closed markets ---------- */
.ticker .glabel{display:inline-flex;align-items:center;padding:0 16px 0 22px;font:700 10px Montserrat,Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand);white-space:nowrap}
.ticker .subs .glabel{padding:0 10px 0 16px;color:#8c8c8c}
.tk .cl{align-self:center;font:700 9.5px Montserrat,Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:#9a9a9a;border:1px solid #3a3a3a;border-radius:99px;padding:1px 7px}
.tk.closed .p,.tk.closed .c{opacity:.78}
.expander .ico svg{transform:rotate(180deg)}.pgroup.open .expander svg{transform:rotate(0)}

/* ---------- day performance widget ---------- */
.daywidget{margin:18px 0 4px}
.dwhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.dwhead h2{margin:0;font:700 14px Montserrat,Arial,sans-serif}.dwhead .dws{font-size:12px;color:var(--mut)}
.dwtoggle{margin-left:auto;background:transparent;border:0;color:var(--mut);font:600 12px Montserrat,Arial,sans-serif;cursor:pointer}
.dwgrid{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.dwgrid::-webkit-scrollbar{display:none}
.dwcard{flex:0 0 auto;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.dwcard.big{min-width:210px;border-color:var(--line2)}
.dwcard .k{font:700 10.5px Montserrat,Arial,sans-serif;letter-spacing:.9px;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:8px}
.dwcard .v{font:700 22px Montserrat,Arial,sans-serif;margin:4px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.3px}.dwcard.big .v{font-size:28px}
.dwcard .d{font:600 12.5px 'Open Sans',Arial,sans-serif;font-variant-numeric:tabular-nums}.dwcard .d.up{color:var(--up)}.dwcard .d.dn{color:var(--dn)}
.dwcard .m{font-size:11.5px;color:var(--mut);margin-top:2px}
.dwcard .cl{font:700 9px Montserrat,Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase;border:1px solid var(--line2);border-radius:99px;padding:1px 6px;color:var(--mut)}
.dwbar{height:4px;border-radius:99px;background:var(--line);margin-top:8px;overflow:hidden;display:flex}.dwbar i{display:block;height:100%}.dwbar .u{background:var(--up)}.dwbar .n{background:var(--dn)}
@media(max-width:700px){.ticker .subs{max-width:48vw}.dwcard{min-width:132px}.dwcard.big{min-width:170px}}

.vtxt p{margin:0 0 8px}.vtxt p:last-child{margin-bottom:0}

/* ---------- embedded module (/embed/feed) ---------- */
body.embed .layout{min-height:0}body.embed .container{padding:0 16px 24px;max-width:none}body.embed .feedwrap{max-width:none}
body.embed .vpanel{right:12px;bottom:12px}body.embed .vfab{right:12px;bottom:12px}

/* =====================================================================================================================
   v3: ticker panel + mobile ticker, purple/yellow theme for Listen and Viewy, full-screen voice mode
   ===================================================================================================================== */
:root{--pu:#8B5CFF;--pu2:#B794FF;--pud:#5B2FD6}
/* ---------- ticker ---------- */
.ticker{position:relative}
.ticker .track{animation:none!important;will-change:transform;backface-visibility:hidden}
.ticker:hover .track{animation-play-state:running}
.ticker .row{padding-right:112px}
.mkbtn{position:absolute;right:0;top:0;bottom:0;display:inline-flex;align-items:center;gap:8px;padding:0 18px 0 22px;background:linear-gradient(90deg,rgba(15,15,15,0),#0f0f0f 26%);border:0;color:#fff;font:700 11px Montserrat,Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;z-index:3}
.mkbtn .ico{display:inline-flex;width:16px;height:16px;color:var(--brand)}.mkbtn svg{width:16px;height:16px}.mkbtn:hover{color:var(--brand)}
@media(max-width:700px){
  .ticker .row{padding-right:48px}
  .ticker .track .tk{padding:8px 12px;gap:6px}.ticker .tk .s{font-size:10.5px}.ticker .tk .p{font-size:11.5px}.ticker .tk .c{font-size:10.5px}.ticker .tk .cl{display:none}
  .ticker .glabel{padding:0 10px 0 14px;font-size:9px}
  .mkbtn{padding:0 12px 0 18px}.mkbl{display:none}
}

/* ---------- full-screen voice mode ---------- */
.vmode{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;color:#f1ecff;background:radial-gradient(1000px 700px at 85% -10%,rgba(139,92,255,.38),transparent 60%),radial-gradient(900px 600px at -10% 110%,rgba(139,92,255,.26),transparent 60%),#07050f;animation:fade .2s;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
.vmode::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:34px 34px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 75%);pointer-events:none}
.vmode>*{position:relative}
.vmtop{display:flex;align-items:center;gap:12px;padding:18px 22px}.vmtop b{font:700 15px Montserrat,Arial,sans-serif;letter-spacing:.2px}.vmtop .sp{flex:1}
.vmvoices{display:inline-flex;background:rgba(139,92,255,.16);border:1px solid rgba(139,92,255,.38);border-radius:99px;padding:2px}.vmvoices button{border:0;background:transparent;color:#cdbdff;border-radius:99px;padding:6px 14px;font:700 12px Montserrat,Arial,sans-serif;cursor:pointer}.vmvoices button.on{background:linear-gradient(135deg,#9B6DFF,#6A3DEB);color:#fff}
.vmclose{background:rgba(139,92,255,.18);border:0;color:#fff;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.vmclose svg{width:20px;height:20px}
.vmstage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 24px;min-height:0;overflow:hidden}
.vmorb{position:relative;width:min(300px,52vw);aspect-ratio:1;border-radius:50%;border:0;background:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.vmorb .core{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 50% 32%,#2b1f55,#0d0a1a);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;box-shadow:0 0 120px rgba(139,92,255,.5);transition:box-shadow .4s,transform .4s}
.vmorb .core svg{width:42%;height:auto;color:var(--brand)}
.vmorb .ring{position:absolute;inset:6%;border-radius:50%;border:2px solid rgba(155,109,255,.55);opacity:0}
.vmode[data-state=listening] .ring{animation:vring 2.2s ease-out infinite}.vmode[data-state=listening] .ring:nth-child(2){animation-delay:.7s}.vmode[data-state=listening] .ring:nth-child(3){animation-delay:1.4s}
.vmode[data-state=listening] .core{box-shadow:0 0 150px rgba(255,200,54,.45);transform:scale(1.04)}
.vmode[data-state=speaking] .core{animation:vbreathe 2.6s ease-in-out infinite}
.vmode[data-state=speaking] .ring{animation:vring 3.2s ease-out infinite}.vmode[data-state=speaking] .ring:nth-child(2){animation-delay:1s}.vmode[data-state=speaking] .ring:nth-child(3){animation-delay:2s}
.vmode[data-state=thinking] .ring:nth-child(1){opacity:1;border-color:transparent;border-top-color:#FFC836;animation:vspin 1.1s linear infinite}
@keyframes vring{0%{opacity:.7;transform:scale(.86)}100%{opacity:0;transform:scale(1.5)}}
@keyframes vbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes vspin{to{transform:rotate(360deg)}}
.vmstate{font:600 14px Montserrat,Arial,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:#cdbdff;min-height:20px}
.vmtrans{max-width:760px;text-align:center;font:500 20px/1.45 'Open Sans',Arial,sans-serif;color:#fff;min-height:30px}.vmtrans.interim{color:#b9a8ee}
.vmans{max-width:760px;width:100%;max-height:34vh;overflow:auto;background:rgba(23,18,41,.85);border:1px solid rgba(139,92,255,.3);border-radius:20px;padding:16px 20px;font-size:15px;line-height:1.6;text-align:left}.vmans:empty{display:none}
.vmans p{margin:0 0 8px}.vmans p:last-child{margin:0}.vmans .vsrc{margin-top:10px}
.vmbar{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 22px 26px}
.vmmic{width:76px;height:76px;border-radius:50%;border:0;background:linear-gradient(135deg,#FFE27A,#FFC836);color:#000;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 34px rgba(255,200,54,.35)}.vmmic svg{width:30px;height:30px}
.vmode[data-state=listening] .vmmic{background:linear-gradient(135deg,#9B6DFF,#6A3DEB);color:#fff;box-shadow:0 10px 40px rgba(139,92,255,.6)}
.vmside{background:rgba(139,92,255,.16);border:1px solid rgba(139,92,255,.35);color:#e6dcff;border-radius:99px;padding:10px 16px;font:700 12px Montserrat,Arial,sans-serif;cursor:pointer}.vmside.on{background:rgba(255,200,54,.18);border-color:rgba(255,200,54,.6);color:#FFE27A}
.vmtype{display:flex;gap:8px;max-width:760px;width:calc(100% - 44px);margin:0 auto 6px}.vmtype input{flex:1;border-radius:99px;background:#171229;border-color:rgba(139,92,255,.35);color:#fff;padding:12px 18px}
.vmhint{text-align:center;color:#8f82b8;font-size:12px;padding:0 24px 8px;min-height:18px}
@media(max-width:640px){.vmorb{width:min(230px,58vw)}.vmtrans{font-size:17px}.vmans{max-height:30vh}.vmmic{width:70px;height:70px}}
@media(prefers-reduced-motion:reduce){.vmorb .ring,.vmorb .core,.player.playing .pl-play{animation:none!important}}
.ticker{overflow:visible}.ticker .row{overflow:hidden}
@media(max-width:700px){.mkst{display:none}.mkhead b{white-space:nowrap}.mkall{padding:5px 10px;font-size:11.5px;white-space:nowrap}}

/* ---------- v4: Markets page, job pill, stable layout, player lyrics ---------- */
html{scroll-behavior:auto!important;scrollbar-gutter:stable}
.stories{min-height:60vh}                                                   /* switching categories no longer collapses the page height (that caused the jump) */
.tabs,.regions{overscroll-behavior-x:contain}
.mkbtn{text-decoration:none}
.mxhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 4px}.mxhead h2{margin:0;font:700 14px Montserrat,Arial,sans-serif}
.mxgrp h3{margin:18px 0 8px;font:700 10.5px Montserrat,Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut)}
.mxbody.grid .mxitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.mxbody.grid .mxitem{display:grid;grid-template-columns:1fr auto;gap:3px 8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.mxbody.grid .mxitem .p{grid-column:1;font-size:16px}.mxbody.grid .mxitem .c{grid-column:2;grid-row:1/3;align-self:center}.mxbody.grid .mxitem .cl{grid-column:1;justify-self:start}
.mxbody.list .mxitems{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mxbody.list .mxitem{display:grid;grid-template-columns:1fr auto auto auto;gap:14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line)}.mxbody.list .mxitem:last-child{border-bottom:0}
.mxitem{color:var(--txt);text-decoration:none}.mxitem:hover{background:var(--hover)}.mxitem .s{font:700 13px Montserrat,Arial,sans-serif}.mxitem .p{color:var(--txt);font-variant-numeric:tabular-nums;font-size:14px}
.mxitem .c{font:600 13px 'Open Sans',Arial,sans-serif;font-variant-numeric:tabular-nums}.mxitem .c.up{color:var(--up)}.mxitem .c.dn{color:var(--dn)}
.mxitem .cl{font:700 9px Montserrat,Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:var(--mut);border:1px solid var(--line2);border-radius:99px;padding:1px 7px}
@media(max-width:700px){.daywidget{display:block}.mxbody.grid .mxitems{grid-template-columns:repeat(2,1fr)}.mxbody.list .mxitem{grid-template-columns:1fr auto auto;gap:10px}.mxbody.list .mxitem .cl{display:none}}
.jobpill{display:inline-flex;align-items:center;gap:8px;margin-left:8px;padding:6px 14px;border-radius:99px;background:var(--ink);color:var(--ink-inv);font:700 12px Montserrat,Arial,sans-serif;text-decoration:none;white-space:nowrap}
.jobpill .jspin{width:12px;height:12px;border:2px solid rgba(127,127,127,.5);border-top-color:var(--brand);border-radius:50%;animation:vspin .9s linear infinite}
.jobpill.done{background:var(--brand);color:#000}.jobpill .jk{font-weight:800}
@media(max-width:480px){.jobpill .jt{display:none}.jobpill{padding:7px 9px}}
/* the floating buttons follow the player's real visibility (a stuck class used to leave them raised with a blank bar) */
body:has(.player:not(.hide)){padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
body:has(.player:not(.hide)) .vfab{bottom:170px}
body:has(.player:not(.hide)) .actionbar{bottom:160px}
body.has-player{padding-bottom:0}body.has-player .vfab{bottom:22px}
@media(max-width:640px){body:has(.player:not(.hide)){padding-bottom:calc(230px + env(safe-area-inset-bottom,0px))}body:has(.player:not(.hide)) .vfab{bottom:250px}body:has(.player:not(.hide)) .actionbar{bottom:240px}body.has-player .vfab{bottom:calc(16px + env(safe-area-inset-bottom,0px))}}
/* player: the portal's black bar with the yellow accent; expanded shows word-by-word captions */
.pl-spec{height:44px}.player.expanded .pl-spec{height:84px}
.pl-lyrics{grid-area:lyr;display:none;position:relative;height:min(36vh,300px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.player.expanded .pl-lyrics{display:block}
.pl-lyr-in{position:absolute;left:0;right:0;top:0;padding:40% 4px;transition:transform .55s cubic-bezier(.22,.9,.28,1);will-change:transform}
.lp{margin:0 0 16px;font:700 clamp(20px,2.6vw,28px)/1.35 Montserrat,Arial,sans-serif;letter-spacing:-.2px;color:#fff;opacity:.28;transition:opacity .4s}
.lp.now{opacity:1}.lp.past{opacity:.45}
.lw{color:rgba(255,255,255,.38);transition:color .25s ease,text-shadow .25s ease}
.lw.done{color:#fff}.lw.now{color:var(--brand);text-shadow:0 0 22px rgba(255,200,54,.45)}
@media(max-width:640px){.lp{font-size:21px}.pl-lyrics{height:min(34vh,260px)}}
@media(max-width:640px){.pl-spec{height:64px}.player.expanded .pl-spec{height:84px}}
.pl-lyr-in{padding:0 4px!important;top:0}
.vexpand{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line2);color:var(--txt);border-radius:99px;padding:6px 12px 6px 10px;font:700 12px Montserrat,Arial,sans-serif;cursor:pointer}.vexpand:hover{background:var(--hover)}.vexpand svg{width:15px;height:15px}

/* ---------- voice pop-up (inside the chat panel): same glowing purple look as the full-screen voice view ---------- */
.vmode.pop{position:absolute;inset:0;z-index:8;border-radius:inherit;padding:0;animation:fade .2s}
.vmode.pop::before{border-radius:inherit}
.vpanel:has(.vmode.pop){border-color:rgba(139,92,255,.6)!important;box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 90px rgba(139,92,255,.35)!important}
.vmode.pop .vmtop{padding:12px 14px}
.vmode.pop .vmstage{gap:10px;padding:0 16px}
.vmode.pop .vmorb{width:min(190px,44vw)}
.vmode.pop .vmtrans{font-size:16px;min-height:22px}
.vmode.pop .vmans{max-height:24vh;font-size:14px;padding:12px 14px}
.vmode.pop .vmbar{padding:8px 14px 14px;gap:10px}
.vmode.pop .vmmic{width:64px;height:64px}.vmode.pop .vmmic svg{width:26px;height:26px}
.vmode.pop .vmside{padding:9px 12px;font-size:11.5px}
.vmode.pop .vmvoices button{padding:5px 11px}
.vmode.pop .vmhint{font-size:11.5px;padding:0 16px 4px}
.vmode.pop .vmtype{width:calc(100% - 28px)}
.vmback{display:inline-flex;align-items:center;gap:4px;background:rgba(139,92,255,.18);border:0;color:#fff;border-radius:99px;padding:8px 14px 8px 8px;font:700 12px Montserrat,Arial,sans-serif;cursor:pointer}.vmback svg{width:16px;height:16px}
@media(max-width:640px){.vmode.pop .vmorb{width:min(170px,46vw)}.vmode.pop .vmans{max-height:26vh}}
/* captions a little smaller; nav items a little further apart */
.lp{font-size:clamp(16px,1.9vw,22px)!important}
@media(max-width:640px){.lp{font-size:17px!important}}
.side nav a{margin:4px 0}

/* =====================================================================================================================
   v5: Listen player = the purple glowing look; Listen and Viewy never move each other; voice screen conversation layout
   ===================================================================================================================== */
.player{background:linear-gradient(160deg,#1a1136 0%,#0e0a1c 70%);border:1px solid rgba(139,92,255,.4);box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 80px rgba(139,92,255,.22)}
.player.playing{animation:plglow 3.2s ease-in-out infinite}
@keyframes plglow{0%,100%{box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 70px rgba(139,92,255,.2)}50%{box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 110px rgba(139,92,255,.38)}}
.pl-play{background:linear-gradient(135deg,#FFE27A,#FFC836);box-shadow:0 6px 22px rgba(255,200,54,.35)}
.player.playing .pl-play{animation:plpulse 2.4s ease-in-out infinite}
@keyframes plpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,200,54,.35),0 6px 22px rgba(255,200,54,.3)}50%{box-shadow:0 0 0 10px rgba(255,200,54,0),0 6px 22px rgba(255,200,54,.3)}}
.pl-voices{background:rgba(139,92,255,.14);border-color:rgba(139,92,255,.35)}.pl-voices button{color:#cdbdff}.pl-voices button.on{background:linear-gradient(135deg,#9B6DFF,#6A3DEB);color:#fff}
.pl-speed{background:rgba(139,92,255,.14);border-color:rgba(139,92,255,.35);color:#e6dcff}
.pl-sub{color:#b9a8ee}.pl-time{color:#cdbdff}.pl-exp,.pl-x{color:#b9a8ee}.pl-exp:hover,.pl-x:hover{color:#fff}
.pl-prog{accent-color:#9B6DFF}
.lw.now{color:#FFE27A;text-shadow:0 0 24px rgba(255,200,54,.55)}.lw.done{color:#f1ecff}.lw{color:rgba(205,189,255,.4)}
@media(prefers-reduced-motion:reduce){.player.playing,.player.playing .pl-play{animation:none}}
/* desktop: the player lives bottom-left of the content, Viewy bottom-right; neither shifts the other */
@media(min-width:901px){
  .player{--pw:min(720px,calc(100vw - 48px));left:50%;transform:translateX(-50%);min-width:360px;width:var(--pw)}                  /* centred on its own */
  /* with the chat open it slides left only as far as needed to clear it (chat = 420px + 22px margin + gap) */
  body:has(.vpanel:not(.hide)) .player{--pw:min(720px,calc(100vw - 236px - 48px - 470px));left:min(50vw,calc(100vw - 470px - var(--pw) / 2))}
  body:has(.layout.collapsed):has(.vpanel:not(.hide)) .player{--pw:min(720px,calc(100vw - 68px - 48px - 470px))}
  body:has(.player:not(.hide)) .vfab{bottom:22px}
  body.embed .player{left:50%;transform:translateX(-50%)}
}
/* phones: the player is a bottom sheet; the Viewy button waits above it and steps aside while the sheet is expanded */
@media(max-width:900px){body:has(.player.expanded) .vfab{display:none}}
/* voice screen: orb on top, the conversation below it */
.vmode .vmstage{justify-content:flex-start;padding-top:8px;gap:12px}
.vmode .vmorb{width:min(260px,46vw);transition:width .5s cubic-bezier(.22,.9,.28,1);flex:0 0 auto}
.vmode.has .vmorb{width:min(150px,30vw)}.vmode.pop.has .vmorb{width:min(110px,28vw)}
.vmode .vmtrans{min-height:26px;font-size:18px}
.vmconv{flex:1;min-height:0;width:100%;max-width:780px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:6px 4px 14px;scroll-behavior:auto;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px);mask-image:linear-gradient(180deg,transparent 0,#000 18px)}
.vmq{align-self:flex-end;max-width:80%;background:linear-gradient(135deg,#9B6DFF,#6A3DEB);color:#fff;font:600 15px/1.4 'Open Sans',Arial,sans-serif;padding:10px 16px;border-radius:18px 18px 4px 18px}
.vma{align-self:flex-start;max-width:100%;background:rgba(23,18,41,.88);border:1px solid rgba(139,92,255,.3);border-radius:18px 18px 18px 4px;padding:14px 18px;font-size:15px;line-height:1.6;color:#f1ecff}
.vma p{margin:0 0 8px}.vma p:last-child{margin:0}.vma.err{border-color:rgba(255,107,112,.5)}
.vma.thinking{display:flex;gap:6px;align-items:center;padding:16px 20px}.vma.thinking i{width:8px;height:8px;border-radius:50%;background:#b794ff;animation:vdot 1s infinite}.vma.thinking i:nth-child(2){animation-delay:.15s}.vma.thinking i:nth-child(3){animation-delay:.3s}
.vmode .vsrc{margin-top:10px}.vmode .vlink{background:#0f0b1d;border:1px solid rgba(139,92,255,.3);color:#e6dcff}.vmode .vlink b{background:#FFC836;color:#000}.vmode .vcite{background:#FFC836;color:#000}
.vmode.pop .vmq{font-size:13.5px;padding:8px 13px}.vmode.pop .vma{font-size:13.5px;padding:11px 14px}
.vmode .vmbar{gap:12px}
@media(max-width:640px){.vmode .vmorb{width:min(190px,48vw)}.vmode.has .vmorb{width:min(120px,30vw)}.vmq,.vma{font-size:14.5px}}
/* dictation button in the chat box */
.vform .vmicbtn{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--txt);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.vform .vmicbtn svg{width:18px;height:18px}.vform .vmicbtn:hover{background:var(--hover)}
.vform .vmicbtn.rec{background:var(--dn);border-color:var(--dn);color:#fff;animation:vrec 1.2s ease-in-out infinite}
@keyframes vrec{0%,100%{box-shadow:0 0 0 0 rgba(198,40,40,.5)}50%{box-shadow:0 0 0 9px rgba(198,40,40,0)}}

/* =====================================================================================================================
   v6: icon-only toolbar buttons, spacing, tighter captions, two-row phone ticker (pinned on top, scrolling below)
   ===================================================================================================================== */
.btn.iconb{padding:0;width:38px;height:36px;display:inline-flex;align-items:center;justify-content:center}
.btn.iconb .ico,.btn.iconb svg{width:18px;height:18px}.btn.iconb .spark{font-size:17px;line-height:1}
.btn.iconb .spark.busy{animation:spin 1.1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.layout.collapsed .side nav a{margin:9px 0}
.pl-lyr-in{padding:30% 4px 40%}
@media(max-width:700px){
  .ticker{display:flex;flex-direction:column}
  .ticker .pins{display:flex;border-right:0;border-bottom:1px solid #1f1f1f;position:relative;padding-right:46px;overflow:visible}
  .ticker .pins .tk{padding:6px 12px;gap:6px}.pins .tk .s{font-size:10px}.pins .tk .p{font-size:11px}.pins .tk .c{font-size:10px}
  .ticker .pgroup{position:static;border-right:1px solid #2a2a2a}
  .ticker .pgroup .subs{position:absolute;left:0;right:0;top:100%;max-width:none;z-index:5;box-shadow:0 10px 24px rgba(0,0,0,.55)}
  .ticker .pins .expander{padding:0 8px}
  .ticker .row{padding-right:48px;flex:0 0 auto;width:100%}
  .ticker .track .tk{padding:6px 11px;gap:5px}.ticker .tk .s{font-size:10px}.ticker .tk .p{font-size:11px}.ticker .tk .c{font-size:10px}
  .mkbtn{top:0;bottom:auto;height:30px;padding:0 10px 0 14px;z-index:6}
}

/* nav: pinned to the window (below the top bar) for the whole page, never ending where the content ends; scrolls if its items outgrow the screen */
@media(min-width:901px){
  .side{position:fixed;left:0;top:68px;bottom:0;height:auto;z-index:60}
  .shell-body{padding-left:236px;transition:padding-left .22s ease}.layout.collapsed .shell-body{padding-left:68px}
}
.side nav{padding-bottom:28px;overscroll-behavior:contain}

/* grids keep fixed card sizes (extra width stays empty instead of stretching the cards); day performance wraps instead of sliding */
.stories.grid{grid-template-columns:repeat(auto-fill,minmax(310px,360px));justify-content:start}
.mxbody.grid .mxitems{grid-template-columns:repeat(auto-fill,minmax(200px,230px));justify-content:start}
.dwgrid{display:flex;flex-wrap:wrap;overflow:visible;gap:10px}
.dwcard{flex:0 0 auto;width:170px;min-width:0}.dwcard.big{width:230px}
@media(max-width:900px){.stories.grid{grid-template-columns:1fr}.mxbody.grid .mxitems{grid-template-columns:repeat(2,1fr)}.dwcard,.dwcard.big{width:calc(50% - 5px)}}

/* Listen / AI curate / Refresh are plain buttons; the ✦ is the same glyph and colour as in the "✦ AI curated" tab */
.btn.listen .ico{color:inherit}
.btn.aicur .spark{color:var(--mut);font-size:15px}.btn.aicur:hover .spark{color:var(--txt)}
/* grids scale to the full width of the page */
.stories.grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));justify-content:normal}
.mxbody.grid .mxitems{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));justify-content:normal}
/* day performance: a wrapped grid of several rows so everything is visible at once */
.dwgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.dwcard,.dwcard.big{width:auto;min-width:0}.dwcard.big{grid-column:span 2}
@media(max-width:900px){.stories.grid{grid-template-columns:1fr}.mxbody.grid .mxitems{grid-template-columns:repeat(2,1fr)}.dwgrid{grid-template-columns:repeat(2,1fr)}.dwcard.big{grid-column:span 2}.dwcard,.dwcard.big{width:auto}}

/* grid cards keep one fixed size everywhere (loading, loaded, any window width, nav open or collapsed); spare width stays empty */
.stories.grid{grid-template-columns:repeat(auto-fill,340px);justify-content:start;gap:16px;align-items:start}
.stories.grid .story.skel{height:170px;width:340px;margin:0;padding:0}
.mxbody.grid .mxitems{grid-template-columns:repeat(auto-fill,220px);justify-content:start}
.dwgrid{grid-template-columns:repeat(auto-fill,170px);justify-content:start}.dwcard.big{grid-column:span 2}
@media(max-width:900px){.stories.grid{grid-template-columns:1fr}.stories.grid .story.skel{width:auto}.mxbody.grid .mxitems{grid-template-columns:repeat(2,1fr)}.dwgrid{grid-template-columns:repeat(2,1fr)}}

/* the orb's rings and glow reach beyond the orb: let them draw, and leave room under the header so they are never cut off */
.vmode .vmstage{overflow:visible;padding-top:64px}
.vmode.has .vmstage{padding-top:44px}
.vmode.pop .vmstage{padding-top:48px}.vmode.pop.has .vmstage{padding-top:34px}

/* phones: the full-screen voice mode is as tall as the visible screen (dvh; JS refines it for the keyboard) and its buttons keep clear of the home bar */
.vmode:not(.pop){height:100vh;height:100dvh;bottom:auto}
.vmode .vmbar{padding-bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px));flex:0 0 auto;position:relative;z-index:2}
.vmode.pop{height:auto;bottom:0}

/* grid cards are all the same size: one fixed width, and every row as tall as the tallest card (no uneven heights, nothing scaling with the window) */
.stories.grid{grid-template-columns:repeat(auto-fill,340px);justify-content:start;align-items:stretch;grid-auto-rows:1fr}
.stories.grid .story{height:100%;box-sizing:border-box;overflow:hidden}
.stories.grid .story h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stories.grid .story p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.stories.grid .story.skel{height:auto;min-height:170px}
.mxbody.grid .mxitems{grid-template-columns:repeat(auto-fill,220px);justify-content:start;align-items:stretch;grid-auto-rows:1fr}
@media(max-width:900px){.stories.grid{grid-template-columns:1fr;grid-auto-rows:auto}.mxbody.grid .mxitems{grid-template-columns:repeat(2,1fr)}}

/* Narrate: a small button on top of an answer that reads it aloud */
.vtop{display:flex;justify-content:flex-end;margin:-2px 0 6px}
.narr{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:transparent;color:var(--mut);border-radius:99px;padding:3px 10px 3px 8px;font:700 11px Montserrat,Arial,sans-serif;cursor:pointer}
.narr svg{width:14px;height:14px}.narr:hover{color:var(--txt);background:var(--hover)}
.narr.busy{opacity:.7;cursor:progress}.narr.on{color:#000;background:var(--brand);border-color:var(--brand)}
.vmode .narr{border-color:rgba(139,92,255,.5);color:#cdbdff;background:rgba(139,92,255,.14)}.vmode .narr:hover{color:#fff}
.vmode .narr.on{background:linear-gradient(135deg,#FFD65A,#FFC836);color:#1a1200;border-color:transparent}

/* sources: a closed dropdown under every answer */
.vdd{margin-top:10px}
.vdd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 12px;border:1px solid var(--line2);border-radius:99px;font:700 11.5px Montserrat,Arial,sans-serif;color:var(--mut);user-select:none}
.vdd summary::-webkit-details-marker{display:none}
.vdd summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.vdd[open] summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.vdd summary:hover{color:var(--txt);background:var(--hover)}
.vdd summary b{display:inline-flex;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--ink);color:var(--ink-inv);font:700 10px Montserrat,Arial,sans-serif;align-items:center;justify-content:center}
.vdd .vsrc{margin-top:8px}
.vmode .vdd summary{border-color:rgba(139,92,255,.5);color:#cdbdff;background:rgba(139,92,255,.12)}.vmode .vdd summary:hover{color:#fff}
.vmode .vdd summary b{background:#FFC836;color:#000}

/* first-visit tour: spotlight + card */
.tour-ov{position:fixed;inset:0;z-index:120}
.tour-hole{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(8,8,10,.62);outline:2px solid var(--brand);outline-offset:0;pointer-events:none;transition:left .25s,top .25s,width .25s,height .25s}
.tour-card{position:fixed;width:min(360px,calc(100vw - 24px));background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 24px 60px rgba(0,0,0,.4);display:grid;gap:8px;animation:pop .18s}
.tour-card h3{margin:0;font-size:15px}.tour-card p{margin:0;color:var(--mut);font-size:13.5px;line-height:1.55}
.tour-count{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:700}
.tour-act{display:flex;gap:8px;align-items:center;margin-top:6px}
.tour-skip{background:none;border:0;color:var(--mut);font:inherit;font-size:12.5px;cursor:pointer;padding:6px 2px;text-decoration:underline}
@media(prefers-reduced-motion:reduce){.tour-hole{transition:none}}

.auth .hero .brandrow{display:flex;align-items:center;gap:14px}.auth .hero .vname{font:500 47px/34px Montserrat,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;border-left:2px solid var(--brand);padding-left:14px}