/* =====================================================================
   NYORA Lingo — дизайн в стиле NYORA (как NYORA Health)
   Фирменные цвета — из логотипа: винный #650218 и кремовый #F2E8DE.
   В плеере: винный — «слушайте», янтарный — «говорите».
   Переменные --listen/--speak оставлены по смыслу: --listen = основной (винный).
   Темы (15, как в Health) меняют --bg, --surface, --surface-2, --line из app.js.
   ===================================================================== */
:root{
  --bg:#F5F3EF; --surface:#FFFFFF; --surface-2:#F1EDE7; --ink:#1D1A17; --muted:#6E6862; --line:#E6E0D8;
  --listen:#650218; --listen-soft:rgba(101,2,24,.08); --speak:#B5651D; --speak-soft:#F7EBDD;
  --ok:#2F7A4F; --ok-soft:#E3F1E8; --err:#B42318; --err-soft:#FBE7E4; --lock:#A39C94;
  --lv-a1:#3F7D5A; --lv-a2:#2F7480; --lv-b1:#3D5A98; --lv-b2:#6A4C93; --lv-c1:#650218;
  --on-primary:#FFFFFF; --brand:#291F16; --cream:#F2E8DE;
  --display:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Inter",system-ui,sans-serif;
  --r:14px; --r-lg:20px;
  --shadow:0 1px 2px rgba(41,31,22,.05),0 8px 24px rgba(41,31,22,.06);
  --tabbar-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E0C0A; --surface:#1A1612; --surface-2:#221D18; --ink:#F3EDE3; --muted:#A69C90; --line:#2E2722;
  --listen:#D9798B; --listen-soft:rgba(217,121,139,.14); --speak:#E5A35A; --speak-soft:#33261A;
  --ok:#5CC48A; --ok-soft:#14291D; --err:#FF8A7F; --err-soft:#35191A; --lock:#6F675E;
  --lv-a1:#6FB98C; --lv-a2:#62AEB8; --lv-b1:#8EA6E0; --lv-b2:#B39BDA; --lv-c1:#D9798B;
  --on-primary:#140E0B; --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E0C0A; --surface:#1A1612; --surface-2:#221D18; --ink:#F3EDE3; --muted:#A69C90; --line:#2E2722;
  --listen:#D9798B; --listen-soft:rgba(217,121,139,.14); --speak:#E5A35A; --speak-soft:#33261A;
  --ok:#5CC48A; --ok-soft:#14291D; --err:#FF8A7F; --err-soft:#35191A; --lock:#6F675E;
  --lv-a1:#6FB98C; --lv-a2:#62AEB8; --lv-b1:#8EA6E0; --lv-b2:#B39BDA; --lv-c1:#D9798B;
  --on-primary:#140E0B; --shadow:none; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:max(20px,env(safe-area-inset-top,0px));padding-bottom:calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom,0px));
  -webkit-tap-highlight-color:transparent}
body.no-tabs{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:var(--listen)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--listen);outline-offset:2px}
input,select,textarea{font:inherit;color:var(--ink)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.muted{color:var(--muted)}
.wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.wrap.narrow{max-width:520px}
.center{text-align:center}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:12px 20px;font-weight:600;text-decoration:none;color:var(--ink);min-height:46px}
.btn svg{width:18px;height:18px;flex:none}
.btn.primary{background:var(--listen);border-color:var(--listen);color:var(--on-primary)}
.btn.accent{background:var(--speak);border-color:var(--speak);color:var(--on-primary)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--listen)}
.btn.danger{color:var(--err)}
.btn.block{display:flex;width:100%}
.btn.sm{padding:8px 14px;min-height:38px;font-size:14px}
.btn:hover{filter:brightness(1.04)}
.btn[disabled]{opacity:.5;cursor:default;filter:none}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0}
.icon-btn svg{width:20px;height:20px}
.say{width:34px;height:34px;border-radius:50%;border:0;background:var(--listen-soft);color:var(--listen);display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0}
.say svg{width:17px;height:17px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- шапка ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:34px;height:34px;border-radius:9px;flex:none}
.brand b{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.brand b span{color:var(--listen)}
.avatar{width:40px;height:40px;border-radius:50%;border:0;background:var(--listen);color:var(--on-primary);font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0}
.avatar.lg{width:56px;height:56px;font-size:22px}
.page-h{display:flex;align-items:center;gap:12px}
.page-h h1{font-size:22px;flex:1;min-width:0}
.back{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--listen);font-weight:600;padding:6px 0}
.back svg{width:18px;height:18px}

/* ---------- загрузка ---------- */
.boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:50}
.boot img{width:72px;height:72px;border-radius:18px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.92);opacity:.7}}

/* ---------- герой ---------- */
.hero{display:flex;flex-direction:column;gap:12px}
.hero h1{font-size:clamp(26px,6vw,36px);line-height:1.15}
.hero h1 em{font-style:normal;color:var(--speak)}
.hero p{color:var(--muted);max-width:60ch}

/* ---------- карточки и поля ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;border-radius:999px;padding:9px 12px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:14px;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;font-size:16px;width:100%}
.field textarea{min-height:70px;resize:vertical}
.msg{font-size:14px;color:var(--err);min-height:0}
.msg:empty{display:none}
.msg.ok{color:var(--ok)}
.auth-title{font-size:20px}
.foot{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
/* логотип бюро NYORA (белый PNG из 05_Бренд перекрашивается в цвет текста через маску) */
.buro-logo{display:inline-block;height:40px;aspect-ratio:1200/348;background:currentColor;
  -webkit-mask:url(assets/nyora-buro.png) center/contain no-repeat;mask:url(assets/nyora-buro.png) center/contain no-repeat}
.made{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:13px;padding-top:8px}
.made a{color:var(--ink);display:inline-flex;opacity:.9}
.made a:hover{opacity:1}
.dev-note{font-size:13px;border:1px dashed var(--speak);color:var(--speak);border-radius:12px;padding:10px 12px;background:var(--speak-soft)}

/* ---------- статистика ---------- */
.stats{display:flex;flex-wrap:wrap;gap:8px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:12px}
.stat{display:flex;align-items:baseline;gap:8px}
.stat b{font-family:var(--mono);font-size:20px;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:14px}

/* ---------- уровни ---------- */
.lv{--lv:var(--lv-b1)}
.lv[data-lv="A1"]{--lv:var(--lv-a1)} .lv[data-lv="A2"]{--lv:var(--lv-a2)} .lv[data-lv="B1"]{--lv:var(--lv-b1)} .lv[data-lv="B2"]{--lv:var(--lv-b2)} .lv[data-lv="C1"]{--lv:var(--lv-c1)}
.lv-badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;color:var(--on-primary);background:var(--lv);border-radius:12px;min-width:48px;height:48px;padding:0 8px;font-size:17px;flex:none}
.lv-badge.sm{min-width:34px;height:30px;border-radius:9px;font-size:13px}
.lvhero{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:22px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.lvhero::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--lv)}
.lvhero .row{display:flex;gap:14px;align-items:center}
.lvhero h2{font-size:20px}
.lvhero p{color:var(--muted);font-size:15px}
.bar{height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--lv,var(--listen));border-radius:8px;transition:width .5s}
.barline{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:6px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.chips::-webkit-scrollbar{display:none}
.lvchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 16px 8px 12px;font-weight:700;font-size:14px;white-space:nowrap;flex:none;font-family:var(--display)}
.lvchip .dot{width:10px;height:10px;border-radius:50%;background:var(--lv);color:var(--on-primary);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.lvchip .dot.ok{width:20px;height:20px;font-family:var(--body);font-weight:700}
.lvchip.on{border-color:var(--lv);box-shadow:0 0 0 1px var(--lv) inset}
.lvchip.locked{color:var(--muted)}
.lvchip.locked .dot{background:var(--lock)}
.lvchip svg{width:14px;height:14px}

/* ---------- списки уроков ---------- */
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec-h h2{font-size:19px}
.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.row-item{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:16px;border-top:1px solid var(--line);text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;color:inherit}
.row-item:first-child{border-top:0}
button.row-item:hover{background:var(--surface-2)}
.row-item .n{font-family:var(--mono);font-size:15px;color:var(--muted)}
.row-item .t{min-width:0}
.row-item .t b{display:block;font-weight:600}
.row-item .t small{display:block;color:var(--muted);font-size:14px}
.row-item .meta{font-size:13px;color:var(--muted);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row-item .chev{color:var(--muted);width:20px;height:20px}
.row-item.test .n{color:var(--speak)}
.row-item.test .n svg{width:22px;height:22px}
.row-item.locked{opacity:.6}
.parts{display:inline-flex;gap:4px}
.parts i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.parts i.on{background:var(--ok)}
.chip{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--listen-soft);color:var(--listen);white-space:nowrap}
.chip.done{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--speak-soft);color:var(--speak)}
.chip.lock{background:var(--surface-2);color:var(--muted)}

.review{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px;border-radius:var(--r);background:var(--speak-soft)}
.review b{display:block;font-weight:600}
.review small{color:var(--muted);font-size:14px}

/* ---------- урок ---------- */
.lesson-head{display:flex;flex-direction:column;gap:8px}
.lesson-head h1{font-size:clamp(24px,5.5vw,32px)}
.lesson-head p{color:var(--muted)}
.partgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.partgrid{grid-template-columns:1fr}}
.part{display:flex;gap:14px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px;color:inherit;box-shadow:var(--shadow)}
.part:hover{border-color:var(--listen)}
.part .pi{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--listen-soft);color:var(--listen)}
.part .pi svg{width:22px;height:22px}
.part.p2 .pi{background:var(--speak-soft);color:var(--speak)}
.part.p3 .pi{background:var(--ok-soft);color:var(--ok)}
.part.p4 .pi{background:var(--surface-2);color:var(--ink)}
.part .pt{flex:1;min-width:0}
.part .pt b{display:block}
.part .pt small{display:block;color:var(--muted);font-size:14px}
.part .ck{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.part .ck.on{background:var(--ok);border-color:var(--ok)}
.part .ck svg{width:14px;height:14px}

/* грамматика */
.gram{display:flex;flex-direction:column;gap:18px}
.gram .intro{font-size:17px}
.gram ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.gram .eng,.mistake small .eng{color:var(--listen);font-weight:600}
.gtable{width:100%;border-collapse:collapse;font-size:15px;background:var(--surface);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.gtable th,.gtable td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.gtable th{background:var(--surface-2);font-size:13px;color:var(--muted);font-weight:600}
.gtable tr:last-child td{border-bottom:0}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ex-list{display:flex;flex-direction:column;gap:10px}
.ex-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ex-row .tx{flex:1;min-width:0}
.ex-row .tx b{display:block;font-weight:600}
.ex-row .tx small{display:block;color:var(--muted);font-size:14px}
.mistake{padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.mistake s{color:var(--err);text-decoration-thickness:2px}
.mistake .right{color:var(--ok);font-weight:600}
.mistake small{color:var(--muted)}

/* слова */
.word{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:14px;border-top:1px solid var(--line)}
.word:first-child{border-top:0}
.word .tx b{font-weight:600}
.word .tx span{color:var(--muted)}
.word .tx small{display:block;color:var(--muted);font-size:14px;font-style:italic;margin-top:2px}
.star{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;padding:0}
.star svg{width:18px;height:18px}
.star.on{background:var(--speak-soft);border-color:var(--speak);color:var(--speak)}

/* ---------- плеер аудиоурока ---------- */
.pbar{display:flex;align-items:center;gap:12px}
.pbar .ptitle{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .btn{padding:8px 14px;min-height:38px;font-size:14px}
.track{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--listen);transition:width .4s}
.stage{--c:var(--listen);--cs:var(--listen-soft);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;min-height:440px;justify-content:center;transition:border-color .3s}
.stage[data-phase="speak"]{--c:var(--speak);--cs:var(--speak-soft);border-color:var(--speak)}
.stage[data-phase="check"]{--c:var(--ok);--cs:var(--ok-soft)}
.ringbox{position:relative;width:132px;height:132px;max-width:100%}
.ringbox svg{width:100%;height:100%;transform:rotate(-90deg)}
.ringbox .bgc{fill:var(--cs);stroke:none}
.ringbox .arc{fill:none;stroke:var(--c);stroke-width:6;stroke-linecap:round}
.ringbox .phase{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--c);padding:16px}
.ringbox .phase svg{width:30px;height:30px;transform:none}
.ringbox .phase span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.ru{font-size:clamp(20px,5vw,26px);font-weight:600;max-width:28ch;text-wrap:balance}
.ru.sub{font-size:16px;font-weight:500;color:var(--muted)}
.en{font-family:var(--display);font-weight:500;font-size:clamp(22px,6vw,32px);color:var(--c);max-width:22ch;text-wrap:balance;min-height:1.3em}
.en.part{opacity:.85}
.en.ghost{color:transparent;background:repeating-linear-gradient(90deg,var(--line) 0 18px,transparent 18px 26px);border-radius:6px;height:12px;min-height:0;width:200px;max-width:70%}
.hint{font-size:14px;color:var(--muted);max-width:40ch}
.rate{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.rate button{border-radius:999px;padding:12px 20px;font-weight:600;border:1px solid transparent}
.rate .yes{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.rate .no{background:var(--err-soft);color:var(--err);border-color:var(--err)}
kbd{font-family:var(--mono);font-size:11px;opacity:.7;margin-left:6px}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.controls .left{display:flex;gap:10px;flex-wrap:wrap}
.controls .right{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--muted)}
.controls select{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.switch{display:flex;gap:8px;align-items:center;cursor:pointer}
.switch input{width:18px;height:18px;accent-color:var(--listen)}

/* ---------- упражнения и тесты ---------- */
.quiz{display:flex;flex-direction:column;gap:18px}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 20px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow)}
.qkind{display:flex;align-items:center;gap:8px}
.qtext{font-size:clamp(19px,4.6vw,23px);font-weight:600;line-height:1.35}
.qtext .gap{display:inline-block;min-width:56px;border-bottom:2px solid var(--listen);margin:0 4px}
.qsub{color:var(--muted);font-size:15px}
.passage{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:16px;line-height:1.6}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 16px;font-weight:500;width:100%;color:inherit}
.opt:hover:not([disabled]){border-color:var(--listen)}
.opt .k{width:26px;height:26px;border-radius:8px;background:var(--surface-2);font-family:var(--mono);font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--muted)}
.opt.sel{border-color:var(--listen);box-shadow:0 0 0 1px var(--listen) inset}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .k{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--err);background:var(--err-soft)}
.opt.wrong .k{background:var(--err);color:#fff}
.opt[disabled]{cursor:default}
.answer-in{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 16px;font-size:18px;width:100%}
.answer-in.right{border-color:var(--ok);background:var(--ok-soft)}
.answer-in.wrong{border-color:var(--err);background:var(--err-soft)}
.tokens{display:flex;flex-wrap:wrap;gap:8px;min-height:52px;align-items:flex-start}
.tokens.ans{border-bottom:2px dashed var(--line);padding-bottom:10px}
.tok{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 13px;font-weight:600;font-size:16px;box-shadow:0 1px 0 var(--line)}
.tok.used{color:transparent;background:var(--surface-2);border-style:dashed;box-shadow:none;pointer-events:none}
.feedback{border-radius:12px;padding:12px 14px;font-size:15px;display:flex;flex-direction:column;gap:4px}
.feedback.ok{background:var(--ok-soft);color:var(--ok)}
.feedback.no{background:var(--err-soft);color:var(--err)}
.feedback .fx{color:var(--ink)}
.playbig{display:flex;align-items:center;gap:12px}
.playbig .say{width:56px;height:56px}
.playbig .say svg{width:26px;height:26px}
.qfoot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

.result{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;padding:32px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.result h2{font-size:24px}
.result .big{font-family:var(--display);font-size:52px;line-height:1;color:var(--lv,var(--listen))}
.result .res{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.result .res div{display:flex;flex-direction:column}
.result .res b{font-family:var(--mono);font-size:28px;font-variant-numeric:tabular-nums}
.result .res span{font-size:13px;color:var(--muted)}
.result p{color:var(--muted);max-width:46ch}
.blocks{display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px;text-align:left}
.blocks .bl{display:grid;grid-template-columns:40px 1fr 48px;gap:10px;align-items:center;font-size:14px}
.blocks .bl b{font-family:var(--mono);text-align:right}
.blocks .bl.sk{grid-template-columns:104px 1fr 48px}
.blocks .bl.sk span{font-size:14px;color:var(--muted)}
.blocks .label{margin-top:4px}

/* выбор уровня */
.lvpick{display:flex;flex-direction:column;gap:10px}
.lvopt{display:flex;gap:14px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px;width:100%;color:inherit;box-shadow:var(--shadow)}
.lvopt:hover{border-color:var(--lv)}
.lvopt .t{flex:1;min-width:0}
.lvopt .t b{display:block;font-weight:600}
.lvopt .t small{display:block;color:var(--muted);font-size:14px}

/* ---------- словарь и карточки ---------- */
.searchbar{display:flex;gap:10px}
.searchbar input{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:11px 16px;font-size:16px;min-width:0}
.dict .word{grid-template-columns:auto 1fr auto}
.empty{padding:28px 20px;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:10px;align-items:center}
.empty svg{width:32px;height:32px;color:var(--muted)}
.soon .card svg,.card .pi svg{width:24px;height:24px}
.flash{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);min-height:340px;padding:28px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;box-shadow:var(--shadow)}
.flash .front{font-family:var(--display);font-size:clamp(24px,6vw,34px);font-weight:500}
.flash .front.ru{font-family:var(--body);font-weight:600}
.flash .back{display:flex;flex-direction:column;gap:6px;align-items:center}
.flash .back b{font-size:20px}
.flash .back small{color:var(--muted);font-style:italic}
.kindtag{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* ---------- слушать (скоро) ---------- */
.soon{display:grid;gap:12px}
.soon .card{flex-direction:row;align-items:flex-start;gap:14px}
.soon .pi{width:46px;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--listen-soft);color:var(--listen)}
.soon .pi svg{width:24px;height:24px}
.soon .card:nth-child(2) .pi{background:var(--speak-soft);color:var(--speak)}
.soon .card:nth-child(3) .pi{background:var(--ok-soft);color:var(--ok)}
.soon .card:nth-child(4) .pi{background:var(--surface-2);color:var(--ink)}
.soon .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.soon .t p{color:var(--muted);font-size:15px}

/* ---------- профиль ---------- */
.acct{display:flex;gap:14px;align-items:center}
.acct .tx{min-width:0}
.acct .tx b{display:block;font-size:18px}
.acct .tx small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.sync{font-size:14px;color:var(--muted);display:flex;gap:8px;align-items:center}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.sync.warn i{background:var(--speak)}
.sync.off i{background:var(--lock)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.kv div{background:var(--surface-2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}
.kv b{font-family:var(--mono);font-size:22px}
.kv span{font-size:13px;color:var(--muted)}
.certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.cert-thumb{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);padding:0;text-align:left;color:inherit}
.cert-thumb img{display:block;width:100%;aspect-ratio:1.414;object-fit:cover;background:var(--surface-2)}
.cert-thumb div{padding:10px 12px;font-size:14px}
.cert-big img{width:100%;border-radius:12px;border:1px solid var(--line);display:block}
.owner{border:1px solid var(--speak);background:var(--speak-soft)}
.owner .kv div{background:var(--surface)}
.lvdist{display:flex;flex-direction:column;gap:8px}
.lvdist .bl{display:grid;grid-template-columns:40px 1fr 40px;gap:10px;align-items:center;font-size:14px}
.lvdist .bl b{font-family:var(--mono);text-align:right}

/* ---------- нижние вкладки ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar .in{display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:560px;height:var(--tabbar-h)}
.tabbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--muted);position:relative}
.tabbar button svg{width:24px;height:24px}
.tabbar button.on{color:var(--listen)}
.tabbar .badge{position:absolute;top:8px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--speak);color:#fff;font-size:11px;line-height:18px;padding:0 5px}

/* ---------- окно снизу ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(8,12,24,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{background:var(--surface);width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:22px 22px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px;animation:up .25s ease-out}
@media (min-width:700px){.sheet-bg{align-items:center}.sheet{border-radius:22px}}
.sheet-h{display:flex;align-items:center;gap:12px}
.sheet-h h2{font-size:19px;flex:1}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(30px);opacity:.5}}

.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- установка на телефон ---------- */
.install{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r);background:var(--listen-soft)}
.install img{width:44px;height:44px;border-radius:11px;flex:none}
.install .tx{flex:1;min-width:0;font-size:14px}
.install .tx b{display:block;font-size:15px}

.method{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
.method div{min-width:0}
.method h3{font-family:var(--body);font-size:16px;font-weight:600;margin-bottom:4px}
.method p{color:var(--muted);font-size:15px}
.method .src{font-size:12px;color:var(--listen);font-family:var(--mono);margin-bottom:4px;display:block}
@media (max-width:560px){.method{grid-template-columns:1fr}}

/* ---------- фирменная шапка: знак Lingo + слово NYORA + LINGO ---------- */
.brand-mark{width:38px;height:38px;border-radius:0;object-fit:contain}
.brand-wm{display:inline-block;height:15px;aspect-ratio:1000/164;background:currentColor;color:var(--ink);
  -webkit-mask:url(assets/nyora-wordmark.png) center/contain no-repeat;mask:url(assets/nyora-wordmark.png) center/contain no-repeat}
.brand-sub{font-size:11px;font-weight:600;letter-spacing:.42em;color:var(--listen);margin-left:2px}
.brand-txt{display:flex;flex-direction:column;gap:4px;line-height:1}
h1,h2,h3{letter-spacing:-.02em}

/* ---------- приветствие (как в NYORA Health) ---------- */
body.welcome-mode{background:var(--brand);padding-bottom:40px}
.welcome{min-height:calc(100vh - 60px);min-height:calc(100dvh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--cream);padding:24px 8px}
.welcome .w-mark{width:132px;height:auto;margin-bottom:28px;opacity:0;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) .05s forwards}
.welcome .w-wm{width:min(220px,58vw);aspect-ratio:1000/164;background:var(--cream);-webkit-mask:url(assets/nyora-wordmark.png) center/contain no-repeat;mask:url(assets/nyora-wordmark.png) center/contain no-repeat;opacity:0;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) .2s forwards}
.welcome .w-sub{letter-spacing:.62em;padding-left:.62em;font-size:13px;font-weight:500;margin:18px 0 30px;opacity:0;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) .35s forwards}
.welcome p{max-width:330px;color:rgba(242,232,222,.74);margin-bottom:34px;opacity:0;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) .5s forwards}
.welcome .w-actions{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;opacity:0;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) .65s forwards}
.btn.cream{background:var(--cream);border-color:var(--cream);color:var(--brand)}
.btn.on-dark{background:transparent;border-color:rgba(242,232,222,.28);color:var(--cream)}
.welcome .w-made{margin-top:34px;display:flex;align-items:center;gap:10px;color:rgba(242,232,222,.5);font-size:12.5px;opacity:0;animation:rise 1.1s ease .8s forwards}
.welcome .w-made .buro-logo{color:var(--cream);height:34px}
.welcome .w-about{margin-top:12px;background:none;border:0;color:rgba(242,232,222,.7);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.w-lang{margin-bottom:30px;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(242,232,222,.25);background:rgba(242,232,222,.08);color:var(--cream);border-radius:999px;padding:8px 12px 8px 12px;font-size:13.5px;font-weight:600}
.w-lang svg{width:16px;height:16px}
.w-lang svg:last-child{width:14px;height:14px;opacity:.7}
.lang-sheet{width:100%;align-self:stretch}
#sheetBody{width:100%}
.lang-sheet .row-btn:first-child{border-top:0}
.lang-sheet .row-btn svg{color:var(--listen)}
.lang-pick .lp-h{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:15px;color:rgba(242,232,222,.7);margin:-6px 0 22px}
.lang-pick .lp-list{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;opacity:0;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) .5s forwards}
.lp-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(242,232,222,.22);background:rgba(242,232,222,.06);color:var(--cream);border-radius:16px;padding:14px 16px;text-align:left}
.lp-opt b{display:block;font-size:17px}
.lp-opt small{display:block;font-size:12.5px;color:rgba(242,232,222,.6)}
.lp-opt svg{width:20px;height:20px;opacity:.7}
.lp-opt:hover{background:rgba(242,232,222,.12)}
.lp-note{margin-top:22px!important;font-size:12px;color:rgba(242,232,222,.45)!important}
.w-about svg{width:14px;height:14px;vertical-align:-2px}
.lang-seg button{font-size:13.5px;padding:9px 6px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.auth-logo{display:flex;justify-content:center}
.auth-logo img{width:84px;height:84px;border-radius:22px;box-shadow:0 10px 28px rgba(101,2,24,.18)}
.auth-head{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.auth-head h1{font-size:30px}
.auth-head p{color:var(--muted);max-width:36ch}

/* ---------- о бюро и авторе (как в NYORA Health) ---------- */
.about-buro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0}
.buro-big{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;max-width:320px;padding:28px 26px 22px;border-radius:22px;background:var(--brand);color:var(--cream);margin-bottom:6px}
.buro-wm{display:block;width:200px;aspect-ratio:1000/164;background:var(--cream);-webkit-mask:url(assets/nyora-wordmark.png) center/contain no-repeat;mask:url(assets/nyora-wordmark.png) center/contain no-repeat}
.buro-cap{font-size:12.5px;color:rgba(242,232,222,.7);letter-spacing:.02em}
.author-name{font-size:22px;font-weight:700}
.author-cap{font-size:14px;color:var(--muted)}
.by-author{display:inline-flex;align-items:center;gap:10px;margin:14px 0 6px;padding:6px 16px 6px 6px;background:var(--surface-2);border-radius:26px;font-size:14px;text-align:left}
.by-author img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.row-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px 4px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-decoration:none;font-weight:500;text-align:left}
.row-btn span{flex:1}
.row-btn svg{width:20px;height:20px;color:var(--muted)}
.app-id{display:flex;gap:14px;align-items:center}
.app-id img{width:56px;height:56px;border-radius:14px}
.app-id b{display:block;font-size:17px}
.app-id small{color:var(--muted)}

/* ---------- темы оформления ---------- */
.themes{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 6px}
.th{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:12px;padding:0}
.th-sw{width:44px;height:44px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.08);display:grid;place-items:center;color:var(--listen)}
.th-sw svg{width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.th.on{color:var(--ink);font-weight:600}
.th.on .th-sw{box-shadow:0 0 0 2.5px var(--surface),0 0 0 4.5px var(--listen)}

/* ---------- урок: 6 шагов ---------- */
.steps{display:flex;flex-direction:column;gap:10px}
.step{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 16px;color:inherit;box-shadow:var(--shadow);width:100%}
.step:hover{border-color:var(--listen)}
.step .sn{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--listen-soft);color:var(--listen);font-weight:700;font-size:16px;position:relative}
.step .sn svg{width:22px;height:22px}
.step.done .sn{background:var(--ok-soft);color:var(--ok)}
.step .st b{display:block;font-weight:600}
.step .st small{display:block;color:var(--muted);font-size:14px}
.step .ck{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.step.done .ck{background:var(--ok);border-color:var(--ok)}
.step .ck svg{width:14px;height:14px}
.step-nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}
.crumb{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* аудирование и чтение */
.listen-box{display:flex;flex-direction:column;gap:14px}
.player-row{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r);background:var(--listen-soft)}
.player-row .say{width:56px;height:56px;background:var(--listen);color:var(--on-primary)}
.player-row .say svg{width:24px;height:24px}
.player-row b{display:block}
.player-row small{color:var(--muted)}
.transcript{display:flex;flex-direction:column;gap:8px}
.line{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.line.now{border-color:var(--listen);box-shadow:0 0 0 1px var(--listen) inset}
.line .who{font-weight:700;color:var(--listen);min-width:18px}
.line.b .who{color:var(--speak)}
.reading-text{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;font-size:17px;line-height:1.7;box-shadow:var(--shadow)}
.reading-text p+p{margin-top:12px}
.reading-text h2{font-size:20px;margin-bottom:10px}
details.more{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px 16px}
details.more summary{cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary svg{width:18px;height:18px;flex:none;color:var(--listen)}
.back{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back svg{flex:none}
details.more[open] summary{margin-bottom:10px}

/* ---------- раздел «Темы» ---------- */
.topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.topic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.topic{display:flex;flex-direction:column;gap:10px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px;color:inherit;box-shadow:var(--shadow);min-height:132px}
.topic:hover{border-color:var(--listen)}
.topic .ti{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--listen-soft);color:var(--listen)}
.topic .ti svg{width:22px;height:22px}
.topic b{font-weight:600;line-height:1.25}
.topic small{color:var(--muted);font-size:13px;line-height:1.35;overflow-wrap:anywhere;hyphens:auto}
.topic{min-width:0}
.topic .tp{margin-top:auto;display:flex;gap:4px}
.topic .tp i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.topic .tp i.on{background:var(--ok)}
.phrase{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 14px;border-top:1px solid var(--line)}
.phrase:first-child{border-top:0}
.phrase b{display:block;font-weight:600}
.phrase small{display:block;color:var(--muted);font-size:14px}

/* ---------- пробный период и подписка ---------- */
.trial{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:var(--r);background:var(--listen-soft);border:1px solid rgba(101,2,24,.12)}
.trial b{display:block;font-size:15px}
.trial small{display:block;color:var(--muted);font-size:13px}
.trial .btn{flex:none}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 20px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.price{display:flex;align-items:baseline;justify-content:center;gap:8px}
.price b{font-size:48px;font-weight:800;letter-spacing:-.03em;color:var(--listen)}
.price span{color:var(--muted);font-size:16px}
.perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.perks li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.perks svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:2px}
.dev-note .btn{margin:4px 2px 0}
.pay-steps{background:var(--surface-2);border-radius:14px;padding:14px 16px;font-size:15px}
.pay-steps ol{margin:8px 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.tg-btn{gap:8px}
.tg-btn svg{width:18px;height:18px}
.pay-code{margin-top:4px}
.pay-code summary{cursor:pointer;color:var(--muted);font-size:14px;padding:6px 0;list-style:none;text-align:center}
.pay-code summary::-webkit-details-marker{display:none}
.pay-code[open] summary{margin-bottom:8px}
.pay-code .field{margin-bottom:10px}
.codes-box{display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(101,2,24,.15);padding-top:14px}
.codes-list{display:flex;flex-direction:column;gap:8px}
.usr-list{display:flex;flex-direction:column;gap:8px}
.usr{background:var(--surface);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.usr-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.usr-t b{font-size:15px;overflow:hidden;text-overflow:ellipsis}
.usr-t small{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.usr-t .chip{align-self:flex-start;margin-top:3px}
.usr-b{display:flex;gap:6px;flex-wrap:wrap}
.code-row{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:12px;padding:8px 10px}
.code-row code{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14.5px;font-weight:600;letter-spacing:.04em}

/* ---------- говорение с микрофоном ---------- */
.say-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}
.mic{width:76px;height:76px;border-radius:50%;border:0;background:var(--listen);color:var(--on-primary);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(101,2,24,.25)}
.mic svg{width:32px;height:32px}
.mic.rec{background:var(--speak);animation:pulse 1s ease-in-out infinite}
.heard{font-size:15px;color:var(--muted);text-align:center;max-width:36ch}
.heard b{color:var(--ink)}

/* ---------- письмо ---------- */
.write-area{width:100%;min-height:160px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:14px 16px;font-size:16px;line-height:1.6;resize:vertical}
.write-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.starters{display:flex;flex-wrap:wrap;gap:8px}
.starter{border:1px dashed var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:14px;color:var(--ink)}
.checks{display:flex;flex-direction:column;gap:8px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.checks input{width:18px;height:18px;accent-color:var(--ok);margin-top:2px;flex:none}
.auto-checks{display:flex;flex-direction:column;gap:6px;font-size:14px}
.auto-checks .ok{color:var(--ok)} .auto-checks .no{color:var(--speak)}
.model{background:var(--ok-soft);border-radius:14px;padding:14px 16px;font-size:16px;line-height:1.6}

/* ---------- кнопки: компактные и современные ---------- */
.btn{min-height:42px;padding:10px 18px;font-size:15px;letter-spacing:-.005em;transition:transform .12s,filter .15s,background .15s}
.btn:active{transform:scale(.97)}
.btn.sm{min-height:34px;padding:7px 13px;font-size:13.5px}
.wrap>.btn.block,.wrap>.step-nav .btn,.step-nav .btn{width:auto;min-width:0}
.wrap>.btn.block{align-self:center;padding-inline:26px}
.step-nav{justify-content:flex-end}
.say,.icon-btn,.star{transition:transform .12s}
.say:active,.icon-btn:active,.star:active{transform:scale(.9)}

/* ---------- фото ---------- */
.ph{display:block;width:100%;object-fit:cover;background:var(--surface-2)}
.lvhero.has-photo{padding:0}
.lvhero.has-photo .ph{height:150px}
.lvhero.has-photo .lv-in{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.topic.has-photo{padding:0;overflow:hidden}
.topic.has-photo .ph{height:96px}
.topic.has-photo .t-in{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.hero-ph{border-radius:var(--r-lg);overflow:hidden}
.hero-ph .ph{height:160px}

.lvhero .cta-row{align-items:center;flex-wrap:nowrap;gap:14px;justify-content:space-between}
.next-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.next-l small{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.next-l b{font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lvhero .cta-row .btn{flex:none}
/* ---------- XP и серия ---------- */
.xp-row{display:flex;gap:8px;flex-wrap:wrap}
.xp{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:6px 11px;border-radius:999px;background:var(--speak-soft);color:var(--speak)}
.xp svg{width:15px;height:15px}
.xp.ok{background:var(--ok-soft);color:var(--ok)}

/* ---------- игры ---------- */
.g-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:420px){.g-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
.g-pick{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:0;border-radius:var(--r);padding:14px 12px;color:#fff;min-height:132px;
  background:linear-gradient(150deg,#7a0a24,#4a0112);box-shadow:0 8px 20px rgba(101,2,24,.22)}
.g-pick:nth-child(2){background:linear-gradient(150deg,#b5651d,#7c3f0e);box-shadow:0 8px 20px rgba(181,101,29,.22)}
.g-pick:nth-child(3){background:linear-gradient(150deg,#3d5a98,#24365f);box-shadow:0 8px 20px rgba(61,90,152,.22)}
.g-pick .gi{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.16);display:inline-flex;align-items:center;justify-content:center;margin-bottom:4px}
.g-pick .gi svg{width:19px;height:19px}
.g-pick b{font-size:14.5px;overflow-wrap:anywhere;hyphens:auto}
.g-pick small{font-size:12px;opacity:.8;line-height:1.3}
.g-pick .g-best{margin-top:auto;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.18)}
.game{display:flex;flex-direction:column;gap:16px}
.game #gBody{display:flex;flex-direction:column;gap:14px}
.g-score{font-weight:800;font-size:22px;font-variant-numeric:tabular-nums;color:var(--listen);min-width:56px;text-align:right}
.g-score.bump{animation:bump .3s}
@keyframes bump{40%{transform:scale(1.35)}}
.g-hud{display:flex;flex-direction:column;gap:8px}
.g-time{height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.g-time i{display:block;height:100%;background:linear-gradient(90deg,var(--speak),var(--listen));border-radius:8px;transition:width .1s linear}
.g-stats{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.g-stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.g-stats svg{width:15px;height:15px;vertical-align:-2px;color:var(--speak)}
.g-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 18px;text-align:center;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.g-card.shake,.tok.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.g-word{font-size:clamp(28px,8vw,40px);font-weight:800;letter-spacing:-.02em}
.g-word.ru{font-size:clamp(19px,5vw,24px);font-weight:600}
.g-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g-opt{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:16px 10px;font-weight:600;font-size:15px;color:var(--ink);min-height:64px}
.g-opt.right{background:var(--ok);border-color:var(--ok);color:#fff}
.g-opt.wrong{background:var(--err);border-color:var(--err);color:#fff}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g-tile{position:relative;aspect-ratio:1/1;border:0;border-radius:14px;background:linear-gradient(150deg,#7a0a24,#4a0112);color:#fff;font-weight:700;font-size:14px;padding:8px;overflow:hidden;box-shadow:0 6px 14px rgba(101,2,24,.2)}
.g-tile .g-back{position:absolute;inset:0;background:url(assets/mark-256.png) center/46% no-repeat;filter:brightness(0) invert(1);opacity:.28}
.g-tile .g-face{display:none}
.g-tile.open,.g-tile.found{background:var(--surface);color:var(--ink);border:2px solid var(--listen)}
.g-tile.en.open,.g-tile.en.found{color:var(--listen)}
.g-tile.open .g-back,.g-tile.found .g-back{display:none}
.g-tile.open .g-face,.g-tile.found .g-face{display:block}
.g-tile.found{border-color:var(--ok);background:var(--ok-soft);animation:bump .3s}
.tok.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.g-result .big{color:var(--listen)}

/* ---------- библиотека: книги ---------- */
.books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px}
@media (min-width:640px){.books{grid-template-columns:repeat(4,minmax(0,1fr))}}
.book{border:0;background:none;padding:0;text-align:left;color:inherit;display:flex;flex-direction:column;gap:6px}
.cover{position:relative;aspect-ratio:2/3;border-radius:6px 12px 12px 6px;padding:12px 10px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden;
  box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.45),0 10px 22px rgba(41,31,22,.22)}
.cover::after{content:"";position:absolute;inset:0 auto 0 8px;width:1px;background:rgba(255,255,255,.18)}
.cover .c-t{font-weight:800;font-size:13.5px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.cover .c-a{font-size:10.5px;opacity:.85}
.cover .c-g{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.book small{font-size:12px;color:var(--muted)}
.book .bp{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.book .bp i{display:block;height:100%;background:var(--ok)}
.rec{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px;border-top:1px solid var(--line)}
.rec:first-child{border-top:0}
.rec .rn{width:44px;height:60px;border-radius:4px 8px 8px 4px;display:flex;align-items:flex-end;padding:5px;color:#fff;font-size:9px;font-weight:700;box-shadow:inset 3px 0 6px -3px rgba(0,0,0,.4)}
.rec b{display:block}
.rec small{display:block;color:var(--muted);font-size:13.5px}
.rec .why{font-size:13.5px;margin-top:4px}
.chapters .row-item .n{font-weight:700}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}