/* css/theme.css — dizayn qatlami (oxirgi yuklanadi: uslub ustidan yozadi) */
/* =====================================================================
   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)}