/* ============================================================
   Soft-modern: мягкая многослойная глубина вместо жёстких теней,
   волосяные границы, крупные радиусы, спокойная нейтральная база
   и один индиговый акцент. Зелёный и розовый оставлены смыслу —
   «верно» и «неверно», — поэтому в бренд они не идут.

   Всё держится на токенах: тёмная тема меняет только их.
   ============================================================ */

:root{
  /* ---------- плоскости ---------- */
  --bg:#F6F7FB;
  --surface:#FFFFFF;
  --surface-2:#F4F5F9;            /* вложенные блоки, инпуты, «колодцы» */
  --surface-3:#EDEFF5;            /* ховер по вложенным блокам */
  --track:#E3E6EF;                /* дорожка прогресса и сегментов */
  --raised:#FFFFFF;               /* приподнятый слой поверх дорожки */

  /* ---------- границы ---------- */
  --line:rgba(15,23,42,.07);      /* волосяная — основная */
  --line-2:rgba(15,23,42,.12);    /* заметная — инпуты, разделители таблиц */
  --line-3:rgba(15,23,42,.20);    /* активный инпут, пунктир */

  /* ---------- текст ---------- */
  --ink:#0F172A;
  --ink-2:#526077;
  --ink-3:#8E9AAE;

  /* ---------- акцент ---------- */
  --accent:#5B5BF0;
  --accent-2:#4A46DC;
  --accent-3:#3F3AC4;
  --accent-soft:#ECECFE;          /* заливка под акцентные плашки */
  --accent-soft-2:#DEDDFD;
  --accent-ink:#3B36B8;           /* акцентный текст на светлой плашке */
  --on-accent:#FFFFFF;
  --grad:linear-gradient(135deg,#6366F1 0%,#7C5CF5 55%,#8B5CF6 100%);
  --grad-soft:linear-gradient(135deg,#EEF0FF 0%,#F3EDFF 100%);

  /* ---------- смысловые ---------- */
  --good:#079669;
  --good-ink:#046A4C;
  --good-soft:#DEF7EC;
  --good-line:rgba(7,150,105,.22);

  --bad:#E1364C;
  --bad-ink:#B21F35;
  --bad-soft:#FFE7EA;
  --bad-line:rgba(225,54,76,.22);

  --warn:#C2761B;
  --warn-ink:#96590E;
  --warn-soft:#FEF3D8;
  --warn-line:rgba(194,118,27,.22);

  --info:#0E7FC4;
  --info-ink:#0A5F94;
  --info-soft:#E2F1FC;
  --info-line:rgba(14,127,196,.22);

  /* ---------- палитра плиток ---------- */
  --c0-bg:#EEEFFE; --c0-fg:#4F46E5;
  --c1-bg:#E3F1FD; --c1-fg:#0B76BD;
  --c2-bg:#DFF6EC; --c2-fg:#068A62;
  --c3-bg:#FDEEDC; --c3-fg:#B4650F;
  --c4-bg:#FCE9F1; --c4-fg:#C0397A;

  /* ---------- глубина ---------- */
  --sh-1:0 1px 2px rgba(16,24,40,.05), 0 1px 1px rgba(16,24,40,.03);
  --sh-2:0 1px 2px rgba(16,24,40,.05), 0 6px 16px -6px rgba(16,24,40,.10);
  --sh-3:0 1px 3px rgba(16,24,40,.06), 0 14px 32px -12px rgba(16,24,40,.16);
  --sh-4:0 2px 6px rgba(16,24,40,.06), 0 28px 60px -22px rgba(16,24,40,.24);
  --sh-accent:0 4px 14px -4px rgba(91,91,240,.45), 0 1px 2px rgba(16,24,40,.08);
  --sh-accent-hi:0 8px 22px -6px rgba(91,91,240,.52), 0 1px 2px rgba(16,24,40,.08);
  --ring:0 0 0 4px rgba(91,91,240,.16);   /* «гало» вокруг активного элемента */
  --inset:inset 0 1px 0 rgba(255,255,255,0);  /* блик — только в тёмной теме */

  /* ---------- геометрия и движение ---------- */
  --r-xl:26px;
  --r:20px;
  --r-sm:14px;
  --r-xs:10px;

  --ease:cubic-bezier(.32,.72,0,1);       /* «пружинка» без перелёта */
  --ease-out:cubic-bezier(.22,1,.36,1);

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-display:"Manrope","Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  color-scheme:light;
}

/* ------------------------------------------------------------
   Тёмная тема. В темноте тень не читается — роль границы берут
   на себя полупрозрачные белые линии и верхний внутренний блик.
   ------------------------------------------------------------ */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0E14;
    --surface:#151A24;
    --surface-2:#1B212D;
    --surface-3:#232A38;
    --track:rgba(255,255,255,.10);
    --raised:#2C3444;

    --line:rgba(255,255,255,.07);
    --line-2:rgba(255,255,255,.11);
    --line-3:rgba(255,255,255,.20);

    --ink:#E9ECF3;
    --ink-2:#9BA6BA;
    --ink-3:#6B778C;

    --accent:#7C7CFB;
    --accent-2:#8E8EFC;
    --accent-3:#A5A5FD;
    --accent-soft:rgba(124,124,251,.15);
    --accent-soft-2:rgba(124,124,251,.24);
    --accent-ink:#B4B4FE;
    --on-accent:#0B0E14;
    --grad:linear-gradient(135deg,#7C7CFB 0%,#9273FB 55%,#A78BFA 100%);
    --grad-soft:linear-gradient(135deg,rgba(124,124,251,.16) 0%,rgba(167,139,250,.16) 100%);

    --good:#34D399;
    --good-ink:#6EE7B7;
    --good-soft:rgba(52,211,153,.14);
    --good-line:rgba(52,211,153,.30);

    --bad:#FB7185;
    --bad-ink:#FDA4AF;
    --bad-soft:rgba(251,113,133,.14);
    --bad-line:rgba(251,113,133,.30);

    --warn:#FBBF24;
    --warn-ink:#FCD34D;
    --warn-soft:rgba(251,191,36,.13);
    --warn-line:rgba(251,191,36,.28);

    --info:#38BDF8;
    --info-ink:#7DD3FC;
    --info-soft:rgba(56,189,248,.13);
    --info-line:rgba(56,189,248,.28);

    --c0-bg:rgba(129,140,248,.16); --c0-fg:#A5B4FC;
    --c1-bg:rgba(56,189,248,.15);  --c1-fg:#7DD3FC;
    --c2-bg:rgba(52,211,153,.15);  --c2-fg:#6EE7B7;
    --c3-bg:rgba(251,146,60,.15);  --c3-fg:#FDBA74;
    --c4-bg:rgba(244,114,182,.15); --c4-fg:#F9A8D4;

    --sh-1:0 1px 2px rgba(0,0,0,.40);
    --sh-2:0 2px 6px rgba(0,0,0,.42), 0 8px 20px -10px rgba(0,0,0,.60);
    --sh-3:0 4px 10px rgba(0,0,0,.45), 0 18px 40px -16px rgba(0,0,0,.70);
    --sh-4:0 6px 16px rgba(0,0,0,.50), 0 34px 70px -26px rgba(0,0,0,.80);
    --sh-accent:0 4px 16px -4px rgba(124,124,251,.45);
    --sh-accent-hi:0 8px 26px -6px rgba(124,124,251,.55);
    --ring:0 0 0 4px rgba(124,124,251,.24);
    --inset:inset 0 1px 0 rgba(255,255,255,.05);

    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
    --bg:#0B0E14;
    --surface:#151A24;
    --surface-2:#1B212D;
    --surface-3:#232A38;
    --track:rgba(255,255,255,.10);
    --raised:#2C3444;

    --line:rgba(255,255,255,.07);
    --line-2:rgba(255,255,255,.11);
    --line-3:rgba(255,255,255,.20);

    --ink:#E9ECF3;
    --ink-2:#9BA6BA;
    --ink-3:#6B778C;

    --accent:#7C7CFB;
    --accent-2:#8E8EFC;
    --accent-3:#A5A5FD;
    --accent-soft:rgba(124,124,251,.15);
    --accent-soft-2:rgba(124,124,251,.24);
    --accent-ink:#B4B4FE;
    --on-accent:#0B0E14;
    --grad:linear-gradient(135deg,#7C7CFB 0%,#9273FB 55%,#A78BFA 100%);
    --grad-soft:linear-gradient(135deg,rgba(124,124,251,.16) 0%,rgba(167,139,250,.16) 100%);

    --good:#34D399;
    --good-ink:#6EE7B7;
    --good-soft:rgba(52,211,153,.14);
    --good-line:rgba(52,211,153,.30);

    --bad:#FB7185;
    --bad-ink:#FDA4AF;
    --bad-soft:rgba(251,113,133,.14);
    --bad-line:rgba(251,113,133,.30);

    --warn:#FBBF24;
    --warn-ink:#FCD34D;
    --warn-soft:rgba(251,191,36,.13);
    --warn-line:rgba(251,191,36,.28);

    --info:#38BDF8;
    --info-ink:#7DD3FC;
    --info-soft:rgba(56,189,248,.13);
    --info-line:rgba(56,189,248,.28);

    --c0-bg:rgba(129,140,248,.16); --c0-fg:#A5B4FC;
    --c1-bg:rgba(56,189,248,.15);  --c1-fg:#7DD3FC;
    --c2-bg:rgba(52,211,153,.15);  --c2-fg:#6EE7B7;
    --c3-bg:rgba(251,146,60,.15);  --c3-fg:#FDBA74;
    --c4-bg:rgba(244,114,182,.15); --c4-fg:#F9A8D4;

    --sh-1:0 1px 2px rgba(0,0,0,.40);
    --sh-2:0 2px 6px rgba(0,0,0,.42), 0 8px 20px -10px rgba(0,0,0,.60);
    --sh-3:0 4px 10px rgba(0,0,0,.45), 0 18px 40px -16px rgba(0,0,0,.70);
    --sh-4:0 6px 16px rgba(0,0,0,.50), 0 34px 70px -26px rgba(0,0,0,.80);
    --sh-accent:0 4px 16px -4px rgba(124,124,251,.45);
    --sh-accent-hi:0 8px 26px -6px rgba(124,124,251,.55);
    --ring:0 0 0 4px rgba(124,124,251,.24);
    --inset:inset 0 1px 0 rgba(255,255,255,.05);

    color-scheme:dark;
}

/* ============================================================
   БАЗА
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{height:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:var(--font);
  font-size:16px;
  color:var(--ink);
  background:var(--bg);
  min-height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:0 18px calc(48px + env(safe-area-inset-bottom));
  touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;                /* страница никогда не едет вбок */
}

/* Мягкое свечение акцента за шапкой: даёт фону глубину, но не мешает
   читать — поэтому фиксировано вверху и не перехватывает клики. */
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:520px;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(120% 100% at 12% -10%, rgba(99,102,241,.13) 0%, transparent 62%),
    radial-gradient(90% 90% at 92% -18%, rgba(168,85,247,.10) 0%, transparent 60%);
}

.app{width:min(780px,100%);flex:1;display:flex;flex-direction:column;position:relative;z-index:1}

/* ---------- типографика ---------- */
.h1{
  font-family:var(--font-display);
  font-size:clamp(30px,7vw,42px);font-weight:800;
  letter-spacing:-.03em;line-height:1.08;text-wrap:balance;
}
.sub{font-size:15.5px;color:var(--ink-2);margin-top:9px;line-height:1.55;text-wrap:pretty}
.head{margin-bottom:26px}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;
  padding:6px 13px 6px 10px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:12px;font-weight:700;letter-spacing:.01em;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft-2);
}

/* ---------- кнопка «назад» ---------- */
.back{
  display:inline-flex;align-items:center;gap:5px;margin-bottom:18px;
  padding:8px 15px 8px 11px;border:1px solid var(--line);border-radius:99px;
  background:var(--surface);color:var(--ink-2);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:var(--sh-1),var(--inset);
  transition:color .18s var(--ease),background .18s var(--ease),
             box-shadow .18s var(--ease),transform .18s var(--ease);
}
.back:hover{color:var(--ink);background:var(--surface);box-shadow:var(--sh-2),var(--inset);transform:translateY(-1px)}
.back:active{transform:translateY(0) scale(.98)}

/* ============================================================
   ГЛАВНЫЙ ЭКРАН: герой и сводка
   ============================================================ */
.hero{margin-bottom:24px}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.stat{
  padding:15px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);box-shadow:var(--sh-1),var(--inset);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease);
}
.stat:hover{box-shadow:var(--sh-2),var(--inset);transform:translateY(-2px)}
.stat-n{
  font-family:var(--font-display);
  font-size:24px;font-weight:800;line-height:1.05;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.stat-l{font-size:11.5px;color:var(--ink-3);margin-top:5px;font-weight:500;line-height:1.35}

/* ---------- карточка «продолжить» ---------- */
.resume{
  position:relative;overflow:hidden;
  margin-top:20px;padding:20px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--sh-3),var(--inset);
}
/* цветной «корешок» слева — единственное место, где акцент занимает площадь */
.resume::before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--grad);
}
.resume-lbl{
  font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.resume-top{display:flex;align-items:center;gap:14px}
.resume-ico{
  flex:0 0 52px;height:52px;border-radius:16px;
  background:var(--grad-soft);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:inset 0 0 0 1px var(--line);
}
.resume-txt{min-width:0}
.resume-t{font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.015em}
.resume-s{font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.4}
.resume-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px;font-weight:500;color:var(--ink-2);margin:18px 0 8px;
}
.resume-bar b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;font-size:13.5px}
.resume-go{
  display:block;width:100%;margin-top:16px;padding:14px;
  border:none;border-radius:var(--r-sm);
  background:var(--grad);color:var(--on-accent);
  font:inherit;font-size:15px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  box-shadow:var(--sh-accent);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),filter .22s var(--ease);
}
.resume-go:hover{box-shadow:var(--sh-accent-hi);transform:translateY(-2px);filter:saturate(1.08)}
.resume-go:active{transform:translateY(0) scale(.985)}

/* ---------- полоса прогресса ---------- */
.bar{
  height:8px;width:100%;border-radius:99px;overflow:hidden;
  background:var(--track);
}
.bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--grad);
  transition:width .6s var(--ease);
}
.bar.thin{height:6px}

/* ============================================================
   ПЛИТКИ (ДЗ, режимы, задания)
   ============================================================ */
.hw-list,.mode-list,.ex-list{display:flex;flex-direction:column;gap:12px}

.list-sep{
  margin-top:16px;padding-left:2px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
}

.tile{
  position:relative;width:100%;
  display:flex;align-items:center;gap:15px;text-align:left;
  padding:17px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);
  font:inherit;cursor:pointer;
  box-shadow:var(--sh-1),var(--inset);
  transition:box-shadow .26s var(--ease),transform .26s var(--ease),
             border-color .26s var(--ease);
}
.tile:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-3),var(--inset);
  border-color:var(--line-2);
}
.tile:active{transform:translateY(-1px) scale(.995);transition-duration:.09s}
.tile:focus-visible{outline:none;box-shadow:var(--sh-2),var(--ring)}

/* карточки с ярлычками выравниваем по верху: в сетке они разной высоты,
   и вертикальное центрирование заставляло содержимое «плавать» */
.tile.with-bar{align-items:flex-start;flex-wrap:wrap}
.tile:has(.chip-row){align-items:flex-start}

.tile.locked{
  opacity:.62;cursor:not-allowed;box-shadow:none;
  background:transparent;border-style:dashed;border-color:var(--line-3);
}
.tile.locked:hover{transform:none;box-shadow:none;border-color:var(--line-3)}
/* у закрытого ДЗ иконка уже замок — цветная плашка и второй замок справа лишние */
.tile.locked .tile-ico{background:var(--surface-2);color:var(--ink-3);box-shadow:none}
.tile.locked .tile-lock{display:none}

.tile-ico{
  flex:0 0 50px;height:50px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;font-size:23px;
  background:var(--c0-bg);color:var(--c0-fg);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .26s var(--ease);
}
.tile:hover .tile-ico{transform:scale(1.06) rotate(-2deg)}
/* иконки раскрашены по кругу — индекс задаётся из кода */
.tile-ico.c0{background:var(--c0-bg);color:var(--c0-fg)}
.tile-ico.c1{background:var(--c1-bg);color:var(--c1-fg)}
.tile-ico.c2{background:var(--c2-bg);color:var(--c2-fg)}
.tile-ico.c3{background:var(--c3-bg);color:var(--c3-fg)}
.tile-ico.c4{background:var(--c4-bg);color:var(--c4-fg)}

.tile-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tile-title{font-family:var(--font-display);font-size:16.5px;font-weight:700;line-height:1.3;letter-spacing:-.015em}
.tile-desc{font-size:13px;color:var(--ink-2);line-height:1.5}
.tile-badge{
  align-self:flex-start;margin-bottom:4px;
  padding:3px 9px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
/* шеврон «›» и замок справа */
.tile-lock{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  font-size:19px;line-height:1;color:var(--ink-3);
  background:transparent;
  transition:background .26s var(--ease),color .26s var(--ease),transform .26s var(--ease);
}
.tile:hover .tile-lock{background:var(--accent-soft);color:var(--accent);transform:translateX(3px)}
.tile.locked .tile-lock{font-size:15px}
.tile.locked:hover .tile-lock{background:transparent;color:var(--ink-3);transform:none}

.tile-progress{
  flex:0 0 auto;font-size:12px;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  padding:5px 10px;border-radius:99px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);
}
.tile-progress.done{background:var(--good-soft);color:var(--good-ink);box-shadow:inset 0 0 0 1px var(--good-line)}

/* полоса прогресса внутри плитки ДЗ */
.tile-bar{width:100%;margin-top:13px}

/* ============================================================
   КАРТОЧКИ СЛОВ
   ============================================================ */
.screen-cards{display:flex;flex-direction:column;align-items:center;flex:1}
.cards-head{width:100%;display:flex;flex-direction:column;gap:13px}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.top-row .back{margin-bottom:0}
.counter{
  font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:var(--ink-3);
  padding:6px 12px;border-radius:99px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);
}
.counter b{color:var(--ink);font-weight:700}
.set-tag{
  font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:6px 12px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent-ink);
}
.set-tag:empty{display:none}

.stats{display:flex;gap:8px;justify-content:center;width:100%}
.pill{
  display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  padding:7px 13px;border-radius:99px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);
}
.pill b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.dot{width:8px;height:8px;border-radius:50%}
.dot.g{background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.dot.r{background:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}

/* ---------- сегментированный переключатель ---------- */
.seg{
  position:relative;display:flex;width:100%;gap:4px;padding:4px;
  border-radius:99px;background:var(--track);
}
.seg-b{
  flex:1;padding:9px 6px;border:none;border-radius:99px;
  background:transparent;color:var(--ink-2);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .24s var(--ease),color .24s var(--ease),box-shadow .24s var(--ease);
}
.seg-b:hover:not(.on){color:var(--ink)}
.seg-b.on{background:var(--raised);color:var(--accent-ink);font-weight:700;box-shadow:var(--sh-1),var(--inset)}

.stack{
  position:relative;width:100%;flex:1;
  min-height:260px;max-height:420px;
  margin:24px 0 22px;
  display:flex;align-items:center;justify-content:center;
}
.card{
  position:absolute;inset:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:30px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);box-shadow:var(--sh-4),var(--inset);
  cursor:grab;touch-action:none;user-select:none;
  will-change:transform;
}
.card:active{cursor:grabbing}
.card.ghost{pointer-events:none;box-shadow:var(--sh-2)}
.card.g1{transform:translateY(11px) scale(.965);opacity:.55}
.card.g2{transform:translateY(22px) scale(.93);opacity:.28}

/* декоративное свечение внутри карточки; при свайпе окрашивается */
.glow{
  position:absolute;inset:auto -22% -34% -22%;height:64%;z-index:0;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,var(--accent-soft-2),transparent 74%);
  opacity:.9;
  transition:background .22s ease,opacity .22s ease;
}
.card.tilt-right{border-color:var(--good-line)}
.card.tilt-left{border-color:var(--bad-line)}
.card.tilt-right .glow{background:radial-gradient(closest-side,var(--good-soft),transparent 72%);opacity:1}
.card.tilt-left  .glow{background:radial-gradient(closest-side,var(--bad-soft),transparent 72%);opacity:1}

.face{
  position:relative;z-index:1;
  width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;
  transition:opacity .18s ease,transform .18s ease;
}
.word{
  font-family:var(--font-display);
  font-size:clamp(28px,7vw,40px);font-weight:800;text-align:center;
  line-height:1.14;letter-spacing:-.03em;text-wrap:balance;
}
.word.ru{font-size:clamp(22px,5.6vw,30px);font-weight:700;letter-spacing:-.02em}
.translation{
  font-family:var(--font-display);
  font-size:clamp(22px,5.6vw,30px);font-weight:700;text-align:center;
  line-height:1.3;letter-spacing:-.02em;text-wrap:balance;
}
.hint{font-size:12.5px;color:var(--ink-3);text-align:center;font-weight:500}

.def{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--warn-soft);color:var(--warn-ink);
  box-shadow:inset 0 0 0 1px var(--warn-line);
}
.def-txt{font-size:13.5px;line-height:1.55;font-weight:500}
.def-ex{font-size:12.5px;line-height:1.55;margin-top:7px;font-style:italic;opacity:.85}
.def-btn{
  position:absolute;top:14px;right:14px;z-index:3;
  width:40px;height:40px;border-radius:13px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-1);
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.def-btn:hover{transform:scale(1.06);box-shadow:var(--sh-2)}
.def-btn.on{background:var(--warn-soft);box-shadow:inset 0 0 0 1px var(--warn-line)}

.stamp{
  position:absolute;top:22px;z-index:2;opacity:0;pointer-events:none;
  padding:8px 16px;border-radius:99px;
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.stamp.know{
  left:22px;transform:rotate(-7deg);
  background:var(--good-soft);color:var(--good-ink);
  box-shadow:inset 0 0 0 1.5px var(--good-line),var(--sh-2);
}
.stamp.dunno{
  right:22px;transform:rotate(7deg);
  background:var(--bad-soft);color:var(--bad-ink);
  box-shadow:inset 0 0 0 1.5px var(--bad-line),var(--sh-2);
}

/* ---------- круглые кнопки под карточкой ---------- */
.controls{display:flex;gap:22px;justify-content:center;align-items:center;margin-bottom:16px}
.btn{
  width:66px;height:66px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--sh-2),var(--inset);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),
             background .24s var(--ease),color .24s var(--ease);
}
.btn svg{width:26px;height:26px;stroke-width:2.4}
.btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--sh-3),var(--inset)}
.btn:active{transform:translateY(-1px) scale(.97);transition-duration:.08s}
.btn.yes{background:var(--good-soft);color:var(--good);box-shadow:var(--sh-2),inset 0 0 0 1px var(--good-line)}
.btn.yes:hover{box-shadow:var(--sh-3),inset 0 0 0 1px var(--good-line),0 6px 20px -6px var(--good-line)}
.btn.no{background:var(--bad-soft);color:var(--bad);box-shadow:var(--sh-2),inset 0 0 0 1px var(--bad-line)}
.btn.no:hover{box-shadow:var(--sh-3),inset 0 0 0 1px var(--bad-line),0 6px 20px -6px var(--bad-line)}
.btn.flip{width:54px;height:54px}
.btn.flip svg{width:21px;height:21px}
.btn.flip:hover{color:var(--accent);background:var(--accent-soft)}

.legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}
.legend kbd{
  font-family:inherit;font-size:10.5px;font-weight:700;
  padding:2px 6px;border-radius:6px;
  background:var(--surface-2);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line),0 1px 0 var(--line-2);
  margin-right:5px;
}

/* ---------- экраны «готово» ---------- */
.done,.done-panel{
  display:none;width:100%;padding:30px 24px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);box-shadow:var(--sh-4),var(--inset);
}
.done.show{display:flex;flex-direction:column;gap:13px;align-items:center;position:relative;z-index:4}
.done-panel[hidden]{display:none}
.done-panel:not([hidden]){display:block;margin-top:22px;animation:rise .4s var(--ease) both}
.done h2,.done-panel h2{
  font-family:var(--font-display);
  font-size:clamp(22px,5vw,27px);font-weight:800;letter-spacing:-.025em;
}
.score{font-size:15px;font-weight:500;color:var(--ink-2)}
.score b{font-weight:700}
.score .g,.g{color:var(--good)}
.score .r,.r{color:var(--bad)}
.done-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- кнопки-пилюли ---------- */
.btn-pill{
  padding:12px 22px;border:none;border-radius:99px;
  background:var(--grad);color:var(--on-accent);
  font:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  box-shadow:var(--sh-accent);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease);
}
.btn-pill:hover{transform:translateY(-2px);box-shadow:var(--sh-accent-hi);filter:saturate(1.08)}
.btn-pill:active{transform:translateY(0) scale(.98);transition-duration:.08s}
.btn-pill.ghostbtn{
  background:var(--surface);color:var(--ink);
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--line-2);
}
.btn-pill.ghostbtn:hover{box-shadow:var(--sh-2),inset 0 0 0 1px var(--line-3);filter:none}
.btn-pill.small{padding:9px 16px;font-size:13px}
.btn-pill:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--sh-1);filter:none}

/* ============================================================
   НАПИСАНИЕ
   ============================================================ */
.type-card{
  width:100%;margin:24px 0 18px;padding:30px 24px;
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);box-shadow:var(--sh-3),var(--inset);
  display:flex;flex-direction:column;gap:16px;align-items:center;
}
.type-prompt{
  font-family:var(--font-display);
  font-size:clamp(21px,5.2vw,28px);font-weight:800;text-align:center;
  line-height:1.25;letter-spacing:-.025em;text-wrap:balance;
}
.type-prompt.en{
  font-family:var(--font);
  font-size:clamp(15px,3.8vw,18px);font-weight:500;line-height:1.55;
  letter-spacing:0;color:var(--ink-2);
}
.type-sub{font-size:12px;color:var(--ink-3);text-align:center;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.type-input{
  width:100%;padding:15px 16px;font:inherit;font-size:17px;font-weight:600;text-align:center;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink);outline:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.type-input::placeholder{color:var(--ink-3);font-weight:500}
.type-input:focus{background:var(--surface);border-color:var(--accent);box-shadow:var(--ring)}
.type-input.right{background:var(--good-soft);border-color:var(--good-line);color:var(--good-ink);box-shadow:none}
.type-input.wrong{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad-ink);box-shadow:none}
.type-input.near{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn-ink);box-shadow:none}
.type-input:disabled{opacity:1}
.type-fb{font-size:14px;font-weight:600;text-align:center;min-height:20px;line-height:1.55}
.type-fb.ok{color:var(--good)}
.type-fb.bad{color:var(--bad)}
.type-fb.near{color:var(--warn)}
.fb-def{display:block;font-size:12.5px;font-weight:400;color:var(--ink-2);margin-top:6px}

.task-foot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ============================================================
   ПРАВИЛА
   ============================================================ */
.rules{display:flex;flex-direction:column;gap:16px}
.rule{
  padding:24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--sh-2),var(--inset);
}
.rule h3{
  font-family:var(--font-display);
  font-size:19px;font-weight:800;margin-bottom:16px;line-height:1.25;letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.tag{
  font-family:var(--font);
  font-size:10px;padding:4px 10px;border-radius:99px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;flex:0 0 auto;
}
.tag.simple{background:var(--accent-soft);color:var(--accent-ink)}
.tag.cont{background:var(--c4-bg);color:var(--c4-fg)}

.rule ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.rule li{font-size:14.5px;line-height:1.6;padding-left:20px;position:relative;color:var(--ink)}
.rule li::before{
  content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.rule .ex{
  display:block;margin-top:7px;font-size:13.5px;line-height:1.55;
  color:var(--ink-2);padding:2px 0 2px 13px;border-left:2px solid var(--line-2);
}
.rule .ex em{font-style:normal;font-weight:700;color:var(--ink)}
.rule p.note{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin-bottom:16px}

.forms{display:flex;flex-direction:column;gap:8px;margin:2px 0 16px}
.form-row{
  display:flex;align-items:center;gap:13px;padding:12px 14px;
  border-radius:var(--r-sm);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);
}
.form-sign{
  flex:0 0 26px;height:26px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;
}
.form-sign.p{background:var(--good-soft);color:var(--good-ink)}
.form-sign.m{background:var(--bad-soft);color:var(--bad-ink)}
.form-sign.q{background:var(--info-soft);color:var(--info-ink)}
.form-f{font-size:14px;font-weight:600;line-height:1.5}

.two{
  margin-top:15px;border-radius:var(--r-sm);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);
}
.two-head,.two-row{display:grid;grid-template-columns:1fr 1fr}
.two-head span{
  padding:10px 13px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent-ink);
}
.two-head span+span{background:var(--c4-bg);color:var(--c4-fg);border-left:1px solid var(--line)}
.two-row span{padding:11px 13px;font-size:13px;line-height:1.55;border-top:1px solid var(--line)}
.two-row .two-r{border-left:1px solid var(--line)}
.two-row em{font-style:normal;font-weight:700}
.two-row i{font-style:normal;color:var(--ink-3)}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.chip{
  font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:99px;
  background:var(--surface-2);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
}
.chip.s{background:var(--accent-soft);color:var(--accent-ink);box-shadow:none}
.chip.c{background:var(--c4-bg);color:var(--c4-fg);box-shadow:none}
.chips.verbs .chip{font-size:12px;padding:5px 10px}

.rule .tip{
  margin-top:18px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--info-soft);color:var(--info-ink);
  box-shadow:inset 0 0 0 1px var(--info-line);
  font-size:13.5px;line-height:1.6;
}
.rule .tip b{font-weight:800}

/* ============================================================
   ЧТЕНИЕ
   ============================================================ */
.read-hint{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:16px 2px 0}
.read-body{
  margin-top:16px;padding:26px 24px 12px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--sh-2),var(--inset);
}
.read-p{font-size:16.5px;line-height:1.85;margin-bottom:19px}
.gw{
  cursor:pointer;border-radius:5px;padding:1px 2px;margin:0 -1px;
  background:linear-gradient(transparent 84%,var(--accent-soft-2) 84%);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.gw:hover{background:var(--accent-soft-2)}
.gw.on{background:var(--accent);color:var(--on-accent)}
.gloss-row{font-size:14px;line-height:1.65;padding:5px 0;color:var(--ink-2)}
.gloss-row b{color:var(--ink);font-weight:600}

/* ---------- всплывающая карточка слова ---------- */
.term-sheet{
  position:fixed;z-index:60;left:50%;transform:translateX(-50%);
  bottom:max(16px,env(safe-area-inset-bottom));
  width:min(560px,calc(100% - 24px));
  padding:20px 52px 20px 20px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--sh-4),var(--inset);
  animation:sheetUp .28s var(--ease);
}
@keyframes sheetUp{
  from{opacity:0;transform:translate(-50%,18px) scale(.97)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}
}
.term-close{
  position:absolute;top:13px;right:13px;width:30px;height:30px;border-radius:50%;
  border:none;background:var(--surface-2);color:var(--ink-2);
  font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.term-close:hover{background:var(--bad-soft);color:var(--bad)}
.term-w{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:5px}
.term-t{font-size:15.5px;font-weight:600;line-height:1.45;margin-bottom:9px;color:var(--accent-ink)}
.term-d{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
/* пока карточка открыта, снизу нужен запас, иначе она накрывает текст */
body.sheet-open .app{padding-bottom:160px}

/* ============================================================
   PHOTO BOARDS
   ============================================================ */
.board-img{
  display:block;width:100%;height:auto;margin:18px 0;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);
}
.board-pane{display:flex;flex-direction:column}
.board-h{font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.02em;margin:24px 0 13px}
.shot{
  padding:16px 17px;margin-bottom:11px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);box-shadow:var(--sh-1),var(--inset);
}
.shot-n{font-size:14.5px;line-height:1.55;margin-bottom:12px;font-weight:600}
.shot-a{margin-bottom:11px;display:flex;flex-direction:column;gap:9px}
.shot-a.hidden{display:none}
.shot-a p{font-size:14.5px;line-height:1.55;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.board-notes{
  width:100%;min-height:160px;resize:vertical;
  padding:16px 17px;font:inherit;font-size:15px;line-height:1.65;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);outline:none;
  box-shadow:var(--sh-1);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.board-notes::placeholder{color:var(--ink-3)}
.board-notes:focus{border-color:var(--accent);box-shadow:var(--ring)}
.board-count{font-size:12.5px;color:var(--ink-3);margin:10px 2px 0;font-weight:500}

/* ============================================================
   ЗАДАНИЯ
   ============================================================ */
.task{display:flex;flex-direction:column;gap:12px}
.q{
  padding:17px 18px;font-size:15.5px;line-height:1.7;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);box-shadow:var(--sh-1),var(--inset);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.q.ok{background:var(--good-soft);border-color:var(--good-line)}
.q.bad{background:var(--bad-soft);border-color:var(--bad-line)}
.q-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin-right:10px;flex:0 0 auto;
  border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);
  font-size:12px;font-weight:700;vertical-align:middle;
}

.match-row{display:flex;flex-direction:column;gap:10px}
.match-row .lbl{display:block;line-height:1.65}
.pick{
  width:100%;padding:12px 14px;font:inherit;font-size:15px;font-weight:500;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink);cursor:pointer;outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.pick:focus{border-color:var(--accent);box-shadow:var(--ring);background:var(--surface)}
.pick.right{background:var(--good-soft);border-color:var(--good-line);color:var(--good-ink)}
.pick.wrong{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad-ink)}

.opt-group{display:inline-flex;gap:7px;margin:0 4px;vertical-align:middle;flex-wrap:wrap}
.opt{
  padding:7px 14px;font:inherit;font-size:14px;font-weight:600;
  border:1px solid var(--line-2);border-radius:99px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease),
             color .18s var(--ease),border-color .18s var(--ease);
}
.opt:hover{transform:translateY(-1px);color:var(--ink);border-color:var(--line-3)}
.opt.sel{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:var(--sh-accent)}
.opt.right{background:var(--good-soft);color:var(--good-ink);border-color:var(--good-line);box-shadow:none}
.opt.wrong{background:var(--bad-soft);color:var(--bad-ink);border-color:var(--bad-line);text-decoration:line-through;box-shadow:none}

.gap{
  display:inline-block;min-width:118px;width:auto;
  padding:6px 12px;font:inherit;font-size:15px;font-weight:600;text-align:center;
  border:1px solid var(--line-2);border-radius:var(--r-xs);
  background:var(--surface-2);color:var(--ink);outline:none;margin:0 2px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.gap:focus{background:var(--surface);border-color:var(--accent);box-shadow:var(--ring)}
.gap.right{background:var(--good-soft);border-color:var(--good-line);color:var(--good-ink);box-shadow:none}
.gap.wrong{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad-ink);box-shadow:none}
.gap::placeholder{color:var(--ink-3);font-weight:400}
.gap.wide{display:block;width:100%;margin-top:12px;text-align:left}

.sol{
  display:block;margin-top:12px;padding:11px 13px;font-size:13.5px;line-height:1.55;
  border-radius:var(--r-xs);background:var(--surface-2);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
}
.sol.hidden{display:none}
.sol b{font-weight:700;color:var(--ink)}
.why{display:block;margin-top:6px;color:var(--ink-3);font-size:13px;line-height:1.55}

.result{display:none}
.result.show{
  display:block;margin-top:22px;padding:24px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--sh-3),var(--inset);
  animation:rise .4s var(--ease) both;
}
.result b{
  font-family:var(--font-display);
  font-size:30px;font-weight:800;display:block;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.result small{display:block;margin-top:9px;font-size:13.5px;color:var(--ink-2);line-height:1.6}

.note-box{
  padding:16px 18px;font-size:14.5px;line-height:1.65;
  border-radius:var(--r-sm);
  background:var(--warn-soft);color:var(--warn-ink);
  box-shadow:inset 0 0 0 1px var(--warn-line);
}

.player{
  padding:16px;margin-bottom:16px;
  border-radius:var(--r-sm);
  background:var(--info-soft);
  box-shadow:inset 0 0 0 1px var(--info-line);
}
.player-lbl{font-size:13px;font-weight:600;margin-bottom:10px;color:var(--info-ink)}
.player audio{width:100%;display:block}

details.script{
  margin-top:18px;padding:16px 18px;
  border:1px dashed var(--line-3);border-radius:var(--r-sm);background:transparent;
}
details.script summary{
  cursor:pointer;font-size:14px;font-weight:600;list-style:none;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
details.script summary::-webkit-details-marker{display:none}
details.script summary::before{
  content:"";flex:0 0 auto;width:0;height:0;
  border:5px solid transparent;border-left-color:var(--ink-3);
  transition:transform .22s var(--ease);
}
details.script[open] summary::before{transform:rotate(90deg) translateX(-1px)}
details.script .line{font-size:14.5px;line-height:1.65;margin-top:11px;color:var(--ink-2)}
details.script .line b{color:var(--ink);font-weight:600}
details.script .script-note{font-size:12.5px;color:var(--ink-3);padding-top:12px;line-height:1.55}

/* ============================================================
   ЭКЗАМЕН
   ============================================================ */
.exam-q{
  padding:24px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--sh-2),var(--inset);
  animation:rise .34s var(--ease) both;
}
.exam-cat{
  display:inline-block;margin-bottom:13px;margin-right:8px;
  padding:4px 11px;border-radius:99px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.exam-cat.w{background:var(--accent-soft);color:var(--accent-ink)}
.exam-cat.g{background:var(--good-soft);color:var(--good-ink)}
.exam-cat.a{background:var(--info-soft);color:var(--info-ink)}
.exam-src{font-size:11.5px;color:var(--ink-3);font-weight:500}
.exam-text{
  font-family:var(--font-display);
  font-size:18px;line-height:1.5;font-weight:700;letter-spacing:-.02em;margin-bottom:18px;
}
.exam-def{
  display:block;margin-top:8px;font-family:var(--font);
  font-size:14px;font-weight:400;color:var(--ink-2);font-style:italic;letter-spacing:0;
}
.exam-opts{display:flex;flex-direction:column;gap:9px}
.exam-opt{
  width:100%;padding:14px 16px;text-align:left;font:inherit;font-size:15px;font-weight:500;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
             border-color .2s var(--ease),background .2s var(--ease);
}
.exam-opt:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--accent)}
.exam-opt.right{background:var(--good-soft);border-color:var(--good);color:var(--good-ink);font-weight:600}
.exam-opt.wrong{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad-ink)}
.exam-opt:disabled{cursor:default}
.exam-why{
  margin-top:16px;padding:14px 16px;font-size:14px;line-height:1.6;font-weight:600;
  border-radius:var(--r-sm);
  animation:rise .3s var(--ease) both;
}
.exam-why.hidden{display:none}
.exam-why.ok{background:var(--good-soft);color:var(--good-ink);box-shadow:inset 0 0 0 1px var(--good-line)}
.exam-why.bad{background:var(--bad-soft);color:var(--bad-ink);box-shadow:inset 0 0 0 1px var(--bad-line)}
.why-txt{display:block;margin-top:7px;font-size:13px;font-weight:400;opacity:.85}

.exam-break{display:flex;flex-direction:column;gap:12px;margin:22px 0}
.brk{display:flex;align-items:center;gap:12px}
.brk-name{flex:0 0 100px;font-size:13px;font-weight:600;text-align:left;color:var(--ink-2)}
.brk-bar{
  flex:1;height:8px;border-radius:99px;
  background:var(--track);overflow:hidden;
}
.brk-bar i{display:block;height:100%;border-radius:99px;background:var(--grad);transition:width .6s var(--ease)}
.brk-num{flex:0 0 auto;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}

.missed{margin-top:22px;text-align:left}
.missed h3{font-family:var(--font-display);font-size:16.5px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.missed-q{
  padding:15px 16px;margin-bottom:10px;
  border-radius:var(--r-sm);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);
}
.mq{font-size:14.5px;line-height:1.6;font-weight:600;margin-bottom:7px}
.mq-a{font-size:13.5px;color:var(--ink-2)}
.mq-a s{color:var(--bad)}
.mq-a b{color:var(--good);font-weight:700}
.mq-why{font-size:13px;color:var(--ink-3);margin-top:6px;line-height:1.55}
.all-right{font-size:15px;font-weight:600;color:var(--good);margin-top:16px}

/* ============================================================
   ВЕРХНЯЯ ПАНЕЛЬ
   ============================================================ */
.topwrap{
  position:sticky;top:0;z-index:45;
  padding:max(14px,env(safe-area-inset-top)) 0 12px;
}
/* Подложка шапки — размытие с затуханием вниз, а не сплошная заливка:
   контент, уезжающий под шапку, приглушается, но фоновое свечение
   остаётся видно. Слой отдельным ::before, чтобы затухание маской
   не съело саму шапку. */
.topwrap::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  -webkit-mask-image:linear-gradient(#000 58%,rgba(0,0,0,.45) 82%,transparent);
  mask-image:linear-gradient(#000 58%,rgba(0,0,0,.45) 82%,transparent);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topwrap{background:linear-gradient(var(--bg) 62%,transparent)}
  .topwrap::before{display:none}
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px 9px 9px;border-radius:99px;
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:var(--sh-2),inset 0 0 0 1px var(--line);
}
@supports not (backdrop-filter:blur(1px)){
  .topbar{background:var(--surface)}
}
.brand{
  display:flex;align-items:center;gap:10px;padding:0;
  border:none;background:none;color:var(--ink);font:inherit;cursor:pointer;
  transition:opacity .2s var(--ease);
}
.brand:hover{opacity:.75}
.brand-ico{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;
  background:var(--grad-soft);
  display:flex;align-items:center;justify-content:center;font-size:17px;
  box-shadow:inset 0 0 0 1px var(--line);
}
.brand-name{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:-.025em}
.topbar-right{display:flex;align-items:center;gap:8px}
.top-stat{
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
  padding:6px 12px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent-ink);
}
.top-stat:empty{display:none}
.icon-btn{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  border:none;background:var(--surface-2);color:var(--ink-2);
  font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.icon-btn:hover{background:var(--accent-soft);color:var(--accent)}
.icon-btn:active{transform:scale(.9)}

/* ============================================================
   ЗАГОЛОВКИ РАЗДЕЛОВ
   ============================================================ */
.sect{display:flex;flex-direction:column;gap:3px;margin:26px 2px 4px}
.mode-list > .sect:first-child,.ex-list > .sect:first-child{margin-top:2px}
/* список ДЗ идёт после карточки «продолжить» — ей нужен воздух */
.hw-list{margin-top:12px}
.sect-t{font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:-.02em}
.sect-n{font-size:12.5px;color:var(--ink-3);font-weight:400}

.mode-row{display:flex;flex-direction:column;gap:12px}
@media (min-width:700px){
  .mode-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  /* заголовок всегда во всю ширину, даже если попадёт в сетку */
  .sect{grid-column:1 / -1}
}

/* ============================================================
   ЯРЛЫЧКИ
   ============================================================ */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chip-tag{
  font-size:11px;font-weight:600;letter-spacing:.01em;
  padding:4px 10px;border-radius:99px;
  background:var(--surface-2);color:var(--ink-3);white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--line);
}
.chip-tag.soft{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3)}
.chip-tag.ok{background:var(--good-soft);color:var(--good-ink);box-shadow:none}
.chip-tag.go{background:var(--warn-soft);color:var(--warn-ink);box-shadow:none}
.chip-tag.new{background:var(--accent-soft);color:var(--accent-ink);box-shadow:none;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.06em}
.chip-tag.hot{background:var(--accent);color:var(--on-accent);box-shadow:none;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.06em}
.chip-tag.audio{background:var(--info-soft);color:var(--info-ink);box-shadow:none}

/* ============================================================
   ОБЩЕЕ
   ============================================================ */
.screen{width:100%;display:flex;flex-direction:column}
.screen[hidden]{display:none}
.screen:not([hidden]){animation:screenIn .34s var(--ease) both}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.scrollable{padding-bottom:24px}

.hidden{display:none}

::selection{background:var(--accent-soft-2);color:var(--ink)}

a,button,input,select,textarea{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.gw:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs);
}

/* аккуратная полоса прокрутки на десктопе */
@media (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:99px;border:3px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
}

/* ---------- телефон ---------- */
@media (max-width:520px){
  body{padding-left:14px;padding-right:14px}
  .tile{padding:15px;gap:13px;border-radius:var(--r-sm)}
  .tile-ico{flex:0 0 44px;height:44px;font-size:21px;border-radius:13px}
  .stat{padding:13px 11px}
  .stat-n{font-size:20px}
  .stat-l{font-size:10.5px}
  .resume{padding:18px}
  .q{font-size:15px;padding:15px 15px}
  .rule{padding:19px}
  .exam-q{padding:19px}
  .read-body{padding:20px 18px 8px}
  .read-p{font-size:16px;line-height:1.8}
  .type-card{padding:24px 18px}
  .card{padding:24px;border-radius:var(--r)}
  .controls{gap:18px}
  .btn{width:60px;height:60px}
  .btn.flip{width:50px;height:50px}
  .two-head span,.two-row span{padding:9px 10px;font-size:12px}
  .brk-name{flex:0 0 82px;font-size:12px}
}

/* на тач-устройствах ховер «залипает» — гасим все подъёмы */
@media (hover:none){
  .legend{display:none}
  .tile:hover,.btn:hover,.btn-pill:hover,.back:hover,.exam-opt:hover:not(:disabled),
  .opt:hover,.stat:hover,.resume-go:hover,.def-btn:hover{
    transform:none;
  }
  .tile:hover{box-shadow:var(--sh-1),var(--inset);border-color:var(--line)}
  .tile:hover .tile-ico{transform:none}
  .tile:hover .tile-lock{background:transparent;color:var(--ink-3);transform:none}
}

@media (max-height:680px){
  .stack{min-height:230px;max-height:330px;margin:18px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================================================
   ШИРОКИЙ ЭКРАН

   Колонка в 780px посреди десктопа оставляла половину окна пустой.
   Здесь контейнер расширяется, плитки идут в несколько рядов, а блоки,
   которые читают глазами, держат свою комфортную ширину строки.
   ============================================================ */
.menu-grid{display:flex;flex-direction:column}

@media (min-width:1000px){
  .app{width:min(1120px,100%)}

  .menu-grid{
    display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:32px;align-items:start;
  }
  .menu-side{position:sticky;top:96px}
  .hw-list{margin-top:0}
  .hw-list > .sect:first-child{margin-top:0}

  .mode-row{grid-template-columns:repeat(3,1fr)}

  /* длинная строка читается плохо — держим меру набора */
  .read-body,.read-hint,.rules,.task,.task-foot,.result,
  .type-card,.done-panel,.board-pane,.exam-q,#readGloss,
  #s-task .note-box,#s-reading .note-box,#s-boards .note-box,
  #s-boards > div > .rule,#s-boards details.script{
    max-width:800px;margin-left:auto;margin-right:auto;
  }
  #s-words .stack,#s-words .cards-head,#s-words .controls,#s-words .legend,
  #s-type .cards-head{max-width:660px;margin-left:auto;margin-right:auto}

  /* шапка экрана выравнивается по колонке контента, иначе заголовок
     стоит у края, а текст под ним — по центру */
  #s-reading .head,#s-rules .head,#s-task .head,#s-boards .head,
  #s-exam .cards-head{max-width:800px;margin-left:auto;margin-right:auto;width:100%}
}

@media (min-width:1000px) and (max-width:1240px){
  .mode-row{grid-template-columns:repeat(2,1fr)}
}