/* AI Kids Lab Academy — design system.
   Built on the AI Reflection Quest look (ink + gold, chunky borders, Baloo 2 +
   Nunito) and calmed down for long study sessions. Every screen, lesson card,
   question widget and lab uses only these classes. */

:root{
  color-scheme: only light;
  --ink:#15171C; --ink-2:#2A2F3A; --muted:#5B606A; --faint:#8A8F99;
  --paper:#FFF9EC; --paper-2:#FFF3D6; --card:#FFFFFF; --line:#E6DFCF;
  --gold:#FFC800; --gold-deep:#DFA426; --gold-ink:#87620F; --gold-wash:#FFF1C2;
  --blue:#2F6FED; --blue-wash:#E4ECFF;
  --coral:#E8453C; --coral-wash:#FFE5E2;
  --green:#109A66; --green-wash:#D9F5E8;
  --violet:#7B4DFF; --violet-wash:#EEE7FF;
  --teal:#0E9C9C; --teal-wash:#D7F4F2;
  --good:#109A66; --good-wash:#DDF7EA; --bad:#D93A40; --bad-wash:#FFE3E4;
  --data:#2F6FED; --cv:#E8453C; --nlp:#109A66;
  --b:3px solid var(--ink); --b2:2px solid var(--ink);
  --sh:4px 4px 0 var(--ink); --sh-sm:2px 2px 0 var(--ink);
  --r:16px; --r-sm:10px;
  --head:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --top:64px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--body); font-weight:500; font-size:17px; line-height:1.55; color:var(--ink); background:var(--paper); min-height:100vh;
  background-image:radial-gradient(rgba(21,23,28,.06) 1.1px, transparent 1.2px); background-size:22px 22px;}
h1,h2,h3,h4{font-family:var(--head); font-weight:800; line-height:1.12; letter-spacing:-.01em; text-wrap:balance;}
h1{font-size:clamp(2rem,5vw,3rem);} h2{font-size:clamp(1.5rem,3.4vw,2.1rem);} h3{font-size:1.3rem;} h4{font-size:1.08rem;}
p{text-wrap:pretty;}
a{color:inherit;}
button,input,select,textarea{font:inherit; color:inherit;}
button{cursor:pointer;}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px;}
[hidden]{display:none !important;}
.sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.wrap{max-width:1120px; margin:0 auto; padding-inline:16px;}
.muted{color:var(--muted);} .faint{color:var(--faint);} .small{font-size:.88rem;} .tiny{font-size:.78rem;}
.center{text-align:center;} .mono{font-family:var(--mono);}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.between{justify-content:space-between;}
.stack{display:grid; gap:14px;}
.mt{margin-top:14px;} .mt2{margin-top:22px;} .mt3{margin-top:34px;} .mb{margin-bottom:14px;}
.ic{width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle;}
.ic.sm{width:16px; height:16px;} .ic.lg{width:28px; height:28px;} .ic.xl{width:44px; height:44px; stroke-width:1.5;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body); font-weight:800; font-size:1rem; line-height:1.2;
  background:#fff; color:var(--ink); border:var(--b); border-radius:12px; padding:10px 16px; box-shadow:var(--sh); text-decoration:none;
  transition:transform .08s, box-shadow .08s, background .15s; touch-action:manipulation; min-height:44px;}
.btn:hover:not(:disabled){background:#FFFDF6;}
.btn:active:not(:disabled){transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink);}
.btn.primary{background:var(--gold);} .btn.primary:hover:not(:disabled){background:#FFD43B;}
.btn.dark{background:var(--ink); color:#fff;} .btn.dark:hover:not(:disabled){background:var(--ink-2);}
.btn.good{background:var(--good); color:#fff;} .btn.ghost{box-shadow:none; border-width:2px;}
.btn.big{font-size:1.12rem; padding:14px 22px; border-radius:14px;}
.btn.sm{font-size:.88rem; padding:6px 12px; min-height:36px; border-width:2px; box-shadow:var(--sh-sm); border-radius:10px;}
.btn.block{width:100%;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn .ic{width:18px; height:18px; stroke-width:2.2;}
.linkbtn{background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; color:var(--muted); font-weight:700;}
.linkbtn:hover{color:var(--ink);}

/* ---------- forms ---------- */
.field{display:grid; gap:6px;}
.field label{font-weight:800; font-size:.95rem;}
.input{width:100%; border:var(--b2); border-radius:12px; padding:11px 14px; background:#fff; font-weight:600; min-height:46px;}
.input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash);}
textarea.input{min-height:110px; resize:vertical; line-height:1.5;}
select.input{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:34px;}
.pin{display:flex; gap:10px;}
.pin input{width:56px; height:62px; text-align:center; font-family:var(--head); font-size:1.8rem; font-weight:800; border:var(--b); border-radius:12px; background:#fff;}
.pin input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash);}
.err{color:var(--bad); font-weight:700; font-size:.92rem;}

/* ---------- cards & surfaces ---------- */
.card{background:var(--card); border:var(--b); border-radius:var(--r); box-shadow:var(--sh); padding:22px;}
.card.flat{box-shadow:none; border-width:2px;}
.panel{background:#fff; border:var(--b2); border-radius:var(--r-sm); padding:14px 16px;}
.chip{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:.8rem; padding:3px 10px; border-radius:999px; border:2px solid var(--ink); background:#fff; white-space:nowrap;}
.chip.gold{background:var(--gold);} .chip.ok{background:var(--good-wash); border-color:var(--good); color:#0B6B47;}
.chip.bad{background:var(--bad-wash); border-color:var(--bad); color:#A3262B;} .chip.dim{border-color:var(--line); color:var(--muted);}
.kicker{font-weight:800; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink);}
.u-gold{--u:var(--gold); --uw:var(--gold-wash);} .u-blue{--u:var(--blue); --uw:var(--blue-wash);}
.u-coral{--u:var(--coral); --uw:var(--coral-wash);} .u-green{--u:var(--green); --uw:var(--green-wash);}
.u-violet{--u:var(--violet); --uw:var(--violet-wash);} .u-teal{--u:var(--teal); --uw:var(--teal-wash);}

/* ---------- top bar ---------- */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--ink); color:#fff; border-bottom:3px solid var(--gold);}
.top .wrap{display:flex; align-items:center; gap:10px; height:var(--top);}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; margin-right:auto; min-width:0;}
.brand svg{width:28px; height:28px; flex-shrink:0;}
.brand svg rect:first-child{fill:none; stroke:var(--gold); stroke-width:10;} .brand svg rect:nth-child(2){fill:var(--gold);} .brand svg rect:last-child{fill:var(--ink);}
.brand b{font-weight:900; letter-spacing:.12em; font-size:.8rem; text-transform:uppercase; white-space:nowrap;}
.brand span{font-family:var(--head); font-weight:700; color:var(--gold); font-size:1rem; white-space:nowrap;}
.tpill{display:inline-flex; align-items:center; gap:6px; background:#22262F; border:2px solid rgba(255,255,255,.16); color:#fff; border-radius:999px; padding:5px 12px; font-weight:800; font-size:.88rem; white-space:nowrap; text-decoration:none;}
.tpill.xp{background:var(--gold); color:var(--ink); border-color:var(--gold);}
.tpill .ic{width:16px; height:16px;}
.tpill .dot{min-width:20px; height:20px; border-radius:10px; background:var(--coral); color:#fff; font-size:.75rem; display:inline-grid; place-items:center; padding:0 5px;}
.avatar{width:38px; height:38px; border-radius:12px; background:var(--gold); color:var(--ink); border:2px solid var(--gold); font-family:var(--head); font-weight:800; display:grid; place-items:center; flex-shrink:0;}
@media (max-width:720px){ .brand b{display:none;} .tpill .lbl{display:none;} .top .wrap{gap:7px;} }
@media (max-width:400px){ .brand span{display:none;} }

main{padding-block:26px 90px;}

/* ---------- menu ---------- */
.menu{position:absolute; right:16px; top:calc(var(--top) + 6px); background:#fff; color:var(--ink); border:var(--b); border-radius:14px; box-shadow:var(--sh); min-width:230px; padding:8px; z-index:50;}
.menu a, .menu button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; padding:10px 12px; border-radius:10px; font-weight:700; text-decoration:none;}
.menu a:hover, .menu button:hover{background:var(--paper-2);}
.menu .who{padding:10px 12px; border-bottom:2px solid var(--line); margin-bottom:6px;}
.menu .who b{display:block;} .menu .who span{font-size:.82rem; color:var(--muted); word-break:break-all;}

/* ---------- login ---------- */
.auth{min-height:calc(100vh - var(--top) - 120px); display:grid; place-items:center; padding-block:30px;}
.auth .card{width:min(100%,480px);}
.auth h1{font-size:clamp(1.8rem,5vw,2.4rem);}
.auth-hero{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; width:100%;}
@media (max-width:860px){ .auth-hero{grid-template-columns:1fr;} .auth-side{display:none;} }
.auth-side h2{font-size:clamp(1.8rem,4vw,2.7rem); margin-top:12px; line-height:1.2;}
.auth-side h2 em{font-style:normal; background:var(--gold); display:inline-block; line-height:1.1; padding:0 .18em; border-radius:8px;}
.auth-side ul{list-style:none; display:grid; gap:10px; margin-top:18px;}
.auth-side li{display:flex; gap:10px; align-items:flex-start; font-weight:700;}
.auth-side li .ic{color:var(--gold-ink); margin-top:3px;}

/* ---------- dashboard ---------- */
.hello{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;}
.ring{--p:0; width:96px; height:96px; border-radius:50%; background:conic-gradient(var(--gold) calc(var(--p)*1%), #EFE7D2 0); display:grid; place-items:center; border:var(--b); flex-shrink:0;}
.ring b{width:68px; height:68px; border-radius:50%; background:#fff; border:2px solid var(--ink); display:grid; place-items:center; font-family:var(--head); font-size:1.25rem;}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
@media (max-width:760px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr));} }
.stat{background:#fff; border:var(--b2); border-radius:14px; padding:12px 14px;}
.stat .k{font-weight:800; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px;}
.stat .v{font-family:var(--head); font-weight:800; font-size:1.7rem; line-height:1.1; margin-top:4px; font-variant-numeric:tabular-nums;}
.stat .v small{font-size:.9rem; color:var(--muted); font-family:var(--body);}
.continue{display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; background:var(--ink); color:#fff; border:var(--b); border-radius:var(--r); padding:20px 22px; box-shadow:6px 6px 0 var(--gold); text-decoration:none;}
.continue .ui{width:58px; height:58px; border-radius:16px; background:var(--gold); color:var(--ink); display:grid; place-items:center;}
.continue h3{color:#fff;} .continue p{color:#C9CCD3;}
@media (max-width:600px){ .continue{grid-template-columns:1fr;} .continue .ui{display:none;} }
.gymcard{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;}
@media (max-width:600px){ .gymcard{grid-template-columns:1fr;} }
.units{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
@media (max-width:900px){ .units{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .units{grid-template-columns:1fr;} }
.unit{display:flex; flex-direction:column; gap:10px; background:#fff; border:var(--b); border-radius:var(--r); box-shadow:var(--sh); padding:18px; text-decoration:none; color:inherit; transition:transform .12s; position:relative; overflow:hidden;}
.unit:hover{transform:translateY(-3px);}
.unit::before{content:""; position:absolute; inset:0 0 auto 0; height:8px; background:var(--u);}
.unit .ub{display:flex; align-items:center; gap:10px;}
.unit .ub .ic{color:var(--ink); width:24px; height:24px;}
.unit .uk{font-weight:800; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.unit h3{font-size:1.25rem;}
.bar{height:12px; border:2px solid var(--ink); border-radius:999px; background:#fff; overflow:hidden;}
.bar i{display:block; height:100%; background:var(--u,var(--gold)); transition:width .6s var(--ease);}

/* ---------- unit page ---------- */
.uhead{background:var(--uw); border:var(--b); border-radius:var(--r); padding:22px; box-shadow:var(--sh);}
.tlist{display:grid; gap:12px; margin-top:22px;}
.titem{display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px; align-items:center; background:#fff; border:var(--b2); border-radius:14px; padding:12px 14px; text-decoration:none; color:inherit; transition:transform .12s, box-shadow .12s;}
.titem:hover{transform:translateY(-2px); box-shadow:var(--sh-sm);}
.titem .n{width:52px; height:52px; border-radius:14px; border:var(--b2); display:grid; place-items:center; font-family:var(--head); font-weight:800; font-size:1.2rem; background:var(--paper-2);}
.titem.done .n{background:var(--u,var(--gold));}
.titem.done .n .ic{width:24px; height:24px; stroke-width:2.6;}
.titem h4{font-size:1.1rem;}
.titem .meta{display:flex; flex-wrap:wrap; gap:6px 12px; font-size:.84rem; color:var(--muted); font-weight:700; margin-top:2px;}
.stars{display:inline-flex; gap:2px;} .stars .ic{width:16px; height:16px; color:var(--gold-deep);} .stars .ic.on{fill:var(--gold);}
@media (max-width:560px){ .titem{grid-template-columns:44px minmax(0,1fr);} .titem .n{width:44px; height:44px;} .titem .go{grid-column:1 / -1;} }

/* ---------- topic player ---------- */
.player{display:grid; grid-template-columns:280px minmax(0,1fr); gap:26px; align-items:start;}
@media (max-width:960px){ .player{grid-template-columns:minmax(0,1fr);} .steps-side{display:none;} }
.steps-side{position:sticky; top:calc(var(--top) + 18px); background:#fff; border:var(--b2); border-radius:14px; padding:12px; max-height:calc(100vh - var(--top) - 40px); overflow:auto;}
.steps-side h4{font-size:.95rem; padding:4px 6px 10px; border-bottom:2px solid var(--line); margin-bottom:6px;}
.sstep{display:flex; gap:10px; align-items:center; width:100%; text-align:left; background:none; border:0; padding:7px 8px; border-radius:10px; font-size:.88rem; font-weight:700; color:var(--muted);}
.sstep:hover:not(:disabled){background:var(--paper-2); color:var(--ink);}
.sstep:disabled{cursor:not-allowed; opacity:.55;}
.sstep .d{width:22px; height:22px; border-radius:7px; border:2px solid var(--line); display:grid; place-items:center; flex-shrink:0;}
.sstep .d .ic{width:14px; height:14px; stroke-width:3;}
.sstep.done{color:var(--ink);} .sstep.done .d{background:var(--good); border-color:var(--good); color:#fff;}
.sstep.now{background:var(--gold-wash); color:var(--ink);} .sstep.now .d{border-color:var(--ink); background:var(--gold);}
.phead{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-bottom:16px;}
.phead .t{flex:1; min-width:220px;}
.phead h2{font-size:clamp(1.4rem,3vw,1.9rem);}
.pbar{height:10px; border-radius:999px; background:#EDE6D3; overflow:hidden; border:2px solid var(--ink); margin-bottom:18px;}
.pbar i{display:block; height:100%; background:var(--gold); transition:width .4s var(--ease);}
.stage{background:#fff; border:var(--b); border-radius:var(--r); box-shadow:var(--sh); padding:24px 24px 22px; min-height:280px;}
@media (max-width:560px){ .stage{padding:18px 15px; border-radius:14px;} main{padding-block:16px 80px;} }
.stage-k{display:flex; align-items:center; gap:8px; font-weight:800; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:6px;}
.stage h3{font-size:clamp(1.3rem,2.6vw,1.65rem); margin-bottom:12px;}
.navrow{display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:22px; flex-wrap:wrap;}
.fade-in{animation:fadeIn .35s var(--ease);}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ---------- lesson card content vocabulary ---------- */
.lesson{display:grid; gap:14px; font-size:1.04rem;}
.lesson p{max-width:70ch;}
.lesson ul, .lesson ol:not(.flow){padding-left:22px; display:grid; gap:6px;}
.lesson h4{margin-top:4px;}
.lesson code{font-family:var(--mono); font-size:.9em; background:var(--paper-2); border:1px solid var(--line); padding:1px 6px; border-radius:6px;}
.key, .def, .eg, .warn, .formula{border:var(--b2); border-radius:12px; padding:12px 14px;}
.key{background:var(--gold-wash);} .key b:first-child{display:block; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:2px;}
.def{background:var(--blue-wash);} .def dfn{font-style:normal; font-weight:900; margin-right:6px;}
.eg{background:var(--green-wash);} .eg b:first-child{margin-right:6px;}
.warn{background:var(--coral-wash);} .warn b:first-child{margin-right:6px;}
.formula{background:#fff; font-family:var(--head); font-weight:700; font-size:1.15rem; text-align:center; border-style:dashed;}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;}
.mini{background:var(--paper); border:var(--b2); border-radius:12px; padding:12px 14px;}
.mini h4{font-size:1rem; margin-bottom:4px;} .mini p{font-size:.95rem;}
.flow{list-style:none; display:grid; gap:8px; counter-reset:f;}
.flow li{counter-increment:f; display:grid; grid-template-columns:34px 1fr; gap:4px 12px; align-items:start; background:#fff; border:var(--b2); border-radius:12px; padding:10px 12px;}
.flow li::before{content:counter(f); grid-row:span 2; width:30px; height:30px; border-radius:9px; background:var(--gold); border:2px solid var(--ink); display:grid; place-items:center; font-family:var(--head); font-weight:800;}
.flow li span{color:var(--muted); font-size:.95rem;}
.tbl{width:100%; border-collapse:collapse; font-size:.95rem; background:#fff;}
.tbl th, .tbl td{border:2px solid var(--ink); padding:7px 10px; text-align:left; vertical-align:top;}
.tbl th{background:var(--ink); color:#fff; font-weight:800;}
.tblwrap{overflow-x:auto;}
.tag{display:inline-block; font-weight:800; font-size:.8rem; padding:2px 9px; border-radius:999px; border:2px solid currentColor; white-space:nowrap;}
.tag.data{color:var(--data); background:var(--blue-wash);} .tag.cv{color:var(--cv); background:var(--coral-wash);} .tag.nlp{color:var(--nlp); background:var(--green-wash);}
pre.code, .codeblock{font-family:var(--mono); font-size:.92rem; line-height:1.55; background:#1B1E25; color:#F1EDE2; border:var(--b2); border-radius:12px; padding:12px 14px; overflow-x:auto; white-space:pre;}

/* ---------- questions ---------- */
.q{display:grid; gap:14px;}
.q .stem{font-family:var(--head); font-weight:700; font-size:clamp(1.12rem,2.3vw,1.32rem); line-height:1.3;}
.q .stem code{font-family:var(--mono); font-size:.85em; background:var(--paper-2); padding:1px 6px; border-radius:6px; border:1px solid var(--line);}
.q .hint{font-size:.88rem; color:var(--muted); font-weight:700;}
.opts{display:grid; gap:10px;}
.opt{display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%; background:#fff; border:var(--b2); border-radius:12px; padding:11px 14px; font-weight:700; box-shadow:var(--sh-sm); transition:background .12s, transform .08s;}
.opt:hover:not(:disabled){background:var(--paper);}
.opt .k{width:28px; height:28px; border-radius:8px; border:2px solid var(--ink); display:grid; place-items:center; font-family:var(--head); font-weight:800; flex-shrink:0; background:var(--paper-2); font-size:.95rem;}
.opt[aria-pressed="true"], .opt[aria-checked="true"]{background:var(--gold-wash); outline:3px solid var(--gold-deep);}
.opt.right{background:var(--good-wash); outline:3px solid var(--good);} .opt.right .k{background:var(--good); color:#fff; border-color:var(--good);}
.opt.wrong{background:var(--bad-wash); outline:3px solid var(--bad);} .opt.wrong .k{background:var(--bad); color:#fff; border-color:var(--bad);}
.opt:disabled{cursor:default;}
.tf{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.olist{display:grid; gap:8px;}
.oitem{display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; background:#fff; border:var(--b2); border-radius:12px; padding:8px 10px; font-weight:700;}
.oitem .n{font-family:var(--head); font-weight:800; text-align:center;}
.oitem .mv{display:flex; gap:6px;}
.oitem .mv button{width:36px; height:36px; border:2px solid var(--ink); border-radius:9px; background:var(--paper-2); display:grid; place-items:center;}
.oitem .mv button:disabled{opacity:.3;}
.oitem.right{background:var(--good-wash); border-color:var(--good);} .oitem.wrong{background:var(--bad-wash); border-color:var(--bad);}
.mrow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:center; background:#fff; border:var(--b2); border-radius:12px; padding:8px 10px; font-weight:700;}
.mrow.right{background:var(--good-wash); border-color:var(--good);} .mrow.wrong{background:var(--bad-wash); border-color:var(--bad);}
@media (max-width:560px){ .mrow{grid-template-columns:1fr;} }
.mpick{display:none;}
@media (max-width:560px){ .mpick:not(:empty){display:block; font-weight:600; font-size:.88rem; color:var(--muted); line-height:1.35; margin-top:-2px;} }
.brow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; background:#fff; border:var(--b2); border-radius:12px; padding:8px 10px; font-weight:700;}
.brow.right{background:var(--good-wash); border-color:var(--good);} .brow.wrong{background:var(--bad-wash); border-color:var(--bad);}
@media (max-width:620px){ .brow{grid-template-columns:1fr;} }
.seg{display:inline-flex; flex-wrap:wrap; border:2px solid var(--ink); border-radius:10px; overflow:hidden; background:#fff;}
.seg button{background:none; border:0; padding:7px 12px; font-weight:800; font-size:.86rem; min-height:36px;}
.seg button + button{border-left:2px solid var(--ink);}
.seg button[aria-pressed="true"]{background:var(--ink); color:#fff;}
.numin{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.numin .input{max-width:200px; font-family:var(--head); font-size:1.3rem;}
.fb{border:var(--b2); border-radius:12px; padding:12px 14px; display:grid; gap:6px;}
.fb.good{background:var(--good-wash); border-color:var(--good);} .fb.bad{background:var(--bad-wash); border-color:var(--bad);}
.fb .h{font-family:var(--head); font-weight:800; font-size:1.1rem; display:flex; align-items:center; gap:8px;}
.fb .h .ic{width:22px; height:22px; stroke-width:2.6;}
.fb .mis{font-weight:700;}
.fb .gym{font-size:.86rem; color:var(--muted); font-weight:700; display:flex; gap:6px; align-items:center;}
.qcount{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-weight:800; font-size:.86rem; color:var(--muted); margin-bottom:12px;}
.dots{display:flex; gap:5px; flex-wrap:wrap;}
.dots i{width:12px; height:12px; border-radius:4px; border:2px solid var(--ink); background:#fff;}
.dots i.ok{background:var(--good); border-color:var(--good);} .dots i.no{background:var(--bad); border-color:var(--bad);} .dots i.now{background:var(--gold);}
.result{text-align:center; display:grid; gap:12px; justify-items:center;}
.result .big{font-family:var(--head); font-weight:800; font-size:clamp(2.4rem,7vw,3.6rem); line-height:1;}
.weak{display:grid; gap:8px; text-align:left; width:100%; max-width:560px;}
.weak li{list-style:none; display:flex; gap:10px; align-items:center; background:var(--bad-wash); border:2px solid var(--bad); border-radius:10px; padding:8px 12px; font-weight:700;}

/* ---------- labs (shared building blocks) ---------- */
.lab{display:grid; gap:16px;}
.lab-intro{color:var(--muted); font-weight:600; max-width:70ch;}
.lab-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start;}
@media (max-width:760px){ .lab-grid{grid-template-columns:minmax(0,1fr);} }
.lab-box{background:var(--paper); border:var(--b2); border-radius:14px; padding:14px;}
.lab-box h4{margin-bottom:8px;}
.lab-canvas{display:block; width:100%; max-width:100%; height:auto; background:#fff; border:var(--b2); border-radius:12px; touch-action:none;}
.lab-done{display:flex; gap:12px; align-items:center; background:var(--good-wash); border:var(--b2); border-color:var(--good); border-radius:12px; padding:12px 14px; font-weight:800;}
.lab-done .ic{color:var(--good); width:24px; height:24px; stroke-width:2.6;}
.meter{height:14px; border:2px solid var(--ink); border-radius:999px; background:#fff; overflow:hidden;}
.meter i{display:block; height:100%; background:var(--gold); transition:width .3s;}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-weight:700;}
.kv dt{color:var(--muted);}
.pill-row{display:flex; flex-wrap:wrap; gap:8px;}
.toggle{border:2px solid var(--ink); background:#fff; border-radius:999px; padding:6px 12px; font-weight:800; font-size:.9rem;}
.toggle[aria-pressed="true"]{background:var(--ink); color:#fff;}
.bigemoji{font-size:2.6rem; line-height:1;}
.svgchart{width:100%; height:auto; display:block; background:#fff; border:var(--b2); border-radius:12px;}
.svgchart text{font-family:var(--body); font-size:12px; fill:var(--ink-2); font-weight:700;}

/* ---------- code editor ---------- */
.code-wrap{display:grid; gap:12px;}
.code-task{display:grid; gap:10px;}
.editor{border:var(--b2); border-radius:12px; overflow:hidden; background:#1B1E25;}
.editor .CodeMirror{height:auto; min-height:180px; font-family:var(--mono); font-size:15px; line-height:1.55; background:#1B1E25; color:#F1EDE2;}
.editor textarea.plain{width:100%; min-height:200px; border:0; background:#1B1E25; color:#F1EDE2; font-family:var(--mono); font-size:15px; padding:12px; resize:vertical; tab-size:4;}
.console{font-family:var(--mono); font-size:.92rem; background:#0F1115; color:#E7E3D8; border:var(--b2); border-radius:12px; padding:12px 14px; min-height:70px; white-space:pre-wrap; word-break:break-word; max-height:320px; overflow:auto;}
.console .e{color:#FF8E86;} .console .i{color:#9FE2C4;}
.tests{display:grid; gap:8px;}
.test{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; border:2px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff; font-size:.92rem;}
.test.ok{border-color:var(--good); background:var(--good-wash);} .test.no{border-color:var(--bad); background:var(--bad-wash);}
.test pre{font-family:var(--mono); font-size:.82rem; white-space:pre-wrap; margin-top:4px;}
.py-status{font-size:.85rem; font-weight:700; color:var(--muted); display:flex; gap:8px; align-items:center;}
.spin{width:16px; height:16px; border:3px solid var(--line); border-top-color:var(--ink); border-radius:50%; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- certificates ---------- */
.certs{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
.certcard{background:#fff; border:var(--b2); border-radius:14px; padding:14px; display:grid; gap:8px;}
.certcard.locked{opacity:.55;}
.certcard canvas, .certcard img{width:100%; border:2px solid var(--line); border-radius:8px;}

/* ---------- overlays ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(21,23,28,.55); z-index:80; display:grid; place-items:center; padding:16px; overflow:auto;}
.modal{background:var(--paper); border:var(--b); border-radius:20px; box-shadow:6px 6px 0 var(--ink); width:min(100%,560px); padding:24px 22px; animation:pop .3s cubic-bezier(.2,1.3,.4,1);}
@keyframes pop{from{transform:scale(.92); opacity:0;} to{transform:none; opacity:1;}}
.modal .badge{width:96px; height:96px; margin:0 auto 10px; border-radius:24px; background:var(--gold); border:var(--b); display:grid; place-items:center; box-shadow:var(--sh);}
.modal .badge .ic{width:52px; height:52px; stroke-width:1.6;}
.toast{position:fixed; left:16px; right:16px; bottom:max(18px, env(safe-area-inset-bottom, 0px)); margin:0 auto; width:fit-content; max-width:520px; z-index:90; background:var(--ink); color:#fff; border:3px solid var(--gold); border-radius:14px; padding:10px 16px; font-weight:700; box-shadow:var(--sh); animation:pop .25s;}
.xpfly{position:fixed; z-index:95; pointer-events:none; font-family:var(--head); font-weight:800; font-size:1.3rem; color:var(--gold-ink); animation:fly 1s forwards;}
@keyframes fly{to{transform:translateY(-50px); opacity:0;}}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:85;}
.banner{background:var(--gold-wash); border:var(--b2); border-radius:12px; padding:10px 14px; font-weight:700; font-size:.92rem; display:flex; gap:10px; align-items:center;}
.loading{display:grid; place-items:center; min-height:50vh; gap:12px; color:var(--muted); font-weight:800;}

footer.foot{text-align:center; color:var(--muted); font-size:.85rem; padding:0 16px 36px; font-weight:600;}
footer.foot a{font-weight:800;}

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important;} }
@media print{ .top, footer.foot, .no-print{display:none !important;} body{background:#fff;} }

/* ---------- CodeMirror (dark, brand) ---------- */
.editor .CodeMirror-gutters{background:#16181E; border-right:1px solid #2A2F3A;}
.editor .CodeMirror-linenumber{color:#5B606A;}
.editor .CodeMirror-cursor{border-left:2px solid #FFC800;}
.editor .CodeMirror-selected, .editor .CodeMirror-focused .CodeMirror-selected{background:#3A3420;}
.editor .cm-s-default .cm-keyword, .editor .cm-keyword{color:#FFC800; font-weight:600;}
.editor .cm-s-default .cm-builtin, .editor .cm-builtin{color:#7FC8FF;}
.editor .cm-s-default .cm-string, .editor .cm-string{color:#9FE2C4;}
.editor .cm-s-default .cm-number, .editor .cm-number{color:#FFB38A;}
.editor .cm-s-default .cm-comment, .editor .cm-comment{color:#8A8F99; font-style:italic;}
.editor .cm-s-default .cm-operator, .editor .cm-operator{color:#F1EDE2;}
.editor .cm-variable, .editor .cm-variable-2, .editor .cm-property{color:#F1EDE2;}
.editor .cm-s-default .cm-def, .editor .cm-def{color:#C8A8FF;}
.editor .cm-s-default .cm-error, .editor .cm-error{color:#FF8E86;}
.editor .CodeMirror-matchingbracket{color:#FFC800 !important; text-decoration:underline;}

/* Tally mark bundle of five: four strokes crossed by a fifth (works in every font). */
.t5{position:relative; display:inline-block; font-family:var(--mono); font-weight:700; letter-spacing:1px; padding:0 2px;}
.t5::after{content:""; position:absolute; left:-2px; right:-2px; top:52%; border-top:2px solid currentColor; transform:rotate(-24deg);}