@import url('fonts.css');

/* ===== дизайн-система (по прототипу KYW) ===== */
/* Тема живёт на :root (html), чтобы html/body/#app и всё, что наследует color,
   резолвили правильные токены — иначе KYW/заголовки берут цвет body от :root. */
:root, :root[data-theme="light"] {
  --bg:#F0EDE6; --surface:#FAF8F4; --surface-2:#F3EFE8; --card:#FFFFFF;
  --text:#211D18; --text-dim:#6B655C; --text-faint:#A79F92;
  --line:#E7E1D6; --line-strong:#D6D0C4;
  --accent:#E0603C; --accent-strong:#C64A28; --accent-soft:#F6E2D8;
  --correct:#4E8D5B; --correct-soft:#E5EFE4;
  --almost:#C6871F; --almost-soft:#F5E9CF;
  --wrong:#CB3B34; --wrong-soft:#F6DEDB;
  --shadow:rgba(40,32,22,.14);
}
:root[data-theme="dark"] {
  --bg:#141109; --surface:#1E1A13; --surface-2:#26221A; --card:#221E16;
  --text:#F3EFE6; --text-dim:#A79F90; --text-faint:#6E6656;
  --line:#302B22; --line-strong:#3C362B;
  --accent:#EA6C46; --accent-strong:#F2865E; --accent-soft:#3A241A;
  --correct:#6FB57E; --correct-soft:#1E2C1E;
  --almost:#E0A94A; --almost-soft:#2E2716;
  --wrong:#E5675F; --wrong-soft:#301B19;
  --shadow:rgba(0,0,0,.55);
}

* { box-sizing:border-box; }
/* в режиме приложения страница не скроллится (скроллер — #screens); в лендинге скролл включён */
html, body { margin:0; padding:0; height:100%; background:var(--bg); overflow:hidden; overscroll-behavior:none; }
html[data-view="landing"] { height:100%; overflow:hidden; }
html[data-view="landing"] body { height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
html[data-view="landing"] #app { display:none; }
html[data-view="app"] #landing { display:none; }
/* в режиме приложения страница прокручивается целиком (headbar/окно/esc — обычный поток) */
html[data-view="app"] body { height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
body {
  font-family:Archivo, system-ui, sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; }
::selection { background:var(--accent-soft); color:var(--text); }
::-webkit-scrollbar { width:10px; height:10px; background:transparent; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-corner { background:transparent; }
.hidden { display:none !important; }
button { font-family:inherit; cursor:pointer; }

@keyframes kyw-in { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@keyframes kyw-caret { 0%,45%{opacity:1;} 55%,100%{opacity:0;} }
@keyframes kyw-drift { from{transform:translateX(0);} to{transform:translateX(-200px);} }
@keyframes kyw-scroll { 0%{transform:translateX(0);} 100%{transform:translateX(-82.3px);} }
@keyframes kyw-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

/* ===== каркас окна ===== */
#app {
  position:relative; min-height:100vh; background:var(--bg);
  display:flex; flex-direction:column; align-items:center;
  padding:26px 22px 40px; overflow:visible;
}
.bg-waves { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.9; }
.bg-waves svg { position:absolute; top:20%; left:-100px; width:140%; }
.window {
  position:relative; z-index:2; width:min(760px, 96vw); flex:none;
  min-height:calc(100vh - 150px);   /* короткие экраны (лента) занимают весь экран, esc — внизу окна */
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 24px 60px -20px var(--shadow), 0 4px 12px var(--shadow); overflow:hidden;
}
.win-head {
  flex:none; display:flex; align-items:center; gap:12px;
  padding:12px 18px; border-bottom:1px solid var(--line); background:var(--surface);
}
.win-head .mark { display:flex; align-items:center; gap:8px; margin:0 auto; }
.win-head .mark b { font:900 15px/1 Archivo; letter-spacing:-.5px; }
.win-head .mark i { width:22px; height:5px; border-radius:999px; background:var(--accent); }
.win-head .meta { font:500 11px/1 Archivo; color:var(--text-faint); position:absolute; right:18px; }

/* окно — обычный поток: прокручивается вся страница, esc-панель (#foot) — часть окна снизу.
   #screens растягивается на всю высоту окна, поэтому короткие экраны прижимают esc к низу. */
#screens { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.screen { flex:1 0 auto; display:flex; flex-direction:column; padding:30px 34px; animation:kyw-in .22s ease; }
.foot {
  flex:none; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 18px; border-top:1px solid var(--line); background:var(--surface);
  font:500 12.5px/1 Archivo; color:var(--text-dim);
}
.foot .k { font:700 11px/1 'JetBrains Mono'; background:var(--surface-2); border:1px solid var(--line);
  color:var(--text); padding:5px 8px; border-radius:7px; }
.foot .sp { flex:1; }
.foot .esc { color:var(--accent-strong); font-weight:700; }

/* ===== общие компоненты ===== */
.pill { display:inline-flex; align-items:center; gap:7px; font:700 12px/1 Archivo;
  padding:7px 12px; border-radius:999px; background:var(--surface-2); color:var(--text-dim); border:1px solid var(--line); }
.pill .dot { width:6px; height:6px; border-radius:999px; background:currentColor; }
.pill.accent { background:var(--accent-soft); color:var(--accent-strong); border-color:transparent; }
.pill.line { background:transparent; color:var(--accent-strong); border-color:var(--accent-strong); }
.pill.ok { background:var(--correct-soft); color:var(--correct); border-color:transparent; }
.pill.warn { background:var(--almost-soft); color:var(--almost); border-color:transparent; }
.pill.err { background:var(--wrong-soft); color:var(--wrong); border-color:transparent; }

.btn-primary { border:none; border-radius:16px; background:var(--accent); color:#fff;
  box-shadow:0 8px 24px -8px var(--shadow); text-align:left; }
.btn-ghost { border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); }
.seg { display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px; }
.seg button { border:none; background:transparent; color:var(--text-dim); font:700 12px/1 Archivo;
  padding:7px 13px; border-radius:999px; }
.seg button.on { background:var(--accent); color:#fff; }

.title-lg { font:800 26px/1 Archivo; letter-spacing:-.3px; color:var(--text); margin:0 0 6px; }
.eyebrow { font:700 12px/1 Archivo; letter-spacing:.5px; text-transform:uppercase; color:var(--accent-strong); }

/* ===== меню ===== */
.menu-top { display:flex; justify-content:space-between; align-items:flex-start; }
.menu-logo .kyw { font:900 76px/.9 Archivo; letter-spacing:-4px; }
.menu-logo .logo-wave { display:block; width:236px; height:24px; margin-top:8px; }
.menu-logo .sub { font:500 16px/1.4 Archivo; color:var(--text-dim); margin-top:12px; }
.menu-count { text-align:right; }
.menu-count b { font:700 40px/1 'JetBrains Mono'; color:var(--accent); }
.menu-count span { display:block; font:600 12px/1 Archivo; color:var(--text-faint); margin-top:6px; letter-spacing:.4px; text-transform:uppercase; }

.start-btn { display:flex; align-items:center; gap:16px; width:100%; padding:20px 22px; margin-top:24px; }
.start-btn .play { width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; flex:none; }
.start-btn > span:nth-child(2) { display:flex; flex-direction:column; }
.start-btn .t { display:block; font:800 20px/1.15 Archivo; color:#fff; }
.start-btn .s { display:block; font:500 13px/1 Archivo; color:rgba(255,255,255,.85); margin-top:5px; }
.start-btn .kbd { margin-left:auto; font:600 13px/1 'JetBrains Mono'; color:#fff;
  background:rgba(255,255,255,.18); padding:8px 12px; border-radius:999px; }

.tags-head { display:flex; align-items:center; justify-content:space-between; margin:26px 0 12px; }
.tags-head .lbl { font:700 13px/1 Archivo; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); }
.tags-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tag { display:flex; align-items:center; gap:10px; padding:15px 16px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line); color:var(--text); font:600 15px/1 Archivo; }
.tag .dot { width:9px; height:9px; border-radius:999px; background:var(--line-strong); }
.tag .cnt { margin-left:auto; font:700 12px/1 'JetBrains Mono'; color:var(--text-faint);
  background:var(--surface-2); padding:4px 9px; border-radius:999px; }
.tag.on { background:var(--accent-soft); border-color:var(--accent); }
.tag.on .dot { background:var(--accent); }
.tag.on .cnt { background:var(--accent); color:#fff; }
.tags-run { width:100%; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:15px; border-radius:14px; background:var(--surface-2); border:1.5px solid var(--accent); color:var(--text); font:700 16px/1 Archivo; }
.tags-run .n { font:700 12px/1 'JetBrains Mono'; background:var(--accent); color:#fff; padding:4px 9px; border-radius:999px; }
.menu-links { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border-top:1px solid var(--line); margin-top:24px; padding-top:22px; }
.menu-links button { text-align:left; padding:14px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--line); }
.menu-links .t { font:700 14px/1 Archivo; color:var(--text); }
.menu-links .k { font:600 11px/1 'JetBrains Mono'; color:var(--text-faint); margin-top:8px; }

/* ===== лента ===== */
.feed-status { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.feed-status .sp { flex:1; }
.feed-status .card-n { font:700 13px/1 Archivo; color:var(--text-faint); }
.feed-body { flex:1; display:flex; flex-direction:column; justify-content:center; }
.def-eyebrow { text-align:center; font:600 11px/1 Archivo; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-faint); margin-bottom:20px; }
.definition { text-align:center; font:500 34px/1.32 Archivo; color:var(--text); margin:0 auto 24px; max-width:560px; text-wrap:pretty; }
.set-slider { display:flex; align-items:center; gap:14px; }
.set-slider input[type=range] { width:160px; }
.set-slider .mono { min-width:64px; text-align:right; display:inline-block; }
#feed-intro .reveal-word { margin-bottom:22px; }
.intro-cont { text-align:center; margin-top:26px; color:var(--text-faint); font:500 13px Archivo; }
.intro-cont .k { margin-left:4px; }
.answer-input { width:100%; border:2px solid var(--accent); border-radius:16px; background:var(--card);
  padding:18px 22px; font:500 26px/1 'JetBrains Mono'; letter-spacing:1px; color:var(--text); caret-color:var(--accent); outline:none;
  box-shadow:0 0 0 4px var(--accent-soft), 0 8px 20px -12px var(--shadow); }
.answer-input::placeholder { color:var(--text-faint); }
.input-wrap { position:relative; }
.input-hint { position:absolute; right:18px; top:50%; transform:translateY(-50%); font:500 13px/1 Archivo; color:var(--text-faint); pointer-events:none; }
.hint-row { display:flex; align-items:center; gap:10px; margin-top:16px; font:600 13px/1 Archivo; color:var(--text-dim); }
.hint-cells { display:flex; gap:6px; background:var(--accent-soft); padding:7px 12px; border-radius:999px; }
.hint-cells span { width:14px; text-align:center; font:700 13px/1 'JetBrains Mono'; color:var(--accent-strong); }
.hint-cells span.blank { color:var(--accent); opacity:.4; }

/* показ ответа */
.verdict-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.verdict { display:inline-flex; align-items:center; gap:8px; font:800 14px/1 Archivo; padding:9px 15px; border-radius:12px; border:1.5px solid; }
.verdict.ok { background:var(--correct-soft); color:var(--correct); border-color:var(--correct); }
.verdict.warn { background:var(--almost-soft); color:var(--almost); border-color:var(--almost); }
.verdict.err { background:var(--wrong-soft); color:var(--wrong); border-color:var(--wrong); }
.legend { display:flex; gap:12px; align-items:center; }
.legend span { display:inline-flex; align-items:center; gap:6px; font:600 11px/1 Archivo; color:var(--text-faint); }
.legend i { width:9px; height:9px; border-radius:999px; }
.reveal-word-eyebrow { text-align:center; font:600 11px/1 Archivo; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-faint); margin:8px 0 12px; }
.reveal-word { text-align:center; font:700 46px/1 'JetBrains Mono'; letter-spacing:1px; color:var(--text); }
.reveal-word .wave { display:block; width:220px; height:16px; margin:10px auto 0; overflow:hidden; }
.reveal-word .wave-scroll { animation:kyw-scroll 1.1s cubic-bezier(.15,.7,.2,1) forwards; }
.cmp { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.cmp .box { border-radius:12px; padding:14px 16px; border:1px solid; }
.cmp .box.you { background:var(--wrong-soft); border-color:var(--wrong); }
.cmp .box.ok { background:var(--correct-soft); border-color:var(--correct); }
.cmp .box .lbl { font:600 11px/1 Archivo; letter-spacing:.5px; text-transform:uppercase; margin-bottom:10px; }
.cmp .box.you .lbl { color:var(--wrong); }
.cmp .box.ok .lbl { color:var(--correct); }
.cmp .box .val { display:flex; flex-wrap:wrap; font-size:22px; font-family:'JetBrains Mono', monospace; }
.dc { display:inline-flex; align-items:center; justify-content:center; min-width:.62em; padding:.14em .04em; border-radius:6px; }
.dc.ok { color:var(--text); }
.dc.bad { color:var(--wrong); background:var(--wrong-soft); text-decoration:line-through; text-decoration-color:var(--wrong); }
.dc.miss { color:var(--correct); background:var(--correct-soft); box-shadow:inset 0 -3px 0 var(--correct); }
.example { margin-top:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px 18px; }
.example .lbl { font:600 11px/1 Archivo; letter-spacing:.5px; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px; }
.example .txt { font:400 15px/1.5 Archivo; color:var(--text); }
.example .txt b { color:var(--accent-strong); font-weight:600; }
.grades-head { display:flex; align-items:baseline; justify-content:space-between; margin:20px 0 10px; }
.grades-head .l { font:700 13px/1 Archivo; color:var(--text-dim); }
.grades-head .l b { color:var(--accent-strong); }
.grades-head .r { font:500 11px/1 Archivo; color:var(--text-faint); }
.grades { display:flex; gap:10px; }
.grade { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 8px; border-radius:12px;
  background:var(--surface-2); border:1.5px solid var(--line); color:var(--text); }
.grade .num { font:700 12px/1 'JetBrains Mono'; padding:2px 6px; border-radius:5px; background:var(--surface); color:var(--text-faint); }
.grade .lab { font:800 15px/1 Archivo; margin-top:2px; }
.grade .sub { font:500 11px/1 Archivo; color:var(--text-faint); }
.grade.on { background:var(--accent); border-color:var(--accent); box-shadow:0 3px 12px var(--shadow); }
.grade.on .num { background:rgba(255,255,255,.22); color:#fff; }
.grade.on .lab { color:#fff; }
.grade.on .sub { color:rgba(255,255,255,.8); }

/* пусто */
.empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:20px; }
.empty .empty-wave { width:260px; height:52px; animation:kyw-float 5s ease-in-out infinite; }
.empty .big { font:800 26px/1.2 Archivo; }
.empty .txt { font:500 15px/1.5 Archivo; color:var(--text-dim); max-width:400px; }
.btn-empty { display:flex; align-items:center; gap:12px; padding:15px 22px; border:none; border-radius:14px;
  background:var(--accent); color:#fff; font:700 15px/1 Archivo; box-shadow:0 8px 24px -10px var(--shadow); }
.btn-empty .k { font:700 12px/1 'JetBrains Mono'; background:rgba(255,255,255,.22); color:#fff; padding:5px 9px; border-radius:8px; }

/* ===== импорт ===== */
.fmt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
.fmt { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.fmt b { font:700 15px/1 Archivo; }
.fmt code { display:block; font:400 12px/1.4 'JetBrains Mono'; color:var(--text-faint); margin-top:8px; }
.paste-head { display:flex; align-items:center; justify-content:space-between; background:var(--surface-2);
  border:1px solid var(--line); border-bottom:none; border-radius:12px 12px 0 0; padding:10px 14px;
  font:700 11px/1 Archivo; letter-spacing:.6px; text-transform:uppercase; color:var(--text-faint); }
.paste { width:100%; min-height:180px; border:1px solid var(--line); border-radius:0 0 12px 12px;
  background:var(--card); padding:16px; font:400 15px/1.7 'JetBrains Mono'; color:var(--text); outline:none; resize:vertical; }
.import-actions { display:flex; align-items:center; gap:14px; margin-top:16px; }
.import-actions .btn-ghost { padding:14px 18px; font:700 15px/1 Archivo; }
.import-actions .imp-copy { margin-left:auto; }
.import-actions .go { border:none; border-radius:12px; background:var(--accent); color:#fff; padding:14px 22px; font:700 15px/1 Archivo; display:flex; align-items:center; gap:10px; }
.import-actions .go .k { background:rgba(255,255,255,.2); padding:5px 8px; border-radius:7px; font:700 11px/1 'JetBrains Mono'; }
.import-res { margin-left:auto; display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px;
  background:var(--correct-soft); border:1px solid var(--correct); }
.import-res .n { font:700 13px/1 Archivo; color:var(--correct); }
.import-res .rest { font:500 12px/1 Archivo; color:var(--text-dim); }
.import-res.err { background:var(--wrong-soft); border-color:var(--wrong); }
.import-res.err .n { color:var(--wrong); }

/* ===== экран «Слова» ===== */
.words-head { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.words-total { font:700 13px/1 'JetBrains Mono'; color:var(--text-faint); }
.words-tabs { width:100%; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:4px; margin-bottom:18px; }
.words-tabs button { flex:1; border:none; background:transparent; color:var(--text-dim); font:700 14px/1 Archivo; padding:10px; border-radius:9px; }
.words-tabs button.on { background:var(--accent); color:#fff; box-shadow:0 2px 8px var(--shadow); }
.add-sub { font:500 14px/1.4 Archivo; color:var(--text-dim); margin-bottom:18px; }

.wsearch { display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:12px; background:var(--card); border:1.5px solid var(--line); margin-bottom:16px; }
.wsearch svg { flex:none; }
.wsearch input { flex:1; appearance:none; border:none; outline:none; background:transparent; font:500 14px/1 Archivo; color:var(--text); }
.wsearch input::placeholder { color:var(--text-faint); }
.wsearch.bad { border-color:var(--wrong); }
.wsearch .kbd { font:600 11px/1 'JetBrains Mono'; color:var(--text-faint); padding:4px 8px; border-radius:6px; background:var(--surface-2); }

.wlist-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.wlist-meta > span { font:600 12px/1 Archivo; color:var(--text-faint); }
.wlegend { display:flex; gap:6px; align-items:center; }
.wlegend span { display:inline-flex; align-items:center; gap:4px; font:600 10px/1 Archivo; color:var(--text-faint); margin-left:6px; }
.wlegend span:first-child { margin-left:0; }
.wlegend i { width:8px; height:8px; border-radius:999px; }

.wempty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding:42px 0; }
.wempty .big { font:800 18px/1.3 Archivo; color:var(--text); }
.wempty .txt { font:500 13px/1.5 Archivo; color:var(--text-dim); max-width:320px; }
.btn-accent { display:flex; align-items:center; gap:10px; padding:12px 18px; border:none; border-radius:12px;
  background:var(--accent); color:#fff; font:700 14px/1 Archivo; box-shadow:0 6px 18px -8px var(--shadow); }

.wrows { display:flex; flex-direction:column; gap:8px; }
.wrow { display:flex; flex-direction:column; border-radius:12px; border:1px solid var(--line); background:var(--card); overflow:hidden; transition:border-color .16s; }
.wrow.sel { border-color:var(--line-strong); }
.wrow.editing { border-color:var(--accent); background:var(--surface-2); }
.wrow-main { display:flex; align-items:center; gap:12px; padding:13px 15px; }
.wdot { width:8px; height:8px; border-radius:999px; flex:none; }
.wrow-body { flex:1; min-width:0; }
.wrow-title { display:flex; align-items:baseline; gap:10px; }
.wrow-title .ww { font:700 15px/1 'JetBrains Mono'; color:var(--text); }
.wmarker { font:700 10.5px/1 Archivo; padding:4px 8px; border-radius:999px; white-space:nowrap; }
.wdef { font:500 12.5px/1.3 Archivo; color:var(--text-dim); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wchips { display:flex; gap:5px; flex:none; }
.wchip { font:600 10.5px/1 Archivo; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); padding:4px 8px; border-radius:999px; }
.wactions { display:flex; gap:4px; flex:none; }
.wbtn { width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim); display:flex; align-items:center; justify-content:center; }
.wbtn.wdel { color:var(--wrong); }
.wbtn:hover { border-color:var(--accent); }

.wedit { border-top:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--surface); }
.wedit .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wedit label { display:flex; flex-direction:column; gap:6px; }
.wedit label > span { font:600 11px/1 Archivo; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; }
.wedit input { appearance:none; border:1px solid var(--line); border-radius:9px; padding:10px 12px; font:500 14px/1 Archivo; color:var(--text); background:var(--card); outline:none; }
.wedit input.mono { font-family:'JetBrains Mono', monospace; }
.wedit input:focus { border-color:var(--accent); }
.wedit-actions { display:flex; align-items:center; gap:10px; margin-top:2px; }
.wedit-actions .save { padding:10px 18px; border:none; border-radius:10px; background:var(--accent); color:#fff; font:700 13px/1 Archivo; }
.wedit-actions .cancel { padding:10px 18px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text-dim); font:700 13px/1 Archivo; }
.wedit-actions .del { margin-left:auto; padding:10px 16px; border:1px solid var(--wrong); border-radius:10px; background:var(--wrong-soft); color:var(--wrong); font:700 13px/1 Archivo; }
.wedit-err { font:600 12px/1 Archivo; color:var(--wrong); }

/* ===== статистика ===== */
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.tile.soft { background:var(--surface-2); }
.tile b { font:700 34px/1 'JetBrains Mono'; }
.tile.n1 b{color:var(--text);} .tile.n2 b{color:var(--accent);} .tile.n3 b{color:var(--almost);} .tile.n4 b{color:var(--correct);}
.tile span { display:block; font:600 12px/1 Archivo; color:var(--text-faint); margin-top:8px; }
.tile.soft { display:flex; flex-direction:column-reverse; }   /* v2: подпись сверху, значение снизу */
.tile.soft b { font-size:22px; }
.tile.soft span { margin-top:0; margin-bottom:10px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:14px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel-head b { font:800 16px/1 Archivo; }
.panel-head span { font:500 12px/1 Archivo; color:var(--text-faint); }
.forecast { display:flex; align-items:flex-end; gap:12px; height:150px; }
.forecast .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.forecast .bar { width:100%; background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px 7px 0 0; }
.forecast .col.today .bar { background:var(--accent); border-color:var(--accent); }
.forecast .v { font:700 12px/1 'JetBrains Mono'; color:var(--text-dim); }
.forecast .d { font:600 11px/1 Archivo; color:var(--text-faint); }
.split2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tagbar { margin-bottom:12px; }
.tagbar .row { display:flex; justify-content:space-between; font:600 13px/1 Archivo; margin-bottom:6px; }
.tagbar .track { height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.tagbar .fill { height:100%; background:var(--accent); border-radius:999px; }
.leech { display:flex; align-items:center; justify-content:space-between; background:var(--wrong-soft);
  border-radius:10px; padding:12px 14px; margin-bottom:8px; }
.leech .w { font:600 16px/1 'JetBrains Mono'; color:var(--text); }
.leech .x { font:700 12px/1 'JetBrains Mono'; color:var(--wrong); }

/* ===== настройки ===== */
.set-section { margin-top:8px; margin-bottom:22px; }
.set-section .eyebrow { margin-bottom:14px; display:block; }
.set-card { border-radius:14px; background:var(--card); border:1px solid var(--line); overflow:hidden; }
.set-card-pad { padding:18px; display:flex; flex-direction:column; gap:18px; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--line); }
.set-row:last-child { border-bottom:none; }
.set-row .l b { font:600 14px/1 Archivo; display:block; }
.set-row .l span { font:500 11px/1 Archivo; color:var(--text-faint); margin-top:5px; display:block; }
.set-val { font:700 14px/1 'JetBrains Mono'; background:var(--surface-2); border:1px solid var(--line); padding:6px 12px; border-radius:8px; color:var(--text); }
.set-block-lbl { font:600 13px/1 Archivo; color:var(--text-dim); margin-bottom:9px; }
input[type=range] { -webkit-appearance:none; appearance:none; height:6px; border-radius:999px;
  background:linear-gradient(to right, var(--accent) 0%, var(--surface-2) 0%); width:160px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:999px; background:var(--accent); border:2.5px solid var(--surface); box-shadow:0 1px 4px var(--shadow); cursor:pointer; }
.toggle { width:46px; height:26px; border-radius:999px; background:var(--line-strong); position:relative; border:none; transition:.15s; flex:none; }
.toggle .k { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:.15s; }
.toggle.on { background:var(--accent); }
.toggle.on .k { left:23px; }
.theme-seg { display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:4px; }
.theme-seg button { flex:1; border:none; background:transparent; color:var(--text-dim); font:600 13px/1 Archivo; padding:9px; border-radius:9px; }
.theme-seg button.on { background:var(--accent); color:#fff; box-shadow:0 2px 8px var(--shadow); }
.swatches { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.swatch { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px; border-radius:12px;
  background:var(--surface-2); border:1.5px solid var(--line); cursor:pointer; }
.swatch .dot { width:26px; height:26px; border-radius:999px; box-shadow:0 2px 6px var(--shadow); }
.swatch .nm { font:600 11px/1 Archivo; color:var(--text-dim); }
.swatch.on { background:var(--accent-soft); border-color:var(--accent); }
.swatch.on .nm { color:var(--text); }
.hk-row { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--line);
  font:600 13px/1 Archivo; color:var(--text); }
.hk-row:last-child { border-bottom:none; }
.hk-key { font:700 12px/1 'JetBrains Mono'; color:var(--text-dim); padding:6px 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); }
.hk-edit { cursor:pointer; min-width:64px; text-align:center; transition:.14s; }
.hk-edit:hover { border-color:var(--accent); color:var(--text); }
.hk-edit.capturing { background:var(--accent); border-color:var(--accent); color:#fff; }
.hk-fixed { opacity:.85; }
.hk-note { font:500 11px/1.4 Archivo; color:var(--text-faint); margin-top:10px; padding:0 2px; }

/* ================= общие кнопки лендинга ================= */
.btn-solid { border:none; border-radius:12px; background:var(--accent); color:#fff; font:700 14px/1 Archivo; padding:11px 18px; box-shadow:0 8px 22px -12px var(--shadow); transition:background .15s; }
.btn-solid:hover { background:var(--accent-strong); }
.btn-outline { border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); font:700 14px/1 Archivo; padding:11px 18px; transition:border-color .15s; }
.btn-outline:hover { border-color:var(--accent); }
.btn-solid.lg, .btn-outline.lg { font-size:16px; padding:15px 24px; border-radius:14px; }
.icon-btn { width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--text-dim); display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s; }
.icon-btn:hover { border-color:var(--accent); color:var(--text); }

/* ================= ЛЕНДИНГ ================= */
#landing { position:relative; z-index:1; min-height:100vh; color:var(--text); }
.land-inner { position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:22px 26px 60px; }
.land-top { display:flex; align-items:center; gap:14px; }
.land-top .mark { display:flex; align-items:center; gap:9px; }
.land-top .mark b { font:900 24px/1 Archivo; letter-spacing:-1px; }
.land-top-right { margin-left:auto; display:flex; align-items:center; gap:10px; }

.lang-picker { position:relative; }
.lang-picker > button { display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface); color:var(--text); font:600 13px/1 Archivo; padding:11px 14px; border-radius:11px; }
.lang-picker > button:hover { border-color:var(--accent); }
.lang-picker .menu { position:absolute; top:calc(100% + 6px); right:0; z-index:60; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 40px -16px var(--shadow); padding:6px; min-width:170px; }
.lang-picker .menu button { display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; border:none; background:transparent; color:var(--text); font:600 14px/1 Archivo; padding:11px 12px; border-radius:9px; text-align:left; }
.lang-picker .menu button:hover { background:var(--surface-2); }
.lang-picker .menu button.on { color:var(--accent-strong); }
.lang-picker .menu button .tick { color:var(--accent); opacity:0; }
.lang-picker .menu button.on .tick { opacity:1; }

.hero { text-align:center; padding:72px 0 40px; display:flex; flex-direction:column; align-items:center; animation:kyw-in .5s ease both; }
.free-badge { display:inline-flex; align-items:center; gap:8px; font:700 12.5px/1 Archivo; padding:8px 14px; border-radius:999px; background:var(--accent-soft); color:var(--accent-strong); }
.free-badge .dot { width:6px; height:6px; border-radius:999px; background:currentColor; }
.hero-logo { font:900 120px/.85 Archivo; letter-spacing:-6px; margin-top:22px; }
.hero-wave { width:360px; max-width:80%; height:30px; margin-top:6px; }
.hero-tag { font:800 30px/1.15 Archivo; letter-spacing:-.8px; margin-top:26px; text-wrap:balance; }
.hero-desc { font:500 18px/1.6 Archivo; color:var(--text-dim); max-width:640px; margin:18px 0 0; text-wrap:pretty; }
.hero-cta { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; justify-content:center; }
.hero-note { font:500 12.5px/1.5 Archivo; color:var(--text-faint); margin-top:16px; max-width:520px; }

/* блок «попробуй сам» */
.trial-block { position:relative; margin-top:32px; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:38px 40px; box-shadow:0 20px 50px -30px var(--shadow); }
.trial-eyebrow { margin-bottom:12px; }
.trial-title { font:800 32px/1.1 Archivo; letter-spacing:-.6px; margin:0 0 12px; }
.trial-desc { font:500 16px/1.55 Archivo; color:var(--text-dim); max-width:620px; margin:0 0 26px; }
.trial-controls { display:flex; flex-direction:column; gap:20px; margin-bottom:26px; }
.trial-lbl { font:700 12px/1 Archivo; letter-spacing:.4px; text-transform:uppercase; color:var(--text-faint); margin-bottom:11px; }
/* языки: тянутся, чтобы каждый ряд заполнял ширину и сходился с правым краем */
.wl-row { display:flex; gap:8px; flex-wrap:wrap; }
.wl-chip { flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:11px 15px; font:700 14px/1 Archivo; color:var(--text); white-space:nowrap; }
.wl-chip .flag { font-size:16px; }
.wl-badge { width:24px; height:24px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font:800 10px/1 'JetBrains Mono'; color:var(--text-dim); }
.wl-chip.on .wl-badge { background:var(--accent); color:#fff; border-color:transparent; }
.wl-chip.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); }
.wl-chip.soon { opacity:.55; }
.wl-chip .soon-tag { font:600 10px/1 Archivo; color:var(--text-faint); background:var(--surface-2); padding:3px 7px; border-radius:999px; }
/* уровни: 6 колонок одинаковой ширины на всю ширину блока, компактнее по высоте */
.lvl-row { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
@media (max-width:520px){ .lvl-row{ grid-template-columns:repeat(3,1fr);} }
.lvl-chip { display:flex; flex-direction:column; align-items:center; gap:2px; border:1.5px solid var(--line); background:var(--card); border-radius:11px; padding:8px 4px; }
.lvl-chip b { font:800 16px/1.1 Archivo; color:var(--text); }
.lvl-chip span { font:600 9.5px/1.15 Archivo; color:var(--text-faint); text-align:center; white-space:nowrap; }
.lvl-chip.on { border-color:var(--accent); background:var(--accent-soft); }
.lvl-chip.on b { color:var(--accent-strong); }
.trial-go { display:inline-flex; align-items:center; gap:12px; }
.trial-go .play { width:26px; height:26px; border-radius:999px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:12px; }
.trial-note { font:500 13px/1.5 Archivo; color:var(--text-faint); margin-top:14px; }

/* о сайте (бенто) */
.about-section { margin-top:60px; }
.about-h { font:800 34px/1.1 Archivo; letter-spacing:-.8px; margin:0 0 8px; text-align:center; }
.about-sub { font:500 16px/1.5 Archivo; color:var(--text-dim); text-align:center; max-width:560px; margin:0 auto 34px; }
.about-sub-app { text-align:left; max-width:none; margin:0 0 22px; }
.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:168px; gap:14px; }
@media (max-width:820px){ .bento{ grid-template-columns:repeat(2,1fr);} }
.about-card { position:relative; display:flex; flex-direction:column; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:18px; padding:20px 22px 36px; overflow:hidden; transition:border-color .16s, transform .16s, box-shadow .16s; }
.about-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 16px 34px -20px var(--shadow); }
.about-card .ac-icon { width:44px; height:44px; border-radius:999px; background:var(--accent-soft); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; margin-bottom:auto; }
.about-card .ac-icon svg { display:block; }
.about-card .ac-title { font:800 19px/1.15 Archivo; color:var(--text); margin-top:14px; }
.about-card .ac-sum { font:500 13px/1.45 Archivo; color:var(--text-dim); margin-top:7px; text-wrap:pretty; }
.about-card.big { grid-column:span 2; grid-row:span 2; }
.about-card.tall { grid-row:span 2; }
.about-card.wide { grid-column:span 2; }
.about-card.big .ac-title { font-size:26px; }
.about-card.big .ac-sum { font-size:15px; }
.about-card .ac-open { position:absolute; right:20px; bottom:12px; font:700 12px/1 Archivo; color:var(--accent-strong); opacity:0; transition:opacity .16s; }
.about-card:hover .ac-open { opacity:1; }

.land-foot { display:flex; align-items:center; gap:14px; border-top:1px solid var(--line); margin-top:60px; padding-top:26px; }
.land-foot .mark b { font:900 22px/1 Archivo; letter-spacing:-1px; }
.land-foot-copy { margin-left:auto; font:500 12.5px/1 Archivo; color:var(--text-faint); }

/* ===== раздел «О сайте» внутри приложения: узкий контейнер, 2 колонки, авто-высота ===== */
#about-grid-app { grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(150px,auto); }
#about-grid-app .about-card { grid-column:auto; grid-row:auto; }
#about-grid-app .about-card.big { grid-column:1 / -1; }
#about-grid-app .about-card.wide { grid-column:1 / -1; }
@media (max-width:560px){ #about-grid-app { grid-template-columns:1fr; } #about-grid-app .about-card.big, #about-grid-app .about-card.wide { grid-column:auto; } }

/* ===== кнопка «на главную» под блоком входа/регистрации ===== */
.auth-back-btn { width:100%; justify-content:center; margin:16px 0 0; }

/* ===== адаптив: шапка лендинга на узких экранах ===== */
@media (max-width:640px){
  .land-inner { padding:18px 16px 48px; }
  .land-top { flex-wrap:wrap; gap:10px 8px; }
  .land-top-right { gap:8px; }
  .btn-solid, .btn-outline { padding:10px 13px; font-size:13px; }
  .btn-solid.lg, .btn-outline.lg { padding:13px 18px; font-size:15px; }
  .icon-btn { width:38px; height:38px; }
  /* язык — только глобус + стрелка, без подписи */
  .lang-picker > button { font-size:0; gap:6px; padding:10px; }
  .hero-logo { font-size:88px; letter-spacing:-4px; }
  .trial-block { padding:26px 20px; }
  .trial-title { font-size:26px; }
  .about-h { font-size:26px; }
}
@media (max-width:400px){
  .hero-logo { font-size:70px; }
  .land-top-right .btn-outline { display:none; } /* «Войти» есть в герое ниже */
}

/* ================= ГОЛОВНАЯ ПИЛЮЛЯ ================= */
.headbar { position:relative; z-index:5; flex:none; width:min(660px,92vw); margin:8px auto 18px; display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 9px; box-shadow:0 12px 30px -16px var(--shadow); }
.hb-nav { flex:1; display:flex; justify-content:space-between; gap:2px; }
.hb-nav button { flex:1; text-align:center; border:none; background:transparent; color:var(--text-dim); font:600 13px/1 Archivo; padding:9px 6px; border-radius:999px; transition:.14s; white-space:nowrap; }
.hb-nav button:hover { color:var(--text); }
.hb-nav button.on { background:var(--accent-soft); color:var(--accent-strong); }
.hb-theme { flex:none; width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text-dim); display:flex; align-items:center; justify-content:center; }
.hb-theme:hover { border-color:var(--accent); color:var(--text); }
.hb-theme .ic-moon { display:none; }
html[data-theme="dark"] .hb-theme .ic-sun, html[data-theme="dark"] #land-theme .ic-sun { display:none; }
html[data-theme="dark"] .hb-theme .ic-moon, html[data-theme="dark"] #land-theme .ic-moon { display:inline; }
#land-theme .ic-moon { display:none; }
.trial-only { display:none; }
html[data-trial="1"] .trial-only { display:flex; }

/* окно чуть ниже под пилюлей */
html[data-view="app"] .window { flex:1; }

/* ================= настройки ленты ================= */
/* кнопка «настройки ленты» — аккуратная пилюля в правом верхнем углу ленты */
/* кнопка настроек ленты — компактная иконка в строке статуса (вместо «карточка N») */
.feed-cog { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim); border-radius:10px; flex:none; }
.feed-cog svg { display:block; }
.feed-cog:hover { border-color:var(--accent); color:var(--text); }

/* окно настроек ленты (оверлей): всё внутри карточки, «назад» — сверху во всю ширину */
.fset-wrap { max-width:620px; margin:0 auto; padding:30px 24px 60px; }
.fset-back-btn { width:100%; justify-content:center; margin:0 0 14px; }
.fset-card { background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 60px -30px var(--shadow); padding:32px 34px; }
.fset-form { display:flex; flex-direction:column; gap:24px; margin-top:6px; }
.fset-field { display:flex; flex-direction:column; gap:12px; }
.fset-lbl { display:flex; flex-direction:column; gap:3px; }
.fset-lbl b { font:800 16px/1.2 Archivo; color:var(--text); }
.fset-sub { font:500 12.5px/1.3 Archivo; color:var(--text-faint); }
.fset-lbl-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.fset-newrow { display:flex; align-items:center; gap:12px; }
.fset-num { width:110px; flex:none; border:1.5px solid var(--line); background:var(--surface); border-radius:11px; padding:12px 14px; font:700 17px/1 'JetBrains Mono'; color:var(--text); text-align:center; }
.fset-num:focus { outline:none; border-color:var(--accent); }
.fset-addnew { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px; font-size:15px; }
.fset-addnew .play { font-size:11px; }
/* «Последние пройденные» — тег с полем для ввода числа (пунктир = можно вписать своё) */
.tag.recent { cursor:pointer; }
.tag.recent .tname { white-space:nowrap; }
.tag.recent .cnt-input { margin-left:auto; width:62px; flex:none; text-align:center; font:700 13px/1 'JetBrains Mono'; color:var(--accent-strong); background:var(--card); border:1.5px dashed var(--accent); border-radius:999px; padding:5px 6px; -moz-appearance:textfield; }
.tag.recent .cnt-input:focus { outline:none; border-style:solid; }
.tag.recent .cnt-input::-webkit-outer-spin-button, .tag.recent .cnt-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* язык интерфейса в настройках */
.lang-seg { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.lang-seg button { border:1.5px solid var(--line); background:var(--surface-2); border-radius:11px; padding:11px; font:600 13px/1 Archivo; color:var(--text-dim); }
.lang-seg button.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); }

/* ================= пробный баннер ================= */
.trial-banner { position:fixed; z-index:80; left:50%; bottom:20px; transform:translateX(-50%); display:flex; align-items:center; gap:12px;
  background:var(--text); color:var(--bg); border-radius:999px; padding:10px 12px 10px 18px; box-shadow:0 16px 40px -14px rgba(0,0,0,.5); font:600 13px/1 Archivo; }
.trial-banner .dot { width:8px; height:8px; border-radius:999px; background:var(--accent); }
.trial-banner button { border:none; background:var(--accent); color:#fff; font:700 12.5px/1 Archivo; padding:8px 14px; border-radius:999px; }
.trial-banner button:hover { background:var(--accent-strong); }

/* ================= оверлеи (о сайте / деталь) ================= */
.overlay { position:fixed; inset:0; z-index:100; background:var(--bg); overflow-y:auto; animation:kyw-in .2s ease; }
.overlay-inner { max-width:900px; margin:0 auto; padding:30px 26px 70px; }
.overlay-inner.narrow { max-width:720px; }
.ov-back { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); color:var(--text); font:700 13px/1 Archivo; padding:10px 15px; border-radius:11px; margin-bottom:24px; }
.ov-back:hover { border-color:var(--accent); }
.detail-head { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.detail-icon { width:52px; height:52px; border-radius:999px; background:var(--accent-soft); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; flex:none; }
.detail-icon svg { display:block; }
.detail-head h1 { font:800 34px/1.05 Archivo; letter-spacing:-.8px; margin:0; }

/* документ (тексты about) */
.doc { font:400 16px/1.65 Archivo; color:var(--text); }
.doc .lead { font:500 20px/1.5 Archivo; color:var(--text); margin:0 0 22px; text-wrap:pretty; }
.doc h3 { font:800 19px/1.2 Archivo; margin:28px 0 10px; }
.doc p { margin:0 0 14px; color:var(--text-dim); text-wrap:pretty; }
.doc p.muted { font:500 14px/1.5 Archivo; color:var(--text-faint); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.doc b { color:var(--text); font-weight:700; }
.doc ul, .doc ol { margin:0 0 16px; padding-left:0; list-style:none; }
.doc ul.hacks li, .doc ol.steps li { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:15px 18px 15px 20px; margin-bottom:10px; color:var(--text-dim); font:400 15px/1.5 Archivo; }
.doc ol.steps { counter-reset:st; }
.doc ol.steps li { padding-left:56px; counter-increment:st; }
.doc ol.steps li::before { content:counter(st); position:absolute; left:16px; top:14px; width:26px; height:26px; border-radius:8px; background:var(--accent-soft); color:var(--accent-strong); font:800 13px/26px 'JetBrains Mono'; text-align:center; }
.doc ul.hacks li b { color:var(--text); }
.doc .qa { background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:16px 18px; margin-bottom:10px; }
.doc .qa b { display:block; font:700 16px/1.3 Archivo; color:var(--text); margin-bottom:7px; }
.doc .qa p { margin:0; }
.doc .kbd-sheet { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:600px){ .doc .kbd-sheet{ grid-template-columns:1fr;} }
.doc .kbd-sheet > div { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.doc .kbd-sheet .k { font:700 13px/1 'JetBrains Mono'; color:var(--text); background:var(--surface-2); border:1px solid var(--line); padding:7px 10px; border-radius:8px; min-width:44px; text-align:center; flex:none; }
.doc .kbd-sheet span:last-child { font:500 13.5px/1.3 Archivo; color:var(--text-dim); }
.doc .contacts { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 22px; }
.doc .contacts a { display:inline-flex; align-items:center; border:1px solid var(--line); background:var(--surface); border-radius:11px; padding:11px 16px; font:700 14px/1 'JetBrains Mono'; color:var(--accent-strong); }
.doc .contacts a:hover { border-color:var(--accent); }
/* Алгоритм — две части + математика (нативный MathML) */
.doc .algo-part { margin:0 0 30px; }
.doc .algo-part + .algo-part { border-top:1px solid var(--line); padding-top:26px; }
.doc .part-badge { display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; padding:8px 14px;
  border-radius:999px; background:var(--accent-soft); color:var(--accent-strong);
  font:800 12px/1 Archivo; letter-spacing:.4px; text-transform:uppercase; }
.doc .eq { overflow-x:auto; overflow-y:hidden; margin:14px 0; padding:14px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  text-align:center; scrollbar-width:thin; }
.doc .eq math { font-size:1.18em; color:var(--text); }
.doc math { color:var(--text); }
.doc p.eq-leg { font:400 14px/1.55 Archivo; color:var(--text-faint); margin:-4px 0 14px; }
.doc p.eq-leg i, .doc p i, .doc li i { font-style:italic; color:var(--text); }
/* обратная связь — окошко как поле карточки */
.fb-slot { margin-top:8px; }
.fb-input { width:100%; min-height:120px; border:2px solid var(--accent); border-radius:16px; background:var(--card); padding:16px 18px; font:500 17px/1.5 'JetBrains Mono'; color:var(--text); caret-color:var(--accent); outline:none; box-shadow:0 0 0 4px var(--accent-soft), 0 8px 20px -12px var(--shadow); resize:none; overflow:hidden; }
.fb-input::placeholder { color:var(--text-faint); }
.fb-send { margin-top:14px; border:none; border-radius:12px; background:var(--accent); color:#fff; font:700 15px/1 Archivo; padding:14px 22px; }
.fb-send:hover { background:var(--accent-strong); }
.fb-locked { background:var(--surface); border:1px dashed var(--line-strong); border-radius:14px; padding:22px; text-align:center; font:500 15px/1.5 Archivo; color:var(--text-dim); }
.fb-sent { margin-top:14px; background:var(--correct-soft); border:1px solid var(--correct); color:var(--correct); border-radius:12px; padding:14px 16px; font:600 14px/1.4 Archivo; }
.fb-err { margin-top:14px; background:var(--wrong-soft); border:1px solid var(--wrong); color:var(--wrong); border-radius:12px; padding:14px 16px; font:600 14px/1.4 Archivo; }
.fb-contacts { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); font:500 14.5px/1.5 Archivo; color:var(--text-dim); }
.fb-contacts-t { display:block; font:700 12px/1 Archivo; letter-spacing:.5px; text-transform:uppercase; color:var(--accent-strong); margin-bottom:8px; }
.fb-contacts a { color:var(--accent-strong); font-weight:700; }

/* тост */
.toast { position:fixed; z-index:120; left:50%; bottom:26px; transform:translateX(-50%) translateY(10px); opacity:0; transition:.2s;
  background:var(--text); color:var(--bg); font:600 13.5px/1 Archivo; padding:13px 20px; border-radius:999px; box-shadow:0 16px 40px -14px rgba(0,0,0,.5); pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ================= заставка загрузки ================= */
#splash { position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .5s ease; }
#splash.gone { opacity:0; pointer-events:none; }
.splash-inner { display:flex; flex-direction:column; align-items:center; }
.splash-logo { font:900 66px/.9 Archivo; letter-spacing:-3px; color:var(--text); opacity:0; animation:splashLogo .6s ease .15s forwards; }
.splash-wave { width:230px; height:28px; margin-top:12px; }
.splash-wave path { stroke-dasharray:2000; stroke-dashoffset:2000; animation:splashDraw 1.25s cubic-bezier(.6,.1,.3,1) forwards, splashPulse 1.6s ease-in-out .4s infinite; }
@keyframes splashDraw { to { stroke-dashoffset:0; } }
@keyframes splashLogo { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes splashPulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }

/* ================= аккаунт (шапка статистики) ================= */
.stats-h { margin-top:4px; }
.acc-head { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:22px; }
.acc-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.acc-id { display:flex; align-items:center; gap:12px; }
.acc-avatar { width:46px; height:46px; border-radius:999px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font:800 20px/1 Archivo; flex:none; }
.acc-meta { display:flex; flex-direction:column; gap:4px; }
.acc-meta b { font:800 18px/1 Archivo; }
.acc-meta span { font:500 13px/1 'JetBrains Mono'; color:var(--text-faint); }
.acc-actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.acc-btn { border:1px solid var(--line); background:var(--surface-2); color:var(--text); font:700 12.5px/1 Archivo; padding:10px 14px; border-radius:10px; }
.acc-btn:hover { border-color:var(--accent); }
.acc-btn.warn { color:var(--wrong); }
.acc-btn.warn:hover { border-color:var(--wrong); }
.acc-wl-row { display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); margin-top:16px; padding-top:14px; flex-wrap:wrap; }
.acc-wl-lbl { font:600 12px/1 Archivo; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; }
.acc-wl { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.acc-wl button { border:1px solid var(--line); background:var(--surface-2); border-radius:9px; padding:7px 12px; font:600 13px/1 Archivo; color:var(--text-dim); }
.acc-wl button.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); }
.acc-wl button.lang-new { border-style:dashed; color:var(--text-faint); background:transparent; }
.acc-wl button.lang-new:hover { border-color:var(--accent); color:var(--accent-strong); }
.acc-wl .lang-inp { border:1px solid var(--accent); background:var(--card); border-radius:9px; padding:7px 12px; font:600 13px/1 Archivo; color:var(--text); width:11ch; min-width:11ch; }
.acc-wl .lang-inp:focus { outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.acc-wl .lang-sq { width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim); }
.acc-wl .lang-sq.warn { color:var(--wrong); }
.acc-wl .lang-sq:hover { border-color:var(--accent); }
.acc-wl .lang-sq.warn:hover { border-color:var(--wrong); }
.acc-wl .lang-sq:disabled { opacity:.4; cursor:default; }
.acc-wl .lang-sq:disabled:hover { border-color:var(--line); }

/* ================= регистрация / вход ================= */
.auth-wrap { max-width:440px; margin:0 auto; padding:30px 24px 60px; }
.auth-card { background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 60px -30px var(--shadow); padding:32px 30px; margin-top:8px; }
.auth-logo { text-align:center; margin-bottom:18px; }
.auth-logo .mark { display:inline-flex; align-items:center; gap:8px; }
.auth-logo .mark b { font:900 26px/1 Archivo; letter-spacing:-1px; }
#auth-title { font:800 26px/1.1 Archivo; letter-spacing:-.4px; margin:0 0 6px; text-align:center; }
.auth-sub { font:500 14px/1.45 Archivo; color:var(--text-dim); margin:0 0 22px; text-align:center; }
.auth-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.auth-field span { font:600 11px/1 Archivo; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); }
.auth-field input { appearance:none; border:1.5px solid var(--line); border-radius:11px; padding:13px 15px; font:500 15px/1 'JetBrains Mono'; color:var(--text); background:var(--surface); outline:none; }
.auth-field input:focus { border-color:var(--accent); }
.auth-err { font:600 12.5px/1.4 Archivo; color:var(--wrong); background:var(--wrong-soft); border-radius:10px; padding:10px 12px; margin-bottom:14px; }
.auth-submit { width:100%; border:none; border-radius:12px; background:var(--accent); color:#fff; font:700 15px/1 Archivo; padding:15px; box-shadow:0 10px 24px -12px var(--shadow); }
.auth-submit:hover { background:var(--accent-strong); }
.auth-switch { text-align:center; font:500 13.5px/1 Archivo; color:var(--text-dim); margin-top:18px; }
.auth-switch button { border:none; background:transparent; color:var(--accent-strong); font:700 13.5px/1 Archivo; }

/* ================= 404 ================= */
.nf-inner { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:30px; }
.nf-code { font:900 120px/.9 Archivo; letter-spacing:-6px; color:var(--text); }
.nf-wave { width:260px; height:52px; animation:kyw-float 5s ease-in-out infinite; }
.nf-title { font:800 28px/1.1 Archivo; margin-top:8px; }
.nf-txt { font:500 16px/1.5 Archivo; color:var(--text-dim); max-width:420px; }
.nf-inner .btn-solid { margin-top:10px; }