:root{
  /* Dizayn tizimi (2026-09-23): minimal zinc palitra, nozik chegaralar (zinc-200 / zinc-800),
     Geist shrifti, Lucide ikonkalar. Yorug' rejim — toza oq, qorong'i — zinc-950. */
  --ground:#FAFAFA; --surface:#FFFFFF; --surface-2:#F4F4F5;
  --ink:#18181B; --muted:#52525B; --faint:#71717A;
  --line:#E4E4E7; --line-soft:#F4F4F5; --line-strong:#D4D4D8;
  --primary:#18181B; --primary-deep:#09090B; --primary-wash:#F4F4F5; --on-primary:#FAFAFA;
  --brand:#2563EB; --brand-wash:#EFF6FF;
  --accent:#B45309; --accent-wash:#FEF3C7;
  --ok:#047857; --ok-wash:#ECFDF5;
  --err:#DC2626; --err-wash:#FEF2F2;
  --shadow:0 1px 2px rgba(24,24,27,.04);
  --shadow-lift:0 1px 2px rgba(24,24,27,.04), 0 12px 32px -16px rgba(24,24,27,.16);
  --r:12px; --r-sm:10px; --r-btn:10px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --display:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --body:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#09090B; --surface:#111113; --surface-2:#18181B;
    --ink:#FAFAFA; --muted:#A1A1AA; --faint:#8B8B94;
    --line:#27272A; --line-soft:#1C1C1F; --line-strong:#3F3F46;
    --primary:#FAFAFA; --primary-deep:#FFFFFF; --primary-wash:#1C1C1F; --on-primary:#09090B;
    --brand:#60A5FA; --brand-wash:#0F1B2E;
    --accent:#FBBF24; --accent-wash:#2A2110;
    --ok:#34D399; --ok-wash:#0A2A20;
    --err:#F87171; --err-wash:#2A1215;
    --shadow:none;
    --shadow-lift:0 12px 32px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#09090B; --surface:#111113; --surface-2:#18181B;
  --ink:#FAFAFA; --muted:#A1A1AA; --faint:#8B8B94;
  --line:#27272A; --line-soft:#1C1C1F; --line-strong:#3F3F46;
  --primary:#FAFAFA; --primary-deep:#FFFFFF; --primary-wash:#1C1C1F; --on-primary:#09090B;
  --brand:#60A5FA; --brand-wash:#0F1B2E;
  --accent:#FBBF24; --accent-wash:#2A2110;
  --ok:#34D399; --ok-wash:#0A2A20;
  --err:#F87171; --err-wash:#2A1215;
  --shadow:none;
  --shadow-lift:0 12px 32px -16px rgba(0,0,0,.7);
}
@font-face{font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/geist.woff2) format("woff2")}

*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none}
button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}

#app{max-width:460px; margin:0 auto; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; background:var(--ground); position:relative}

.hdr{position:sticky; top:0; z-index:20; background:var(--ground); border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:10px; padding:10px 16px; min-height:52px}
.hdr-back{width:32px; height:32px; margin-left:-6px; display:none; align-items:center; justify-content:center;
  border-radius:8px; color:var(--primary); flex:0 0 auto}
.hdr-back svg{width:20px; height:20px}
.hdr.has-back .hdr-back{display:flex}
.hdr-t{font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.01em;
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.streak{display:flex; align-items:center; gap:5px; font-family:var(--mono); font-weight:600; font-size:13px;
  color:var(--accent); background:var(--accent-wash); padding:4px 9px; border-radius:20px; flex:0 0 auto}

/* ---- reyting jadvali ---- */
.rk-me{border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2);
  padding:13px; margin-bottom:14px; display:flex; align-items:center; gap:12px}
.rk-me .big{font-family:var(--mono); font-weight:600; font-size:22px; color:var(--primary); min-width:52px}
.rk-me .txt{flex:1; min-width:0}
.rk-me .txt b{display:block; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rk-me .txt span{font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.rk-row{display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); margin-bottom:8px}
.rk-row .pos{font-family:var(--mono); font-weight:600; font-size:14px; color:var(--muted); min-width:30px; text-align:center}
.rk-row .nm{flex:1; min-width:0}
.rk-row .nm b{display:block; font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rk-row .nm span{font-family:var(--mono); font-size:11px; color:var(--faint)}
.rk-row .sc{font-family:var(--mono); font-weight:600; font-size:14px; color:var(--primary); text-align:right}
.rk-row.me{border-color:var(--primary); background:var(--primary-wash)}
.rk-row.m1 .pos,.rk-row.m2 .pos,.rk-row.m3 .pos{font-size:18px}
.rk-code{font-family:var(--mono); font-weight:600; font-size:29px; letter-spacing:5px; text-align:center;
  padding:14px 10px; border:1px dashed var(--primary); border-radius:var(--r); background:var(--primary-wash);
  color:var(--primary-deep); margin-top:4px}

/* ---- profil menyusi / header'dagi foydalanuvchi tugmasi ---- */
.hdr-user{display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:0;
  padding:2px 4px; flex:0 0 auto; cursor:pointer; max-width:80px}
.hdr-user:active{transform:scale(.97)}
.hdr-user .av{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--primary);
  background:var(--primary-wash); color:var(--primary-deep); font-family:var(--mono); font-weight:600;
  font-size:11.5px; display:flex; align-items:center; justify-content:center}
.hdr-user .nm{font-family:var(--mono); font-size:9.5px; line-height:1.1; color:var(--muted);
  max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---- profil ekrani sarlavhasi: avatar + ism ---- */
.pf-head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px;
  padding:18px 12px 15px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2);
  margin-bottom:15px}
.pf-av{width:64px; height:64px; border-radius:50%; background:var(--primary-wash); color:var(--primary-deep);
  font-family:var(--display); font-weight:700; font-size:26px; display:flex; align-items:center;
  justify-content:center; border:2px solid var(--primary)}
.pf-head b{font-family:var(--display); font-size:18px; letter-spacing:-.01em}
.pf-sub{font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.pf-sub i{font-style:normal}
.fld{margin-bottom:11px}
.fld label{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.kv{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); margin-bottom:7px}
.kv span{color:var(--muted); font-size:13px}
.kv b{font-family:var(--mono); font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* reyting ekranidagi «men» qatori (ixcham) */
.rk-me .pos{font-family:var(--mono); font-weight:600; font-size:15px; color:var(--primary); min-width:34px}

main{flex:1; padding:16px 16px 96px; display:flex; flex-direction:column; gap:16px}
.screen{display:none; flex-direction:column; gap:16px}
.screen.on{display:flex}

.eyebrow{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}
.hero{display:flex; flex-direction:column; gap:3px}
.hero h1{font-family:var(--display); font-weight:700; font-size:25px; line-height:1.15;
  letter-spacing:-.025em; margin:0; text-wrap:balance}
.hero p{margin:0; font-size:13.5px; color:var(--muted)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 10px;
  display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow)}
.stat b{font-family:var(--mono); font-weight:600; font-size:19px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.1}
.stat span{font-size:10.5px; color:var(--faint); font-weight:500; letter-spacing:.02em}

.bar{height:4px; border-radius:4px; background:var(--line); overflow:hidden}
.bar i{display:block; height:100%; background:var(--primary); border-radius:4px; transition:width .3s ease}
.bar.acc i{background:var(--accent)}
.bar.done i{background:var(--ok)}

/* ---------- dashboard: lesson list ---------- */
.lessons{display:flex; flex-direction:column; gap:8px}
.lrow{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:11px 13px; text-align:left; box-shadow:var(--shadow);
  transition:transform .12s ease}
.lrow:active{transform:scale(.987)}
.lnum{width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--primary-wash); color:var(--primary); font-family:var(--mono); font-weight:600; font-size:14px}
.lrow.full .lnum{background:var(--ok-wash); color:var(--ok)}
.lb{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.lb b{font-weight:600; font-size:14px; line-height:1.25}
.lb small{font-size:11.5px; color:var(--faint); font-family:var(--mono); font-variant-numeric:tabular-nums}
.lpct{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--faint); flex:0 0 auto;
  font-variant-numeric:tabular-nums; width:38px; text-align:right}
.lrow.full .lpct{color:var(--ok)}

/* ---------- lesson hub ---------- */
.lhead{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px}
.lhead .eyebrow{color:var(--primary)}
.lhead h2{margin:0; font-family:var(--display); font-weight:700; font-size:21px; line-height:1.2;
  letter-spacing:-.02em; text-wrap:balance}
.lhead p{margin:0; font-size:13px; color:var(--muted)}
.modes{display:flex; flex-direction:column; gap:9px}
.mode{display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:13px 14px; text-align:left; box-shadow:var(--shadow); transition:transform .12s ease}
.mode:active{transform:scale(.985)}
.mode:disabled{opacity:.5; cursor:default}
.mode-i{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--primary-wash); color:var(--primary)}
.mode-i svg{width:20px; height:20px}
.mode.acc .mode-i{background:var(--accent-wash); color:var(--accent)}
.mode-b{flex:1; min-width:0}
.mode-b b{display:block; font-weight:600; font-size:14.5px}
.mode-b span{display:block; font-size:12px; color:var(--muted); margin-top:1px}
.mode-c{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--faint);
  font-variant-numeric:tabular-nums; flex:0 0 auto}

/* ---------- theory ---------- */
.th-intro{background:var(--primary-wash); border-radius:var(--r); padding:14px 15px; font-size:14px;
  line-height:1.55; color:var(--ink)}
.th-sec{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:9px}
.th-sec h3{margin:0; font-family:var(--display); font-weight:700; font-size:15.5px; letter-spacing:-.01em}
.th-sec p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.55}
.th-tbl{width:100%; border-collapse:collapse; font-size:13px}
.th-tbl td{border-top:1px solid var(--line-soft); padding:7px 8px; vertical-align:top}
.th-tbl tr:first-child td{border-top:none}
.th-tbl td:first-child{font-weight:600; white-space:nowrap}
.th-tbl thead td{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:600}
.th-tbl tr.good td:first-child{color:var(--ok)}
.th-tbl tr.bad td:first-child{color:var(--err)}
.th-tbl tr.bad td:nth-child(2){text-decoration:line-through; text-decoration-color:var(--err); opacity:.8}
.th-wrap{overflow-x:auto}
.th-ex{display:flex; flex-direction:column; gap:7px; border-left:3px solid var(--primary); padding-left:11px}
.th-ex div{display:flex; flex-direction:column}
.th-ex b{font-weight:600; font-size:14px}
.th-ex span{font-size:12.5px; color:var(--muted)}
.th-note{display:flex; gap:10px; background:var(--accent-wash); border-radius:var(--r); padding:13px 14px;
  font-size:13.5px; line-height:1.55}
.th-note svg{width:17px; height:17px; flex:0 0 auto; margin-top:2px; color:var(--accent)}

/* ---------- shared controls ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--primary);
  color:var(--on-primary); border-radius:11px; padding:13px 18px; font-weight:600; font-size:15px; width:100%;
  transition:transform .12s ease}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.4; cursor:default; transform:none}
.btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line)}
.btn.ok{background:var(--ok)}
.btn.no{background:var(--surface); color:var(--err); border:1px solid var(--err)}
.seg{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:3px; gap:3px}
.seg button{flex:1; padding:8px 6px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--primary); box-shadow:var(--shadow)}
.exhead{display:flex; align-items:center; gap:11px}
.exhead .bar{flex:1}
.exhead span{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums}
.note{font-size:12px; color:var(--faint); line-height:1.45}
.center{text-align:center}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px;
  text-align:left; display:flex; flex-direction:column; gap:7px; box-shadow:var(--shadow)}
.tile:active{transform:scale(.975)}
.tile-n{font-family:var(--display); font-weight:700; font-size:15px; line-height:1.2; letter-spacing:-.02em}
.tile-l{font-size:11.5px; color:var(--muted)}
.tile.done .tile-n{color:var(--ok)}
.tile.done .bar i{background:var(--ok)}

/* ---------- vocabulary ---------- */
.words{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.w{display:flex; align-items:center; gap:11px; padding:11px 13px; border-bottom:1px solid var(--line-soft); width:100%}
.w:last-child{border-bottom:none}
.w-t{flex:1; min-width:0; text-align:left}
.w-en{display:block; font-weight:600; font-size:14.5px; word-break:break-word}
.w-uz{display:block; font-size:13px; color:var(--muted); margin-top:1px; word-break:break-word}
.w-l{font-family:var(--mono); font-size:10.5px; color:var(--faint); flex:0 0 auto; white-space:nowrap}
.w.hide .w-uz{filter:blur(5px); opacity:.55}
.w-k{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); flex:0 0 auto;
  display:grid; place-items:center; color:transparent; transition:all .15s ease}
.w-k svg{width:14px; height:14px}
.w.known .w-k{background:var(--ok); border-color:var(--ok); color:var(--on-primary)}
.w.known .w-en{color:var(--muted)}
.fc{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lift);
  min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:26px 20px; text-align:center; position:relative}
.fc-en{font-family:var(--display); font-weight:700; font-size:28px; letter-spacing:-.02em; line-height:1.15;
  text-wrap:balance}
.fc-uz{font-size:16px; color:var(--primary); font-weight:500}
.fc-hint{font-size:12px; color:var(--faint)}
.fc-n{position:absolute; top:12px; right:14px; font-family:var(--mono); font-size:11.5px; color:var(--faint);
  font-variant-numeric:tabular-nums}

/* ---------- exercise ---------- */
.q{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:17px 16px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:5px}
.q-lab{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}
.q-uz{font-family:var(--display); font-weight:600; font-size:20px; line-height:1.3; letter-spacing:-.015em;
  text-wrap:balance}
.slots{min-height:56px; border:1.5px dashed var(--line); border-radius:var(--r-sm); padding:9px;
  display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; background:var(--surface-2);
  transition:border-color .2s ease, background .2s ease}
.slots.ok{border-color:var(--ok); border-style:solid; background:var(--ok-wash)}
.slots.bad{border-color:var(--err); border-style:solid; background:var(--err-wash)}
.slots:empty::before{content:"So'zlarni tanlang"; color:var(--faint); font-size:13px; padding:6px 2px}
.pool{display:flex; flex-wrap:wrap; gap:7px}
.chip{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:8px 12px;
  font-size:14.5px; font-weight:500; box-shadow:var(--shadow); transition:transform .1s ease, opacity .15s ease}
.chip:active{transform:scale(.94)}
.chip.used{opacity:.25; pointer-events:none}
.chip.in{background:var(--primary); border-color:var(--primary); color:var(--on-primary); box-shadow:none}
.verdict{display:flex; gap:9px; border-radius:var(--r-sm); padding:11px 13px; font-size:13.5px}
.verdict.ok{background:var(--ok-wash); color:var(--ok)}
.verdict.bad{background:var(--err-wash); color:var(--err)}

/* ---------- pictures ---------- */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:10px}
.pc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:9px;
  display:flex; flex-direction:column; gap:6px; align-items:center; box-shadow:var(--shadow);
  content-visibility:auto; contain-intrinsic-size:130px}
.pc img{width:100%; max-width:100%; aspect-ratio:1; object-fit:contain; border-radius:8px}
.pc.flagcard img{aspect-ratio:3/2; object-fit:cover; border:1px solid var(--line-soft)}
.pc b{font-size:12.5px; font-weight:600; text-align:center; line-height:1.25; word-break:break-word}
.pc span{font-size:11px; color:var(--muted); text-align:center; line-height:1.2}
.pbig{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lift);
  padding:20px; display:flex; align-items:center; justify-content:center; min-height:180px}
.pbig img{width:170px; max-width:100%; aspect-ratio:1; object-fit:contain}
.pbig.flagcard img{aspect-ratio:3/2; object-fit:cover; border-radius:6px; border:1px solid var(--line)}
.opts{display:grid; gap:8px}
.inp{width:100%; background:var(--surface); border:1.5px solid var(--line); border-radius:11px;
  padding:13px 14px; font-family:var(--body); font-size:16px; font-weight:500; color:var(--ink);
  transition:border-color .15s ease, background .15s ease}
.inp::placeholder{color:var(--faint)}
.inp:focus{outline:none; border-color:var(--primary)}
.inp.ok{border-color:var(--ok); background:var(--ok-wash); color:var(--ok)}
.inp.bad{border-color:var(--err); background:var(--err-wash); color:var(--err)}
#dirSeg button{font-family:var(--mono); font-size:12.5px; letter-spacing:.02em}
.opt{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:12px 14px;
  text-align:left; font-size:14.5px; font-weight:500; box-shadow:var(--shadow)}
.opt.ok{background:var(--ok-wash); border-color:var(--ok); color:var(--ok); font-weight:600}
.opt.bad{background:var(--err-wash); border-color:var(--err); color:var(--err)}
.opt.dim{opacity:.5}

/* ---------- progress ---------- */
.prow{display:flex; align-items:center; gap:11px; padding:10px 13px; border-bottom:1px solid var(--line-soft)}
.prow:last-child{border-bottom:none}
.prow b{font-size:12.5px; font-weight:600; flex:0 0 118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .bar{flex:1}
.prow span{font-family:var(--mono); font-size:11.5px; color:var(--faint); width:56px; text-align:right;
  flex:0 0 auto; font-variant-numeric:tabular-nums}

.tabs{position:fixed; bottom:0; left:0; right:0; z-index:30; background:var(--surface);
  border-top:1px solid var(--line); display:flex; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  max-width:460px; margin:0 auto}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
  color:var(--faint); font-size:10.5px; font-weight:600; border-radius:10px}
.tab svg{width:21px; height:21px}
.tab[aria-current="true"]{color:var(--primary)}
.load{display:flex; flex-direction:column; align-items:center; gap:11px; padding:44px 0; color:var(--muted); font-size:13.5px}
.boot{position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; background:var(--ground); padding:24px; text-align:center}
.spin{width:26px; height:26px; border:2.5px solid var(--line); border-top-color:var(--primary);
  border-radius:50%; animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.pop{animation:pop .3s ease}
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.015)}100%{transform:scale(1)}}

/* ---------- Ustozlik (P4): kabinet, ustozlar ro'yxati, sertifikat ---------- */
.tcard{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 14px; box-shadow:var(--shadow)}
.tcard .pf-av{width:54px; height:54px; font-size:22px}
.tcard > b{font-family:var(--display); font-size:18px}
.tcard .pf-sub{color:var(--muted); font-size:12.5px}
.cert-badge{display:inline-block; margin-top:6px; padding:3px 10px; border-radius:20px;
  font-size:11.5px; font-weight:600; border:1px solid transparent}
.cert-badge.ok{background:var(--ok-wash); color:var(--ok); border-color:var(--ok)}
.cert-badge.warn{background:var(--accent-wash); color:var(--accent); border-color:var(--accent)}
.cert-badge.bad{background:var(--err-wash); color:var(--err); border-color:var(--err)}
.tstars{display:flex; align-items:center; justify-content:center; gap:7px; margin:12px 0 2px;
  color:var(--accent); font-size:15px; letter-spacing:1px}
.tstars b{color:var(--ink); font-family:var(--display); font-size:17px}
.tstars .pf-sub{color:var(--muted); font-size:12px; letter-spacing:0}
.tstats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px}
.tstats .stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 6px; text-align:center}
.tstats .stat b{display:block; font-family:var(--display); font-size:19px}
.tstats .stat span{font-size:9.5px; letter-spacing:.4px; color:var(--faint); font-weight:600}
.tlist{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:13px; margin-bottom:11px; box-shadow:var(--shadow)}
.trow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.trow .pf-av{width:34px; height:34px; font-size:15px}
.trow > b{font-family:var(--display); font-size:15.5px}
.trow .pf-sub{color:var(--muted); font-size:12px}
.trow .cert-badge{margin-top:0; margin-left:auto}
.tlist .note{margin:7px 0 0; font-size:12.5px; color:var(--muted)}
.tlist .rate-btn{font-size:12.5px; min-height:34px}
.tmsg .verdict{margin-top:8px}
.tchk{display:flex; align-items:center; gap:9px; margin:2px 0 12px; font-size:13.5px; color:var(--muted)}
.tchk input{width:17px; height:17px; accent-color:var(--primary)}
textarea.inp{resize:vertical; font-family:var(--body); min-height:64px; line-height:1.45}
input[type="file"].inp{padding:9px; font-size:12.5px}

/* ---------- Sinflar va topshiriqlar (P5) ---------- */
.tcode{display:inline-block; margin:8px 0 2px; padding:6px 16px; border-radius:10px;
  font-family:var(--mono); font-size:22px; font-weight:600; letter-spacing:3px;
  background:var(--primary-wash); color:var(--primary-deep)}
.covr{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; box-shadow:var(--shadow)}
.covr .fld{margin-bottom:10px}
.covr .note{margin:8px 0 0}
.tlist .row2 .inp{min-height:38px}

/* ---------- O'qish (hikoyalar) — P5.1 ---------- */
.st-head{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; box-shadow:var(--shadow); margin-bottom:12px}
.st-head h2{margin:4px 0 4px; font-family:var(--display); font-size:19px}
.st-text{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; box-shadow:var(--shadow)}
.st-p{margin:0 0 14px; font-size:17px; line-height:1.95}
.st-p:last-child{margin-bottom:0}
/* So'zlar oddiy matn ko'rinishida — faqat YANGI so'z yengil belgilanadi */
.wd{cursor:pointer; padding:0; border-radius:4px; color:inherit; font:inherit}
.wd.new{background:linear-gradient(transparent 60%, var(--accent-wash) 60%)}
.wd.on{background:var(--primary); color:var(--on-primary)}
/* Suzuvchi izoh oynasi (so'z ustida) */
.st-tip{position:fixed; z-index:80; max-width:min(280px, 86vw); background:var(--ink);
  color:var(--ground); border-radius:12px; padding:9px 13px; box-shadow:var(--shadow-lift);
  font-size:14px; line-height:1.4; pointer-events:none}
.st-tip b{display:block; font-family:var(--display); font-size:16.5px; margin-bottom:1px}
.st-tip span{display:block; opacity:.8; font-size:12.5px}
.st-tip .st-arrow{position:absolute; width:10px; height:10px; background:var(--ink);
  transform:rotate(45deg); bottom:-5px; left:50%; margin-left:-5px}
.st-tip.below .st-arrow{bottom:auto; top:-5px}
.st-uz{margin-top:12px; background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); padding:12px; font-size:14.5px; color:var(--muted)}
.st-uz p{margin:0 0 10px}
.st-uz p:last-child{margin:0}
.st-q{margin-bottom:10px}
.st-q .st-opt{display:block; width:100%; text-align:left; margin-bottom:6px}
.st-opt.ok{border-color:var(--ok); background:var(--ok-wash); color:var(--ok)}
.st-opt.bad{border-color:var(--err); background:var(--err-wash); color:var(--err)}
.st-tabs{display:flex; gap:8px; overflow-x:auto; margin-bottom:10px}
.st-tabs button{flex:0 0 auto; font-size:12.5px}

/* ---------- Interaktiv dialog (P5.2) ---------- */
.dl{display:flex; flex-direction:column; gap:10px}
.dl-row{display:flex; flex-direction:column; align-items:flex-start; max-width:90%}
.dl-row.me{align-self:flex-end; align-items:flex-end}
.dl-sp{font-size:11.5px; color:var(--faint); margin-bottom:3px}
.dl-b{background:var(--surface); border:1px solid var(--line); border-radius:14px 14px 14px 5px;
  padding:9px 13px; font-size:15.5px; line-height:1.5}
.dl-row.me .dl-b{background:var(--primary-wash); border-color:var(--primary);
  border-radius:14px 14px 5px 14px}
.dl-uz{font-size:12.5px; color:var(--muted); margin-top:3px}
.dl-line{min-height:46px; background:var(--surface-2); border:1px dashed var(--line);
  border-radius:var(--r-sm); padding:10px 12px; font-size:15.5px; line-height:1.7}
.dl-line i{color:var(--faint)}
.dl-tiles{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.dl-tile{font-size:14px; padding:7px 13px}
.dl-tile[disabled]{opacity:.32}
.dl-opt.ok{border-color:var(--ok); background:var(--ok-wash); color:var(--ok)}
.dl-opt.bad{border-color:var(--err); background:var(--err-wash); color:var(--err)}

/* ---------- O'qish: 3 darajali tarjima (P5.3) ---------- */
.st-modes{display:flex; gap:8px; margin:0 0 10px}
.st-modes button{flex:1; font-size:13px}
.st-s{border-radius:4px}
.st-par{font-size:12.5px; margin:0 0 12px; padding:5px 10px}
.st-paruz{background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--r-sm);
  padding:10px 12px; margin:0 0 14px; font-size:14px; color:var(--muted)}

/* ---------- bo'sh joyni to'ldirish (P5.5) ---------- */
.cz-blank{display:inline-block; min-width:72px; padding:0 8px; border-bottom:2px dashed var(--accent);
  color:transparent}
.cz-filled{color:var(--ok); border-bottom:2px solid var(--ok); padding:0 4px}
.cz-opt.bad{border-color:var(--err); color:var(--err)}

/* ---------- talaffuz / tinglash (P5.6) ---------- */
.spk{background:var(--surface-2); border:1px solid var(--line); border-radius:999px; cursor:pointer;
  font-size:14px; line-height:1; padding:6px 9px; margin-left:6px; vertical-align:middle;
  color:var(--primary); transition:.15s}
.spk:hover{background:var(--primary-wash); border-color:var(--primary)}
.spk.on{background:var(--ok-wash); border-color:var(--ok)}
.spk-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0}
.w .spk{margin-left:0; flex:0 0 auto}
.st-p.on-read{background:var(--accent-wash); border-radius:8px; transition:.2s}



/* lug'at: bo'lib yodlash tugmalari — ixcham bitta qator (sig'masa ikkinchisiga o'tadi) */
.vgroups{gap:6px; margin:10px 0 6px}
.vgroups .btn.vg{width:auto; flex:1 1 38px; min-width:38px; padding:8px 6px; font-size:14px; border-radius:9px}
.vgroups .btn.vg:first-child{flex:2 1 76px}
.vgroups .btn.vg.ghost.full{border-color:var(--ok); color:var(--ok)}

/* lug'at testi va rasmli test: javoblar bir qatorda ikkitadan (so'zlar qisqa) */
#vtOpts, #ptOpts{grid-template-columns:1fr 1fr}
#vtOpts .opt, #ptOpts .opt{text-align:center; padding:12px 8px; overflow-wrap:anywhere}
#ptOpts > .btn{grid-column:1 / -1}
#ptOpts > .verdict{grid-column:1 / -1}

/* noto'g'ri fe'llar jadvali */
.irr-tbl td{vertical-align:middle}
.irr-tbl .irr-spk .spk{margin-left:4px}
.irr-tbl td{vertical-align:top}
.irr-tbl .irr-uz{display:block; margin-top:2px; font-size:12.5px; font-weight:400; color:var(--muted, #777); line-height:1.3}

/* ---------- savollar ko'zga tashlanadi (2026-09-23): savol — yirik va to'q, variantlar — undan past ---------- */
.qtext{font-family:var(--display); font-weight:600; font-size:19px; line-height:1.4; letter-spacing:-.01em;
  color:var(--ink); margin:4px 0 6px; text-wrap:pretty}
.qsub{font-size:14px; line-height:1.4; color:var(--muted); margin:0 0 12px}
.qhead{font-family:var(--display); font-size:18px; font-weight:700; color:var(--ink); margin:22px 0 10px}
.qhead small{font-family:var(--body); font-size:12.5px; font-weight:500; color:var(--muted); margin-left:6px}
.qcard{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--primary);
  border-radius:var(--r); padding:14px 14px 8px; box-shadow:var(--shadow); margin-bottom:12px}
.qcard .qtext{margin:4px 0 12px}
.btn.ans{font-weight:500; font-size:15px; justify-content:flex-start; text-align:left; line-height:1.35;
  padding:12px 14px}
.covr > .q-lab + .qtext, .covr .qtext + .qsub{margin-top:2px}
.qtext .cz-blank{min-width:64px; color:transparent}
.covr .qtext{margin-bottom:12px}

/* =====================================================================
   Minimal qatlam (2026-09-23): zinc palitra, nozik chegaralar, Lucide, silliq o'tishlar.
   Yuqoridagi komponent qoidalarini ustidan yozadi.
   ===================================================================== */
body{font-size:15px; letter-spacing:-.006em; text-rendering:optimizeLegibility}
#app{background:var(--ground)}
::selection{background:var(--brand-wash); color:var(--ink)}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* Lucide ikonkalari */
.ic{width:1em; height:1em; flex:0 0 auto; display:inline-block; vertical-align:-.125em}
.btn .ic{width:17px; height:17px}
.tab .ic{width:20px; height:20px}
.hdr-back .ic{width:22px; height:22px}
.streak .ic{width:14px; height:14px}
.mode-i .ic{width:18px; height:18px}

/* silliq o'tishlar: rang, chegara, soya — 180ms; bosilganda yengil kichrayish */
.btn, .opt, .mode, .lrow, .chip, .tab, .seg button, .inp, .spk, .tile, .w, .dl-tile, .hdr-back, .hdr-user, .fc{
  transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease),
    box-shadow .18s var(--ease), opacity .18s var(--ease), transform .14s var(--ease)}
.btn:active, .opt:active, .chip:active, .dl-tile:active, .spk:active{transform:scale(.98)}
.mode:active, .lrow:active, .tile:active{transform:scale(.995)}
@media (hover:hover){
  .btn:hover{opacity:.9}
  .btn.ghost:hover, .btn.no:hover, .opt:hover, .chip:hover, .dl-tile:hover, .lrow:hover, .tile:hover{
    background:var(--surface-2); border-color:var(--line-strong); opacity:1}
  .mode:hover{background:var(--surface-2)}
  .tab:hover{color:var(--ink)}
  .hdr-back:hover{background:var(--surface-2)}
  .spk:hover{background:var(--surface-2); border-color:var(--line-strong)}
}
.screen.on{animation:scr .22s var(--ease)}
@keyframes scr{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}

/* sarlavha va tablar */
.hdr{background:color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line); min-height:52px}
.hdr-t{font-size:16px; font-weight:600; letter-spacing:-.015em}
.hdr-back{color:var(--ink); border-radius:8px}
.hdr-user .av{border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font-family:var(--body); font-weight:600}
.hdr-user .nm{font-family:var(--body); font-size:10.5px; color:var(--faint)}
.streak{font-family:var(--body); background:var(--accent-wash); color:var(--accent); gap:4px}
.tabs{background:color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--line)}
.tab{font-size:11px; font-weight:500; color:var(--faint); gap:4px}
.tab[aria-current="true"]{color:var(--ink); font-weight:600}

/* tipografik ierarxiya: 26 / 22 / 20 / 16 / 15 / 13 / 12 */
.hero{gap:6px}
.hero h1{font-size:26px; font-weight:650; letter-spacing:-.03em; line-height:1.15}
.hero p{font-size:14px; color:var(--muted)}
.lhead h2, .st-head h2{font-size:22px; font-weight:650; letter-spacing:-.025em; line-height:1.2}
.qtext, .q-uz{font-family:var(--body); font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.35}
.qtext.uz{font-size:19px}
.qhead{font-family:var(--body); font-size:17px; font-weight:600; letter-spacing:-.015em; margin:24px 0 10px}
.qhead small{font-size:13px; font-weight:400; color:var(--faint)}
.th-sec h3{font-family:var(--body); font-size:16px; font-weight:600; letter-spacing:-.015em}
.fc-en{font-family:var(--body); font-size:30px; font-weight:650; letter-spacing:-.03em}
.eyebrow, .q-lab{font-size:12.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--faint)}
.fld label{font-family:var(--body); font-size:13px; letter-spacing:0; text-transform:none; font-weight:500; color:var(--muted)}
.th-tbl thead td{font-size:12px; letter-spacing:0; text-transform:none; font-weight:500}
.note{font-size:13px; color:var(--faint)}
.rk-code, .tcode{font-family:var(--code)}
.stat b, .lpct, .mode-c, .exhead span, .prow span, .fc-n, .lb small, .rk-row .sc, .rk-row .pos{
  font-family:var(--body); font-variant-numeric:tabular-nums}

/* sirtlar: bitta chegara, soya deyarli yo'q */
.stat, .lrow, .lhead, .th-sec, .tile, .words, .covr, .st-head, .st-text, .tlist, .tcard, .card,
.q, .qcard, .fc, .rk-row, .kv, .pf-head, .rk-me{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.fc{border-radius:16px; box-shadow:var(--shadow-lift)}
.q, .qcard{padding:18px}
.qcard{margin-bottom:12px}
.th-intro{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r)}
.th-note{background:var(--accent-wash); border-radius:var(--r)}
.th-ex{border-left:2px solid var(--line-strong)}
.stat{padding:14px}
.stat b{font-size:22px; font-weight:650; letter-spacing:-.03em}
.stat span{font-size:12px; color:var(--faint); letter-spacing:0}

/* progress */
.bar{height:4px; background:var(--line-soft)}
.bar i{background:var(--ink)}
.bar.done i{background:var(--ok)}

/* tugmalar */
.btn{border-radius:var(--r-btn); padding:12px 16px; font-size:15px; font-weight:500; letter-spacing:-.01em;
  background:var(--primary); color:var(--on-primary); box-shadow:none; gap:8px}
.btn.ghost, .btn.no{background:var(--surface); border:1px solid var(--line); color:var(--ink); box-shadow:var(--shadow)}
.btn.no{color:var(--err)}
.btn.ok{background:var(--ok); color:var(--ground)}
.btn:disabled{opacity:.35}
.btn.ans{font-weight:400; font-size:15px; padding:13px 16px}
.opt{border:1px solid var(--line); border-radius:var(--r-btn); padding:13px 16px; font-size:15px; font-weight:400; box-shadow:var(--shadow)}
.opt.ok, .st-opt.ok, .dl-opt.ok, .cz-opt.ok{background:var(--ok-wash); border-color:var(--ok); color:var(--ok); font-weight:500}
.opt.bad, .st-opt.bad, .dl-opt.bad, .cz-opt.bad{background:var(--err-wash); border-color:var(--err); color:var(--err)}
.seg{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-btn); padding:3px}
.seg button{border-radius:7px; font-weight:500; color:var(--faint)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--line)}
.chip{border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); font-weight:500}
.chip.in{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.slots{border:1px dashed var(--line-strong); background:var(--surface-2); border-radius:var(--r-sm)}
.inp{border:1px solid var(--line); border-radius:var(--r-btn); font-weight:400}
.inp:focus{border-color:var(--ink); box-shadow:0 0 0 3px var(--line-soft)}
.spk{background:var(--surface); border:1px solid var(--line); color:var(--ink); padding:7px 9px; line-height:0}
.spk .ic{width:16px; height:16px}
.spk.on{background:var(--brand-wash); border-color:var(--brand); color:var(--brand)}
.vgroups .btn.vg{font-weight:500}

/* javob holatlari */
.verdict{border-radius:var(--r-sm); font-size:14px; padding:12px 14px; border:1px solid transparent; align-items:flex-start}
.verdict.ok{background:var(--ok-wash); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 25%, transparent)}
.verdict.bad{background:var(--err-wash); color:var(--err); border-color:color-mix(in srgb, var(--err) 25%, transparent)}
.hint .ic{width:14px; height:14px; margin-right:6px; color:var(--accent)}

/* natija bloki (finish.js) */
.result{border:1px solid var(--line); background:var(--surface); border-radius:var(--r); padding:16px;
  display:flex; flex-direction:column; gap:6px}
.result-h{display:flex; align-items:center; gap:8px; font-size:15px}
.result-h b{font-weight:600}
.result-h .ic{width:18px; height:18px}
.result.ok .result-h .ic{color:var(--ok)}
.result.bad .result-h .ic{color:var(--accent)}
.result-n{display:flex; align-items:baseline; gap:6px; margin-top:4px}
.result-big{font-size:40px; font-weight:650; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.result-of{font-size:14px; color:var(--faint)}
.result-st{margin-left:auto; color:var(--accent); letter-spacing:2px; font-size:15px}
.result-sub{font-size:13.5px; color:var(--muted)}

/* bo'sh joy va yangi so'z */
.cz-blank{border-bottom:2px solid var(--brand); background:var(--brand-wash); border-radius:4px 4px 0 0}
.cz-filled{color:var(--ok); border-bottom-color:var(--ok)}
.wd.new{background:linear-gradient(transparent 62%, var(--accent-wash) 62%)}
.wd.on{background:var(--ink); color:var(--ground)}

/* o'qish va dialog */
.st-p{font-size:17px; line-height:1.75; letter-spacing:-.01em}
.dl-b{font-size:15.5px; border-color:var(--line)}
.dl-row.me .dl-b{background:var(--primary); color:var(--on-primary); border-color:var(--primary)}
.dl-row.me .dl-uz{color:var(--faint)}
.dl-line{border:1px dashed var(--line-strong); background:var(--surface-2)}
#stBody .spk-row{flex-wrap:nowrap; gap:8px}
#stBody .spk-row .btn{width:auto; padding:10px 12px; font-size:14px}
#stPlay{flex:2 1 auto}
#stSlow{flex:1 1 auto}
#stStop{flex:0 0 46px}
#stSlow.on{background:var(--brand-wash); border-color:var(--brand); color:var(--brand)}
.st-spk .ic{width:15px; height:15px}
.w-en{font-weight:600}
.cert-badge{font-weight:500; border-radius:6px}

/* dars ro'yxati */
.lrow{padding:14px; gap:14px}
.lnum{width:32px; height:32px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink); font-family:var(--body); font-weight:600; font-size:13.5px}
.lrow.full .lnum{background:var(--ok-wash); border-color:transparent; color:var(--ok)}
.lb b{font-size:15px; font-weight:500; letter-spacing:-.01em}
.lb small{font-size:12.5px; color:var(--faint)}
.lpct{font-size:13px; font-weight:500}

/* dars yo'li: bitta ro'yxat, nozik yo'lak */
.modes{gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:4px 0; overflow:hidden}
.mode{background:transparent; border:0; border-radius:0; box-shadow:none; padding:13px 16px; gap:14px; position:relative}
.mode + .mode{box-shadow:inset 0 1px 0 var(--line-soft)}
.mode.acc{background:var(--accent-wash)}
.mode.acc .mode-i{background:var(--surface); color:var(--accent); border:1px solid var(--line); width:30px; height:30px; border-radius:8px}
.mode.step::before{content:""; position:absolute; left:30px; top:0; bottom:0; width:1px; background:var(--line)}
.mode.step.first::before{top:50%}
.mode.step.last::before{bottom:50%}
.mode.step.first.last::before{display:none}
.mode.step .mode-i{width:30px; height:30px; border-radius:50%; position:relative; z-index:1;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--faint);
  font-weight:600; font-size:13px; font-variant-numeric:tabular-nums}
.mode.step .mode-i .ic{width:15px; height:15px; stroke-width:2.5}
.mode.step.done .mode-i{background:var(--ok-wash); border-color:transparent; color:var(--ok)}
.mode.step.next .mode-i{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.mode.step.next{background:var(--surface-2)}
.mode-b b{font-size:15px; font-weight:500; letter-spacing:-.01em}
.mode.step.next .mode-b b{font-weight:600}
.mode.step.done .mode-b b{color:var(--muted)}
.mode-b span{font-size:13px; color:var(--faint); line-height:1.4; margin-top:2px}
.mode .tag{display:inline-flex; align-items:center; gap:6px; font-style:normal; font-size:12px; font-weight:500;
  color:var(--brand); background:none; padding:0; margin:0 0 3px}
.mode .tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brand)}
.mode-c{font-size:13px; font-weight:500; color:var(--faint)}
.mode.step.done .mode-c{color:var(--ok)}