/* Interview Studio — premium light theme (teal + LinkedIn blue). Loaded after app.css on the app and the website.
   Clean white surfaces, slate text, teal for primary actions, LinkedIn blue for links and secondary accents.
   The live console stays dark navy so answers are easy to read during a call. */
:root, :root[data-theme="dark"]{
  --bg:#F7F9FC; --surface:#FFFFFF; --sunk:#F1F5F9; --line:#E3E8EF; --ink:#0F172A; --muted:#64748B;
  --accent:#0A66C2; --accent-ink:#FFFFFF; --accent-soft:#E8F1FB; --accent-2:#0A66C2; --accent-2-soft:#E8F1FB;
  --onair:#E5484D; --onair-soft:#FDECEC; --good:#15803D; --good-soft:#E6F6EC; --warn:#B45309; --warn-soft:#FDF3E2; --bad:#DC2626; --bad-soft:#FDECEC;
  --rail:#FFFFFF; --rail-ink:#334155; --rail-hi:#0F172A; --rail-line:#E3E8EF;
  --console:#0F172A; --console-2:#1A2436; --console-line:#2B3850; --console-ink:#F1F5F9; --console-muted:#94A3B8;
  --f-display:"Figtree","Segoe UI",system-ui,sans-serif;
  --r:16px; --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(15,23,42,.06);
  --grad:linear-gradient(180deg,#3A93EC 0%,#0A66C2 55%,#0856A6 100%);
  --gloss:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.08);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#F7F9FC; --surface:#FFFFFF; --sunk:#F1F5F9; --line:#E3E8EF; --ink:#0F172A; --muted:#64748B;
  --accent:#0A66C2; --accent-ink:#FFFFFF; --accent-soft:#E8F1FB;
  --onair:#E5484D; --onair-soft:#FDECEC; --good:#15803D; --good-soft:#E6F6EC; --warn:#B45309; --warn-soft:#FDF3E2; --bad:#DC2626; --bad-soft:#FDECEC;
  --rail:#FFFFFF; --rail-line:#E3E8EF; --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(15,23,42,.06); color-scheme:light}}
h1,h2,h3,h4{font-weight:750;letter-spacing:-.02em}
a{color:var(--accent-2)}
::selection{background:#CFE3F8}

/* ---------- app shell ---------- */
.rail{background:var(--rail);border-right:1px solid var(--rail-line);box-shadow:1px 0 0 rgba(15,23,42,.02)}
.logo{color:var(--ink)} .logo small{color:#94A3B8}
.logo .m{background:var(--grad);box-shadow:var(--gloss),0 6px 16px rgba(10,102,194,.35)}
.rail .grp{color:#94A3B8;font-weight:600}
.rail a.nav{color:#334155;font-weight:600}
.rail a.nav svg{opacity:.7}
.rail a.nav:hover{background:#F1F5F9;color:#0F172A}
.rail a.nav[aria-current="page"]{background:linear-gradient(90deg,#E8F1FB,#F4F9FE);color:#0A66C2;box-shadow:inset 3px 0 0 #0A66C2}
.rail a.nav[aria-current="page"] svg{opacity:1}
.rail a.nav .tag{color:#94A3B8} .rail a.nav .tag.live{color:var(--onair)}
.rail .foot{border-top-color:var(--rail-line);color:#475569}
.topbar{background:rgba(255,255,255,.88);border-bottom:1px solid var(--line)}
.card{border-color:var(--line);box-shadow:var(--shadow)}
.card:hover{box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 28px rgba(15,23,42,.08)}

/* ---------- buttons, pills, chips ---------- */
.btn{border-color:#D8DFE8;font-weight:650;transition:background .15s,box-shadow .15s,transform .15s}
.btn:hover{background:#F1F5F9}
.btn.pri{background:var(--accent);border-color:var(--accent)}
.btn.pri{background:var(--grad);box-shadow:var(--gloss),0 4px 12px rgba(10,102,194,.22)}
.btn.pri:hover{background:var(--grad);filter:brightness(1.07)}
.btn.air{background:var(--grad);border-color:transparent;box-shadow:var(--gloss),0 6px 18px rgba(10,102,194,.3)}
.btn.air:hover{background:var(--grad);filter:brightness(1.06);transform:translateY(-1px)}
.btn.ghost{color:var(--accent-2)} .btn.ghost:hover{background:var(--accent-2-soft)}
.pill.acc{background:#E8F1FB;color:#0A66C2}
.pill.air{background:#EEF4FC;color:#0856A6}
.chip[aria-pressed="true"]{background:var(--grad);border-color:#0A66C2;box-shadow:var(--gloss)}
.chip:hover{border-color:var(--accent)}
.meter i{background:var(--grad)!important}

/* ---------- live console (dark, for reading during calls) ---------- */
.console .btn.air{background:var(--grad);border-color:transparent}
.console .btn.pri{background:#0A66C2;border-color:#0A66C2}

/* ---------- website ---------- */
header.nav{background:rgba(255,255,255,.9)!important;border-bottom:1px solid var(--line)!important}
header.nav a.l{color:#334155!important} header.nav a.l:hover{color:var(--accent-2)!important}
header.nav .logo{color:var(--ink)}
.acct .who{color:#334155!important} .acct .av{background:var(--grad)!important}
.acct button{border-color:#CBD5E1!important;color:#334155!important}
.hero{background:radial-gradient(800px 420px at 88% 0%,rgba(10,102,194,.16),transparent 65%),radial-gradient(900px 520px at 0% 0%,rgba(58,147,236,.14),transparent 60%),linear-gradient(180deg,#FFFFFF,#F2F7FD)!important;color:var(--ink)!important;border-bottom:1px solid var(--line)}
.hero h1{color:#0F172A!important}
.hero h1 em{background:linear-gradient(90deg,#0A66C2,#3A93EC)!important;-webkit-background-clip:text!important;background-clip:text!important}
.hero p.lead{color:#475569!important}
.hero .fine{color:#64748B!important}
.hero .cta .btn:not(.air){background:#fff!important;color:#0F172A!important;border-color:#CBD5E1!important}
.hero .eyebrow,.hero .pill{color:#0A66C2}
.stage .console{box-shadow:0 30px 70px rgba(15,23,42,.28)}
.band{background:#FFFFFF!important;color:var(--ink)!important;border-block:1px solid var(--line)}
.band h2{color:#0F172A!important} .band .sub{color:var(--muted)!important}
.band .card{background:#F8FAFC!important;border-color:var(--line)!important;color:var(--ink)!important}
.band .card *{color:inherit} .band .card .note,.band .card p{color:#475569!important}
.flow .n{color:var(--accent)!important;font-weight:600}
.eyebrow{color:var(--accent)}
.dv-title{background:linear-gradient(90deg,#0A66C2,#3A93EC)!important;-webkit-background-clip:text!important;background-clip:text!important}
.dv-badge{background:var(--grad)!important}
.dv-steps li{background:#FFFFFF!important;border-color:var(--line)!important;box-shadow:var(--shadow)}
.dv-steps li::before{background:var(--grad)!important}
.dv-ch b{color:var(--accent-2)!important} .dv-ch:hover{border-color:var(--accent)!important}
.srcgrid span{box-shadow:var(--shadow)}
.acc-btn.in{background:var(--grad)}
/* glossy blue top bar strip and stat cards */
.topbar{box-shadow:0 1px 0 rgba(10,102,194,.06)}
.stat .v,.score{color:#0F172A}
.dv-steps li::before,.dv-badge{box-shadow:var(--gloss)}
.eyebrow{color:#0A66C2}
/* ---------- rich SaaS polish ---------- */
.rail .grp,.stat .k,.eyebrow,.topbar .crumb,.card .k{font-family:var(--f-body)!important;font-weight:700;letter-spacing:.08em;font-size:.68rem}
.rail .grp{color:#94A3B8}
.nextcard{background:radial-gradient(600px 220px at 100% 0%,rgba(58,147,236,.16),transparent 70%),linear-gradient(135deg,#FFFFFF 0%,#F3F8FE 100%)!important;border:1px solid #D6E6F8!important;box-shadow:0 1px 2px rgba(10,102,194,.06),0 14px 34px rgba(10,102,194,.10)!important}
.nextcard svg circle:nth-of-type(2){stroke:#0A66C2}
.card.stat{position:relative;overflow:hidden}
.card.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.card.stat .v{font-weight:800;letter-spacing:-.02em}
.view>.head h1{font-weight:800;letter-spacing:-.03em}
.topbar .pill{font-family:var(--f-body);font-weight:700}
.btn{border-radius:11px}
.card{border-radius:18px}
.acc-btn.in{box-shadow:var(--gloss),0 4px 12px rgba(10,102,194,.3)}

/* ---------- brand mark (v4): gradient chat-bubble icon + two-tone wordmark ---------- */
.logo{gap:11px;align-items:center}
.logo .m{width:40px;height:40px;border-radius:12px;background:none;box-shadow:0 8px 20px rgba(37,99,235,.32),0 2px 4px rgba(109,40,217,.18);flex:none;display:block;transition:transform .25s ease,box-shadow .25s ease}
.logo .m svg{display:block;border-radius:12px}
.logo:hover .m{transform:translateY(-1px) rotate(-3deg);box-shadow:0 12px 26px rgba(37,99,235,.38),0 2px 4px rgba(109,40,217,.2)}
.logo .wm{display:flex;flex-direction:column;line-height:1.1}
.logo .wm b{font-family:var(--f-display);font-weight:800;font-size:1.08rem;letter-spacing:-.02em;color:var(--ink)}
.logo .wm b em{font-style:normal;background:linear-gradient(90deg,#2563EB,#6D28D9 70%,#A855F7);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .wm small{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-family:var(--f-mono,ui-monospace,monospace);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:#64748B}
.logo .wm small i{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#38BDF8,#6D28D9);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
@media (prefers-reduced-motion:reduce){.logo .m{transition:none}.logo:hover .m{transform:none}}
/* upgrade prompt */
.upsell{border:1px solid #CFE0F5!important;background:radial-gradient(500px 200px at 100% 0%,rgba(58,147,236,.16),transparent 70%),linear-gradient(135deg,#FFFFFF,#F2F7FD)!important;box-shadow:0 14px 34px rgba(10,102,194,.12)!important}
.upsell h2{font-size:1.35rem}
.upsell-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.upsell-opt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.upsell-opt:hover{transform:translateY(-2px);border-color:#0A66C2;box-shadow:0 10px 24px rgba(10,102,194,.14)}
.upsell-opt b{font-size:1.02rem} .upsell-opt span{font-weight:800;color:#0A66C2;font-size:1.1rem} .upsell-opt small{color:var(--muted);line-height:1.35}
.upsell-opt.hl{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--gloss),0 10px 24px rgba(10,102,194,.3)}
.upsell-opt.hl span,.upsell-opt.hl small{color:#fff}
@media (max-width:700px){.upsell-grid{grid-template-columns:1fr}}
.card.picked{outline:3px solid #0A66C2;outline-offset:3px;box-shadow:0 18px 40px rgba(10,102,194,.22)!important;animation:pickpulse 1.4s ease-out 2}
@keyframes pickpulse{0%{outline-offset:12px;outline-color:rgba(10,102,194,0)}100%{outline-offset:3px;outline-color:#0A66C2}}
/* welcome / choose plan */
.welcome{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.whead{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:10px}
.whead h1{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:22ch}
.whead .sub{color:var(--muted);max-width:60ch;font-size:1.05rem}
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.wplan{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.wplan.hl{border:2px solid #0A66C2;box-shadow:0 18px 44px rgba(10,102,194,.18);transform:translateY(-6px);background:linear-gradient(180deg,#F3F8FE,#FFFFFF 40%)}
.wbadge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-weight:800;font-size:.78rem;padding:5px 14px;border-radius:999px;box-shadow:var(--gloss)}
.wprice{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;color:#0F172A}.wprice small{font-size:.95rem;color:var(--muted);font-weight:600;margin-left:4px}
.wplan ul{margin:4px 0 8px;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:#334155;flex:1}
.wplan .btn{width:100%}
.wmore{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.wlink{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font:inherit;font-weight:650;color:#0A66C2;cursor:pointer;text-decoration:none}
.wlink:hover{border-color:#0A66C2}
@media (max-width:820px){.wgrid{grid-template-columns:1fr}.wplan.hl{transform:none}}
.signed-out #bell,.signed-out #wCredits,.signed-out #wMinutes,.signed-out #wTop,.signed-out #wMode{display:none!important}

/* ---------- Answer view: text size, bold, layouts, full screen ---------- */
.answers .acard .aq{font-size:1.06em;line-height:1.35}
.answers .acard .body{font-size:1em;line-height:1.6}
.answers .hearing{font-size:.92em}
.console.abold .answers .acard .body{font-weight:600;color:#fff}
.console.abold .answers .acard .aq{font-weight:800}
.viewbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--console-line)}
.viewbar .vgrp{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.viewbar .vlab{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--console-muted)}
.vseg{display:inline-flex;background:#0F1428;border:1px solid var(--console-line);border-radius:10px;padding:3px;gap:2px}
.vseg button{all:unset;cursor:pointer;min-width:30px;text-align:center;padding:5px 10px;border-radius:7px;font-size:.82rem;font-weight:700;color:var(--console-muted);transition:background .15s,color .15s}
.vseg button:hover{color:#fff;background:#1A2140}
.vseg button.on{background:linear-gradient(180deg,#3A93EC,#0A66C2);color:#fff;box-shadow:0 2px 8px rgba(10,102,194,.45)}
.vseg button:focus-visible{outline:2px solid #3A93EC}
/* layouts */
.console.lay-focus .cgrid{grid-template-columns:1fr}
.console.lay-focus .cgrid>.pane:not(.apane){display:none}
.console.lay-focus .answers,.console.lay-wide .answers{max-height:calc(100vh - 260px)}
.console.lay-focus .answers .acard{padding:20px 22px}
.console.lay-focus .apane .keys{display:none}
/* full screen: only the bar, questions and answers */
.console:fullscreen{border-radius:0;padding:16px 22px;overflow:auto}
.console:fullscreen>.pane,.console:fullscreen>.card{display:none}
.console:fullscreen .cgrid{flex:1;min-height:0}
.console:fullscreen .answers{max-height:calc(100vh - 210px)}
.console:fullscreen.lay-split .answers,.console:fullscreen.lay-wide .answers{max-height:calc(100vh - 210px)}
.console:fullscreen .tscript{max-height:calc(100vh - 260px)}
@media (max-width:900px){.console .cgrid{grid-template-columns:1fr!important}.vsplit{display:none!important}.viewbar{justify-content:flex-start}}
.answers.pbold .acard .body{font-weight:600;color:#fff}

/* draggable divider between transcript and answers */
.console .cgrid{grid-template-columns:minmax(0,var(--tw,42%)) 14px minmax(0,1fr);column-gap:0}
.console.lay-focus .cgrid{grid-template-columns:1fr}
.console.lay-focus .vsplit{display:none}
.vsplit{cursor:col-resize;display:flex;align-items:center;justify-content:center;touch-action:none;border-radius:8px}
.vsplit i{width:4px;height:56px;border-radius:4px;background:var(--console-line);transition:background .15s,height .15s}
.vsplit:hover i,.vsplit.drag i{background:linear-gradient(180deg,#3A93EC,#6D5AE6);height:90px}
.cgrid>.pane{container-type:inline-size}
@container (max-width:340px){.tline{grid-template-columns:1fr;gap:4px}.tline .who{align-self:flex-start}.cgrid>.pane .row:has(#lType){flex-direction:column;align-items:stretch}}
/* end-of-interview card + honest feedback report */
.endcard{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:14px;background:linear-gradient(135deg,rgba(58,147,236,.18),rgba(109,90,230,.18));border:1px solid rgba(125,180,255,.35)}
.endcard b{display:block;font-size:1.05rem;color:#fff}.endcard span{font-size:.85rem;color:var(--console-muted)}
.fbcard{border:1px solid #CFE0F7;background:linear-gradient(180deg,#F7FAFF,#fff)}
.fbtop{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.fbring{width:118px;height:118px;border-radius:50%;flex:none;display:grid;place-items:center;align-content:center;background:radial-gradient(closest-side,#fff 78%,transparent 79%),conic-gradient(var(--c) var(--p),#E5ECF6 0)}
.fbring b{font-size:2rem;font-weight:900;color:var(--c);line-height:1}.fbring span{font-size:.8rem;color:#64748B;font-weight:700}
.fbverdict{font-size:1.02rem;line-height:1.55;color:#1E293B;margin-top:4px}
.fbareas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0}
.fbarea{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:12px 14px}
.fbarea p{font-size:.86rem;color:#475569;margin-top:6px;line-height:1.45}
.fbbar{height:7px;border-radius:6px;background:#EEF2F7;margin-top:8px;overflow:hidden}.fbbar i{display:block;height:100%;border-radius:6px}
.fbimps{display:flex;flex-direction:column;gap:10px;margin:8px 0 6px}
.fbimp{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:12px 14px}
.fbimp .n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,#3A93EC,#6D5AE6)}
.fbimp p{margin-top:3px;color:#334155;line-height:1.5}.fbimp .say{color:#0A66C2;font-style:italic}
/* royal navy console (live copilot + floating overlay) — replaces the near-black */
:root{--console:#0B1F4E;--console-2:#10296A;--console-line:#2A4A92;--console-muted:#A9B8DD}
.console{background:radial-gradient(1200px 420px at 10% -20%,#1D4AA8 0%,transparent 60%),radial-gradient(900px 500px at 100% 120%,#2B2E8F 0%,transparent 60%),var(--console)}
.acard{background:#0D2459}
.acard.latest{border-color:#3A93EC;box-shadow:0 0 0 1px #3A93EC inset,0 10px 30px rgba(10,40,120,.35)}
.console .btn,.onair,.kbd,.acard .body code{background:#163579}
.console .btn:hover,.vseg button:hover{background:#1D418F}
.console textarea,.console input,.console select,.vseg{background:#0D2459}
.acard .body pre{background:#081A44}
/* Android app (Google Play): no prices, buy buttons or checkout links */
.inapp #ajhb-host,.inapp [data-topup],.inapp [data-wbuy],.inapp [data-buy],.inapp .upsell-grid,.inapp a[href^="#plans-"],.inapp [data-goto^="topup"],.inapp [data-goto="plans"],.inapp #wTop,.inapp .price-tag,.inapp [href*="checkout"]{display:none!important}
@media (max-width:600px){.viewbar{padding:6px 8px;gap:6px}.viewbar .vlab{display:none}.viewbar [data-vw^="lay:"]{display:none}.viewbar .vseg:has([data-vw^="lay:"]){display:none}.vseg button{padding:5px 8px}}
/* ---------- crisp, high-contrast answers ---------- */
.acard{background:#071739;border-color:#24448C}
.acard .body{color:#FFFFFF;font-weight:500;letter-spacing:.005em}
.acard .aq{color:#FFE7A3}
.acard.latest{background:#06132F}
.console.abold .answers .acard .body,.answers.pbold .acard .body{font-weight:700;color:#fff}
.acard .meta{color:#BFD0F5}
.acard .via{color:#7BE3C1;font-weight:700}
.viasel{font:inherit;font-size:.68rem;padding:2px 6px;border-radius:7px;width:auto;max-width:150px;color:#fff}
.cvbar{display:inline-flex;gap:6px;margin-left:10px;flex-wrap:wrap}
.cvbar select{width:auto;max-width:190px;padding:4px 8px;font-size:.78rem;border-radius:8px;color:#fff}
.apane>.row:first-child{flex-wrap:wrap;gap:6px}
/* ---------- stacked layout (phones, tablets, narrow windows; normal and full screen) ----------
   transcript on top kept small, a drag bar to resize it, answers take the rest */
@media (max-width:900px){
  .console .cgrid{display:flex!important;flex-direction:column;gap:0}
  .console .vsplit{display:flex!important;cursor:row-resize;height:22px;margin:2px 0}
  .console .vsplit i{width:70px;height:5px}
  .console .vsplit:hover i,.console .vsplit.drag i{height:6px;width:110px;background:linear-gradient(90deg,#3A93EC,#6D5AE6)}
  .console.lay-focus .vsplit{display:none!important}
  .console .cgrid>.pane:not(.apane){padding:10px 12px;gap:8px}
  .console .tscript{max-height:var(--th,14vh)!important;min-height:44px;font-size:.86rem}
  .console .answers{max-height:none!important;height:max(48vh,calc(100dvh - var(--th,14vh) - 300px));overflow-y:auto}
  .console.lay-focus .answers{height:max(55vh,calc(100dvh - 230px))}
  .console:fullscreen{padding:10px 12px}
  .console:fullscreen .answers{height:calc(100dvh - var(--th,14vh) - 200px)}
  .console:fullscreen.lay-focus .answers{height:calc(100dvh - 150px)}
  .apane .keys{display:none}
}
@media (max-width:600px){.viewbar [data-vw^="lay:"]{display:inline-block!important}.viewbar .vseg:has([data-vw^="lay:"]){display:inline-flex!important}.viewbar .vgrp{gap:6px}.vseg button{padding:5px 7px;font-size:.76rem}}
/* ---------- profile: CV / JD slots ---------- */
.slotbox{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px;background:#F8FBFF}
.slottabs{display:flex;gap:6px;flex-wrap:wrap}
.stab{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;min-width:64px;padding:7px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:.86rem;color:#334155}
.stab small{font-weight:600;font-size:.68rem;color:#64748B;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stab.has{border-color:#10B981;color:#047857}
.stab.on{background:linear-gradient(180deg,#3A93EC,#0A66C2);border-color:#0A66C2;color:#fff}.stab.on small{color:#DCEBFF}
hr.sep{border:0;border-top:1px solid var(--line);margin:6px 0}
@media (max-width:900px){.console .cgrid>.pane{min-height:0!important}.console .cgrid>.pane:not(.apane) .empty-c{display:none}}
@media (max-width:600px){
  .viewbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:5px 6px;gap:6px}.viewbar::-webkit-scrollbar{display:none}
  .viewbar .vgrp{flex-wrap:nowrap;flex:none}
  .apane h4{display:none}.cvbar{margin-left:0;width:100%}.cvbar select{flex:1;max-width:none}
  .acard .meta{gap:4px}.acard{padding:12px}
}
/* ---------- answers header: one slim row; current answer big, earlier ones compact ---------- */
.apane .ahead{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.apane .ahead h4{margin:0;cursor:help}
.viewbar.slim{flex:1;justify-content:flex-end;padding:0;border:0;background:none;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.viewbar.slim::-webkit-scrollbar{display:none}
.viewbar.slim .vlab{display:none}
.viewbar.slim .vgrp{gap:6px;flex-wrap:nowrap;flex:none}
.viewbar.slim .vseg{padding:2px;border-radius:9px}
.viewbar.slim .vseg button{padding:3px 8px;font-size:.74rem;min-width:22px}
.apane .cvbar{margin-left:0}
.apane .cvbar select{padding:3px 6px;font-size:.74rem}
.answers{gap:10px}
.answers .acard.latest{padding:18px 20px;gap:12px;background:#050F29;border-width:2px}
.answers .acard.latest .aq{font-size:1.18em;line-height:1.35}
.answers .acard.latest .body{font-size:1.12em;line-height:1.65;color:#fff}
.answers .acard.older{opacity:.62;padding:9px 12px;gap:5px;cursor:pointer;transition:opacity .15s}
.answers .acard.older:hover,.answers .acard.older.open{opacity:.95}
.answers .acard.older .aq{font-size:.86em}
.answers .acard.older .body{font-size:.84em;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.answers .acard.older.open .body{display:block;-webkit-line-clamp:unset}
.answers .acard.older .meta .btn{padding:2px 6px}
.olderlab{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--console-muted);margin:6px 2px -2px}
.console:not(.lay-focus) .answers{max-height:calc(100vh - 220px)}
@media (max-width:600px){.apane .ahead h4{display:none}.apane .cvbar{width:100%}}
@media (max-width:900px){.console .answers{height:max(62vh,calc(100dvh - var(--th,14vh) - 220px))}}
.viewbar.slim{flex-wrap:wrap;overflow:visible;justify-content:flex-end}
@media (max-width:900px){.viewbar.slim{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}}
/* ---------- phones during a live session: page header hidden, one compact control row, answers fill the screen ---------- */
@media (max-width:900px){
  .view:has(#lStop)>.head{display:none}
  .console{scroll-margin-top:64px}
  .console:has(#lStop){padding:10px;gap:8px;border-radius:14px}
  .console .bar:has(#lStop){gap:6px;flex-wrap:nowrap}
  .console .bar:has(#lStop) .status{gap:6px;flex:none}
  .console .bar:has(#lStop) .levels{display:none}
  .console .bar:has(#lStop) .row{gap:5px;flex-wrap:nowrap;margin-left:auto}
  .console .bar:has(#lStop) .row .btn{font-size:0;padding:8px 10px;gap:0}
  .console .bar:has(#lStop) .row .btn svg{width:18px;height:18px}
  .console .bar:has(#lStop) #lNow{font-size:.82rem;gap:4px}
  .console .bar:has(#lStop) #lShot::before{content:"📷";font-size:16px}
  .console:has(#lStop) .cgrid>.pane{padding:8px 10px;gap:6px}
  .cgrid>.pane .row:has(#lType){flex-direction:row!important;align-items:center!important}
  #lType{padding:7px 10px;font-size:.85rem}#lTypeGo{padding:7px 10px}
  .console:has(#lStop) .answers{height:max(52vh,calc(100dvh - var(--th,14vh) - 270px))}
  .console:has(#lStop).lay-focus .answers{height:calc(100dvh - 190px)}
  .acard .meta .mt{display:none}
  .answers .acard.latest{padding:12px 14px;gap:8px}
  .acard .meta{align-items:center}
  .acard .meta>.row{margin-left:auto}
}
@media (max-width:900px){
  .console .bar:has(#lStop) #clock,.console .bar:has(#lStop) #airTxt{display:none}
  .console .bar:has(#lStop) .onair{padding:6px 8px}
  .console .bar:has(#lStop) .row .btn{padding:8px 9px}
  .console .bar:has(#lStop) #lNow{padding:8px 11px}
  .console:has(#lStop) .tline{grid-template-columns:auto minmax(0,1fr)!important;gap:6px!important;align-items:baseline}
  .console:has(#lStop) .tline .who{font-size:.58rem;padding:2px 5px}
  .console:has(#lStop) .tline .txt{font-size:.84rem}
  .acard .viasel{display:none}
}
/* ---------- laptop during a live session: header hidden, console on top, panes fill the screen ---------- */
.view:has(#lStop)>.head{display:none}
.console{scroll-margin-top:72px}
@media (min-width:901px){
  .console:has(#lStop){padding:12px 14px;gap:10px}
  .console:has(#lStop) .bar .levels .pill{display:none}
  .console:has(#lStop) .bar .btn{padding:7px 12px;font-size:.86rem}
  .console:has(#lStop) .cgrid>.pane{padding:10px 12px}
  .console:has(#lStop) .answers{max-height:none;height:calc(100vh - 210px);min-height:360px}
  .console:has(#lStop) .tscript{max-height:none;height:calc(100vh - 290px);min-height:200px}
  .console:has(#lStop).lay-focus .answers{height:calc(100vh - 190px)}
}
.acard .meta{flex-wrap:nowrap;align-items:center}
.acard .meta>span:first-child{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
.acard .meta>.row{flex:none}
.acard .viasel{padding:1px 4px;font-size:.66rem;max-width:130px}
/* ---------- Ask by voice + Mic lock ---------- */
#lAsk.rec{background:linear-gradient(180deg,#EF4444,#B91C1C)!important;border-color:#EF4444;color:#fff;animation:vapulse 1.2s infinite}
#lMicLock.locked{background:#7F1D1D!important;border-color:#EF4444;color:#FECACA}
@keyframes vapulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}
.lvl.muted b{opacity:.25}.lvl.muted{color:#F87171;text-decoration:line-through}
.vapill{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999;display:flex;gap:12px;align-items:flex-start;max-width:min(680px,calc(100vw - 24px));padding:14px 18px;border-radius:16px;background:#0B1F4E;border:1px solid #3A93EC;color:#fff;box-shadow:0 18px 50px rgba(5,15,45,.55);cursor:pointer;font-size:1rem}
.vapill b{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#7BE3C1;margin-bottom:3px}
.vapill .vasaid{display:block;font-size:1.08rem;line-height:1.45}.vapill .vasaid.dim{color:#A9B8DD;font-size:.92rem}
.vapill .vadot{flex:none;width:12px;height:12px;margin-top:4px;border-radius:50%;background:#EF4444;animation:vapulse 1.2s infinite}
@media (max-width:900px){
  .console .bar:has(#lStop) .row{overflow-x:auto;scrollbar-width:none}.console .bar:has(#lStop) .row::-webkit-scrollbar{display:none}
  .console .bar:has(#lStop) #lPip{display:none}
  .console .bar:has(#lStop) #lAsk{font-size:.8rem;gap:4px}
  .vapill{bottom:14px}
}