/* Тренажёр: экраны с нижними вкладками; тест — на весь экран без прокрутки. */
:root{
  --bg:#f2f4f8; --surface:#ffffff; --ink:#152033; --muted:#5d687a; --line:#dde2ea;
  --accent:#2457c5; --accent-ink:#ffffff; --accent-soft:#e7eefb;
  --ok:#12845b; --ok-soft:#e1f4ea; --bad:#c8162f; --bad-soft:#fdeaed; --warn:#a15c00; --gold:#f5a623;
  --font:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --vh: var(--tg-viewport-stable-height, 100dvh);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f141c; --surface:#18202b; --ink:#e7ebf1; --muted:#9aa5b4; --line:#2a3341;
  --accent:#8cb0f2; --accent-ink:#0d1726; --accent-soft:#1c2a40;
  --ok:#4fd19b; --ok-soft:#123326; --bad:#ff7084; --bad-soft:#3a171d; --warn:#f0b35a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f141c; --surface:#18202b; --ink:#e7ebf1; --muted:#9aa5b4; --line:#2a3341;
  --accent:#8cb0f2; --accent-ink:#0d1726; --accent-soft:#1c2a40;
  --ok:#4fd19b; --ok-soft:#123326; --bad:#ff7084; --bad-soft:#3a171d; --warn:#f0b35a; color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}
[hidden]{display:none!important}
.muted{color:var(--muted)} .small{font-size:13px} .warn{color:var(--warn)}
.center{text-align:center;display:grid;gap:10px;justify-items:center}
.stack{display:grid;gap:8px;width:100%}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between;flex-wrap:nowrap}
.row input{flex:1;min-width:0}

/* экраны */
.view{max-width:640px;margin:0 auto;padding:14px 16px calc(84px + var(--safe-b));display:grid;gap:14px}
.title{font-size:24px;font-weight:800;letter-spacing:-.01em}
.sec{font-size:16px;margin-top:4px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:10px}
.card h3{font-size:16px}
.empty{text-align:center;justify-items:center;padding:28px 18px}
.big-emoji{font-size:42px}
.note{font-size:13px;color:var(--muted);text-align:center}

/* нижние вкладки */
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 4px calc(6px + var(--safe-b))}
#tabbar button{border:0;background:none;display:grid;justify-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--muted);padding:4px 0}
#tabbar button i{width:26px;height:26px;display:block}
#tabbar button i svg{width:100%;height:100%}
#tabbar button[aria-current="page"]{color:var(--accent)}

/* Занятия */
.hello{display:flex;justify-content:space-between;align-items:center}
.lvl{font-weight:800;font-size:18px}
.streak{font-weight:800;font-size:18px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.xpbar{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#ff7a45);border-radius:99px}
.ready{grid-template-columns:auto 1fr;align-items:center;gap:14px}
.ready-t{font-weight:800;font-size:17px}
.speech{margin-top:6px;font-size:14px}
.ring{position:relative;width:88px;height:88px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}
.ring .rbg{stroke:var(--line)} .ring .rfg{stroke:var(--ok);stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:800}
.cta{border:0;border-radius:18px;padding:18px;background:linear-gradient(135deg,var(--accent),#5b8cff);color:#fff;display:grid;gap:2px;text-align:center;box-shadow:0 8px 24px -10px var(--accent)}
.cta b{font-size:20px} .cta span{opacity:.9;font-size:14px}
.cta:active{transform:scale(.98)}
.cta.done{background:var(--ok-soft);color:var(--ok);box-shadow:none}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:14px;display:grid;gap:2px;text-align:left}
.tile .ti{font-size:24px}
.tile b{font-size:16px} .tile span:last-child{font-size:12.5px;color:var(--muted)}
.tile:disabled{opacity:.55}
.litem{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;width:100%}
.litem .tick{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center}
.litem[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.litem[aria-pressed="true"] .tick{background:var(--accent);border-color:var(--accent)}
.litem[aria-pressed="true"] .tick::after{content:"";width:6px;height:11px;border:solid var(--accent-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.litem .lt{display:grid;gap:1px;min-width:0}
.litem .lt span{font-size:13px;color:var(--muted)}
.litem .pct{font-weight:700;font-size:13px;color:var(--muted)}
.mini{display:block;height:4px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:4px}
.mini i{display:block;height:100%;background:var(--ok)}

/* кнопки, поля */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 16px;font-size:15px;font-weight:600}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:default}
input[type=date],input[type=text],select{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);width:100%}
.field{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-width:48px;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 14px;font-weight:800;font-size:17px}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chips.big .chip{min-width:58px;padding:14px;font-size:20px}
.seg{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.seg button{flex:1;border:0;background:none;padding:9px 6px;font-size:14px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.switch{appearance:none;width:48px;height:28px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch:checked{background:var(--ok)} .switch:checked::after{left:23px}
.settings h3{margin-top:6px}

/* полноэкранный тест */
#focus{position:fixed;inset:0;z-index:10;background:var(--bg);height:var(--vh);overflow:hidden}
.focus{height:100%;display:flex;flex-direction:column;max-width:720px;margin:0 auto;padding:10px 14px calc(10px + var(--safe-b))}
.fbar{display:flex;align-items:center;gap:10px;flex:none;height:40px}
.icon-btn{border:0;background:var(--surface);border-radius:12px;width:38px;height:38px;display:grid;place-items:center;flex:none;color:var(--muted)}
.icon-btn svg{width:20px;height:20px}
.fprog{flex:1;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.fprog i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#46d39a);border-radius:99px;transition:width .35s ease}
.fcount{font-weight:800;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.timer.low{color:var(--bad)}
.segs{flex:1;display:grid;grid-template-columns:repeat(20,1fr);gap:3px}
.segs button{height:10px;border:0;border-radius:3px;background:var(--line);padding:0}
.segs button.done{background:var(--accent)}
.segs button.cur{box-shadow:0 0 0 2px var(--ink)}
.qv{--fs:1;flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(10px * var(--fs));padding-top:10px;overflow:hidden}
.qimg{flex:1 1 0;min-height:90px;display:flex;justify-content:center;align-items:center;background:var(--surface);border-radius:14px;overflow:hidden}
.qimg img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;cursor:zoom-in}
.qtext{flex:none;font-size:calc(18px * var(--fs));font-weight:700;line-height:1.3}
.qv:not(.has-img) .qtext{font-size:calc(21px * var(--fs));margin-top:4vh}
.opts{flex:none;display:grid;gap:calc(8px * var(--fs))}
.opt{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:calc(11px * var(--fs)) 12px;font-size:calc(15.5px * var(--fs));line-height:1.3}
.opt .k{font-weight:800;color:var(--muted);font-size:13px;width:24px;height:24px;border-radius:8px;background:var(--bg);display:grid;place-items:center}
.opt:active:not(:disabled){transform:scale(.99)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)} .opt.right .k{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)} .opt.wrong .k{background:var(--bad);color:#fff}
.opt:disabled{cursor:default;color:inherit}
.ffoot{flex:none;min-height:72px;display:grid;gap:4px;align-content:end;padding-top:10px}
.ffoot.row{display:grid;grid-template-columns:auto 1fr auto;gap:8px}
.hint{text-align:center;color:var(--muted);font-size:13px;padding:22px 0}
.next{border:0;border-radius:16px;padding:12px;display:grid;gap:1px;text-align:center;color:#fff;animation:pop .25s ease}
.next b{font-size:18px} .next span{font-size:13px;opacity:.92}
.next.ok{background:var(--ok)} .next.bad{background:var(--bad)}
.guess{border:0;background:none;color:var(--muted);font-size:12.5px;padding:2px}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* итог */
.result{height:100%;overflow-y:auto;max-width:640px;margin:0 auto;padding:28px 16px calc(24px + var(--safe-b));display:grid;gap:16px;align-content:start;text-align:center}
.res-emoji{font-size:64px;animation:pop .5s ease}
.result h1{font-size:26px} .result h1.ok{color:var(--ok)} .result h1.bad{color:var(--bad)}
.res-head{font-size:22px;font-weight:800}
.res-sub{color:var(--muted)}
.res-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 8px;display:grid}
.stat b{font-size:22px;font-weight:800} .stat span{font-size:12px;color:var(--muted)}
.res-medals{display:grid;gap:8px}
.medal-chip{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:8px 12px}
.medal-chip span:last-child{display:grid}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.res-review{text-align:left;margin-top:10px}
.review-q{text-align:left}
.review-q .qv{overflow:visible}
.review-q .qimg{flex:none;height:180px}

/* онбординг */
.onb{height:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;padding:18px 18px calc(18px + var(--safe-b))}
.onb .dots{display:flex;gap:6px;justify-content:center}
.onb .dots i{width:28px;height:5px;border-radius:9px;background:var(--line)} .onb .dots i.on{background:var(--accent)}
.onb-body{flex:1;overflow-y:auto;display:grid;gap:14px;align-content:start;padding-top:8vh}
.onb-body h1{font-size:26px;font-weight:800}
.lead{font-size:16px;color:var(--muted)}
.list{display:grid;gap:8px}
.onb-foot{flex:none;padding-top:12px}

/* достижения */
.level{grid-template-columns:auto 1fr;align-items:center;gap:14px}
.lv-n{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,var(--gold),#ff7a45);color:#fff;font-size:28px;font-weight:800;display:grid;place-items:center}
.medals{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.medal{border:0;background:none;display:grid;justify-items:center;gap:4px;font-size:12px;font-weight:600;text-align:center;padding:4px}
.medal span:first-child{width:72px;display:block}
.medal.locked{color:var(--muted)}
.medal svg{width:100%;height:auto;display:block}
.medal:not(.locked) span:first-child{filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:2px;align-content:start}
.fact b{font-size:22px;font-weight:800}
.fact span{font-size:13px;color:var(--muted)}
.fact em{font-style:normal;font-size:12.5px;margin-top:4px}
.medal-big{width:150px}
.medal-big svg{width:100%;height:auto}
.quip{font-style:italic;font-size:16px}

/* профиль */
.me{grid-template-columns:auto 1fr;align-items:center;gap:14px}
.ava{width:38px;height:38px;border-radius:50%;color:#fff;font-weight:800;display:grid;place-items:center;flex:none}
.ava.big{width:64px;height:64px;font-size:26px}
.pins{display:flex;gap:12px}
.pin{width:64px;height:80px;border:0;background:none;padding:0}
.pin svg{width:100%;height:100%}
.pin.empty{border:2px dashed var(--line);border-radius:16px;font-size:24px;color:var(--muted)}

/* друзья */
.seg.wide{width:100%}
.board{display:grid;gap:6px}
.brow{display:grid;grid-template-columns:28px auto 1fr auto auto;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.brow.me{border-color:var(--accent);background:var(--accent-soft)}
.place{font-weight:800;text-align:center}
.bn{display:grid;min-width:0} .bn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpins{display:flex;gap:2px}
.bxp{display:grid;text-align:right} .bxp b{font-weight:800} .bxp span{font-size:11px;color:var(--muted)}

/* лист, тост, эффекты */
#sheet{position:fixed;inset:0;z-index:30}
.sheet-bg{position:absolute;inset:0;background:rgba(5,8,12,.5);animation:fade .2s}
.sheet-box{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:var(--surface);border-radius:22px 22px 0 0;padding:26px 18px calc(18px + var(--safe-b));max-height:90%;overflow-y:auto;animation:up .25s ease}
.sheet-x{position:absolute;top:10px;right:10px;border:0;background:var(--bg);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;color:var(--muted)}
.sheet-x svg{width:18px;height:18px}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}}
#toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translate(-50%,-20px);opacity:0;z-index:40;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;max-width:min(92vw,520px);text-align:center;transition:transform .3s,opacity .3s;pointer-events:none}
#toast.show{transform:translate(-50%,0);opacity:1}
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.fx-overlay{position:fixed;inset:0;pointer-events:none;z-index:49}
.fx-glow{background:radial-gradient(circle at 50% 40%,rgba(255,213,74,.55),transparent 60%);animation:glow 1.2s ease forwards}
@keyframes glow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.fx-light{display:grid;align-content:center;justify-content:center;gap:10px}
.fx-light::before{content:"";position:absolute;left:50%;top:50%;width:84px;height:236px;margin:-118px 0 0 -42px;background:#1f2937;border-radius:22px;z-index:-1;animation:glow 1.5s ease forwards}
.fx-light i{width:60px;height:60px;border-radius:50%;background:#374151;animation:lt 1.5s ease forwards}
.fx-light i:nth-child(1){--c:#ef4444;animation-name:l1}
.fx-light i:nth-child(2){--c:#f59e0b;animation-name:l2}
.fx-light i:nth-child(3){--c:#22c55e;animation-name:l3}
@keyframes l1{0%,30%{background:#ef4444;box-shadow:0 0 30px #ef4444}31%,100%{background:#374151}90%,100%{opacity:0}}
@keyframes l2{0%,30%{background:#374151}31%,55%{background:#f59e0b;box-shadow:0 0 30px #f59e0b}56%,100%{background:#374151}90%,100%{opacity:0}}
@keyframes l3{0%,55%{background:#374151}56%,90%{background:#22c55e;box-shadow:0 0 40px #22c55e}100%{opacity:0;background:#22c55e}}
.lightbox{position:fixed;inset:0;background:rgba(5,8,12,.92);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}