/* ---------- Шрифты (свои, без внешних серверов) ---------- */
@font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url(vendor/fonts/manrope-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url(vendor/fonts/manrope-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-weight:500;font-display:swap;src:url(vendor/fonts/manrope-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-weight:500;font-display:swap;src:url(vendor/fonts/manrope-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url(vendor/fonts/manrope-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url(vendor/fonts/manrope-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url(vendor/fonts/manrope-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url(vendor/fonts/manrope-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";font-weight:500;font-display:swap;src:url(vendor/fonts/unbounded-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-weight:500;font-display:swap;src:url(vendor/fonts/unbounded-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";font-weight:600;font-display:swap;src:url(vendor/fonts/unbounded-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-weight:600;font-display:swap;src:url(vendor/fonts/unbounded-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@property --hue{syntax:'<number>';inherits:true;initial-value:220}

:root{
  --font-ui:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Unbounded","Manrope",system-ui,sans-serif;
  --r-lg:30px; --r-md:20px; --r-sm:14px;
  --hue:220; transition:--hue 1s ease;
  --acc:hsl(var(--hue) 72% 55%); --acc-d:hsl(var(--hue) 70% 40%); --acc-soft:hsl(var(--hue) 80% 60% / .22);
  --ok:#46d37a; --ok-d:#2fa866; --bad:#e5484d;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#070a12; --text:#f4f6fb; --muted:rgba(244,246,251,.64);
  --glass:rgba(255,255,255,.07); --glass-strong:rgba(14,18,30,.86); --glass-border:rgba(255,255,255,.18); --glass-hi:rgba(255,255,255,.32);
  --row:rgba(255,255,255,.07); --row-hover:rgba(255,255,255,.13); --active:rgba(255,255,255,.19);
  --btn:#f4f6fb; --btn-ink:#070a12; --shadow:0 22px 60px rgba(0,0,0,.42);
  --track:rgba(255,255,255,.22); --line:rgba(255,255,255,.15); --input:rgba(255,255,255,.08);
  --ok-t:#6ee79a; --bad-t:#ff8a8e; --ok-bg:rgba(70,211,122,.20); --bad-bg:rgba(229,72,77,.22);
  --blob-a:.34; --blob-l:46%;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#eef0f6; --text:#12151f; --muted:rgba(18,21,31,.6);
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(244,246,251,.94); --glass-border:rgba(255,255,255,.85); --glass-hi:rgba(255,255,255,.95);
  --row:rgba(255,255,255,.55); --row-hover:rgba(255,255,255,.85); --active:rgba(255,255,255,.98);
  --btn:#12151f; --btn-ink:#fff; --shadow:0 20px 56px rgba(18,21,31,.14);
  --track:rgba(18,21,31,.14); --line:rgba(18,21,31,.14); --input:rgba(255,255,255,.75);
  --ok-t:#1d7a45; --bad-t:#b3262b; --ok-bg:rgba(70,211,122,.28); --bad-bg:rgba(229,72,77,.20);
  --blob-a:.42; --blob-l:70%;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);overflow-x:hidden;transition:background-color .6s,color .4s}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,.opt:focus-visible,.slot:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
[hidden]{display:none!important}
.sp{flex:1}

/* ---------- Фон ---------- */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg)}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--blob-a);will-change:transform;animation:drift 38s ease-in-out infinite alternate}
.blob.b1{width:56vmax;height:56vmax;left:-14vmax;top:-18vmax;background:hsl(var(--hue) 85% var(--blob-l))}
.blob.b2{width:48vmax;height:48vmax;right:-16vmax;top:18vh;background:hsl(calc(var(--hue) + 70) 80% var(--blob-l));animation-duration:46s;animation-delay:-12s}
.blob.b3{width:44vmax;height:44vmax;left:10vw;bottom:-24vmax;background:hsl(calc(var(--hue) - 60) 80% var(--blob-l));animation-duration:52s;animation-delay:-24s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,4vh) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.blob{animation:none}*{scroll-behavior:auto!important}}

/* ---------- Liquid glass ---------- */
.glass{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(34px) saturate(185%);backdrop-filter:blur(34px) saturate(185%);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow),inset 0 1.5px 0 var(--glass-hi),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 40px rgba(255,255,255,.05)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 8% 0%,rgba(255,255,255,.26),transparent 46%),linear-gradient(315deg,rgba(255,255,255,.10),transparent 40%);mix-blend-mode:soft-light}
[data-theme="light"] .glass::before{mix-blend-mode:normal;opacity:.7}
.glass>*{position:relative;z-index:1}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:16px;background:var(--row);font-weight:700;font-size:15px;transition:background .15s,filter .15s,transform .1s,opacity .2s;text-align:center}
.btn:hover{background:var(--row-hover)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--btn);color:var(--btn-ink)}
.btn.primary:hover{filter:opacity(.9)}
.btn.green{background:var(--ok);color:#06210f}
.btn.green:hover{filter:brightness(1.05)}
.btn.red{background:var(--bad);color:#fff}
.btn.big{padding:17px 24px;font-size:16px;width:100%}
.btn.sm{padding:10px 16px;font-size:13px;border-radius:13px}
.btn.danger{color:var(--bad-t)}
.btn:disabled{opacity:.38;pointer-events:none}
.icon-btn{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;flex:none;transition:background .15s,transform .1s;position:relative}
.icon-btn:hover{background:var(--row-hover)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .badge{position:absolute;right:-3px;top:-3px;min-width:19px;height:19px;border-radius:999px;background:var(--acc);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--row);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Вход ---------- */
.gate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px}
.gate form{width:min(400px,100%);border-radius:34px;padding:38px 28px 30px;display:flex;flex-direction:column;gap:14px;text-align:center}
.logo-big{width:68px;height:68px;border-radius:22px;margin:0 auto 4px;display:grid;place-items:center;font-size:34px;font-weight:700;color:#06210f;background:var(--ok);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 12px 30px rgba(70,211,122,.4)}
.gate h1{font-family:var(--font-display);font-weight:500;font-size:26px;letter-spacing:-.02em}
.gate p{color:var(--muted);font-size:14px;margin-bottom:6px}
.gate input{background:var(--input);border:1px solid var(--glass-border);border-radius:16px;padding:15px 16px;font:inherit;font-size:17px;color:var(--text);text-align:center;outline:none}
.gate input:focus{border-color:var(--muted)}
.gerr{color:var(--bad-t);font-size:13px;min-height:16px;font-weight:600}
.gate.shake form{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ---------- Каркас приложения ---------- */
.app{position:relative;z-index:1;min-height:100dvh;padding:14px 16px max(28px,env(safe-area-inset-bottom));max-width:1080px;margin:0 auto}
.top{position:sticky;top:10px;z-index:20;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;border-radius:24px;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:500;font-size:17px;letter-spacing:-.02em;padding:4px 6px 4px 0}
.logo{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--ok);color:#06210f;font-weight:700;font-size:18px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5)}
main{display:block}
.view-title{display:flex;align-items:center;gap:12px;margin:4px 4px 18px}
.view-title h2{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,3vw,28px);letter-spacing:-.02em;line-height:1.2}
.view-title .back{width:44px;height:44px;border-radius:15px;background:var(--row);display:grid;place-items:center;flex:none}
.view-title .back:hover{background:var(--row-hover)}
.view-title .back svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:22px 6px 12px}

/* Продолжить */
.resume{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px 14px 14px;border-radius:var(--r-lg);width:100%;text-align:left;margin-bottom:6px;transition:transform .12s}
.resume:active{transform:scale(.99)}
.resume .tile{width:56px;height:56px;font-size:24px}
.resume .rt{font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resume .rs{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.resume .go{font-weight:700;font-size:14px;padding:11px 18px;border-radius:14px;background:var(--ok);color:#06210f}
.tile{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:22px;color:#fff;background:linear-gradient(145deg,hsl(var(--h) 75% 60%),hsl(calc(var(--h) + 30) 70% 42%));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4);flex:none;font-family:var(--font-display);font-weight:600}

/* Предметы */
.subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.scard{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--r-lg);text-align:left;transition:transform .15s,box-shadow .2s;min-height:178px}
.scard:hover{transform:translateY(-3px)}
.scard:active{transform:scale(.99)}
.scard .tile{width:56px;height:56px;font-size:26px}
.scard h3{font-family:var(--font-display);font-weight:500;font-size:17px;letter-spacing:-.01em;line-height:1.25}
.scard .sd{font-size:13px;color:var(--muted);line-height:1.45}
.scard .foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.bar{height:7px;border-radius:7px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,hsl(var(--h) 75% 58%),hsl(calc(var(--h) + 30) 75% 52%));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar-l{font-size:12px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between}
.scard.planned{opacity:.62}
.soon{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--row-hover);color:var(--muted);align-self:flex-start}

/* ---------- Карта предмета ---------- */
.module{margin-bottom:34px}
.mhead{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;padding:16px 18px;border-radius:var(--r-lg)}
.mhead h3{font-family:var(--font-display);font-weight:500;font-size:17px;letter-spacing:-.01em}
.mhead .md{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
.mhead .bar{margin-top:10px}
.mnote{font-size:13px;color:var(--muted);text-align:center;margin-top:12px}
.path{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 0 4px}
.node{display:flex;flex-direction:column;align-items:center;gap:7px;transform:translateX(var(--dx,0));width:150px;padding:6px 0}
.circle{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:32px;color:#fff;position:relative;
  background:linear-gradient(160deg,hsl(var(--hue) 78% 62%),hsl(var(--hue) 72% 46%));
  box-shadow:0 7px 0 hsl(var(--hue) 65% 34%),0 18px 28px rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.4);transition:transform .12s,box-shadow .12s}
.node:hover .circle{transform:translateY(-2px)}
.node:active .circle{transform:translateY(5px);box-shadow:0 2px 0 hsl(var(--hue) 65% 34%),0 8px 14px rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.4)}
.node.done .circle{background:linear-gradient(160deg,#58e08c,#2fa866);box-shadow:0 7px 0 #1f7a45,0 18px 28px rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.45)}
.node.locked .circle{background:var(--row-hover);color:var(--muted);box-shadow:0 7px 0 var(--line),inset 0 2px 0 var(--glass-hi);font-size:26px}
.node.current .circle::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid hsl(var(--hue) 80% 62%);animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{transform:scale(.88);opacity:.9}100%{transform:scale(1.18);opacity:0}}
.nt{font-size:13px;font-weight:700;text-align:center;line-height:1.25;max-width:150px}
.node.locked .nt{color:var(--muted);font-weight:600}
.stars{display:flex;gap:2px;height:16px}
.stars svg{width:15px;height:15px}
.stars .on{fill:#ffc53d}.stars .off{fill:var(--track)}

/* ---------- Урок ---------- */
.lesson{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:transparent}
.lesson::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);opacity:.55}
.lbar{display:flex;align-items:center;gap:14px;padding:max(12px,env(safe-area-inset-top)) 16px 8px;max-width:980px;width:100%;margin:0 auto}
.lprog{flex:1;height:16px;border-radius:16px;background:var(--track);overflow:hidden}
.lprog i{display:block;height:100%;width:0;border-radius:16px;background:var(--ok);box-shadow:inset 0 3px 0 rgba(255,255,255,.35);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.lscroll{flex:1;min-height:0;overflow:auto;display:flex;padding:8px 16px 16px}
.lmain{width:min(640px,100%);margin:auto;display:flex;flex-direction:column;gap:16px}
.qcard{border-radius:34px;padding:clamp(20px,3.4vh,34px) clamp(18px,3vw,32px);display:flex;flex-direction:column;gap:14px}
.qcard.shake{animation:shake .38s}
.cap{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.qtitle{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,3.2vw,26px);letter-spacing:-.02em;line-height:1.25}
.qtext{font-size:clamp(18px,2.6vw,23px);font-weight:600;line-height:1.4}
.qtext.big{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,6vw,46px);text-align:center;padding:10px 0;letter-spacing:-.02em}
.qtext .katex{font-size:1.06em}
.qtext.big .katex{font-size:1em}
.body p{font-size:clamp(16px,2.2vw,19px);line-height:1.6;margin:0 0 .6em}
.body p:last-child{margin-bottom:0}
.formula{text-align:center;padding:14px 8px;border-radius:20px;background:var(--row);overflow-x:auto;overflow-y:hidden}
.formula .katex-display{margin:0}
.formula .katex{font-size:1.35em}
.examples{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ex{padding:10px 18px;border-radius:16px;background:var(--row);font-size:1.15em}

/* Картинки */
.objs{display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;font-size:clamp(28px,6vw,38px);line-height:1.1;padding:6px 0}
.obj{position:relative;display:inline-block}
.obj.gone{opacity:.4;filter:grayscale(.7)}
.obj.gone::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:4px;border-radius:3px;background:var(--bad);transform:rotate(-32deg)}
.nl{overflow-x:auto;padding:4px 0 2px;-webkit-overflow-scrolling:touch}
.nl svg{display:block;margin:0 auto;max-width:none}
.nl text{fill:var(--text);font-family:var(--font-ui);font-weight:600}
.nl .tick{stroke:var(--muted);stroke-width:2}
.nl .axis{stroke:var(--muted);stroke-width:3;stroke-linecap:round}
.nl .arc{fill:none;stroke:var(--acc);stroke-width:4;stroke-linecap:round}
.nl .pt-s{fill:var(--acc)}.nl .pt-e{fill:var(--ok)}
.nl .lab{fill:var(--acc);font-weight:700}

/* Ответы */
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opts.one{grid-template-columns:1fr}
.opt{display:flex;align-items:center;justify-content:center;gap:10px;min-height:68px;padding:12px 14px;border-radius:20px;background:var(--row);border:2px solid transparent;font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.25;text-align:center;transition:background .15s,border-color .15s,transform .1s;position:relative}
.opts.one .opt{font-family:var(--font-ui);font-weight:600;font-size:17px;justify-content:flex-start;text-align:left}
.opt .k{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:var(--font-ui);font-size:12px;font-weight:700;color:var(--muted);border:1.5px solid var(--line);border-radius:7px;width:22px;height:22px;display:grid;place-items:center}
.opts.one .opt .k{position:static;transform:none;flex:none}
.opt:hover{background:var(--row-hover)}
.opt:active{transform:scale(.98)}
.opt.sel{border-color:var(--acc);background:var(--acc-soft)}
.opt.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-t)}
.opt.bad{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-t)}
.opt .katex{font-size:1em}
.locked .opt,.locked .slot,.locked .key{pointer-events:none}

.chain{display:flex;flex-direction:column;gap:8px}
.chain .slot{min-height:56px;font-size:28px}
.single .slot{min-height:64px}
.crow{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,150px);gap:12px;align-items:center}
.crow .lab{font-size:clamp(20px,3.4vw,26px);text-align:right;font-weight:600}
.slot{min-height:68px;border-radius:20px;background:var(--input);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--font-display);font-weight:500;font-size:32px;font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s;cursor:text;width:100%;min-width:0;padding:6px 10px}
.slot.focus{border-color:var(--acc)}
.slot.focus .v::after{content:"";display:inline-block;width:2px;height:.95em;margin-left:3px;background:var(--acc);vertical-align:-.1em;animation:blink 1s steps(1) infinite}
.slot.empty .v::before{content:"?";color:var(--muted);opacity:.5}
.slot.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-t)}
.slot.bad{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-t)}
@keyframes blink{50%{opacity:0}}
.single{display:flex;justify-content:center}
.single .slot{max-width:240px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(360px,100%);margin:2px auto 0}
.key{height:clamp(42px,6.2vh,56px);border-radius:16px;background:var(--row);font-family:var(--font-display);font-weight:500;font-size:22px;display:grid;place-items:center;transition:background .1s,transform .08s;user-select:none;-webkit-user-select:none}
.key:hover{background:var(--row-hover)}
.key:active{transform:scale(.94);background:var(--active)}
.key svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Нижняя панель */
.lfb{flex:none;padding:14px 16px max(16px,env(safe-area-inset-bottom));border-top:1px solid transparent;transition:background .3s,border-color .3s;-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%)}
.lfb.neutral{background:var(--glass);border-top-color:var(--glass-border)}
.lfb.ok{background:var(--ok-bg);border-top-color:var(--ok)}
.lfb.bad{background:var(--bad-bg);border-top-color:var(--bad)}
.fb-in{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.fb-head{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px}
.fb-head .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}
.fb-head .ic svg{width:20px;height:20px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lfb.ok .fb-head{color:var(--ok-t)}.lfb.ok .ic{background:var(--ok)}
.lfb.bad .fb-head{color:var(--bad-t)}.lfb.bad .ic{background:var(--bad)}
.fb-sub{font-size:14px;color:var(--text);opacity:.85;margin-top:-6px}
.explain{background:var(--row);border-radius:18px;padding:12px 16px;display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.55;color:var(--text)}
.explain .katex{font-size:1.05em}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acts .btn{padding:13px 12px;font-size:14px}
.acts .wide,.acts .btn:last-child:nth-child(odd){grid-column:1/-1}
.linkbtn{font-size:13px;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:3px;align-self:center;padding:4px 8px}
.linkbtn:hover{color:var(--text)}
.pulse-hl{box-shadow:0 0 0 3px var(--acc)}

/* Итог урока */
.done-card{align-items:center;text-align:center;gap:18px}
.done-card h2{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,5vw,32px);letter-spacing:-.02em}
.big-stars{display:flex;gap:10px;justify-content:center}
.big-stars svg{width:62px;height:62px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.big-stars .on{fill:#ffc53d;animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
.big-stars .off{fill:var(--track)}
.big-stars svg:nth-child(2) .on{animation-delay:.18s}.big-stars svg:nth-child(3) .on{animation-delay:.36s}
@keyframes pop{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.stat-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.stat{padding:12px 18px;border-radius:18px;background:var(--row);min-width:104px}
.stat b{display:block;font-family:var(--font-display);font-weight:500;font-size:22px}
.stat span{font-size:12px;color:var(--muted);font-weight:600}

/* ---------- Окна, подсказки ---------- */
.sheet-root{position:fixed;inset:0;z-index:100;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet-root.open{display:flex}
.sheet{width:min(560px,100%);max-height:86dvh;overflow:auto;border-radius:30px 30px 0 0;background:var(--glass-strong);padding:22px 22px max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;animation:up .26s cubic-bezier(.2,.8,.2,1)}
@media (min-width:700px){.sheet-root{align-items:center;padding:20px}.sheet{border-radius:30px}}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{font-family:var(--font-display);font-weight:500;font-size:19px;letter-spacing:-.02em}
.sheet .sub{font-size:14px;color:var(--muted);line-height:1.5}
.hintbox{display:flex;flex-direction:column;gap:10px}
.hint{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:12px 14px;border-radius:18px;background:var(--row);font-size:16px;line-height:1.5}
.hint .n{width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
.hint .nl{grid-column:1/-1}
.row-set{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:18px;background:var(--row);font-weight:600;font-size:15px}
.row-set small{display:block;color:var(--muted);font-weight:500;font-size:12px;margin-top:2px;line-height:1.4}
.seg{display:flex;background:var(--track);border-radius:14px;padding:3px;gap:3px}
.seg button{padding:8px 14px;border-radius:11px;font-weight:700;font-size:13px}
.seg button.on{background:var(--btn);color:var(--btn-ink)}
.switch{position:relative;width:50px;height:30px;border-radius:30px;background:var(--track);transition:background .2s;flex:none}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .2s}
.switch.on{background:var(--ok)}.switch.on::after{transform:translateX(20px)}
.toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-30px);z-index:120;padding:12px 20px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:all .3s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.empty{color:var(--muted);text-align:center;padding:40px 0}

/* ---------- Телефон ---------- */
@media (max-width:640px){
  .app{padding:10px 12px max(28px,env(safe-area-inset-bottom))}
  .top{top:6px;margin-bottom:14px;padding:6px 8px 6px 12px}
  .brand-t{display:none}
  .icon-btn{width:42px;height:42px;border-radius:14px}
  .chip{padding:7px 10px;font-size:13px}
  .subjects{grid-template-columns:1fr}
  .scard{min-height:0}
  .resume{grid-template-columns:48px minmax(0,1fr) auto;padding:12px}
  .resume .tile{width:48px;height:48px}
  .resume .go{padding:10px 14px}
  .lbar{gap:10px;padding-left:12px;padding-right:12px}
  .lscroll{padding:4px 12px 12px}
  .qcard{border-radius:28px}
  .opt{min-height:62px;font-size:22px}
  .crow{grid-template-columns:minmax(0,1fr) 112px}
  .qcard{padding:18px 18px;gap:10px}
  .keypad{gap:7px}
  .lmain{gap:10px}
  .acts{grid-template-columns:1fr}
  .acts .btn{padding:12px}
}
@media (max-height:700px){.qcard{padding:16px 18px;gap:10px}.qtext.big{padding:2px 0}.key{height:44px}}