/* Оформление Mini App. Токены те же, что в прототипе: стекло поверх цветной
   подложки. Отличие одно — здесь нет витрины, экран занят приложением целиком. */
:root{
  --bg:#D6E1F3;
  --blob-1:#3E8FE8; --blob-2:#F2879F; --blob-3:#3FC9AF; --blob-4:#9C87EC;
  --blob-a:.82; --grid:rgba(18,36,66,.07); --veil:rgba(255,255,255,.30);
  --glass:rgba(255,255,255,.56); --glass-2:rgba(255,255,255,.40); --glass-3:rgba(255,255,255,.74);
  --glass-brd:rgba(255,255,255,.72); --glass-hi:rgba(255,255,255,.9);
  --tile-1:rgba(255,255,255,.62); --tile-2:rgba(255,255,255,.16); --tile-hi:rgba(255,255,255,.6);
  --glass-sh:0 1px 2px rgba(16,32,60,.05), 0 20px 44px -24px rgba(16,32,60,.34);
  --blur:18px; --fig:rgba(255,255,255,.9);
  --ink:#0E1A2E; --ink-2:#485672; --ink-3:#7886A0;
  --rule:rgba(18,36,66,.13); --rule-2:rgba(18,36,66,.07);
  --blue:#1B55BE; --blue-soft:rgba(27,85,190,.13);
  --red:#AC2739; --red-soft:rgba(172,39,57,.13);
  --green:#1D7742; --green-soft:rgba(29,119,66,.14);
  --gold:#96670E; --gold-soft:rgba(150,103,14,.15);
  --n-now:#2E9E57; --n-done:#D9A02A; --on-accent:#FFFFFF;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{
  --bg:#060B16;
  --blob-1:#1F55B8; --blob-2:#8A2E63; --blob-3:#0E6B74; --blob-4:#472F97;
  --blob-a:.9; --grid:rgba(255,255,255,.045); --veil:rgba(4,8,18,.20);
  --glass:rgba(255,255,255,.062); --glass-2:rgba(255,255,255,.038); --glass-3:rgba(255,255,255,.10);
  --glass-brd:rgba(255,255,255,.14); --glass-hi:rgba(255,255,255,.15);
  --tile-1:rgba(255,255,255,.17); --tile-2:rgba(255,255,255,.04); --tile-hi:rgba(255,255,255,.22);
  --glass-sh:0 1px 2px rgba(0,0,0,.4), 0 20px 44px -24px rgba(0,0,0,.75);
  --fig:rgba(224,234,248,.93);
  --ink:#E9EFFA; --ink-2:#9CACC6; --ink-3:#6D7E9B;
  --rule:rgba(255,255,255,.13); --rule-2:rgba(255,255,255,.07);
  --blue:#7FB2FF; --blue-soft:rgba(127,178,255,.17);
  --red:#F0919C; --red-soft:rgba(240,145,156,.17);
  --green:#5FD182; --green-soft:rgba(95,209,130,.16);
  --gold:#EFBB5B; --gold-soft:rgba(239,187,91,.16);
  --n-now:#3FB56B; --n-done:#E0A83E; --on-accent:#08111F;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{background:var(--bg); height:100%}
body{
  margin:0; height:100%; overflow:hidden; background:transparent;
  color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; opacity:var(--blob-a);
  background:
    radial-gradient(70vw 70vw at  6% -8%, var(--blob-1), transparent 64%),
    radial-gradient(60vw 60vw at 98% 16%, var(--blob-2), transparent 64%),
    radial-gradient(75vw 75vw at 84% 92%, var(--blob-3), transparent 64%),
    radial-gradient(58vw 58vw at -4% 86%, var(--blob-4), transparent 64%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--veil);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.18; margin:0; text-wrap:balance}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ── каркас экрана ─────────────────────────────── */
/* Отступы задаём по отдельности: одна невалидная env() в сокращённой записи
   убивает всё правило, и шапка начинает вылезать за экран. */
/* Сначала vh, потом dvh: в старом webview dvh просто не применится,
   и экран останется рабочим вместо нулевой высоты. */
#app{height:100vh; height:100dvh; display:flex; flex-direction:column; max-width:560px; margin:0 auto;
  padding-left:12px; padding-right:12px; overflow:hidden}
@supports (padding:max(0px)){
  #app{padding-left:max(12px, env(safe-area-inset-left));
       padding-right:max(12px, env(safe-area-inset-right))}
}
.top{display:flex; align-items:center; gap:12px; padding:12px 4px; min-width:0}
.top > .bar{min-width:40px}
.top > .hearts, .top > .step, .top > .xp{flex:none}
.iconbtn{flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  cursor:pointer; border:1px solid var(--rule); background:var(--glass-2); color:var(--ink-2); padding:0}
.iconbtn:disabled{opacity:.35}
.iconbtn .ic{width:16px; height:16px}
.bar{flex:1; height:8px; border-radius:99px; background:var(--rule-2); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(16,32,60,.14)}
.bar i{display:block; height:100%; border-radius:99px; background:var(--blue);
  box-shadow:0 0 12px -2px var(--blue); transition:width .4s cubic-bezier(.2,.8,.2,1)}
.step{flex:none; font-family:var(--mono); font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.hearts{display:inline-flex; gap:3px; align-items:center}
.hearts .ic{width:14px; height:14px; color:var(--red)}
.hearts .off{opacity:.24}
.xp{font-family:var(--mono); font-size:12px; color:var(--gold); font-variant-numeric:tabular-nums}

.body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:6px 4px 12px; -webkit-overflow-scrolling:touch}
.foot{flex:none; padding:10px 4px max(12px, env(safe-area-inset-bottom))}
.go{width:100%; font-weight:600; font-size:16px; padding:15px; border-radius:15px; border:0;
  cursor:pointer; background:var(--blue); color:var(--on-accent); transition:.16s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 10px 24px -12px var(--blue)}
.go:disabled{opacity:.42; box-shadow:none}
.go.green{background:var(--green); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 10px 24px -12px var(--green)}
.go.red{background:var(--red); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 10px 24px -12px var(--red)}
.link{display:block; width:100%; margin-top:10px; background:none; border:0; cursor:pointer;
  font-size:13px; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px}

/* ── общие блоки ───────────────────────────────── */
.center{min-height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:2px; padding:18px 12px}
.logo{width:100%; max-width:172px; height:auto; color:var(--blue);
  filter:drop-shadow(0 14px 30px rgba(27,85,190,.28))}
.center h1{font-size:24px; margin-top:22px; max-width:19ch}
.center h2{font-size:23px; margin-top:10px}
.center p{margin:12px 0 0; font-size:15px; color:var(--ink-2); max-width:32ch}
.hint{margin:12px 2px 0; font-size:13px; color:var(--ink-3); line-height:1.5}
.q{font-family:var(--serif); font-size:24px; line-height:1.2; margin:10px 0 22px; text-wrap:balance}
.qnum{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:12px; display:flex; justify-content:space-between; gap:10px}
/* дробям нужен запас по высоте строки, иначе числитель наезжает на строку выше */
.stmt{font-family:var(--serif); font-size:18px; line-height:1.75; overflow-wrap:break-word}
.stmt .fr{font-size:.92em}
.fig{margin:16px 0; padding:10px 8px; background:var(--fig); border:1px solid var(--glass-brd);
  border-radius:12px; overflow-x:auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.fig svg{display:block; width:100%; height:auto; min-width:440px}

.opts{display:grid; gap:10px; margin-top:18px}
.opts.c2{grid-template-columns:1fr 1fr}
.opts.c3{grid-template-columns:repeat(3,1fr)}
.opts.c4{grid-template-columns:repeat(4,1fr)}
.opt{display:flex; align-items:center; gap:11px; padding:14px 15px; border-radius:14px; text-align:left;
  border:1px solid var(--rule); background:var(--glass-2); cursor:pointer; font-size:16px;
  box-shadow:inset 0 1px 0 var(--glass-hi); transition:.14s ease}
.opt[aria-pressed="true"]{border-color:var(--blue); background:var(--blue-soft)}
.opt.ok{border-color:var(--green); background:var(--green-soft)}
.opt.bad{border-color:var(--red); background:var(--red-soft)}
.opt .key{flex:none; width:25px; height:25px; border-radius:8px; border:1px solid var(--rule);
  display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.opt.ok .key{border-color:var(--green); color:var(--green)}
.opt.bad .key{border-color:var(--red); color:var(--red)}
.opt.mid{justify-content:center; text-align:center}
.opt.big{font-family:var(--serif); font-size:30px; padding:16px 0 14px; display:block; text-align:center}
.opt.big em{display:block; font-family:var(--sans); font-size:11px; font-style:normal;
  color:var(--ink-3); margin-top:4px}
.opt[aria-pressed="true"] em{color:var(--blue)}
.field{width:100%; font-size:19px; padding:15px 16px; border-radius:14px; margin-top:18px;
  border:1px solid var(--rule); background:var(--glass-2); color:var(--ink); font-family:var(--mono);
  box-shadow:inset 0 1px 3px rgba(16,32,60,.08)}
.field.text{font-family:var(--sans)}
.field:focus{border-color:var(--blue); outline:none}
/* ± живёт внутри поля: на телефоне цифровая клавиатура минуса не даёт */
.answer{position:relative; margin-top:18px}
.answer .field{margin-top:0; padding-right:62px}
.signbtn{position:absolute; top:6px; right:6px; bottom:6px; width:48px; border-radius:10px;
  border:1px solid var(--rule); background:var(--glass-3); color:var(--ink-2);
  font-family:var(--mono); font-size:22px; line-height:1; cursor:pointer}
.signbtn:active{background:var(--blue-soft); border-color:var(--blue); color:var(--blue)}
.signbtn:disabled{opacity:.4}

.tip{margin-top:12px; padding:12px 14px; border-left:3px solid var(--gold); background:var(--gold-soft);
  border-radius:0 12px 12px 0; font-size:15px; line-height:1.5}
.tip b{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); margin-bottom:4px}
.verdict{border-radius:16px; padding:16px; margin-top:4px}
.verdict.win{background:var(--green-soft); border:1px solid var(--green)}
.verdict.lose{background:var(--red-soft); border:1px solid var(--red)}
.verdict h3{font-family:var(--sans); font-size:16px; font-weight:700; margin-bottom:6px}
.verdict.win h3{color:var(--green)} .verdict.lose h3{color:var(--red)}
.verdict .sol{font-family:var(--serif); font-size:15px; line-height:1.55; color:var(--ink-2)}

/* ── курс: номера ──────────────────────────────── */
.units{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.ucard{display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:14px; border-radius:18px; position:relative; border:1px solid var(--glass-brd);
  background:var(--glass-2); backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-sh); transition:transform .12s ease}
.ucard:active:not(:disabled){transform:scale(.985)}
.ucard.off{cursor:default; opacity:.5}
.uic{flex:none; width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(152deg, color-mix(in srgb,var(--u) 88%,#fff), var(--u));
  border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px -10px var(--u)}
.uic .ic{width:23px; height:23px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
.umain{flex:1; min-width:0; display:block}
.umain > b{display:flex; align-items:baseline; gap:8px; font-size:16px; font-weight:600}
.umain > b em{flex:none; font-style:normal; font-family:var(--mono); font-size:11px; padding:2px 7px;
  border-radius:99px; color:var(--u); background:color-mix(in srgb,var(--u) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--u) 34%,transparent)}
.usub{display:block; font-size:12.5px; color:var(--ink-3); margin:3px 0 9px}
.ubar{display:block; height:6px; border-radius:99px; background:var(--rule-2); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(16,32,60,.12)}
.ubar i{display:block; height:100%; border-radius:99px; background:var(--u,var(--blue));
  transition:width .4s cubic-bezier(.2,.8,.2,1)}
.unote{display:block; font-size:12px; color:var(--ink-2); margin-top:7px}
.unote u{text-decoration:none; font-weight:600}
.ucrown{position:absolute; top:10px; right:12px; color:var(--gold)}
.ucrown .ic{width:17px; height:17px}
.uhead{display:flex; align-items:center; gap:12px; margin:2px 0 16px}
.uhead .itile{width:44px; height:44px; border-radius:15px; color:var(--u)}
.uhead b{display:flex; align-items:baseline; gap:8px; font-family:var(--serif); font-size:20px}
.uhead b em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--u)}
.uhead > div > span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}

.banner{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:13px 14px; margin-bottom:14px; border-radius:16px; border:1px solid var(--blue);
  background:var(--blue-soft); box-shadow:inset 0 1px 0 var(--glass-hi)}
.banner b{display:block; font-size:14.5px} .banner span{font-size:12.5px; color:var(--ink-2)}
.banner div{flex:1; min-width:0}
.banner .itile{color:var(--blue)}
.ic.flip{transform:rotate(180deg); color:var(--ink-3)}

.p2{margin-top:22px; padding:16px; border-radius:18px; border:1px dashed var(--rule);
  background:var(--glass-2)}
.p2h{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.p2h b{display:block; font-size:15px} .p2h span{font-size:12.5px; color:var(--ink-3)}
.p2 .hint{margin-top:10px}

/* ── строки: подтемы, сводный тест, варианты ───── */
.rows{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:15px; border:1px solid var(--rule); background:var(--glass-2);
  box-shadow:inset 0 1px 0 var(--glass-hi); transition:.14s ease}
.row:active:not(:disabled){transform:scale(.99)}
.row:disabled{cursor:default; opacity:.48}
.rn{flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; color:var(--ink-3);
  border:1px solid var(--rule); background:var(--glass-3)}
.rn .ic{width:15px; height:15px}
.rmain{flex:1; min-width:0}
.rmain b{display:block; font-size:15px; font-weight:600}
.rmain span{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}
.rst{flex:none; font-size:11px; font-family:var(--mono); color:var(--ink-3); text-align:right;
  max-width:88px; line-height:1.3}
.row.done{border-color:var(--green); background:var(--green-soft)}
.row.done .rn{color:var(--green); border-color:var(--green)} .row.done .rst{color:var(--green)}
.row.review, .row.stale{border-color:var(--gold); background:var(--gold-soft)}
.row.review .rn, .row.stale .rn{color:var(--gold); border-color:var(--gold)}
.row.review .rst, .row.stale .rst{color:var(--gold)}
.row.gap{border-color:var(--red); background:var(--red-soft)}
.row.gap .rn{color:var(--red); border-color:var(--red)} .row.gap .rst{color:var(--red)}
.note{display:flex; align-items:center; gap:12px; padding:13px 14px; margin-bottom:14px;
  border-radius:16px; border:1px solid var(--rule); background:var(--glass-2)}
.note b{display:block; font-size:14.5px} .note span{font-size:12.5px; color:var(--ink-2)}

/* ── теория ────────────────────────────────────── */
.video{display:flex; align-items:center; gap:12px; padding:13px 14px; margin-bottom:18px;
  border-radius:15px; border:1px solid var(--rule); background:var(--glass-3)}
.video .itile{color:var(--red)}
.video b{display:block; font-size:14.5px} .video span{font-size:12px; color:var(--ink-3)}
.video.off{opacity:.55}
.theory{font-size:16px; line-height:1.62; color:var(--ink)}
.theory h3{font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); margin:24px 0 8px}
.theory p{margin:0 0 12px} .theory ul{margin:0 0 12px; padding-left:20px}
.theory li{margin-bottom:6px}
.theory .m.disp{font-size:19px; margin:16px 0}
/* Обрезаем теорию, а не прячем: ученик должен видеть, за что платит. */
.theory.fade{max-height:190px; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 42%, transparent); mask-image:linear-gradient(#000 42%, transparent)}
.paywall{margin-top:-14px; padding:20px 18px; border-radius:18px; text-align:center;
  border:1px solid var(--glass-brd); background:var(--glass-3);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-sh)}
.paywall .itile{margin:0 auto 12px; width:42px; height:42px; border-radius:14px; color:var(--gold)}
.paywall b{display:block; font-family:var(--serif); font-size:19px; font-weight:600}
.paywall p{margin:8px auto 16px; font-size:14px; color:var(--ink-2); max-width:34ch}

/* ── нижние вкладки ────────────────────────────── */
.tabs{flex:none; display:flex; gap:6px; padding:8px 6px max(10px, env(safe-area-inset-bottom))}
.tab{flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 4px; border-radius:14px; border:1px solid transparent; background:none; cursor:pointer;
  color:var(--ink-3); font-size:11px}
.tab .ic{width:22px; height:22px}
.tab.on{color:var(--blue); border-color:var(--glass-brd); background:var(--glass-2);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
.tab .dot{position:absolute; top:7px; right:calc(50% - 17px); width:7px; height:7px; border-radius:50%;
  background:var(--red); box-shadow:0 0 0 2px var(--bg)}

/* ── портрет по номерам ────────────────────────── */
.grid14{display:grid; grid-template-columns:repeat(5,1fr); gap:7px}
.cell{position:relative; overflow:hidden; padding:11px 0 13px; border-radius:12px; cursor:pointer;
  border:1px solid var(--rule); background:var(--glass-2); color:var(--ink-2)}
.cell b{font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums}
.cell i{position:absolute; left:0; bottom:0; height:3px; background:currentColor}
.cell:disabled{cursor:default; opacity:.4}
.cell.done{border-color:var(--green); background:var(--green-soft); color:var(--green)}
.cell.part{border-color:var(--blue); background:var(--blue-soft); color:var(--blue)}
.cell.review{border-color:var(--gold); background:var(--gold-soft); color:var(--gold)}
.cell.gap{border-color:var(--red); background:var(--red-soft); color:var(--red)}
.legend{display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; margin-top:10px;
  font-size:11px; color:var(--ink-3)}
.legend .l{width:9px; height:9px; border-radius:3px; border:1px solid var(--rule); background:var(--glass-2)}
.legend .l.done{background:var(--green)} .legend .l.part{background:var(--blue)}
.legend .l.review{background:var(--gold)} .legend .l.gap{background:var(--red)}

/* ── портрет и итоги ───────────────────────────── */
.score{display:flex; align-items:baseline; gap:10px; margin:2px 0 10px}
.score b{font-family:var(--mono); font-size:46px; line-height:1; letter-spacing:-.03em; color:var(--blue)}
.score span{font-size:14px; color:var(--ink-2)}
.areas{display:flex; flex-direction:column; gap:12px; margin-top:18px}
.ah{display:flex; justify-content:space-between; align-items:baseline; font-size:14px; margin-bottom:5px}
.ah b{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums}
.abar{height:8px; border-radius:99px; background:var(--rule-2); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(16,32,60,.12)}
.abar i{display:block; height:100%; border-radius:99px}
.hi{color:var(--green)} .mid{color:var(--gold)} .lo{color:var(--red)}
.abar i.hi{background:var(--green)} .abar i.mid{background:var(--gold)} .abar i.lo{background:var(--red)}
.block{margin-top:22px}
.block h4{margin:0 0 10px; font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.trow{display:flex; align-items:center; gap:10px; padding:11px 13px; margin-bottom:8px; font-size:15px;
  border-radius:12px; background:var(--red-soft); border:1px solid var(--rule)}
.trow .tno{font-family:var(--mono); font-size:11px; color:var(--red); flex:none}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{font-size:13px; padding:6px 11px; border-radius:99px; background:var(--green-soft);
  border:1px solid var(--rule); color:var(--ink-2)}
.chip.warn{background:var(--gold-soft)}
.trow.warn{background:var(--gold-soft)}
.trow.warn .tno{color:var(--gold)}
.pills{display:flex; gap:9px; margin-top:20px; flex-wrap:wrap; justify-content:center}
.pill{padding:8px 14px; border-radius:99px; font-family:var(--mono); font-size:13px;
  font-variant-numeric:tabular-nums; border:1px solid var(--rule); background:var(--glass-2)}
.pill.xp{color:var(--gold); border-color:var(--gold); background:var(--gold-soft)}
.pill.acc{color:var(--green); border-color:var(--green); background:var(--green-soft)}
.big-ic .ic{width:64px; height:64px; filter:drop-shadow(0 10px 20px rgba(6,16,34,.35))}

/* ── иконки ────────────────────────────────────── */
.ic{display:block; flex:none; width:20px; height:20px; overflow:visible}
.itile{position:relative; flex:none; width:34px; height:34px; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; color:var(--blue);
  background:linear-gradient(152deg, var(--tile-1), var(--tile-2));
  border:1px solid var(--glass-brd);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 5px 12px -8px rgba(6,16,34,.75)}
.itile::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(78% 52% at 24% 6%, var(--tile-hi), transparent 62%)}
.itile .ic{width:19px; height:19px}

/* ── математика ────────────────────────────────── */
.m{font-family:var(--serif)} .m i{font-style:italic}
.m.disp{display:block; text-align:center; margin:12px 0; font-size:18px}
.fr,.sq{white-space:nowrap}
.fr{display:inline-flex; flex-direction:column; vertical-align:-0.52em; text-align:center; margin:0 .16em}
.fr-n{border-bottom:1.2px solid currentColor; padding:0 .28em; line-height:1.25}
.fr-d{padding:0 .28em; line-height:1.25}
.sq{display:inline-flex; align-items:flex-start}
.sq-r{font-size:1.06em; line-height:1}
.sq-b{border-top:1.2px solid currentColor; padding:.08em .12em 0 .06em; margin-top:.1em}
.m sup{font-size:.72em; vertical-align:.5em} .m sub{font-size:.72em; vertical-align:-.22em}

/* ── экран аварии ──────────────────────────────── */
.crash{padding:28px 20px; display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.crash h2{font-size:20px}
.crash pre{width:100%; margin:0; padding:12px 14px; border-radius:12px; overflow-x:auto;
  font-family:var(--mono); font-size:12px; line-height:1.5; white-space:pre-wrap;
  color:var(--red); background:var(--red-soft); border:1px solid var(--rule)}