/* css/screens.css — umumiy boshqaruv elementlari + dars ekranlari (nazariya, lug'at, mashq, rasmlar, progress) */
/* ---------- 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)}}