/* Zirva – pass 4: missing screens, Duolingo-grade moments, 44 px targets. */
@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- every target at least 44 px ---------- */
.btn-sm{min-height:44px}
a.link,.sec-h a,.rs .more{display:inline-flex;align-items:center;min-height:44px}
.why{height:44px;min-height:44px}
.seg button{min-height:44px}
.chip{height:44px}
a.back,.back{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.side .gl{min-height:44px;display:flex;align-items:center}
.tab .n{font-size:12px}

/* ---------- quiz progress: thick, glossy, grows on every answer ---------- */
.thin{height:14px;border-radius:7px}
.thin i{position:relative;border-radius:7px;transform-origin:left center;animation:grow 520ms var(--ease-spring) 120ms both}
.thin i::after{content:"";position:absolute;left:6px;right:6px;top:3px;height:3px;border-radius:2px;background:rgba(255,255,255,.32)}
@keyframes grow{from{transform:scaleX(.88)}to{transform:none}}

/* ---------- count-up for celebration numbers (real number stays for screen readers) ---------- */
.cu{--n:var(--to);counter-reset:n var(--n);animation:cu 900ms var(--ease-out) var(--cu-delay,900ms) both}
.cu::after{content:counter(n) / ""}
@keyframes cu{from{--n:var(--from,0)}to{--n:var(--to)}}

/* ---------- burst of rays around a tick or medal ---------- */
.burst-host{position:relative;display:grid;place-items:center}
.burst{position:absolute;inset:0;pointer-events:none}
.burst i{position:absolute;left:50%;top:50%;width:5px;height:16px;margin:-8px 0 0 -2.5px;border-radius:3px;background:var(--color-success);opacity:0;animation:ray 640ms var(--ease-out) var(--rd,1000ms) both}
.burst i:nth-child(even){background:var(--color-accent);height:11px}
@keyframes ray{0%{opacity:0;transform:rotate(var(--a)) translateY(-52px) scaleY(.4)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-86px) scaleY(1)}}

/* ---------- big day number (Duolingo streak screen, gentle) ---------- */
.daynum{font:600 112px/1 var(--font-family-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:8px}
.daynum-l{font:600 22px/28px var(--font-family-ui);margin-top:6px}
.m-week .dd.today{animation:today 520ms var(--ease-spring) 700ms both}
@keyframes today{0%{transform:scale(.6);background:var(--color-surface-sunken);color:transparent}60%{transform:scale(1.15)}100%{transform:none}}

/* ---------- medal (achievement) ---------- */
.medal{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:var(--color-accent);box-shadow:inset 0 -6px 0 rgba(0,0,0,.12),0 0 0 10px var(--color-accent-tint)}
.medal i{font-size:58px;color:var(--color-text)}
.medal.zpop{animation:medal 700ms var(--ease-spring) 150ms both}
@keyframes medal{0%{opacity:0;transform:scale(.7) rotate(-12deg)}100%{opacity:1;transform:none}}
.ach{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;text-align:center}
.ach div{display:flex;flex-direction:column;align-items:center;gap:8px;font:var(--type-label-sm);color:var(--color-text)}
.ach .md{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--color-accent);box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.ach .md i{font-size:28px;color:var(--color-text)}
.ach .off .md{background:var(--color-surface-sunken);box-shadow:none}
.ach .off .md i{color:var(--color-text-tertiary)}
.ach .off span{color:var(--color-text-secondary)}
.ach small{font:var(--type-caption);color:var(--color-text-secondary)}

/* ---------- profile ---------- */
.pf-h{display:flex;align-items:center;gap:16px;margin-top:8px}
.av.xl{width:72px;height:72px;font-size:24px;flex:none}
.pf-h h1{font:var(--type-title-lg);letter-spacing:-.01em}
.pf-h p{font:var(--type-body-sm);color:var(--color-text-secondary);margin-top:4px}
.out{margin-top:20px;color:var(--color-danger)}

/* ---------- answers review ---------- */
.rv{width:100%;max-width:640px;margin:0 auto;padding:12px 24px 0;flex:1}
.rv h1{font:600 30px/36px var(--font-family-display);letter-spacing:-.02em;margin-top:20px}
.rv .lead{font:var(--type-body-lg);color:var(--color-text-secondary);margin-top:6px}
.rv-list{margin-top:20px;border-top:1px solid var(--color-border)}
.rv-i{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--color-border)}
.rv-i>i{font-size:24px;margin-top:1px}
.rv-i.rv-ok>i{color:var(--color-success)}
.rv-i.rv-no>i{color:var(--color-danger)}
.rv-i p{font:500 16px/24px var(--font-family-ui)}
.rv-i .a{font:var(--type-body-sm);color:var(--color-text-secondary);margin-top:4px}
.rv-i .a b{color:var(--color-success);font-weight:600}
.rv-i .a s{color:var(--color-danger)}
.rv-why{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--color-surface-sunken);font:var(--type-body-sm)}

/* ---------- fixed list (practice done) ---------- */
.fixed{width:100%;margin-top:28px;display:flex;flex-direction:column;gap:10px;text-align:left}
.fixed div{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;border-radius:14px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);font:var(--type-body-md)}
.fixed i{font-size:22px;color:var(--color-success)}
.fixed b{font-weight:600}

/* ---------- login error ---------- */
.inkcode.err{background:var(--color-danger)}
.lg-err{display:flex;align-items:center;gap:8px;margin-top:14px;font:var(--type-label-md);color:var(--color-danger)}
.lg-err i{font-size:20px}

/* ---------- teacher: quiz results ---------- */
.qr-top{display:flex;align-items:baseline;gap:10px;margin-top:20px}
.qr-top b{font:600 40px/1 var(--font-family-display);letter-spacing:-.02em}
.qr-top span{font:var(--type-body-md);color:var(--color-text-secondary)}
.qr-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin-top:14px;background:var(--color-surface-sunken)}
.qr-bar i{display:block;height:100%}
.qr-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font:var(--type-body-sm);color:var(--color-text-secondary)}
.qr-leg span{display:inline-flex;align-items:center;gap:6px}
.qr-leg span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.hq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--color-border)}
.hq:last-child{border-bottom:0}
.hq p{font:500 15px/22px var(--font-family-ui)}
.hq b{font:600 15px/22px var(--font-family-ui);font-variant-numeric:tabular-nums}
.hq .tr{grid-column:1/-1;height:6px;border-radius:3px;background:var(--color-surface-sunken);overflow:hidden}
.hq .tr i{display:block;height:100%;background:var(--color-warning)}

/* ---------- teacher: login cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:24px}
.lcard{border-radius:16px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-strong);padding:18px;display:flex;flex-direction:column;gap:10px}
.lcard .mk{display:flex;align-items:center;gap:6px;font:600 14px/1 var(--font-family-display)}
.lcard .mk svg{width:22px;height:15px}
.lcard b{font:600 17px/22px var(--font-family-ui)}
.lcard code{font:600 26px/1 var(--font-family-mono);letter-spacing:.06em}
.lcard small{font:var(--type-caption);color:var(--color-text-secondary)}
.lcard.dash{border:0;box-shadow:inset 0 0 0 1.5px var(--color-border-strong);background:none}

/* ---------- teacher: student detail insight ---------- */
.insight{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:16px;border-radius:16px;background:var(--color-warning-tint,#FFF1DE)}
.insight i{font-size:22px;color:var(--color-warning);flex:none;margin-top:1px}
.insight b{display:block;font:600 16px/22px var(--font-family-ui)}
.insight span{display:block;font:var(--type-body-sm);color:var(--color-text-secondary);margin-top:2px}

/* ---------- search ---------- */
.search{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:12px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-strong);font:var(--type-body-lg);color:var(--color-text-secondary);margin-top:20px}
.search i{font-size:20px}
.bank-l .lr{min-height:76px}

@media (prefers-reduced-motion:reduce){
  .thin i,.cu,.burst i,.m-week .dd.today,.medal.zpop{animation:none}
}

/* practice: the right word lands in the slot */
.tile.okt{background:var(--color-success-tint);box-shadow:inset 0 0 0 2px var(--color-success);color:var(--color-success);height:38px;padding:0 12px;vertical-align:middle;animation:pop 380ms var(--ease-spring) both}
/* correct answer tile bounces once */
.ans.ok{animation:bounce 420ms var(--ease-spring) both}
@keyframes bounce{0%{transform:translateY(2px) scale(.97)}60%{transform:translateY(0) scale(1.03)}100%{transform:translateY(2px)}}
.lr .chev{margin-left:auto;font-size:18px;color:var(--color-text-tertiary)}
.mats .mat{min-height:64px}
@media (prefers-reduced-motion:reduce){.tile.okt,.ans.ok{animation:none}}

.rv-i p{color:var(--color-text)}
.fixed i{flex:none}

/* ---------- remaining targets ---------- */
/* switch: 44 px tall hit area, the visible track stays 52×32 */
.switch{width:60px;height:44px;background:none!important;border-radius:0}
.switch::before{content:"";position:absolute;left:4px;top:6px;width:52px;height:32px;border-radius:999px;background:var(--color-border-strong);transition:background 160ms ease}
.switch.on::before{background:var(--color-success)}
.switch::after{top:9px;left:7px}
.seg.big button,.seg button{min-height:44px}
.days{gap:4px}
a.link,.lg-mail a.link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px}
.btn-icon.btn-sm{width:44px;height:44px}
.gr-side .redo{display:inline-flex;align-items:center;min-height:44px}
.photo .no{width:24px;height:24px;font-size:12px}
.daynum-h{display:flex;flex-direction:column;align-items:center}
.days{gap:2px}