/* ifinsta Academy: shared styles for every artboard.
   Tokens are copied from ifinpay pay.css (see the academy-ui skill, reference/tokens.css).
   Flat, hairlines, no shadows. Blue means interactive. Status is a word on a tint. */

.app{
  --paper:#e9edf3;--paper-work:#e5eaf1;--raised:#ffffff;--sunk:#edf0f5;--hover:#f1f4f9;
  --ink:#111827;--ink-soft:#374151;--muted:#4b5563;--faint:#5f6773;
  --line:#d5dbe4;--line-strong:#858fa1;
  --accent:#1a56db;--accent-deep:#1e40af;--accent-tint:#e8f0fe;--accent-subtle:#f0f4ff;--on-accent:#ffffff;
  --halo:rgba(26,86,219,.16);--link:var(--accent);--link-hover:var(--accent-deep);--art:.55;
  --brand:#0f2b5b;--on-brand:#ffffff;--signal:#a84a07;--signal-tint:#fef3c7;
  --ok:#047857;--ok-tint:#d1fae5;--warn:#b45309;--warn-tint:#fef3c7;--bad:#b91c1c;--bad-tint:#fee2e2;--info:#1e40af;--info-tint:#e8f0fe;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --r:6px;--r-lg:8px;--r-dialog:12px;
}
.app[data-theme="dark"]{
  --paper:#070c17;--paper-work:#0a111e;--raised:#111a2b;--sunk:#0f1829;--hover:#1b2433;
  --ink:#f3f4f6;--ink-soft:#d1d5db;--muted:#b6bdc9;--faint:#9ca3af;--line:#33405a;--line-strong:#5b6c8a;
  --accent:#7baaff;--accent-deep:#a9c6ff;--accent-tint:#16284d;--accent-subtle:#121f3a;--on-accent:#0b1220;
  --halo:rgba(123,170,255,.28);--art:.36;--brand:#e5ecff;--on-brand:#0b1220;--signal:#fbbf24;--signal-tint:#3a2a08;
  --ok:#6ee7b7;--ok-tint:#0b3a2e;--warn:#fcd34d;--warn-tint:#3a2a08;--bad:#fca5a5;--bad-tint:#3b1414;--info:#93c5fd;--info-tint:#14284a;
}
.app[data-theme="contrast"]{
  --paper:#000;--paper-work:#000;--raised:#000;--sunk:#1f1f1f;--hover:#1f1f1f;
  --ink:#fff;--ink-soft:#fff;--muted:#e5e5e5;--faint:#e5e5e5;--line:#8c8c8c;--line-strong:#fff;
  --accent:#ffd400;--accent-deep:#ffe766;--accent-tint:#2b2400;--accent-subtle:#1f1b00;--on-accent:#000;
  --halo:rgba(255,212,0,.4);--art:0;--brand:#fff;--on-brand:#000;--signal:#ffd400;--signal-tint:#2b2400;
  --ok:#86efac;--ok-tint:#052e16;--warn:#fde047;--warn-tint:#2b2400;--bad:#fca5a5;--bad-tint:#3b0a0a;--info:#bfdbfe;--info-tint:#0a1f44;
}

/* base */
.app{position:relative;font:14px/1.5 var(--sans);color:var(--ink);background:var(--paper-work);-webkit-font-smoothing:antialiased}
.app *,.app *::before,.app *::after{box-sizing:border-box}
.app h1,.app h2,.app h3,.app h4{margin:0;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.app p{margin:0 0 12px;text-wrap:pretty}
.app ul,.app ol{margin:0 0 12px;padding-inline-start:20px}
.app small{font-size:12px;color:var(--muted)}
.app :where(a){color:var(--link);text-decoration:none}
.app :where(a):hover{color:var(--link-hover);text-decoration:underline}
.app :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.app .muted{color:var(--muted)}
.app .soft{color:var(--ink-soft)}
.app .right{text-align:right}
.app .grow{flex:1;min-width:0}
.app .skip{position:absolute;left:-9999px;top:8px}
.app .skip:focus{left:8px;z-index:9;background:var(--raised);padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r)}
.app .ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.app .ic.l{width:20px;height:20px}
.app .ic.xl{width:28px;height:28px}

/* page art: pure CSS dot lattice, decoration only */
.app.sparse{background:var(--paper)}
.app.sparse::before,.app .main::before{content:"";position:absolute;left:0;right:0;top:0;height:300px;pointer-events:none;
  background-image:radial-gradient(circle,var(--accent) 1.1px,transparent 1.5px);background-size:24px 24px;
  opacity:calc(var(--art) * .3);-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.app.sparse>*{position:relative}
.app .main{position:relative}
.app .main>*{position:relative}

/* shell: one sidebar, no top bar */
.app .shell{display:flex;min-height:inherit}
.app .side{width:208px;flex:none;background:var(--raised);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:12px 8px;gap:4px}
.app .brand{display:flex;align-items:center;gap:8px;padding:4px 8px 8px;font-size:14px}
.app .tile{width:24px;height:24px;border-radius:var(--r);background:var(--brand);color:var(--on-brand);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.app .ctx{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;margin:0 0 4px;line-height:1.3}
.app .ctx small{display:block}
.app .chips{display:flex;gap:6px;padding:4px 8px 8px}
.app .env{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:4px;font-size:12px;font-weight:500;background:var(--signal-tint);color:var(--signal)}
.app .nav{display:flex;flex-direction:column;gap:2px;flex:1}
.app .nav-h{font-size:12px;font-weight:500;color:var(--muted);padding:10px 8px 4px}
.app .nav a{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:var(--r);color:var(--ink-soft)}
.app .nav a:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.app .nav a[aria-current="page"]{background:var(--accent-tint);color:var(--accent);font-weight:500}
.app .cnt{margin-left:auto;font-size:12px;font-weight:600;font-family:var(--mono);background:var(--signal-tint);color:var(--signal);border-radius:9999px;padding:0 7px}
.app .s-foot{display:flex;align-items:center;gap:8px;padding:8px;border-top:1px solid var(--line);margin-top:8px}
.app .av{width:28px;height:28px;border-radius:9999px;background:var(--accent-tint);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.app .s-foot .who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.app .main{flex:1;min-width:0;padding:24px 32px 48px;max-width:1280px}

/* page head */
.app .c-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.app .c-head h1{font-size:22px;font-weight:600}
.app .kicker{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:2px}
.app .aside{font-size:12px;color:var(--muted)}
.app .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* cards */
.app .panel{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:16px;overflow:hidden}
.app .p-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.app .p-head h2{font-size:15px;font-weight:600}
.app .p-body{padding:16px}
.app .row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);color:var(--ink)}
.app .p-head+.row,.app .row:first-child{border-top:0}
.app a.row:hover{background:var(--hover);text-decoration:none;color:var(--ink)}
.app .row .t{font-weight:500}
.app .row .s{font-size:13px;color:var(--muted)}
.app .row.locked{background:var(--sunk);color:var(--ink-soft)}
.app .row.now{background:var(--accent-subtle)}

/* hero: the one next action */
.app .hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 24px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--accent-subtle),var(--raised))}
.app[data-theme="contrast"] .hero{background:var(--raised)}
.app .hero .lbl{font-size:12px;font-weight:500;color:var(--muted)}
.app .hero h2{font-size:20px;font-weight:600;margin:2px 0}
.app .hero .cap{color:var(--ink-soft);margin:0}
.app .hero .fig{font-family:var(--mono);font-size:28px;font-weight:600}

/* stat strip: one card, cells divided by hairlines */
.app .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:16px;overflow:hidden}
.app .stats.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.app .stats.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.app .stat{padding:14px 16px;border-left:1px solid var(--line)}
.app .stat:first-child{border-left:0}
.app .stat .lbl{font-size:12px;font-weight:500;color:var(--muted)}
.app .stat .val{font-family:var(--mono);font-size:20px;font-weight:600;line-height:1.3}
.app .stat .sub{font-size:12px;color:var(--muted)}

/* buttons: flat */
.app .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r);background:var(--accent);color:var(--on-accent);border:1px solid transparent;font:500 14px var(--sans);cursor:pointer;white-space:nowrap}
.app .btn:hover{background:var(--accent-deep);color:var(--on-accent);text-decoration:none}
.app .btn.ghost{background:var(--raised);color:var(--ink);border-color:var(--line-strong)}
.app .btn.ghost:hover{background:var(--accent-subtle);color:var(--ink)}
.app .btn.quiet{background:transparent;color:var(--link);border-color:transparent}
.app .btn.quiet:hover{background:var(--accent-subtle);color:var(--link-hover)}
.app .btn.danger{background:var(--raised);color:var(--bad);border-color:var(--line-strong)}
.app .btn.danger:hover{background:var(--bad-tint);color:var(--bad)}
.app .btn.small{height:28px;padding:0 10px;font-size:13px}
.app .btn.large{height:44px;padding:0 20px;font-size:15px}
.app .btn.block{display:flex;width:100%}
.app .btn[disabled]{opacity:.55;cursor:not-allowed}
.app .icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--raised);color:var(--ink)}

/* forms */
.app .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.app .field>label,.app .field>.lab{font-size:13px;font-weight:500}
.app .input{height:40px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--raised);color:var(--ink);padding:0 12px;font:14px var(--sans);width:100%}
.app textarea.input{height:auto;min-height:110px;padding:10px 12px;line-height:1.5}
.app .hint{font-size:12px;color:var(--muted)}
.app .check{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.app .check input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent)}
.app .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

/* status: a word on a tint */
.app .status{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:4px;font-size:12px;font-weight:500;background:var(--sunk);color:var(--ink-soft);white-space:nowrap}
.app .status.ok{background:var(--ok-tint);color:var(--ok)}
.app .status.warn{background:var(--warn-tint);color:var(--warn)}
.app .status.bad{background:var(--bad-tint);color:var(--bad)}
.app .status.info{background:var(--info-tint);color:var(--info)}
.app .chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;border:1px solid var(--line);font-size:12px;color:var(--ink-soft);white-space:nowrap}

/* messages: a tint, no edge colour */
.app .alert{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--r);background:var(--info-tint);margin-bottom:16px}
.app .alert.ok{background:var(--ok-tint)}
.app .alert.warn{background:var(--warn-tint)}
.app .alert.bad{background:var(--bad-tint)}
.app .alert b{font-weight:600}
.app .banner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 32px;background:var(--warn-tint);border-bottom:1px solid var(--line)}
.app .banner.bad{background:var(--bad-tint)}
.app .banner.info{background:var(--info-tint)}
.app .gate{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;background:var(--sunk);border-radius:var(--r);color:var(--ink-soft)}

/* tables */
.app .tbl-wrap{overflow-x:auto}
.app .tbl{width:100%;border-collapse:collapse}
.app .tbl th{text-align:left;font-size:12px;font-weight:500;color:var(--muted);padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.app .tbl td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:middle}
.app .tbl tr:first-child td{border-top:0}
.app .tbl td.r,.app .tbl th.r{text-align:right}
.app .tbl td.r{font-family:var(--mono);font-variant-numeric:tabular-nums}
.app .tbl tbody tr:hover{background:var(--hover)}
.app .kv{margin:0}
.app .kv>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid var(--line)}
.app .kv>div:first-child{border-top:0}
.app .kv dt{color:var(--muted)}
.app .kv dd{margin:0}

/* filters, tabs */
.app .pills{display:flex;gap:8px;flex-wrap:wrap}
.app .pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:9999px;border:1px solid var(--line-strong);background:var(--raised);color:var(--ink);font-size:13px}
.app .pill.on{background:var(--accent-tint);border-color:var(--accent);color:var(--accent);font-weight:500}
.app .tabs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.app .tabs a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r);color:var(--muted)}
.app .tabs a:hover{background:var(--hover);text-decoration:none;color:var(--ink)}
.app .tabs a[aria-current="page"]{background:var(--accent-tint);color:var(--accent);font-weight:500}
.app .toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.app .toolbar .input{width:260px;height:36px}

/* progress, timeline, steps */
.app .bar{height:6px;border-radius:9999px;background:var(--sunk);overflow:hidden;border:1px solid var(--line)}
.app .bar i{display:block;height:100%;background:var(--accent)}
.app .timeline{list-style:none;margin:0;padding:0}
.app .timeline li{display:flex;gap:12px;padding:10px 0}
.app .timeline .dot{width:8px;height:8px;border-radius:9999px;background:var(--line-strong);margin-top:7px;flex:none}
.app .timeline .dot.on{background:var(--accent)}
.app .num{width:24px;height:24px;border-radius:9999px;background:var(--sunk);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;font:600 12px var(--mono);flex:none}
.app .num.done{background:var(--ok-tint);color:var(--ok)}
.app .num.now{background:var(--accent);color:var(--on-accent)}
.app .steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.app .step{display:flex;gap:10px;padding:14px 16px;border-left:1px solid var(--line)}
.app .step:first-child{border-left:0}
.app .step .t{font-weight:500}

/* layout helpers */
.app .cols{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.app .cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.app .cols.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.app .split{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 340px;align-items:start}
.app .split.wide{grid-template-columns:minmax(0,1fr) 400px}
.app .split.rev{grid-template-columns:300px minmax(0,1fr)}
.app .stack>*+*{margin-top:16px}
.app .stack .panel{margin-bottom:0}
.app .flex{display:flex;gap:12px;align-items:center}
.app .between{justify-content:space-between}
.app .wrap{flex-wrap:wrap}
.app h3.sec{font-size:12px;font-weight:500;color:var(--muted);margin:20px 0 8px}
.app .empty{padding:32px 16px;text-align:center;color:var(--muted)}
.app .empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.app .prose{max-width:68ch;font-size:15px;line-height:1.7}
.app .prose h2{font-size:18px;margin:24px 0 8px}
.app .prose h3{font-size:15px;margin:20px 0 6px}
.app .prose p{margin:0 0 14px}
.app .code{font:13px/1.55 var(--mono);background:var(--sunk);padding:12px 16px;border-radius:var(--r);overflow:auto;margin:0 0 14px;white-space:pre}
.app .save{font-size:12px;color:var(--muted)}
.app hr{border:0;border-top:1px solid var(--line);margin:16px 0}

/* public site */
.app .sitebar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 32px;background:color-mix(in srgb,var(--raised) 92%,transparent);border-bottom:1px solid var(--line)}
.app .sitebar nav{display:flex;gap:4px}
.app .sitebar nav a{padding:6px 12px;border-radius:var(--r);color:var(--ink-soft)}
.app .sitebar nav a:hover{background:var(--hover);text-decoration:none;color:var(--ink)}
.app .page{max-width:1120px;margin:0 auto;padding:40px 32px 56px}
.app .lede{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.15;max-width:18ch;margin:0 0 14px}
.app .sub-lede{font-size:17px;color:var(--ink-soft);max-width:56ch;margin:0 0 24px}
.app .card{display:flex;flex-direction:column;gap:8px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;color:var(--ink)}
a.card:hover{text-decoration:none}
.app .thumb{height:92px;border-radius:var(--r);background:var(--accent-tint);color:var(--accent);display:flex;align-items:flex-end;padding:10px 12px;font-weight:600;
  background-image:radial-gradient(circle,var(--accent) 1px,transparent 1.4px);background-size:16px 16px}
.app .foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 32px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;background:var(--raised)}
.app .foot nav{display:flex;gap:16px}

/* auth sheet */
.app .sheet{width:100%;max-width:440px;margin:0 auto;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-dialog);padding:32px}
.app .sheet h1{font-size:22px;font-weight:600;margin:16px 0 6px}
.app .sheet-wrap{padding:72px 24px}
.app .sheet-brand{display:flex;align-items:center;gap:8px;font-weight:600}

/* player */
.app .pbar{display:flex;align-items:center;gap:16px;height:52px;padding:0 20px;background:var(--raised);border-bottom:1px solid var(--line)}
.app .player{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;min-height:inherit}
.app .player>aside{background:var(--raised);padding:16px;border-right:1px solid var(--line)}
.app .player>aside.rail{border-right:0;border-left:1px solid var(--line)}
.app .player .content{padding:32px 40px}
.app .outline a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--r);color:var(--ink-soft)}
.app .outline a:hover{background:var(--hover);text-decoration:none}
.app .outline a[aria-current="page"]{background:var(--accent-tint);color:var(--accent);font-weight:500}
.app .outline .wk{font-size:12px;font-weight:500;color:var(--muted);margin:14px 8px 4px}
.app .lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:32px;padding-top:16px;border-top:1px solid var(--line)}
.app .video{aspect-ratio:16/9;border-radius:var(--r-lg);background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.app .support{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--accent-subtle)}

/* receipt, rubric, matrix, credential */
.app .receipt{font-family:var(--mono);font-size:13px}
.app .rubric{width:100%;border-collapse:separate;border-spacing:0}
.app .rubric th{text-align:left;font-size:12px;font-weight:500;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.app .rubric td{padding:10px;border-top:1px solid var(--line);vertical-align:top}
.app .rubric td.crit{width:150px;font-weight:500}
.app .lv{display:block;padding:10px;border:1px solid var(--line);border-radius:var(--r);font-size:13px;min-height:44px;color:var(--ink)}
.app .lv input{margin-right:6px;accent-color:var(--accent)}
.app .lv.on,.app .lv:has(input:checked){background:var(--accent-tint);border-color:var(--accent)}
.app .lv span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.app .matrix th.sticky,.app .matrix td.sticky{position:sticky;left:0;background:var(--raised);border-right:1px solid var(--line)}
.app .credential{display:flex;gap:20px;align-items:center;padding:20px 24px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:16px}
.app .seal{width:64px;height:64px;border-radius:9999px;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.app .cons{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--raised);overflow:hidden;margin-bottom:16px}
.app .cons>div{padding:14px 16px}
.app .cons>div+div{border-left:1px solid var(--line)}
.app .cons h3{font-size:13px;margin-bottom:6px}
.app .cons ul{margin:0}
.app .diff{font:13px/1.6 var(--mono);margin:0;padding:0;list-style:none}
.app .diff li{padding:2px 16px;white-space:pre-wrap}
.app .diff .add{background:var(--ok-tint);color:var(--ink)}
.app .diff .del{background:var(--bad-tint);color:var(--ink)}
.app .chart{display:flex;align-items:flex-end;gap:10px;height:160px;padding:8px 0;border-bottom:1px solid var(--line)}
.app .chart i{flex:1;background:var(--accent);border-radius:4px 4px 0 0;min-width:0}
.app .chart-x{display:flex;gap:10px;font-size:12px;color:var(--muted);margin-top:6px}
.app .chart-x span{flex:1;text-align:center}
.app .case{display:flex;gap:24px;flex-wrap:wrap;padding:14px 16px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:16px}
.app .case div{display:flex;flex-direction:column}
.app .case small{font-size:12px}

/* phone artboards */
.app.mob{width:390px;background:var(--raised)}
.app.mob .mhead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.app.mob .mtabs{display:flex;gap:4px;overflow-x:auto;padding:8px 12px;border-bottom:1px solid var(--line)}
.app.mob .mtabs a{white-space:nowrap;padding:6px 12px;border-radius:var(--r);color:var(--muted)}
.app.mob .mtabs a[aria-current="page"]{background:var(--accent-tint);color:var(--accent);font-weight:500}
.app.mob .sec{padding:16px;border-top:1px solid var(--line)}
.app.mob .sec:first-of-type{border-top:0}
.app.mob .btn{height:44px}
.app.mob .row{padding:12px 16px}
.app.mob .hero{border:0;border-radius:0;margin:0;padding:20px 16px;border-bottom:1px solid var(--line)}
.app.mob .stats{border:0;border-radius:0;margin:0}
.app.mob .panel{border:0;border-radius:0;margin:0;border-top:1px solid var(--line)}

/* narrow screens: cards dissolve, grids collapse */
@media (max-width:820px){
  .app .shell{flex-direction:column}
  .app .side{width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--line)}
  .app .nav{flex-direction:row;overflow-x:auto;flex:1 1 100%}
  .app .nav-h,.app .ctx,.app .chips,.app .s-foot{display:none}
  .app .main,.app .page{padding:16px}
  .app .cols,.app .cols.c3,.app .cols.c4,.app .split,.app .split.wide,.app .split.rev,.app .form-row,.app .cons{grid-template-columns:1fr}
  .app .cons>div+div{border-left:0;border-top:1px solid var(--line)}
  .app .stats,.app .stats.c3,.app .stats.c5{grid-template-columns:1fr}
  .app .stat{border-left:0;border-top:1px solid var(--line)}
  .app .player{grid-template-columns:1fr}
  .app .steps{grid-auto-flow:row}
  .app .hero{flex-direction:column;align-items:flex-start}
  .app .sitebar nav{display:none}
}

/* ---- the running app (not in the design boards) ------------------------------------------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-latin.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("/fonts/jetbrains-mono-latin.woff2") format("woff2")}
html,body{margin:0;background:var(--page-bg,#e5eaf1)}
html[data-theme="dark"],html[data-theme="dark"] body{--page-bg:#0a111e}
html[data-theme="contrast"],html[data-theme="contrast"] body{--page-bg:#000}
@media (prefers-color-scheme:dark){html:not([data-theme]),html:not([data-theme]) body{--page-bg:#0a111e}}
#root.app{min-height:100vh}
.app .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app .loading{padding:32px 16px;color:var(--muted)}
.app .loading b{display:block;color:var(--ink);margin-bottom:2px}
.app .loading .bar{margin-top:10px;max-width:260px}
.app .loading .bar i{width:40%;animation:slide 1.2s ease-in-out infinite}
@keyframes slide{0%{margin-left:-40%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){.app .loading .bar i{animation:none;width:100%}}
.app .toast-host{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:30;max-width:360px}
.app .toast{padding:10px 14px;border:1px solid var(--line-strong);background:var(--raised);border-radius:var(--r);color:var(--ink)}
.app .toast.bad{background:var(--bad-tint)}
.app .toast.ok{background:var(--ok-tint)}
.app dialog.modal{border:1px solid var(--line-strong);border-radius:var(--r-dialog);background:var(--raised);color:var(--ink);padding:0;max-width:560px;width:calc(100% - 32px)}
.app dialog.modal::backdrop{background:rgba(7,12,23,.55)}
.app dialog.modal .m-head{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:600;font-size:16px}
.app dialog.modal .m-body{padding:16px 20px}
.app dialog.modal .m-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.app .acct{position:relative}
.app .acct details{width:100%}
.app .acct summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:2px;border-radius:var(--r)}
.app .acct summary::-webkit-details-marker{display:none}
.app .acct .menu{position:absolute;bottom:44px;left:0;width:240px;background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:8px;z-index:20}
.app .acct .menu .btn{width:100%;justify-content:flex-start;margin-top:4px}
.app .acct .menu h4{font-size:12px;font-weight:500;color:var(--muted);margin:4px 4px 6px}
.app .seg{display:flex;gap:4px;flex-wrap:wrap}
.app .seg button{height:28px;padding:0 10px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--raised);color:var(--ink);font:13px var(--sans);cursor:pointer}
.app .seg button[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent);font-weight:500}
.app .err{color:var(--bad);font-size:13px;margin-top:2px}
.app .input[aria-invalid="true"]{border-color:var(--bad)}
.app .md :where(h1){font-size:22px;margin:0 0 12px}
.app .md :where(h2){font-size:18px;margin:22px 0 8px}
.app .md :where(h3){font-size:15px;margin:18px 0 6px}
.app .md :where(p,ul,ol){margin:0 0 14px}
.app .md :where(code){font:13px var(--mono);background:var(--sunk);padding:1px 5px;border-radius:4px}
.app .md :where(pre){font:13px/1.55 var(--mono);background:var(--sunk);padding:12px 16px;border-radius:var(--r);overflow:auto;margin:0 0 14px}
.app .md :where(blockquote){margin:0 0 14px;padding:2px 14px;border-left:3px solid var(--line-strong);color:var(--ink-soft)}
.app .tick{color:var(--ok)}
.app .timer{font:600 20px var(--mono)}
.app .opts label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;min-height:44px}
.app .opts label:has(input:checked){background:var(--accent-tint);border-color:var(--accent)}
.app .opts input{margin-top:3px;accent-color:var(--accent)}
.app [hidden]{display:none!important}
@media (max-width:820px){.app .banner{padding:10px 16px}.app .acct .menu{bottom:auto;top:44px}.app .toast-host{left:16px;right:16px;max-width:none}}
@media (forced-colors:active){.app .btn,.app .pill,.app .status{border:1px solid ButtonText}}

.app #page-title:focus{outline:none}
.app .stat .val.t{font-family:var(--sans);font-size:16px;font-weight:600}