/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:.65rem 1.1rem;border:2px solid transparent;border-radius:14px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
  background:var(--surface-2);color:var(--hw-text);transition:transform .12s var(--ease),box-shadow .12s,background .15s;-webkit-tap-highlight-color:transparent;text-align:center}
.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--btn);color:var(--on-btn);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.btn-primary:hover:not(:disabled){filter:brightness(1.06)}
.btn-secondary{background:transparent;border-color:var(--hw-border);color:var(--hw-text)}
.btn-secondary:hover{border-color:var(--hw-owl-blue)}
.btn-ghost{background:transparent;color:var(--link)}
.btn-ghost:hover{background:var(--info-bg)}
.btn-good{background:var(--ok-bg);color:var(--ok);border-color:var(--ok);flex:1 1 140px}
.btn-bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad);flex:1 1 140px}
.btn-danger{background:var(--bad);color:#fff}
[data-theme="dark"] .btn-danger{color:#14202B}
.btn-lg{min-height:56px;font-size:1.05rem;border-radius:16px}
.btn-sm{min-height:var(--tap);padding:.35rem .8rem;font-size:.9rem}
.btn-block{width:100%}
.link-btn{color:inherit;font-weight:700;text-decoration:underline;min-height:var(--tap);display:inline-flex;align-items:center}

/* ---------- cards, chips, notes ---------- */
.card{background:var(--hw-card);border:1px solid var(--hw-border);border-radius:var(--r);padding:16px;margin-block-end:14px;box-shadow:var(--shadow)}
.card.center{text-align:center;display:grid;justify-items:center;gap:12px}
.lead{font-size:1.05rem}
.hint{color:var(--hw-text-2);font-size:.88rem;margin:0}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;padding:.2rem .65rem;border-radius:999px;font-size:.78rem;font-weight:700;line-height:1.4;background:var(--surface-2);color:var(--hw-text)}
.chip-country{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.chip .flag{font-size:1rem}
.chip-topic{background:var(--info-bg);color:var(--link)}
.chip-beta{background:var(--hw-lamp-yellow);color:#14202B}
.chip-soon{background:var(--surface-2);color:var(--hw-text-2)}
.chip-pass{background:var(--ok-bg);color:var(--ok)}.chip-fail{background:var(--warn-bg);color:var(--warn)}
.tier-chip{white-space:normal;text-align:start;border-radius:10px}
.tier-Q1{background:var(--ok-bg);color:var(--ok)}.tier-Q2{background:var(--info-bg);color:var(--link)}.tier-Q3{background:var(--warn-bg);color:var(--warn)}.tier-BLOCKED{background:var(--bad-bg);color:var(--bad)}
.audio-chip{background:var(--surface-2)}
.note{display:flex;gap:6px;align-items:flex-start;background:var(--info-bg);border-radius:12px;padding:.55rem .8rem;font-size:.88rem;margin:.5rem 0}
.note.tier-Q3,.note.varies{background:var(--warn-bg);color:var(--warn)}
.note.tier-BLOCKED{background:var(--bad-bg);color:var(--bad)}
.note svg{flex:none;margin-block-start:3px}
.tier-banner:empty{display:none}
.error-box{background:var(--bad-bg);color:var(--bad);border-radius:12px;padding:.8rem 1rem;font-weight:600}

/* ---------- hero / stats ---------- */
.hero{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;margin-block-end:14px;border-radius:24px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0,#5B8FFF 0,transparent 55%),linear-gradient(135deg,#2E6AF0,#1A4DB0);box-shadow:0 10px 30px rgba(49,113,245,.28);overflow:hidden}
.hero h1{color:#fff;font-size:1.7rem}
.hero .tag{opacity:.95;margin-block-end:10px}
.hero .chip{box-shadow:none}.hero .link-btn{color:#fff;font-size:.9rem}
.hero .owl{flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-block-end:12px}
.stat{display:grid;justify-items:center;align-content:center;gap:6px;text-align:center;margin:0;padding:14px 10px}
.stat p{margin:0;font-size:.85rem;color:var(--hw-text-2)}
.stat .big{font-size:2.2rem;font-weight:800;color:var(--link);line-height:1.1}
a.stat{text-decoration:none;color:inherit}
a.stat.due{background:linear-gradient(180deg,var(--hw-card),var(--info-bg))}
.stats > :last-child:nth-child(odd){grid-column:1 / -1}
.cta-row{display:grid;gap:12px;grid-template-columns:1fr}
.resume-card{display:flex;align-items:center;gap:12px;border-color:var(--hw-lamp-yellow);border-width:2px}
.resume-card > div{flex:1}
.streak{display:flex;align-items:center;gap:8px;font-weight:800}
.streak .flame{color:var(--hw-text-2)}
.streak.on .flame{color:#F08A00}
.streak.on .flame svg{fill:#F6D749;stroke:#F08A00}
@media (min-width:640px){.stats{grid-template-columns:repeat(3,1fr)}.cta-row{grid-template-columns:1fr 1fr}.stats > :last-child:nth-child(odd){grid-column:auto}}
@media (min-width:900px){.hero{padding:32px 36px}.hero h1{font-size:2.2rem}}

/* ---------- ring / bar ---------- */
.ring{position:relative;display:inline-grid;place-items:center}
.ring svg{position:absolute;inset:0}
.ring-track{stroke:var(--ring-track)}
.ring-arc{transition:stroke-dasharray .6s var(--ease)}
.ring-label{position:relative;display:grid;text-align:center;line-height:1.1}
.ring-label strong{font-size:1.15rem}.ring-label small{font-size:.68rem;color:var(--hw-text-2);max-width:70px}
.bar{height:8px;border-radius:99px;background:var(--ring-track);overflow:hidden;margin:6px 0}
.bar > span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--hw-owl-blue),#6C9BFF);transition:width .4s var(--ease)}

/* ---------- lists ---------- */
.list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.row-card{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 14px;background:var(--hw-card);color:var(--hw-text);border:1px solid var(--hw-border);border-radius:var(--r);text-decoration:none;font:inherit;text-align:start;cursor:pointer;box-shadow:var(--shadow)}
.row-card:hover{border-color:var(--hw-owl-blue)}
.row-card.selected{border-color:var(--hw-owl-blue);box-shadow:0 0 0 2px var(--hw-owl-blue)}
.row-card.disabled{opacity:.6;cursor:default}
.rc-main{flex:1;display:grid;gap:2px;min-width:0}
.rc-main small{color:var(--hw-text-2)}
.rc-main .tags{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:4px}
.country-card .chip-country{min-width:46px;justify-content:center}
.topic-bars{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tb-head{display:flex;justify-content:space-between;font-size:.92rem}

/* ---------- forms ---------- */
.input,select{width:100%;min-height:var(--tap);padding:.6rem .85rem;border:2px solid var(--hw-border);border-radius:12px;background:var(--hw-card);color:var(--hw-text);font:inherit}
.input:focus-visible,select:focus-visible{border-color:var(--hw-owl-blue)}
.field{display:grid;gap:6px;margin-block-end:12px;font-weight:600}
.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);padding:6px 0;border:0}
.setting + .setting{border-block-start:1px solid var(--hw-border)}
.setting-label{flex:1;font-weight:600}
.setting input[type=range]{flex:0 1 180px;accent-color:var(--hw-owl-blue);min-height:var(--tap)}
.setting input[role=switch]{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:99px;background:var(--ring-track);position:relative;cursor:pointer;flex:none;border:2px solid var(--hw-border);transition:background .2s}
.setting input[role=switch]::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:inset-inline-start .2s var(--ease)}
.setting input[role=switch]:checked{background:var(--btn);border-color:var(--btn)}
.setting input[role=switch]:checked::after{inset-inline-start:24px}
fieldset.setting{flex-direction:column;align-items:stretch;border:0;margin:0;padding:8px 0}
fieldset.setting legend{font-weight:600;padding:0}
.segmented{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--surface-2);margin-block:6px}
.segmented > span{flex:1;display:flex}
.seg-input{position:absolute;opacity:0;pointer-events:none}
.seg{flex:1;display:flex;align-items:center;justify-content:center;min-height:var(--tap);padding:.4rem .6rem;border-radius:10px;border:0;background:transparent;color:var(--hw-text);font:inherit;font-weight:700;cursor:pointer;text-align:center}
.seg-input:checked + .seg,.seg.on{background:var(--hw-card);box-shadow:var(--shadow);color:var(--link)}
.seg-input:focus-visible + .seg{outline:3px solid var(--focus);outline-offset:2px}
.lang-list{margin-block-start:10px}

/* ---------- question UI ---------- */
.question-card{padding:18px}
.q-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-end:8px}
.prompt{font-size:1.2rem;font-weight:700;line-height:1.4;margin-block:10px 14px}
.prompt:focus{outline:none}
.q-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block-end:8px}
.audio .hint{display:inline-flex;align-items:center;gap:4px}
.options{display:grid;gap:10px;margin-block:8px 14px}
.option{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 14px;border:2px solid var(--hw-border);border-radius:14px;background:var(--hw-card);cursor:pointer;transition:border-color .15s,background .15s,transform .12s var(--ease)}
.option:hover:not(.locked){border-color:var(--hw-owl-blue)}
.option input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.option:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.option .letter{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--surface-2);color:var(--hw-text-2)}
.option.selected{border-color:var(--hw-owl-blue);background:var(--info-bg)}
.option.selected .letter{background:var(--hw-owl-blue);color:#fff}
.option .otext{flex:1}
.option .mark{display:inline-flex;align-items:center}
.option.is-correct{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.option.is-wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.option.is-correct .letter,.option.is-wrong .letter{background:transparent;color:inherit;border:2px solid currentColor}
.option.locked{cursor:default}
.answer-box{background:var(--info-bg);border-radius:14px;padding:12px 16px;margin-block:10px}
.answer-box h3{margin:0 0 4px}.answer-box ul{margin:0;padding-inline-start:1.2rem}
.explain{margin-block-start:8px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:12px}
.actions .btn-primary{flex:1 1 140px}
.feedback{border-radius:14px;padding:12px 14px;margin-block:8px}
.feedback.good{background:var(--ok-bg);color:var(--ok)}.feedback.bad{background:var(--bad-bg);color:var(--bad)}
.feedback p{color:var(--hw-text)}
.fb-head{display:flex;align-items:center;gap:10px;font-size:1.1rem}
.fb-head strong{display:inline-flex;align-items:center;gap:4px}

/* ---------- exam ---------- */
.exam-head{align-items:center;flex-wrap:nowrap}
.exam-head h1{flex:1;font-size:1.2rem}
.exam-status{display:flex;align-items:center;gap:12px}
.timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.3rem;padding:.25rem .8rem;border-radius:999px;background:var(--surface-2);min-width:5.2ch;text-align:center}
.timer.low{background:var(--warn-bg);color:var(--warn);animation:pulse 1s infinite}
.qnav{display:flex;flex-wrap:wrap;gap:6px;margin-block:6px 18px;align-items:center}
.qnav .dot{width:44px;height:44px;border-radius:12px;border:2px solid var(--hw-border);background:var(--hw-card);color:var(--hw-text);font:inherit;font-weight:700;cursor:pointer;position:relative}
.qnav .dot.done{background:var(--info-bg);border-color:var(--hw-owl-blue)}
.qnav .dot.done::after{content:"";position:absolute;inset-block-end:4px;inset-inline-end:4px;width:8px;height:8px;border-radius:50%;background:var(--hw-owl-blue)}
.qnav .dot.current{background:var(--btn);color:#fff;border-color:var(--btn)}
.nav-sum{flex:1 1 100%;margin-block-start:6px}

/* ---------- result ---------- */
.result-hero{display:grid;justify-items:center;gap:10px;text-align:center;padding:24px 16px;position:relative;overflow:hidden}
.result-hero.pass{background:linear-gradient(180deg,var(--hw-card),var(--ok-bg))}
.result-hero.fail{background:linear-gradient(180deg,var(--hw-card),var(--warn-bg))}
.result-hero .verdict{font-size:1.3rem;font-weight:800;display:flex;align-items:center;gap:6px;justify-content:center;margin:0}
.result-hero .score{font-size:1.05rem;margin:0}
.breakdown{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.breakdown li{display:flex;gap:10px;padding:10px;border-radius:12px;background:var(--surface-2)}
.breakdown li.ok .mark{color:var(--ok)}.breakdown li.ko .mark{color:var(--bad)}
.breakdown .bq{margin:0;font-weight:600}
details summary{cursor:pointer;font-weight:700;min-height:var(--tap);display:flex;align-items:center}

/* ---------- dialog / toast ---------- */
.dialog{border:0;border-radius:20px;padding:20px;max-width:min(92vw,26rem);background:var(--hw-card);color:var(--hw-text);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.dialog::backdrop{background:rgba(11,13,16,.55)}
.dialog-msg{font-size:1.05rem;font-weight:600;margin-block-end:16px}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.toast{pointer-events:auto;padding:.7rem 1.1rem;border-radius:14px;background:var(--hw-ink);color:#fff;font-weight:600;box-shadow:var(--shadow);max-width:28rem}
.toast-error{background:var(--bad);color:#fff}

.owl{display:inline-grid;flex:none}
.owl img,.owl svg{width:100%;height:100%;display:block}
.prose p{max-width:60ch}

/* ---------- motion (only when allowed) ---------- */
@keyframes pop{0%{transform:scale(.96);opacity:0}100%{transform:none;opacity:1}}
@keyframes pulse{50%{opacity:.6}}
@keyframes bob{50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:no-preference){
  html:not([data-reduce-fx]) .card,html:not([data-reduce-fx]) .row-card{animation:pop .25s var(--ease) both}
  html:not([data-reduce-fx]) .hero .owl{animation:bob 3.2s ease-in-out infinite}
  html:not([data-reduce-fx]) .option.is-wrong{animation:pop .2s var(--ease)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html[data-reduce-fx] *,html[data-reduce-fx] *::before,html[data-reduce-fx] *::after{animation:none!important;transition:none!important}
@media (forced-colors:active){.option.is-correct,.option.is-wrong,.option.selected{border-width:3px}}

.chip{white-space:nowrap}.hero .row{flex-wrap:wrap;gap:6px 14px}.hero-text{min-width:0}
/* 2026-10-17 integration fix: long tier labels must wrap inside the language cards */
.lang-list>li,.list>li{min-width:0}
.lang-card{min-width:0;overflow:hidden}
.rc-main .chip{max-width:100%}

/* ---------- more languages / browser translation / source status ---------- */
.list-head{list-style:none;padding:18px 4px 4px}
.list-head h2{font-size:1.05rem;margin:0}
.list-head .hint{margin:2px 0 0}
.lang-more .tags .chip{white-space:normal}
.dialog-help{max-width:min(92vw,30rem);max-height:85vh;overflow:auto}
.dialog-title{display:flex;align-items:center;gap:8px;font-size:1.15rem;margin:0 0 6px}
.dialog-lang{margin:0 0 10px}
.dialog-body p{margin:0 0 .6rem;line-height:1.5}
.dialog-help .dialog-actions{margin-block-start:14px}
.source-checked{margin-block:6px}
.source-review a{font-weight:700}
button.link-btn{background:none;border:0;padding:0 .25rem;font:inherit;font-weight:700;cursor:pointer;color:inherit}