/* SourcePRO Launchpad design system.
   Extracted unchanged from launchpad-4.0-D2.5V23 head.html (approved D2.5-V2.3 UI); Figtree bundled locally (SIL OFL) for the CSP. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/figtree-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/figtree-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/figtree-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/figtree-latin-900-normal.woff2) format("woff2")}

/* Layout: sticky brand bar, single centred column (max 1120px), bottom tab bar on phones. SourcePRO Brand Book 2026: violet #6E61E9, blue #5397D6, gold #E2B31E; secondary sky #70C0E4, teal #1CA7A6, electric #0166FF; Figtree. */
/* UI correction: dark navy is now the unconditional DEFAULT theme (not an opt-in gated behind the
   visitor's OS prefers-color-scheme). Previously :root{} held the LIGHT palette and dark only activated
   via a media query or an explicit data-theme="dark" attribute that nothing in the app ever set -- so
   every visitor whose OS/browser was in light mode (and there was never an in-app override) saw the plain
   white/light-grey interface regardless of any dark-theme CSS work, on every portal including Admin. */
:root{
  --bg:#0F0E17; --elevated:#15131F; --surface:#211F33; --sunk:#171525; --ink:#F2F1FA; --muted:#A8A6C0; --line:#332F4D;
  --violet:#8D82FF; --violet-deep:#6E61E9; --violet-soft:#27234D; --on-violet:#FFFFFF;
  --blue:#6FAEE8; --blue-soft:#18273A; --gold:#F0C445; --gold-soft:#332A10; --on-gold:#1D1604;
  --sky:#86CDEC; --teal:#3CC4C2; --teal-soft:#123331; --electric:#4C8DFF;
  --good:#3CC4A8; --good-soft:#13312B; --warn:#F0C445; --warn-soft:#332A10; --bad:#F07373; --bad-soft:#3A1C1C;
  --violet-text:#8D82FF; --good-text:#3CC4A8; --warn-text:#F0C445; --bad-text:#F07373;
  --font:"Figtree", "Myriad Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono-f: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --r-xl:28px; --r-lg:20px; --r:14px; --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;
  --brand:var(--violet); --brand-soft:var(--violet-soft); --brand-ink:var(--on-violet); --accent:var(--gold); --accent-soft:var(--gold-soft);
}
:root[data-theme="light"]{
  --bg:#EDEDF1; --elevated:#FFFFFF; --surface:#FFFFFF; --sunk:#F3F2F8; --ink:#121218; --muted:#5B5A6B; --line:#DFDDE9;
  --violet:#6E61E9; --violet-deep:#5A4DD6; --violet-soft:#ECEAFD; --on-violet:#FFFFFF;
  --blue:#5397D6; --blue-soft:#E6F0FA; --gold:#E2B31E; --gold-soft:#FBF2D5; --on-gold:#1D1604;
  --sky:#70C0E4; --teal:#1CA7A6; --teal-soft:#DFF4F3; --electric:#0166FF;
  --good:#137F72; --good-soft:#DDF3EF; --warn:#9A6B00; --warn-soft:#FBF0D2; --bad:#C63B3B; --bad-soft:#FBE4E4;
  /* FAST-04.13.1: text on the soft tints at small sizes (WCAG 2.2 AA 4.5:1); the brand tokens above are unchanged */
  --violet-text:#5A4DD6; --good-text:#0F6B60; --warn-text:#7A5500; --bad-text:#A33030;
  --shadow:0 1px 2px rgba(18,18,24,.05), 0 8px 24px rgba(18,18,24,.06); color-scheme:light }
*{box-sizing:border-box} [hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.55}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--surface)}
h1,h2,h3{margin:0; line-height:1.15; text-wrap:balance; letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,4.2vw,2.6rem); font-weight:900}
h2{font-size:1.2rem; font-weight:800; display:flex; align-items:center; gap:8px}
h3{font-size:1.02rem; font-weight:700}
p{margin:0}
a{color:var(--violet-text)}   /* FAST-04.14: link text uses the contrast-safe violet (4.5:1); the brand --violet stays for fills and accents */
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px}
.ic{flex:none; vertical-align:middle}
.mono,.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono-f)}
.muted{color:var(--muted)} .small{font-size:.86rem} .center{text-align:center; align-items:center}
.eyebrow{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--muted)}
.eyebrow.light{color:inherit; opacity:.8}
.display{font-weight:900; text-transform:uppercase; letter-spacing:-.015em; line-height:.98; font-size:clamp(2.1rem,6vw,3.6rem)}
.display.sm{font-size:clamp(1.5rem,4vw,2.2rem)}
.wrap{max-width:1120px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
/* UI correction: 1120px is a good reading width for marketing/prose pages, but shell() uses the same
   .wrap class for every authenticated portal's main workspace -- capping dashboards, tables and
   recruitment pipelines to 1120px even though the sidebar layout leaves far more room (1192px at a
   1440px viewport, 1672px at 1920px), exactly the "unnecessarily narrow operational dashboard" pattern.
   Scoped to non-public pages only; the public site keeps its narrower, more readable column. */
body:not(.lp-public) .wrap{max-width:1560px}
.narrow{max-width:780px}
.grow{flex:1}

/* Bar */
.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--elevated); border-bottom:1px solid var(--line)}
.bar-in{display:flex; align-items:center; gap:14px; min-height:64px; padding-block:8px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.logo img{height:34px; width:auto; display:block}
/* Dark is the default theme now, so the reverse (light-lettered) logo shows by default; the colour
   (dark-lettered) logo is the opt-out, shown only when data-theme="light" is explicitly set. */
.logo-l{display:none!important}
:root[data-theme="light"] .logo-l{display:block!important} :root[data-theme="light"] .logo-d{display:none!important}
.logo-tag{font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; padding:4px 9px; border-radius:999px; background:var(--violet-soft); color:var(--violet-text)}
.topnav{display:flex; gap:2px; margin-left:auto}
.topnav a{display:flex; align-items:center; gap:7px; padding:9px 13px; border-radius:12px; text-decoration:none; color:var(--muted); font-weight:700; font-size:.94rem}
.topnav a:hover{background:var(--sunk); color:var(--ink)}
.topnav a[aria-current="true"]{background:var(--violet-soft); color:var(--violet-text)}
.bar-right{display:flex; align-items:center; gap:10px; margin-left:auto}
.topnav + .bar-right{margin-left:8px}
.xp-chip{display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:var(--gold-soft); color:var(--ink); text-decoration:none; font-size:.9rem}
.xp-chip .ic{color:var(--gold)} .xp-chip .sep{width:1px; height:14px; background:var(--line)}
.avatar-btn{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--violet); color:var(--on-violet); font-weight:800; text-decoration:none; font-size:.9rem}
.rolepick{position:relative}
.rolepick summary{list-style:none; cursor:pointer; padding:7px 12px; border-radius:999px; border:1px solid var(--line); font-size:.84rem; font-weight:700; color:var(--muted); white-space:nowrap}
.rolepick summary::-webkit-details-marker{display:none}
.rolepick .menu{position:absolute; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; min-width:200px; z-index:40}
.rolepick .menu a{padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ink); font-weight:600}
.rolepick .menu a:hover{background:var(--sunk)}
@media (max-width:900px){.topnav{display:none} .xp-chip{margin-left:auto}}
@media (max-width:520px){.logo-tag{display:none} .logo img{height:30px} .rolepick summary{padding:6px 10px; font-size:.78rem}}

/* EMERGENCY RELEASE / UX: desktop sidebar navigation. Portals with many modules (SourcePRO
   administration especially) overflowed .topnav's single horizontal row at desktop widths, forcing
   the whole page to scroll sideways to reach every item. Above the existing phone/tablet breakpoint
   (900px, where .tabbar already takes over below it -- untouched by this block), restructure #app
   into a fixed-width left sidebar plus a content column instead, so nav items stack vertically
   (plenty of room) rather than competing for horizontal space. Same shell() markup, same nav items,
   same mobile behaviour -- CSS layout only. */
@media (min-width:901px){
  /* position:fixed rather than CSS grid: a grid-spanning sticky sidebar kept feeding its own
     height back into the grid's auto row-track sizing (one content row would balloon to match the
     sidebar's full height, pushing everything else off-screen) across several attempts. Fixed
     positioning takes the sidebar out of #app's layout entirely -- simple and avoids that whole
     class of bug -- and the rest of the shell just reserves room for it with a left margin.
     Scoped to body:not(.lp-public): the public pages' own header (welcome/sign up/reset/terms --
     logo plus just "Sign in"/"Sign up") has no .topnav to make vertical and would otherwise become
     an oversized, pointless empty sidebar instead of its normal simple top bar. */
  body:not(.lp-public) header.bar{position:fixed; left:0; top:0; bottom:0; width:248px; z-index:21;
    border-right:1px solid var(--line); border-bottom:none; overflow-y:auto; overflow-x:hidden}
  body:not(.lp-public) header.bar .wrap{max-width:none; margin:0; padding:0 14px; height:100%}
  body:not(.lp-public) header.bar .bar-in{flex-direction:column; align-items:stretch; min-height:100%; gap:16px; padding-block:18px}
  body:not(.lp-public) .topnav{flex-direction:column; gap:3px; margin-left:0; width:100%}
  body:not(.lp-public) .topnav a{width:100%}
  body:not(.lp-public) .bar-right, body:not(.lp-public) .topnav + .bar-right{flex-direction:column; align-items:stretch; width:100%; margin-left:0; margin-top:auto;
    padding-top:14px; border-top:1px solid var(--line); gap:8px}
  body:not(.lp-public) .bar-right .xp-chip{justify-content:center}
  /* The account menu's trigger now sits at the bottom of a fixed-height sidebar, so opening
     downward (the horizontal-bar default) would render it almost entirely below the viewport. */
  body:not(.lp-public) .rolepick .menu{left:0; right:auto; top:auto; bottom:calc(100% + 6px)}
  body:not(.lp-public) .ux2-demo, body:not(.lp-public) #persona-banner, body:not(.lp-public) main, body:not(.lp-public) footer{margin-left:248px}
  .tabbar{display:none}
}

/* Tab bar (phones) */
.tabbar{display:none}
@media (max-width:900px){
  .tabbar{display:grid; grid-template-columns:repeat(var(--tabn,5),minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:25; background:var(--elevated); border-top:1px solid var(--line); padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  /* FINAL-01 verification fix: a bare "1fr" track keeps each grid item's implicit auto min-width (its
     content's min-content size), so portals with longer tab labels and many tabs (Alumni/Trainer, 9
     tabs) still overflowed the fixed-width bar even after --tabn made the column COUNT correct --
     confirmed live (Playwright, 390px viewport): the last tab's right edge landed at x=420/457 on a
     390px screen. minmax(0,1fr) removes that implicit minimum so every column is forced to share the
     bar equally and the (already-wrapping) label text shrinks to fit instead of pushing the bar wide. */
  .tabbar a{display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; min-width:0; text-decoration:none; color:var(--muted); font-size:.72rem; font-weight:700; border-radius:12px}
  .tabbar a[aria-current="true"]{color:var(--violet-text); background:var(--violet-soft)}
  main.with-tabs{padding-bottom:96px} footer.with-tabs{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

main{padding-block:24px 56px}
footer{border-top:1px solid var(--line); padding-block:20px 32px; color:var(--muted); font-size:.82rem}
.foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .foot img{width:auto; height:24px}
.sync{display:inline-flex; align-items:center; gap:6px; margin-left:auto} .sync i{width:7px; height:7px; border-radius:50%; background:var(--muted)} .sync.on i{background:var(--good)}

/* Layout helpers */
.stack{display:flex; flex-direction:column; gap:22px} .stack.tight{gap:10px}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap} .between{justify-content:space-between}
.grid{display:grid; gap:16px} .grid.tight{gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
/* UI/UX rebuild: CSS Grid's auto-fit locks every row of .kpis to the SAME column count (set by whichever
   row has the most items) -- a trailing lone KPI tile then sits in column 1 with the row's other columns
   reserved-but-empty beside it (the "orphan card with wasted space" pattern flagged across dashboards).
   Flexbox doesn't have that constraint: each row wraps independently and a lone last item grows to fill it. */
.grid.kpis{display:flex; flex-wrap:wrap}
.kpis > *{flex:1 1 150px; min-width:150px}
/* UI/UX transformation, global shell: kpi() (app.js) is the one shared stat-tile helper every
   portal dashboard already calls -- previously just a bare <b> at body text size inside .card, so
   every dashboard's headline numbers read no bolder than a caption. One rule here lifts every
   portal's stat grids at once, no per-portal JS changes needed. */
.kpi{gap:4px; position:relative; overflow:hidden; padding-top:18px}
.kpi b{font-size:1.65rem; font-weight:900; line-height:1.15}
.kpi .muted.small{font-size:.8rem; font-weight:700}
/* UI/UX rebuild: kpi()'s existing color arg (already passed everywhere as "good"/"warn"/"bad", occasionally
   a brand token) now also tops the tile with a thin accent bar and tints an optional icon badge -- purely
   additive CSS, zero call-site changes. */
.kpi::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--line)}
.kpi-violet::before{background:var(--violet)} .kpi-blue::before{background:var(--blue)} .kpi-gold::before{background:var(--gold)}
.kpi-good::before{background:var(--good)} .kpi-warn::before{background:var(--warn)} .kpi-bad::before{background:var(--bad)} .kpi-teal::before{background:var(--teal)} .kpi-electric::before{background:var(--electric)}
.kpi-violet{background:var(--violet-soft)} .kpi-blue{background:var(--blue-soft)} .kpi-gold{background:var(--gold-soft)}
.kpi-good{background:var(--good-soft)} .kpi-warn{background:var(--warn-soft)} .kpi-bad{background:var(--bad-soft)}
.kpi-ic{position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:rgba(110,97,233,.12); color:var(--violet-text)}
.l4-attn-link{display:flex; align-items:center; gap:10px; width:100%; text-decoration:none; color:inherit}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; min-width:0; display:flex; flex-direction:column; gap:12px}
.panel{border-radius:var(--r-xl); padding:clamp(22px,4vw,36px); position:relative; overflow:hidden}
.panel.violet{background:linear-gradient(135deg, var(--violet-deep) 0%, var(--violet) 100%); color:var(--on-violet)}
.panel.violet::after{content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; border:28px solid rgba(255,255,255,.08); pointer-events:none}
.panel.violet a:not(.btn){color:inherit}
.pagehead{display:flex; flex-direction:column; gap:8px}
.lead{color:var(--muted); max-width:64ch; font-size:1.02rem}
.backlink{display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-weight:700; font-size:.9rem; align-self:flex-start}
.backlink:hover{color:var(--violet)}
.link{font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:4px}

/* Buttons and pills */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid transparent; border-radius:14px; padding:11px 18px; font-weight:800; cursor:pointer; text-decoration:none; background:var(--violet); color:var(--on-violet); font-size:.95rem; line-height:1.2; transition:transform .12s, filter .12s}
.btn:hover{filter:brightness(1.06)} .btn:active{transform:scale(.98)}
.btn.big{padding:14px 22px; font-size:1.02rem; border-radius:16px}
.btn.gold{background:var(--gold); color:var(--on-gold)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--sunk)}
.btn.soft{background:var(--violet-soft); color:var(--violet)}
.btn.sm{padding:7px 12px; font-size:.84rem; border-radius:10px}
.btn.danger{background:var(--bad); color:var(--surface)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.pill{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:.76rem; font-weight:800; background:var(--sunk); color:var(--muted); white-space:nowrap}
.pill.good{background:var(--good-soft); color:var(--good-text)} .pill.warn{background:var(--warn-soft); color:var(--warn-text)} .pill.bad{background:var(--bad-soft); color:var(--bad-text)}
.pill.brand,.pill.violet{background:var(--violet-soft); color:var(--violet-text)} .pill.accent,.pill.gold{background:var(--gold-soft); color:var(--warn-text)}
.pill.light{background:rgba(255,255,255,.18); color:inherit} .pill.big{font-size:.9rem; padding:8px 14px}
.notice{border:1px dashed var(--line); background:var(--sunk); border-radius:var(--r); padding:14px 16px; font-size:.92rem; color:var(--ink); display:flex; flex-direction:column; gap:6px}
.notice.example{border-color:var(--gold); background:var(--gold-soft)}
.meter{height:8px; background:var(--sunk); border-radius:6px; overflow:hidden}
.meter span{display:block; height:100%; background:var(--violet); border-radius:6px; transition:width .5s}
.meter.gold span{background:var(--gold)} .meter.good span{background:var(--teal)} .meter.tiny{height:5px; width:64px}
.meter.light{background:rgba(255,255,255,.22)} .meter.light span{background:var(--gold)}

/* Forms */
label.field{display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:.9rem}
.hint{font-weight:500; color:var(--muted); font-size:.8rem}
input[type=text],input[type=number],input[type=date],input[type=datetime-local],select,textarea{width:100%; border:1.5px solid var(--line); background:var(--surface); border-radius:12px; padding:12px 14px; font-size:1rem}
textarea{resize:vertical; min-height:110px; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.94rem}
.check input{margin-top:3px; width:20px; height:20px; accent-color:var(--violet); flex:none}
fieldset.plain{border:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative} .chip input{position:absolute; opacity:0}
.chip span{display:inline-block; padding:8px 13px; border-radius:999px; border:1.5px solid var(--line); font-size:.88rem; font-weight:600; cursor:pointer}
.chip input:checked + span{background:var(--violet-soft); border-color:var(--violet); color:var(--violet)}
.chip input:focus-visible + span{outline:3px solid var(--gold)}

/* Onboarding */
.onb{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:stretch}
@media (max-width:860px){.onb{grid-template-columns:1fr}}
.onb-art{display:flex; flex-direction:column; gap:16px}
.onb-logo{height:46px; width:auto; align-self:flex-start}
.onb-card{gap:16px; padding:clamp(20px,3vw,32px)}
.steps{display:flex; gap:6px} .steps span{height:6px; flex:1; border-radius:4px; background:var(--sunk)} .steps span.on{background:var(--violet)}
.ticks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.ticks li{display:flex; gap:10px; align-items:flex-start} .ticks .ic{color:var(--violet); margin-top:2px}
.funnel{display:flex; flex-direction:column; gap:7px}
.fstep{display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr) auto; gap:10px; align-items:center; font-size:.86rem}
.fbar{height:12px; background:var(--sunk); border-radius:6px; overflow:hidden}
.fbar span{display:block; height:100%; background:var(--violet); border-radius:6px}
.fstep.done .fbar span{background:var(--teal)}
.fstep .num,.fstep .mono{min-width:3em; text-align:right; color:var(--muted)}
.funnel.mini .fbar{background:rgba(255,255,255,.2)} .funnel.mini .fbar span{background:var(--gold)} .funnel.mini .num{color:inherit; opacity:.8}

/* Home */
.hero{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:end}
@media (max-width:820px){.hero{grid-template-columns:1fr}}
.hero-main{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.hero-sub{opacity:.92; font-size:1.05rem; max-width:46ch}
.hero-stats{display:flex; flex-direction:column; gap:12px}
.lvl,.streak{background:rgba(255,255,255,.12); border-radius:var(--r-lg); padding:14px 16px; display:flex; flex-direction:column; gap:8px}
.lvl-top{display:flex; justify-content:space-between; align-items:center; font-weight:800}
.lvl-top span{display:flex; gap:6px; align-items:center} .lvl small,.streak small{opacity:.85; display:block}
.streak{flex-direction:row; align-items:center; gap:14px}
.streak-n{display:flex; align-items:center; gap:4px; font-size:1.8rem; font-weight:900; color:var(--gold)}
.home-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.q-text{font-weight:700; font-size:1.05rem} .q-text.big{font-size:1.2rem}
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:8px}
.opt{display:flex; gap:10px; align-items:center; text-align:left; border:1.5px solid var(--line); background:var(--surface); border-radius:12px; padding:12px 14px; cursor:pointer; font-weight:600; transition:border-color .12s, transform .12s}
.opt:hover{border-color:var(--violet); transform:translateY(-1px)}
.opt b{color:var(--violet); font-size:.82rem}
.opt.sel{border-color:var(--violet); background:var(--violet-soft)}
.tasks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column}
.task{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:none}
.task a{text-decoration:none; color:var(--ink); min-width:0} .task a b{display:block; font-size:.95rem} .task a small{color:var(--muted); display:block; font-size:.8rem}
.task.done a b{text-decoration:line-through; color:var(--muted)}
.tick{width:28px; height:28px; border-radius:50%; border:2px solid var(--line); background:var(--surface); display:grid; place-items:center; color:transparent; cursor:pointer}
.tick[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:#fff}
.tick:disabled{cursor:default; opacity:1}
.kind{font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:999px; background:var(--sunk); color:var(--muted)}
.k-prove{background:var(--gold-soft); color:var(--warn)} .k-module{background:var(--violet-soft); color:var(--violet)} .k-coach{background:var(--blue-soft); color:var(--blue)} .k-taster,.k-play{background:var(--teal-soft); color:var(--teal)}
.ring{--p:0; width:120px; height:120px; border-radius:50%; background:conic-gradient(var(--violet) calc(var(--p)*1%), var(--sunk) 0); display:grid; place-items:center; flex:none}
.ring>div{width:94px; height:94px; border-radius:50%; background:var(--surface); display:grid; place-items:center; text-align:center}
.ring b{font-size:1.9rem; font-weight:900; line-height:1; display:block} .ring small{font-size:.72rem; color:var(--muted)}
.stage{display:flex; align-items:center; gap:6px; font-size:.84rem; color:var(--muted)} .stage.ok{color:var(--good); font-weight:700}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:12px}
.tile{display:flex; flex-direction:column; gap:4px; padding:18px; border-radius:var(--r-lg); text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); transition:transform .15s, box-shadow .15s}
.tile:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.tile small{color:var(--muted)}
.tile-ic{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; margin-bottom:6px}
.tile.violet .tile-ic,.game.violet .game-ic{background:var(--violet-soft); color:var(--violet)}
.tile.blue .tile-ic,.game.blue .game-ic{background:var(--blue-soft); color:var(--blue)}
.tile.teal .tile-ic,.game.teal .game-ic{background:var(--teal-soft); color:var(--teal)}
.tile.gold .tile-ic,.game.gold .game-ic{background:var(--gold-soft); color:var(--warn)}
.season{background:linear-gradient(0deg,var(--surface),var(--surface)); border-color:var(--gold)}
.badges{display:flex; flex-wrap:wrap; gap:8px}
.badgechip{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; background:var(--gold-soft); color:var(--ink); font-weight:700; font-size:.86rem}
.badgechip .ic{color:var(--warn)}

/* Journey */
.weeks{display:flex; flex-direction:column; gap:10px}
.week{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0 16px}
.week summary{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:14px 0; cursor:pointer; list-style:none; font-weight:800}
.week summary::-webkit-details-marker{display:none}
.week.now{border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft)}
.week.complete .wk::after{content:" ✓"; color:var(--teal)}
.week[open] summary{border-bottom:1px solid var(--line)}
.pathcard{text-decoration:none; color:var(--ink); transition:transform .15s, border-color .15s}
.pathcard:hover{transform:translateY(-2px); border-color:var(--violet)} .pathcard.sel{border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft)}
.pathcard .pill{align-self:flex-start}
.pathmark{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--violet); color:var(--on-violet); font-weight:900; font-size:.9rem}
.skilllist{list-style:none; padding:0; margin:0} .skilllist a{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); font-weight:600}
.shelf{text-decoration:none; color:var(--ink)} .shelf:hover{border-color:var(--violet)}
.prov{font-weight:900; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase}
.p-swayam{color:var(--teal)} .p-nptel{color:var(--blue)} .p-udemy{color:var(--violet)} .p-coursera{color:var(--electric)}

/* Learn / modules */
.mod{text-decoration:none; color:var(--ink); transition:transform .15s, border-color .15s} .mod:hover{transform:translateY(-2px); border-color:var(--violet)}
.mod .num{font-weight:900; font-size:1.4rem; color:var(--violet)}
.modgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:20px; align-items:start}
@media (max-width:860px){.modgrid{grid-template-columns:1fr}}
.lessons{display:flex; flex-direction:column; gap:18px}
.lesson{border-left:4px solid var(--violet-soft); padding:2px 0 2px 16px} .lesson h3{margin-bottom:6px} .lesson p{max-width:68ch}
.q{display:flex; flex-direction:column; gap:8px}
.qopt{display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; border:1.5px solid var(--line); background:var(--surface); border-radius:12px; padding:11px 13px; cursor:pointer; font-size:.95rem}
.qopt:hover:not(:disabled){border-color:var(--violet)} .qopt b{color:var(--muted); font-size:.82rem; min-width:1.2em}
.qopt.right{border-color:var(--teal); background:var(--teal-soft)} .qopt.wrong{border-color:var(--bad); background:var(--bad-soft)} .qopt:disabled{cursor:default}
.explain{font-size:.88rem; color:var(--muted)}
.scale,.scale5{display:flex; gap:6px; flex-wrap:wrap}
.scale button,.scale5 button{width:40px; height:40px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font-weight:800}
.scale button[aria-pressed="true"],.scale5 button[aria-pressed="true"]{background:var(--violet); color:var(--on-violet); border-color:var(--violet)}
.skillrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line)}
@media (max-width:520px){.skillrow{grid-template-columns:1fr}}
.cl{display:flex; flex-direction:column} .cli{display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; padding:7px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.cli .mk{font-weight:900} .cli.ok .mk{color:var(--good)} .cli.no .mk{color:var(--bad)} .cli small{display:block; color:var(--muted)}
.timer{font-weight:900; font-size:1.4rem; font-variant-numeric:tabular-nums} .timer.low{color:var(--bad)}

/* Coaches */
.coachcard{flex-direction:row; align-items:flex-start; gap:12px; text-decoration:none; color:var(--ink)} .coachcard:hover{border-color:var(--violet)}
.avatar{width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center; font-weight:900; background:var(--violet-soft); color:var(--violet)}
.chatshell{display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:860px){.chatshell{grid-template-columns:1fr}}
.cmds{display:flex; flex-direction:column; gap:6px}
@media (max-width:860px){.cmds{flex-direction:row; overflow-x:auto; padding-bottom:4px}.cmds .cmd{flex:none; max-width:220px}}
.cmd{text-align:left; border:1.5px solid var(--line); background:var(--surface); border-radius:12px; padding:9px 11px; cursor:pointer}
.cmd:hover{border-color:var(--violet)} .cmd b{font-size:.76rem; color:var(--violet); display:block; letter-spacing:.03em} .cmd span{font-size:.8rem; color:var(--muted); display:block; line-height:1.35}
.chat{padding:0; overflow:hidden; gap:0; min-height:480px}
.msgs{flex:1; padding:18px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; max-height:62vh; min-height:340px}
.msg{max-width:88%; padding:12px 15px; border-radius:16px; font-size:.95rem; overflow-wrap:anywhere}
.msg.me{align-self:flex-end; background:var(--violet); color:var(--on-violet); border-bottom-right-radius:4px; white-space:pre-wrap}
.msg.ai{align-self:flex-start; background:var(--sunk); border-bottom-left-radius:4px}
.msg.ai p+p,.msg.ai ul,.msg.ai ol,.msg.ai p+ul{margin-top:8px} .msg.ai ul,.msg.ai ol{padding-left:20px; margin-bottom:0}
.msg.ai .sig{display:block; margin-top:10px; padding-top:8px; border-top:1px solid var(--line); font-weight:700}
.msg.ai .sig b{font-size:.78rem; color:var(--warn); letter-spacing:.04em}
.composer{border-top:1px solid var(--line); padding:12px; display:flex; gap:10px; align-items:flex-end; background:var(--surface)}
.composer textarea{min-height:48px; max-height:180px}
.typing{color:var(--muted); font-style:italic}

/* Career Map, Prove-It, Play */
.cm-intro{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.cm-parts{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; width:100%; counter-reset:p}
.cm-parts li{background:rgba(255,255,255,.12); border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; counter-increment:p}
.cm-parts li::before{content:counter(p); font-weight:900; font-size:1.4rem; color:var(--gold)}
.cm-parts span{opacity:.85; font-size:.88rem}
.cm{max-width:760px; gap:16px} .cm-head{display:flex; flex-direction:column; gap:6px}
.likerts{display:flex; flex-direction:column}
.likert{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
@media (max-width:560px){.likert{grid-template-columns:1fr}}
.pick2{display:flex; flex-direction:column; gap:8px} .pick2 .opt{flex:1; min-width:140px; justify-content:center}
.bigbadge{width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:var(--gold-soft); color:var(--warn)}
.bignum{font-size:2rem; font-weight:900; line-height:1} .bignum small{font-size:.9rem; color:var(--muted); font-weight:700}
.card.win{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft)}
.pq{display:flex; flex-direction:column; padding:8px 0; border-top:1px solid var(--line)}
.levels{display:flex; flex-wrap:wrap; gap:6px} .levels span{padding:4px 10px; border-radius:999px; background:var(--sunk); color:var(--muted); font-size:.78rem; font-weight:700} .levels span.on{background:var(--violet); color:var(--on-violet)}
.game{text-decoration:none; color:var(--ink); transition:transform .15s} .game:hover{transform:translateY(-3px); box-shadow:var(--shadow)} .game .pill{align-self:flex-start}
.game-ic{width:56px; height:56px; border-radius:18px; display:grid; place-items:center}
.taster{text-decoration:none; color:var(--ink)} .taster:hover{border-color:var(--violet)} .taster.done{border-color:var(--teal)}
.task-text{white-space:pre-wrap; font-family:var(--font); background:var(--sunk); padding:14px; border-radius:12px; margin:0; font-size:.95rem; overflow-x:auto}
.jd ul{margin:6px 0 0; padding-left:18px; font-size:.9rem}
.cand{text-align:left; cursor:pointer; font:inherit; color:var(--ink)}
.cand ul{margin:0; padding-left:18px; font-size:.86rem}
.cand .tick{width:24px; height:24px}
.cand.sel{border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft)} .cand.sel .tick{background:var(--violet); border-color:var(--violet); color:#fff}
.cand-r.ok{border-color:var(--teal)} .cand-r.no{border-color:var(--bad)}

/* Me and passport */
.me{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.me-av{width:76px; height:76px; border-radius:24px; background:var(--gold); color:var(--on-gold); display:grid; place-items:center; font-weight:900; font-size:1.6rem}
.me > div:last-child{display:flex; flex-direction:column; gap:8px}
.passport{background:var(--violet); color:var(--on-violet); border-radius:var(--r-xl); padding:clamp(22px,4vw,36px); display:flex; flex-direction:column; gap:12px; max-width:640px; position:relative; overflow:hidden}
.passport::after{content:""; position:absolute; right:-40px; bottom:-40px; width:180px; height:180px; border-radius:50%; background:var(--gold); opacity:.18}
.passport a{color:inherit}
.pp-top{display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em}
.pp-logo{height:30px; width:auto}
.pp-badges{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:8px}
.pp-b{display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.14); border-radius:14px; padding:10px 12px} .pp-b .ic{color:var(--gold)} .pp-b small{display:block; opacity:.85}
.pp-foot{opacity:.8}

/* Growth, staff tables */
.bars{display:flex; flex-direction:column; gap:10px}
.barrow{display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr); gap:12px; align-items:center; font-size:.9rem}
@media (max-width:520px){.barrow{grid-template-columns:1fr}}
.pair{display:flex; flex-direction:column; gap:3px} .pair .fbar{height:10px}
.pair .fbar span.pre{background:var(--muted); opacity:.45} .pair .fbar span.post{background:var(--gold)}
.legend{display:flex; gap:14px; font-size:.82rem; color:var(--muted)} .legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.lg-pre{background:var(--muted); opacity:.45} .lg-post{background:var(--gold)}
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)} .tablewrap.flat{border:none}
table{border-collapse:collapse; width:100%; font-size:.88rem}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--sunk); font-weight:800}
tr:last-child td{border-bottom:none} td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.dots{display:flex; gap:3px} .dots i{width:10px; height:10px; border-radius:3px; background:var(--sunk); display:block} .dots i.half{background:var(--gold)} .dots i.full{background:var(--teal)}
.kpi b{font-size:2rem; font-weight:900; display:block; line-height:1.1; font-variant-numeric:tabular-nums}
.modal{position:fixed; inset:0; background:rgba(10,8,24,.55); z-index:50; display:grid; place-items:center; padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.modal .card{width:min(640px,100%); max-height:88vh; overflow-y:auto}

/* Feedback */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(104px + env(safe-area-inset-bottom,0px)); background:var(--ink); color:var(--bg); padding:11px 18px; border-radius:14px; font-size:.92rem; font-weight:700; z-index:60; box-shadow:var(--shadow); max-width:calc(100% - 32px)}
@media (min-width:901px){.toast{bottom:28px}}
.toast.pop{animation:pop .35s ease-out}
@keyframes pop{from{transform:translate(-50%,12px); opacity:0} to{transform:translate(-50%,0); opacity:1}}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:70}
.celebrate{position:fixed; inset:0; display:grid; place-items:center; z-index:65; pointer-events:none}
.celebrate-card{background:var(--surface); border:2px solid var(--gold); color:var(--ink); border-radius:24px; padding:22px 28px; display:flex; flex-direction:column; align-items:center; gap:8px; box-shadow:0 20px 60px rgba(0,0,0,.25); animation:zoom .4s ease-out; font-size:1.1rem; text-align:center; max-width:calc(100% - 40px)}
.celebrate-card .ic{color:var(--gold)}
@keyframes zoom{from{transform:scale(.7); opacity:0} to{transform:scale(1); opacity:1}}
/* v3: assessment, plan, habits, report */
.nowrap{flex-wrap:nowrap} .grow{flex:1; min-width:0}
.pick-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:8px}
.chipbtn{border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 13px; font-size:.88rem; font-weight:600; cursor:pointer}
.chipbtn:hover{border-color:var(--violet)} .chipbtn.on{background:var(--violet-soft); border-color:var(--violet); color:var(--violet)}
.seg{display:inline-flex; background:var(--sunk); border-radius:12px; padding:3px; gap:2px}
.seg button{border:0; background:transparent; padding:7px 11px; border-radius:9px; font-weight:700; font-size:.82rem; cursor:pointer; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--violet); box-shadow:var(--shadow)}
.pctseg{display:flex} .pctseg button{flex:1}
.stagetrack{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; counter-reset:s}
.stagetrack a{display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:var(--muted); padding:10px 4px; border-radius:14px; text-align:center}
.stagetrack span{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--sunk); font-weight:800; font-size:.85rem}
.stagetrack b{font-size:.82rem} .stagetrack small{font-size:.7rem}
.stagetrack li.ok span{background:var(--teal); color:#fff} .stagetrack li.ok b{color:var(--ink)}
.stagetrack li.now a{background:var(--violet-soft)} .stagetrack li.now span{background:var(--violet); color:#fff} .stagetrack li.now b{color:var(--violet)}
.habits{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.habit{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 12px; border:1.5px solid var(--line); border-radius:14px; transition:background .15s, border-color .15s}
.habit.done{background:var(--teal-soft); border-color:transparent}
.hb-ic{width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:var(--violet-soft); color:var(--violet)}
.habit.done .hb-ic{background:var(--teal); color:#fff}
.hb-t b{display:block; font-size:.92rem; line-height:1.3} .hb-t small{color:var(--muted); font-size:.76rem}
.habits.compact .habit{padding:8px 10px} .habits.compact .hb-ic{width:30px; height:30px}
.tick.big{width:36px; height:36px}
.stepper{display:flex; align-items:center; gap:6px} .stepper button{width:32px; height:32px; border-radius:10px; border:1.5px solid var(--line); background:var(--surface); font-size:1.1rem; font-weight:800; cursor:pointer} .stepper button:disabled{opacity:.4} .stepper b{min-width:1.6em; text-align:center}
.habit-hero{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-end}
.habit-hero > div:first-child{display:flex; flex-direction:column; gap:8px; max-width:560px}
.hb-stats{display:flex; gap:10px; flex-wrap:wrap} .hb-stats > div{background:rgba(255,255,255,.14); border-radius:16px; padding:12px 16px; text-align:center; min-width:96px; flex:1 1 96px}
.hb-stats b{display:flex; align-items:center; justify-content:center; gap:4px; font-size:1.6rem; font-weight:900} .hb-stats b .ic{color:var(--gold)} .hb-stats small{opacity:.85; font-size:.76rem}
.hb-totals,.track-kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}
.tot{background:var(--sunk); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:2px}
.tot b{font-size:1.4rem; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.15} .tot small{color:var(--muted); font-size:.76rem; line-height:1.3}
.heat{display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,1fr); gap:4px}
.heat i{aspect-ratio:1; border-radius:4px; background:var(--sunk); display:block}
.heat i.h1,.lg.h1{background:var(--violet-soft)} .heat i.h2,.lg.h2{background:var(--violet)} .heat i.h3,.lg.h3{background:var(--gold)} .heat i.hf{opacity:.3}
.lg{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.hb-edit summary{cursor:pointer; list-style:none; margin-bottom:10px} .hb-edit summary::-webkit-details-marker{display:none}
.track-h{display:flex; gap:12px; align-items:flex-start} .track-h p{margin-top:2px}
.track-n{width:34px; height:34px; border-radius:12px; background:var(--violet); color:#fff; display:grid; place-items:center; font-weight:900; flex:none}
.modlist{list-style:none; padding:0; margin:0}
.modlist li{display:grid; grid-template-columns:40px minmax(0,1fr) auto auto auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
.modlist li:last-child{border-bottom:none} .modlist .num{font-weight:900; color:var(--violet); font-size:1.1rem} .modlist b{display:block; font-size:.94rem} .modlist small{color:var(--muted); font-size:.8rem}
@media (max-width:640px){.modlist li{grid-template-columns:34px minmax(0,1fr) auto} .modlist li .btn{display:none}}
.course{gap:10px} .course h3{line-height:1.3}
.why{font-size:.86rem; background:var(--gold-soft); border-radius:10px; padding:8px 10px; display:flex; gap:6px; align-items:flex-start} .why .ic{color:var(--warn); margin-top:2px}
.mini-course{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:14px; background:var(--sunk)}
.mini-course .prov{color:var(--muted)}
.techgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:8px}
.techrow{display:flex; gap:8px; align-items:center; padding:10px 12px; border-radius:12px; font-size:.9rem} .techrow span{flex:1; display:flex; flex-direction:column} .techrow small{font-size:.74rem; color:var(--muted)} .techrow.warnrow{background:var(--blue-soft)} .techrow.warnrow .ic{color:var(--blue)} .techrow.bad{background:var(--bad-soft)} .techrow.bad .ic{color:var(--bad)}
.techrow.ok{background:var(--teal-soft)} .techrow.ok .ic{color:var(--teal)} .techrow.gap{background:var(--gold-soft)} .techrow.gap .ic{color:var(--warn)}
.direction{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:flex-end} .direction > div:first-child{display:flex; flex-direction:column; gap:6px}
.btn.ghost.light{color:#fff; border-color:rgba(255,255,255,.4)} .btn.ghost.light:hover{background:rgba(255,255,255,.1)}
.final-cta{border-color:var(--violet)}
.rep-head{display:flex; justify-content:space-between; align-items:center; gap:16px}
td.up{color:var(--good); font-weight:800} td.down{color:var(--bad); font-weight:800}
.report ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px}
.modal .card.wide{width:min(980px,100%)}
.gapbar{position:relative; height:12px; background:var(--sunk); border-radius:6px} .gapbar .you{display:block; height:100%; background:var(--gold); border-radius:6px} .gapbar .you.met{background:var(--teal)} .gapbar i{position:absolute; top:-4px; bottom:-4px; width:3px; background:var(--ink); border-radius:2px; transform:translateX(-1px)}
.rv{border-left:3px solid var(--violet-soft); padding:2px 0 2px 12px; display:flex; flex-direction:column; gap:3px}
.story textarea{min-height:60px}
/* Interview Studio */
.iv-hero{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-end} .iv-hero > div:first-child{display:flex; flex-direction:column; gap:8px; max-width:600px}
.iv-type{flex-direction:column; align-items:flex-start} .iv-type span{display:flex; flex-direction:column; gap:2px} .iv-type small{color:var(--muted); font-weight:500; font-size:.8rem}
.iv-promo{flex-direction:row; align-items:center; gap:14px; text-decoration:none; color:var(--ink); border-color:var(--violet); background:linear-gradient(90deg,var(--violet-soft),var(--surface))}
.iv-promo > div{flex:1} .iv-promo .tile-ic{background:var(--violet); color:#fff; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex:none}
.qbank{display:flex; flex-direction:column; gap:6px; max-height:520px; overflow-y:auto}
.qitem{border:1px solid var(--line); border-radius:12px; padding:10px 12px} .qitem summary{cursor:pointer; font-weight:700; font-size:.92rem} .qitem[open]{background:var(--sunk)} .qitem p{margin-top:6px} .qitem .btn{margin-top:8px}
.ivlist{list-style:none; padding:0; margin:0} .ivlist li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line)} .ivlist a{text-decoration:none; color:var(--ink); min-width:0} .ivlist b{display:block; font-size:.92rem} .ivlist small{color:var(--muted)}
.scorechip{min-width:44px; height:32px; padding:0 8px; border-radius:10px; display:inline-grid; place-items:center; font-weight:900; font-variant-numeric:tabular-nums; background:var(--sunk)}
.scorechip.good{background:var(--good-soft); color:var(--good)} .scorechip.warn{background:var(--warn-soft); color:var(--warn)} .scorechip.bad{background:var(--bad-soft); color:var(--bad)} .scorechip.big{min-width:64px; height:52px; font-size:1.5rem; border-radius:14px}
.trend{width:100%; height:auto; max-height:90px}
.iv-q{display:flex; gap:14px; align-items:flex-start} .iv-avatar{width:52px; height:52px; border-radius:50%; background:var(--violet); color:#fff; display:grid; place-items:center; flex:none}
.iv-think{display:flex; flex-direction:column; gap:6px}
.iv-cam{width:100%; max-width:420px; aspect-ratio:4/3; object-fit:cover; border-radius:16px; background:#000; transform:scaleX(-1)} .iv-cam[src]{transform:none} .iv-cam.live{outline:3px solid var(--bad)}
.iv-audio{width:100%}
.iv-live{display:flex; align-items:center; gap:10px} .recdot{width:12px; height:12px; border-radius:50%; background:var(--bad); animation:blink 1s infinite} @keyframes blink{50%{opacity:.25}}
.iv-transcript{min-height:110px; max-height:240px; overflow-y:auto; background:var(--sunk); border-radius:14px; padding:14px; font-size:1rem; line-height:1.6}
.iv-load{padding:48px 20px} .spinner{width:44px; height:44px; border-radius:50%; border:4px solid var(--violet-soft); border-top-color:var(--violet); animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}}
.fb{border-top:1px solid var(--line); padding-top:14px} .fb h3{margin-bottom:4px} .fb ul,.fb ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; font-size:.94rem}
.verdict{font-size:1.05rem; font-weight:700; font-style:italic}
.dims{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr)); gap:8px}
.dim{display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--sunk); border-radius:10px; padding:8px 10px; font-size:.86rem}
.pips{display:flex; gap:3px} .pips i{width:14px; height:8px; border-radius:3px; background:var(--line); display:block} .pips i.on{background:var(--violet)}
.better{background:var(--teal-soft); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:6px} .better h3{display:flex; gap:6px; align-items:center} .better .ic{color:var(--teal)}
@media (max-width:520px){.stagetrack b{font-size:.7rem} .stagetrack small{display:none} .hb-stats > div{min-width:0; padding:10px} .hb-stats b{font-size:1.3rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ===== v4: season, revise, speak, shorts, jd, gd ===== */
ul.clean,ol.clean{margin:0; padding-left:20px; display:grid; gap:6px}
.linkcard{text-decoration:none; color:var(--ink)} .linkcard:hover{border-color:var(--violet)}
.score-ring{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:50%; font-weight:800; border:4px solid var(--warn); color:var(--ink)}
.score-ring.sm{width:44px; height:44px; font-size:15px} .score-ring.good{border-color:var(--teal)} .score-ring.bad{border-color:var(--bad)}
.season-banner{display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink); border:2px solid var(--gold); background:linear-gradient(90deg,var(--gold-soft),var(--surface))}
.sb-count{display:grid; place-items:center; min-width:72px; padding:8px; border-radius:var(--r); background:var(--violet); color:#fff; text-align:center}
.sb-count b{font-size:28px; line-height:1} .sb-count small{font-size:11px; opacity:.9}
.drow{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink)} .drow:last-child{border-bottom:0}
.drow small{display:block; color:var(--muted)}
.co-card,.job{border-left:4px solid var(--violet)}
.qlist{display:grid; gap:8px; margin:0; padding-left:20px}
.recov{border-left:4px solid var(--teal); padding-left:12px}
.rf-r{display:grid; gap:6px; padding:10px; border:1px solid var(--line); border-radius:var(--r)} .rf-why{color:var(--muted); font-size:14px}
.expl{margin-top:8px; padding:12px 14px; border-radius:var(--r); background:var(--teal-soft); border-left:4px solid var(--teal); font-size:15px; line-height:1.6} .expl p{margin:0 0 6px}
/* shorts */
.shorts-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.short-tile{aspect-ratio:9/13; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:14px; border-radius:var(--r-lg); text-decoration:none; color:#fff; background:linear-gradient(160deg,var(--violet),var(--violet-deep)); box-shadow:var(--shadow); transition:transform .15s}
.short-tile:nth-child(3n+2){background:linear-gradient(160deg,var(--blue),var(--violet-deep))} .short-tile:nth-child(3n){background:linear-gradient(160deg,var(--teal),var(--violet-deep))}
.short-tile:hover{transform:translateY(-3px)} .short-tile b{font-size:16px; line-height:1.25} .short-tile.seen{opacity:.75}
.st-cat{align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:99px; background:rgba(255,255,255,.2); color:#fff}
.st-meta{font-size:12px; opacity:.85}
.short-stage{position:relative; max-width:440px; margin:0 auto; min-height:calc(100vh - 190px); display:flex; flex-direction:column; gap:14px; padding:16px; border-radius:var(--r-xl); color:#fff; background:linear-gradient(170deg,var(--violet),var(--violet-deep)); box-shadow:var(--shadow)}
.short-bars{display:flex; gap:4px} .short-bars span{flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.3)} .short-bars span.on{background:var(--gold)}
.short-top{display:flex; justify-content:space-between; align-items:center} .short-close{color:#fff; text-decoration:none; font-size:20px; padding:4px 8px}
.short-card{flex:1; display:flex; flex-direction:column; justify-content:center; gap:12px}
.short-card h2{font-size:28px; line-height:1.15; color:#fff} .short-card .eyebrow{color:var(--gold)}
.short-body{font-size:19px; line-height:1.55}
.short-card .opt{color:var(--ink)} .short-card .expl{color:var(--ink)}
.short-nav{display:flex; justify-content:space-between; gap:10px}
.btn.light{color:#fff; border-color:rgba(255,255,255,.5)}
/* jd */
.jd-req{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line)} .jd-req:last-child{border-bottom:0} .jd-req .pill{min-width:70px; justify-content:center}
.rw{padding:10px 12px; border-radius:var(--r); background:var(--sunk); display:grid; gap:4px}
/* gd */
.gd-panel{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.gd-person{display:grid; justify-items:center; text-align:center; gap:4px; padding:12px; border:1px solid var(--line); border-radius:var(--r)} .gd-person small{color:var(--muted); font-size:12px}
.gd-av{display:inline-grid; place-items:center; flex:none; width:38px; height:38px; border-radius:50%; color:#fff; font-weight:800}
.gd-topic{font-size:26px; line-height:1.2} .gd-topic.sm{font-size:18px}
.gd-head{}
.gd-log{display:grid; gap:12px}
.gd-msg{display:flex; gap:10px; align-items:flex-start; max-width:88%}
.gd-msg > div{padding:10px 14px; border-radius:4px 16px 16px 16px; background:var(--surface); border:1px solid var(--line)} .gd-msg p{margin:2px 0 0}
.gd-msg.you{margin-left:auto; flex-direction:row-reverse} .gd-msg.you > div{background:var(--violet-soft); border-color:var(--violet); border-radius:16px 4px 16px 16px}
.gd-msg.mod > div{background:var(--sunk); font-style:italic}
.typedots{display:flex; gap:4px} .typedots i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:tdot 1s infinite} .typedots i:nth-child(2){animation-delay:.15s} .typedots i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,100%{opacity:.3}50%{opacity:1}}
.gd-input{position:sticky; bottom:76px; z-index:4; box-shadow:var(--shadow)}
.dimbar{display:grid; grid-template-columns:150px 1fr 48px; align-items:center; gap:10px}
.db-track{height:10px; border-radius:5px; background:var(--sunk); overflow:hidden} .db-track i{display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--blue))}
.pre{white-space:pre-wrap}
@media (max-width:600px){ .dimbar{grid-template-columns:110px 1fr 40px} .short-stage{min-height:calc(100vh - 170px); border-radius:var(--r-lg)} .gd-msg{max-width:100%} }
@media (prefers-reduced-motion: reduce){ .typedots i{animation:none} }

/* ===== v5: LMS ===== */
.mat{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap} .mat:last-child{border-bottom:0}
.mat > .grow{min-width:160px} .mat small{display:block; color:var(--muted)}
.mat-ic{display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:10px; background:var(--violet-soft); color:var(--violet)}
.mat-act{flex-wrap:wrap; gap:6px}
.news{padding:8px 0; border-bottom:1px solid var(--line)} .news:last-child{border-bottom:0} .news p{margin:4px 0}
.news-card{border-left:4px solid var(--blue); gap:12px} .news-card p{margin:4px 0}
.live-card{border:2px solid var(--teal); background:linear-gradient(90deg,var(--teal-soft),var(--surface))}
.draft{padding:12px 0; border-bottom:1px solid var(--line)} .draft:last-child{border-bottom:0} .draft p{margin:2px 0}
.preview{padding:14px; border-radius:var(--r); background:var(--sunk); border:1px dashed var(--line)}
.ed-block{padding:12px; border:1px solid var(--line); border-radius:var(--r); display:grid; gap:8px; background:var(--bg)}
.ed-bar{position:sticky; bottom:12px; z-index:6; box-shadow:var(--shadow); flex-wrap:wrap; gap:8px}
.big-code{font-size:72px; font-weight:800; letter-spacing:.2em; color:var(--violet); font-variant-numeric:tabular-nums; padding:10px 0}
.code-sm{letter-spacing:.12em; color:var(--violet)}
.bad-text{color:var(--bad)}
.stack.center{align-items:center; text-align:center}

/* ===== v6: companies, daily AI, employer, partners, demo ===== */
.co-badge{display:inline-grid; place-items:center; flex:none; width:44px; height:44px; border-radius:12px; color:#fff; font-weight:800; font-size:15px; letter-spacing:.02em}
.co-card2{text-decoration:none; color:var(--ink); transition:transform .15s} .co-card2:hover{transform:translateY(-2px); border-color:var(--violet)} .co-card2 small{display:block}
.co-hero .row{gap:14px} .co-hero p{margin:6px 0}
.co-steps{margin:0; padding-left:0; list-style:none; counter-reset:st; display:grid; gap:10px}
.co-steps li{counter-increment:st; display:grid; grid-template-columns:30px 1fr; column-gap:10px} .co-steps li::before{content:counter(st); grid-row:span 2; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--violet-soft); color:var(--violet); font-weight:800}
.co-act{display:flex; gap:12px; align-items:center; text-align:left; padding:14px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; transition:border-color .15s, transform .15s}
.co-act:hover:not([disabled]){border-color:var(--violet); transform:translateY(-1px)} .co-act[disabled]{opacity:.6; cursor:default} .co-act small{display:block; color:var(--muted)}
.co-plan{display:grid; gap:10px} .co-day{padding:10px 12px; border-radius:var(--r); background:var(--sunk)} .co-day .check{margin:4px 0}
.ct-head{position:sticky; top:64px; z-index:5} .ct-clock{text-align:right} .ct-clock span{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--violet)} .ct-clock small{display:block; color:var(--muted)}
.steps span.cur{outline:2px solid var(--violet); outline-offset:1px}
pre.code{margin:0; padding:12px; border-radius:var(--r); background:#14122b; color:#e8e6ff; font-size:13px; overflow-x:auto; white-space:pre}
.qitem.wrongq summary{color:var(--bad)}
.wo-card{border:2px solid var(--gold); background:linear-gradient(90deg,var(--gold-soft),var(--surface))}
.week-card{border-left:4px solid var(--violet)}
.debrief{border:2px solid var(--violet)}
.emp-hero p{max-width:640px}
.tcard .avatar{width:40px; height:40px; font-size:14px}
.tight-row{gap:6px; flex-wrap:wrap}
.kanban{display:grid; grid-template-columns:repeat(6,minmax(170px,1fr)); gap:10px; overflow-x:auto; padding-bottom:6px}
.kcol{background:var(--sunk); border-radius:var(--r); padding:10px; display:grid; gap:8px; align-content:start; min-height:80px}
.kcard{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px; display:grid; gap:6px} .kcard small{color:var(--muted)} .kcard select{font-size:13px; padding:4px}
.good-notice{background:var(--teal-soft); border-left:4px solid var(--teal)}
.invite-card{border:2px solid var(--teal)}
.partners-hero{padding:40px 24px}
.logo-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px}
.logo-cell{display:grid; place-items:center; gap:6px; min-height:110px; padding:18px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); text-align:center} .logo-cell small{color:var(--muted)}
.plogo{max-width:140px; max-height:56px; object-fit:contain} .plogo-mini{width:28px; height:28px; object-fit:contain; vertical-align:middle}
.pword{font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--ink)} .pword-mini{display:none}
.demo-card{border:2px dashed var(--violet)}
.menu-sep{display:block; padding:8px 12px 2px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
@media (max-width:600px){ .ct-head{top:56px} .ct-clock span{font-size:22px} }
.season-banner{flex-direction:row!important; text-align:left!important; align-items:center!important}.season-banner > .grow{flex:1; min-width:0}

/* ===== v7: mentor, prob, code lab, resume, voice, tpo, passport, league ===== */
.mentor-fab{position:fixed; right:18px; bottom:92px; z-index:40; display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:999px; background:linear-gradient(135deg,var(--violet),var(--blue)); color:#fff; font-weight:800; text-decoration:none; box-shadow:0 10px 28px rgba(110,97,233,.45)}
.mentor-fab:hover{transform:translateY(-2px)} @media (min-width:900px){.mentor-fab{bottom:28px}} @media (max-width:420px){.mentor-fab span{display:none} .mentor-fab{padding:14px}}
.mentor-av{display:grid; place-items:center; width:58px; height:58px; flex:none; border-radius:18px; background:rgba(255,255,255,.18)}
.m-log{display:grid; gap:12px} .m-msg{max-width:88%; padding:12px 14px; border-radius:4px 16px 16px 16px; background:var(--surface); border:1px solid var(--line); display:grid; gap:8px} .m-msg p{margin:0; line-height:1.55}
.m-msg.me{margin-left:auto; border-radius:16px 4px 16px 16px; background:var(--violet-soft); border-color:var(--violet)}
.m-input{position:sticky; bottom:76px; gap:10px; box-shadow:var(--shadow)} .m-input textarea{flex:1; min-height:52px}
.prob-card{border:2px solid var(--teal)} .prob-n{font-size:40px; line-height:1; margin:4px 0}
.prob-ring{--p:50; width:74px; height:74px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--teal) calc(var(--p)*1%), var(--sunk) 0)} .prob-ring span{display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--surface); font-weight:800}
.link.block{display:block; margin:3px 0}
.parent-note{white-space:pre-wrap; font-family:inherit; font-size:14px; background:var(--sunk); padding:12px; border-radius:var(--r); margin:0}
.cl-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:14px} @media (max-width:860px){.cl-grid{grid-template-columns:1fr}}
.code-ed{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px; line-height:1.5; min-height:300px; background:#14122b; color:#e8e6ff; border-radius:var(--r); padding:12px; tab-size:4; white-space:pre; overflow:auto}
.cl-t{padding:8px 10px; border-radius:10px; border:1px solid var(--line)} .cl-t.ok{background:var(--teal-soft)} .cl-t.bad{background:var(--bad-soft)} pre.code.err{background:#3a0f16}
.cl-ex pre.code{margin:4px 0 8px}
.rs-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start} @media (max-width:900px){.rs-grid{grid-template-columns:1fr}}
.rs-side{position:sticky; top:76px} .rs-side.full{grid-column:1/-1; position:static}
.rs-page{background:#fff; color:#16152A; padding:28px 30px; border-radius:6px; box-shadow:var(--shadow); font-size:12.5px; line-height:1.45; font-family:Figtree,Arial,sans-serif}
.rs-page h3{font-size:22px; margin:0} .rs-contact{color:#55546A; margin:2px 0 8px} .rs-sec h4{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#3a2fb8; border-bottom:1.5px solid #6E61E9; margin:10px 0 5px; padding-bottom:2px}
.rs-page p{margin:2px 0} .rs-row{display:flex; justify-content:space-between; gap:10px} .rs-row span{color:#55546A; white-space:nowrap} .rs-page ul{margin:2px 0 6px; padding-left:18px}
.vi-stage{display:grid; grid-template-columns:1.4fr 1fr; gap:14px} @media (max-width:760px){.vi-stage{grid-template-columns:1fr}}
.vi-panel{padding:26px; border-radius:var(--r-xl); background:linear-gradient(160deg,var(--violet),var(--violet-deep)); color:#fff; display:grid; gap:10px; justify-items:start; min-height:320px}
.vi-panel .eyebrow{color:var(--gold)} .vi-q{color:#fff; font-size:22px; line-height:1.3}
.vi-avatar{display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.16)} .vi-avatar.talking{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(226,179,30,.6)}50%{box-shadow:0 0 0 14px rgba(226,179,30,0)}}
.vi-state{opacity:.9; font-size:14px} .vi-tx{min-height:60px; font-size:15px; line-height:1.5; opacity:.95}
.vi-cam{display:grid; gap:8px; align-content:start} .vi-cam video{width:100%; border-radius:var(--r-lg); background:#000; transform:scaleX(-1); aspect-ratio:4/3; object-fit:cover} .vi-chips{display:flex; flex-wrap:wrap; gap:6px}
.tpo-card{border:2px solid var(--blue)}
.pp-qr{background:#fff; padding:6px; border-radius:8px; flex:none} .pp-qr img,.pp-qr canvas{display:block}
.pp-kpis{margin:10px 0} .pp-kpis div{display:grid} .pp-kpis b{font-size:22px} .pp-kpis small{opacity:.85}
.lb-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px} .lb-row small{display:block; color:var(--muted)} .lb-row.me{background:var(--violet-soft); border:1px solid var(--violet)}
.lb-n{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--sunk); font-weight:800; font-size:13px}
.ch-card{border:2px solid var(--gold)}
.week-card.row,.news-card.row,section.card.row.between{flex-direction:row!important; text-align:left!important; align-items:center!important; justify-content:space-between!important}.rs-row .l{color:#16152A!important; white-space:normal!important}
.week-card.row,.news-card.row{flex-wrap:nowrap!important;gap:14px}.week-card.row>div,.news-card.row>div{flex:1;min-width:0}

/* ===== v8: aptmap, games, comm, iday, projects, seniors, screening, a11y ===== */
.apm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.apm-tile{display:grid; gap:2px; text-align:left; padding:14px; border-radius:var(--r-lg); border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer}
.apm-tile small{text-transform:uppercase; letter-spacing:.06em; font-size:10px; color:var(--muted)} .apm-tile span{font-size:12px; color:var(--muted)}
.apm-tile.green{border-color:var(--teal); background:var(--teal-soft)} .apm-tile.amber{border-color:var(--gold); background:var(--gold-soft)} .apm-tile.red{border-color:var(--bad); background:var(--bad-soft)}
.gm-grid{display:grid; grid-template-columns:repeat(5,52px); gap:8px; justify-content:center}
.gm-cell{width:52px; height:52px; border-radius:10px; border:1.5px solid var(--line); background:var(--sunk); cursor:pointer} .gm-cell.lit{background:var(--violet)} .gm-cell.ok{background:var(--teal)} .gm-cell.no{background:var(--bad)}
.gm-row{display:flex; gap:10px; justify-content:center; font-size:34px} .gm-row span{display:grid; place-items:center; width:54px; height:54px; border-radius:12px; background:var(--sunk)}
.gm-eq{display:flex; gap:10px; justify-content:center; align-items:center; font-size:32px; font-weight:800} .gm-blank{display:grid; place-items:center; width:54px; height:60px; border-radius:12px; border:2px dashed var(--violet); cursor:pointer} .gm-blank.on{background:var(--violet-soft); border-style:solid}
.gm-keys{display:grid; grid-template-columns:repeat(9,1fr); gap:6px; max-width:520px; margin:0 auto} @media (max-width:520px){.gm-keys{grid-template-columns:repeat(5,1fr)}}
.ct-card h2{max-width:640px} .vi-tx.dark{color:var(--ink); background:var(--sunk); padding:10px; border-radius:10px; width:100%}
.breathe{display:grid; place-items:center; gap:10px; padding:10px} .breathe-circle{width:80px; height:80px; border-radius:50%; background:var(--teal-soft); border:3px solid var(--teal); transition:transform 4s ease-in-out}
.breathe-circle.in{transform:scale(1.6)} .breathe-circle.hold{transform:scale(1.6)} .breathe-circle.out{transform:scale(1)} .breathe-circle.hold2{transform:scale(1)}
.linklike{background:none; border:0; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer}
.pr-step{padding:12px 0; border-bottom:1px solid var(--line); display:grid; gap:8px} .pr-step.done b{color:var(--muted)}
.sn-ans{padding:10px 12px; border-left:3px solid var(--teal); background:var(--teal-soft); border-radius:0 10px 10px 0} .sn-ans p{margin:2px 0}
.copilot{border:2px solid var(--violet)}
.mentor-cta{gap:12px; text-decoration:none; color:var(--ink); border:2px solid var(--violet); background:linear-gradient(90deg,var(--violet-soft),var(--surface))} .mentor-av.sm{width:44px; height:44px; border-radius:14px; background:var(--violet); color:#fff}
.moment{gap:12px; text-decoration:none; color:var(--ink); border:2px solid var(--gold); background:linear-gradient(90deg,var(--gold-soft),var(--surface))}
.sc-q{margin-bottom:6px}
html[data-fs="1"]{font-size:112%} html[data-fs="2"]{font-size:125%}
html[data-font="lexend"] body, html[data-font="lexend"] button, html[data-font="lexend"] input, html[data-font="lexend"] textarea, html[data-font="lexend"] select{font-family:Lexend,Figtree,sans-serif!important; letter-spacing:.01em; word-spacing:.08em}
@media (prefers-color-scheme: light){html[data-contrast="1"]{--line:#6b6a80; --muted:#2e2d40} html[data-contrast="1"] .small, html[data-contrast="1"] .muted{color:#2e2d40!important}}
@media (prefers-color-scheme: dark){html[data-contrast="1"]{--line:#a9a8c0; --muted:#e2e1ef} html[data-contrast="1"] .small, html[data-contrast="1"] .muted{color:#e2e1ef!important}}
html[data-motion="1"] *, html[data-lite="1"] *{animation:none!important; transition:none!important}
.mentor-cta.row,.moment.row{flex-direction:row!important; text-align:left!important; align-items:center!important; justify-content:space-between!important; flex-wrap:nowrap!important}.mentor-cta>.grow,.moment>.grow{flex:1;min-width:0}

/* ===== v9: playlist, mock drive, predictor, peer, cpl, forecast ===== */
.pl-card{border:2px solid var(--gold); background:linear-gradient(135deg,var(--gold-soft),var(--surface))}
.pl-list{margin:0; padding-left:20px; display:grid; gap:6px} .pl-list li{display:flex; justify-content:space-between; align-items:center; gap:10px} .pl-list li small{color:var(--muted); white-space:nowrap} .pl-list li.done span{color:var(--muted); text-decoration:line-through}
.flow-bar{position:fixed; left:50%; transform:translateX(-50%); bottom:84px; z-index:39; display:flex; align-items:center; gap:10px; max-width:min(560px,calc(100% - 32px)); padding:10px 14px; border-radius:999px; background:var(--ink); color:#fff; text-decoration:none; font-weight:700; font-size:14px; box-shadow:var(--shadow)}
.flow-bar .grow{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} @media (min-width:900px){.flow-bar{bottom:24px}}
.sl-card{border:2px solid var(--violet)}
.md-track{display:grid; grid-template-columns:repeat(4,1fr); gap:8px} .md-step{display:grid; gap:2px; justify-items:center; text-align:center; padding:12px 6px; border-radius:var(--r); background:var(--sunk); border:2px solid transparent}
.md-step b{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--surface)} .md-step small{color:var(--muted)} .md-step.cur{border-color:var(--violet)} .md-step.ok{background:var(--teal-soft)} .md-step.bad{background:var(--bad-soft)}
.forecast{border:2px solid var(--teal)}
.cpl-hero{background:linear-gradient(135deg,#1d1b4f,var(--violet))}

.ed-block.on{border-color:var(--violet); background:var(--violet-soft)}
.in-kanban{grid-template-columns:repeat(6,minmax(140px,1fr))}
@media (max-width:899px){.flow-bar{left:16px; right:84px; transform:none; max-width:none}}

/* ===== v10: skill map, panel, english, platform, writing, linkedin, bounce, impact, aiq, tour ===== */
.ring.sm{width:62px; height:62px}.ring.sm>div{width:50px; height:50px}.ring.sm b{font-size:.9rem}
.good-text{color:var(--good)}
.br-radar{width:100%; max-width:420px; margin:0 auto; display:block}
.br-ring{fill:none; stroke:var(--line); stroke-width:1}
.br-poly{fill:color-mix(in srgb, var(--violet) 28%, transparent); stroke:var(--violet); stroke-width:2.5; stroke-linejoin:round}
.br-lbl{font-size:10.5px; font-weight:700; fill:var(--muted)}
.br-bar,.imp-mini{height:8px; border-radius:99px; background:var(--sunk); overflow:hidden}
.br-bar i,.imp-mini i{display:block; height:100%; background:var(--violet); border-radius:99px}
.br-mini{padding:8px 0; border-bottom:1px solid var(--line)}
.br-sum{display:flex; flex-direction:column; gap:4px}
.trick{border-left:3px solid var(--gold); background:var(--gold-soft); padding:10px 12px; border-radius:10px; margin:8px 0}
.trick p{margin:2px 0}
.sp-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:10px}
.sp-opt{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:12px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font:inherit}
.sp-opt:hover{border-color:var(--violet)}
.sp-opt span{font-size:.82rem; color:var(--muted)}
.apt2-card{flex-wrap:wrap; gap:12px}
.en-big{font-size:1.25rem; font-weight:700; line-height:1.45}
.en-say{border-top:1px solid var(--line); padding-top:12px}
.en-slip s{color:var(--muted)}
.pn-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.pn-p{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:14px 10px; border-radius:var(--r); background:var(--sunk); transition:opacity .2s, transform .2s}
.pn-p small{color:var(--muted)}
.pn-p.dim{opacity:.45}
.pn-p.speaking{outline:2px solid var(--violet); transform:translateY(-2px); background:var(--violet-soft)}
.pn-av{width:44px; height:44px; border-radius:50%; display:inline-grid; place-items:center; font-weight:900; background:var(--violet); color:var(--on-violet); flex:none}
.pn-av.sm{width:30px; height:30px; font-size:.75rem}
.pn-p.teal .pn-av,.pn-vote.teal .pn-av,.pn-line.teal .pn-av{background:var(--teal)}
.pn-p.blue .pn-av,.pn-vote.blue .pn-av,.pn-line.blue .pn-av{background:var(--blue)}
.pn-vote .row.nowrap{gap:10px}
.pn-chat{display:flex; flex-direction:column; gap:10px}
.pn-line{display:flex; gap:10px; align-items:flex-start}
.pn-line p{margin:0; background:var(--sunk); padding:8px 12px; border-radius:12px; flex:1}
.srw{margin-top:10px; border-top:1px dashed var(--line); padding-top:10px}
.srw select{max-width:100%}
.star{display:flex; flex-direction:column; gap:6px; margin-top:6px}
.star-row{display:flex; gap:10px; align-items:flex-start}
.star-row p{margin:0}
.star-l{width:26px; height:26px; border-radius:8px; display:inline-grid; place-items:center; font-weight:900; background:var(--violet-soft); color:var(--violet-deep); flex:none}
.pf-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px}
.pf-mode{text-align:left; cursor:pointer; font:inherit; color:var(--ink); border:1px solid var(--line)}
.pf-mode:hover{border-color:var(--violet)}
.pf-instr ol{display:flex; flex-direction:column; gap:6px}
.pf-key{display:inline-block; padding:1px 8px; border-radius:6px; font-size:.75rem; font-weight:700; margin:0 2px}
.pf-key.ans,.pf-cell.ans{background:var(--good); color:#fff}
.pf-key.not,.pf-cell.not{background:var(--bad); color:#fff}
.pf-key.mark,.pf-cell.mark{background:var(--violet); color:#fff}
.pf-key.nv,.pf-cell.nv{background:var(--sunk); color:var(--muted)}
.pf-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); position:sticky; top:64px; z-index:5}
.pf-clock{font-variant-numeric:tabular-nums; font-weight:900; font-size:1.1rem; padding:4px 10px; border-radius:8px; background:var(--sunk)}
.pf-body{display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:12px; align-items:start}
.pf-body:has(> :only-child){grid-template-columns:1fr}
.pf-cells{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.pf-cell{height:34px; border-radius:8px; border:0; font-weight:800; cursor:pointer; font:inherit}
.pf-cell.cur{outline:2px solid var(--ink); outline-offset:1px}
.pf-actions{flex-wrap:wrap}
.proctor .pf-top{border-color:var(--bad)}
.wr-area{font-size:1rem; line-height:1.6; min-height:280px}
.wr-marked{line-height:1.7; font-size:.95rem}
mark.wr-err{background:var(--bad-soft); color:inherit; border-bottom:2px solid var(--bad); border-radius:3px; padding:0 2px; cursor:help}
.wr-better{white-space:normal; line-height:1.6}
.li-copy{padding:10px 0; border-bottom:1px solid var(--line); gap:10px}
.li-copy p{margin:0}
.li-about{line-height:1.6}
.bn-line{font-size:1.1rem; font-weight:800; color:var(--violet-deep)}
.bn-spark{display:flex; align-items:flex-end; gap:6px; height:80px}
.bn-spark span{flex:1; background:var(--violet); border-radius:6px 6px 2px 2px; min-height:6px}
.imp-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px}
.imp-kpi{gap:4px}
.imp-big{font-size:2rem; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums}
.imp-big.sm{font-size:1.1rem}
.imp-bars{display:flex; flex-direction:column; gap:10px}
.imp-bar{display:grid; grid-template-columns:minmax(110px,1.2fr) 2fr auto; gap:10px; align-items:center}
.imp-track{position:relative; height:22px; background:var(--sunk); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; gap:2px}
.imp-track i{display:block; height:100%; background:var(--violet); border-radius:4px}
.imp-track i.b2{background:var(--teal)}
.imp-track:has(.b2) i{height:10px}
.imp-key{display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--violet); vertical-align:middle; margin:0 2px 0 8px}
.imp-key.b{background:var(--teal)}
.imp-line{width:100%; height:auto}
.imp-line .grid{stroke:var(--line)}
.imp-line .ln{fill:none; stroke:var(--violet); stroke-width:2.5; stroke-linejoin:round}
.imp-line .dot{fill:var(--violet)}
.imp-line .ax{font-size:11px; fill:var(--muted)}
.imp-line .lbl{font-size:12px; font-weight:800; fill:var(--ink)}
.imp-table{display:flex; flex-direction:column}
.imp-tr{display:grid; grid-template-columns:2fr .7fr 1.2fr 1.4fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center; font-size:.9rem}
.imp-tr.head{font-size:.75rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.imp-tr .imp-mini{display:inline-block; width:60px; vertical-align:middle}
.imp-ai{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:12px}
.imp-ai div{display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:var(--r); background:var(--sunk)}
.imp-ai b{font-size:1.4rem; font-variant-numeric:tabular-nums}
.imp-model{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:10px}
.imp-total{font-size:1.05rem; border-top:2px solid var(--ink)}
.aiq{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:8px; border-top:1px dashed var(--line)}
.aiq-b{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:2px 10px; cursor:pointer; font-size:.9rem}
.aiq-b:hover{border-color:var(--violet)}
.aiq-why{cursor:pointer; border:1px solid var(--line)}
.aiq-flag{padding:12px 0; border-bottom:1px solid var(--line)}
.aiq-flag.done{opacity:.6}
.aiq-flag p{margin:0}
.v10-coaches{margin-bottom:4px}
#tour-root .tour{position:fixed; left:16px; bottom:16px; z-index:60; width:min(380px,calc(100vw - 32px)); background:var(--surface); color:var(--ink); border:2px solid var(--violet); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:14px 16px; display:flex; flex-direction:column; gap:8px}
#tour-root .tour h3{margin:0; font-size:1.1rem}
#tour-root .tour p{margin:0}
.tour-solve{color:var(--violet-deep)}
.tour-x{border:0; background:var(--sunk); color:var(--ink); width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:.9rem}
.tour-dots{display:flex; gap:5px; flex-wrap:wrap}
.tour-dots button{width:9px; height:9px; border-radius:50%; border:0; padding:0; background:var(--line); cursor:pointer}
.tour-dots button.on{background:var(--violet); width:20px; border-radius:99px}
body.touring .mentor-fab,body.touring .flow-bar{display:none !important}
@media (max-width:720px){
  .pn-row{grid-template-columns:1fr}
  .pn-p{flex-direction:row; text-align:left; justify-content:flex-start; padding:10px 12px}
  .pn-p p{display:none}
  .pf-body{grid-template-columns:1fr}
  .pf-top{top:56px}
  .imp-tr{grid-template-columns:1.6fr .6fr 1.2fr; font-size:.82rem}
  .imp-tr span:nth-child(4){grid-column:1 / -1}
  .imp-bar{grid-template-columns:1fr auto}
  .imp-bar .imp-track{grid-column:1 / -1; grid-row:2}
  #tour-root .tour{left:8px; right:8px; bottom:76px; width:auto}
}

/* ===== v11: focus mode ===== */
.fx-hero{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap}
.fx-hero h1{margin:2px 0 0; font-size:clamp(1.6rem,4vw,2.2rem)}
.fx-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:10px}
.fx-grid:empty{display:none}
.fx-tool{display:flex; flex-direction:column; gap:3px; padding:14px; text-align:left; font:inherit; color:inherit; cursor:pointer}
.fx-hit{border:2px solid var(--violet)}
.fx-find input{font-size:1.05rem; padding:14px}
.fx-stage{margin-top:4px}
.fx-all>summary{list-style:none; cursor:pointer}
.fx-all>summary::-webkit-details-marker{display:none}
.fx-all[open]>summary{margin-bottom:16px}
.fx-all[open]{display:flex; flex-direction:column; gap:18px}
.row.end{justify-content:flex-end}.row.center{justify-content:center}
.br-card{display:flex !important; flex-direction:row !important; align-items:center !important; text-align:left !important; gap:14px}
.br-card .grow{min-width:0}
.fx-all>summary{display:flex !important; flex-direction:row !important; justify-content:space-between !important; align-items:center !important; text-align:left !important}
.pk-qr{background:#fff; padding:10px; border-radius:12px; display:inline-block; line-height:0}
.pk-qr-row{align-items:center; gap:16px; flex-wrap:nowrap}
.pk-big{align-items:center; text-align:center}
.pk-msg{overflow-wrap:anywhere; line-height:1.6; background:var(--sunk); padding:12px; border-radius:10px}
.pk-step .pill{margin-right:4px}
@media (max-width:520px){.pk-qr-row{flex-wrap:wrap}}
.en-opts{flex-wrap:wrap; align-items:flex-end}.en-opts .field{min-width:200px}
.drop{border:2px solid var(--gold); background:linear-gradient(180deg, var(--gold-soft), var(--surface) 60%)}
.drop-i{display:flex; gap:12px; align-items:center; text-align:left; width:100%; padding:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer}
.drop-i:hover{border-color:var(--violet)}
.drop-i b{display:block; font-size:.95rem}
.drop-i.done{opacity:.6}
.drop-ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--violet-soft); color:var(--violet-deep); flex:none; font-weight:900}
.icon-btn{position:relative; width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:800; text-decoration:none; flex:none}
.icon-btn:hover{border-color:var(--violet)}
.bell-n{position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--bad); color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center}
.bell-n[hidden]{display:none}
.bar-right{gap:8px}
.nudge{gap:12px; align-items:center}
.nudge.gold{border:2px solid var(--gold)}
.nudge.violet{border:2px solid var(--violet)}
.nudge p{margin:2px 0 0}
.rem-row{padding:10px 0; border-bottom:1px solid var(--line); gap:12px}
.rem-time{width:auto; min-width:120px; padding:8px 10px}
.rem-way{display:flex; flex-direction:column; gap:6px; padding:12px 0; border-bottom:1px solid var(--line)}
.rem-way p{margin:0}
.help-search{font-size:1.05rem; padding:14px}
.help-tile{align-items:flex-start; text-align:left; font:inherit; color:inherit; cursor:pointer}
.help-steps{display:flex; flex-direction:column; gap:8px}
.help-q summary{cursor:pointer}
.help-q p{margin:10px 0 0}
.help-gloss{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:14px}
.help-gloss p{margin:2px 0 0}
.new-here{border:2px dashed var(--violet); gap:12px}
@media (max-width:520px){ .bar-right .xp-chip{display:none} .new-here{flex-wrap:wrap} }
.nudge{display:flex !important; flex-direction:row !important; align-items:center !important; text-align:left !important}
.nudge .grow{min-width:0}
.help-tile{align-items:flex-start !important; text-align:left !important}
.new-here{display:flex !important; flex-direction:row !important; text-align:left !important; align-items:center !important}
.buddy-vs{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center}
.bv{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:16px; background:var(--sunk); border-radius:var(--r)}
.bv-x{font-weight:900; color:var(--muted)}
.teal-av{background:var(--teal)}
.win-grid,.opp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:12px}
.win-tile{align-items:flex-start !important; text-align:left !important; font:inherit; color:inherit; cursor:pointer}
.win-img{width:100%; max-width:720px; border-radius:12px; box-shadow:var(--shadow)}
.pitch-video{position:relative; width:100%; max-width:640px; aspect-ratio:4/3; background:#16152A; border-radius:16px; overflow:hidden; display:grid; place-items:center}
.pitch-video video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.pitch-video video[controls]{transform:none}
.pitch-ph{position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:8px; color:#C9C6E8; text-align:center; padding:24px}
.pitch-rec{position:absolute; top:12px; left:12px; background:rgba(200,30,50,.9); color:#fff; font-weight:800; padding:4px 10px; border-radius:99px; font-size:.85rem}
.ty-text{font-size:1.15rem; line-height:1.8; font-family:var(--mono-f); background:var(--sunk); padding:16px; border-radius:12px; color:var(--muted)}
.ty-ok{color:var(--good)}.ty-bad{color:var(--bad); background:var(--bad-soft); text-decoration:underline}.ty-cur{background:var(--violet-soft); color:var(--ink); border-bottom:2px solid var(--violet)}
.ty-in{font-family:var(--mono-f); font-size:1.05rem}
.ty-res{justify-content:flex-start}
.ps-opt{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.ps-opt>span:first-child{flex:1}
.chipbtn.good-on{background:var(--good); color:#fff; border-color:var(--good)}
.chipbtn.bad-on{background:var(--bad); color:#fff; border-color:var(--bad)}
.ev{gap:16px; align-items:flex-start !important; flex-direction:row !important; text-align:left !important}
.ev-date{width:64px; flex:none; border-radius:12px; background:var(--violet-soft); color:var(--violet-deep); display:flex; flex-direction:column; align-items:center; padding:8px 0}
.ev-date b{font-size:1.6rem; line-height:1}
.sel-opt{border:2px solid var(--violet) !important; background:var(--violet-soft) !important}
.asg{border:2px solid var(--teal)}
.naac-scroll{overflow-x:auto}
.naac-t{width:100%; border-collapse:collapse; font-size:.9rem}
.naac-t th,.naac-t td{border-bottom:1px solid var(--line); padding:8px; text-align:left}
.naac-t th{font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.naac-t input{width:110px}
.tpo-links{gap:8px; flex-wrap:wrap}
.listen-b{margin-top:8px}
@media (max-width:620px){ .buddy-vs{grid-template-columns:1fr} .bv-x{display:none} .ps-opt{flex-direction:column; align-items:flex-start} }
@media (max-width:620px){ .asg .drop-i{flex-wrap:wrap} .asg .drop-i>.row{width:100%; justify-content:flex-end} }

/* ===== v16 Your Goal journey ===== */
.topnav a span{white-space:nowrap}
.yg-goalline{display:flex !important; flex-direction:row !important; align-items:center; justify-content:space-between; text-align:left}

.yg-strip{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); gap:4px; counter-reset:none}
.yg-strip li{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; position:relative; color:var(--muted); font-size:.74rem; font-weight:700}
.yg-strip li::before{content:""; position:absolute; top:13px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0}
.yg-strip li:first-child::before{display:none}
.yg-strip li.done::before,.yg-strip li.now::before{background:var(--violet)}
.yg-dot{position:relative; z-index:1; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:2px solid var(--line); font-size:.8rem; font-weight:800; color:var(--muted)}
.yg-strip li.done .yg-dot{background:var(--violet); border-color:var(--violet); color:#fff}
.yg-strip li.now .yg-dot{border-color:var(--violet); color:var(--violet); box-shadow:0 0 0 4px var(--violet-soft)}
.yg-strip li.now{color:var(--ink)}
.yg-strip.compact .yg-lab{font-size:.68rem}
@media (max-width:640px){.yg-strip .yg-lab{display:none} .yg-strip li.now .yg-lab{display:block; position:absolute; top:32px; white-space:nowrap} .yg-strip{margin-bottom:14px}}
.yg-next{display:flex; flex-direction:column; gap:10px; background:linear-gradient(135deg,var(--violet),var(--violet-deep)); color:#fff; border:none; text-decoration:none}
.yg-next .eyebrow{color:#E9E6FF} .yg-next h2{color:#fff; font-size:1.5rem; margin:0} .yg-next p{margin:0; color:#F1EFFF}
.yg-next .small{color:#E9E6FF; display:inline-flex; align-items:center; gap:4px}
.yg-hello h1{margin:0}
.yg-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.yg-list li{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; background:var(--surface)}
.yg-li{flex:1; display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink); min-width:0}
.yg-k{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--violet-deep)}
.yg-habits{border-top:1px solid var(--line); padding-top:12px; display:flex; flex-direction:column; gap:8px}
.yg-habits p{margin:0}
.yg-drop summary{cursor:pointer; list-style:none} .yg-drop summary::-webkit-details-marker{display:none}
.yg-drop[open] summary{margin-bottom:12px} .yg-drop .drop{box-shadow:none; border:none; padding:0}
.yg-goalline{text-decoration:none; color:var(--ink); gap:16px}
.yg-ring{--p:0; width:58px; height:58px; flex:none; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--violet) calc(var(--p)*1%), var(--violet-soft) 0)}
.yg-ring b{width:44px; height:44px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font-size:.85rem}
.yg-goal{display:flex !important; flex-wrap:wrap; grid-template-columns:none; gap:16px; align-items:flex-end; justify-content:space-between}
.yg-goal > .grow{flex:1 1 280px; min-width:0}
.yg-goal h1{font-size:1.6rem; margin:4px 0 6px; color:#fff} .yg-goal p{margin:0}
.yg-ms{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.yg-ms button{width:100%; height:100%; text-align:left; display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer}
.yg-ms small{color:var(--muted); font-size:.76rem; line-height:1.3}
.yg-ms li.now button{border:2px solid var(--violet); background:var(--violet-soft)}
.yg-ms li.done .yg-dot{background:var(--good); border-color:var(--good); color:#fff}
.yg-ms li.now .yg-dot{border-color:var(--violet); color:var(--violet)}
.yg-ms .meter{margin-top:auto}
@media (max-width:760px){.yg-ms{grid-template-columns:1fr} .yg-ms button{flex-direction:row; flex-wrap:wrap; align-items:center} .yg-ms small{flex-basis:100%} .yg-ms .meter{flex-basis:100%}}
.yg-blocks{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
@media (min-width:1000px){.yg-blocks{grid-template-columns:repeat(5,1fr)}}
.yg-b{border:1px solid var(--line); border-radius:var(--r); padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--surface)}
.yg-b h3{display:flex; align-items:center; gap:6px; margin:0; font-size:1rem; color:var(--violet-deep)}
.yg-b p{margin:0}
.yg-blk{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.yg-blk a{display:flex; flex-direction:column; text-decoration:none; color:var(--ink); padding:6px 8px; border-radius:10px; background:var(--sunk)}
.yg-blk a small{color:var(--muted); font-size:.76rem}
.yg-blk li.ok a{background:var(--good-soft)}
.yg-hb{width:100%; display:flex; align-items:center; gap:8px; text-align:left; font:inherit; color:var(--ink); padding:6px 8px; border-radius:10px; border:1px solid var(--line); background:var(--surface); cursor:pointer}
.yg-hb span{width:20px; height:20px; flex:none; border-radius:6px; border:2px solid var(--line); display:grid; place-items:center; font-size:.75rem; color:#fff}
.yg-hb.on span{background:var(--good); border-color:var(--good)} .yg-hb b{font-weight:600; font-size:.88rem}
.yg-prove{border-color:var(--gold); background:var(--gold-soft)} .yg-prove .yg-blk a{background:var(--surface)}
.yg-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.yg-tile{display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); padding:14px}
.yg-tile.now{border:2px solid var(--violet)} .yg-tile .pill{align-self:flex-start; margin-top:4px}
.yg-pc{text-align:left; font:inherit; color:var(--ink); cursor:pointer}
.yg-preview-ms{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px} .yg-preview-ms li{display:flex; flex-direction:column}
.yg-preview{border-style:dashed}
.ask-coach{position:fixed; right:18px; bottom:24px; z-index:40; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 12px; border-radius:999px; background:var(--ink); color:#fff; text-decoration:none; box-shadow:0 10px 28px rgba(18,18,24,.3)}
.ask-coach span{display:flex; flex-direction:column; line-height:1.15} .ask-coach small{font-size:.72rem; opacity:.8}
@media (max-width:760px){.ask-coach{bottom:84px; right:12px; padding:8px 12px 8px 10px} .ask-coach small{display:none}}

/* ===== UX V2 · Batch B1 ===== */
.ux2-demo{background:var(--gold-soft); color:var(--ink); font-size:.82rem; font-weight:600; padding-block:6px; border-bottom:1px solid var(--line)}
.ux2-ex{display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--gold-soft); color:var(--warn); white-space:nowrap}
.ux2-views{margin-left:12px} .rolepick.up .menu{top:auto; bottom:calc(100% + 6px); left:0; right:auto}
.ux2-pagebar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; min-height:40px}
.ux2-pagebar .backlink{margin:0}
.ask-coach.inline{position:static; box-shadow:none; padding:8px 14px 8px 10px; margin-left:auto; background:var(--violet-soft); color:var(--violet-deep)}
.ask-coach.inline small{opacity:.85}
.ux2-today{gap:20px}
.ux2-hello{display:flex; flex-direction:column; gap:6px}
.ux2-hello h1{font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; margin:0}
.ux2-goal{display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; text-decoration:none; color:var(--ink); font-size:.95rem}
.ux2-goal b{font-weight:700}
.ux2-next{background:linear-gradient(135deg,var(--violet),var(--violet-deep)); color:#fff; border:none; gap:14px; padding:24px}
.ux2-next .eyebrow{color:#E9E6FF} .ux2-next h2{color:#fff; font-size:1.55rem; margin:0}
.ux2-facts{display:grid; grid-template-columns:1.6fr 1.2fr .6fr; gap:14px; margin:0}
.ux2-facts div{background:rgba(255,255,255,.1); border-radius:12px; padding:10px 12px}
.ux2-facts dt{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#E9E6FF; margin-bottom:4px}
.ux2-facts dd{margin:0; font-size:.94rem; line-height:1.4; color:#fff}
.ux2-note{color:#F1EFFF; margin:0}
.ux2-next-actions{gap:16px} .ux2-next-actions .link{color:#fff; display:inline-flex; align-items:center; gap:6px; text-decoration:underline; text-underline-offset:3px}
.ux2-week{gap:14px}
.ux2-week-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.ux2-week-row > div{display:flex; flex-direction:column; gap:4px; background:var(--sunk); border-radius:12px; padding:12px}
.ux2-week-row b{font-size:1.3rem; font-weight:800} .ux2-week-row small{color:var(--muted); font-size:.8rem}
.ux2-days{display:flex; gap:4px; height:22px; align-items:center} .ux2-days i{width:14px; height:14px; border-radius:4px; background:var(--line)} .ux2-days i.on{background:var(--teal)}
.ux2-habits{display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:12px}
.ux2-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.ux2-list li{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px}
.ux2-li{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink)}
.ux2-coming h2,.ux2-today > section > .row h2{font-size:1.15rem}
.ux2-up{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; text-decoration:none; color:var(--ink)}
.ux2-up > span:nth-child(2){flex:1; min-width:0; display:flex; flex-direction:column}
.ux2-date{display:grid; place-items:center; min-width:56px; padding:6px; border-radius:12px; background:var(--violet); color:#fff; text-align:center; line-height:1.1} .ux2-date b{font-size:1.4rem} .ux2-date small{font-size:.7rem}
.ux2-strip .yg-lab{font-size:.7rem}
@media (max-width:760px){
  .ux2-facts{grid-template-columns:1fr}
  .ux2-week-row{grid-template-columns:1fr 1fr} .ux2-week-row > div:last-child{grid-column:span 2}
  .ux2-next{padding:18px} .ux2-next h2{font-size:1.3rem}
  .ux2-list li{flex-wrap:wrap}
  .ask-coach.inline small{display:none}
  .ask-coach.inline span{flex-direction:row; gap:6px; align-items:baseline}
}
/* ===== UX V2 · Batch B2: Your Goal ===== */
.ux2-gframe{display:flex; flex-direction:column; gap:12px; margin-bottom:20px}
.ux2-gnav{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:4px}
.ux2-gnav::-webkit-scrollbar{display:none}
.ux2-gnav a{flex:1 0 auto; text-align:center; padding:9px 14px; border-radius:10px; text-decoration:none; color:var(--muted); font-weight:700; font-size:.9rem; white-space:nowrap}
.ux2-gnav a:hover{background:var(--sunk); color:var(--ink)}
.ux2-gnav a[aria-current="page"]{background:var(--violet); color:var(--on-violet)}
.ux2-gsub{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none}
.ux2-gsub a{flex:none; padding:6px 12px; border-radius:999px; border:1.5px solid var(--line); text-decoration:none; color:var(--muted); font-weight:700; font-size:.82rem; white-space:nowrap}
.ux2-gsub a[aria-current="page"]{border-color:var(--violet); color:var(--violet-text); background:var(--violet-soft)}
.ux2-gnav .s{display:none}
.ux2-ghead{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:.95rem}
.ux2-ghead a{color:var(--ink); text-decoration:none} .ux2-ghead a:hover b{color:var(--violet)}
.ux2-gnext{margin-bottom:20px}
.ux2-goalview .ux2-gnext{margin-bottom:0}
.ux2-facts.two{grid-template-columns:1.4fr 1fr}
.ux2-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.ux2-steps a{display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--ink); border:1px solid var(--line)}
.ux2-steps a:hover{border-color:var(--violet)}
.ux2-steps a > span:nth-child(2){display:flex; flex-direction:column; min-width:0} .ux2-steps small{color:var(--muted); font-size:.82rem}
.ux2-sdot{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--sunk); font-weight:800; font-size:.85rem}
.ux2-steps li.done .ux2-sdot{background:var(--teal); color:#fff}
.ux2-steps li.now a{border-color:var(--violet); background:var(--violet-soft)} .ux2-steps li.now .ux2-sdot{background:var(--violet); color:#fff}
.ux2-sstate{font-size:.74rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.ux2-steps li.done .ux2-sstate{color:var(--good)} .ux2-steps li.now .ux2-sstate{color:var(--violet)}
.ux2-gaplist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; counter-reset:g}
.ux2-gaplist a{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); text-decoration:none; color:var(--ink)}
.ux2-gaplist a:hover{border-color:var(--violet)} .ux2-gaplist small{color:var(--muted)}
.ux2-src{align-self:flex-start; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:999px}
.ux2-src-goal{background:var(--violet-soft); color:var(--violet)} .ux2-src-map{background:var(--gold-soft); color:var(--warn)} .ux2-src-diag{background:var(--blue-soft); color:var(--blue)}
.ux2-msstate{font-weight:700; color:var(--violet)}
.ux2-roadfor a{font-weight:700}
@media (max-width:760px){
  .ux2-gnav{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:3px}
  .ux2-gnav a{padding:8px 2px; font-size:.76rem} .ux2-gnav .l{display:none} .ux2-gnav .s{display:inline}
  .ux2-steps a{grid-template-columns:30px minmax(0,1fr)} .ux2-sstate{display:none}
  .ux2-facts.two{grid-template-columns:1fr}
}

/* ===== UX V2 · Batch B3: Practice and AI Coaches ===== */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ux2-hub{gap:20px}
.ux2-rec .ux2-note{margin:0}
.ux2-rec-more{list-style:none; margin:0; padding:12px 0 0; border-top:1px solid rgba(255,255,255,.2); display:flex; flex-direction:column; gap:6px}
.ux2-rec-more a{color:#fff; text-decoration:none; font-size:.92rem} .ux2-rec-more a:hover b{text-decoration:underline}
.ux2-cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:16px}
.ux2-cat{gap:12px}
.ux2-cat-h{display:flex; gap:12px; align-items:flex-start} .ux2-cat-h h2{font-size:1.1rem} .ux2-cat-h p{margin-top:2px}
.ux2-cat-ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--violet-soft); color:var(--violet); flex:none}
.ux2-cat-note{color:var(--violet); font-weight:600}
.ux2-cat-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.ux2-cat-list.two{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:0 16px}
.ux2-cat-list a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 10px; padding:10px 2px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink)}
.ux2-cat-list a:hover b{color:var(--violet)}
.ux2-cat-list b{font-size:.95rem} .ux2-cat-list small{grid-column:1; color:var(--muted); font-size:.82rem}
.ux2-min{grid-column:2; grid-row:1 / span 2; align-self:center; font-size:.74rem; font-weight:700; color:var(--muted); white-space:nowrap}
.ux2-pframe{display:flex; flex-direction:column; gap:12px; margin-bottom:20px}
.ux2-sess{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; display:flex; flex-direction:column; gap:8px}
.ux2-sess-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.ux2-sess-purpose{font-size:.92rem; margin:0}
.ux2-sess-row{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.ux2-how summary{cursor:pointer; font-weight:700; font-size:.88rem; color:var(--violet)} .ux2-how ol{margin:8px 0 0; padding-left:20px; font-size:.88rem}
.ux2-coach-btn{display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--violet-soft); background:var(--violet-soft); color:var(--violet); border-radius:999px; padding:7px 12px; font-weight:700; font-size:.86rem; cursor:pointer}
.ux2-coach-btn:hover{border-color:var(--violet)}
.ux2-prog{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .ux2-prog .meter{flex:1; min-width:120px} .ux2-prog small{color:var(--muted); font-weight:600}
.ux2-more summary{cursor:pointer; font-weight:700; font-size:.86rem; color:var(--violet); padding:10px 2px 0; border-top:1px solid var(--line)} .ux2-more[open] summary{margin-bottom:4px}
.ux2-jump{display:flex; gap:6px; flex-wrap:wrap} .ux2-jump a{font-size:.8rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--sunk); color:var(--ink); text-decoration:none}
.ux2-result{border:2px solid var(--violet); gap:12px; margin-bottom:20px}
.ux2-res-top{display:flex; align-items:center; gap:16px; flex-wrap:wrap} .ux2-res-top > div{display:flex; flex-direction:column; gap:2px}
.ux2-score{font-size:2.2rem; font-weight:900; margin:0; color:var(--violet)}
.ux2-res-top .up{color:var(--good)} .ux2-res-top .down{color:var(--bad)}
.ux2-sw{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0} .ux2-sw > div{background:var(--sunk); border-radius:12px; padding:10px 12px}
.ux2-sw dt{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)} .ux2-sw dd{margin:2px 0 0; font-weight:700}
.ux2-result .ux2-next-actions .link{color:var(--violet); text-decoration:underline; text-underline-offset:3px}
.ux2-modes{align-items:center} .ux2-modes .eyebrow{flex:none; margin-right:4px}
.ux2-fbhead{display:flex; flex-direction:column; gap:6px; margin:4px 0 8px}
.ux2-exnote{display:flex; gap:8px; align-items:center; font-size:.88rem; margin:0}
.ux2-retry{margin-top:10px}
.ux2-revsum{gap:12px}
/* coach drawer: side drawer on desktop, bottom sheet on phones */
.ux2-cd{position:fixed; inset:0; z-index:80}
.ux2-cd-scrim{position:absolute; inset:0; background:rgba(10,8,24,.45)}
.ux2-cd-panel{position:absolute; top:0; right:0; bottom:0; width:min(440px,100%); background:var(--surface); color:var(--ink); display:flex; flex-direction:column; gap:10px; padding:16px; box-shadow:-12px 0 40px rgba(0,0,0,.2); outline:none}
.ux2-cd-head{display:flex; gap:12px; align-items:center} .ux2-cd-head h2{font-size:1.1rem}
.ux2-cd-x{border:0; background:var(--sunk); width:40px; height:40px; border-radius:50%; font-size:1rem; cursor:pointer; color:var(--ink)}
.ux2-aistate{display:inline-flex; align-items:center; gap:4px; font-size:.76rem; font-weight:800; border-radius:999px; padding:2px 8px; margin-top:2px}
.ux2-aistate.on{background:var(--teal-soft); color:var(--good)} .ux2-aistate.off{background:var(--warn-soft); color:var(--warn)}
.ux2-cd-ctx{display:flex; flex-direction:column; gap:6px; background:var(--sunk); border-radius:12px; padding:8px 10px}
.ux2-cd-pick{display:flex; align-items:center; gap:8px; font-weight:700} .ux2-cd-pick select{padding:6px 10px; font-size:.86rem}
.ux2-cd-msgs{flex:1; min-height:120px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px 2px}
.ux2-cd-ai{display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.ux2-ailabel{font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.ux2-ailabel.live{color:var(--good)} .ux2-ailabel.ex{color:var(--warn)}
.ux2-cd-off{gap:6px; padding:10px 12px; flex-direction:row; align-items:center; flex-wrap:wrap}
.ux2-cd-cmds{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none} .ux2-cd-cmds .chipbtn{flex:none; font-size:.78rem; padding:6px 10px}
.ux2-cd-form{display:flex; gap:8px; align-items:flex-end} .ux2-cd-form textarea{min-height:52px; max-height:160px}
.ux2-cd-foot{display:flex; flex-direction:column; gap:2px}
@media (max-width:760px){
  .ux2-cd-panel{top:auto; left:0; width:100%; height:88vh; border-radius:20px 20px 0 0; padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); box-shadow:0 -12px 40px rgba(0,0,0,.25)}
  .ux2-sw{grid-template-columns:1fr}
  .ux2-score{font-size:1.8rem}
  body.ux2-cd-on{overflow:hidden}
}

/* B3 certification labels */
.ux2-limits{display:flex; flex-direction:column; gap:8px; margin:0 0 16px}
.ux2-limit{display:flex; gap:8px; align-items:flex-start; font-size:.88rem; margin:0; padding:10px 12px; border-radius:12px; background:var(--warn-soft); color:var(--ink)}
.ux2-limit.proto{background:var(--blue-soft)}
.ux2-limit .ux2-ex{flex:none}
/* ===== UX V2 · B4 Placements ===== */
.ux2-place .ux2-next .ux2-note,.ux2-count .ux2-note{color:#E9E6FF}
.ux2-mini{display:flex; align-items:center; gap:8px; margin-top:4px}
.ux2-mini .meter{flex:1; max-width:160px}
.ux2-mini small{color:var(--muted); font-size:.78rem; white-space:nowrap}
.ux2-pstats{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.ux2-pstats > div{display:flex; flex-direction:column; gap:2px; background:var(--sunk); border-radius:12px; padding:10px 12px}
.ux2-pstats > div.warn{background:var(--warn-soft)}
.ux2-pstats > div.good{background:var(--good-soft, var(--sunk))}
.ux2-pstats b{font-size:1.3rem; font-weight:800}
.ux2-pstats small{color:var(--muted); font-size:.78rem; line-height:1.3}
.ux2-more summary,.ux2-add summary,.ux2-night summary{cursor:pointer; font-weight:700; min-height:44px; display:flex; align-items:center; gap:6px}
.ux2-more[open] summary{margin-bottom:10px}
.ux2-mine{background:var(--blue-soft); color:var(--ink)}
.ux2-sr{background:var(--teal-soft, var(--blue-soft)); color:var(--ink)}
.ux2-count{gap:12px}
.ux2-count .ux2-date.light{background:rgba(255,255,255,.16)}
.ux2-count .meter.light{background:rgba(255,255,255,.2)}
.ux2-count .meter.light span{background:var(--gold)}
.ux2-backfrom{background:var(--blue-soft); gap:10px; flex-wrap:wrap}
.ux2-gaps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.ux2-gaps li{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:var(--warn-soft)}
.ux2-gaps li.ok{background:var(--sunk)}
.ux2-gaps a{display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink); flex:1; min-width:0}
.ux2-gi{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.8rem; background:var(--warn); color:#fff}
.ux2-gaps li.ok .ux2-gi{background:var(--good)}
.ux2-rounds{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.ux2-rounds li{display:flex; flex-direction:column; gap:6px}
.ux2-tlist .ux2-trow{display:grid; grid-template-columns:minmax(0,1.4fr) auto minmax(0,1.3fr) auto; align-items:center; gap:10px}
.ux2-trow > .ux2-ex{justify-self:start}
.ux2-lbl{display:flex; gap:8px; align-items:flex-start; font-size:.88rem; margin:0; padding:10px 12px; border-radius:12px; background:var(--warn-soft); color:var(--ink)}
.ux2-lbl .ux2-ex{flex:none}
.ux2-fu{color:var(--muted); font-size:.82rem; line-height:1.35}
.ux2-kv{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0}
.ux2-kv div{background:var(--sunk); border-radius:12px; padding:10px 12px}
.ux2-kv dt{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:2px}
.ux2-kv dd{margin:0; font-size:.92rem; line-height:1.4}
.ux2-cojd{gap:12px; flex-wrap:wrap}
.ux2-dctx{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; background:var(--blue-soft); border-radius:12px; padding:10px 14px; margin:0 0 14px; font-size:.9rem}
.ux2-dctx a{font-weight:700; display:inline-flex; align-items:center; gap:4px; min-height:32px}
.ux2-follow li{margin-bottom:4px}
@media (max-width:760px){
.ux2-pstats{grid-template-columns:repeat(2,1fr)}
.ux2-pstats > div:last-child{grid-column:span 2}
.ux2-tlist .ux2-trow{grid-template-columns:minmax(0,1fr) auto}
.ux2-tlist .ux2-fu{grid-column:1 / -1}
.ux2-kv{grid-template-columns:1fr}
}
/* ===== UX V2 · B5 Me ===== */
.ux2-megrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px}
.ux2-mecard{flex-direction:row; align-items:center; gap:14px; min-height:84px}
.ux2-mecard > span:nth-child(2){flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ux2-mecard .tile-ic{background:var(--violet-soft); color:var(--violet); margin:0; flex:none}
.ux2-mehead{flex-direction:row; align-items:center; gap:16px}
.ux2-mehead .me-av{width:60px; height:60px; border-radius:18px; font-size:1.3rem; flex:none}
.ux2-ev{display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.03em; white-space:nowrap; flex:none}
.ux2-ev-self{background:var(--sunk); color:var(--muted)} .ux2-ev-ai{background:var(--violet-soft); color:var(--violet)} .ux2-ev-test{background:var(--teal-soft); color:var(--good)} .ux2-ev-tr{background:var(--gold-soft); color:var(--warn)}
.ux2-legend .chips{align-items:center}
.ux2-ok{color:var(--good); font-weight:700}
.ux2-prohead{flex-direction:row; align-items:center; gap:18px}
.ux2-prohead .yg-ring{flex:none}
.ux2-back{background:var(--blue-soft); border-color:transparent; flex-direction:row; flex-wrap:wrap; gap:6px; align-items:baseline}
.ux2-danger{color:var(--bad)!important; border-color:var(--bad)!important}
.ux2-presenter{border-style:dashed}
@media (max-width:760px){.ux2-mehead,.ux2-prohead{align-items:flex-start}}
/* ===== Launchpad 3.0 · Release 1 ===== */
.ux3-mode{display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.02em; white-space:nowrap}
.ux3-m-off{background:var(--gold-soft); color:var(--warn)} .ux3-m-on{background:var(--blue-soft); color:var(--blue)} .ux3-m-hy{background:var(--violet-soft); color:var(--violet)} .ux3-m-self{background:var(--teal-soft); color:var(--good)}
.ux3-sub{flex-wrap:wrap}
.ux3-h{font-size:1.15rem; margin-top:4px}
.ux3-cont{gap:12px; flex-wrap:wrap; align-items:center}
.ux3-cont b{font-size:1rem}
.ux3-comp{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.ux3-comp li{display:flex; gap:10px; align-items:flex-start; background:var(--sunk); border-radius:12px; padding:10px 12px}
.ux3-comp li > span{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--violet-soft); color:var(--violet); flex:none}
.ux3-comp small{display:block; color:var(--muted); font-size:.82rem}
.ux3-not{background:none; border:0; color:#fff; text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit; font-weight:700; padding:6px 0; min-height:36px}
.ux3-alts,.ux3-why{background:rgba(255,255,255,.1); border-radius:12px; padding:8px 12px}
.ux3-alts summary,.ux3-why summary{cursor:pointer; font-weight:700; min-height:32px; display:flex; align-items:center}
.ux3-alts ul{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.ux3-alts a{display:flex; flex-direction:column; color:#fff; text-decoration:none; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.08)}
.ux3-alts a small{color:#E9E6FF; font-size:.8rem}
.ux3-why p{color:#E9E6FF; margin-top:6px}
.ux3-day-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ux3-mini{display:flex; flex-direction:column; gap:2px; background:var(--sunk); border-radius:12px; padding:10px 12px; margin-top:6px; text-decoration:none; color:var(--ink)}
.ux3-mini small{color:var(--muted); font-size:.8rem}
.ux3-mini .ux3-mode,.ux2-li .ux3-mode{align-self:flex-start}
.ux3-tracks{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.ux3-track{display:flex; gap:8px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px; text-decoration:none; color:var(--ink)}
.ux3-track b{display:block; font-size:.86rem} .ux3-track small{color:var(--muted); font-size:.76rem; line-height:1.3}
.ux3-tic{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--violet-soft); color:var(--violet); flex:none}
.ux3-tic.sm{width:24px; height:24px}
.ux3-tgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:12px}
.ux3-tcard h2{font-size:1.05rem}
.ux3-tm{font-weight:800; font-size:1.05rem}
.ux3-checks{list-style:none; margin:0; padding:0; font-size:.86rem; color:var(--muted); display:flex; flex-direction:column; gap:3px}
.ux3-checks li.ok{color:var(--good); font-weight:700}
.ux3-tl{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:6px}
.ux3-tl a{display:flex; gap:10px; align-items:flex-start; text-decoration:none; color:var(--ink); padding:6px 0}
.ux3-tl small{display:block; color:var(--muted); font-size:.78rem}
.ux3-recover{background:var(--blue-soft)}
.ux3-altbar{gap:10px; flex-wrap:wrap; background:var(--violet-soft); border-color:transparent}
@media (max-width:760px){.ux3-day-grid{grid-template-columns:1fr} .ux3-tracks{grid-template-columns:1fr 1fr} .ux3-tracks a:last-child{grid-column:span 2}}
/* ---------- Launchpad 3.0 R2: programs, delivery, evidence ---------- */
.r2-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
.r2-tbl{width:100%; border-collapse:collapse; font-size:.88rem}
.r2-tbl th,.r2-tbl td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.r2-tbl th{font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; white-space:nowrap}
.r2-tbl tr.r2-goal td:first-child{font-weight:600}
.r2-tbl input[type=text]{width:100%; min-width:160px}
.r2-num{width:84px}
.r2-ev{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:999px}
.r2-ev-exposed{background:var(--blue-soft); color:var(--ink)} .r2-ev-assessed{background:var(--gold-soft); color:var(--ink)}
.r2-ev-applied{background:var(--teal-soft); color:var(--ink)} .r2-ev-reviewed{background:var(--violet-soft); color:var(--ink)}
.r2-evkey{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.r2-evbox{display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer; font:inherit; color:inherit}
.r2-evbox b{font-size:1.6rem; line-height:1.1} .r2-evbox small{color:var(--muted)} .r2-evbox.on{outline:2px solid var(--ink)}
.r2-ct{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.r2-big{text-align:right} .r2-big .r2-pct{font-size:1.3rem; display:block} .r2-big small{color:var(--muted)}
.r2-checks li{font-size:.9rem}
.ux2-ex.r2-tr{background:var(--teal-soft); color:var(--ink)}
.r2-err{border-color:var(--bad); background:var(--bad-soft)}
.r2-denied{border-color:var(--bad)}
.r2-snav{margin-top:-4px}
.r2-actor{gap:12px; flex-wrap:wrap; align-items:flex-end; justify-content:flex-start}
.r2-actor .field{min-width:220px; flex:1}
.r2-tabs{flex-wrap:wrap}
.r2-chk{display:inline-flex; gap:6px; align-items:center; font-size:.88rem}
.r2-sk input{position:absolute; opacity:0; pointer-events:none}
.r2-end{align-items:flex-end}
.r2-join .row{align-items:flex-end; flex-wrap:wrap} .r2-join .grow{flex:1; min-width:200px}
.r2-review{border-left:3px solid var(--violet-soft); padding-left:10px}
.r2-pass{gap:10px}
.r2-prog .row.between{flex-wrap:wrap; gap:10px}
@media (max-width:760px){.r2-evkey{grid-template-columns:1fr 1fr} .r2-big{text-align:left} .r2-tbl{font-size:.82rem}}
/* ---------- Launchpad 3.0 R3: Discovery ---------- */
.r3-bar{height:8px; background:var(--line); border-radius:99px; overflow:hidden} .r3-bar span{display:block; height:100%; background:var(--accent, #6d5efc); border-radius:99px}
.r3-pathcards{gap:12px} .r3-pathcard{display:flex; flex-direction:column; gap:6px; text-align:left; cursor:pointer; font:inherit; color:inherit; border:1px solid var(--line)} .r3-pathcard:hover,.r3-pathcard:focus-visible{outline:2px solid var(--ink)} .r3-pathcard small{color:var(--muted)}
.r3-steps{margin:0; padding-left:0; list-style:none; display:grid; gap:6px} .r3-steps li.ok a{color:var(--good)} .r3-steps li.next a{font-weight:700}
.r3-q{border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:0 0 10px; min-width:0} .r3-q legend{font-weight:600; padding:0 4px; font-size:.95rem} .r3-q.done{border-color:var(--good-soft, #cdebd8)}
.r3-opts{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px} .r3-o{border:1px solid var(--line); background:var(--card, #fff); border-radius:999px; padding:7px 12px; font:inherit; font-size:.86rem; cursor:pointer; color:inherit; min-height:36px}
.r3-o.on{background:var(--ink); color:#fff; border-color:var(--ink)} .r3-o:focus-visible{outline:2px solid var(--accent, #6d5efc); outline-offset:2px}
.r3-skip{margin-top:4px}
.r3-multi{display:flex; flex-wrap:wrap; gap:6px} .r3-chk{display:inline-flex; gap:6px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:.86rem; cursor:pointer} .r3-chk.on{border-color:var(--ink); background:var(--violet-soft)} .r3-chk.r3-sug{box-shadow:inset 0 0 0 1px var(--gold, #c99a2e)}
.r3-why summary{font-size:.82rem; color:var(--muted); cursor:pointer}
.r3-prov{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:999px; white-space:nowrap; vertical-align:middle}
.r3-p-ent{background:var(--blue-soft)} .r3-p-ext{background:var(--warn-soft)} .r3-p-con{background:var(--teal-soft)} .r3-p-self{background:var(--gold-soft)} .r3-p-sug{background:var(--line)} .r3-p-dem{background:var(--violet-soft)} .r3-p-rev{background:var(--good-soft, #d8f0e1)}
.r3-file{display:inline-flex; align-items:center; gap:8px; cursor:pointer} .r3-file input{position:absolute; opacity:0; width:1px; height:1px} .r3-file:focus-within .btn{outline:2px solid var(--ink)}
.r3-bad{color:var(--bad)} .r3-claim{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line)} .r3-cf{display:flex; flex-direction:column; gap:4px; flex:1; min-width:220px} .r3-cv{width:100%}
.r3-rejected .r3-cf b{text-decoration:line-through; color:var(--muted)}
.r3-rank select{min-width:70px} .r3-mrow{display:flex; flex-direction:column; gap:4px; padding:6px 0; border-bottom:1px dashed var(--line)}
.r3-code{background:#f4f4f7; border-radius:8px; padding:10px; font-size:.85rem; overflow-x:auto; white-space:pre} .r3-scen p{margin:.3em 0}
.r3-rs h2{display:flex; align-items:center; gap:8px} .r3-n{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; font-size:.78rem; flex:none}
.r3-hyps{display:grid; gap:10px} .r3-hyp{padding:12px} .r3-alert{border-color:var(--gold, #c99a2e)} .r3-warn .ux2-ex{background:var(--warn-soft)} .r3-learn{background:var(--blue-soft); padding:8px 10px; border-radius:8px}
.r3-ts{max-width:120px} .r3-links{gap:14px; flex-wrap:wrap} .r3-nav{gap:10px; flex-wrap:wrap; align-items:center}
@media (max-width:760px){.r3-pathcards{grid-template-columns:1fr} .r3-o{flex:1 1 auto}}
/* ---------- R3 Addendum 2: SOSEM Development Centre ---------- */
.r4-flow{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; counter-reset:f} .r4-flow li{counter-increment:f} .r4-flow a{display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--line); font-size:.82rem; text-decoration:none; color:inherit} .r4-flow li:not(:last-child)::after{content:"→"; margin-left:6px; color:var(--muted)}
.r4-bar{display:inline-block; width:120px; height:8px; background:var(--line); border-radius:99px; overflow:hidden; vertical-align:middle; margin:0 8px} .r4-bar span{display:block; height:100%; background:var(--ink)}
.r4-na{font-size:.78rem; color:var(--muted); font-style:italic}
.r4-tl{display:grid; gap:8px} .r4-hrow{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; padding:8px 0; border-bottom:1px solid var(--line)}
.r4-kpis div{display:flex; flex-direction:column; gap:2px} .r4-kpis b{font-size:1.4rem} .r4-kpis small{color:var(--muted)}
.r4-weeks{display:grid; grid-template-columns:repeat(8,1fr); gap:6px} .r4-wk{border-radius:8px; padding:6px; text-align:center; border:1px solid var(--line); display:flex; flex-direction:column} .r4-wk.on{background:var(--good-soft, #d8f0e1)} .r4-wk.miss{background:var(--warn-soft)} .r4-wk.unobs{background:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--line) 4px,var(--line) 5px)} .r4-wk.off{opacity:.45}
.r4-cover{border-bottom:3px solid var(--ink); padding-bottom:10px} .r4-cover h1{margin:.1em 0}
.r4-head{display:grid; grid-template-columns:minmax(180px,240px) 1fr; gap:16px; align-items:center} .r4-big{display:flex; flex-direction:column; gap:4px} .r4-big b{font-size:2.6rem; line-height:1} .r4-big b small{font-size:1rem; color:var(--muted)}
.r4-delta.up{color:var(--good)} .r4-delta.down{color:var(--bad)}
.r4-trend{display:grid; gap:6px} .r4-tw{display:grid; grid-template-columns:70px 1fr 50px 70px; align-items:center; gap:6px} .r4-tw .r4-bar{width:100%; margin:0}
.r4-src li{display:grid; grid-template-columns:170px 1fr 90px; align-items:center; gap:6px} .r4-src .r4-bar{width:100%; margin:0}
.r4-subs li{display:grid; grid-template-columns:minmax(150px,1fr) 130px 40px; align-items:center; gap:6px; font-size:.88rem} .r4-subs .r4-bar{width:100%; margin:0}
.r4-callout{background:var(--gold-soft); padding:10px 12px; border-radius:10px} .r4-rec{padding:12px; margin-bottom:8px} .r4-h{margin-top:8px} .r4-elist{max-height:260px; overflow:auto}
.r4-mrow{border-top:1px solid var(--line); padding-top:8px}
@media (max-width:760px){.r4-head{grid-template-columns:1fr} .r4-weeks{grid-template-columns:repeat(4,1fr)} .r4-tw{grid-template-columns:60px 1fr 44px} .r4-tw small.muted{display:none} .r4-src li{grid-template-columns:1fr 70px} .r4-src .r4-bar{display:none} .r4-subs li{grid-template-columns:1fr 40px} .r4-subs .r4-bar{display:none}}
@media print{.topbar,.tabbar,nav,.ux2-pagebar,.backlink,.r4-ctl,#r4-sharebox,.toast,.coachfab,footer,.lp-vguide,[data-act]{display:none!important} body{background:#fff} .card{box-shadow:none; border:1px solid #ddd; break-inside:avoid}}

/* ===== Launchpad 4.0 · R4.1: Today · Plan · Skills · Progress ===== */
/* FINAL-01/UIUX-04: the old unconditional "repeat(4,1fr)" override below 860px was written when only the
   4-tab Student portal existed; it silently forced every other portal's mobile tab bar (Institute 7, Alumni
   9, Trainer 9) to 4 columns regardless of actual tab count, which was the real cause of the reported
   overflow/compression. The --tabn custom property set per-portal in app.js (and read at line 95 above)
   already covers every tab count correctly, so this hardcoded override is removed rather than widened. */
.l4-hcoach{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:var(--violet-soft); color:var(--violet-deep); font-weight:700; font-size:.85rem; text-decoration:none; margin-right:8px; white-space:nowrap}
.l4-hcoach.off{background:var(--sunk); color:var(--muted)}
@media (max-width:520px){ .l4-hcoach span{display:none} .l4-hcoach{padding:8px} }
.l4 h1{letter-spacing:-.02em}
.l4-head h1{font-size:2rem; margin:2px 0 4px}
/* UI/UX rebuild: was a flat near-black #15141F -- in dark mode that sat almost indistinguishable from
   --elevated/--bg, so the single most important element on the page (today's one recommended next step)
   had almost no visual presence. Solid --violet-deep (not a gradient) keeps guaranteed white-text contrast
   in both themes, consistent with the .panel.violet family used elsewhere. */
.l4-next{background:var(--violet-deep); color:#fff; border-radius:var(--r-xl); padding:clamp(20px,4vw,30px); display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden}
.l4-next::after{content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; border:28px solid rgba(255,255,255,.08); pointer-events:none}
.l4-next .eyebrow{color:rgba(255,255,255,.75)}
.l4-next h2{color:#fff; margin:0; font-size:1.4rem; display:flex; align-items:center; gap:10px}
.l4-next h2 .ic{flex:none}
.l4-next-why{margin:0; color:rgba(255,255,255,.88)} .l4-next-note{margin:0; color:rgba(255,255,255,.78)}
.l4-facts{display:flex; flex-wrap:wrap; gap:8px 20px; margin:0; position:relative}
.l4-facts div{display:flex; flex-direction:column} .l4-facts dt{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.65)} .l4-facts dd{margin:0; font-weight:600}
.l4-next-act{flex-wrap:wrap; gap:14px; align-items:center}
.l4-on-dark{color:#fff; background:none; border:0; font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; display:inline-flex; gap:6px; align-items:center; padding:4px 0}
.l4-alts summary{color:#D8D4FF; cursor:pointer; font-size:.9rem} .l4-alts a{color:#fff} .l4-alts small{color:#C9C6DB; display:block} .l4-alts p{color:#E4E2F0}
.l4-alts ul{padding-left:18px}
.l4-guide{display:flex; flex-direction:column; gap:10px; border:1px dashed var(--violet)}
.l4-steps{display:flex; gap:6px; list-style:none; padding:0; margin:0; flex-wrap:wrap}
.l4-steps a{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--line); text-decoration:none; color:inherit; font-size:.82rem; font-weight:600}
.l4-steps span{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--sunk); font-size:.7rem}
.l4-steps .ok a{background:var(--good-soft); border-color:transparent} .l4-steps .ok span{background:var(--good); color:#fff}
.l4-steps .now a{border-color:var(--violet); color:var(--violet-deep)}
.l4-prog{display:block; height:6px; background:var(--sunk); border-radius:99px; overflow:hidden} .l4-prog i{display:block; height:100%; background:var(--violet)}
.l4-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.l4-list.card{padding:10px}
.l4-row{display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.l4-row.is-done .l4-main b{text-decoration:line-through; color:var(--muted)}
.l4-tick{flex:none; width:24px; height:24px; border-radius:7px; border:2px solid var(--line); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:#fff; padding:0; margin-top:1px; font-size:.75rem}
.l4-tick.on{background:var(--violet); border-color:var(--violet)} .l4-tick.ro{cursor:default; border-style:dashed; color:var(--muted)} .l4-tick.ro.on{border-style:solid; color:#fff}
.l4-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px} .l4-main a{color:inherit; text-decoration:none} .l4-main a:hover b{text-decoration:underline}
.l4-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.l4-src,.l4-req,.l4-self,.l4-st,.l4-stage,.l4-chip,.l4-price,.l4-avail,.l4-fixed{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap}
.l4-s-col{background:var(--gold-soft); color:var(--warn)} .l4-s-sp{background:var(--violet-soft); color:var(--violet-deep)} .l4-s-me{background:var(--teal-soft); color:var(--good)} .l4-s-sys{background:var(--sunk); color:var(--muted)} .l4-s-hab{background:var(--blue-soft); color:var(--blue)}
.l4-req{background:var(--bad-soft); color:var(--bad)} .l4-self{background:var(--sunk); color:var(--muted); border:1px dashed var(--line)}
.l4-st{background:var(--sunk); color:var(--ink)} .l4-st-overdue,.l4-st-revise{background:var(--bad-soft); color:var(--bad)} .l4-st-review{background:var(--gold-soft); color:var(--warn)} .l4-st-done{background:var(--good-soft); color:var(--good)} .l4-st-suggested{background:var(--violet-soft); color:var(--violet-deep)}
.l4-stage{background:var(--blue-soft); color:var(--blue)} .l4-fixed{color:var(--muted); background:var(--sunk)}
.l4-why summary{font-size:.78rem; color:var(--muted); cursor:pointer}
.l4-more{position:relative; flex:none} .l4-more summary{list-style:none; cursor:pointer; padding:2px 8px; border-radius:8px; font-weight:800; color:var(--muted)} .l4-more summary::-webkit-details-marker{display:none}
.l4-menu{position:absolute; right:0; top:28px; z-index:5; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:10px; display:flex; flex-direction:column; gap:8px; min-width:200px}
.l4-del{color:var(--bad)}
.l4-hbtn{flex:none; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.l4-add summary{cursor:pointer; color:var(--violet-deep); font-weight:700; display:inline-flex; gap:6px; align-items:center; padding:10px 12px; border:1.5px dashed var(--line); border-radius:var(--r); width:100%; box-sizing:border-box}
.l4-addf{margin-top:10px} .l4-addf label{display:flex; flex-direction:column; gap:4px; font-size:.85rem; font-weight:600}
.l4-addf input,.l4-addf select,.l4-cfg select,.l4-cfg input,#l4-q,#l4-cq{font:inherit; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); width:100%; box-sizing:border-box}
.l4-deadline{border-left:4px solid var(--gold); background:var(--gold-soft); display:flex; flex-direction:column; gap:2px}
.l4-quick{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
@media (max-width:860px){ .l4-quick{grid-template-columns:repeat(4,1fr)} }
@media (max-width:420px){ .l4-quick{grid-template-columns:repeat(3,1fr)} }
.l4-q{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); text-decoration:none; color:inherit; font-size:.78rem; font-weight:700; text-align:center}
.l4-q span{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--violet-soft); color:var(--violet-deep)}
.l4-q:hover{border-color:var(--violet)}
.l4-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px} .l4-kpis span{display:flex; flex-direction:column} .l4-kpis b{font-size:1.4rem} .l4-kpis small{color:var(--muted); font-size:.78rem}
.l4-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.l4-tile{display:flex; flex-direction:column; gap:2px; padding:14px; background:var(--sunk); border-radius:var(--r); text-decoration:none; color:inherit} .l4-tile b{font-size:1.6rem} .l4-tile b small{font-size:.9rem; color:var(--muted)} .l4-tile>small{color:var(--muted); font-size:.8rem}
.l4-tile.warn{background:var(--gold-soft)}
.l4-sub,.l4-seg{flex-wrap:wrap}
.l4-seg{display:grid; grid-template-columns:repeat(3,1fr); background:var(--sunk); border-radius:14px; padding:4px; gap:4px}
.l4-seg a{text-align:center; padding:10px 6px; border-radius:10px; text-decoration:none; color:var(--muted); font-weight:700; font-size:.9rem}
.l4-seg a[aria-current]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.l4-seg small{color:var(--warn)}
.l4-comps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px}
.l4-comp{display:flex; flex-direction:column; gap:8px}
.l4-comp>.row a{color:inherit; text-decoration:none}
.l4-lv{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .l4-lv.big{font-weight:600}
.l4-bar{display:inline-flex; gap:4px} .l4-bar i{display:block; width:26px; height:8px; border-radius:99px; background:var(--sunk)} .l4-bar i.on{background:var(--violet)} .l4-bar i.need{background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--violet)}
.l4-lv.big .l4-bar i{width:36px; height:10px}
.l4-chip.ok{background:var(--blue-soft); color:var(--blue)} .l4-chip.gap{background:var(--gold-soft); color:var(--warn)} .l4-chip.na{background:var(--sunk); color:var(--muted)}
.l4-up{color:var(--violet-deep); font-weight:800; font-size:.82rem; min-width:22px; text-align:right}
.l4-legend{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.l4-tgt{flex-wrap:wrap; gap:8px}
.l4-filt{display:flex; flex-wrap:wrap; gap:6px}
.l4-filt a,.l4-filt button{font:inherit; font-size:.82rem; font-weight:700; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; cursor:pointer}
.l4-filt a[aria-current],.l4-filt button.on{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.l4-filt small{opacity:.7}
.l4-lcs{list-style:none; padding:0; margin:0 0 6px; display:grid; gap:8px}
.l4-lc{display:flex; flex-direction:column; gap:6px} .l4-lc.is-done{opacity:.75}
.l4-price.inc{background:var(--blue-soft); color:var(--blue)} .l4-price.own{background:var(--gold-soft); color:var(--warn); white-space:normal; text-align:right}
.l4-inplan{background:var(--violet); color:#fff}
.l4-compv h1{margin:0}
.l4-cfg .row{flex-wrap:wrap; gap:10px} .l4-cfg-ed{flex-basis:100%} .l4-cfg-ed>summary{display:inline} .l4-days{display:flex; flex-wrap:wrap; gap:10px; border:0; padding:0; margin:0} .l4-days label{font-size:.85rem}
.l4-cfg .l4-cfg-ed[open]{margin-top:10px}
.l4-wknav{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:8px} .l4-wknav small{display:block}
.l4-wknav [aria-disabled]{opacity:.35; pointer-events:none}
.l4-load{display:flex; flex-direction:column; gap:6px; font-size:.85rem} .l4-load.over .l4-prog i{background:var(--warn)}
.l4-roles{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.l4-role{display:flex; gap:12px; align-items:flex-start; cursor:pointer} .l4-role.on{border:2px solid var(--violet); background:var(--violet-soft)}
.l4-role input{width:20px; height:20px; margin-top:2px; flex:none} .l4-role span{display:flex; flex-direction:column; gap:3px}
.l4-fit{font-weight:700} .l4-fit.ok{color:var(--violet-deep)} .l4-fit.mid{color:var(--blue)} .l4-fit.na{color:var(--muted)}
.l4-cg h3{margin:0} .l4-cgl{list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:8px}
.l4-cgl li{display:grid; grid-template-columns:1fr auto 26px; gap:10px; align-items:center} .l4-cgl a{color:inherit; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem}
.l4-hab{display:flex; flex-direction:column; gap:8px} .l4-hab a{color:inherit}
.l4-stg{display:grid; grid-template-columns:repeat(4,1fr); gap:4px} .l4-stg i{height:6px; border-radius:99px; background:var(--sunk)} .l4-stg i.on{background:var(--violet)}
.l4-dots{display:inline-flex; gap:3px} .l4-dots i{width:12px; height:12px; border-radius:3px; background:var(--sunk)} .l4-dots i.on{background:var(--violet)} .l4-dots i.seen{background:var(--blue-soft); box-shadow:inset 0 0 0 1.5px var(--blue)} .l4-dots i.slip{background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--violet)}
.l4-ask{border:1.5px solid var(--violet)}
.l4-sugrow{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px} .l4-sugrow .card{display:flex; flex-direction:column; gap:4px}
.l4-cfind{display:flex; flex-direction:column; gap:8px}
.l4-coachgrid{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:10px}
.l4-coach{display:flex; flex-direction:column; gap:8px} .l4-coach p{margin:0} .l4-coach b+small{display:block}
.l4-cmd{display:inline-block; font-family:var(--mono-f); font-size:.7rem; background:var(--sunk); border-radius:6px; padding:1px 6px; margin:1px 0}
.l4-avail.live{background:var(--good-soft); color:var(--good)} .l4-avail.off{background:var(--sunk); color:var(--muted); white-space:normal}
.l4-sugg-why{color:var(--violet-deep)}
.l4-cbar{flex-wrap:wrap; gap:10px; align-items:flex-start} .l4-cbar .l4-add{flex:1; min-width:260px}
.l4-agenda{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.l4-ev{display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); text-decoration:none; color:inherit}
.l4-ev>span:last-child{display:flex; flex-direction:column; gap:2px; min-width:0}
.l4-date{flex:none; width:46px; text-align:center; background:var(--violet-soft); color:var(--violet-deep); border-radius:10px; padding:4px 0; display:flex; flex-direction:column} .l4-date b{font-size:1.15rem; line-height:1.1} .l4-date small{font-size:.7rem; font-weight:700; text-transform:uppercase}
.l4-day{font-size:1rem; margin:8px 0 0} .l4-day.now{color:var(--violet-deep)}
.l4-scale{padding-left:22px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
@media (max-width:520px){ .l4-row{flex-wrap:wrap} .l4-hbtn{width:100%; justify-content:flex-start; padding-left:36px} .l4-tiles{gap:6px} .l4-tile{padding:10px} .l4-tile b{font-size:1.25rem} .l4-kpis b{font-size:1.15rem} .l4-cgl li{grid-template-columns:1fr auto 22px} .l4-bar i{width:20px} }
@media print{.l4-hcoach,.l4-quick{display:none!important}}

/* ===== Phase 0: accounts and access ===== */
.p0-proto{background:#332A10; color:#F0D98A; font-size:.82rem; padding:6px 0; border-bottom:1px solid #4A3D14} .p0-proto a{color:inherit}
:root[data-theme="light"] .p0-proto{background:#FFF4D6; color:#5A4300; border-color:#EBD38A}
.p0-wrap{max-width:640px} .p0-narrow{max-width:640px} .p0-pub{padding:28px 0 40px}
.p0-hero{text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 0}
.p0-hero h1{font-size:2.1rem; margin:0} .p0-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:8px 0}
.p0-form label{font-weight:700; font-size:.92rem; display:flex; flex-direction:column; gap:4px}
.p0-form input:not([type=checkbox]),.p0-form select,.p0-search{font:inherit; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); width:100%; box-sizing:border-box}
.p0-form input:focus-visible,.p0-form select:focus-visible{outline:3px solid var(--violet-soft); border-color:var(--violet)}
label.p0-check{flex-direction:row; align-items:flex-start; gap:10px; font-weight:500} .p0-check input{width:20px; height:20px; margin-top:2px; flex:none}
.p0-req{font-size:.72rem; color:var(--bad); font-weight:700; margin-left:6px}
.p0-err{background:var(--bad-soft); color:var(--bad); border-radius:10px; padding:10px 12px; margin:0; font-weight:600; font-size:.9rem}
.p0-ok{background:var(--good-soft); color:var(--good); border-radius:10px; padding:10px 12px; margin:0; font-weight:600; font-size:.9rem}
.p0-links{gap:16px; flex-wrap:wrap}
.p0-dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:0} .p0-dl dt{font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em} .p0-dl dd{margin:2px 0 0; font-weight:600}
.p0-ws{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.p0-wsb{width:100%; text-align:left; display:flex; flex-direction:column; gap:4px; cursor:pointer; font:inherit; color:inherit} .p0-wsb:hover{border-color:var(--violet)}
.p0-denied{border-left:4px solid var(--bad)}
.p0-anav{flex-wrap:wrap}
.p0-table{width:100%; border-collapse:collapse; font-size:.86rem; background:var(--surface); border-radius:var(--r); overflow:hidden; display:block; overflow-x:auto}
.p0-table th,.p0-table td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top} .p0-table th{background:var(--sunk); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em}
.p0-proto-inline{background:var(--gold-soft); color:var(--warn); padding:6px 10px; border-radius:8px; margin:0}
.p0-menu .menu button{display:block; width:100%; text-align:left; background:none; border:0; font:inherit; padding:8px 12px; cursor:pointer; color:inherit} .p0-menu .menu button:hover{background:var(--sunk)}
details.rolepick .menu button{display:block; width:100%; text-align:left; background:none; border:0; font:inherit; padding:8px 12px; cursor:pointer; color:inherit}
.p0-legacy{border:1.5px solid var(--gold)} .p0-demo summary{cursor:pointer; font-weight:700; font-size:.9rem}

/* ===== Phase 1: student career profile ===== */
.p6{max-width:860px}
.p6-steps{display:flex; flex-direction:column; gap:6px; font-size:.82rem; color:var(--muted); font-weight:600}
.p6-info{background:var(--sunk); border-radius:var(--r); padding:10px 14px} .p6-info summary{cursor:pointer; font-weight:700; font-size:.9rem}
.p6-info dl{display:grid; gap:8px; margin:10px 0 0} .p6-info dt{font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em} .p6-info dd{margin:0; font-size:.92rem}
.p6-form{gap:14px} .p6-f{display:flex; flex-direction:column; gap:5px; border:0; padding:0; margin:0; min-width:0}
.p6-f>label,.p6-f>legend{font-weight:700; font-size:.95rem; padding:0}
.p6-f input:not([type=checkbox]):not([type=radio]),.p6-f select,.p6-f textarea,.p6-claim input{font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); width:100%; box-sizing:border-box}
.p6-f textarea{resize:vertical}
.p6-f [aria-invalid=true]{border-color:var(--bad)!important; box-shadow:0 0 0 2px var(--bad-soft)}
.p6-f input:focus-visible,.p6-f select:focus-visible,.p6-f textarea:focus-visible{outline:3px solid var(--violet-soft); border-color:var(--violet)}
.p6-req,.p6-opt{font-size:.7rem; font-weight:700; padding:1px 7px; border-radius:99px; margin-left:6px; vertical-align:middle} .p6-req{background:var(--bad-soft); color:var(--bad)} .p6-req.c{background:var(--gold-soft); color:var(--warn)} .p6-opt{background:var(--sunk); color:var(--muted)}
.p6-err{color:var(--bad); font-weight:600; font-size:.85rem; margin:0} .p6-sum{background:var(--bad-soft); padding:8px 12px; border-radius:10px}
.p6-opts{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.p6-pill{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; cursor:pointer; font-size:.9rem; background:var(--surface)} .p6-pill.sm{padding:4px 10px; font-size:.8rem}
.p6-pill:has(input:checked){border-color:var(--violet); background:var(--violet-soft); color:var(--violet-deep); font-weight:600} .p6-pill input{accent-color:var(--violet)}
.p6-nav{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:14px} .p6-nav .row{gap:8px}
.p6-later{margin:0}
.p6-choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.p6-choice-card{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; padding:20px} .p6-choice-card:hover{border-color:var(--violet); box-shadow:var(--shadow)} .p6-choice-card b{font-size:1.1rem}
.p6-email,.p6-current{display:flex; flex-direction:column; gap:2px}
.p6-src{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--sunk); color:var(--muted); white-space:nowrap}
.p6-src-college{background:var(--good-soft); color:var(--good)} .p6-src-confirmed,.p6-src-resume,.p6-src-corrected{background:var(--blue-soft); color:var(--blue)}
.p6-prov{margin:-8px 0 0}
.p6-locked{border-left:4px solid var(--good)}
.p6-claims{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.p6-claim{display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; padding:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.p6-claim .grow{display:flex; flex-direction:column; gap:3px; min-width:220px; flex:1} .p6-claim.is-done{opacity:.7}
.p6-cact{display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start} .p6-cact .p6-edit summary{list-style:none} .p6-cact .p6-edit summary::-webkit-details-marker{display:none}
.p6-cact .p6-edit[open]{flex-basis:100%} .p6-cact .p6-edit form{margin-top:6px; gap:6px; flex-wrap:nowrap}
.p6-diff{background:var(--gold-soft); color:var(--warn); padding:6px 10px; border-radius:8px; margin:4px 0 0}
.p6-empty p{margin:0}
.p6-filebtn{align-self:flex-start; cursor:pointer}
.p6-skills{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px} .p6-skills li{display:flex; flex-direction:column; gap:8px}
.p6-order{padding-left:20px; display:flex; flex-direction:column; gap:6px} .p6-order li span:first-child{flex:1} .p6-order li{display:flex; align-items:center; gap:8px}
.p6-pfprev h2{margin:0} .p6-pfprev h3{margin:14px 0 4px; font-size:1rem} .p6-pfprev ul{margin:0; padding-left:18px}
.p6-srcsum{display:flex; flex-wrap:wrap; gap:8px} .p6-srcsum span{background:var(--sunk); border-radius:10px; padding:8px 12px; font-size:.85rem} .p6-srcsum b{font-size:1.1rem; margin-right:4px}
.p6-review{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.p6-review li{display:flex; justify-content:space-between; align-items:center; gap:10px} .p6-review li>div{display:flex; flex-direction:column; gap:4px}
.p6-state{font-size:.78rem; font-weight:700; color:var(--muted)} .p6-state-complete,.p6-state-uploaded{color:var(--good)} .p6-state-started{color:var(--blue)}
.p6-dsc{border-left:4px solid var(--gold)}
.p6-mecard{border:1.5px solid var(--violet)}
.p6-rbcard{border-left:4px solid var(--violet)}
@media (max-width:520px){ .p6-nav{flex-direction:column; align-items:stretch} .p6-nav .row{justify-content:space-between} .p6-claim .grow{min-width:0} }
@media print{ body.p6-printing *{visibility:hidden} body.p6-printing .p6-pfprev, body.p6-printing .p6-pfprev *{visibility:visible} body.p6-printing .p6-pfprev{position:absolute; left:0; top:0; width:100%} }
/* D2.3 · Personal Discovery */
.r3-o.d23-sp{border-style:dashed; color:var(--muted)} .r3-o.d23-sp.on{background:var(--sunk); color:var(--ink); border-style:solid; border-color:var(--ink)}
.d23-situ{background:var(--sunk); border-radius:12px; padding:10px 12px; margin:0 0 6px; font-weight:600}
.d23-help summary{font-size:.8rem; color:var(--muted); cursor:pointer; margin-top:6px} .d23-private{color:var(--muted)}
.d23-dl{display:grid; gap:6px; margin:0} .d23-dl div{display:grid; grid-template-columns:150px 1fr; gap:8px} .d23-dl dt{font-size:.78rem; font-weight:700; color:var(--muted)} .d23-dl dd{margin:0; font-size:.88rem}
.d23-actlist{display:flex; flex-wrap:wrap; gap:6px; max-height:300px; overflow:auto; padding:2px} .d23-actlist li[hidden]{display:none}
.d23-cats{flex-wrap:wrap; gap:6px} .d23-cats .chip{border:1px solid var(--line); background:transparent; border-radius:999px; padding:4px 10px; font:inherit; font-size:.78rem; cursor:pointer; color:inherit} .d23-cats .chip.on{background:var(--ink); color:#fff}
.d23-revlist li{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line)} .d23-carlist li{padding:6px 0; border-bottom:1px solid var(--line)}
.l4-chip.d23-src{background:var(--gold-soft); color:var(--warn)} .l4-chip.d23-opt{background:var(--sunk); color:var(--muted)} .l4-chip.d23-off{background:transparent; color:var(--muted); border:1px dashed var(--line)}
.d23-scen .r3-opts{flex-direction:column; align-items:stretch} .d23-scen .r3-o{text-align:left; border-radius:12px}
.d24 button.link,.d23 button.link,.d23-res button.link,.d23-plan button.link,.d23-srcrev button.link{background:none; border:0; padding:0; color:var(--accent, #6d5efc); cursor:pointer; font:inherit; font-size:.82rem; text-decoration:underline; text-align:left}
.d23-hob summary{cursor:pointer; list-style:none} .d23-hob summary::-webkit-details-marker{display:none}
@media (max-width:760px){.d23-dl div{grid-template-columns:1fr}}
/* D2.4 · My Habits & How I Learn */
.d24-tabs ul{display:flex; list-style:none; gap:6px; flex-wrap:wrap; margin:0; padding:0} .d24-tabs a{display:inline-block; padding:6px 12px; border-radius:999px; border:1px solid var(--line); font-size:.82rem; text-decoration:none; color:inherit; background:var(--card, #fff)} .d24-tabs a.on{background:var(--ink); color:#fff; border-color:var(--ink)} .d24-tabs a:focus-visible{outline:2px solid var(--accent, #6d5efc); outline-offset:2px}
.d24-ev{display:inline-block; font-size:.7rem; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--sunk); color:var(--muted); margin-left:4px; vertical-align:middle}
.d24-ev-obs,.d24-ev-practice,.d24-ev-trainer{background:var(--blue-soft); color:var(--blue)} .d24-ev-bench,.d24-ev-self{background:var(--gold-soft); color:var(--warn)}
.d24-dir{display:inline-block; align-self:flex-start; width:auto; font-size:.7rem; font-weight:700; padding:1px 8px; border-radius:999px; border:1px solid var(--line)} .d24-build{color:var(--blue)} .d24-reduce{color:var(--warn)}
.d24-cards{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.d24-chart svg{width:100%; max-width:560px; height:auto} .d24-bar{fill:var(--blue)} .d24-axis{stroke:var(--line)} .d24-ax,.d24-v,.d24-nd{font-size:10px; fill:var(--muted)} .d24-v{fill:var(--ink); font-weight:700}
.d24-wt td.d24-c{text-align:center; font-weight:700} .d24-s-done,.d24-s-clean{color:var(--blue)} .d24-s-slip,.d24-s-none{color:var(--warn)} .d24-s-nr{color:var(--muted)}
.d24-empty{font-weight:600} .d24-inl input{width:70px; margin-left:6px} .d24-hab summary{cursor:pointer; padding:6px 0} .d24-hab[hidden],.d24-sub[hidden],.d24-layer[hidden]{display:none} .d24-sub summary{cursor:pointer; padding:6px 0}
.d23-flag{background:var(--gold-soft); border-radius:8px; padding:6px 10px}
/* D2.5 */
.d25-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.d25-dest{display:flex; flex-direction:column; gap:4px; padding:12px; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); background:var(--card, #fff)}
.d25-dest:hover,.d25-dest:focus-visible{border-color:var(--blue)} .d25-dest .l4-chip{align-self:flex-start}
.d25-allh{font-size:1rem; margin:4px 0 -4px}
.d25-checks>li,.d25-ch,.d25-badge{padding:10px 0; border-top:1px solid var(--line)} .d25-checks>li:first-child{border-top:0}
.d25-tab{width:100%; border-collapse:collapse; font-size:.88rem} .d25-tab th,.d25-tab td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top}
.d25-tab-wrap,.d25 section,.d25-achv section{overflow-x:auto} .d25-badge p,.d25-tab td{overflow-wrap:anywhere}
.d25-items{padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.d25-stem{font-weight:600; white-space:pre-wrap} .d25-pre{white-space:pre-wrap}
.d25-opt{display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border:1px solid var(--line); border-radius:10px; cursor:pointer} .d25-opt.on{border-color:var(--blue); background:var(--blue-soft)}
.d25-rv{padding:8px 0; border-top:1px solid var(--line)} .d25-rv.no .d25-stem::before{content:"✗ "; color:var(--bad, #b42318)} .d25-rv.ok .d25-stem::before{content:"✓ "; color:var(--good, #067647)}
.d25-pct{font-size:1.6rem; font-weight:800} .d25-big{font-size:1.1rem} .d25-big b{font-size:2rem}
.d25-draftnote,.d25-policy{border-left:3px solid var(--gold); padding-left:8px}
.d25-gap{border-left:3px solid var(--warn)} .d25-reg{color:var(--warn)}
.d25-toast{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:60; background:var(--ink); color:#fff; padding:10px 14px; border-radius:12px; display:flex; gap:10px; align-items:center; max-width:calc(100% - 32px); box-shadow:0 6px 24px rgba(0,0,0,.2)}
.d25-toast a{color:#fff; font-weight:700} .d25-toast .d25-x{background:none; border:0; color:#fff; font-size:1.2rem; cursor:pointer}
.link.sm,button.link{background:none; border:0; padding:0; color:var(--blue); text-decoration:underline; cursor:pointer; font:inherit}
@media (max-width:520px){ .d25-tab{font-size:.8rem} .d25-grid{grid-template-columns:1fr} }
.d25-ladder{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0} .d25-ladder li{padding:4px 10px; border-radius:999px; border:1px solid var(--line); font-size:.82rem; color:var(--muted)} .d25-ladder li.on{background:var(--blue-soft); color:var(--blue); border-color:var(--blue)}
.d25-mini{display:inline-block; width:60px; height:8px; border-radius:4px; background:var(--sunk); vertical-align:middle; position:relative; overflow:hidden} .d25-mini::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--blue)}
.d25-chart{margin:4px 0; max-width:420px} .d25-svg{width:100%; height:auto} .d25-svgl{font-size:11px; fill:var(--ink)} .d25-bar{fill:var(--blue)} .d25-line{stroke:var(--blue); stroke-width:2} .d25-dot{fill:var(--blue)}
.d25-p0{fill:#1F4E9A} .d25-p1{fill:#E07B24} .d25-p2{fill:#2E8B57} .d25-p3{fill:#8E44AD} .d25-p4{fill:#C0392B} .d25-pie{stroke:#fff; stroke-width:1}
.d25-dl{display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; margin:6px 0} .d25-dl dt{font-weight:700} .d25-dl dd{margin:0}
.d25-cap>summary{cursor:pointer; list-style:none} .d25-cap>summary h2{display:inline; font-size:1.05rem} .d25-cap>summary::-webkit-details-marker{display:none} .d25-cap>summary::after{content:" ▾"; color:var(--muted)}
.d25-ns{color:var(--muted)} .d25-skrow{padding:8px 0; border-top:1px solid var(--line)} .d25-rubric{border:1px solid var(--line); border-radius:10px; padding:8px}
@media (max-width:520px){ .d25-dl{grid-template-columns:1fr} }
/* D2.5-V */
.d25-case{border-left:3px solid var(--line,#cfd6e4);padding:.4rem .7rem;background:rgba(255,255,255,.05);white-space:pre-wrap}
:root[data-theme="light"] .d25-case{background:#f5f7fb}
.d25-fig{margin:.3rem 0;max-width:100%}.d25-figsvg{width:100%;max-width:340px;height:auto;color:var(--ink,#1d2433)}.d25-fig.sm .d25-figsvg{max-width:76px}
.d25-optfig{display:inline-flex;align-items:center;gap:.4rem;vertical-align:middle}.d25-alt summary{cursor:pointer}
.d25-num input{max-width:12rem;font-size:1rem}.d25v-proto{border:2px dashed #c77d00;background:#3a2a10;color:#ffe3b3}.d25v-warn{color:#e08a4a;font-weight:600}
.d25v-json{white-space:pre-wrap;font-size:.75rem;max-height:16rem;overflow:auto}.d25v-q td{vertical-align:top}.d25v-filter .field{min-width:9rem}
@media (max-width:560px){.d25v-q{font-size:.8rem}.d25v-filter{flex-direction:column}}
.d25-s0{fill:#1f5fbf}.d25-s1{fill:#e07b00}.d25-s0l{stroke:#1f5fbf}.d25-s1l{stroke:#e07b00}.d25-legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;vertical-align:middle}.d25-legend i.d25-s0{background:#1f5fbf}.d25-legend i.d25-s1{background:#e07b00}.d25-legend span{margin-right:.8rem}