/* ============================================================
   English Hub - design system ("Serafina" skin)
   Перивинкль-фиолетовый + лимонный, крупный дисплейный serif.
   Все страницы (хаб, курсы, словарь, тренажёр) тянут этот файл.
   ============================================================ */
:root{
  /* поверхности: тёплая бумага */
  --paper:#FBF8F1; --paper-2:#FFFFFF; --paper-warm:#F5F0E6;
  --ink:#1E1B39; --ink-2:#514D74; --ink-3:#8B87A6;
  --line:#E9E3D6; --line-2:#DAD3C4;

  /* бренд */
  --violet:#6C5CE7; --violet-deep:#4B3FCF; --violet-ink:#2A2560;
  --violet-soft:#EDEAFE; --violet-tint:rgba(108,92,231,.10);
  --lemon:#F2E85C; --lemon-deep:#E3D63A; --lemon-tint:rgba(242,232,92,.28);

  /* уровни CEFR (цветовое кодирование) */
  --a1:#34C7A6; --a1-tint:rgba(52,199,166,.14);
  --a2:#38A9F0; --a2-tint:rgba(56,169,240,.14);
  --b1:#6C5CE7; --b1-tint:rgba(108,92,231,.14);
  --b2:#F0713B; --b2-tint:rgba(240,113,59,.14);
  --c1:#D9A21B; --c1-tint:rgba(217,162,27,.15);

  /* семантика */
  --ok:#1FA97A; --ok-tint:rgba(31,169,122,.13);
  --err:#E4574C; --err-tint:rgba(228,87,76,.12);
  --info:var(--violet); --hl:var(--lemon); --done-score:var(--lemon);   /* --hl - подсветка слова в заголовке */
  /* смысловые: текст на акцентной заливке / на лимоне, полупрозрачное меню, отклики «верно / ошибка / риск», мелкие цвета */
  --on-accent:#fff; --on-lemon:#2A2560; --nav-bg:rgba(251,248,241,.82);
  --ok-ink:#2f8a55; --ok-bg:#f1faf4; --ok-line:#7cc49a;
  --err-ink:#b3402f; --err-bg:#fdf4f1; --err-line:#e3b3a8;
  --warn-ink:#8a3a1e; --warn-bg:#fdf1ec; --warn-line:#f0c3b3;
  --lemon-soft:#fffde6; --tok-on:#efeaff; --tok-on-line:#cfc6f7;
  --fire:#e8763d; --ice:#4a8fd0; --ice-ink:#3b6fb0; --gold:#c9a227; --coral:#e5674e;
  --shade:rgba(30,20,80,.35); --shade-soft:rgba(30,20,80,.22);
  --ok-chip:#bfe6cd; --err-chip:#f2c9c9; --on-accent-err:#ffc9c0;
  --stage-a:#efeaff; --stage-b:#d9cffb; --stage-c:#b9a8f2;
  --toast-icon:#F2E85C; --frame:#fff; --amber:#e8a33d; --meta:#4B3FCF;   /* --meta - цвет шапки браузера (view.js) */ --shade-strong:rgba(30,27,57,.55); --err-soft:#ffe8e8; --ok-deep:#1c5c3a; --err-deep:#8c2f2f;   /* фон сцены персонажа («Говорить») */

  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Manrope','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Consolas,monospace;

  --step--1:.82rem; --step-0:1.02rem; --step-1:1.22rem; --step-2:1.5rem;
  --step-3:1.95rem; --step-4:2.6rem; --step-5:clamp(2.6rem,7vw,4.6rem);
  --step-6:clamp(3.2rem,11vw,6.6rem);

  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;
  --sp-6:2rem;--sp-7:3rem;--sp-8:4rem;--sp-9:6rem;--sp-10:8rem;

  --wide:1080px; --read:760px; --nav-h:56px;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px; --r-full:999px;
  --sh-sm:0 1px 2px rgba(30,27,57,.06);
  --sh-md:0 10px 30px rgba(75,63,207,.10);
  --sh-lg:0 24px 60px rgba(75,63,207,.16);
  --ease:cubic-bezier(.16,1,.3,1);
}
/* ── ТЕМЫ ── тема = палитра (VIEW.FAMILIES) × яркость (VIEW.THEMES: авто/светлая/тёмная); view.js ставит <html data-theme="<палитра>"
   data-mode> до отрисовки. Фирменная светлая - значения :root выше, фирменная тёмная и тёмный «Графит» - ручные блоки ниже,
   остальные палитры - блок «M3-семейства» (scripts/themes/gen.mjs, руками не править). Новая палитра - строка в FAMILIES + зерно
   в gen.mjs; в каждой палитре все цветовые токены :root (view.test.js сверяет). Цвета только токенами: прописанный #fff
   в правиле не перекрасится. --on-accent - текст на заливке violet/ok/err, --on-lemon - на лимоне (всегда тёмный) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#14122B; --paper-2:#1E1B3F; --paper-warm:#191636;
  --ink:#ECEAFF; --ink-2:#A9A4D6; --ink-3:#7C77AA;
  --line:#2F2B58; --line-2:#3D3870;
  --violet:#9A8CFF; --violet-deep:#B3A8FF; --violet-ink:#DCD7FF;
  --violet-soft:#2A2659; --violet-tint:rgba(154,140,255,.14);
  --lemon:#F5EC6E; --lemon-deep:#E3D63A; --lemon-tint:rgba(245,236,110,.10);
  --a1:#43D6B5; --a1-tint:rgba(67,214,181,.18);
  --a2:#5BB8F5; --a2-tint:rgba(91,184,245,.18);
  --b1:#9A8CFF; --b1-tint:rgba(154,140,255,.18);
  --b2:#FF8A57; --b2-tint:rgba(255,138,87,.18);
  --c1:#E8B53A; --c1-tint:rgba(232,181,58,.18);
  --ok:#43D19E; --ok-tint:rgba(67,209,158,.15); --hl:rgba(245,236,110,.30);   /* светлый текст на лимоне не читается - полоса приглушена */
  --err:#FF7A70; --err-tint:rgba(255,122,112,.15);
  --on-accent:#14122B; --on-lemon:#2A2560; --nav-bg:rgba(20,18,43,.82);
  --ok-ink:#5FDDA9; --ok-bg:rgba(67,209,158,.10); --ok-line:rgba(67,209,158,.45);
  --err-ink:#FF8F86; --err-bg:rgba(255,122,112,.10); --err-line:rgba(255,122,112,.45);
  --warn-ink:#FFB08A; --warn-bg:rgba(255,138,87,.12); --warn-line:rgba(255,138,87,.40);
  --lemon-soft:rgba(245,236,110,.10); --tok-on:#2A2659; --tok-on-line:#4A4490;
  --fire:#FF9A5C; --ice:#7FB6EE; --ice-ink:#8FC0F2; --gold:#E8C14A; --coral:#FF8A70;
  --shade:rgba(0,0,0,.55); --shade-soft:rgba(0,0,0,.40);
  --ok-chip:rgba(67,209,158,.25); --err-chip:rgba(255,122,112,.25); --on-accent-err:#8A1F2E;
  --stage-a:#2E2A63; --stage-b:#221E4C; --stage-c:#171433;
  --toast-icon:#4B3FCF; --frame:#fff; --amber:#F0B85A; --meta:#14122B; --shade-strong:rgba(0,0,0,.65); --err-soft:rgba(255,122,112,.18); --ok-deep:#5FDDA9; --err-deep:#FF8F86;
  --done-score:var(--on-accent);   /* карточка «пройдено» в тёмной - светлая заливка: лимон на ней не читается */
  --sh-sm:0 1px 2px rgba(0,0,0,.30);
  --sh-md:0 10px 30px rgba(0,0,0,.35);
  --sh-lg:0 24px 60px rgba(0,0,0,.45);
}
/* «Графит» - нейтральный тёмно-серый (как системные тёмные темы), акценты те же, что в фирменной паре */
:root[data-theme="graphite-dark"]{
  color-scheme:dark;
  --paper:#121214; --paper-2:#1C1C20; --paper-warm:#17171A;
  --ink:#EDEDF0; --ink-2:#A1A1AA; --ink-3:#71717A;
  --line:#2C2C32; --line-2:#3A3A42;
  --violet:#8B7CF6; --violet-deep:#A99DFA; --violet-ink:#D9D4FF;
  --violet-soft:#26233A; --violet-tint:rgba(139,124,246,.14);
  --lemon:#E9DF55; --lemon-deep:#D6CB3A; --lemon-tint:rgba(233,223,85,.10);
  --a1:#3FCCAD; --a1-tint:rgba(63,204,173,.16);
  --a2:#56B1EE; --a2-tint:rgba(86,177,238,.16);
  --b1:#8B7CF6; --b1-tint:rgba(139,124,246,.16);
  --b2:#F5844F; --b2-tint:rgba(245,132,79,.16);
  --c1:#E0AE36; --c1-tint:rgba(224,174,54,.16);
  --ok:#3CC48F; --ok-tint:rgba(60,196,143,.15); --hl:rgba(233,223,85,.28);
  --err:#EF6B61; --err-tint:rgba(239,107,97,.15);
  --on-accent:#121214; --on-lemon:#2A2560; --nav-bg:rgba(18,18,20,.82);
  --ok-ink:#5AD6A4; --ok-bg:rgba(60,196,143,.10); --ok-line:rgba(60,196,143,.45);
  --err-ink:#F7867D; --err-bg:rgba(239,107,97,.10); --err-line:rgba(239,107,97,.45);
  --warn-ink:#F9A97F; --warn-bg:rgba(245,132,79,.12); --warn-line:rgba(245,132,79,.40);
  --lemon-soft:rgba(233,223,85,.10); --tok-on:#26233A; --tok-on-line:#45406B;
  --fire:#F7935A; --ice:#7AAFE6; --ice-ink:#8ABAEC; --gold:#E0B947; --coral:#F5836B;
  --shade:rgba(0,0,0,.60); --shade-soft:rgba(0,0,0,.45);
  --ok-chip:rgba(60,196,143,.25); --err-chip:rgba(239,107,97,.25); --on-accent-err:#8A1F2E;
  --stage-a:#2A2A30; --stage-b:#1E1E23; --stage-c:#141417;
  --toast-icon:#4B3FCF; --frame:#fff; --amber:#EBB257; --meta:#121214; --shade-strong:rgba(0,0,0,.70); --err-soft:rgba(239,107,97,.18); --ok-deep:#5AD6A4; --err-deep:#F7867D;
  --done-score:var(--on-accent);
  --sh-sm:0 1px 2px rgba(0,0,0,.35);
  --sh-md:0 10px 30px rgba(0,0,0,.40);
  --sh-lg:0 24px 60px rgba(0,0,0,.50);
}

/* ── M3-семейства: сгенерировано scripts/themes/gen.mjs - руками не править ── */
.view-sw[data-f="brand"]{background:linear-gradient(135deg,#6C5CE7 50%,#F2E85C 50%)}
.view-sw[data-f="graphite"]{background:linear-gradient(135deg,#303030 50%,#4B3FCF 50%)}
.view-sw[data-f="ocean"]{background:linear-gradient(135deg,#006A6A 50%,#D3E4FF 50%)}
.view-sw[data-f="forest"]{background:linear-gradient(135deg,#3B6939 50%,#BCEBF0 50%)}
.view-sw[data-f="sunset"]{background:linear-gradient(135deg,#8F4A4C 50%,#FFDDAF 50%)}
.view-sw[data-f="blue"]{background:linear-gradient(135deg,#36618E 50%,#F3DAFF 50%)}
:root[data-theme="graphite-light"]{
  color-scheme:light;
  --paper:#F9F9F9;
  --paper-2:#FFFFFF;
  --paper-warm:#F3F3F3;
  --ink:#1B1B1B;
  --ink-2:#474747;
  --ink-3:#6A6A6A;
  --line:#E2E2E2;
  --line-2:#C6C6C6;
  --nav-bg:rgba(249,249,249,.82);
  --tok-on-line:#C6C6C6;
  --violet:#303030;
  --violet-soft:#E8E8E8;
  --on-accent:#FFFFFF;
  --tok-on:#E8E8E8;
  --violet-deep:#4B3FCF;
  --violet-ink:#2A2560;
  --violet-tint:rgba(48,48,48,.07);
  --stage-a:#EEEEEE;
  --stage-b:#D7D7D7;
  --stage-c:#B6B6B6;
  --toast-icon:#F2E85C;
  --meta:#303030;
  --lemon:#DDDDDD;
  --on-lemon:#1B1B1B;
  --hl:#DDDDDD;
  --lemon-deep:#CCCCCC;
  --lemon-tint:rgba(119,119,119,.16);
  --lemon-soft:#F3F3F3;
  --done-score:#DDDDDD;
  --a1:#34C7A6;
  --a1-tint:rgba(52,199,166,.14);
  --a2:#38A9F0;
  --a2-tint:rgba(56,169,240,.14);
  --b1:#6C5CE7;
  --b1-tint:rgba(108,92,231,.14);
  --b2:#F0713B;
  --b2-tint:rgba(240,113,59,.14);
  --c1:#D9A21B;
  --c1-tint:rgba(217,162,27,.15);
  --ok:#1FA97A;
  --ok-tint:rgba(31,169,122,.13);
  --err:#E4574C;
  --err-tint:rgba(228,87,76,.12);
  --ok-ink:#2f8a55;
  --ok-bg:#f1faf4;
  --ok-line:#7cc49a;
  --err-ink:#b3402f;
  --err-bg:#fdf4f1;
  --err-line:#e3b3a8;
  --warn-ink:#8a3a1e;
  --warn-bg:#fdf1ec;
  --warn-line:#f0c3b3;
  --fire:#e8763d;
  --ice:#4a8fd0;
  --ice-ink:#3b6fb0;
  --gold:#c9a227;
  --coral:#e5674e;
  --shade:rgba(30,20,80,.35);
  --shade-soft:rgba(30,20,80,.22);
  --ok-chip:#bfe6cd;
  --err-chip:#f2c9c9;
  --on-accent-err:#ffc9c0;
  --frame:#fff;
  --amber:#e8a33d;
  --shade-strong:rgba(30,27,57,.55);
  --err-soft:#ffe8e8;
  --ok-deep:#1c5c3a;
  --err-deep:#8c2f2f;
  --sh-sm:0 1px 2px rgba(30,27,57,.06);
  --sh-md:0 10px 30px rgba(75,63,207,.10);
  --sh-lg:0 24px 60px rgba(75,63,207,.16);
}
:root[data-theme="ocean-light"]{
  color-scheme:light;
  --paper:#F4FBFA;
  --paper-2:#FFFFFF;
  --paper-warm:#EFF5F4;
  --ink:#161D1D;
  --ink-2:#3F4948;
  --ink-3:#626D6C;
  --line:#DDE4E3;
  --line-2:#BEC9C8;
  --nav-bg:rgba(244,251,250,.82);
  --tok-on-line:#BEC9C8;
  --violet:#006A6A;
  --violet-soft:#CCE8E7;
  --on-accent:#FFFFFF;
  --tok-on:#CCE8E7;
  --violet-deep:#004F4F;
  --violet-ink:#003737;
  --violet-tint:rgba(0,106,106,.10);
  --stage-a:#A7FDFC;
  --stage-b:#8EE3E2;
  --stage-c:#69BEBE;
  --toast-icon:#B3C8E8;
  --meta:#006A6A;
  --lemon:#D3E4FF;
  --on-lemon:#334863;
  --hl:#D3E4FF;
  --lemon-deep:#C1D6F7;
  --lemon-tint:rgba(179,200,232,.35);
  --lemon-soft:#EAF1FF;
  --done-score:#D3E4FF;
  --a1:#34C7A6;
  --a1-tint:rgba(52,199,166,.14);
  --a2:#38A9F0;
  --a2-tint:rgba(56,169,240,.14);
  --b1:#6C5CE7;
  --b1-tint:rgba(108,92,231,.14);
  --b2:#F0713B;
  --b2-tint:rgba(240,113,59,.14);
  --c1:#D9A21B;
  --c1-tint:rgba(217,162,27,.15);
  --ok:#1FA97A;
  --ok-tint:rgba(31,169,122,.13);
  --err:#E4574C;
  --err-tint:rgba(228,87,76,.12);
  --ok-ink:#2f8a55;
  --ok-bg:#f1faf4;
  --ok-line:#7cc49a;
  --err-ink:#b3402f;
  --err-bg:#fdf4f1;
  --err-line:#e3b3a8;
  --warn-ink:#8a3a1e;
  --warn-bg:#fdf1ec;
  --warn-line:#f0c3b3;
  --fire:#e8763d;
  --ice:#4a8fd0;
  --ice-ink:#3b6fb0;
  --gold:#c9a227;
  --coral:#e5674e;
  --shade:rgba(30,20,80,.35);
  --shade-soft:rgba(30,20,80,.22);
  --ok-chip:#bfe6cd;
  --err-chip:#f2c9c9;
  --on-accent-err:#ffc9c0;
  --frame:#fff;
  --amber:#e8a33d;
  --shade-strong:rgba(30,27,57,.55);
  --err-soft:#ffe8e8;
  --ok-deep:#1c5c3a;
  --err-deep:#8c2f2f;
  --sh-sm:0 1px 2px rgba(30,27,57,.06);
  --sh-md:0 10px 30px rgba(75,63,207,.10);
  --sh-lg:0 24px 60px rgba(75,63,207,.16);
}
:root[data-theme="ocean-dark"]{
  color-scheme:dark;
  --paper:#0E1514;
  --paper-2:#1A2121;
  --paper-warm:#161D1D;
  --ink:#DDE4E3;
  --ink-2:#BEC9C8;
  --ink-3:#96A09F;
  --line:#2F3636;
  --line-2:#3F4948;
  --nav-bg:rgba(14,21,20,.82);
  --tok-on-line:#3F4948;
  --violet:#80D5D4;
  --violet-soft:#324B4B;
  --on-accent:#003737;
  --tok-on:#324B4B;
  --violet-deep:#9CF1F0;
  --violet-ink:#A2F7F6;
  --violet-tint:rgba(128,213,212,.14);
  --stage-a:#003C3C;
  --stage-b:#002B2B;
  --stage-c:#001B1B;
  --toast-icon:#006A6A;
  --meta:#0E1514;
  --lemon:#334863;
  --on-lemon:#D3E4FF;
  --hl:#334863;
  --lemon-deep:#283D57;
  --lemon-tint:rgba(179,200,232,.10);
  --lemon-soft:rgba(179,200,232,.10);
  --done-score:#003737;
  --a1:#43D6B5;
  --a1-tint:rgba(67,214,181,.18);
  --a2:#5BB8F5;
  --a2-tint:rgba(91,184,245,.18);
  --b1:#9A8CFF;
  --b1-tint:rgba(154,140,255,.18);
  --b2:#FF8A57;
  --b2-tint:rgba(255,138,87,.18);
  --c1:#E8B53A;
  --c1-tint:rgba(232,181,58,.18);
  --ok:#43D19E;
  --ok-tint:rgba(67,209,158,.15);
  --err:#FF7A70;
  --err-tint:rgba(255,122,112,.15);
  --ok-ink:#5FDDA9;
  --ok-bg:rgba(67,209,158,.10);
  --ok-line:rgba(67,209,158,.45);
  --err-ink:#FF8F86;
  --err-bg:rgba(255,122,112,.10);
  --err-line:rgba(255,122,112,.45);
  --warn-ink:#FFB08A;
  --warn-bg:rgba(255,138,87,.12);
  --warn-line:rgba(255,138,87,.40);
  --fire:#FF9A5C;
  --ice:#7FB6EE;
  --ice-ink:#8FC0F2;
  --gold:#E8C14A;
  --coral:#FF8A70;
  --shade:rgba(0,0,0,.55);
  --shade-soft:rgba(0,0,0,.40);
  --ok-chip:rgba(67,209,158,.25);
  --err-chip:rgba(255,122,112,.25);
  --on-accent-err:#8A1F2E;
  --frame:#fff;
  --amber:#F0B85A;
  --shade-strong:rgba(0,0,0,.65);
  --err-soft:rgba(255,122,112,.18);
  --ok-deep:#5FDDA9;
  --err-deep:#FF8F86;
  --sh-sm:0 1px 2px rgba(0,0,0,.30);
  --sh-md:0 10px 30px rgba(0,0,0,.35);
  --sh-lg:0 24px 60px rgba(0,0,0,.45);
}
:root[data-theme="forest-light"]{
  color-scheme:light;
  --paper:#F7FBF1;
  --paper-2:#FFFFFF;
  --paper-warm:#F1F5EB;
  --ink:#191D17;
  --ink-2:#424940;
  --ink-3:#666C63;
  --line:#E0E4DB;
  --line-2:#C2C9BD;
  --nav-bg:rgba(247,251,241,.82);
  --tok-on-line:#C2C9BD;
  --violet:#3B6939;
  --violet-soft:#D5E8CE;
  --on-accent:#FFFFFF;
  --tok-on:#D5E8CE;
  --violet-deep:#245024;
  --violet-ink:#0A390F;
  --violet-tint:rgba(59,105,57,.10);
  --stage-a:#C7FCBF;
  --stage-b:#AEE2A7;
  --stage-c:#8CBD85;
  --toast-icon:#A0CFD4;
  --meta:#3B6939;
  --lemon:#BCEBF0;
  --on-lemon:#1F4D52;
  --hl:#BCEBF0;
  --lemon-deep:#AEDDE2;
  --lemon-tint:rgba(160,207,212,.35);
  --lemon-soft:#CAF9FF;
  --done-score:#BCEBF0;
  --a1:#34C7A6;
  --a1-tint:rgba(52,199,166,.14);
  --a2:#38A9F0;
  --a2-tint:rgba(56,169,240,.14);
  --b1:#6C5CE7;
  --b1-tint:rgba(108,92,231,.14);
  --b2:#F0713B;
  --b2-tint:rgba(240,113,59,.14);
  --c1:#D9A21B;
  --c1-tint:rgba(217,162,27,.15);
  --ok:#1FA97A;
  --ok-tint:rgba(31,169,122,.13);
  --err:#E4574C;
  --err-tint:rgba(228,87,76,.12);
  --ok-ink:#2f8a55;
  --ok-bg:#f1faf4;
  --ok-line:#7cc49a;
  --err-ink:#b3402f;
  --err-bg:#fdf4f1;
  --err-line:#e3b3a8;
  --warn-ink:#8a3a1e;
  --warn-bg:#fdf1ec;
  --warn-line:#f0c3b3;
  --fire:#e8763d;
  --ice:#4a8fd0;
  --ice-ink:#3b6fb0;
  --gold:#c9a227;
  --coral:#e5674e;
  --shade:rgba(30,20,80,.35);
  --shade-soft:rgba(30,20,80,.22);
  --ok-chip:#bfe6cd;
  --err-chip:#f2c9c9;
  --on-accent-err:#ffc9c0;
  --frame:#fff;
  --amber:#e8a33d;
  --shade-strong:rgba(30,27,57,.55);
  --err-soft:#ffe8e8;
  --ok-deep:#1c5c3a;
  --err-deep:#8c2f2f;
  --sh-sm:0 1px 2px rgba(30,27,57,.06);
  --sh-md:0 10px 30px rgba(75,63,207,.10);
  --sh-lg:0 24px 60px rgba(75,63,207,.16);
}
:root[data-theme="forest-dark"]{
  color-scheme:dark;
  --paper:#10140F;
  --paper-2:#1D211B;
  --paper-warm:#191D17;
  --ink:#E0E4DB;
  --ink-2:#C2C9BD;
  --ink-3:#99A095;
  --line:#323630;
  --line-2:#424940;
  --nav-bg:rgba(16,20,15,.82);
  --tok-on-line:#424940;
  --violet:#A1D39A;
  --violet-soft:#3B4B38;
  --on-accent:#0A390F;
  --tok-on:#3B4B38;
  --violet-deep:#BCF0B4;
  --violet-ink:#C2F6B9;
  --violet-tint:rgba(161,211,154,.14);
  --stage-a:#103D13;
  --stage-b:#002D06;
  --stage-c:#001D03;
  --toast-icon:#3B6939;
  --meta:#10140F;
  --lemon:#1F4D52;
  --on-lemon:#BCEBF0;
  --hl:#1F4D52;
  --lemon-deep:#104246;
  --lemon-tint:rgba(160,207,212,.10);
  --lemon-soft:rgba(160,207,212,.10);
  --done-score:#0A390F;
  --a1:#43D6B5;
  --a1-tint:rgba(67,214,181,.18);
  --a2:#5BB8F5;
  --a2-tint:rgba(91,184,245,.18);
  --b1:#9A8CFF;
  --b1-tint:rgba(154,140,255,.18);
  --b2:#FF8A57;
  --b2-tint:rgba(255,138,87,.18);
  --c1:#E8B53A;
  --c1-tint:rgba(232,181,58,.18);
  --ok:#43D19E;
  --ok-tint:rgba(67,209,158,.15);
  --err:#FF7A70;
  --err-tint:rgba(255,122,112,.15);
  --ok-ink:#5FDDA9;
  --ok-bg:rgba(67,209,158,.10);
  --ok-line:rgba(67,209,158,.45);
  --err-ink:#FF8F86;
  --err-bg:rgba(255,122,112,.10);
  --err-line:rgba(255,122,112,.45);
  --warn-ink:#FFB08A;
  --warn-bg:rgba(255,138,87,.12);
  --warn-line:rgba(255,138,87,.40);
  --fire:#FF9A5C;
  --ice:#7FB6EE;
  --ice-ink:#8FC0F2;
  --gold:#E8C14A;
  --coral:#FF8A70;
  --shade:rgba(0,0,0,.55);
  --shade-soft:rgba(0,0,0,.40);
  --ok-chip:rgba(67,209,158,.25);
  --err-chip:rgba(255,122,112,.25);
  --on-accent-err:#8A1F2E;
  --frame:#fff;
  --amber:#F0B85A;
  --shade-strong:rgba(0,0,0,.65);
  --err-soft:rgba(255,122,112,.18);
  --ok-deep:#5FDDA9;
  --err-deep:#FF8F86;
  --sh-sm:0 1px 2px rgba(0,0,0,.30);
  --sh-md:0 10px 30px rgba(0,0,0,.35);
  --sh-lg:0 24px 60px rgba(0,0,0,.45);
}
:root[data-theme="sunset-light"]{
  color-scheme:light;
  --paper:#FFF8F7;
  --paper-2:#FFFFFF;
  --paper-warm:#FFF0F0;
  --ink:#221919;
  --ink-2:#524343;
  --ink-3:#786666;
  --line:#F0DEDE;
  --line-2:#D7C1C1;
  --nav-bg:rgba(255,248,247,.82);
  --tok-on-line:#D7C1C1;
  --violet:#8F4A4C;
  --violet-soft:#FFDAD9;
  --on-accent:#FFFFFF;
  --tok-on:#FFDAD9;
  --violet-deep:#733336;
  --violet-ink:#561D21;
  --violet-tint:rgba(143,74,76,.10);
  --stage-a:#FFE9E8;
  --stage-b:#FFC7C6;
  --stage-c:#F0999B;
  --toast-icon:#E5C18D;
  --meta:#8F4A4C;
  --lemon:#FFDDAF;
  --on-lemon:#5B421A;
  --hl:#FFDDAF;
  --lemon-deep:#F4CF9A;
  --lemon-tint:rgba(229,193,141,.35);
  --lemon-soft:#FFEEDB;
  --done-score:#FFDDAF;
  --a1:#34C7A6;
  --a1-tint:rgba(52,199,166,.14);
  --a2:#38A9F0;
  --a2-tint:rgba(56,169,240,.14);
  --b1:#6C5CE7;
  --b1-tint:rgba(108,92,231,.14);
  --b2:#F0713B;
  --b2-tint:rgba(240,113,59,.14);
  --c1:#D9A21B;
  --c1-tint:rgba(217,162,27,.15);
  --ok:#1FA97A;
  --ok-tint:rgba(31,169,122,.13);
  --err:#E4574C;
  --err-tint:rgba(228,87,76,.12);
  --ok-ink:#2f8a55;
  --ok-bg:#f1faf4;
  --ok-line:#7cc49a;
  --err-ink:#b3402f;
  --err-bg:#fdf4f1;
  --err-line:#e3b3a8;
  --warn-ink:#8a3a1e;
  --warn-bg:#fdf1ec;
  --warn-line:#f0c3b3;
  --fire:#e8763d;
  --ice:#4a8fd0;
  --ice-ink:#3b6fb0;
  --gold:#c9a227;
  --coral:#e5674e;
  --shade:rgba(30,20,80,.35);
  --shade-soft:rgba(30,20,80,.22);
  --ok-chip:#bfe6cd;
  --err-chip:#f2c9c9;
  --on-accent-err:#ffc9c0;
  --frame:#fff;
  --amber:#e8a33d;
  --shade-strong:rgba(30,27,57,.55);
  --err-soft:#ffe8e8;
  --ok-deep:#1c5c3a;
  --err-deep:#8c2f2f;
  --sh-sm:0 1px 2px rgba(30,27,57,.06);
  --sh-md:0 10px 30px rgba(75,63,207,.10);
  --sh-lg:0 24px 60px rgba(75,63,207,.16);
}
:root[data-theme="sunset-dark"]{
  color-scheme:dark;
  --paper:#1A1111;
  --paper-2:#271D1D;
  --paper-warm:#221919;
  --ink:#F0DEDE;
  --ink-2:#D7C1C1;
  --ink-3:#AD9999;
  --line:#3D3232;
  --line-2:#524343;
  --nav-bg:rgba(26,17,17,.82);
  --tok-on-line:#524343;
  --violet:#FFB3B3;
  --violet-soft:#5D3F3F;
  --on-accent:#561D21;
  --tok-on:#5D3F3F;
  --violet-deep:#FFDAD9;
  --violet-ink:#FFE1E1;
  --violet-tint:rgba(255,179,179,.14);
  --stage-a:#5C2125;
  --stage-b:#491217;
  --stage-c:#35040A;
  --toast-icon:#8F4A4C;
  --meta:#1A1111;
  --lemon:#5B421A;
  --on-lemon:#FFDDAF;
  --hl:#5B421A;
  --lemon-deep:#4E370F;
  --lemon-tint:rgba(229,193,141,.10);
  --lemon-soft:rgba(229,193,141,.10);
  --done-score:#561D21;
  --a1:#43D6B5;
  --a1-tint:rgba(67,214,181,.18);
  --a2:#5BB8F5;
  --a2-tint:rgba(91,184,245,.18);
  --b1:#9A8CFF;
  --b1-tint:rgba(154,140,255,.18);
  --b2:#FF8A57;
  --b2-tint:rgba(255,138,87,.18);
  --c1:#E8B53A;
  --c1-tint:rgba(232,181,58,.18);
  --ok:#43D19E;
  --ok-tint:rgba(67,209,158,.15);
  --err:#FF7A70;
  --err-tint:rgba(255,122,112,.15);
  --ok-ink:#5FDDA9;
  --ok-bg:rgba(67,209,158,.10);
  --ok-line:rgba(67,209,158,.45);
  --err-ink:#FF8F86;
  --err-bg:rgba(255,122,112,.10);
  --err-line:rgba(255,122,112,.45);
  --warn-ink:#FFB08A;
  --warn-bg:rgba(255,138,87,.12);
  --warn-line:rgba(255,138,87,.40);
  --fire:#FF9A5C;
  --ice:#7FB6EE;
  --ice-ink:#8FC0F2;
  --gold:#E8C14A;
  --coral:#FF8A70;
  --shade:rgba(0,0,0,.55);
  --shade-soft:rgba(0,0,0,.40);
  --ok-chip:rgba(67,209,158,.25);
  --err-chip:rgba(255,122,112,.25);
  --on-accent-err:#8A1F2E;
  --frame:#fff;
  --amber:#F0B85A;
  --shade-strong:rgba(0,0,0,.65);
  --err-soft:rgba(255,122,112,.18);
  --ok-deep:#5FDDA9;
  --err-deep:#FF8F86;
  --sh-sm:0 1px 2px rgba(0,0,0,.30);
  --sh-md:0 10px 30px rgba(0,0,0,.35);
  --sh-lg:0 24px 60px rgba(0,0,0,.45);
}
:root[data-theme="blue-light"]{
  color-scheme:light;
  --paper:#F8F9FF;
  --paper-2:#FFFFFF;
  --paper-warm:#F2F3FA;
  --ink:#191C20;
  --ink-2:#43474E;
  --ink-3:#666B72;
  --line:#E1E2E8;
  --line-2:#C3C6CF;
  --nav-bg:rgba(248,249,255,.82);
  --tok-on-line:#C3C6CF;
  --violet:#36618E;
  --violet-soft:#D7E3F8;
  --on-accent:#FFFFFF;
  --tok-on:#D7E3F8;
  --violet-deep:#1A4975;
  --violet-ink:#003258;
  --violet-tint:rgba(54,97,142,.10);
  --stage-a:#E5EEFF;
  --stage-b:#B9D7FF;
  --stage-c:#8BB4E6;
  --toast-icon:#D7BEE4;
  --meta:#36618E;
  --lemon:#F3DAFF;
  --on-lemon:#523F5F;
  --hl:#F3DAFF;
  --lemon-deep:#E5CBF3;
  --lemon-tint:rgba(215,190,228,.35);
  --lemon-soft:#FBECFF;
  --done-score:#F3DAFF;
  --a1:#34C7A6;
  --a1-tint:rgba(52,199,166,.14);
  --a2:#38A9F0;
  --a2-tint:rgba(56,169,240,.14);
  --b1:#6C5CE7;
  --b1-tint:rgba(108,92,231,.14);
  --b2:#F0713B;
  --b2-tint:rgba(240,113,59,.14);
  --c1:#D9A21B;
  --c1-tint:rgba(217,162,27,.15);
  --ok:#1FA97A;
  --ok-tint:rgba(31,169,122,.13);
  --err:#E4574C;
  --err-tint:rgba(228,87,76,.12);
  --ok-ink:#2f8a55;
  --ok-bg:#f1faf4;
  --ok-line:#7cc49a;
  --err-ink:#b3402f;
  --err-bg:#fdf4f1;
  --err-line:#e3b3a8;
  --warn-ink:#8a3a1e;
  --warn-bg:#fdf1ec;
  --warn-line:#f0c3b3;
  --fire:#e8763d;
  --ice:#4a8fd0;
  --ice-ink:#3b6fb0;
  --gold:#c9a227;
  --coral:#e5674e;
  --shade:rgba(30,20,80,.35);
  --shade-soft:rgba(30,20,80,.22);
  --ok-chip:#bfe6cd;
  --err-chip:#f2c9c9;
  --on-accent-err:#ffc9c0;
  --frame:#fff;
  --amber:#e8a33d;
  --shade-strong:rgba(30,27,57,.55);
  --err-soft:#ffe8e8;
  --ok-deep:#1c5c3a;
  --err-deep:#8c2f2f;
  --sh-sm:0 1px 2px rgba(30,27,57,.06);
  --sh-md:0 10px 30px rgba(75,63,207,.10);
  --sh-lg:0 24px 60px rgba(75,63,207,.16);
}
:root[data-theme="blue-dark"]{
  color-scheme:dark;
  --paper:#111418;
  --paper-2:#1D2024;
  --paper-warm:#191C20;
  --ink:#E1E2E8;
  --ink-2:#C3C6CF;
  --ink-3:#9A9EA6;
  --line:#32353A;
  --line-2:#43474E;
  --nav-bg:rgba(17,20,24,.82);
  --tok-on-line:#43474E;
  --violet:#A0CAFD;
  --violet-soft:#3B4858;
  --on-accent:#003258;
  --tok-on:#3B4858;
  --violet-deep:#D1E4FF;
  --violet-ink:#DBE9FF;
  --violet-tint:rgba(160,202,253,.14);
  --stage-a:#003660;
  --stage-b:#002747;
  --stage-c:#001930;
  --toast-icon:#36618E;
  --meta:#111418;
  --lemon:#523F5F;
  --on-lemon:#F3DAFF;
  --hl:#523F5F;
  --lemon-deep:#463453;
  --lemon-tint:rgba(215,190,228,.10);
  --lemon-soft:rgba(215,190,228,.10);
  --done-score:#003258;
  --a1:#43D6B5;
  --a1-tint:rgba(67,214,181,.18);
  --a2:#5BB8F5;
  --a2-tint:rgba(91,184,245,.18);
  --b1:#9A8CFF;
  --b1-tint:rgba(154,140,255,.18);
  --b2:#FF8A57;
  --b2-tint:rgba(255,138,87,.18);
  --c1:#E8B53A;
  --c1-tint:rgba(232,181,58,.18);
  --ok:#43D19E;
  --ok-tint:rgba(67,209,158,.15);
  --err:#FF7A70;
  --err-tint:rgba(255,122,112,.15);
  --ok-ink:#5FDDA9;
  --ok-bg:rgba(67,209,158,.10);
  --ok-line:rgba(67,209,158,.45);
  --err-ink:#FF8F86;
  --err-bg:rgba(255,122,112,.10);
  --err-line:rgba(255,122,112,.45);
  --warn-ink:#FFB08A;
  --warn-bg:rgba(255,138,87,.12);
  --warn-line:rgba(255,138,87,.40);
  --fire:#FF9A5C;
  --ice:#7FB6EE;
  --ice-ink:#8FC0F2;
  --gold:#E8C14A;
  --coral:#FF8A70;
  --shade:rgba(0,0,0,.55);
  --shade-soft:rgba(0,0,0,.40);
  --ok-chip:rgba(67,209,158,.25);
  --err-chip:rgba(255,122,112,.25);
  --on-accent-err:#8A1F2E;
  --frame:#fff;
  --amber:#F0B85A;
  --shade-strong:rgba(0,0,0,.65);
  --err-soft:rgba(255,122,112,.18);
  --ok-deep:#5FDDA9;
  --err-deep:#FF8F86;
  --sh-sm:0 1px 2px rgba(0,0,0,.30);
  --sh-md:0 10px 30px rgba(0,0,0,.35);
  --sh-lg:0 24px 60px rgba(0,0,0,.45);
}
/* ── конец M3-семейств ── */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--paper);
  font-size:var(--step-0); line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* фон-«аврора»: мягкие облака цветов палитры на весь экран, за содержимым. «Вид» → Фон (data-bg): live - медленно плывут
   (только transform одного слоя - браузер двигает готовую картинку, без перерисовки), calm - стоят, plain - нет */
/* сила облаков: на светлом фоне - заметно; на тёмном яркий «лимон» 55% съедал контраст вторичного текста (~1.5:1) - там слабее */
:root{--aur-v:26%;--aur-l:55%}
:root[data-mode="dark"]{--aur-v:22%;--aur-l:18%}
body::before{content:'';position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 30% at 18% 12%,color-mix(in srgb,var(--violet) var(--aur-v),transparent),transparent 70%),
    radial-gradient(32% 28% at 82% 18%,color-mix(in srgb,var(--lemon) var(--aur-l),transparent),transparent 70%),
    radial-gradient(42% 34% at 70% 78%,color-mix(in srgb,var(--violet) calc(var(--aur-v) - 4%),transparent),transparent 72%),
    radial-gradient(30% 26% at 22% 82%,color-mix(in srgb,var(--lemon) calc(var(--aur-l) - 5%),transparent),transparent 70%)}
/* 0.40.0 было 48 с и сдвиг 5% на прозрачности 10% - владелец не увидел движения */
:root[data-bg="live"] body::before{animation:aurora 22s ease-in-out infinite alternate;will-change:transform}
:root[data-bg="calm"] .blob{animation:none}
:root[data-bg="plain"] body::before,:root[data-bg="plain"] .blob{display:none}
@keyframes aurora{0%{transform:translate3d(0,0,0) rotate(0) scale(1)}50%{transform:translate3d(-9%,7%,0) rotate(18deg) scale(1.12)}
  100%{transform:translate3d(8%,-6%,0) rotate(-14deg) scale(1.04)}}
@media(prefers-reduced-motion:reduce){body::before{animation:none!important}}
::selection{background:var(--lemon);color:var(--on-lemon)}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--r-full)}
a{color:var(--violet-deep);text-decoration:none}
strong{font-weight:700;color:var(--violet-ink)}
em{font-style:italic}
code,kbd{font-family:var(--font-mono);font-size:.9em;background:var(--violet-soft);
  padding:.1em .4em;border-radius:6px;color:var(--violet-deep)}

/* ── NAV ── */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:900;
  background:var(--nav-bg);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav-bar{position:absolute;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--violet),var(--lemon));transition:width .1s linear}
.nav-in{max-width:var(--wide);margin:0 auto;height:100%;padding:0 var(--sp-5);position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.nav-dots{position:absolute;left:50%;transform:translateX(-50%)}
.nav-brand{font-family:var(--font-display);font-weight:600;font-size:var(--step-1);
  font-style:italic;color:var(--violet-deep);white-space:nowrap;letter-spacing:-.01em}
.nav-brand a{color:inherit}
.nav-links{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.nav-dots{display:flex;gap:9px;align-items:center;flex-wrap:nowrap}
.dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--line-2);
  background:transparent;cursor:pointer;padding:0;transition:.15s var(--ease);position:relative}
.dot:hover{border-color:var(--violet);transform:scale(1.25)}
.dot.on{border-color:var(--violet);background:var(--violet)}
.dot.done{background:var(--lemon);border-color:var(--lemon-deep)}
.dot[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:20px;right:0;
  background:var(--ink);color:var(--paper);font-size:var(--step--1);padding:5px 9px;border-radius:8px;
  white-space:nowrap;box-shadow:var(--sh-md);pointer-events:none;z-index:10}
.nav-link{font-size:var(--step--1);font-weight:600;color:var(--ink-2);
  padding:6px 12px;border-radius:var(--r-full);border:1px solid var(--line-2);white-space:nowrap}
.nav.hide-dots .nav-dots{display:none}
.nav-link .msi{font-size:18px;color:var(--violet);margin-right:.1rem}
.nav-link[aria-current="page"]{background:var(--violet-soft);border-color:var(--violet);color:var(--violet-deep)}
.nav-link:hover{background:var(--violet-soft);color:var(--violet-deep);border-color:var(--violet)}
.nav-burger{display:none;margin-left:auto;width:38px;height:38px;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:var(--r-full);background:transparent;cursor:pointer;flex-shrink:0;padding:0;position:relative}
.nav-burger:hover{border-color:var(--violet);background:var(--violet-soft)}
.nav-burger .bar{display:block;position:absolute;left:10px;width:18px;height:2px;border-radius:2px;
  background:var(--ink-2);transition:transform .2s var(--ease),opacity .15s var(--ease),top .2s var(--ease)}
.nav-burger .bar:nth-child(1){top:14px}
.nav-burger .bar:nth-child(2){top:18px}
.nav-burger .bar:nth-child(3){top:22px}
.nav-burger:hover .bar{background:var(--violet-deep)}
.nav-burger[aria-expanded="true"] .bar:nth-child(1){top:18px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] .bar:nth-child(3){top:18px;transform:rotate(-45deg)}
/* бургер включает nav.js: на узком экране или когда пилюли не влезают рядом с брендом и точками */
.nav.has-burger .nav-burger{display:inline-flex}
.nav.has-burger .nav-links{display:none;position:absolute;top:100%;left:0;right:0;
  flex-direction:column;align-items:stretch;gap:0;margin-left:0;
  background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:0 16px 28px -18px var(--shade-soft)}
.nav.has-burger .nav-links.open{display:flex}
.nav.has-burger .nav-link{text-align:left;border:none;border-radius:0;white-space:normal;
  padding:1rem var(--sp-5);border-bottom:1px solid var(--line)}
.nav.has-burger .nav-link:last-child{border-bottom:none}
.nav.has-burger .nav-link:hover{background:var(--violet-soft);border-color:var(--line)}

/* ── HERO ── */
.hero{min-height:var(--hero-h,92vh);display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + var(--sp-8)) var(--sp-5) var(--sp-8);position:relative;overflow:hidden}
.hero-wrap{max-width:var(--wide);margin:0 auto;width:100%;position:relative;z-index:2}
.eyebrow{font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.22em;color:var(--violet);font-weight:600;margin-bottom:var(--sp-4)}
.hero h1{font-family:var(--font-display);font-weight:600;font-size:var(--step-6);line-height:.98;
  letter-spacing:-.02em;max-width:16ch;color:var(--ink)}
.hero h1 .il{font-style:italic;color:var(--violet-deep)}
.hero h1 .hl{background:linear-gradient(180deg,transparent 62%,var(--hl) 62%);padding:0 .05em}
.hero-sub{font-size:var(--step-1);color:var(--ink-2);margin-top:var(--sp-5);max-width:54ch;line-height:1.55}
.hero-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.blob{position:absolute;border-radius:44% 56% 62% 38%/48% 42% 58% 52%;filter:blur(48px);opacity:.38;z-index:1;will-change:transform}   /* свечение, а не фигура (обрезанное пятно у края выглядело как баг) */
.blob.v{width:340px;height:340px;background:radial-gradient(circle at 35% 35%,var(--violet),var(--violet-deep));
  top:-60px;right:-70px;animation:float 18s var(--ease) infinite}
.blob.l{width:220px;height:220px;background:radial-gradient(circle at 40% 40%,var(--lemon),var(--lemon-deep));
  bottom:-40px;right:20%;animation:float 22s var(--ease) infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-24px,18px) rotate(12deg)}}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:var(--step-0);
  padding:.85rem 1.7rem;border-radius:var(--r-full);border:2px solid transparent;cursor:pointer;
  font-family:var(--font-body);transition:.18s var(--ease);text-decoration:none;line-height:1}
.btn-primary{background:var(--violet);color:var(--on-accent)}
.btn-primary:hover{background:var(--violet-deep);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-lemon{background:var(--lemon);color:var(--on-lemon)}
.btn-lemon:hover{background:var(--lemon-deep);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-ghost{background:transparent;color:var(--violet-deep);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--violet);background:var(--violet-soft)}

/* ── SECTION / MODULE ── */
.section{padding:var(--sec-y,var(--sp-9)) var(--sp-5);position:relative}
.wrap{max-width:var(--wide);margin:0 auto}
.read{max-width:var(--read);margin:0 auto}
.module{min-height:100vh;scroll-margin-top:var(--nav-h);
  padding:var(--sec-y,var(--sp-9)) var(--sp-5);border-top:1px solid var(--line)}
.module:nth-of-type(even){background:var(--paper-warm)}
.m-head{max-width:var(--read);margin:0 auto var(--sp-6)}
.m-num{font-family:var(--font-display);font-weight:600;font-style:italic;font-size:var(--step-4);
  line-height:1;color:var(--violet);opacity:.6}
.m-title{font-family:var(--font-display);font-weight:600;font-size:var(--step-4);line-height:1.05;
  letter-spacing:-.02em;margin-top:var(--sp-2);color:var(--ink)}
.m-sub{color:var(--ink-2);font-size:var(--step-1);margin-top:var(--sp-3);max-width:60ch}
.prose{max-width:var(--read);margin:0 auto}
.prose h3{font-family:var(--font-display);font-weight:600;font-size:var(--step-2);
  margin:var(--sp-6) 0 var(--sp-3);letter-spacing:-.01em}
.prose p{margin-bottom:var(--sp-4);max-width:68ch}
.prose ul,.prose ol{margin:0 0 var(--sp-4) 1.3rem}
.prose li{margin-bottom:var(--sp-2)}
.lead{font-size:var(--step-1);color:var(--ink);line-height:1.55}

/* ── LEVEL CHIP ── */
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);
  font-size:var(--step--1);font-weight:600;padding:.28rem .7rem;border-radius:var(--r-full);
  text-transform:uppercase;letter-spacing:.05em}
.chip.a1{background:var(--a1-tint);color:var(--a1)} .chip.a2{background:var(--a2-tint);color:var(--a2)}
.chip.b1{background:var(--b1-tint);color:var(--b1)} .chip.b2{background:var(--b2-tint);color:var(--b2)}
.chip.c1{background:var(--c1-tint);color:var(--c1)}

/* ── CARDS ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}   /* только для скринридера */
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--sh-sm);transition:.2s var(--ease)}
.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr}}
a.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--violet)}
.card-eyebrow{font-family:var(--font-mono);font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--violet);display:block;margin-bottom:.4rem}
.card-title{font-family:var(--font-display);font-weight:600;font-size:var(--step-2);
  letter-spacing:-.01em;color:var(--ink);display:block;margin-bottom:.5rem;line-height:1.1}
.card-desc{color:var(--ink-2);font-size:var(--step-0);line-height:1.55}
/* «Неделя переезда» (dashboard.js): пройденные серии - точки */
/* друзья по ссылке (friends-ui.js) */
.fr-card{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.fr-card .btn{margin-top:.25rem}
.fr-race{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:.25rem}
.fr-race li{display:flex;justify-content:space-between;gap:1rem;padding:.3rem .6rem;border-radius:var(--r-md,12px);background:var(--paper-2)}
.fr-race li.me{outline:2px solid var(--violet)}
.fr-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:.4rem}
.fr-list li{display:flex;flex-wrap:wrap;gap:.25rem .6rem;align-items:baseline;overflow-wrap:anywhere}
.fr-list li i{font-style:normal;color:var(--ink-3);font-size:var(--step--1)}
.fr-x{margin-left:auto;border:0;background:none;color:var(--ink-3);font:inherit;font-size:1.2rem;line-height:1;cursor:pointer;padding:0 .3rem}
.fr-x:hover{color:var(--err)}
.fr-note{margin:0;color:var(--ink-3);font-size:var(--step--1)}
.fr-dlg{border:1px solid var(--line);border-radius:var(--r-md,16px);background:var(--paper);color:var(--ink);padding:1rem 1.2rem;max-width:min(92vw,360px)}
.fr-dlg input{width:100%;font:inherit;padding:.5rem .7rem;border:1px solid var(--line-2);border-radius:var(--r-md,12px);background:var(--paper-2);color:var(--ink)}
.fr-dlg .fr-h{margin:0 0 .6rem;font-weight:600}
.fr-row{display:flex;gap:.5rem;margin-top:.8rem}
.fr-toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,150%);background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:var(--r-full);z-index:60;transition:transform .25s;max-width:92vw;overflow-wrap:anywhere}
.fr-toast.show{transform:translate(-50%,0)}
.sr-dots{display:flex;gap:.4rem;margin-top:.75rem}
.sr-dots i{width:.6rem;height:.6rem;border-radius:var(--r-full);border:2px solid var(--violet);display:block}
.sr-dots i.on{background:var(--violet)}
.card-desc.pp-best:not([hidden]){display:block;margin-top:.5rem;font-weight:600;color:var(--ink)}   /* итог дня «Паспортного контроля» (dashboard.js) */
.card-go{display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--sp-4);
  font-weight:700;color:var(--violet-deep);font-size:var(--step-0)}
a.card:hover .card-go{gap:.7rem}

/* ── TRACK (hub) ── */
.track{max-width:var(--wide);margin:0 auto;padding:var(--sp-7) var(--sp-5) 0}
.track-head{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:var(--sp-5)}
.track-ico{font-size:1.8rem;line-height:1}
.track-title{font-family:var(--font-display);font-weight:600;font-size:var(--step-3);letter-spacing:-.01em}
.track-count{margin-left:auto;font-family:var(--font-mono);font-size:var(--step--1);color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:var(--r-full);padding:.25rem .7rem}
/* «Сегодня» (index.html #today, view.js): карточки дня в ряд одной высоты, их секции без своих заголовков и отступов; на узком - друг под другом */
#today[hidden]{display:none}
.today-row{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:stretch}
.today-row>.section{padding:0}
.today-row .track{padding:0;max-width:none;height:100%}
.today-row .track-head{display:none}
.today-row .grid{display:block;height:100%}
.today-row .card{height:100%;display:flex;flex-direction:column;align-items:flex-start}
.today-row .card .card-go{margin-top:auto;padding-top:var(--sp-4)}
.fr-today{display:none}
.today-row .fr-today{display:block}
.today-row .fr-today .card-title{margin-bottom:0}
.today-row .fr-row{margin-top:auto;padding-top:var(--sp-4)}
#passport .card-go{display:flex;width:fit-content}   /* после строчного описания - своей строкой, как у соседних карточек */
.fr-more{width:100%}
.fr-more summary{cursor:pointer;color:var(--violet-deep);font-weight:600}
.fr-more[open] summary{margin-bottom:.5rem}

/* ── NOTE / EXAMPLE / KEY ── */
.note{border-left:4px solid var(--violet);background:var(--violet-soft);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) auto;max-width:var(--read)}
.note.warn{border-color:var(--b2);background:var(--b2-tint)}
.note.tip{border-color:var(--a1);background:var(--a1-tint)}
.note-label{font-family:var(--font-mono);font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--violet-deep);margin-bottom:.3rem;display:block}
.note.warn .note-label{color:var(--b2)} .note.tip .note-label{color:var(--a1)}
.ex{font-family:var(--font-mono);font-size:var(--step-0);background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);margin:var(--sp-4) auto;
  max-width:var(--read);line-height:1.9}
.ex .g{color:var(--ok);font-weight:600} .ex .b{color:var(--err);text-decoration:line-through}
.ex .hl{background:var(--lemon-tint);border-radius:4px;padding:0 .15em;font-style:normal}

/* ── TABLE ── */
.tbl-wrap{max-width:var(--read);margin:var(--sp-5) auto;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--step-0)}
th,td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line)}
th{font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.05em;color:var(--violet);font-weight:600}
tbody tr:hover,tr:hover{background:var(--violet-soft)}

/* ── QUIZ ── */
.quiz{max-width:var(--read);margin:var(--sp-6) auto;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-sm)}
.quiz-q{font-weight:600;font-size:var(--step-1);margin-bottom:var(--sp-4);line-height:1.4}
.quiz-q .gap{display:inline-block;border-bottom:2px dashed var(--violet);padding:0 1.6em}
.quiz-opts{display:flex;flex-direction:column;gap:.6rem}
.opt{text-align:left;font-family:var(--font-body);font-size:var(--step-0);cursor:pointer;
  padding:.8rem 1rem;border-radius:var(--r-md);border:2px solid var(--line-2);background:var(--paper);
  color:var(--ink);transition:.15s var(--ease);display:flex;align-items:center;gap:.6rem}
.opt:hover:not(:disabled){border-color:var(--violet);background:var(--violet-soft)}
.opt .mark{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}
.opt .mark .msi{font-size:1rem;vertical-align:middle}
.opt.correct{border-color:var(--ok);background:var(--ok-tint)}
.opt.correct .mark{border-color:var(--ok);background:var(--ok);color:var(--on-accent)}
.opt.wrong{border-color:var(--err);background:var(--err-tint)}
.opt.wrong .mark{border-color:var(--err);background:var(--err);color:var(--on-accent)}
.opt:disabled{cursor:default}
.gapfill{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:var(--sp-3)}
.gapfill input{font-family:var(--font-mono);font-size:var(--step-0);padding:.6rem .8rem;
  border:2px solid var(--line-2);border-radius:var(--r-md);background:var(--paper);color:var(--ink);min-width:160px}
.gapfill input:focus{outline:none;border-color:var(--violet)}
.gapfill input.correct{border-color:var(--ok);background:var(--ok-tint)}
.gapfill input.wrong{border-color:var(--err);background:var(--err-tint)}
.quiz-fb{margin-top:var(--sp-4);font-size:var(--step-0);padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);display:none;line-height:1.5}
.quiz-fb.show{display:block}
.quiz-fb.ok{background:var(--ok-tint);color:var(--ok)} .quiz-fb.no{background:var(--err-tint);color:var(--err)}
.quiz-fb b{color:inherit}

/* ── COMPLETION ── */
.done-card{max-width:var(--read);margin:var(--sp-6) auto;text-align:center;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));color:var(--on-accent);
  border-radius:var(--r-xl);padding:var(--sp-8) var(--sp-5)}
.done-card h2{font-family:var(--font-display);font-weight:600;font-size:var(--step-4);color:var(--on-accent)}
.done-card p{color:var(--on-accent);opacity:.85;margin:var(--sp-3) auto var(--sp-5);max-width:44ch}
.done-score{font-family:var(--font-display);font-size:var(--step-5);color:var(--done-score);font-weight:600}
.done-ghost{color:var(--on-accent);border-color:color-mix(in srgb,var(--on-accent) 40%,transparent)}   /* «Все курсы» на заливке карточки «пройдено» */

/* ── FOOTER ── */
.foot{max-width:var(--wide);margin:var(--sp-8) auto 0;padding:var(--sp-7) var(--sp-5);
  text-align:center;color:var(--ink-3);border-top:1px solid var(--line);font-size:var(--step-0)}

/* ── reveal on scroll ── */
.reveal{opacity:0;transform:translateY(24px);transition:.7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
  .blob{animation:none}}

/* ============================================================
   ИКОНКИ — Material Symbols Rounded вместо эмодзи.
   Шрифт грузится в <head> каждой страницы (как Fraunces/Manrope).
   .msi наследует font-size контекста — не задаёт свой.
   ============================================================ */
/* иконки Material Symbols Rounded (Apache 2.0) - свой файл, а не Google Fonts: оттуда шрифт в несколько МБ не всегда догружался
   и вместо иконок были видны их названия. В файле только наши иконки (список - assets/fonts/icons.txt, проверяет icons.test.js);
   новая иконка - пересобрать подмножество (команда - в README) */
@font-face{font-family:'Material Symbols Rounded';font-style:normal;font-weight:400;font-display:block;
  src:url('fonts/material-symbols-rounded.woff2?v=238d5f7e') format('woff2')}
.msi{
  font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;
  font-size:1em;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-smoothing:antialiased;vertical-align:-14%;
  font-variation-settings:'FILL' 0,'wght' 450,'GRAD' 0,'opsz' 24;
}
.msi.fill{font-variation-settings:'FILL' 1,'wght' 450,'GRAD' 0,'opsz' 24}
.msi.sm{font-size:.85em}
.track-ico,.card-go .msi{font-size:1.8rem}
.card-go{display:inline-flex;align-items:center;gap:.4rem}
.card-go .msi{font-size:1.1em}

/* ============================================================
   ГЕЙМИФИКАЦИЯ — XP-кольцо, тосты, комбо, квесты, достижения
   ============================================================ */
.xp-ring{width:76px;height:76px;border-radius:50%;flex-shrink:0;position:relative;
  background:conic-gradient(var(--violet) calc(var(--pct,0)*1%),var(--line) 0);
  transition:background 1s var(--ease)}
.xp-ring::before{content:'';position:absolute;inset:6px;background:var(--paper-2);border-radius:50%}
.xp-ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}
.xp-ring-in b{font-family:var(--font-display);font-size:var(--step-2);color:var(--violet-deep);line-height:1}
.xp-ring-in small{font-size:.66rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-top:.1rem}

.gm-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(16px);z-index:1300;
  background:var(--ink);color:var(--paper);padding:.75rem 1.1rem;border-radius:var(--r-lg);display:flex;align-items:center;gap:.7rem;
  box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:.35s var(--ease);max-width:min(92vw,380px)}
.gm-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.gm-toast .msi{font-size:1.7rem;color:var(--toast-icon);flex-shrink:0}
.gm-toast b{display:block;font-size:var(--step-0);font-family:var(--font-display)}
.gm-toast span{display:block;font-size:var(--step--1);opacity:.72}

.combo-flash{position:fixed;top:calc(var(--nav-h) + 12px);right:12px;z-index:1250;display:flex;align-items:center;gap:.35rem;
  background:linear-gradient(135deg,var(--lemon),var(--lemon-deep));color:var(--on-lemon);font-weight:800;
  font-family:var(--font-display);font-size:var(--step-0);padding:.4rem .85rem;border-radius:var(--r-full);
  box-shadow:var(--sh-md);animation:comboIn .35s var(--ease),comboOut .3s var(--ease) 1s forwards}
.combo-flash .msi{font-size:1.1em}
@keyframes comboIn{from{transform:translateY(-12px) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes comboOut{to{opacity:0;transform:translateY(-6px) scale(.92)}}

.achv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:.6rem}
.achv{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:.85rem .6rem;
  text-align:center;transition:.15s var(--ease)}
.achv .msi{font-size:1.7rem;color:var(--violet)}
.achv b{display:block;font-size:var(--step--1);margin-top:.35rem;line-height:1.25}
.achv span{display:block;font-size:.72rem;color:var(--ink-3);margin-top:.15rem;line-height:1.3}
.achv.locked{opacity:.4;filter:grayscale(1)}
.achv.locked .msi{color:var(--ink-3)}
.achv.justUnlocked{animation:achvPop .5s var(--ease)}
@keyframes achvPop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

.quest-list{display:flex;flex-direction:column;gap:.5rem}
.quest{display:flex;align-items:center;gap:.7rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:.6rem .9rem}
.quest.done{background:var(--ok-tint);border-color:transparent}
.quest .msi{color:var(--violet);font-size:1.3rem} .quest.done .msi{color:var(--ok)}
.quest-t{flex:1;font-size:var(--step--1);font-weight:600}
.quest-bar{width:64px;height:.4rem;background:var(--line);border-radius:var(--r-full);overflow:hidden;flex-shrink:0}
.quest-bar span{display:block;height:100%;background:var(--violet);border-radius:var(--r-full)}
.quest-x{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);width:34px;text-align:right;flex-shrink:0}

/* ============================================================
   СТАТИСТИКА — рекомендации, тренды, разбивка
   ============================================================ */
.rec-list{display:flex;flex-direction:column;gap:.6rem}
.rec{display:flex;gap:.8rem;background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--violet);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:.9rem 1rem;align-items:flex-start}
.rec.warn{border-left-color:var(--err)}
.rec.good{border-left-color:var(--ok)}
.rec .msi{font-size:1.4rem;color:var(--violet);flex-shrink:0;margin-top:.1rem}
.rec.warn .msi{color:var(--err)} .rec.good .msi{color:var(--ok)}
.rec-body{flex:1;min-width:0}
.rec-t{font-weight:700;font-size:var(--step-0);margin-bottom:.2rem}
.rec-d{color:var(--ink-2);font-size:var(--step--1);line-height:1.55}
.rec-d b{color:var(--ink)}
.rec-go{display:inline-flex;align-items:center;gap:.3rem;margin-top:.5rem;font-size:var(--step--1);
  font-weight:700;color:var(--violet-deep);text-decoration:none}
.rec-go:hover{text-decoration:underline}

.spark{display:flex;align-items:flex-end;gap:3px;height:56px}
.spark b{flex:1;background:var(--violet);border-radius:3px 3px 0 0;min-height:3px;transition:.3s var(--ease);display:block}
.spark b.bad{background:var(--err)}
.spark-labels{display:flex;justify-content:space-between;font-size:.66rem;color:var(--ink-3);margin-top:.25rem}

.stat-section{max-width:var(--wide);margin:0 auto;padding:var(--stat-y,var(--sp-7)) var(--sp-5) 0}   /* --stat-y - «Отступы» в «Виде» */
.stat-head{display:flex;align-items:center;gap:.7rem;margin-bottom:var(--sp-4)}
/* резервная копия (stats.html#backup, backup-ui.js) */
.bk-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin:var(--sp-4) 0 var(--sp-3)}
.bk-msg:empty{display:none}
.bk-msg{border:1px solid var(--line);border-radius:16px;padding:.8rem 1rem;font-size:var(--step--1);margin-top:var(--sp-3);width:fit-content;max-width:100%}
.bk-msg.ok{border-color:var(--lemon-deep);background:var(--lemon-soft)}
.bk-msg.bad{border-color:var(--err-line);background:var(--err-bg)}
.bk-msg.ask{border-color:var(--violet)}
.bk-msg .bk-btns{margin:.7rem 0 0}
.stat-head .msi{font-size:1.6rem;color:var(--violet-deep)}
.stat-head h2{font-family:var(--font-display);font-weight:600;font-size:var(--step-2)}
.stat-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:start}   /* карточка - по своему содержимому, не тянется за соседней */
.stat-grid2>*{min-width:0}
.stat-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5)}
/* «Статистика» (stats.html, view.js VIEW.STATS): блоки - сворачиваются заголовком, меню «⋯» (выше / ниже / скрыть), скрытые - строкой внизу */
.stat-blk .stat-head{position:relative}
.stat-blk{scroll-margin-top:var(--nav-h)}   /* докрутка к блоку - заголовок не под шапкой */
.stat-h{margin:0;min-width:0}
.stat-fold{display:flex;align-items:center;gap:.7rem;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;min-width:0}
.stat-fold:focus-visible,.stat-more:focus-visible,.stat-unhide:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:var(--r-md)}
.stat-chev{transition:transform .2s var(--ease);font-size:1.3rem!important;color:var(--ink-3)!important}
.stat-fold[aria-expanded="false"] .stat-chev{transform:rotate(-90deg)}
.stat-meta{margin-left:auto;color:var(--ink-3);font-size:var(--step--1);white-space:nowrap}
.stat-more{margin-left:auto;border:0;background:none;width:2.2rem;height:2.2rem;border-radius:var(--r-full);cursor:pointer;color:var(--ink-2);display:grid;place-items:center;flex-shrink:0}
.stat-meta+.stat-more{margin-left:.2rem}
.stat-blk .stat-head{flex-wrap:wrap}
@media(max-width:560px){.stat-meta{order:3;flex-basis:100%;margin-left:0;white-space:normal} .stat-meta+.stat-more{margin-left:auto}}   /* подпись - строкой под заголовком */
.stat-more:hover,.stat-more[aria-expanded="true"]{background:var(--violet-soft)}
.stat-more .msi{font-size:1.3rem;color:inherit}
.stat-menu{position:absolute;right:0;top:calc(100% + .2rem);z-index:20;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:.3rem;display:flex;flex-direction:column;min-width:11rem}
.stat-menu button{display:flex;align-items:center;gap:.5rem;border:0;background:none;font:inherit;font-size:var(--step--1);color:var(--ink);padding:.5rem .6rem;border-radius:calc(var(--r-md) - .2rem);cursor:pointer;text-align:left}
.stat-menu button:hover:not(:disabled),.stat-menu button:focus-visible{background:var(--violet-soft);outline:0}
.stat-menu button:disabled{color:var(--ink-3);cursor:default}
.stat-menu .msi{font-size:1.1rem;color:var(--violet-deep)}
.stat-menu button:disabled .msi{color:var(--ink-3)}
.stat-sub{display:flex;align-items:center;gap:.4rem;font-size:var(--step-1);font-weight:600;margin:var(--sp-5) 0 var(--sp-3)}
.stat-sub:first-child{margin-top:0}
.stat-sub .msi{color:var(--violet-deep)}
.stat-all summary{cursor:pointer;color:var(--violet-deep);font-weight:600;font-size:var(--step--1);padding:.6rem 0 .2rem}
.stat-hidden{max-width:var(--wide);margin:var(--sp-6) auto 0;padding:0 var(--sp-5);color:var(--ink-3);font-size:var(--step--1)}
.stat-unhide{border:0;background:none;padding:0;font:inherit;color:var(--violet-deep);text-decoration:underline;cursor:pointer}
/* сводка сверху: 4 цифры, на узком - 2×2 */
.stat-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-5)}
.stat-kpi:empty{display:none}
@media(max-width:720px){.stat-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);display:flex;flex-direction:column;gap:.15rem;min-width:0}
.kpi-l{font-size:var(--step--1);color:var(--ink-3);font-weight:600}
.kpi-v{font-family:var(--font-display);font-size:var(--step-3);line-height:1.1;color:var(--ink)}
.kpi-s{font-size:var(--step--1);color:var(--ink-2);overflow-wrap:anywhere}
.kpi[style*="--pct"]::after{content:"";display:block;height:4px;border-radius:2px;margin-top:.4rem;background:linear-gradient(90deg,var(--violet) calc(var(--pct) * 1%),var(--line) 0)}
/* строка состояния прогресса (backup-ui EHPROG): вверху и в карточке; точка - none / ok / warn / bad */
.stat-state,.pc-state{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:var(--sp-4);color:var(--ink-2);font-size:var(--step--1)}
.pc-state{margin:0 0 var(--sp-4);font-size:var(--step-0);color:var(--ink)}
.pc-dot{width:.6rem;height:.6rem;border-radius:50%;flex-shrink:0;border:2px solid var(--ink-3);align-self:flex-start;margin-top:.45em}   /* у первой строки текста */
[data-dot="ok"]>.pc-dot{background:var(--ok);border-color:var(--ok)}
[data-dot="warn"]>.pc-dot{background:var(--lemon-deep);border-color:var(--lemon-deep)}
[data-dot="bad"]>.pc-dot{background:var(--err);border-color:var(--err)}
.stat-state-t,.pc-txt{flex:1 1 12rem;min-width:0}   /* точка не отрывается от текста на узком; «Настроить» переносится сам */
.stat-state-go{color:var(--violet-deep);font-weight:600}
/* «Твой прогресс» - строки как в настройках (решение владельца 26.10): ключ | значение | действие, разделены линией.
   #account (account-ui) и #backup (backup-ui) - части списка; на телефоне ключ над значением. Вопросы и ошибки - .bk-msg под своей частью */
#st-progress .stat-body{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-2) var(--sp-5)}
.pc-r{display:grid;grid-template-columns:9rem minmax(0,1fr) auto;align-items:center;gap:.35rem 1.25rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
#backup .pc-r{border-bottom:0}   /* «Копия» - всегда последняя строка (видна и без входа) */
.pc-r[hidden],.ac-in[hidden]{display:none}
.pc-k{font-size:var(--step--1);font-weight:600;color:var(--ink-3)}
.pc-v{min-width:0;color:var(--ink);font-size:var(--step-0);line-height:1.35}
.pc-v small{display:block;margin-top:.2rem;color:var(--ink-3);font-size:var(--step--1)}
.pc-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem}
.pc-a .btn[hidden]{display:none}   /* .btn задаёт display - [hidden] сам не прячет (бесплатный тариф: синка нет) */
.pc-plan{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.pc-chip{display:inline-flex;align-items:center;padding:.18rem .6rem;border-radius:var(--r-full);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;background:var(--violet-soft);color:var(--violet-deep)}
.pc-chip[data-plan="free"]{background:var(--paper-warm);color:var(--ink-2)}
.pc-chip[data-plan="pro"]{background:var(--violet);color:var(--on-accent)}
.pc-sync{display:inline-flex;align-items:center;gap:.5rem}
.pc-sync .pc-dot{margin-top:0;align-self:center}
.pc-promo{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.pc-promo[hidden]{display:none}
.pc-promo input{font:inherit;font-size:var(--step-0);padding:.55rem .9rem;border:1px solid var(--line);border-radius:var(--r-full);background:var(--paper);color:var(--ink);width:15rem;max-width:100%;letter-spacing:.06em;text-transform:uppercase}
.pc-promo input::placeholder{text-transform:none;letter-spacing:0;color:var(--ink-3)}
.pc-promo input:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:transparent}
#st-progress .bk-msg{border:0;background:none;padding:0 0 .9rem;margin:0;width:auto;font-size:var(--step--1);color:var(--ink-2)}
#st-progress .bk-msg.ok{color:var(--ink)} #st-progress .bk-msg.bad{color:var(--err)} #st-progress .bk-msg.ask{color:var(--ink)}
@media(max-width:640px){
  #st-progress .stat-body{padding:var(--sp-1) var(--sp-4)}
  .pc-r{grid-template-columns:minmax(0,1fr) auto;gap:.25rem .8rem}
  .pc-k{grid-column:1/-1}
  .pc-promo{grid-column:1/-1}
  .pc-a-below{grid-column:1/-1;justify-content:flex-start;margin-left:-.75rem}
  .pc-a-wide{grid-column:1/-1;margin-top:.35rem}   /* главная кнопка строки (синк, вход) - под значением во всю ширину */
  .pc-a-wide .btn{flex:1;justify-content:center}   /* ссылки - под значением, текст вровень с ним (padding .pc-link) */
}
/* вторичные действия: без подчёркивания, при наведении - мягкая подложка (решение владельца 26.10); «Выйти» - тише, подложка красноватая */
.pc-link{display:inline-flex;align-items:center;gap:.35rem;border:0;background:none;padding:.42rem .75rem;border-radius:var(--r-full);font:inherit;font-weight:600;font-size:var(--step--1);color:var(--violet-deep);cursor:pointer;text-decoration:none;transition:background-color .18s var(--ease),color .18s var(--ease)}
.pc-link:hover,.pc-link:focus-visible{background:var(--violet-tint);text-decoration:none}
.pc-link:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.pc-link[aria-expanded="true"]{background:var(--violet-tint)}
.pc-link.pc-quiet{color:var(--ink-3)}
.pc-link.pc-quiet:hover,.pc-link.pc-quiet:focus-visible{color:var(--err);background:var(--err-tint)}
.pc-link .msi{font-size:1.1rem}
/* окно «Готово»: промокод применён (account-ui) */
.pc-done{margin:auto;border:0;border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-6) var(--sp-5);width:min(380px,calc(100vw - 32px));background:var(--paper-2);color:var(--ink);text-align:center;box-shadow:0 24px 60px var(--shade-strong)}
.pc-done::backdrop{background:var(--shade-strong);backdrop-filter:blur(3px)}
.pc-done[open]{animation:pcDone .28s var(--ease)}
@keyframes pcDone{from{opacity:0;transform:translateY(10px) scale(.97)}}
.pc-done-ic{display:inline-grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--violet);color:var(--on-accent);margin-bottom:var(--sp-3)}
.pc-done-ic .msi{font-size:2rem}
.pc-done h3{margin:0;font-size:var(--step-2);line-height:1.2}
.pc-done-until{margin:.35rem 0 var(--sp-4);color:var(--ink-2)}
.pc-done-list{list-style:none;margin:0 0 var(--sp-5);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--violet-tint);text-align:left;display:grid;gap:.45rem}
.pc-done-list li{display:flex;gap:.55rem;align-items:flex-start;font-size:var(--step--1)}
.pc-done-list .msi{font-size:1.15rem;color:var(--ok)}
.pc-done .btn{width:100%;justify-content:center}
:root[data-stats-hide~="recs"] #st-recs{display:none}
:root[data-stats-fold~="recs"] #st-recs .stat-body{display:none}
:root[data-stats-hide~="grammar"] #st-grammar{display:none}
:root[data-stats-fold~="grammar"] #st-grammar .stat-body{display:none}
:root[data-stats-hide~="vocab"] #st-vocab{display:none}
:root[data-stats-fold~="vocab"] #st-vocab .stat-body{display:none}
:root[data-stats-hide~="play"] #st-play{display:none}
:root[data-stats-fold~="play"] #st-play .stat-body{display:none}
:root[data-stats-hide~="achv"] #st-achv{display:none}
:root[data-stats-fold~="achv"] #st-achv .stat-body{display:none}
:root[data-stats-hide~="progress"] #st-progress{display:none}
:root[data-stats-fold~="progress"] #st-progress .stat-body{display:none}

.stat-row{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.stat-row:last-child{border-bottom:none}
.stat-row .msi{color:var(--ink-3);font-size:1.2rem}
.stat-row-t{flex:1;min-width:0;font-size:var(--step--1);font-weight:600}
.stat-row-sub{font-size:.7rem;color:var(--ink-3)}
.stat-bar{width:90px;height:.45rem;background:var(--line);border-radius:var(--r-full);overflow:hidden;flex-shrink:0}
.stat-bar span{display:block;height:100%;border-radius:var(--r-full)}
.seg-bar{display:flex;flex-shrink:0;height:.45rem;background:var(--line);border-radius:var(--r-full);overflow:hidden}
.seg-bar span{height:100%;border-radius:0;background:var(--c,var(--violet))}
.seg-bar .w{opacity:.32}
.stat-pct{width:3rem;text-align:right;font-family:var(--font-mono);font-size:var(--step--1);flex-shrink:0}
.tabs2{display:inline-flex;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-full);padding:3px}
.tabs2 button{border:none;background:transparent;padding:.4rem .9rem;border-radius:var(--r-full);font-weight:700;
  font-size:var(--step--1);color:var(--ink-2);cursor:pointer;transition:.15s var(--ease)}
.tabs2 button.on{background:var(--violet);color:var(--on-accent)}

/* ============================================================
   ГЛАВНАЯ — компактный дашборд с кольцом уровня
   ============================================================ */
.pg-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.pg-lvl{display:flex;align-items:center;gap:.9rem}
.pg-lvl-name{font-family:var(--font-display);font-weight:600;font-size:var(--step-1);line-height:1.2}
.pg-lvl-xp{font-family:var(--font-mono);font-size:var(--step--1);color:var(--ink-3)}
.pg-more{margin-left:auto}
.pg-teaser{background:linear-gradient(135deg,var(--violet-soft),var(--lemon-tint));border-radius:var(--r-md);
  padding:.85rem 1rem;display:flex;gap:.7rem;align-items:flex-start;margin-top:var(--sp-4);font-size:var(--step--1);
  color:var(--ink-2);line-height:1.5}
.pg-teaser .msi{color:var(--violet-deep);font-size:1.3rem;flex-shrink:0;margin-top:.05rem}
.pg-teaser b{color:var(--ink)}
.pg-quests{margin-top:var(--sp-5)}

/* узкие телефоны (320-400px): крупные заголовки не влезали длинными словами («необходимость») */
@media(max-width:400px){
  :root{--step-4:2.1rem;--step-5:clamp(2.1rem,7vw,4.6rem)}
  h1,h2{overflow-wrap:break-word;hyphens:auto}
  /* строка статистики: название + % в первой строке, бар во всю ширину под ними */
  .stat-row{flex-wrap:wrap;row-gap:.35rem}
  .stat-row .stat-bar{order:3;width:100%}
}
@media(max-width:640px){
  :root{--sp-9:4rem}
  .nav-dots{display:none}
  /* пока nav.js не отработал (или не загрузился): на узком экране пилюли не показываем, чтобы не вылезали за край */
  .nav:not(.nav-ready) .nav-links{display:none}
  .nav:not(.nav-ready) .nav-burger{display:inline-flex}
  .hero h1{font-size:var(--step-5)}
  .stat-grid2{grid-template-columns:1fr}
  .achv-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}

/* ---------- письмо: страница «Писать» и блоки «Напиши сам» в курсах (assets/write-ui.js) ---------- */
.wr-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.wr-chip{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-body);font-size:var(--step--1);font-weight:600;padding:.45rem .9rem;border-radius:var(--r-full);
    border:1.5px solid var(--line-2);background:var(--paper-2);color:var(--ink-2);cursor:pointer;transition:.15s var(--ease)}
.wr-chip .msi{font-size:18px;color:var(--violet)}
.wr-chip:hover{border-color:var(--violet);color:var(--violet-deep)}
.wr-chip.on{background:var(--violet);border-color:var(--violet);color:var(--on-accent)}.wr-chip.on .msi{color:var(--on-accent)}
.wr-badge{font-size:var(--step--1);font-weight:700;padding:0 .45rem;border-radius:var(--r-full);background:var(--line);color:var(--ink-2)}
.wr-chip.on .wr-badge{background:rgba(255,255,255,.25);color:var(--on-accent)}
.wr-card{border:1px solid var(--line);border-radius:var(--r-lg,28px);padding:var(--sp-5);background:var(--paper-2);display:flex;flex-direction:column;gap:var(--sp-3)}
.wr-card h2{font-family:var(--font-display);font-size:var(--step-2);margin:0}
.wr-q{font-size:var(--step--1);color:var(--ink-3);margin:0}
.wr-big{font-size:var(--step-1);margin:0;line-height:1.4}
.wr-said{color:var(--err-ink)}
.wr-note{font-size:var(--step--1);color:var(--ink-3);margin:0}
.wr-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.wr-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-body);font-weight:700;font-size:var(--step-0);
    padding:.65rem 1.1rem;border-radius:var(--r-full);border:0;cursor:pointer;background:var(--violet);color:var(--on-accent)}
.wr-btn.ghost{background:var(--paper);color:var(--violet-deep);border:1.5px solid var(--line-2)}
.wr-btn[disabled]{opacity:.55;cursor:default}
.wr-chip:focus-visible,.wr-btn:focus-visible,.wr-tok:focus-visible,.wr-text:focus-visible{outline:3px solid var(--lemon);outline-offset:2px}
.wr-text{font-family:var(--font-body);font-size:var(--step-0);line-height:1.5;padding:.7rem .9rem;border:1.5px solid var(--line-2);border-radius:var(--r-md,16px);
    background:var(--paper-2);color:var(--ink);width:100%;box-sizing:border-box;resize:vertical;min-height:4.5rem}
.wr-text.long{min-height:10rem}
.wr-res{border-radius:var(--r-md,16px);padding:.8rem 1rem;background:var(--paper-2);border:1px solid var(--line);display:flex;flex-direction:column;gap:.4rem}
.wr-res.good{border-color:var(--ok-line);background:var(--ok-bg)}
.wr-res.bad{border-color:var(--err-line);background:var(--err-bg)}
.wr-res b.t{display:flex;gap:.4rem;align-items:center}
.wr-res.good b.t .msi{color:var(--ok-ink)}.wr-res.bad b.t .msi{color:var(--err-ink)}
.wr-fix{font-size:var(--step--1);color:var(--ink-2);border-top:1px dashed var(--line-2);padding-top:.4rem}
.wr-fix s{color:var(--err-ink)}.wr-fix b{color:var(--violet-deep)}.wr-fix i{color:var(--ink-3);font-style:normal;display:block}
.wr-line{min-height:3.2rem;display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem;border:1.5px dashed var(--line-2);border-radius:var(--r-md,16px);background:var(--paper-2)}
.wr-line:empty::before{content:"Нажимай на слова по порядку";color:var(--ink-3);font-size:var(--step--1);align-self:center}
.wr-pool{display:flex;flex-wrap:wrap;gap:.4rem}
.wr-tok{font-family:var(--font-body);font-size:var(--step-0);font-weight:600;padding:.4rem .75rem;border-radius:12px;border:1.5px solid var(--line-2);background:var(--paper-2);color:var(--ink);cursor:pointer}
.wr-tok:hover{border-color:var(--violet)}
.wr-line .wr-tok{background:var(--tok-on);border-color:var(--tok-on-line)}
.cw{max-width:var(--read);margin:var(--sp-6) auto 0;background:var(--paper-2)}
.cw .wr-row>.msi{color:var(--violet);font-size:26px}
.cw-body{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}
.cw-body>*{max-width:100%}.cw-body .wr-line,.cw-body .wr-text,.cw-body .wr-res{width:100%;box-sizing:border-box}

/* ---------- неделя на главной (assets/week.js) ---------- */
.wk{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.wk-warm{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.wk-streak{font-size:var(--step--1);color:var(--ink-2);display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.wk-streak .msi{font-size:18px;color:var(--fire);vertical-align:-3px}
.wk-streak .wk-ice,.wk-frozen .msi{color:var(--ice)}
.wk-frozen{color:var(--ice-ink);font-weight:600}
.wk-risk{margin:0;padding:.55rem .8rem;border-radius:12px;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);font-size:var(--step--1);display:flex;gap:.4rem;align-items:flex-start}
.wk-risk.soft{background:var(--violet-soft);border-color:var(--line-2);color:var(--violet-ink)}
.wk-risk .msi{font-size:18px}
.wk-off{opacity:.45;pointer-events:none}
.wk-rem{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.wk-rem label{display:flex;flex-direction:column;gap:.15rem;font-size:var(--step--1);color:var(--ink-3)}
.wk-rem input,.wk-rem select{font:inherit;font-size:var(--step-0);color:var(--ink);padding:.35rem .55rem;border:1px solid var(--line-2);border-radius:10px;background:var(--paper-2)}
.wk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--sp-3)}
.wk-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md,16px);padding:var(--sp-4);display:flex;flex-direction:column;gap:.5rem}
.wk-card h4{margin:0;font-size:var(--step-0);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.wk-card p{margin:0}
.wk-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.wk-chip{font-family:var(--font-body);font-size:var(--step--1);font-weight:600;padding:.4rem .8rem;border-radius:var(--r-full);border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink-2);cursor:pointer}
.wk-chip:hover{border-color:var(--violet);color:var(--violet-deep)}
.wk-chip.on{background:var(--violet);border-color:var(--violet);color:var(--on-accent)}
.wk-chip.rec:not(.on){border-color:var(--lemon-deep)}
.wk-chip small{font-weight:700;opacity:.75}
.wk-chip:focus-visible{outline:3px solid var(--lemon);outline-offset:2px}
.wk-bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.wk-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--lemon));border-radius:99px}
.wk-done{font-size:var(--step--1);color:var(--ok-ink);display:inline-flex;align-items:center;gap:.2rem}.wk-done .msi{font-size:18px}
.wk-change summary{cursor:pointer;font-size:var(--step--1);color:var(--violet-deep);font-weight:600}
.wk-change[open]{display:flex;flex-direction:column;gap:.4rem}
.wk-plan{font-size:var(--step--1);background:var(--paper);border:1px dashed var(--line-2);border-radius:12px;padding:.5rem .8rem}
.wk-plan ul{margin:.3rem 0 0;padding-left:1.1rem}
.wk-plan-btn{align-self:flex-start}
.wk-ghost{display:flex;flex-direction:column;gap:.3rem}
.wk-g-row{display:grid;grid-template-columns:1fr auto 1.2rem auto;gap:.5rem;align-items:baseline;font-size:var(--step--1)}
.wk-g-row b{font-size:var(--step-0)}
.wk-g-row small{color:var(--ink-3)}
.wk-up{color:var(--ok-ink)}.wk-down{color:var(--err-ink)}.wk-g-row .msi{font-size:20px}
.wk-g-sum{font-size:var(--step--1)}
/* ---------- трофеи: монстры ошибок (write.js, stats.js) ---------- */
.tr-mon{border:1px solid var(--line);border-radius:var(--r-md,16px);padding:.7rem .9rem;background:var(--paper-2);display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.tr-mon.won{background:var(--ok-bg);border-color:var(--ok-line)}
.tr-mon-h{display:flex;align-items:center;gap:.5rem;width:100%}
.tr-mon-h .msi{font-size:26px;color:var(--violet)}
.tr-mon.won .tr-mon-h .msi{color:var(--gold)}
.tr-hp{margin-left:auto;color:var(--err);font-size:var(--step--1);display:inline-flex;gap:1px;align-items:center}
.tr-hp .msi{font-size:18px}
.tr-mon.won .tr-hp{color:var(--ok-ink);font-weight:700}
.tr-mon .wr-note{margin:0}

/* ── EXPLAINER ── ролик-объяснение в модуле курса: белый кадр (рисунки на белом) и в тёмной теме; пропорции - из width/height у <video> */
.explainer{max-width:var(--read);margin:var(--sp-5) auto}
.explainer video{display:block;width:100%;height:auto;background:var(--frame);border:1px solid var(--line);border-radius:var(--r-md)}
@media (max-width:640px){ .explainer video::cue{font-size:1.15em;line-height:1.35} }   /* на телефоне субтитры по умолчанию мелковаты */
.explainer figcaption{margin-top:.4rem;font-size:var(--step--1);color:var(--ink-3);text-align:center}

/* ── СХЕМЫ ── в курсах без роликов (assets/schemes.js): формула блоками, шкала времени (SVG) или стрелки, примеры */
.scheme{max-width:var(--read);margin:var(--sp-5) auto;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5)}
.sc-title{font-family:var(--font-display);font-weight:600;font-size:var(--step-1);color:var(--violet-ink);margin-bottom:.7rem}
.sc-formula{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.4rem}
.sc-row{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .35rem;border-left:3px solid var(--violet-soft);padding-left:.55rem}   /* полоска - одна строка формулы, даже если перенеслась */
.sc-chip{font:600 var(--step--1)/1.2 var(--font-mono);padding:.35rem .6rem;border-radius:var(--r-sm);border:1px solid transparent}
.sc-s{background:var(--violet-soft);color:var(--violet-ink)}
.sc-a{background:var(--violet);color:var(--on-accent)}
.sc-v{background:var(--lemon);color:var(--on-lemon);border-color:var(--lemon-deep)}
.sc-x{background:transparent;color:var(--ink-2);border-color:var(--line-2);font-family:var(--font-body)}
.sc-plus{color:var(--ink-3);font-weight:700}
.sc-line{display:block;width:100%;max-width:520px;height:auto;margin:.2rem auto}   /* шире - подписи крупнее формулы */
.sc-axis{stroke:var(--ink-3);stroke-width:2}.sc-axis-end{fill:var(--ink-3)}
.sc-now{stroke:var(--violet);stroke-width:2;stroke-dasharray:4 4}
.sc-dot{fill:var(--violet)}.sc-one{fill:var(--violet-deep)}
.sc-bar{fill:var(--violet-tint);stroke:var(--violet);stroke-width:2}
.sc-ref{stroke:var(--lemon-deep);stroke-width:3}
.sc-label{font:600 15px var(--font-body);fill:var(--violet-ink)}
.sc-cap{font:13px var(--font-body);fill:var(--ink-3)}.sc-cap-now{fill:var(--violet);font-weight:700}
.sc-flow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.6rem 0}
.sc-box{flex:1 1 180px;display:flex;flex-direction:column;gap:.2rem;background:var(--violet-soft);border-radius:var(--r-sm);padding:.6rem .8rem}
.sc-box b{font-size:var(--step--1);color:var(--violet-ink)}.sc-box i{font-size:var(--step--1);color:var(--ink-2)}
.sc-arrow{font-size:1.4rem;color:var(--violet);font-weight:700}
@media (max-width:520px){ .sc-flow{flex-direction:column;align-items:stretch}.sc-box{flex:none}.sc-arrow{transform:rotate(90deg);align-self:center} }
.sc-ex{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.25rem;font-size:var(--step--1)}
.sc-exl{color:var(--ink-3)}

/* ── ONBOARDING ── подсказки-шаги (assets/tour.js), «?» в меню, чек-лист «Первые шаги» на главной */
.tour-spot{position:fixed;z-index:1000;border-radius:var(--r-md);box-shadow:0 0 0 9999px rgba(10,8,25,.6);pointer-events:none;transition:top .25s,left .25s,width .25s,height .25s,opacity .2s}
.tour-tip{position:fixed;z-index:1001;background:var(--paper);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:0 18px 50px var(--shade-soft)}
.tour-tip p{margin:.4rem 0 var(--sp-3);font-size:var(--step-0);line-height:1.45}
.tour-head{display:flex;align-items:center;justify-content:space-between;color:var(--violet-deep)}
.tour-head .msi{font-size:26px}
.tour-n{font-family:var(--font-mono);font-size:var(--step--1);color:var(--ink-3)}
.tour-btns{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){ .tour-spot{transition:none} }
.nav-help,.nav-theme{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;margin-left:.4rem;padding:0;
  border:1px solid var(--line-2);border-radius:var(--r-full);background:transparent;color:var(--ink-2);cursor:pointer}
.nav-help:hover,.nav-theme:hover{background:var(--violet-soft);color:var(--violet-deep)}
.nav-help .msi,.nav-theme .msi{font-size:22px}
.nav.has-burger .nav-theme{margin-left:auto}                 /* бургер: тема - первая из круглых кнопок, прижата вправо */
.nav.has-burger .nav-theme + .nav-help, .nav.has-burger .nav-theme + .nav-view{margin-left:.4rem}
.nav.has-burger .nav-help{margin-left:auto}                  /* на телефоне пилюли меню уходят в бургер - «?» прижат к нему справа */
.nav.has-burger .nav-help + .nav-burger{margin-left:.4rem}
.tour-btns .btn{padding:.5rem .95rem;font-size:var(--step--1)}
#firstSteps{padding-top:var(--sp-5);padding-bottom:0}
.fs-card{max-width:var(--read);margin:0 auto;background:var(--paper-warm);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5)}
.fs-head{display:flex;align-items:center;gap:.5rem;font-size:var(--step-1)}
.fs-head .msi{color:var(--violet-deep)}
.fs-count{margin-left:auto;font-family:var(--font-mono);font-size:var(--step--1);color:var(--ink-3)}
.fs-bar-line{height:6px;border-radius:var(--r-full);background:var(--line);margin:var(--sp-3) 0;overflow:hidden}
.fs-bar-line span{display:block;height:100%;background:var(--violet-deep);border-radius:inherit}
.fs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.fs-list a{display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:var(--r-sm);color:var(--ink);text-decoration:none}
.fs-list a:hover{background:var(--violet-soft)}
.fs-ico{color:var(--ink-2)}
.fs-text{flex:1}
.fs-mark{color:var(--ink-3)}
.fs-list li.done .fs-text{color:var(--ink-3)}
.fs-list li.done .fs-mark{color:var(--ok-ink)}
.fs-note{font-size:var(--step--1);margin:var(--sp-3) 0}
.fs-foot{display:flex;gap:.5rem;flex-wrap:wrap}
.fs-bar{max-width:var(--read);margin:0 auto;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;color:var(--ink-2)}
.fs-bar > .msi{color:var(--violet-deep)}

/* ── «Вид» (view.js): ширина сайта и плотность, eh:view. Без view.js атрибутов нет - всё как раньше (запасные значения в var()) ── */
:root[data-width="narrow"]{--wide:1080px}
:root[data-width="wide"]{--wide:1440px}
:root[data-width="full"]{--wide:100%}
:root[data-density="cozy"]{--sec-y:6rem;--hero-h:92vh}
:root[data-density="normal"]{--sec-y:3.5rem;--hero-h:70vh}
:root[data-density="compact"]{--sec-y:2rem;--hero-h:0px}
:root[data-density="cozy"]{--stat-y:4.5rem} :root[data-density="normal"]{--stat-y:3rem} :root[data-density="compact"]{--stat-y:1.5rem}
@media(max-width:640px){ :root[data-density="cozy"]{--sec-y:4rem} :root[data-density="normal"]{--sec-y:2.5rem} }
.nav-view{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;margin-left:.4rem;padding:0;
  border:1px solid var(--line-2);border-radius:var(--r-full);background:transparent;color:var(--ink-2);cursor:pointer}
.nav-view:hover{background:var(--violet-soft);color:var(--violet-deep)}
.nav-view .msi{font-size:22px}
.nav.has-burger .nav-view{margin-left:auto}                  /* бургер: «Вид» прижат вправо; после «?» - обычный зазор */
.nav.has-burger .nav-help + .nav-view, .nav.has-burger .nav-view + .nav-burger{margin-left:.4rem}
/* телефон: название + 4 круглые кнопки (тема, «?», «Вид», бургер) не влезали в 320-360px - кнопки и зазоры меньше */
@media(max-width:420px){
  .nav-in{padding:0 .75rem;gap:.25rem}
  .nav-brand{font-size:var(--step-0)}
  .nav-theme,.nav-help,.nav-view,.nav-burger{width:34px;height:34px}
  .nav-theme .msi,.nav-help .msi,.nav-view .msi{font-size:20px}
  /* .bar - left/top абсолютные, по умолчанию посчитаны под 38px кружок; в 34px без этого бургер съезжает от центра */
  .nav-burger .bar{left:8px}
  .nav-burger .bar:nth-child(1){top:12px}
  .nav-burger .bar:nth-child(2){top:16px}
  .nav-burger .bar:nth-child(3){top:20px}
  .nav-burger[aria-expanded="true"] .bar:nth-child(1){top:16px}
  .nav-burger[aria-expanded="true"] .bar:nth-child(3){top:16px}
  .nav.has-burger .nav-theme + .nav-help,.nav.has-burger .nav-theme + .nav-view,.nav.has-burger .nav-help + .nav-view,
  .nav.has-burger .nav-view + .nav-burger,.nav.has-burger .nav-help + .nav-burger{margin-left:.25rem}
}
.view-dlg{margin:auto;border:0;border-radius:var(--r-lg,28px);padding:var(--sp-5);width:min(420px,calc(100vw - 2rem));background:var(--paper);color:var(--ink);
  box-shadow:0 24px 60px var(--shade)}
.view-dlg::backdrop{background:var(--shade)}
.view-head{display:flex;align-items:center;gap:.5rem;margin-bottom:var(--sp-3);font-size:var(--step-1)}
.view-head .msi{color:var(--violet)}
.view-sw{width:22px;height:22px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--line-2)}   /* образец палитры: цвета - инлайн из VIEW.FAMILIES */
.view-x{margin-left:auto;border:0;background:transparent;color:var(--ink-2);cursor:pointer;padding:.25rem;border-radius:var(--r-full)}
.view-x:hover{background:var(--violet-soft)}
.view-set{border:0;padding:0;margin:0 0 var(--sp-4)}
.view-set legend{font-weight:700;margin-bottom:.4rem;color:var(--ink-2);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em}
.view-opt{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:.35rem;cursor:pointer}
.view-opt:has(input:checked){border-color:var(--violet);background:var(--violet-soft)}
.view-opt input{accent-color:var(--violet);margin:0}
.view-opt span{display:flex;flex-direction:column}
.view-opt small{color:var(--ink-3);font-size:var(--step--1)}
.view-sub{margin:0 0 .35rem;color:var(--ink-2);font-size:var(--step--1)}
.view-group{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-bottom:.6rem}
.view-group .view-opt{margin-bottom:0}
.view-note{color:var(--ink-3);font-size:var(--step--1);margin:0}

/* ── главная: приветствие вместо заставки (dashboard.js + home.js) и прогресс в две колонки ── */
.hero.hero-back{min-height:0;padding:calc(var(--nav-h) + var(--sp-6)) var(--sp-5) var(--sp-5)}
.hero.hero-back h1{font-size:var(--step-5);max-width:none}
.hero.hero-back .blob.v{width:220px;height:220px}
.hero.hero-back .blob.l{display:none}
.hb-meta{margin-top:var(--sp-3)}
.hb-meta .msi{color:var(--coral);vertical-align:-3px}
.hero.hero-back .hero-cta{margin-top:var(--sp-4)}
.pg-col-h{font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em;color:var(--violet);margin:0 0 var(--sp-3)}
.pg-cols{display:grid;gap:var(--sp-6)}
@media(min-width:1100px){
  .pg-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
  .pg-today .wk-grid{grid-template-columns:1fr}
}
/* блоки главной, скрытые в «Виде» (view.js, data-home-hide) - вместе с их точкой в меню */
:root[data-home-hide~="firstSteps"] #firstSteps, :root[data-home-hide~="firstSteps"] .dot[data-target="firstSteps"]{display:none!important}
:root[data-home-hide~="passport"] #passport, :root[data-home-hide~="passport"] .dot[data-target="passport"]{display:none!important}
:root[data-home-hide~="series"] #series, :root[data-home-hide~="series"] .dot[data-target="series"]{display:none!important}
:root[data-home-hide~="friends"] #friends, :root[data-home-hide~="friends"] .dot[data-target="friends"]{display:none!important}
:root[data-home-hide~="progress"] #progress, :root[data-home-hide~="progress"] .dot[data-target="progress"]{display:none!important}
:root[data-home-hide~="grammar"] #grammar, :root[data-home-hide~="grammar"] .dot[data-target="grammar"]{display:none!important}
:root[data-home-hide~="vocab"] #vocab, :root[data-home-hide~="vocab"] .dot[data-target="vocab"]{display:none!important}
:root[data-home-hide~="train"] #train, :root[data-home-hide~="train"] .dot[data-target="train"]{display:none!important}
.view-blk{display:flex;align-items:center;gap:.35rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:.3rem}
.view-blk label{flex:1;display:flex;align-items:center;gap:.5rem;cursor:pointer}
.view-blk input{accent-color:var(--violet)}
.view-blk button{border:1px solid var(--line-2);background:transparent;border-radius:var(--r-full);width:30px;height:30px;padding:0;cursor:pointer;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center}
.view-blk button:hover:not(:disabled){background:var(--violet-soft);color:var(--violet-deep)}
.view-blk button:disabled{opacity:.3;cursor:default}
.view-blk .msi{font-size:18px}
.view-reset{margin-top:.3rem;border:0;background:transparent;color:var(--violet-deep);cursor:pointer;font-weight:600;padding:.3rem 0}
.view-dlg{max-height:calc(100dvh - 2rem);overflow:auto}
.view-blk .view-up{transform:rotate(180deg)}   /* «выше» - та же иконка expand_more, развёрнутая: своей стрелки вверх в подмножестве шрифта нет */

/* ── «Говорить» под себя (view.js: data-preset, has-side, view-off) ── */
.view-off{display:none!important}
/* «Как сейчас» - колонки из speak.html; «Три колонки» - has-side, когда справа есть панели. Остальные меняют колонки только шире 860px:
   на телефоне «Говорить» в одну колонку при любом пресете (иначе этот селектор перебил бы телефонное правило speak.html) */
@media(min-width:861px){
  .sp-wrap[data-preset="big"]{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .sp-wrap[data-preset="focus"]{grid-template-columns:minmax(0,.55fr) minmax(0,2fr)}
}
/* экзамен (speak.js ставит exam-on на всю страницу) прячет цели и кнопки - где бы их ни разложил «Вид» */
.sp-wrap.exam-on [data-panel="goals"], .sp-wrap.exam-on [data-panel="tools"]{display:none!important}
.sp-wrap.has-side{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(250px,.6fr)}
.sp-wrap.wide.has-side{grid-template-columns:minmax(0,.55fr) minmax(0,1.7fr) minmax(250px,.6fr)}
.sp-side{display:flex;flex-direction:column;gap:var(--sp-3);min-height:0;overflow:auto}
.sp-wrap:not(.has-side) .sp-side{display:none}
.sp-side .sp-tools{flex-wrap:wrap}
.sp-side > *{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg,22px);padding:var(--sp-3);flex-shrink:0}   /* не сжимать: длинные цели с брифом выдавливали «Ошибки» до заголовка - прокручивается колонка */
.sp-panel h4{display:flex;align-items:center;gap:.4rem;font-size:var(--step-0);margin:0 0 .5rem}
.sp-panel h4 .msi{color:var(--violet);font-size:20px}
.sp-errs{max-height:min(34vh,260px);overflow:auto}                   /* в чате и под персонажем - не выдавливает чат и персонажа */
.sp-side .sp-errs{max-height:none}
/* сворачивание блоков - только в правой колонке («три колонки», выбор владельца 21.10); в других местах заголовок как был */
.pn-head{all:unset;display:flex;align-items:center;gap:.4rem;width:100%;box-sizing:border-box;font:inherit;color:inherit}
.pn-chev{margin-left:auto;font-size:20px;color:var(--ink-3);display:none;transition:transform .15s}
.pn-n{color:var(--ink-3);font-weight:600}
.sp-tools > .pn-keep{display:none;flex-basis:100%;margin:0}
.sp-side .sp-tools > .pn-keep{display:block}
.sp-side .pn-head{cursor:pointer}
.sp-side .pn-head:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.sp-side .pn-chev{display:inline-block}
.sp-side .folded .pn-chev{transform:rotate(-90deg)}
.sp-side .folded > :not(.pn-keep){display:none!important}
.sp-side .folded > .pn-keep{margin-bottom:0}
.pn-head.fresh .pn-n{color:var(--violet)}
.sp-errs ol{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem;font-size:var(--step--1);line-height:1.4}
.sp-errs s{color:var(--ink-3)} .sp-errs i{color:var(--ink-3);font-style:normal}
.sp-left .sp-panel, .sp-left .sp-goals, .sp-left .sp-tools{margin-top:var(--sp-3)}
.view-panels{display:flex;flex-direction:column;gap:.35rem;margin:.4rem 0}
.view-pn{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:var(--step--1)}
.view-pn select{font:inherit;border:1px solid var(--line-2);border-radius:var(--r-md);padding:.3rem .5rem;background:var(--paper);color:var(--ink)}

/* «Произношение» (pron.js, speak.js pronNode): фраза → разбор попытки */
.sp-pron-lb{font-size:var(--step--1);font-weight:700;color:var(--violet);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.15rem}
.sp-pron{margin-top:.45rem;padding:.5rem .65rem;border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line);font-size:var(--step--1);color:var(--ink-2)}
.sp-pron-w{font-size:var(--step-0);line-height:1.7}
.sp-pron-w .pw-ok{color:var(--ok)}
.sp-pron-w .pw-bad{color:var(--err);font-weight:700;text-decoration:underline wavy;text-underline-offset:3px}
.sp-pron-w .pw-miss{color:var(--ink-3);text-decoration:line-through}
.sp-pron-heard{color:var(--ink-3);font-family:var(--font-mono);margin-top:.15rem}
.sp-pron-tip{display:flex;gap:.35rem;align-items:flex-start;margin-top:.35rem;color:var(--ink)}
.sp-pron-tip .msi,.sp-pron-ok .msi{color:var(--violet);font-size:1.15rem}
.sp-pron-ok{display:flex;gap:.35rem;align-items:center;margin-top:.3rem;color:var(--ok);font-weight:700}
.sp-pron-ok .msi{color:var(--ok)}
.sp-pron-next{margin-top:.45rem;display:inline-flex;align-items:center;gap:.25rem}
/* слово из реплики репетитора → в тренажёр (speak.js: .sp-word, карточка .sp-wcard) */
.sp-word{text-decoration:underline dotted;text-decoration-color:var(--violet);text-underline-offset:3px;cursor:pointer;border-radius:3px}
.sp-word:hover,.sp-word:focus-visible{background:var(--violet-soft);outline:none}
.sp-wcard{position:fixed;z-index:60;background:var(--paper);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-md);padding:.7rem .8rem;
  box-shadow:0 12px 32px var(--shade-soft);display:flex;flex-direction:column;gap:.35rem}
.sp-wcard[hidden]{display:none}
.sp-wc-h{display:flex;align-items:center;gap:.5rem;font-size:var(--step-1)}
.sp-wc-ru{color:var(--ink-2)}
.sp-wc-say{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border:1px solid var(--line-2);border-radius:50%;background:var(--paper-2);color:var(--violet-deep);cursor:pointer}
.sp-wc-say:hover{border-color:var(--violet)}
.sp-wc-say:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.sp-wc-act .sp-btn{display:inline-flex;align-items:center;gap:.3rem}

/* мелочи города (micro-ui.js): реплика местного, три ответа, пояснение с источником */
.mc{display:flex;flex-direction:column;gap:.6rem;border:1px solid var(--line);border-radius:14px;padding:.8rem;background:var(--paper-2);font-size:var(--step--1);color:var(--ink-2)}
.mc-head{display:flex;align-items:center;gap:.35rem;font-weight:700;color:var(--violet-deep);font-size:.85em;text-transform:uppercase;letter-spacing:.04em}
.mc-credit{margin:6px 0 0;font-size:11px;color:var(--ink-3)}   /* подпись источника погоды MET (CC BY) под погодной мелочью */
.mc-credit a{color:inherit}
.mc-credit[hidden]{display:none}
.mc-head .msi{font-size:18px}
.mc-line{display:flex;gap:.6rem;align-items:flex-start}
.mc-who{font-size:.85em;color:var(--ink-3)}
.mc-say{font-size:var(--step-0);color:var(--ink);font-weight:600;line-height:1.35}
.mc-docbox{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:12px;background:var(--paper);padding:.6rem .8rem}
.mc-doc-h{display:flex;align-items:center;gap:.35rem;font-size:.8em;color:var(--ink-3);margin-bottom:.35rem}
.mc-doc-h .msi{font-size:18px;color:var(--violet-deep)}
.mc-doc{font-family:var(--font-mono);font-size:.85em;line-height:1.5;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.mc-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-weight:600;padding:.45rem .85rem;cursor:pointer}
.mc-btn:hover{border-color:var(--violet)}
.mc-btn:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.mc-btn .msi{font-size:18px}
.mc-play{flex:none;width:2.4rem;height:2.4rem;padding:0;justify-content:center;color:var(--violet-deep)}
.mc-opts{display:flex;flex-direction:column;gap:.4rem}
.mc-opt{justify-content:flex-start;text-align:left;border-radius:12px;font-weight:500;line-height:1.35}
.mc-opt:disabled{cursor:default;opacity:.75}
.mc-opt.ok{border-color:var(--ok);background:var(--ok-tint);opacity:1}
.mc-opt.bad{border-color:var(--err);background:var(--err-tint);opacity:1}
.mc-why{display:flex;gap:.4rem;align-items:flex-start;margin:0;color:var(--ink)}
.mc-why .msi{font-size:19px;flex:none;color:var(--violet)}
.mc-src{font-size:.8em;color:var(--ink-3)}
.mc-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.3rem}
.mc-row .mc-btn:last-child{margin-left:auto}
.mc-heard{font-size:.85em;color:var(--ink-3)}.mc-heard.ok{color:var(--ok)}
.mc-end{display:flex;gap:.4rem;align-items:center;color:var(--ink);font-weight:600}.mc-end .msi{color:var(--ok)}
/* согласие на обработку ПДн (consent-ui.js): свой блок, своя галочка */
.cs-box{display:grid;gap:.5rem;font-size:var(--step--1);color:var(--ink-2);max-width:62ch}
.cs-box p{margin:0}
.cs-box b{color:var(--ink);margin-right:.2rem}
.cs-box label{display:flex;gap:.55rem;align-items:flex-start;cursor:pointer}
.cs-box input{margin-top:.2rem;flex:none;width:1.05rem;height:1.05rem;accent-color:var(--violet)}
.cs-box a{color:var(--violet-deep)}
.cs-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.pc-a-wide .cs-box{margin-bottom:.6rem}
.cs-btns .sp-btn[disabled],.cs-box+.btn[disabled],.cs-box+.sp-btn[disabled]{opacity:.5;cursor:not-allowed}   /* действие ждёт галочку согласия */
.pc-a .ac-ai-off[hidden]{display:none}   /* .pc-link задаёт display - [hidden] сам не прячет (ловушка 24) */