/* Метричні запасні шрифти: поки Manrope/Unbounded вантажаться з Google Fonts, текст іде системним Arial,
   підігнаним під їхню ширину й висоту рядка — після підміни шрифту верстка не «стрибає» (CLS).
   Значення пораховано з самих шрифтів (fontTools: Manrope wght 500, Unbounded wght 800, укр.+лат. текст). */
@font-face{font-family:'Manrope Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica');size-adjust:102.28%;ascent-override:104.23%;descent-override:29.33%;line-gap-override:0%;}
@font-face{font-family:'Unbounded Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');font-weight:100 900;size-adjust:142.33%;ascent-override:69.91%;descent-override:17.21%;line-gap-override:0%;}
/* LT Plate — цифри номерних знаків (гліфи: tools/plate_glyphs/*.svg, збірка: tools/make_plate_font.py).
   Лише 0-9, «-» і N; решта символів (N тощо) падає на наступний шрифт у стеку. */
@font-face{font-family:'LT Plate';src:url('/lt-plate.woff2') format('woff2');font-weight:100 900;font-display:swap;}
/* ══════ Дизайн-токени (єдина шкала) ══════
   Радіуси: 4/8/12/16/20 + пілюля. Відступи: 4/6/8/10/12/14/16/20/24/32 (знімаємо значення лише
   з відхиленням ≤1px — далі лишаємо як є). Рукотворні «чорнильні» радіуси (.ink, зі «/») не чіпаємо. */
:root{
  --r-xs:4px; --r-sm:6px; --r-md:6px; --r-lg:6px; --r-xl:8px; --r-pill:999px;   /* 2026-10-07: як на лендингу (6px) */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:12px; --sp-6:14px; --sp-7:16px; --sp-8:20px; --sp-9:24px; --sp-10:32px;
  --dur-fast:.12s; --dur-base:.2s; --dur-slow:.32s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --on-accent-2:#000000;   /* текст на помаранчевій заливці: чорний = 6.8:1 (білий давав лише 3.1:1) */
  /* Кольори рівнів N5-N1: --lvN — для ТЕКСТУ/рамки (у темній темі світліші, ≥6:1), --lvN-fill — суцільна заливка під білий текст */
  --lv5:#2563EB; --lv5-fill:#2563EB;
  --lv4:#B45309; --lv4-fill:#B45309;
  --lv3:#7C3AED; --lv3-fill:#7C3AED;
  --lv2:#047857; --lv2-fill:#047857;
  --lv1:#B91C1C; --lv1-fill:#B91C1C;
  --btn-shadow:3px 3px 0 var(--ink-shadow);        /* спокій: жорстка брутальна тінь */
  --btn-shadow-press:1px 1px 0 var(--ink-shadow);   /* натиснута: тінь МЕНШАЄ, але не зникає (м'яко) */
  --btn-press:translate(2px,2px);                    /* зсув кнопки при натисканні */
  --dur-enter:.28s; --dur-exit:.18s; --ease-in:cubic-bezier(.4,0,1,1); --lift:-2px;
  --ic-gap:.4em;   /* відступ іконка↔текст: масштабується зі шрифтом (12px→4.8, 14px→5.6, 18px→7.2) */
}
/* ══════════════════════════════════════════════════════════════════
   Little Tsu — Neo-Brutalism design tokens (у стилі Gumroad).
   Жодного розмиття/прозорості: жорсткі контури, різкий контраст,
   зсув тіні при натисканні кнопок. Світла/темна теми — нижче.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* --- офіційні токени необруталізму (як вимагалось у ТЗ) --- */
  --bg:#F4F4F0; --bg-rgb:244,244,240; --surface:#FFFFFF; --text:#000000; --border-color:#000000;
  --accent-1:#000000; --accent-2:#FFDE25; --on-accent-1:#FFFFFF;
  --brutal-shadow:3px 3px 0px #000000;
  --ink-shadow:#000000;
  --brutal-border:2px solid var(--border-color);
  /* --- ремап старих імен змінних (щоб уся наявна розмітка й JS-шаблони,
     які досі використовують var(--card)/var(--ink)/var(--crimson) тощо,
     автоматично отримали необрутал-вигляд без переписування логіки) --- */
  --card:var(--surface); --ink:var(--text); --navy:#000000; --navy2:#1A1A1A;
  /* --crimson НЕ псевдонім --accent-2 у світлій темі: #FF5C00 дає лише 2.8:1 на фоні
     як звичайний текст/бордер (провал WCAG AA, потрібно 4.5:1) — тут затемнений відтінок
     того самого відтінку, що проходить AA (#B03E00: 5.4:1 на фоні, 5.9:1 на картці, 4.9:1 на --paper). Заливки
     (кнопки, де текст поверх кольору) і далі використовують яскравий --accent-2 напряму. */
  --crimson:#B03E00; --gold:var(--accent-1);
  --muted:#555555; --border:var(--border-color); --paper:#EAEAE3;
  /* --ok у світлій темі — навмисно темніший відтінок зеленого (не "класичний" #16A34A):
     той давав лише 3.3:1 на білому — провал WCAG AA (потрібно 4.5) як звичайний текст,
     а var(--ok) саме так і використовується (позначки "Правильно!", лічильники) в
     кількох місцях застосунку. #047857 — 5.48:1 на білому, як і задум. */
  --ok:#047857; --err:#DC2626;
  /* --- сайдбар: у СВІТЛІЙ темі білий з чорним текстом (не завжди чорний) --- */
  --sb-bg:#FFFFFF; --sb-text:#000000; --sb-muted:#6B6B6B; --sb-hover:rgba(0,0,0,.06); --sb-border:#000000;
}
[data-theme="dark"]{
  --bg:#000000; --bg-rgb:0,0,0; --surface:#1A1A1A; --text:#FFFFFF; --border-color:#333333;
  --accent-1:#FFFFFF; --accent-2:#FFDE25; --on-accent-1:#000000;
  --brutal-shadow:3px 3px 0px #FFFFFF;
  --ink-shadow:#FFFFFF;
  --brutal-border:2px solid var(--border-color);
  --card:var(--surface); --ink:var(--text); --navy:#000000; --navy2:#1A1A1A;
  --crimson:var(--accent-2); --gold:var(--accent-1);
  --muted:#AAAAAA; --border:var(--border-color); --paper:#111111;
  --ok:#4ADE80; --err:#F87171;
  /* --- сайдбар: у ТЕМНІЙ темі чорний із світлим текстом --- */
  --sb-bg:#000000; --sb-text:#FFFFFF; --sb-muted:#9CA3AF; --sb-hover:rgba(255,255,255,.08); --sb-border:#333333;
}
[data-theme="dark"] body{background:var(--bg);}
[data-theme="dark"] .kn-legend{background:var(--paper);}
[data-theme="dark"] .kn-rowlabel{background:var(--paper);}
[data-theme="dark"] img,[data-theme="dark"] .kn-jp{filter:none;}
/* Кнопка "нагору" — у темній темі суцільно чорна кнопка на чорному фоні сторінки
   майже губиться; інвертуємо в білу заливку з чорною стрілкою й обводкою, щоб вона
   лишалась помітною плаваючою кнопкою, а не зливалась з фоном (фідбек користувача). */
/* !important — переб'ює inline background:var(--navy);color:#fff у самому #scrollTopBtn
   (index.html), бо inline-стиль інакше вигравав би над будь-яким CSS-селектором тут. */
[data-theme="dark"] #scrollTopBtn{background:#FFFFFF !important;color:#000000 !important;border-color:#000000 !important;}
/* Лого: чорна обводка на світлій темі, біла — на темній (обидва PNG із прозорим тлом). */
.logo-dark{display:none;}
[data-theme="dark"] .logo-light{display:none;}
[data-theme="dark"] .logo-dark{display:inline-block;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;line-height:1.5;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;}
/* явний інтервал: з 'normal' висоту рядка роздували метрики Noto Sans Myanmar у стеку шрифтів */
h1,h2,h3,h4{line-height:1.25;}
:lang(my) body,body:lang(my){line-height:1.75;}
h1,h2,h3,h4,.home-icon,#sb .logo,.ni>div>div:first-child{font-weight:900;}
h1,h2,h3{font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;letter-spacing:-.01em;}
.jp{font-family:'Manrope','Manrope Fallback','Klee One','Noto Sans Myanmar',serif;}
/* Іконки: SVG всередині .icn завжди на 100% батьківського розміру-обгортки,
   колір бере з currentColor (тобто з color: елемента-власника) — окремих
   світлих/темних версій не потрібно, тема підхоплюється сама.
   display/vertical-align/margin — раніше inline-стилем у самій icon(), і БЕЗ
   жодного відступу від тексту: ~230 з 245 викликів icon()+текст ставали впритул
   (0px), решта — з випадковим одним пробілом чи ручним flex-gap. Зверху ще й
   vertical-align:middle сідав на 2px нижче за текстову лінію. Переніс в один
   спільний клас — тепер відступ і вирівнювання однакові скрізь одразу (перевірено
   попіксельно: gap 0→6px, вертикальний зсув 2px→1px). Де відступ вже задавався
   вручну (flex+gap чи пробіл) — прибрано поруч, щоб не подвоївся. */
/* vertical-align: центр іконки = центр рядка тексту (≈.383em над базовою лінією для наших шрифтів).
   Формула залежить від висоти іконки (--s, задає icon()), тож малі замки (10-11px) і великі іконки
   (18px) центруються однаково, а не «сидять» на 2px нижче. */
.icn{display:inline-flex;flex-shrink:0;vertical-align:calc(var(--ic-center,.383em) - var(--s,1em)/2);margin-right:var(--ic-gap);}
/* Іконка ПІСЛЯ тексту (замок у чіпі «N4🔒»): відступ з боку тексту, а не з протилежного. */
.icn.icn-end{margin-right:0;margin-left:var(--ic-gap);}
/* Іконка сама по собі (без тексту поруч): жодного відступу, щоб вона стояла рівно по центру. */
.icn.icn-solo{margin-right:0;}
.icn svg{width:100%;height:100%;display:block;}
/* Необруталізм: перебиваємо ІНЛАЙНОВІ font-family (Poppins/Noto Serif JP), що досі трапляються
   у старих JS-шаблонах — !important свідомо, це чисто косметичний CSS-фікс, JS не чіпали. */
button,input,select,textarea,.ni,.ni .sub,.kbig,.ej,.rp{font-family:'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif !important;}
.jp,.kn-jp,.ffk,.sk,.fk,.ek,.ck,.dk,.hk,.hd-k{font-family:'Manrope','Manrope Fallback','Klee One','Noto Sans Myanmar',serif !important;}
/* Необрутал-картки/контейнери: жорсткий бордер + різка тінь, майже прямі кути.
   .dl-std/.dl-kansai (Сленг і діалекти) навмисно ВИКЛЮЧЕНІ звідси — це не самостійні
   картки, а прості flex-комірки ВСЕРЕДИНІ одного спільного .dl-row (в якого вже є
   власний бордер), тож раніше кожне слово отримувало ще й СВОЮ товсту рамку+тінь —
   рамка в рамці, "коробки в коробці" (фідбек користувача 30.08). */
.crd,.vi,.kc,.gc,.st,.home-card,.sign-card,.food-card,.etym-card,.confuse-half,
.stroke-card,.holiday-card,#sb,.modal,#addWordOverlay>div,
#kanjiTraceOverlay>div{
  border:var(--brutal-border) !important;
  box-shadow:var(--brutal-shadow) !important;
  border-radius:var(--r-xs) !important;
  background:var(--surface);
}
/* Кнопки: товстий бордер + тінь; при натисканні — тінь зникає, кнопка "фізично" зсувається */
button{
  border:var(--brutal-border) !important;
  box-shadow:var(--brutal-shadow) !important;
  border-radius:var(--r-xs) !important;
  background:var(--surface);
  color:var(--text);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  cursor:pointer;
}
button:active{
  box-shadow:0 0 0 transparent !important;
  transform:translate(3px,3px);
}
/* Лого — клікабельне (веде на головну), але статичне: без "натискання" CTA-кнопок. */
.logo-btn:active{transform:none !important;}
/* Кнопка "нагору" й іконкові кнопки топ-бару (гамбургер-меню, пошук) — той самий
   Gumroad-стиль "плоских" допоміжних кнопок без тіні, що й .flat-btn (див. коментар
   нижче): у мобільному топ-барі поруч уже стоять кнопки "Увійти"/"Реєстрація" без
   тіні, тож ці дві з тінню виглядали неуніфіковано (фідбек користувача). */
#scrollTopBtn,.icn-btn{box-shadow:none !important;}
/* ── Обгортка кнопок (.ink) ──
   JS (wrapInkShadows() у renderAll()) обгортає кожну <button> у <span class="ink"> і додає кнопці
   клас ink-wrapped. Чорнильну тінь-«пляму» (::before, форми b1/b2/b3/cflat) прибрано остаточно
   (2026-09-22): її вимкнули ще раніше, а тінь кнопок тепер --btn-shadow. Обгортка лишилась, бо
   її margin і ink-block/ink-flex формують розкладку рядів кнопок. */
/* margin-right/bottom тут — не косметика: сама тінь малюється як OVERFLOW за межами
   layout-розміру обгортки (transform не впливає на те, скільки місця обгортка "займає"
   у flex/grid-рядку). Без цього margin вона накладається на сусідню кнопку в будь-якому
   ряду, де gap контейнера менший за 5px зсуву тіні (а таких рядів у застосунку багато —
   від 3px до 8px). Цей margin ГАРАНТУЄ мінімальний відступ незалежно від gap контейнера. */
.ink{position:relative;display:inline-block;isolation:isolate;width:fit-content;margin:0 6px 6px 0;}
.ink.ink-block{display:block;width:100%;margin-right:0;}
.ink.ink-flex{flex:1;width:auto;margin-right:0;}
.ink-block>.cat-card{height:100%;}
/* Напівпрозора (заблокована/disabled) кнопка інакше пропускає крізь себе
   повністю непрозору тінь позаду — плутанина кольорів. Замість цього гасимо
   всю обгортку разом (:has() — живе правило, спрацьовує і при динамічному
   .disabled=true без повного renderAll()), а саму кнопку лишаємо непрозорою,
   щоб не подвоювати ефект прозорості. */
.ink:has(button:disabled){opacity:.65;}
.ink:has(button:disabled) button{opacity:1;}
button.ink-wrapped{box-shadow:none !important;transition:none;position:relative;}
button.ink-wrapped:active{box-shadow:none !important;transform:none !important;}
/* Кнопки-перемикачі сайдбару (без підказок / тема) —
   звичайний CSS :hover замість inline JS onmouseover/onmouseout (надійніше,
   немає конфлікту специфічності з inline-кольором тексту). */
.sb-toggle{width:100%;padding:var(--sp-3);background:var(--sb-hover);border:1px solid var(--sb-border);
  border-radius:var(--r-sm);color:var(--sb-text);font-size:12px;font-weight:900;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  -webkit-appearance:none;appearance:none;}
@media (hover:hover){.sb-toggle:hover{background:var(--sb-text);color:var(--sb-bg);}}
/* Кнопка "Скинути прогрес" — деструктивна дія, тому ховер має бути неможливо не помітити:
   суцільна червона заливка + білий жирний текст (замість ледь відчутної зміни прозорості). */
.reset-btn{width:100%;padding:var(--sp-2);background:rgba(239,68,68,.1);border:1.5px solid #B91C1C!important;
  border-radius:var(--r-sm);color:#B91C1C;font-size:12px;font-weight:900;cursor:pointer;
  letter-spacing:.04em;transition:background var(--dur-fast),color var(--dur-fast);box-shadow:none!important;}
@media (hover:hover){.reset-btn:hover{background:#B91C1C;color:#fff;}}
[data-theme="dark"] .reset-btn{color:#F87171;border-color:#F87171!important;}
/* Плоскі кнопки без тіні — Gumroad-стиль: тінь лишаємо для головних дій (CTA),
   другорядні/допоміжні кнопки в тісних місцях (топ-бар, картки) — без неї. */
.flat-btn{box-shadow:none!important;transition:background-color var(--dur-base),opacity var(--dur-base);font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;font-weight:700;letter-spacing:-.01em;}
.flat-btn:active{transform:none!important;}
/* ── Режим фокусу (Focus Mode) — окремий модуль, той самий брутал-стиль ── */
.focus-mc-btn{width:100%;padding:var(--sp-5);background:var(--surface);color:var(--text);
  font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;font-weight:700;font-size:14px;cursor:pointer;
  border:var(--brutal-border);border-radius:var(--r-xs);box-shadow:var(--brutal-shadow);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);}
.focus-mc-btn:active:not(:disabled){box-shadow:0 0 0 transparent;transform:translate(3px,3px);}
.focus-mc-btn:disabled{cursor:default;opacity:.75;}
.focus-mc-btn.focus-ok{background:#16A34A;color:#fff;border-color:#16A34A;}
.focus-mc-btn.focus-wrong{background:#DC2626;color:#fff;border-color:#DC2626;}
.focus-text-input{width:100%;padding:var(--sp-5) var(--sp-6);border:var(--brutal-border);border-radius:var(--r-xs);
  font-family:'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;font-size:15px;background:var(--surface);color:var(--text);
  box-sizing:border-box;}
.focus-text-input:focus{outline:none;box-shadow:var(--brutal-shadow);}
.focus-text-input.focus-ok{border-color:#16A34A;}
.focus-text-input.focus-wrong{border-color:#DC2626;}
.focus-progress-track{width:100%;height:8px;border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--border);overflow:hidden;}
.focus-progress-fill{height:100%;background:var(--accent-1);border-radius:var(--r-pill);transition:width var(--dur-slow) var(--ease);}
.focus-size-btn{padding:var(--sp-3) var(--sp-6);border-radius:var(--r-pill);background:var(--surface);color:var(--text);
  font-weight:800;font-size:13px;cursor:pointer;border:1.5px solid var(--border);transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast),opacity var(--dur-fast);}
.focus-size-btn.active{background:var(--accent-1);color:var(--on-accent-1);border-color:#000;}
.focus-preview-card{text-align:left;background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r-sm);padding:var(--sp-5) var(--sp-6);margin-top:10px;font-size:13px;line-height:1.55;}
.focus-preview-card b{color:var(--crimson);}
.focus-explain{text-align:left;background:var(--surface);border-left:3px solid #DC2626;
  border-radius:var(--r-xs);padding:var(--sp-3) var(--sp-5);margin-top:10px;font-size:13px;line-height:1.5;font-weight:500;}
/* ── Курс (Learning Path) — вертикальна карта уроків ── */
.path-node{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5) var(--sp-6);margin-bottom:9px;
  border-radius:var(--r-sm);background:var(--surface);border:var(--brutal-border);
  box-shadow:var(--brutal-shadow);cursor:pointer;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);}
.path-node:active{box-shadow:0 0 0 transparent;transform:translate(3px,3px);}
.path-node.locked{cursor:default;box-shadow:none;border-style:dashed;}
/* заблокований урок: назву треба могти прочитати — приглушений колір замість opacity:.45 (було 2.1–3.4:1) */
.path-node.locked .path-title{color:var(--muted);}
.path-node.done{border-color:#16A34A;}
.path-node .path-num{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:14px;flex-shrink:0;background:var(--accent-1);color:var(--on-accent-1);}
.path-node .path-num .icn{margin-right:0;}
.path-node.done .path-num{background:#16A34A;color:#fff;}
.path-node.locked .path-num{background:var(--border);color:var(--muted);}
.path-node .path-info{flex:1;min-width:0;}
.path-node .path-title{font-weight:800;font-size:14px;}
.path-node .path-meta{font-size:12px;color:var(--muted);margin-top:2px;}
/* Сітка категорій / фільтри-пігулки: круглі, контрастні з квадратними картками.
   .ni (пункти сайдбару) свідомо ВИКЛЮЧЕНО — сайдбар має лишатися хардкорно-квадратним. */
.chip,.tag,.pill,button[style*="border-radius:var(--r-pill)"],button[style*="border-radius: var(--r-pill)"]{
  border-radius:var(--r-pill) !important;
}
/* sidebar */
#sb{position:fixed;left:0;top:0;width:268px;height:100vh;height:100dvh;background:var(--sb-bg);
  display:flex;flex-direction:column;overflow-y:auto;z-index:200;
  /* Було transition:transform ...,background var(--dur-base) — анімована background-color на елементі,
     що вже й так анімує transform (GPU-композитний шар для drawer-слайду), провокувала
     баг: після кількох швидких перемикань теми фон сайдбару "застрягав" на старому
     значенні (видно було лише на :hover, бо той forced repaint) — composited-шар не
     перемальовувався сам при зміні лише custom property. Фон тепер міняється миттєво,
     анімується тільки transform (для самого виїзду/заїзду панелі). */
  transition:transform var(--dur-slow) cubic-bezier(.4,0,.2,1);border-right:2px solid var(--sb-border);}
#sb::-webkit-scrollbar{width:3px;}
#sb::-webkit-scrollbar-thumb{background:var(--sb-hover);border-radius:var(--r-xs);}
#main{margin-left:268px;min-height:100vh;min-height:100dvh;padding:1.8rem 2.2rem;}
/* На дуже широких екранах (2560px+) вміст без обмеження ширини або розтягується
   на весь #main (грід карток стає рядком велетенських плиток), або, для сторінок
   із власним вузьким max-width (головна/дашборд), просто губиться серед порожнечі,
   якщо той внутрішній max-width сам не по центру. .mbar навмисно НЕ чіпаємо —
   мобільний топ-бар має лишатись на всю ширину. */
#ph,#tfr,#ca{max-width:1400px;width:100%;margin-left:auto;margin-right:auto;}
/* nav — необрутал: пігулки замість скруглених прямокутників, різкий контраст активного стану */
.ni{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);margin:2px 9px;
  border-radius:var(--r-xs);cursor:pointer;font-weight:700;font-size:13px;color:var(--sb-muted);
  transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast),opacity var(--dur-fast);user-select:none;
  background:none;font-family:inherit;text-align:left;appearance:none;-webkit-appearance:none;
  /* Тепер це <button>, а не <div> — глобальне button{border/box-shadow !important}
     (необрутал-стиль CTA-кнопок) інакше перебʼє пункт нав і зробить його схожим
     на велику кнопку замість рядка списку, тож border/box-shadow тут теж !important. */
  border:2px solid transparent !important;box-shadow:none !important;}
@media (hover:hover){.ni:hover{background:var(--sb-hover);color:var(--sb-text);border-color:var(--sb-border) !important;}}
.ni.on{background:var(--accent-1);color:var(--on-accent-1);border-color:#000 !important;font-weight:900;}
.ni .ic{flex-shrink:0;display:inline-flex;align-items:center;}
.ni .ic .icn{margin-right:0;}
.icn-btn .icn,.spk-btn .icn{margin-right:0;}
#scrollTopBtn .icn{margin-right:0;}
/* (Раніше тут було button .icn:last-child{margin-right:0} — ловило й іконку ПЕРЕД текстом у кнопці,
   бо текстові вузли не враховуються в :last-child, тож іконка й текст злипались (gap 0). Кінцеві іконки
   тепер позначаються явно класом .icn-end.) */
/* Кнопки закриття модалок (×) — той самий "непарний" відступ .icn{margin-right:6px},
   що й у scrollTopBtn вище: іконка сама по собі, без тексту поруч, тож відступ під
   текст лише зсуває її ліворуч від центру кнопки. Атрибутний селектор ловить усі
   close-кнопки одразу (auth/paywall/username/add-word модалки), без дублювання
   правила під кожен id окремо. */
.ic[data-icon="close"] .icn{margin-right:0;}
/* Ті самі гліфи, що й на картках головної (あ/漢) — колонка іконок в сайдбарі
   вирівняна з SVG-іконками (теж 18x18), тому фіксована ширина + центрування. */
.ni .ic.jp-glyph{width:18px;height:18px;justify-content:center;font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;font-size:17px;line-height:1;color:inherit;}
.ni .sub{font-family:'Manrope','Manrope Fallback','Klee One','Noto Sans Myanmar',serif;font-size:12px;color:var(--sb-muted);display:block;margin-top:1px;}
/* опис пункту: суцільний колір замість opacity:.65 (давало 2.6:1); на активному (інверсному) пункті — колір самого пункту */
.ni.on .sub{color:inherit;}
@media (hover:hover){.ni:hover .sub{color:var(--sb-muted);}}
/* tabs */
.tbar{display:flex;gap:3px;background:var(--paper);padding:3px;border-radius:var(--r-md);}
.tb{padding:var(--sp-2) var(--sp-7);border-radius:var(--r-md);font-weight:800;font-size:13px;cursor:pointer;
  border:none;background:transparent;color:var(--muted);transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base),opacity var(--dur-base);white-space:nowrap;}
.tb.on{background:var(--card);color:var(--navy);box-shadow:0 1px 6px rgba(0,0,0,.1);}
@media (hover:hover){.tb:hover:not(.on){color:var(--ink);background:rgba(255,255,255,.5);}}
/* chips */
.fc{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--sp-1) var(--sp-5);border-radius:var(--r-pill);font-weight:900;font-size:12px;cursor:pointer;
  border:2px solid;transition:background var(--dur-base),color var(--dur-base),border-color var(--dur-base);
  letter-spacing:.04em;
  /* Kill native button chrome so our background actually shows */
  -webkit-appearance:none;appearance:none;
  background-color:transparent;background-image:none;
}
/* ВСІ */
.fa     {border-color:var(--navy);color:var(--navy);}
.fa.on  {border-color:var(--navy) !important;background-color:var(--navy) !important;color:#fff !important;}
.fa.off {border-color:#111827     !important;background-color:transparent  !important;color:#111827 !important;}
/* N5 — синій */
.fn     {border-color:#2563EB;color:#2563EB;}
.fn.on  {border-color:#2563EB !important;background-color:#2563EB !important;color:#fff !important;}
/* N4 — бурштиновий */
.fr     {border-color:#D97706;color:#D97706;}
.fr.on  {border-color:#D97706 !important;background-color:#D97706 !important;color:#fff !important;}
/* N3 — фіолетовий */
.fv     {border-color:#7C3AED;color:#7C3AED;}
.fv.on  {border-color:#7C3AED !important;background-color:#7C3AED !important;color:#fff !important;}
/* badge — контурний стиль (бордер+текст currentColor, прозоре тло), як у пігулок
   фільтра "РІВЕНЬ:" (setFilter-кнопки нижче) — раніше суцільна пастельна заливка
   виглядала застарілою поруч із новішими контурними пігулками деінде в застосунку
   (фідбек користувача 30.08: "старий вигляд... треба замінити новішими"). Кольори —
   ті самі, що й у фільтрів, для точної візуальної відповідності. */
.bdg{display:inline-block;padding:2px var(--sp-2);border-radius:var(--r-pill);font-weight:700;font-size:12px;letter-spacing:.03em;border:1.5px solid currentColor;background:transparent;font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;}
.bn5{color:var(--lv5);}
.bn4{color:var(--lv4);}
/* pbar */
.pb{height:8px;border-radius:var(--r-pill);background:var(--paper);overflow:hidden;}
.pf{height:100%;border-radius:var(--r-pill);background:var(--accent-1);transition:width var(--dur-slow) cubic-bezier(.4,0,.2,1);}
/* cards */
/* .crd:hover (лайт-ефект тіні) навмисно прибраний: перевірено — жоден з 63 випадків
   використання .crd в усьому застосунку не має власного onclick (це завжди просто
   інформаційна панель, кнопки всередині — окремі елементи), тож ефект "реагує на
   курсор" скрізь був хибним натяком на клікабельність там, де клікати нема на що. */
.crd{background:var(--card);border-radius:var(--r-lg);padding:1.3rem;border:1px solid var(--border);box-shadow:0 2px 10px rgba(20,20,50,.05);}
/* flashcard */
.fwrap{perspective:1200px;}
.fi{position:relative;width:100%;max-width:440px;height:260px;transform-style:preserve-3d;
  transition:transform var(--dur-slow) cubic-bezier(.4,0,.2,1);cursor:pointer;margin:0 auto;}
.fi.flp{transform:rotateY(180deg);}
.ff{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.8rem;text-align:center;}
.ffront{background:var(--card);box-shadow:0 8px 28px rgba(0,0,0,.12);border:2px solid var(--border);}
.fback{background:var(--navy2);color:#fff;transform:rotateY(180deg);box-shadow:0 8px 28px rgba(0,0,0,.22);}
/* sentence builder */
.sc{display:inline-flex;align-items:center;padding:var(--sp-1) var(--sp-5);border-radius:var(--r-md);
  font-weight:700;font-size:14px;cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast),opacity var(--dur-fast);user-select:none;font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;}
.sav{background:var(--paper);border:2px solid var(--border);color:var(--ink);}
@media (hover:hover){.sav:hover{background:var(--border);color:#fff;transform:translateY(var(--lift));}}
.spl{background:var(--navy);color:#fff;border:2px solid transparent;}
@media (hover:hover){.spl:hover{background:var(--navy2);}}
.sdrop{min-height:50px;border:2px dashed var(--border);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);
  display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center;transition:border-color var(--dur-base);}
.sdrop.sok{border-color:var(--ok);background:#F0FDF4;}
.sdrop.serr{border-color:var(--err);background:#FEF2F2;}
/* quiz */
.qo{display:block;width:100%;padding:var(--sp-5) var(--sp-7);border-radius:var(--r-md);border:2px solid var(--border);
  cursor:pointer;font-weight:700;font-size:14px;text-align:left;background:var(--card);color:var(--ink);
  transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast),opacity var(--dur-fast);font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;letter-spacing:-.01em;}
@media (hover:hover){.qo:hover:not(:disabled){border-color:var(--navy);background:var(--paper);}}
.qo.qok{border-color:var(--ok)!important;background:#D1FAE5!important;color:#065F46!important;}
.qo.qno{border-color:var(--err)!important;background:#FEE2E2!important;color:#991B1B!important;}
.qo:disabled{cursor:default;}
/* vocab item */
.vi{display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-5);background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base),opacity var(--dur-base);}
.vi.vl{opacity:.42;}
.kc.vl{opacity:.42;}
/* Чип читання канджі (ОН/КУН): залитий ярлик + контурна пілюля читання */
.rd-chip{display:inline-flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:999px;overflow:clip;font-size:12px;line-height:1.3;background:var(--card);max-width:100%;} /* метрики = .bdg (N5): 12px, 2px, lh 1.3 */
.rd-chip-l{display:inline-flex;align-items:center;padding:2px 6px 2px 8px;background:var(--ink);color:var(--card);font-weight:700;letter-spacing:.03em;font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;}
.rd-chip-v{display:inline-flex;align-items:center;gap:2px;padding:2px 8px 2px 6px;color:var(--ink);font-weight:600;min-width:0;}
.rd-chip-v .spk-btn{margin:0 0 0 2px;padding:0 2px!important;min-height:0!important;height:1.3em;align-self:center;}   /* у межах висоти чіпа: раніше кнопка вилазила на 2–6px і обрізалась overflow:hidden */
.rd-chip.rd-empty{border-color:var(--border);}
.rd-chip.rd-empty .rd-chip-l{background:transparent;color:var(--muted);}
.rd-chip.rd-empty .rd-chip-v{color:var(--muted);}
.rd-chip.rd-inv{border-color:rgba(255,255,255,.7);background:transparent;}
.rd-chip.rd-inv .rd-chip-l{background:#fff;color:#000;}
.rd-chip.rd-inv .rd-chip-v{color:#fff;}
.crd.vl{opacity:.55;}
/* kanji card */
.kc{background:var(--card);border-radius:var(--r-lg);padding:1.3rem;border:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.05);transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base),opacity var(--dur-base);}

.kbig{font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;font-size:3.2rem;line-height:1;color:var(--ink);}
/* rule/example */
.rr{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);background:var(--paper);border-radius:var(--r-sm);}
.rp{font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;font-weight:600;font-size:14px;color:var(--crimson);white-space:nowrap;}
.rm{font-size:13px;color:var(--muted);padding-top:1px;}
.er{padding:var(--sp-3) var(--sp-5);border-radius:var(--r-sm);background:var(--card);border:1px solid var(--border);}
.ej{font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;font-size:15.5px;}
.er2{font-size:12px;color:var(--muted);margin-top:2px;}
.eu{font-size:13px;color:var(--ink);margin-top:3px;font-weight:700;}
.tx-more{margin-bottom:1.1rem;}
.tx-more>summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:12px;font-weight:900;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;padding:4px 0;}
.tx-more>summary::-webkit-details-marker,.tx-src>summary::-webkit-details-marker{display:none;}
.tx-more[open]>summary svg{transform:rotate(180deg);}
.tx-src{margin-top:4px;font-size:12px;color:var(--muted);}
.tx-src>summary{display:inline-block;cursor:pointer;list-style:none;font-size:12px;color:var(--muted);text-decoration:underline dotted;}
.tx-src>div{margin-top:3px;line-height:1.5;}
.tx-src a{color:inherit;}
/* stat */
.st{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-6);}
.sn{font-size:1.35rem;font-weight:900;line-height:1;}
.sl{font-size:12px;font-weight:900;color:var(--muted);letter-spacing:.08em;margin-bottom:2px;}
/* search */
.srch{width:100%;padding:var(--sp-3) var(--sp-6) var(--sp-3) 36px;border-radius:var(--r-sm);border:1.5px solid var(--border);
  font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;font-size:13px;font-weight:700;color:var(--ink);outline:none;background:var(--card);}
.srch:focus{border-color:var(--navy);}
.swrap{position:relative;}
.swrap::before{content:'';position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;background-color:var(--muted);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-5.3-5.3'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-5.3-5.3'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
/* ── Глобальний пошук ── */
.gs-sec{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:900;color:var(--muted);letter-spacing:.08em;margin:14px 2px 4px;}
.gs-chips+.gs-sec,.gs-sec:first-child{margin-top:4px;}
.gs-item{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-3);border-radius:var(--r-sm);cursor:pointer;transition:background var(--dur-fast);}
@media (hover:hover){.gs-item:hover{background:var(--paper);}}
.gs-item.gs-on{background:var(--paper);box-shadow:inset 3px 0 0 var(--crimson);}
.gs-lead{min-width:64px;text-align:center;flex-shrink:0;}
.gs-ic{display:inline-flex;color:var(--muted);}
.gs-body{flex:1;min-width:0;}
.gs-main{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gs-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gs-rd{font-size:12px;color:var(--muted);font-weight:400;margin-right:6px;}
.gs-tag{flex-shrink:0;}
.gs-src{display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-size:12px;font-weight:800;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:1px 8px;}
.gs-snip{display:flex;align-items:center;gap:4px;min-width:0;font-size:12px;color:var(--muted);margin:-4px 0 4px calc(64px + var(--sp-4) + var(--sp-3));}
.gs-snip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:480px){.gs-lead{min-width:48px;}.gs-snip{margin-left:calc(48px + var(--sp-4) + var(--sp-3));}.gs-src{max-width:84px;}}
.gs-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 1px 6px;}
.gs-chips::-webkit-scrollbar{display:none;}
.gs-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:4px 11px;border-radius:999px;border:1.5px solid var(--border);background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;}
.gs-chip.on{background:var(--ink);border-color:var(--ink);color:var(--card);}
.gs-chip:disabled{opacity:.4;cursor:default;}
.gs-lvs{padding:7px 4px 8px;gap:8px;} /* зверху — місце для кружка замка .lvl-lock (top:-5px), бо overflow-x обрізає й вертикаль */
.gs-n{font-size:12px;font-weight:800;opacity:.7;margin-left:2px;letter-spacing:0;}
.gs-empty{padding:1.2rem 6px;color:var(--muted);font-size:13px;font-weight:700;text-align:center;line-height:1.5;}
.gs-try{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-top:.8rem;}
.gs-more{display:block;width:100%;text-align:left;background:none;border:none;font:inherit;font-size:12px;color:var(--crimson);font-weight:800;padding:6px var(--sp-3) var(--sp-2);cursor:pointer;}
.gs-prem{display:flex;align-items:center;gap:8px;width:100%;margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);border:1.5px dashed var(--border);background:var(--paper);color:var(--text);font:inherit;font-size:12px;font-weight:700;text-align:left;line-height:1.45;cursor:pointer;}
@keyframes gsFlash{0%{background:rgba(255,92,0,.3);}100%{background:transparent;}}
.gs-flash{animation:gsFlash 1.6s ease-out;}
/* buttons */
.bn{padding:var(--sp-3) var(--sp-7);border-radius:var(--r-md);background:var(--navy);color:#fff;font-weight:700;font-size:13px;border:none;cursor:pointer;transition:background var(--dur-base);font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;letter-spacing:-.01em;}
@media (hover:hover){.bn:hover{background:var(--navy2);}}
.br{padding:var(--sp-3) var(--sp-7);border-radius:var(--r-md);background:var(--accent-2);color:var(--on-accent-2);font-weight:700;font-size:13px;border:none;cursor:pointer;transition:background var(--dur-base);font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;letter-spacing:-.01em;
  /* Тонка чорна обводка тексту для читабельності на помаранчевому/синьому фоні —
     text-shadow у 4 напрямки замість -webkit-text-stroke, бо останній не підтримується
     Firefox і потовщує гарнітуру, тоді як цей трюк працює всюди й лишається тонким. */
  text-shadow:-.5px -.5px 0 #000,.5px -.5px 0 #000,-.5px .5px 0 #000,.5px .5px 0 #000;}
@media (hover:hover){.br:hover{background:#3B4CD1;}}
.bg{padding:var(--sp-2) var(--sp-6);border-radius:var(--r-md);background:transparent;color:var(--ink);border:2px solid var(--ink);font-weight:700;font-size:13px;cursor:pointer;transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base),opacity var(--dur-base);font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;letter-spacing:-.01em;}
@media (hover:hover){.bg:hover{background:var(--ink);color:var(--card);}}
/* Використовується wrapInkShadows() (renderAll()) замість inline background-color —
   inline завжди виграє в БУДЬ-якого правила з таблиці стилів, тому :hover, який мав
   змінювати фон разом із кольором тексту, програвав силою (лишався застряглий світлий
   фон + світлий текст від :hover = невидима кнопка). Звичайний клас така специфічність,
   що будь-яке "клас:hover"-правило (вища специфічність) далі коректно його перекриває. */
.force-surface-bg{background-color:var(--surface);}
.bgrn{padding:var(--sp-3) var(--sp-7);border-radius:var(--r-md);background:#047857;color:#fff;font-weight:700;font-size:13px;border:none;cursor:pointer;transition:background var(--dur-base);font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;letter-spacing:-.01em;}
@media (hover:hover){.bgrn:hover{background:#065F46;}}  /* #047857: білий текст 5.5:1 (було #059669 — 3.8:1) */
/* anims */
@keyframes su{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.si{animation:su var(--dur-enter) var(--ease) both;}
/* Переходи між розділами (View Transitions API, вмикається в setM()) — швидкий
   crossfade замість дефолтного браузерного (там і так crossfade, але довший і
   "стандартний"; тут — трохи швидше й без зайвого fade у самого <html>, щоб не
   блимав фон між темами). */
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:ease-out;}
/* Тактильний hover/press — той самий "фізичний" відгук, що й у кнопок із чорнильною
   тінню, тим самим кольором (--ink-shadow), лише без форми-плями: картки й так
   прямокутні, зайва плямистість тут виглядала б шумно.
   .crd навмисно ПРИБРАНО з цього правила (лишився тільки .home-card): жоден з 63
   випадків .crd у застосунку не має власного onclick — це завжди інформаційна
   панель, а не кнопка (кнопки всередині — окремі елементи), тож "тактильний" ефект
   там був хибним натяком на клікабельність там, де клікати нема на що (напр. картки
   в "Прогресі" реагували на курсор/тап, хоча самі по собі нічого не роблять). */
@media(hover:hover){
  .home-card{transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);}
  .home-card:hover{transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 var(--ink-shadow)!important;}
}
.home-card:active{transform:translate(1px,1px)!important;box-shadow:2px 2px 0 var(--ink-shadow)!important;}
/* Вогник streak — легке "тління", а не статична іконка (лише коли стрік реально є). */
@keyframes flameFlicker{0%,100%{transform:scale(1) rotate(0deg);}50%{transform:scale(1.08) rotate(-2deg);}}
.streak-flame{display:inline-flex;animation:flameFlicker 1.8s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){
  .si{animation:none;}
  .streak-flame{animation:none;}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
}
/* scrollbar */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:var(--r-xs);}
/* mobile */
@media(max-width:800px){
  #sb{transform:translateX(-100%);}
  /* закритий сайдбар за лівим краєм: його «brutal» тінь 4px 4px інакше виглядала смужкою біля краю екрана */
  #sb:not(.open){box-shadow:none!important;}
  #sb.open{transform:translateX(0);box-shadow:0 0 50px rgba(0,0,0,.4);}
  #main{margin-left:0;padding:4.4rem 1rem 2rem;}
  /* fixed, не sticky: #main/body тут навмисно overflow:hidden auto (нижче, проти
     горизонтального бліду), а це робить їх "скрол-контейнерами" за специфікацією —
     sticky тоді рахує застрягання відносно НИХ, а не справжнього скролу сторінки,
     і просто їде разом з контентом. position:fixed such ancestors не хвилюють. */
  .mbar{display:flex!important;position:fixed;top:0;left:0;right:0;z-index:120;background:var(--bg);padding:.7rem 1rem;margin-bottom:0;
    transition:background-color var(--dur-base) var(--ease),backdrop-filter var(--dur-base) var(--ease);}
  /* Напівпрозорий "скляний" топбар, щойно почали скролити — на самому верху (scrollY=0)
     лишається суцільним, щоб не було помітно контенту "під" ним ще до прокрутки. */
  .mbar.mbar-scrolled{background:rgba(var(--bg-rgb),.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  .vi{grid-template-columns:88px 1fr;}
  /* кнопка «Знаю» — у колонці з текстом під тегами, а не окремим рядком праворуч (зайва порожнеча) */
  .vi{row-gap:6px;}
  .vibtn{grid-column:2;display:flex;justify-content:flex-start;gap:6px;margin-top:0;}
  .vibtn .ink{margin-bottom:3px;}
  .vibtn button:is(.bgrn,.bg){min-height:34px!important;padding:5px 12px!important;}
}
/* iOS: prevent input focus zoom (inputs <16px trigger auto-zoom on iPhone) */
@media(max-width:800px){
  /* email/password теж — інакше в одній формі поля різного розміру (Нік 16px проти Email 12px) */
  .srch, input[type="text"], input[type="email"], input[type="password"], input[type="search"]{font-size:16px!important;}
  /* форми входу/ніку: текст у полі менший за підпис (14px) — від iOS-автозуму тут захищає
     maximum-scale=1, який app.js додає лише на iOS */
  #authOverlay input, #usernameOverlay input{font-size:12px!important;}
}
/* larger touch targets across the board on touch-capable / narrow viewports */
@media(max-width:800px){
  .sc{padding:var(--sp-3) var(--sp-6);font-size:15px;min-height:40px;}
  .qo{padding:var(--sp-6) var(--sp-7);min-height:44px;}
  .fc{padding:var(--sp-3) var(--sp-6);font-size:12px;min-height:36px;}
  .tb{padding:var(--sp-4) var(--sp-7);min-height:40px;}
  .bn,.br,.bg,.bgrn{padding:var(--sp-4) 18px;min-height:44px;}
  .ni{padding:var(--sp-4) var(--sp-5);min-height:44px;}
  #main{overflow-x:hidden;}
  body{overflow-x:hidden;}
}
/* small phones (iPhone SE and similar narrow screens) */
@media(max-width:420px){
  #sb{width:82vw;max-width:300px;}
  #sb.open{transform:translateX(0);}
  #main{padding:4.2rem .85rem 2rem;}
  .fi{height:210px;max-width:100%;}
  .ff{padding:1.1rem;}
  .kbig{font-size:2.5rem;}
  .kc{padding:1rem;}
  .st{padding:var(--sp-2) var(--sp-4);flex:1 1 auto;}
  .sn{font-size:1.1rem;}
  h1{font-size:1.3rem!important;}
  .crd{padding:1rem;}
  .er{padding:var(--sp-3) var(--sp-4);}
  .ej{font-size:14px;}
  .rr{padding:var(--sp-2) var(--sp-4);}
  .rp{font-size:13px;white-space:normal;}
  .vi{grid-template-columns:88px 1fr;padding:var(--sp-3) var(--sp-4);gap:var(--sp-3);}
  /* 2-знакове слово + кнопка озвучення вміщаються в один рядок (було 48px — «医/者» ламалось посимвольно) */
  .vi>div:first-child>.jp:first-child{font-size:1.45rem!important;}
  .tbar{flex-wrap:wrap;}
}
.mbar{display:none;align-items:center;gap:var(--sp-4);margin-bottom:1rem;}
.nsec{padding:var(--sp-5) var(--sp-8);font-size:12px;font-weight:900;color:var(--sb-muted);letter-spacing:.14em;margin-top:3px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);cursor:pointer;user-select:none;
  width:100%;background:none;text-align:left;appearance:none;-webkit-appearance:none;
  border:none !important;box-shadow:none !important;
  /* .nsec — теж <button>, тож глобальне button{font-family:'Manrope' !important} (рядок ~83)
     інакше перебʼє шрифт заголовків і тут — той самий Unbounded, що й на h1-h3. */
  font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif !important;}
@media (hover:hover){.nsec:hover{color:var(--sb-text);}}
/* Нерозгортний варіант лейблу секції (напр. «ФУНДАМЕНТ») — та сама типографіка,
   що й .nsec, але без cursor:pointer/hover: це просто заголовок групи, а не кнопка,
   бо чотири пункти під ним завжди видимі, розгортати нічого. */
.nsec-static{padding:var(--sp-5) var(--sp-8);font-size:12px;font-weight:900;color:var(--sb-muted);letter-spacing:.14em;margin-top:3px;user-select:none;font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;}
.nsec-arrow .icn{margin-right:0;}
.nsec-arrow{display:inline-flex;transition:transform var(--dur-base);font-size:12px;transform:rotate(-90deg);}
.nsec.open .nsec-arrow{transform:rotate(0deg);}
.nsec-body{display:none;flex-direction:column;}
.nsec-body.open{display:flex;}

/* N3 badge */
.bn3{color:var(--lv3);}
.bn2{color:var(--lv2);}
.bn1{color:var(--lv1);}

/* kana (АБЕТКА) tables */
.kn-section{margin-bottom:2rem;}
.kn-h2{font-size:1.05rem;font-weight:900;margin-bottom:.8rem;color:var(--ink);
  border-bottom:2px solid var(--border);padding-bottom:.4rem;display:flex;align-items:center;gap:var(--sp-3);}
.kn-row{display:flex;align-items:stretch;gap:var(--sp-3);margin-bottom:8px;}
.kn-rowlabel{width:36px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;
  font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;font-size:1.1rem;font-weight:700;color:var(--muted);
  background:#F1EAE0;border-radius:var(--r-sm);}
/* Кожен рядок кани = рівно 5 колонок (а і у е о): до 84px на широких екранах, на вузьких — стискаються порівну (раніше
   фіксовані 84/68px переносились 4+1, і «о» лишалась сиротою). .kn-empty — невидимі заглушки, що тримають колонки. */
.kn-rowcells{display:grid;grid-template-columns:repeat(5,minmax(0,84px));gap:var(--sp-3);flex:1;justify-content:start;}
.kn-cell{position:relative;width:auto;min-width:0;background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-1) var(--sp-2);text-align:center;
  cursor:pointer;transition:border-color var(--dur-base),transform var(--dur-base),opacity var(--dur-base);}
@media (hover:hover){.kn-cell:hover{border-color:var(--crimson);transform:translateY(var(--lift));}}
.kn-cell.kn-learned{opacity:.4;border-color:var(--ok,#16A34A);}
/* Круглий чекбокс "вивчено" — свідомо ВИКЛЮЧАЄМО з глобального необрутал-стилю button{}
   (жорсткий бордер+тінь там доречні для великих кнопок, але роблять крихітний 18px-гурток
   громіздким). Скидаємо форс-стилі через ту саму специфічність !important. */
.kn-check{position:absolute!important;top:3px!important;right:3px!important;
  width:18px!important;height:18px!important;border-radius:50%!important;
  border:1.5px solid var(--border)!important;box-shadow:none!important;
  background:var(--paper);color:transparent;font-size:12px;
  font-weight:900;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0!important;transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base),opacity var(--dur-base);}
.kn-check .icn{margin-right:0;}
.kn-spk{position:absolute;top:3px;left:3px;line-height:0;}
@media (hover:hover){.kn-check:hover{border-color:var(--crimson)!important;}}
.kn-check:active{transform:none!important;} /* без "фізичного зсуву" великих кнопок на крихітному гуртку */
.kn-learned .kn-check{background:var(--ok,#16A34A);border-color:var(--ok,#16A34A)!important;color:#fff;}
.kn-empty{visibility:hidden;width:auto;}
.kn-jp{font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;font-size:1.5rem;font-weight:700;line-height:1.15;color:var(--ink);}
.kn-jp .kn-k{display:block;font-size:1.05rem;color:var(--muted);margin-top:1px;font-weight:600;}
.kn-r{font-size:12px;color:var(--muted);margin-top:4px;font-weight:700;letter-spacing:.02em;}
.kn-u{font-size:13px;font-weight:900;color:var(--crimson);margin-top:1px;}
.kn-legend{display:flex;gap:var(--sp-6);flex-wrap:wrap;align-items:center;font-size:12px;
  color:var(--muted);font-weight:700;margin-bottom:1.4rem;padding:var(--sp-3) var(--sp-5);
  background:#F1EAE0;border-radius:var(--r-sm);}
.kn-legend b{color:var(--ink);}
/* Прозора інлайн-іконка "🔊 прослухати" — свідомо ВИКЛЮЧАЄМО з глобального button{},
   інакше крихітна іконка серед тексту отримує важкий бордер+тінь (той самий баг, що й kn-check). */
.spk-btn{background:none!important;border:none!important;box-shadow:none!important;
  cursor:pointer;font-size:1rem;padding:2px var(--sp-1);
  border-radius:var(--r-xs)!important;line-height:1;vertical-align:middle;transition:background var(--dur-base),transform var(--dur-fast);}
@media (hover:hover){.spk-btn:hover{background:var(--border);}}
.spk-btn:active{transform:scale(.9);}
.spk-btn.playing{animation:spkPulse .5s ease infinite;}
@keyframes spkPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.25);}}
#rdgBtn.on{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--on-accent-1)!important;}

/* ── Глобальний перемикач "без підказок" (приховує читання/транслітерацію) ── */
body.hide-rdg .rdg,body.hide-rdg .er2{
  filter:blur(5px);opacity:.35;transition:filter var(--dur-base),opacity var(--dur-base);cursor:pointer;
}
body.hide-rdg .rdg:active,body.hide-rdg .er2:active{
  filter:none;opacity:1;
}@media (hover:hover){body.hide-rdg .rdg:hover,body.hide-rdg .er2:hover{
  filter:none;opacity:1;
}}
body:not(.hide-rdg) .rdg,body:not(.hide-rdg) .er2{transition:filter var(--dur-base),opacity var(--dur-base);}

/* ── Оцінка складності картки (Важко/Добре/Легко) ── */
.grbtn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:var(--sp-4) var(--sp-2);line-height:1.15;border-radius:var(--r-sm);border:none;cursor:pointer;
  font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;font-weight:900;font-size:13px;color:#fff;
  transition:transform var(--dur-fast),box-shadow var(--dur-base);}
.grbtn:active{transform:scale(.94);}
.grbtn small{display:block;font-weight:700;font-size:12px;opacity:.85;margin-top:1px;}
/* 4 оцінки (2026-10-11): «Не пам'ятаю» — червона (провал), «Важко» — бурштинова (успіх із зусиллям) */
.gr-again{background:#DC2626;}
.gr-hard{background:#B45309;}
.gr-good{background:#2563EB;}
.gr-easy{background:#16A34A;}

/* ── Мікро-взаємодії: правильна/неправильна відповідь ── */
@keyframes shakeErr{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}
  40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(3px);}}
@keyframes popOk{0%{transform:scale(1);}35%{transform:scale(1.06);}100%{transform:scale(1);}}
.qz-ok{animation:popOk .35s ease;}
.qz-err{animation:shakeErr .4s ease;}

/* ── Складальник речень: перетягування ── */
.sc{transition:transform var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-base);}
.sc:active{transform:scale(.93);}
.sdrop.sok{animation:popOk .35s ease;}
.sdrop.serr{animation:shakeErr .4s ease;}

/* ── Візуальна інтерпретація японського номерного знаку — тепер на реальній
   фотореалістичній підложці (plate-blank.svg: біла металева табличка з болтами)
   замість плоского CSS-прямокутника. Кольори інших типів (зелений/жовтий/чорний)
   отримані ФІЛЬТРОМ з ЦІЄЇ Ж картинки (sepia→hue-rotate→saturate), а не окремими
   файлами — підложка майже нейтрально-сіра, тож sepia спершу вводить відтінок,
   hue-rotate зсуває його в потрібний бік, saturate підсилює. Значення підібрані й
   звірені попіксельно (canvas.getImageData). Сам filter — на ::before (окремий шар
   під текстом), а НЕ на .jp-plate напряму: інакше filter затягнув би за собою й
   колір тексту поверх нього, спотворюючи його так само, як і фон. */
.jp-plate{
  /* 330×165мм — реальні пропорції японського номерного знаку (рівно 2:1). Раніше тут
     було 1024/514 (пікселі фото-підложки, що вже ніде не використовується для фону —
     лишилась тільки для шару гвинтиків нижче), тепер орієнтуємось на справжній розмір. */
  position:relative;aspect-ratio:330/165;width:100%;max-width:170px;margin:0 auto;
  border-radius:9%/16%;
  box-shadow:0 3px 8px rgba(0,0,0,.22);
  font-family:'Manrope','Manrope Fallback','Noto Sans JP',sans-serif;color:#0F7A33;text-align:center;
  display:flex;flex-direction:column;justify-content:center;
  /* Відступи 5%/3% (top/bottom, не рівні) — навмисно, з 03.09: нижній рядок (.serial)
     тепер займає більшість висоти картки (див. коментар при .serial нижче), тож
     верхній/нижній padding лише під region-рядок і за фактом рівний в них немає сенсу —
     головне, щоб розрив region→serial (margin-top на .serial) дорівнював розриву
     serial→низ картки (тут і задає padding-bottom); звірено попіксельно 03.09.
     Бокові поля мінімальні (1%, було 3%/8%) — на справжніх знаках текст займає майже
     всю ширину, а не третину з порожнім тлом навколо, і звужені ще сильніше 03.09, щоб
     великий serial-рядок фізично влазив в один рядок навіть на найширших цифрах
     (88-88) без переносу на два рядки. */
  padding:5% 1% 3% 1%;
  /* container-type — щоб текст всередині (region/serial, нижче) можна було задавати в
     cqw (% від ширини ЦІЄЇ картки), а не в rem. Це критично: rem фіксований незалежно
     від розміру картки, а картка використовується від 100px (Кольори знаків) до 170px+
     (повний список) — при фіксованому rem великий текст або вилазить за фіксовані 2:1
     пропорції на вузьких картках (aspect-ratio тоді "програє" content-based мінімуму й
     картка стає вищою/квадратнішою), або на широких лишає забагато порожнього місця.
     cqw масштабує текст РАЗОМ із карткою, тож 2:1 тримається точно на будь-якому розмірі
     (перевірено 29.08: 112px, 127px, 160px — усюди рівно aspect-ratio 2.000). */
  container-type:inline-size;
}
.jp-plate::before{content:'';position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background-image:linear-gradient(165deg,rgba(255,255,255,.55),rgba(255,255,255,0) 45%),
    linear-gradient(#fdfdfb,#fdfdfb);
  background-size:100% 100%,100% 100%;background-repeat:no-repeat;z-index:0;}
/* Гвинтики — окремий, НЕфільтрований шар поверх кольорового фону: та сама картинка
   вдруге, без filter, замаскована до двох кружечків рівно там, де в plate-blank.svg
   насправді намальовані гвинтики. Інакше кольоровий filter перефарбовував би й метал
   гвинтиків у зелений/жовтий/чорний. Маска — через mask-image(radial-gradient), а не
   clip-path:url(#svgClipPath): останній із clipPathUnits="objectBoundingBox" на HTML-
   елементі в цьому Chromium просто НЕ обрізає (перевірено 29.08 — весь шар лишався
   видимим і перекривав кольоровий фільтр повністю), тоді як mask-image рендериться коректно. */
.jp-plate::after{content:'';position:absolute;inset:0;
  background-image:url('plate-blank.svg');background-size:100% 100%;background-repeat:no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 3.8% 3.8% at 18.2% 14%,#000 0 90%,transparent 100%),
    radial-gradient(ellipse 3.8% 3.8% at 81.8% 14%,#000 0 90%,transparent 100%);
  -webkit-mask-repeat:no-repeat;
  mask-image:radial-gradient(ellipse 3.8% 3.8% at 18.2% 14%,#000 0 90%,transparent 100%),
    radial-gradient(ellipse 3.8% 3.8% at 81.8% 14%,#000 0 90%,transparent 100%);
  mask-repeat:no-repeat;z-index:1;}
.jp-plate>*{position:relative;z-index:2;}
/* plate-blank.svg не однорідно-сірий — має сильний вбудований градієнт яскравості
   (світлий майже-білий верх, темніший низ). І filter:hue-rotate()/saturate(), і
   background-blend-mode:color лише НАКЛАДАЮТЬ відтінок на цю яскравість — тож
   вбудований градієнт просвічував як різкий двоколірний "бандинг" (перевірено 29.08,
   скріншот користувача). Тому жоден варіант кольору більше не походить від пікселів
   зображення взагалі (навіть базовий "білий" тип вище): суцільний колір (лінійний
   градієнт із двох однакових стопів) + окремий, повністю контрольований легкий
   глянець (білий згори, що згасає до 45%). Саме зображення (plate-blank.svg) лишається
   тільки для шару гвинтиків (::after нижче) — це єдине, що з нього досі використовується. */
.jp-plate.green::before{
  background-image:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%),
    linear-gradient(#0B6E2E,#0B6E2E);
  background-size:100% 100%,100% 100%;
}
.jp-plate.yellow::before{
  background-image:linear-gradient(165deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%),
    linear-gradient(#F5C400,#F5C400);
  background-size:100% 100%,100% 100%;
}
.jp-plate.black::before{
  background-image:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,0) 45%),
    linear-gradient(#141414,#141414);
  background-size:100% 100%,100% 100%;
}
.jp-plate.green{color:#fff;}
.jp-plate.yellow{color:#1a1a1a;}
.jp-plate.black{color:#FBBF24;}
.jp-plate .region{font-size:10.2cqw;font-weight:700;line-height:1;display:flex;
  align-items:center;justify-content:center;gap:var(--sp-1);}
/* На реальних знаках назва регіону й класифікаційний номер — ОДНАКОВОГО розміру
   (верхній рядок), кана в серійному номері (нижній рядок) — теж такого ж розміру, як
   верхній рядок, а от цифри серійного номера — головні й найбільші на всій табличці
   (звірено з фото реального знаку 29.08). Але "однаковий розмір" — це про ВІЗУАЛЬНУ
   висоту символів, не про font-size: різні шрифти (кандзі — Noto Sans JP, цифри — Big
   Shoulders Display з 03.09) мають різне співвідношення висоти гліфа до em-квадрата,
   тож при простому множенні font-size усе вийде на око менше/більше, ніж треба.
   Коефіцієнти нижче (1.45 / .95 / 3.57) — вже компенсовані значення, підібрані саме під
   ВІЗУАЛЬНИЙ розмір і перевірені Range.getBoundingClientRect() (не на око): кандзі й
   .cls зараз рівно однакової висоти (різниця <1%), .region вирівняний по
   align-items:center (не baseline — той давав видиме зміщення між шрифтами, 03.09). */
/* Big Shoulders Display — лише для цифр (немає японських гліфів узагалі, кандзі/кана
   лишаються на Noto Sans JP). Обрано замість Noto Sans JP саме для "1": у Big Shoulders
   вона — майже гола вертикальна риска без "прапорця", тож у контексті решти цифр
   читається як "I", а не плутається з "1" типової гротескної цифри (звірено 03.09
   з фото реальних знаків — там "1" так само схожа на "I"). Ліцензія SIL OFL —
   безкоштовно для будь-якого використання, включно з комерційним. */
/* LT Plate (з 29.09): висота цифр .757em проти .94em у кандзі Noto → 1.24em = однакова висота з «品川». */
.jp-plate .region .cls{font-size:1.24em;font-weight:400;font-family:'LT Plate','Big Shoulders Display',sans-serif;}
/* margin-top:3cqw тут МАЄ дорівнювати padding-bottom на .jp-plate вище (обидва зараз
   дають ~4.7-4.8px на 160px-широкій картці) — так серійний рядок отримує однаковий
   відступ і від region-рядка зверху, і від низу картки, як просив користувач 03.09.
   flex-wrap:nowrap+white-space:nowrap — критично: без цього "88-88" (найширші можливі
   цифри) переносяться на 2 рядки при великому .num, і висота картки вибухає вдвічі
   замість плавного росту (перевірено 03.09). font-size .num підібраний як
   МАКСИМАЛЬНИЙ безпечний розмір саме під цей найширший випадок (не під "19-91" з
   прикладу) — тому 75% висоти картки (як хотілося спочатку) фізично недосяжні без
   переносу; фінальний компроміс — ~50-55% після додаткового зменшення на 15% (03.09,
   за проханням користувача — цифри виглядали затяжкими). */
/* Пропорції з LT Plate (29.09) — за фото справжнього знаку: цифри ≈53% висоти таблички,
   ~73% ширини; кана — як кандзі верхнього рядка, трохи нижче центру цифр, з повітрям до них.
   letter-spacing:-.05em — комірки LT Plate трохи ширші, ніж на реальному знаку (лендинг
   налаштований під шрифт як є, тому стискаємо лише тут). */
.jp-plate .serial{display:flex;align-items:center;justify-content:center;gap:3cqw;margin-top:2cqw;
  font-size:10.2cqw;line-height:1;flex-wrap:nowrap;white-space:nowrap;}
.jp-plate .serial .kana{font-size:1.2em;font-weight:700;position:relative;top:.3em;}
.jp-plate .serial .num{font-size:3.55em;font-weight:400;letter-spacing:-.05em;font-family:'LT Plate','Big Shoulders Display',sans-serif;white-space:nowrap;}
/* "3D"/тиснений ефект символів: світлий відблиск зверху-зліва (наче фаска ловить світло) +
   два темні шари знизу-справа (різка тінь близько + м'якша глибша) — імітує рельєфні
   витиснуті/фарбовані символи зі справжніх номерних знаків, а не пласкі намальовані.
   Зменшено на 20% (03.09) — з Big Shoulders Display тінь виглядала занадто важкою. */
.jp-plate .region,.jp-plate .serial{
  text-shadow:-.24px -.24px 0 rgba(255,255,255,.65),.48px .56px .24px rgba(0,0,0,.5),.88px 1.12px .48px rgba(0,0,0,.22);}
.jp-plate.green .region,.jp-plate.green .serial{
  text-shadow:-.32px -.32px 0 rgba(255,255,255,.25),.64px .8px .48px rgba(0,0,0,.55),1.28px 1.6px .96px rgba(0,0,0,.3);}
.jp-plate.yellow .region,.jp-plate.yellow .serial{
  text-shadow:-.32px -.32px 0 rgba(255,255,255,.5),.64px .8px .48px rgba(0,0,0,.4),1.28px 1.6px .96px rgba(0,0,0,.18);}
.jp-plate.black .region,.jp-plate.black .serial{
  text-shadow:-.32px -.32px 0 rgba(255,255,255,.15),.64px .8px .48px rgba(0,0,0,.7),1.28px 1.6px .96px rgba(0,0,0,.4);}
.plate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--sp-4);}
.plate-wrap{text-align:center;}
.plate-wrap .plate-r{font-size:12px;color:var(--muted);margin-top:4px;}
details.plate-group{margin-bottom:8px;border-radius:var(--r-sm);border:1.5px solid var(--border);overflow:hidden;}
details.plate-group summary{cursor:pointer;padding:var(--sp-4) var(--sp-6);font-weight:800;font-size:13px;
  background:var(--paper);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);}
details.plate-group summary::-webkit-details-marker{display:none;}
details.plate-group summary::after{content:'▾';color:var(--muted);transition:transform var(--dur-base);}
details.plate-group[open] summary::after{transform:rotate(180deg);}
details.plate-group .plate-grid{padding:var(--sp-5);}

/* ── Вивіски та повсякденні написи (店の看板) — власний CSS-дизайн ──
   Раніше кожен тон (green/red/blue/gold/gray) заливав усю картку суцільним "своїм"
   кольором — 5 не пов'язаних між собою насичених відтінків, які ніде більше в
   застосунку не використовуються, тому поруч виглядали хаотично/випадково (фідбек
   користувача 29.08). Уніфіковано під загальний брутал-стиль карток (біла/темна
   поверхня, чорний бордер, як .crd/.kc/.gc й інші — успадковується від спільного
   правила вище) — колір тону лишився лише як акцент на бейджі перекладу (.su),
   через ВЖЕ наявні в застосунку токени (--ok/--err/--crimson), а не нові вигадані
   кольори. Це й повертає узгодженість, і зберігає змістове кодування (зелений —
   відчинено, червоний — заборона/зачинено, помаранчевий — акції, як і скрізь у app). */
/* Редизайн 2026-10-13: картка — «стіна» з реалістичною табличкою (мова сторінок помилок, .es-*),
   під нею читання й переклад. Кольори табличок — фізичні (не міняються з темою), як і на 404/500. */
.sign-card{padding:var(--sp-6) var(--sp-4) var(--sp-5);text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;}
.ss-stage{width:100%;height:132px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-5);container-type:inline-size;}
.sign-card .sr{font-size:12px;color:var(--muted);font-weight:600;font-style:italic;}
.sign-card .su{font-size:13px;font-weight:800;margin-top:4px;line-height:1.4;color:var(--ink);text-wrap:balance;}
.ss .es-k{white-space:nowrap;}
/* відчинено/зачинено — дерев'яна підвісна 札 (горизонтальна), погойдується */
.ss-fuda{width:min(190px,80cqw);height:118px;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:es-sway 6s ease-in-out infinite;}
.ss-fuda .es-cord{height:34px;}
.ss-fuda .es-board{margin-top:32px;border-radius:6px;}
.ss-fuda .es-k{font-family:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;font-size:min(calc(min(190px,80cqw) / (var(--n) + 1.6)),2.1rem);letter-spacing:.12em;margin-left:.12em;color:#B42A1E;}
.ss-fuda.open .es-k{color:#24150a;}
.sign-card:nth-child(2n) .ss-fuda{animation-delay:-2.5s;}
/* заборони — біла металева табличка, болти, червоний напис, знак 🚫, жовто-чорна смуга */
.ss-kinshi{width:min(210px,86cqw);display:flex;flex-direction:column;align-items:center;padding:26px 12px 0;background:#fff;color:#D93A2B;
  border:2px solid #1a1a1a;border-radius:6px;overflow:hidden;box-shadow:0 6px 16px -8px rgba(0,0,0,.35);}
.ss-kinshi .es-k{margin:0 0 16px;font-size:min(calc(min(210px,86cqw) / (var(--n) + 1.4)),2.3rem);letter-spacing:.04em;}
.ss-kinshi .es-band{margin:0 -12px;height:16px;}
.ss-kinshi .es-bolt{top:8px;}
.ss-ban{position:absolute;top:5px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;box-sizing:border-box;border:2.5px solid #D93A2B;
  background:linear-gradient(45deg,transparent calc(50% - 1.3px),#D93A2B calc(50% - 1.3px),#D93A2B calc(50% + 1.3px),transparent calc(50% + 1.3px));}
/* вказівники — темна вказівна табличка (вокзал/ТЦ) на болтах */
.ss-guide{width:min(210px,86cqw);padding:24px 26px;background:#1f2329;color:#fff;border-radius:6px;
  box-shadow:inset 0 0 0 3px #1f2329,inset 0 0 0 4.5px rgba(255,255,255,.55),0 6px 16px -8px rgba(0,0,0,.4);}
.ss-guide .es-k{font-size:min(calc(min(210px,86cqw) / (var(--n) + 2.4)),2rem);font-weight:700;letter-spacing:.1em;}
.ss-guide .es-bolt{top:50%;margin-top:-4.5px;}
.ss-guide .es-bolt.l{left:9px}.ss-guide .es-bolt.r{right:9px}
/* акції — паперове POP-оголошення на скотчі, трохи навскіс */
.ss-pop{width:min(190px,80cqw);padding:30px 10px;background:#FFF3B0;color:#D93A2B;border-radius:2px;transform:rotate(-2deg);
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 6px 16px -6px rgba(0,0,0,.3);}
.ss-pop .es-k{font-size:min(calc(min(190px,80cqw) / (var(--n) + 1.2)),2.4rem);letter-spacing:.02em;}
.ss-pop .es-tape{width:54px;height:18px;top:-8px;}
/* на вулиці — жовтий дорожній щит у чорній рамці */
.ss-road{width:min(200px,82cqw);padding:22px 12px;background:#F5C400;color:#1a1a1a;border-radius:8px;
  box-shadow:inset 0 0 0 3px #F5C400,inset 0 0 0 6px #1a1a1a,0 6px 16px -8px rgba(0,0,0,.4);}
.ss-road .es-k{font-size:min(calc(min(200px,82cqw) / (var(--n) + 1.6)),2.1rem);letter-spacing:.06em;}
@media (prefers-reduced-motion:reduce){.ss-fuda{animation:none;}}
/* ── дорожні знаки (道路標識) ── */
.rs{--d:min(108px,46cqw);color:#fff;}
.rs-disc{position:relative;width:var(--d);height:var(--d);border-radius:50%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(0,0,0,.18),0 6px 14px -6px rgba(0,0,0,.4);}
.rs-red{background:#D93A2B;}
.rs-bar{width:72%;height:16%;background:#fff;border-radius:2px;}
.rs-ring{background:#fff;border:calc(var(--d)*.11) solid #D93A2B;color:#1D5BBF;}
.rs-txt{font-size:calc(var(--d)*.2);letter-spacing:.02em;}
.rs-digits{width:66%;height:auto;}
.rs-x.red{inset:0;background:
  linear-gradient(45deg,transparent calc(50% - 3px),#D93A2B calc(50% - 3px),#D93A2B calc(50% + 3px),transparent calc(50% + 3px)),
  linear-gradient(-45deg,transparent calc(50% - 3px),#D93A2B calc(50% - 3px),#D93A2B calc(50% + 3px),transparent calc(50% + 3px));}
.rs-ring .rs-txt{position:absolute;bottom:9%;left:0;right:0;text-align:center;font-size:calc(var(--d)*.105);z-index:1;}
.rs-pic.sm{width:46%;}.rs-pic.up{width:24%;}
.rs-num{font-size:calc(var(--d)*.42);font-family:'Unbounded','Unbounded Fallback',sans-serif;letter-spacing:-.04em;}
.rs-blue{background:#1D5BBF;}
.rs-ringed{border:calc(var(--d)*.11) solid #D93A2B;}
.rs-x{position:absolute;inset:0;border-radius:50%;background:
  linear-gradient(45deg,transparent calc(50% - 5px),#D93A2B calc(50% - 5px),#D93A2B calc(50% + 5px),transparent calc(50% + 5px)),
  linear-gradient(-45deg,transparent calc(50% - 5px),#D93A2B calc(50% - 5px),#D93A2B calc(50% + 5px),transparent calc(50% + 5px));}
.rs-pic{width:64%;display:flex;}.rs-pic svg{width:100%;height:auto;}
.rs-2l{font-size:calc(var(--d)*.17);line-height:1.25;text-align:center;}
.rs-slash::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(45deg,transparent calc(50% - 4px),#D93A2B calc(50% - 4px),#D93A2B calc(50% + 4px),transparent calc(50% + 4px));}
.rs-stack{display:flex;flex-direction:column;align-items:center;gap:8px;--d:min(84px,40cqw);}
.rs-sub{background:#fff;color:#1a1a1a;border:2px solid #1a1a1a;padding:3px 10px;font-size:14px;letter-spacing:.04em;border-radius:2px;}
.rs-stop{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 4px 6px rgba(0,0,0,.3));}
.rs-stop{--w:min(132px,56cqw);}
.rs-stop .rs-tri{width:var(--w);aspect-ratio:1/.88;display:flex;flex-direction:column;align-items:center;padding-top:13%;box-sizing:border-box;
  background:#D93A2B;clip-path:polygon(0 0,100% 0,50% 100%);}
.rs-stop b{font-size:calc(var(--w)*.19);letter-spacing:.02em;}
.rs-stop small{font:800 10px/1.5 'Manrope',sans-serif;letter-spacing:.1em;}
.rs-slash .rs-pic{width:74%;}
.rs-oneway{display:flex;align-items:center;justify-content:center;width:min(150px,64cqw);aspect-ratio:2.1/1;padding:0 9%;box-sizing:border-box;background:#1D5BBF;border-radius:6px;
  box-shadow:inset 0 0 0 3px #1D5BBF,inset 0 0 0 5.5px #fff,0 6px 16px -8px rgba(0,0,0,.4);}
.rs-oneway svg{width:100%;}
.rs-green{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 24px 12px;background:#0E7A4E;border-radius:6px;
  box-shadow:inset 0 0 0 3px #0E7A4E,inset 0 0 0 5px #fff,0 6px 16px -8px rgba(0,0,0,.4);}
.rs-green b{font-size:min(28px,11cqw);letter-spacing:.08em;}
.rs-green small{font:800 10px/1 'Manrope',sans-serif;letter-spacing:.2em;opacity:.85;}
/* Фіксовані 3 колонки (не auto-fill) — навмисно: з auto-fill кількість колонок
   "пливла" залежно від ширини вікна, і будь-яка категорія, чия кількість карток не
   ділилась націло на поточну кількість колонок, лишала самотню картку в останньому
   ряду (фідбек користувача 30.08: 4/5/10 карток у категоріях виглядали розбалансовано).
   Дані категорій підігнано під кратність 3 (додано кілька реальних написів), тож зі
   стабільними 3 колонками кожен ряд тепер завжди повний; на вузькому екрані — 1 колонка
   (там "рядок з одної картки" — це просто список, а не розбалансована сітка). */
.sign-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);}
@media(max-width:800px){.sign-grid{grid-template-columns:1fr;}}

/* ── Меню-канджі (メニューの漢字) — картка у стилі цінника/меню ── */
.food-card{background:#FFF3D6;border:var(--brutal-border);
  border-radius:var(--r-xs);padding:var(--sp-4) var(--sp-3) var(--sp-3);text-align:center;position:relative;
  box-shadow:var(--brutal-shadow);}
[data-theme="dark"] .food-card{background:#2A2417;}
.food-card .fk{font-size:1.25rem;font-weight:800;font-family:'Unbounded','Unbounded Fallback','Noto Sans JP','Noto Sans Myanmar',sans-serif;
  color:#B33A1F;line-height:1.15;}
[data-theme="dark"] .food-card .fk{color:#E8794F;}
.food-card .fr{font-size:12px;color:var(--muted);margin-top:3px;}
.food-card .fu{font-size:12px;font-weight:700;color:var(--ink);margin-top:6px;line-height:1.4;}
/* Той самий фікс, що й .sign-grid вище — фіксовані 3 колонки, дані підігнано під
   кратність 3. */
.food-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);}
@media(max-width:800px){.food-grid{grid-template-columns:1fr;}}

/* ── Цікаві факти про канджі (漢字のトリビア) ── */
.etym-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-6);display:flex;align-items:center;gap:var(--sp-6);}
.etym-card .ek{font-size:2.3rem;font-weight:700;font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;flex:none;
  width:64px;text-align:center;color:var(--crimson);}
.etym-card .eb{flex:1;min-width:0;}
.etym-card .ebd{font-size:12px;color:var(--ink);line-height:1.55;}
.etym-card .eu{font-size:12px;font-weight:800;color:var(--muted);margin-top:3px;}
.confuse-pair{display:flex;align-items:center;gap:0;background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;margin-bottom:10px;}
.confuse-half{flex:1;padding:var(--sp-6) var(--sp-4);text-align:center;}
.confuse-half:first-child{border-right:1.5px dashed var(--border);}
.confuse-half .ck{font-size:2rem;font-weight:700;font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;color:var(--ink);}
.confuse-half .cr{font-size:12px;color:var(--muted);margin-top:2px;}
.confuse-half .cu{font-size:12px;font-weight:800;color:var(--crimson);margin-top:4px;}
.confuse-hint{background:var(--paper);font-size:12px;font-weight:700;color:var(--ink);
  padding:var(--sp-3) var(--sp-5);line-height:1.5;border-top:1px dashed var(--border);}
/* Фіксовані колонки замість auto-fill (той самий фікс, що й .sign-grid/.food-grid
   вище) — тут даних свідомо НЕ чіпав (кожен рекорд — перевірена кількість штрихів,
   ризиковано додавати "для рівного числа" непідтверджені факти), тому підібрав
   кількість колонок (4 і 2) так, щоб точно ділило вже наявні 8 карток націло. */
.stroke-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);}
@media(max-width:640px){.stroke-grid{grid-template-columns:repeat(2,1fr);}}
.stroke-card{background:var(--card);border:var(--brutal-border);
  border-radius:var(--r-xs);padding:var(--sp-5) var(--sp-3);text-align:center;position:relative;box-shadow:var(--brutal-shadow);}
.stroke-card .sn{position:absolute;top:6px;right:8px;font-size:12px;font-weight:900;color:#fff;
  background:var(--crimson,#B33A1F);border-radius:var(--r-pill);padding:2px var(--sp-2);}
.stroke-card .sk{font-size:2rem;font-weight:700;font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;margin-top:6px;}
.stroke-card .sr{font-size:12px;color:var(--muted);margin-top:3px;}
.stroke-card .su{font-size:12px;font-weight:700;color:var(--ink);margin-top:5px;}

/* ── Імена та прізвища (名字と名前) — стилізація під печатку-ханко (印鑑) ── */
.hanko-wrap{text-align:center;}
.hanko{width:60px;height:60px;border-radius:var(--r-sm);margin:0 auto;background:#B33A1F;
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.2);}
.hanko::before{content:'';position:absolute;inset:5px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-xs);}
.hanko .hk{color:#fff;font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;font-weight:700;line-height:1;position:relative;z-index:1;
  writing-mode:vertical-rl;letter-spacing:1px;}
.hanko-wrap .hr{font-size:12px;color:var(--muted);margin-top:6px;}
/* Фіксовані колонки — "Топ-20" це справжня статистика (найпоширеніші прізвища),
   міняти саму кількість карток тут не варто; замість цього 5 і 2 колонки — обидва
   числа ділять 20 націло, тож жоден ряд не лишається неповним. */
.hanko-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-5) var(--sp-3);}
@media(max-width:640px){.hanko-grid{grid-template-columns:repeat(2,1fr);}}
.name-hard-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-6);display:flex;align-items:center;gap:var(--sp-6);}
.name-hard-card .nb{flex:1;min-width:0;}
.name-hard-card .nu{font-size:12px;font-weight:800;color:var(--crimson);}
.name-hard-card .nd{font-size:12px;color:var(--ink);line-height:1.55;margin-top:3px;}

/* ── Календарні свята й традиції (年中行事) ── */
.holiday-card{border-radius:var(--r-md);padding:var(--sp-6) var(--sp-7);position:relative;border:1.5px solid var(--border);
  background:var(--card);border-left:5px solid var(--crimson);}
.holiday-card .hd-date{font-size:12px;font-weight:900;letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase;}
.holiday-card .hd-k{font-size:1.35rem;font-weight:800;font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;margin-top:2px;color:var(--ink);}
.holiday-card .hd-r{font-size:12px;color:var(--muted);margin-top:1px;}
.holiday-card .hd-u{font-size:13px;font-weight:800;margin-top:6px;}
.holiday-card .hd-desc{font-size:12px;color:var(--ink);line-height:1.6;margin-top:5px;}
.holiday-winter{border-left-color:#3B82F6;}
.holiday-winter .hd-u{color:#2563EB;}
.holiday-spring{border-left-color:#EC4899;}
.holiday-spring .hd-u{color:#DB2777;}
.holiday-summer{border-left-color:#14B8A6;}
.holiday-summer .hd-u{color:#0D9488;}
.holiday-autumn{border-left-color:#EA580C;}
.holiday-autumn .hd-u{color:#C2410C;}

/* ── Сленг і діалекти (方言とスラング) ── */
.dl-row{display:flex;align-items:center;background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-6);margin-bottom:7px;gap:var(--sp-5);}
.dl-std{flex:1;text-align:right;}
.dl-std .dk{font-size:1.05rem;font-weight:700;font-family:'Unbounded','Unbounded Fallback','Noto Sans JP','Noto Sans Myanmar',sans-serif;color:var(--muted);white-space:nowrap;}
.dl-arrow{flex:none;color:var(--crimson);font-weight:900;font-size:1.1rem;}
.dl-kansai{flex:1;}
/* white-space:nowrap на .dk обох сторін — без цього довші 4-морні слова (おおきに,
   ほんまに) переносили кнопку озвучення на новий рядок, а коротші (あかん, せやで) —
   ні, тож висота рядків і позиція кнопки "стрибали" від рядка до рядка (фідбек
   користувача 30.08, разом з подвійними рамками вище). */
.dl-kansai .dk{font-size:1.15rem;font-weight:800;font-family:'Unbounded','Unbounded Fallback','Noto Sans JP','Noto Sans Myanmar',sans-serif;color:var(--ink);white-space:nowrap;}
.dl-r{font-size:12px;color:var(--muted);margin-top:1px;}
.kn-tab{padding:var(--sp-3) 18px;border-radius:var(--r-md);border:2px solid var(--border);background:var(--card);
  font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted);
  transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base),opacity var(--dur-base);flex:0 0 auto;white-space:nowrap;letter-spacing:-.01em;}
@media (hover:hover){.kn-tab:hover{border-color:var(--crimson);}}
/* Рядок перемикачів (вкладки граматики, слова тренажера відмінювання тощо): один
   горизонтально прокручуваний рядок замість flex-wrap на кілька рядків — на вузькому
   екрані 5-7+ підписів інакше стають ~1000px вертикального скролу ДО самого контенту. */
.chip-scroll{display:flex;gap:var(--sp-3);margin-bottom:1.3rem;flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.chip-scroll::-webkit-scrollbar{display:none;}
.kn-tab.on{border-color:var(--navy);background:var(--navy);color:#fff;}
.lang-switch-btn{display:inline-flex;flex-shrink:0;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--ink);border-radius:var(--r-sm);background:none;box-shadow:none!important;
  font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;font-weight:800;font-size:12px;
  letter-spacing:.02em;color:var(--ink);cursor:pointer;line-height:1.4;}
@media (hover:hover){.lang-switch-btn:hover{background:var(--sb-hover);}}
.lang-switch-btn:active{transform:none!important;}
.lang-pick-item{display:block;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-sm);font-size:14px;font-weight:600;
  text-decoration:none;color:var(--text);cursor:pointer;text-align:left;}
@media (hover:hover){.lang-pick-item:hover{background:var(--sb-hover);}}
.lang-pick-item.on{background:var(--navy);color:#fff;cursor:default;font-weight:800;}

/* home landing screen */
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-6);text-align:left;}
.home-card{background:var(--card);
  padding:1.4rem 1.2rem;cursor:pointer;transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base),opacity var(--dur-base);
  display:block;width:100%;text-align:left;font-family:inherit;appearance:none;-webkit-appearance:none;
  /* Тепер це <button> — глобальне button{border/box-shadow/border-radius !important}
     (стиль CTA-кнопок) інакше перебʼє картку, тож теж !important тут. */
  border:1.5px solid var(--border) !important;box-shadow:none !important;border-radius:var(--r-lg) !important;}
@media (hover:hover){.home-card:hover{border-color:var(--crimson) !important;transform:translateY(var(--lift));box-shadow:0 10px 24px rgba(0,0,0,.08) !important;}}
.home-icon{font-size:2rem;margin-bottom:.5rem;font-family:'Manrope','Manrope Fallback','Noto Serif JP','Noto Sans Myanmar',serif;line-height:1;}
.home-title{font-weight:900;font-size:1.15rem;margin-bottom:.2rem;color:var(--ink);}
.home-sub{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:.7rem;}
/* Той самий стиль пігулки, що й фільтри рівнів N5-N1 (filterBtns() у стані "вимкнено"):
   жирна 2px рамка, прозоре тло, кольоровий текст — замість давньої заливки-«вицвітання».
   Червоний акцент (колишнє лого) (#e83829) — у світлій темі; у темній сам логотип теж не червоний
   контуром, а білий (--ink-shadow, #FFFFFF — той самий тон, що й обводка темної
   версії лого й тінь карток) — яскраво-червоний на чорному тлі був надто агресивним. */
.home-stat{display:inline-flex;align-items:center;justify-content:center;
  padding:var(--sp-1) var(--sp-6);border-radius:var(--r-pill);border:2px solid #e83829;
  font-weight:900;font-size:12px;letter-spacing:.05em;background:transparent;color:#c62e1f;}
[data-theme="dark"] .home-stat{border-color:var(--ink-shadow);color:var(--ink-shadow);}
@media(max-width:420px){
  .home-grid{grid-template-columns:1fr 1fr;gap:var(--sp-3);}
  .home-card{padding:1rem .8rem;}
  .home-icon{font-size:1.6rem;}
  .home-title{font-size:.95rem;}
  .home-sub{font-size:12px;}
}
@media(max-width:420px){
  .kn-rowcells{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-2);}
  .kn-cell{padding:var(--sp-2) 2px var(--sp-1);}
  .kn-jp{font-size:1.2rem;}
  .kn-jp .kn-k{font-size:.9rem;}
  .kn-rowlabel{width:28px;flex:0 0 28px;font-size:.95rem;}
}.kbig{cursor:pointer;transition:transform var(--dur-base);}
@media (hover:hover){.kbig:hover{transform:scale(1.08);}}
#kanjiTraceOverlay{position:fixed;inset:0;background:rgba(10,10,20,.55);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:var(--sp-7);backdrop-filter:blur(2px);}
.kt-box{background:var(--card);border-radius:var(--r-xl);padding:1.3rem;max-width:380px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.35);border:1px solid var(--border);}
.kt-canvaswrap{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;
  background:var(--paper);border:1.5px solid var(--border);touch-action:none;}
.kt-canvaswrap canvas{position:absolute;inset:0;width:100%;height:100%;}
.kt-btn{padding:var(--sp-3) var(--sp-6);border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--paper);
  color:var(--ink);font-weight:800;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-1);
  transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base),opacity var(--dur-base);}
@media (hover:hover){.kt-btn:not(.primary):hover{background:color-mix(in srgb,var(--ink) 8%,var(--paper));color:var(--ink);}}
.kt-btn.primary{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent-2);}
@media (hover:hover){.kt-btn.primary:hover{opacity:.88;}}
.kt-hud{display:flex;align-items:baseline;margin-bottom:.6rem;font-size:12px;font-weight:800;color:var(--muted);}
.kt-hud .n{color:var(--ink);font-size:13px;}
.kt-feedback{min-height:1.3rem;text-align:center;font-size:12px;font-weight:800;margin-top:.7rem;transition:color var(--dur-base);}
.kt-feedback.kt-ok{color:#047857;}
.kt-feedback.kt-err{color:var(--crimson);}
.kt-done{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:.6rem 0 .2rem;text-align:center;}
.kt-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:.8rem;}
.kt-title{font-weight:900;font-size:14px;display:flex;align-items:center;gap:6px;}
.kt-close{width:32px;height:32px;flex:none;padding:0;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--paper);
  color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.kt-close .icn{margin:0;}
@media (hover:hover){.kt-close:hover{background:color-mix(in srgb,var(--ink) 8%,var(--paper));color:var(--ink);}}
.kt-actions,.kt-done-actions{display:flex;gap:8px;margin-top:.6rem;width:100%;}
.kt-actions>*,.kt-done-actions>*{flex:1 1 auto;display:flex;min-width:0;}
.kt-actions .kt-btn,.kt-done-actions .kt-btn{flex:1 1 auto;width:100%;justify-content:center;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding-left:var(--sp-4);padding-right:var(--sp-4);}
.kt-note{font-size:11px;font-weight:400;color:var(--muted);margin-top:.8rem;text-align:center;line-height:1.45;}
.kt-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.kt-done .ic{width:2.2rem;height:2.2rem;color:#047857;}

/* Клавіатурний фокус: єдине правило на весь застосунок (замість тиші на 170+ кнопках).
   :focus-visible — тільки клавіатура/скрінрідер, не заважає клікам мишею/тачем. */
:focus-visible{outline:2.5px solid var(--accent-1);outline-offset:2px;border-radius:var(--r-xs);}

/* ══════ Дизайн-токени типографіки (мінімальна шкала; нижче 12px не спускаємось) ══════ */
:root{--fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:20px;}

/* ══════ Доступність ══════ */
/* Візуально прихований текст для скрінрідерів (живий регіон #srAnnounce) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Клікабельні не-кнопки, яким скрипт додає role=button/tabindex=0 */
[role="button"][data-action]:focus-visible{outline:2px solid var(--accent-1,var(--crimson));outline-offset:2px;}

/* ══════ Skeleton-завантаження ══════ */
.skel{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--border) 25%,var(--surface) 50%,var(--border) 75%);
  background-size:200% 100%;animation:skel-shimmer 1.3s ease-in-out infinite;opacity:.7;}
.skel-line{height:14px;margin:10px 0;}
.skel-title{height:22px;width:60%;margin:0 auto 18px;}
.skel-card{height:88px;margin:12px 0;border-radius:var(--r-md);}
@keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none;}}

/* ══════ Банер помилки завантаження преміум-даних ══════ */
#dataErrBanner{display:none;position:fixed;left:50%;transform:translateX(-50%);z-index:10000;
  bottom:calc(20px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));width:max-content;max-width:min(92vw,460px);align-items:center;gap:var(--sp-5);
  background:var(--card);color:var(--text);border:1.5px solid var(--err,#c0392b);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-6);box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:var(--fs-sm);font-weight:700;}
#dataErrBanner button{flex-shrink:0;background:var(--err,#c0392b);color:#fff;border:0;border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-5);
  font:inherit;font-weight:800;cursor:pointer;min-height:36px;}

/* ══════ Safe-area (iPhone з виступом / індикатором жесту, PWA standalone) ══════ */
body{padding-left:var(--safe-area-inset-left, env(safe-area-inset-left));padding-right:var(--safe-area-inset-right, env(safe-area-inset-right));}
#sb{padding-top:var(--safe-area-inset-top, env(safe-area-inset-top));padding-bottom:var(--safe-area-inset-bottom, env(safe-area-inset-bottom));}
@media(max-width:800px){
  .mbar{padding-top:calc(.7rem + var(--safe-area-inset-top, env(safe-area-inset-top)));}
  #main{padding-top:calc(4.4rem + var(--safe-area-inset-top, env(safe-area-inset-top)));padding-bottom:calc(2rem + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));}
}

/* Вкладки Хірагана/Катакана: на вузьких екранах ділять ширину порівну, а не виїжджають за край */
@media(max-width:480px){
  .kn-tab[data-t]{flex:1 1 0;min-width:0;padding:var(--sp-3) var(--sp-3);white-space:normal;line-height:1.25;text-align:center;font-size:13px;}
}

/* ══════ Контраст у темній темі ══════ */
[data-theme="dark"]{ --lv5:#60A5FA; --lv4:#FBBF24; --lv3:#A78BFA; --lv2:#34D399; --lv1:#F87171; }

/* Бейджі рівнів N5-N1: базові кольори (темно-сині/бурі/фіолетові…) дають 2.7-3.5:1 на чорному —
   світліші відтінки тієї ж гами проходять WCAG AA (≥6.3:1). Світла тема лишається як є. */
/* Лічильник штрихів: у темній темі --crimson = яскравий помаранчевий, білий текст на ньому лише 3.1:1 */
[data-theme="dark"] .stroke-card .sn{color:#000;}

/* ══════ «Перейти до вмісту» — для клавіатурних користувачів ══════ */
.skip-link{position:fixed;left:12px;top:-60px;z-index:10001;background:var(--accent-1);color:var(--on-accent-1);
  padding:var(--sp-4) var(--sp-7);border-radius:var(--r-sm);font-weight:800;font-size:var(--fs-sm);text-decoration:none;transition:top var(--dur-base);}
.skip-link:focus{top:calc(12px + var(--safe-area-inset-top, env(safe-area-inset-top)));outline:2px solid var(--accent-2);outline-offset:2px;}
#main:focus{outline:none;}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none;}}

/* ══════ Тач-цілі: на сенсорних екранах збільшуємо клікабельну зону, не змінюючи верстку ══════ */
@media (pointer:coarse){
  .logo-btn,.lang-switch-btn,.icn-btn{min-height:44px;}
  .kn-check,.spk-btn,.flat-btn{position:relative;}
  /* невидима розширена зона: 44px у меншій із сторін навіть для 18×18 чекбокса */
  .kn-check::after,.spk-btn::after,.flat-btn::after{content:"";position:absolute;left:50%;top:50%;
    width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%);}
  /* Галочка «вивчено» в Абетці: 44px по центру гуртка накривали ~40% клітинки (65px) — тап, щоб
     послухати знак, часто позначав його вивченим. Лишаємо 30×30, притиснуті до кута клітинки. */
  .kn-check::after{left:auto;top:-3px;right:-3px;width:30px;height:30px;transform:none;}
}

/* Заголовок з іконкою: коли текст переноситься на кілька рядків, іконка стоїть біля ПЕРШОГО рядка,
   а не «висить» посередині блоку. margin-top центрує іконку відносно висоти першого рядка. */
:is(h1,h2,h3,h4):has(> .icn:first-child){align-items:flex-start!important;}
:is(h1,h2,h3,h4):has(> .icn:first-child) > .icn:first-child{margin-top:calc((1.25em - var(--s,1em))/2);margin-top:calc((1lh - var(--s,1em))/2);}

/* Бірманський (Noto Sans Myanmar) має інші метрики рядка: візуальний центр літер лежить нижче, ніж у
   латиниці/кирилиці — калібруємо центр іконки окремо (перевірено знімками, ~2px). */
:lang(my){--ic-center:.2em;}


/* ══════════════════════════════════════════════════════════════════════════════════════
   СИСТЕМА КНОПОК (єдиний шар поверх наявних класів; HTML-класи не перейменовуємо)
   Розміри:  M = 40px (.bn .br .bg .bgrn), сегменти (.kn-tab .focus-size-btn) = 38px, S = 32px (.flat-btn чіпи, .lang-switch-btn).
             На дотик усі ≥44px (правила pointer:coarse / max-width:800px вище).
   Стани:    спокій → hover (лише курсор) → натиснута (м'який зсув 2px + тінь 3→1px) → фокус з клавіатури → вимкнена.
   Рух:      transform/box-shadow/background 120–200ms, одна крива (--ease) — жодних стрибків.
   Кнопки обгортає wrapInkShadows() (.ink-wrapped має transition:none і box-shadow:none!important),
   тому правила нижче — з !important і специфічністю button.ink-wrapped:is(...).
   ══════════════════════════════════════════════════════════════════════════════════════ */
button:is(.bn,.br,.bg,.bgrn,.bcta,.kt-btn,.kn-tab,.focus-size-btn,.flat-btn,.lang-switch-btn){
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
             background-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease)!important;
}
/* M — основні дії */
button:is(.bn,.br,.bg,.bgrn,.bcta){
  min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;font-weight:700;letter-spacing:-.01em;line-height:1.2;
}
button.ink-wrapped:is(.bn,.br,.bg,.bgrn,.bcta),button:is(.bn,.br,.bg,.bgrn,.bcta):not(.ink-wrapped){
  box-shadow:var(--btn-shadow)!important;
}
button.ink-wrapped:is(.bn,.br,.bg,.bgrn,.bcta):active,button:is(.bn,.br,.bg,.bgrn,.bcta):not(.ink-wrapped):active{
  transform:var(--btn-press)!important;box-shadow:var(--btn-shadow-press)!important;
}
/* сегменти, чіпи, малі: плоскі (за задумом), але з м'яким відгуком */
button:is(.kn-tab,.focus-size-btn){min-height:38px;}
button:is(.flat-btn,.lang-switch-btn){min-height:32px;}
button:is(.kn-tab,.focus-size-btn,.flat-btn,.lang-switch-btn):active{transform:translate(1px,1px)!important;}
/* hover — тільки там, де є курсор */
@media (hover:hover){
  button:is(.br):hover{background:#FF7A2E;}
  button:is(.bn):hover{background:var(--navy2);}
  button:is(.bgrn):hover{background:#047857;}
}
/* фокус з клавіатури: кільце зовні, щоб не лізти на тінь */
button:focus-visible{outline:2px solid var(--ink-shadow);outline-offset:3px;}
/* вимкнена: без тіні, без зсуву, пріглушена */
button:is(.bn,.br,.bg,.bgrn,.bcta):disabled{box-shadow:none!important;transform:none!important;opacity:.55;cursor:not-allowed;}
@media (prefers-reduced-motion:reduce){
  button:is(.bn,.br,.bg,.bgrn,.kn-tab,.focus-size-btn,.flat-btn,.lang-switch-btn){transition:background-color var(--dur-base) linear,color var(--dur-base) linear!important;}
  button:is(.bn,.br,.bg,.bgrn):active{transform:none!important;}
}

/* Утиліта для інлайн-кнопок дій (модальні CTA тощо): та сама геометрія, тінь і натискання, що й .bn/.br/.bg. */
.bcta{cursor:pointer;}

/* ══════ Стан «завантаження» кнопки: спінер замість вмісту, ширина НЕ стрибає ══════
   Вмикається через setBtnBusy(btn,true) (ui.js): текст стає прозорим, іконки ховаються, поверх — спінер кольору тексту. */
button.is-loading{position:relative;color:transparent!important;pointer-events:none;cursor:progress;}
button.is-loading > *{visibility:hidden;}
button.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid var(--spin,currentColor);border-right-color:transparent;border-radius:50%;animation:btn-spin .7s linear infinite;}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){button.is-loading::after{animation:none;border-right-color:var(--spin,currentColor);opacity:.6;}}

/* Іконка-динамік (озвучення): візуально 14–20px, але клікабельна зона ≥32px (44px на дотик — див. вище) */
.spk-btn{position:relative;}
.spk-btn::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,32px);height:max(100%,32px);transform:translate(-50%,-50%);}

/* ══════════════════════════════════════════════════════════════════════════════════════
   СИСТЕМА РУХУ
   Принципи: рухаємо лише transform/opacity; вхід .28s ease-out, вихід .18s (швидший); одна крива --ease;
   мікро-відгук 120–200ms. Модалки й підкладка меню з'являються/зникають БЕЗ JS: @starting-style задає
   початковий стан, а transition для display (allow-discrete) дає дочекатись кінця зникнення.
   Браузери без цих можливостей просто перемикаються миттєво (поведінка як раніше).
   ══════════════════════════════════════════════════════════════════════════════════════ */
[id$="Overlay"]{transition:opacity var(--dur-base) var(--ease),display var(--dur-base) allow-discrete;}
[id$="Overlay"] > *{transition:transform var(--dur-enter) var(--ease),opacity var(--dur-base) var(--ease);}
@starting-style{
  [id$="Overlay"]{opacity:0;}
  [id$="Overlay"] > *{opacity:0;transform:translateY(12px) scale(.97);}
  #ov{opacity:0;}
}
[id$="Overlay"][style*="display: none"],[id$="Overlay"][style*="display:none"]{opacity:0;}
[id$="Overlay"][style*="display: none"] > *,[id$="Overlay"][style*="display:none"] > *{
  opacity:0;transform:translateY(8px) scale(.98);transition-duration:var(--dur-exit);transition-timing-function:var(--ease-in);}
#ov{transition:opacity var(--dur-base) var(--ease),display var(--dur-base) allow-discrete;}
#ov[style*="display: none"],#ov[style*="display:none"]{opacity:0;}

/* Тост: плавний виїзд знизу (клас .in ставить showSrsToast) */
#srsToast{transform:translateX(-50%) translateY(10px)!important;
  transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)!important;}
#srsToast.in{transform:translateX(-50%) translateY(0)!important;}

/* Перемикання теми: кросфейд усієї сторінки (View Transitions API), без покомпонентних transition */
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-slow);animation-timing-function:var(--ease);}

/* prefers-reduced-motion: рух замінюємо на м'яке проявлення, а не просто вимикаємо */
@media (prefers-reduced-motion:reduce){
  @keyframes su{from{opacity:0}to{opacity:1}}
  [id$="Overlay"] > *,[id$="Overlay"][style*="display: none"] > *,[id$="Overlay"][style*="display:none"] > *{transform:none!important;}
  #srsToast,#srsToast.in{transform:translateX(-50%)!important;}
  .fi{transition-duration:.01ms;}
  .home-card:hover,.vi:hover,.kc:hover,.kn-cell:hover{transform:none;}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms;}
}

/* Ряд із 5 рівнів (N5–N1): на телефонах — п'ять рівних колонок замість 4+1 */
.lvl-row{display:flex;gap:6px;justify-content:center;margin-bottom:1.4rem;flex-wrap:wrap;}
@media(max-width:480px){
  .lvl-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));}
  .lvl-row > .ink{display:block;width:100%;margin-right:0;}   /* .ink за замовчуванням fit-content: чіп без замка (N5) був вужчим */
  .lvl-row > .ink,.lvl-row > button{min-width:0;}
  .lvl-row .focus-size-btn{padding-left:var(--sp-1);padding-right:var(--sp-1);width:100%;}
}

/* Сітка з ЧОТИРЬОХ карток: 1 колонка на телефоні, 2×2 на планшеті, 4 в ряд на широкому екрані (3+1 виключено) */
.grid-2-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
@media(max-width:480px){.grid-2-4{grid-template-columns:minmax(0,1fr);}}
@media(min-width:1200px){.grid-2-4{grid-template-columns:repeat(4,minmax(0,1fr));}}

/* Примітка (перевірено вимірами, 3 прогони × 3 конфігурації): content-visibility:auto на .vi/.kc НЕ прискорив рендер
   (канджі 153мс з ним проти 129мс без нього) і давав стрибки скролбара через оцінку висоти — тому не застосовується.
   Реальний виграш дали: пакетне читання стилів у wrapInkShadows() та кеш рангів сортування слів у renderVocab(). */

/* Іконка динаміка кнопки озвучення — CSS-маска замість вкладеного <span><svg><path> (мінус 4 вузли DOM на кнопку).
   Форма та сама, що й ICONS.speaker; колір бере з currentColor, розмір — з --s (виставляє spkBtn()). */
.spk-btn{--spk-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 5V4L8 9H4z'/%3E%3Cpath d='M16.2 8.2a5 5 0 0 1 0 7.6M19 5.3a9 9 0 0 1 0 13.4'/%3E%3C/svg%3E");}
.spk-btn::before{content:"";display:inline-block;width:var(--s,14px);height:var(--s,14px);background-color:currentColor;
  -webkit-mask:var(--spk-mask) center/contain no-repeat;mask:var(--spk-mask) center/contain no-repeat;
  vertical-align:calc(var(--ic-center,.383em) - var(--s,14px)/2);}

/* ══════ Артефакти: нативні елементи, дотик, прокрутка, типографіка ══════ */
/* Нативні елементи (скролбари, випадні списки <select>, автозаповнення) слідують за темою застосунку, а не ОС */
:root{color-scheme:light;}
[data-theme="dark"]{color-scheme:dark;}
/* Дотик: без сірого спалаху підсвічування на кнопках і без затримки/зуму подвійного тапу */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
button,a,[role="button"],select,summary,label{touch-action:manipulation;}
/* Виділення тексту в кольорі бренду */
::selection{background:var(--accent-2);color:var(--on-accent-2);}
/* Прокрутка НЕ «прокидається» крізь модалку/меню на сторінку під ними; відкрита модалка блокує скрол фону */
#sb,[id$="Overlay"]{overscroll-behavior:contain;}
body.modal-open{overflow:hidden;}
html{scroll-padding-top:5rem;}   /* якорі/scrollIntoView не ховаються під фіксованою мобільною шапкою */
/* Типографіка: без «вдів» в заголовках і абзацах; довге слово переноситься замість виходу за край */
h1,h2,h3,h4{text-wrap:balance;}
p{text-wrap:pretty;}
body{overflow-wrap:break-word;}
/* Стрічка чіпів: місце під кільце фокусу з усіх боків (overflow:auto його обрізав); від'ємний margin зберігає розкладку */
.chip-scroll{padding:6px;margin:-6px -6px calc(1.3rem - 6px);}

/* ══════════════════════════════════════════════════════════════════════════════════════
   СТОРІНКИ ПОМИЛОК (404 / 403 / 503 / 500) — у застосунку (renderErrorView) і статичні (tools/error_pages.py)
   Кожна помилка — японський знак, що вчить слово: номерний знак 迷子 404, вивіски 立入禁止 / 準備中 / 故障中.
   ══════════════════════════════════════════════════════════════════════════════════════ */
.err{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-6);text-align:center;box-sizing:border-box;
  width:100%;max-width:640px;margin:0 auto;padding:var(--sp-9) var(--sp-7);min-height:min(78dvh,760px);}
body > .err{min-height:100dvh;}
.err-logo{display:inline-flex;margin-bottom:var(--sp-3);}
.err-logo img{height:26px;width:auto;}
.err-visual{width:100%;display:flex;justify-content:center;margin-bottom:var(--sp-5);}
.err-visual .jp-plate{max-width:min(340px,86vw);transform:rotate(-2.5deg);border:2px solid #111;box-shadow:var(--brutal-shadow);}
/* великий код: помаранчеві цифри з жорсткою тінню (контур text-stroke давав артефакти на перетинах контурів шрифту) */
.err-code{font:900 clamp(3.6rem,15vw,6rem)/1 'Unbounded','Unbounded Fallback',sans-serif;letter-spacing:-.04em;color:var(--accent-2);text-shadow:4px 4px 0 var(--ink-shadow);margin-top:var(--sp-2);}
.err-title{font:900 clamp(1.25rem,5vw,1.7rem)/1.2 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif;margin:0;text-wrap:balance;}
.err-text{max-width:46ch;margin:0;color:var(--muted);font-size:14px;line-height:1.65;text-wrap:pretty;}
/* «слово помилки»: японський вираз + читання + значення (учимося навіть на помилці) */
.err-word{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:var(--sp-4) var(--sp-7);
  background:var(--paper);border:2px dashed var(--border);border-radius:var(--r-sm);}
.err-word-k{font-size:1.5rem;font-weight:700;line-height:1.2;}
.err-word-r{font-size:12px;color:var(--muted);font-weight:700;}
.err-word-m{font-size:13px;font-weight:800;}
.err-actions{display:flex;flex-wrap:wrap;gap:var(--sp-5);justify-content:center;margin-top:var(--sp-2);}
/* кнопки-посилання статичних сторінок — та сама система, що й button.br/.bg */
.err-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 var(--sp-8);box-sizing:border-box;
  border:2px solid var(--ink-shadow);border-radius:var(--r-xs);background:var(--card);color:var(--ink);text-decoration:none;
  font:700 13px/1.2 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif;letter-spacing:-.01em;box-shadow:var(--btn-shadow);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background-color var(--dur-base) var(--ease);}
.err-btn.primary{background:var(--accent-2);color:var(--on-accent-2);}
.err-btn:active{transform:var(--btn-press);box-shadow:var(--btn-shadow-press);}
.err-btn:focus-visible{outline:2px solid var(--ink-shadow);outline-offset:3px;}
@media (hover:hover){.err-btn.primary:hover{background:#FF7A2E;}.err-btn:not(.primary):hover{background:var(--paper);}}
/* знаки: фізичні предмети зі своїми кольорами (палітра бренду) — однакові в світлій і темній темі */
.err-sign{position:relative;width:min(340px,86vw);aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  border-radius:10px;font-family:'Manrope','Manrope Fallback','Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:900;box-shadow:6px 6px 0 var(--ink-shadow);transform:rotate(-1.5deg);}
.err-sign-k{font-size:clamp(2rem,10vw,3.1rem);letter-spacing:.08em;line-height:1;}
/* 403 立入禁止: біла табличка з червоною рамкою й знаком «в'їзд заборонено» */
.err-sign.forbid{background:#fff;color:#D93A2B;border:8px solid #D93A2B;}
.err-sign.forbid::before{content:"";position:absolute;left:5%;top:50%;width:22%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;
  background:#D93A2B linear-gradient(#fff,#fff) center/58% 14% no-repeat;}
.err-sign.forbid .err-sign-k{margin-left:22%;}
/* 503 準備中: підвісна табличка на двох шнурках, що погойдується */
.err-sign.hang{margin-top:30px;background:#EDE0C8;color:#D93A2B;border:4px solid #1A1A1A;transform-origin:50% -26px;animation:err-sway 5s ease-in-out infinite;}
.err-sign.hang::before,.err-sign.hang::after{content:"";position:absolute;top:-30px;width:3px;height:30px;background:#1A1A1A;}
.err-sign.hang::before{left:24%;}
.err-sign.hang::after{right:24%;}
/* 500 故障中: жовта табличка з діагональною смугою «обережно» */
.err-sign.broken{background:#E8B923 repeating-linear-gradient(-45deg,transparent 0 16px,rgba(26,26,26,.11) 16px 32px);color:#1A1A1A;border:6px solid #1A1A1A;}
@keyframes err-sway{0%,100%{transform:rotate(-2.4deg);}50%{transform:rotate(2.4deg);}}
@media (prefers-reduced-motion:reduce){.err-sign.hang{animation:none;transform:rotate(-1.5deg);}}

/* ══════ ЧИТАННЯ ══════ */
.rd-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}
.rd-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);min-height:44px;}
.rd-card:hover{border-color:var(--accent-2);}
.rd-lv{background:var(--paper);color:var(--ink);}
.rd-card-jp{font-size:1.3rem;font-weight:700;}
.rd-card-tr{font-size:13px;color:var(--muted);font-weight:700;}
.rd-card-ok{font-size:12px;color:var(--ok);font-weight:800;display:inline-flex;align-items:center;gap:4px;}
.rd-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:1rem;}
.rd-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:var(--r-md);border:2px solid var(--border);background:var(--card);color:var(--ink);font-size:13px;cursor:pointer;}
.rd-btn.on{border-color:var(--accent-2);}
.rd-btn:disabled{cursor:default;opacity:.85;}
.rd-btn.ok{border-color:var(--ok);color:var(--ok);}
.rd-btn.bad{border-color:var(--err);color:var(--err);}
.rd-title{font-size:1.6rem;font-weight:700;margin:0 0 .8rem;}
.rd-body{font-size:1.45rem;line-height:2.4;}
.rd-w{font:inherit;color:inherit;background:none;border:none;padding:0 1px;margin:0;border-radius:6px;cursor:pointer;border-bottom:2px dotted transparent;}
.rd-w:hover{border-bottom-color:var(--muted);}
.rd-w.on{background:var(--accent-2);color:var(--on-accent-2);}
.rd-w rt{font-size:.5em;color:var(--muted);}
.rd-w.on rt{color:inherit;}
.rd-pop{margin-top:12px;border-left:4px solid var(--accent-2);}
.rd-pop-w{font-size:1.6rem;font-weight:700;}
.rd-pop-r{font-size:14px;color:var(--muted);font-weight:700;}
.rd-pop-g{font-size:15px;font-weight:700;margin:6px 0 10px;}
.rd-trans{margin-top:10px;font-size:14px;line-height:1.7;color:var(--muted);font-weight:600;}
.rd-qh{font-size:1rem;font-weight:900;margin:1.8rem 0 .8rem;}
.rd-q{margin-bottom:1.2rem;}
.rd-q-jp{font-size:1.15rem;font-weight:700;}
.rd-q-tr{font-size:12px;color:var(--muted);font-weight:700;margin:2px 0 8px;}
.rd-q-opts{display:flex;gap:8px;flex-wrap:wrap;}
@media (max-width:600px){.rd-body{font-size:1.25rem;}}
/* слова в тексті — не «кнопки»: знімаємо глобальний необрутал-бордер/тінь з button{} */
.rd-body .rd-w{border:none!important;box-shadow:none!important;border-radius:6px!important;background:none;border-bottom:2px dotted transparent!important;transform:none!important;}
.rd-body .rd-w:hover{border-bottom-color:var(--muted)!important;}
.rd-body .rd-w.on{background:var(--accent-2);color:var(--on-accent-2);}
.rd-nw{white-space:nowrap;}
.rd-lvh{font-size:13px;font-weight:900;letter-spacing:.07em;color:var(--muted);margin:1.4rem 0 .7rem;display:flex;align-items:center;gap:6px;}
.rd-locked{width:100%;opacity:.9;}
/* пробний іспит: секції, таймер, вердикт */
.mock-sec{margin-left:6px;padding:2px 8px;border:1.5px solid var(--border);border-radius:var(--r-xs);font-size:12px;}
#mockTimer.mock-low{color:var(--err);}
.mock-read-text{font-size:1.1rem;line-height:2;}
.mock-story{margin-bottom:1rem;padding:12px 14px;}
.mock-story summary{cursor:pointer;font-weight:900;}
.mock-verdict{text-align:left;margin-bottom:1.2rem;border-left:5px solid var(--border)!important;}
.mock-verdict.ok{border-left-color:var(--ok)!important;}.mock-verdict.ok .mock-verdict-txt{color:var(--ok);}
.mock-verdict.bad{border-left-color:var(--err)!important;}.mock-verdict.bad .mock-verdict-txt{color:var(--err);}
.mock-secrow{display:flex;gap:10px;align-items:baseline;font-size:13px;font-weight:700;padding:3px 0;}
.mock-secrow span:first-child{flex:1;}
.mock-under{color:var(--err);}
.mock-min{font-size:12px;color:var(--muted);min-width:56px;text-align:right;}
/* підручники */
.tb-chip{font-size:12px;font-weight:800;padding:2px 7px;border:1.5px solid var(--border);border-radius:var(--r-xs);color:var(--muted);white-space:nowrap;}
.tb-chip.on{border-color:var(--accent-2);color:var(--ink);}
.tb-sel{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;margin-bottom:.8rem;flex-wrap:wrap;}
.tb-sel select{min-height:36px;padding:4px 10px;border:var(--brutal-border);border-radius:var(--r-xs);background:var(--card);color:var(--ink);font:inherit;}
.tb-note{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:.8rem;}
.tb-chips{display:inline-flex;gap:5px;flex-wrap:wrap;}
.tb-row{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;margin-bottom:.8rem;}
.tb-row .tb-sel{margin-bottom:0;}
.tb-hint{font-size:12px;font-weight:700;color:var(--muted);}
.tts-set{display:flex;flex-direction:column;gap:.6rem;}
.tts-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:800;}
.tts-row select{min-height:36px;max-width:100%;padding:4px 10px;border:var(--brutal-border);border-radius:var(--r-xs);background:var(--card);color:var(--ink);font:inherit;font-size:13px;}
.tts-rates{display:flex;gap:6px;flex-wrap:wrap;}
.tts-hint{font-size:12px;color:var(--muted);font-weight:600;line-height:1.5;margin:0;}
.rd-btn.on{background:var(--accent-2)!important;color:var(--on-accent-2)!important;border-color:var(--accent-2)!important;}
/* компактний прогрес у шапці розділу (замість «ПРОГРЕС / смуга / 0%» у три рядки) */
.ph-prog{display:flex;align-items:center;gap:var(--sp-3);width:180px;align-self:center;}
.ph-prog .pb{flex:1;height:8px;}
#ph-pct{font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;min-width:3ch;text-align:right;}
@media (max-width:600px){.ph-prog{width:100%;}}
/* «Читання»: картки однакової ширини (кнопка всередині .ink-обгортки не розтягувалась у комірці сітки) */
.rd-list>.ink,.rd-list>.rd-card{width:100%;}
.rd-list .rd-card{width:100%;height:100%;}
.rd-locked{margin-bottom:0;}
/* граматика на телефоні: назва правила на всю ширину, позначки й кнопка — рядком нижче */
@media (max-width:600px){
  .gb-head>:is(h1,h3){flex:1 1 calc(100% - 24px);}
}
@media (max-width:600px){.gb-head>:is(h1,h3){flex:1 1 calc(100% - 24px)!important;}}
.ink:has(>.rd-locked),.rd-locked{display:flex;width:100%;}
/* Сторінкові колонки (списки, довідники, налаштування) вирівнюємо по лівому краю разом із шапкою розділу —
   раніше вузька колонка стояла по центру під лівою шапкою, і лівий край «стрибав» між екранами.
   Вузькі центровані картки питань (≤560px) і героїчні екрани з text-align:center лишаються по центру. */
@media (min-width:901px){
  #ca>:is([style^="max-width:640px;margin:0 auto"],[style^="max-width:700px;margin:0 auto"],[style^="max-width:720px;margin:0 auto"],[style^="max-width:760px;margin:0 auto"],[style^="max-width:820px;margin:0 auto"],[style^="max-width:920px;margin:0 auto"]):not([style*="text-align:center"]){margin-left:0!important;}
}
/* «Про застосунок» */
.about .ab-lead{font-size:14px;line-height:1.65;color:var(--ink);margin:0 0 var(--sp-8);max-width:62ch;}
.about .ab-h{font-size:1.1rem;font-weight:900;margin:var(--sp-10) 0 var(--sp-5);display:flex;align-items:center;}
.about .ab-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3);}
.about .ab-steps details,.about .ab-det{background:var(--surface);border:var(--brutal-border)!important;border-radius:var(--r-xs)!important;}
.about .ab-steps summary,.about .ab-det summary{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5) var(--sp-7);cursor:pointer;list-style:none;min-height:44px;font-size:14px;}
.about summary::-webkit-details-marker{display:none;}
.about summary>b,.about summary>span:not(.ab-n):not(.icn){flex:1;font-weight:800;text-align:left;}
.about summary>.icn:last-child{margin:0;transition:transform var(--dur-base) var(--ease);color:var(--muted);}
.about details[open]>summary>.icn:last-child{transform:rotate(180deg);}
.about .ab-n{font-weight:900;color:var(--crimson);min-width:1.4em;font-size:1.1rem;}
.about .ab-steps p,.about .ab-body p{font-size:13px;line-height:1.65;color:var(--muted);margin:0;padding:0 var(--sp-7) var(--sp-7);}
.about .ab-steps p{padding-left:calc(var(--sp-7) + 1.4em + var(--sp-5));}
.about .ab-body p+p{margin-top:-.4rem;}
.about .ab-det.crd{padding:0;}
.about .ab-stack{display:flex;flex-direction:column;gap:var(--sp-3);}
.about .ab-row{display:flex;flex-direction:column;gap:2px;font-size:13px;}
.about .ab-row b{display:inline-flex;align-items:center;}
.about .ab-row span{color:var(--muted);}
.about .ab-row span:first-letter{text-transform:uppercase;}
.about .ab-tip{display:flex;gap:var(--sp-3);font-size:12px;line-height:1.6;color:var(--muted);margin:var(--sp-9) 0 0;}
.about .ab-row span:first-letter{text-transform:none;}

/* ══════ РИТМ СТОРІНКИ (єдина шкала вертикальних відступів) ══════
   Правило вирівнювання: робочі екрани (списки, довідники, налаштування) — шапка зліва;
   екрани-«входи» (головна, старт Фокусу/Курсу, результати, порожні стани) — по центру.
   Відступи: заголовок→підзаголовок 4 · шапка→вміст 24 · абзац→кнопки/список 16 ·
   перед секцією 32 · заголовок секції→вміст 12 · між картками списку 10(12 для кнопок-карток). */
:root{--rh-sub:4px;--rh-header:24px;--rh-block:16px;--rh-section:32px;--rh-sec-title:12px;--rh-list:10px;}
#ph{margin-bottom:var(--rh-header)!important;}
#ph:empty,#tfr:empty{display:none!important;}
#ph h1{margin:0!important;}
#ph-sub{margin-top:var(--rh-sub)!important;}
#ph:not(:empty)+#tfr{margin-top:calc(var(--rh-block) - var(--rh-header))!important;}
#tfr{margin-bottom:var(--rh-header)!important;}
/* секційні заголовки всередині сторінки (не заголовки карток) */
#ca>div>:is(h2,h3):not(.rd-lvh),#ca>div>div>:is(h2,h3).kn-h2{margin-top:var(--rh-section)!important;margin-bottom:var(--rh-sec-title)!important;}
#ca>div>:is(h2,h3):first-child{margin-top:0!important;}
/* вступний абзац сторінки → далі */
#ca>div>p:first-child,#ca>div>div:first-child:not([class]):not([style*="display:flex"]){margin-bottom:var(--rh-block)!important;}
/* списки карток */
#ca div[style*="flex-direction:column"]:has(>.crd){gap:var(--rh-list)!important;}
#ca div[style*="flex-direction:column"]:has(>.ink>button.crd,>button.crd){gap:12px!important;}
/* вступний абзац робочого екрана — один стиль скрізь (раніше 12px/700, 13px/400 і 16px упереміш) */
#ca>div:not([style*="text-align:center"])>p:not([class]),
#ca>div:not([style*="text-align:center"])>div:first-child:not([class]):not([style*="display:flex"]):not(:has(*:is(div,button,h2,h3))){
  font-size:14px!important;font-weight:500!important;line-height:1.6!important;color:var(--muted)!important;max-width:68ch;}
/* Пілюлі рівня N5-N1 у фільтрі: глобальний необрутал для button{} (кут 4px + тінь) перебивав їхній
   інлайн border-radius:999px — повертаємо справжню пілюлю, без тіні й без «натискання». */
button.lvl-pill{border-radius:var(--r-pill)!important;box-shadow:none!important;min-height:32px;padding:4px 14px!important;gap:5px;transform:none!important;}
@media (hover:hover){button.lvl-pill[aria-pressed="false"]:hover{background-color:color-mix(in srgb,currentColor 10%,transparent)!important;}}
button.lvl-pill:active{transform:scale(.97)!important;}
/* бейдж рівня в картках — та сама пілюля, менша (раніше бокові 6px робили з «N5» майже коло) */
.bdg{display:inline-flex;align-items:center;justify-content:center;padding:2px 10px;line-height:1.3;border-width:1.5px;min-width:0;white-space:nowrap;}
/* однакова ширина пілюль N5…N1 (у «N1» вужча цифра) — фіксована ширина, текст по центру */
.bdg:is(.bn5,.bn4,.bn3,.bn2,.bn1){box-sizing:border-box;width:3.6em;padding-left:0!important;padding-right:0!important;justify-content:center;text-align:center;font-variant-numeric:tabular-nums;}
button.lvl-pill{min-width:4.8em;justify-content:center;font-variant-numeric:tabular-nums;}
/* картки розділів на головній: вміст по центру; іконки однакової висоти (あ/漢 і SVG різнились —
   через це назви стояли на різній висоті), лічильник-пілюля притиснута до низу, щоб ряди збігались */
.home-card{display:flex!important;flex-direction:column;align-items:center;text-align:center!important;}
.home-card .home-icon{height:40px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-5);}
.home-card .home-sub{margin-bottom:var(--sp-5);}
.home-card .home-stat{margin-top:auto;}
.home-card .home-icon .icn{margin:0!important;vertical-align:middle;}
.about .ab-switch{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-7);}
.about .ab-switch>div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.about .ab-switch>button{flex-shrink:0;}
@media (max-width:480px){.about .ab-switch{flex-direction:column;align-items:stretch;}.about .ab-switch>button{justify-content:center;}}
/* Текст на помаранчевому (--accent-2 #FF5C00): чистий чорний без обводки. Контраст ~6.5:1 (AA).
   Раніше: білий (2.8:1, нечитабельно) → чорний із чорною text-shadow-обводкою (потовщувала й розмивала літери). */
:is(.br,.kt-btn.primary,.err-btn.primary,.rd-btn.on,.rd-w.on){color:#000!important;text-shadow:none!important;font-weight:800!important;}
:is(.br,.kt-btn.primary,.err-btn.primary,.rd-btn.on) *{color:inherit!important;text-shadow:none!important;}
/* підпис усередині кнопки-перемикача не має успадковувати сірий колір опису рядка */
.about .ab-row button span{color:inherit!important;}
/* ══════ КНОПКИ ДІЇ: темно-синій + білий текст (замість тексту на помаранчевому) ══════
   Помаранчевий #FF5C00 лишається брендовим акцентом (лого, лічильники, виділення), але для
   заливки з текстом не годиться: білий 2.8:1, чорний читався важко. Темно-синій: білий ~10:1. */
:root{--action:#1E3A8A;--action-hover:#1E40AF;--on-action:#FFFFFF;}
[data-theme="dark"]{--action:#3B5BDB;--action-hover:#4C6EF5;--on-action:#FFFFFF;}
:is(.br,.kt-btn.primary,.err-btn.primary,.rd-btn.on,.rd-w.on){background:var(--action)!important;border-color:var(--action)!important;color:var(--on-action)!important;text-shadow:none!important;font-weight:700!important;}
.rd-body .rd-w.on{background:var(--action)!important;color:var(--on-action)!important;}

/* опис сторінки над кнопкою дії (назва → опис → кнопка → вміст) */
.page-lead{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rh-block);width:100%;}
.page-intro{font-size:14px;font-weight:500;line-height:1.6;color:var(--muted);max-width:68ch;margin:0;}
/* варіанти відповіді у вікторині — на всю ширину (кнопка в .ink-обгортці стискалась під довжину слова) */
.ink:has(>button.qo){display:flex;width:100%;}
button.qo{width:100%;justify-content:flex-start;text-align:left;}
/* ══════ ЄДИНИЙ ЧІП РІВНЯ (lvChip) — еталон: бейдж у «Вимові»/«Читанні» ══════ */
.lv-n5{--lv:var(--lv5);--lvf:var(--lv5-fill);} .lv-n4{--lv:var(--lv4);--lvf:var(--lv4-fill);} .lv-n3{--lv:var(--lv3);--lvf:var(--lv3-fill);}
.lv-n2{--lv:var(--lv2);--lvf:var(--lv2-fill);} .lv-n1{--lv:var(--lv1);--lvf:var(--lv1-fill);} .lv-all{--lv:var(--ink);--lvf:var(--ink);}
button.lvl-chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;
  min-width:4.6em;height:34px;padding:0 14px!important;border-radius:var(--r-pill)!important;
  border:2px solid var(--lv)!important;background:transparent!important;color:var(--lv)!important;box-shadow:none!important;
  font-family:'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;font-weight:700;font-size:13px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;cursor:pointer;transform:none!important;transition:background-color var(--dur-fast),color var(--dur-fast);}
button.lvl-chip.on{background:var(--lvf)!important;border-color:var(--lvf)!important;color:#fff!important;}
button.lvl-chip.lv-all.on{color:var(--bg)!important;}
button.lvl-chip .icn{margin:0;opacity:.8;}
@media (hover:hover){button.lvl-chip:not(.on):hover{background:color-mix(in srgb,var(--lv) 12%,transparent)!important;}}
button.lvl-chip:active{transform:scale(.97)!important;}
button.lvl-chip:focus-visible{outline:2px solid var(--lv);outline-offset:3px;}
/* великий варіант — екрани-входи («Курс», «Режим фокусу») */
button.lvl-chip.lvl-chip-lg{height:44px;min-width:0;width:100%;font-size:15px;}
.lvl-row{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:440px;margin-left:auto;margin-right:auto;}
/* замок закритого рівня — кружок на правому верхньому краї; підпис чіпа не зсувається */
button.lvl-chip{position:relative;overflow:visible;}
.lvl-lock{position:absolute;top:-7px;right:-5px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1.5px solid var(--lv);color:var(--lv);line-height:0;pointer-events:none;}
.lvl-lock .icn{margin:0!important;vertical-align:0!important;}
button.lvl-chip.on .lvl-lock{background:var(--lvf);border-color:var(--bg);color:#fff;}
/* чіпи рівнів ширші (запит користувача): фільтри 4.6→5.6em, бейджі в картках 3.6→4.3em, ряд «Курс/Фокус» 440→540px */
button.lvl-chip{min-width:5.6em;padding:0 18px!important;}
.bdg:is(.bn5,.bn4,.bn3,.bn2,.bn1){width:4.3em;}
.lvl-row{max-width:540px!important;gap:10px!important;}
/* ПРЕВʼЮ (лише «Режим фокусу»): чіп рівня в розмірі кнопок «10/20/30» — 38px, шрифт 13px, менший замок */
.lvl-set{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
button.lvl-chip.lvl-chip-sm{height:38px;width:78px;min-width:0;padding:0!important;font-size:13px;} /* 90×44 → те саме співвідношення (~2.05:1) при висоті 38 */
button.lvl-chip.lvl-chip-sm .lvl-lock{top:-6px;right:-4px;width:15px;height:15px;border-width:1.5px;}
button.lvl-chip.lvl-chip-sm .lvl-lock .icn{--s:8px!important;width:8px!important;height:8px!important;}
/* превʼю −20%: 78×38 → 62×30; шрифт 12px (нижня межа читабельності застосунку), замок 12px */
button.lvl-chip.lvl-chip-sm{height:30px;width:62px;font-size:12px;border-width:1.5px!important;}
button.lvl-chip.lvl-chip-sm .lvl-lock{top:-5px;right:-3px;width:12px;height:12px;border-width:1px;}
button.lvl-chip.lvl-chip-sm .lvl-lock .icn{--s:7px!important;width:7px!important;height:7px!important;}
/* ══════ РОЗМІР ЧІПА РІВНЯ — фінал (затверджено на «Режимі фокусу»): 62×30, шрифт 12px, замок 12px ══════
   Один розмір скрізь: «Курс», «Режим фокусу», фільтр «Рівень», «Фільтр вікторини». */
button.lvl-chip{height:30px!important;width:62px!important;min-width:0!important;padding:0!important;font-size:12px!important;border-width:1.5px!important;}
button.lvl-chip .lvl-lock{top:-5px;right:-3px;width:12px;height:12px;border-width:1px;}
button.lvl-chip .lvl-lock .icn{--s:7px!important;width:7px!important;height:7px!important;}
.lv-all.lvl-chip{width:auto!important;padding:0 12px!important;}
/* невидима зона натискання ≥44px на сенсорних екранах — вигляд не змінюється */
@media (pointer:coarse){button.lvl-chip::after{content:"";position:absolute;inset:-7px -2px;}}
.lvl-row.lvl-set{display:flex!important;justify-content:center;gap:8px!important;max-width:none!important;}
/* Компактний рядок дій над списком (затверджено 2026-09-22): 34px, 12px, без іконок, на всю ширину рядка;
   порядок: Повторення → Флеш-картки → Вікторина → Фільтр вікторини. Слова, канджі, абетка, граматика. */
.qz-tools.compact{flex-wrap:nowrap!important;gap:6px!important;}
.qz-tools.compact .ink{margin-right:0!important;}
.qz-tools.compact button:is(.bn,.br){min-height:34px!important;height:34px;padding:0 11px!important;font-size:12px!important;white-space:nowrap;letter-spacing:-.02em;}
.qz-tools.compact button:is(.bn,.br) .icn{--s:12px;width:12px;height:12px;}
.qz-tools.compact button.bn.on{background:var(--ink)!important;color:var(--bg)!important;}
.qz-tools.compact button.bn .icn{display:none;}
.qz-tools.compact button:is(.bn,.br){padding:0 10px!important;}
/* v3: без іконок на всіх трьох; кнопки заповнюють рядок на всю ширину (як ряд «РІВЕНЬ») */
.qz-tools.compact{width:100%;flex-wrap:wrap!important;gap:8px!important;}
.qz-tools.compact>.ink,.qz-tools.compact>button{flex:1 1 auto;display:flex;}
.qz-tools.compact>.ink>button,.qz-tools.compact>button{width:100%;justify-content:center;}
.qz-tools.compact button .icn{display:none!important;}
.qz-tools.compact button:is(.bn,.br){padding:0 12px!important;}
/* v4: «Вікторина» перед «Фільтром вікторини» */
.qz-tools.compact>:has([data-action="startReview"]),.qz-tools.compact>[data-action="startReview"]{order:0;}
.qz-tools.compact>:has([data-action="startFC"]),.qz-tools.compact>[data-action="startFC"]{order:1;}
.qz-tools.compact>:has([data-action="startQz"]),.qz-tools.compact>[data-action="startQz"]{order:2;}
.qz-tools.compact>:has([data-action$="FltOpen"]),.qz-tools.compact>[data-action$="FltOpen"]{order:3;}
.qz-tools.compact>:has([data-action="toggleSbMode"]),.qz-tools.compact>[data-action="toggleSbMode"]{order:1;}
/* одиночна кнопка «Вікторина» під описом розділу — теж без іконки, як у рядку дій */
.page-actions button.br .icn{display:none;}
.qz-tools.compact button.bg{min-height:34px!important;height:34px;padding:0 12px!important;font-size:12px!important;white-space:nowrap;letter-spacing:-.02em;}
/* Сайдбар: пункти поза згортними секціями лежать прямо в flex-колонці висотою 100% і браузер
   стискав їх до min-height 44px (опис «Граматики» вилазив, а сусіди у секціях були вищими).
   Забороняємо стискання + явний міжрядковий інтервал, щоб висота пункту залежала лише від к-сті рядків. */
#sb .ni{flex-shrink:0;line-height:1.3;}
#sb .ni .sub{line-height:1.35;margin-top:2px;}
/* Мобільний топ-бар: «Увійти/Реєстрація» центрувались абсолютно відносно всього бару й на вузьких
   екранах налазили на кнопки меню/пошуку. ≤420px — у звичайному потоці між ними (по центру вільного
   місця); ≤359px — лише «Увійти» (з того самого вікна є перемикач на реєстрацію). */
@media (max-width:420px){
  #mbarAuth{position:static!important;transform:none!important;margin:0 auto!important;min-width:0;gap:6px!important;}
  #mbarAuth .flat-btn{padding:6px 10px!important;}
  .mbar>.icn-btn:last-child{margin-left:0!important;}
}
@media (max-width:359px){
  #mbarAuth [data-arg0="up"]{display:none!important;}
}
.auth-tight #mbarAuth [data-arg0="up"]{display:none!important;}
/* кнопки-перемикачі сайдбару: іконка й підпис завжди разом по центру, навіть якщо підпис переноситься */
#sb .sb-toggle{justify-content:center;}
#sb .sb-toggle>span:last-child{text-align:center;min-width:0;}
/* нижні кнопки сайдбару: іконки в одну колонку, підписи з однієї лінії (раніше кожна центрувалась
   окремо — іконка й початок тексту «гуляли» залежно від довжини підпису) */
#sb .sb-toggle{justify-content:flex-start!important;padding-left:var(--sp-7)!important;padding-right:var(--sp-7)!important;}
#sb .sb-toggle>span:last-child{text-align:left!important;}
#sb .sb-toggle>.ic,#sb .sb-toggle>span:first-child{width:16px;flex-shrink:0;display:inline-flex;justify-content:center;}
/* …уточнення: групу центруємо, підпис фіксованої ширини (--sbt-w, найдовший із двох) → іконки на одній вертикалі */
#sb .sb-toggle{justify-content:center!important;}
#sb .sb-toggle>span:last-child{width:var(--sbt-w,auto);text-align:left!important;white-space:nowrap;}

/* Пробний іспит: пропуски для 並び替え (★) і 文章の文法 */
.mock-order{line-height:2.2;}
.mock-blank{display:inline-block;min-width:3.2em;border-bottom:2px solid var(--ink);margin:0 .25em;text-align:center;vertical-align:baseline;line-height:1.2;}
.mock-blank.star{font-size:.9em;color:var(--crimson);border-bottom-color:var(--crimson);}
.mock-read-text .mock-blank{min-width:auto;padding:0 .15em;border-bottom-width:1.5px;font-weight:800;}
.mock-read-text .mock-blank.on{background:var(--accent-2);color:var(--on-accent-2,var(--ink));border-radius:var(--r-xs);}

/* ══════ Нативний застосунок (Capacitor): клас .native ставить platform.js ══════
   Google OAuth у вбудованому WebView блокує сам Google (disallowed_useragent) — ховаємо
   кнопку й розділювач «або» під нею, доки не буде нативного входу (Google/Apple). */
/* Кнопку під час рендеру обгортає span.ink — тому ховаємо обгортку і розділювач після неї. */
.native [data-action="authSignInWithGoogle"],
.native .ink:has(>[data-action="authSignInWithGoogle"]),
.native .ink:has(>[data-action="authSignInWithGoogle"])+div{display:none!important}

/* ══════ iPhone: підказка «встановити з браузера» + заявка на App Store (ui.js _iosHintHtml) ══════ */
.ios-hint{position:relative;text-align:left;margin-bottom:1.2rem;}
.ios-hint-x{position:absolute;top:var(--sp-3);right:var(--sp-3);width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--muted);cursor:pointer;border-radius:var(--r-sm);}
.ios-hint-title{font-size:1rem;font-weight:900;margin:0 44px var(--sp-3) 0;display:flex;align-items:center;}
.ios-hint-body{font-size:13px;line-height:1.55;color:var(--muted);font-weight:600;margin:0 0 var(--sp-5);}
.ios-hint-steps{list-style:none;counter-reset:ios;margin:0 0 var(--sp-7);padding:0;display:grid;gap:var(--sp-3);}
.ios-hint-steps li{counter-increment:ios;display:flex;align-items:center;gap:var(--sp-4);font-size:14px;font-weight:800;}
.ios-hint-steps li::before{content:counter(ios);flex:none;width:22px;height:22px;border-radius:var(--r-pill);background:var(--ink);color:var(--card);
  font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;}
.ios-hint-ic{flex:none;width:34px;height:34px;border-radius:var(--r-sm);background:var(--surface);color:#0A84FF;display:flex;align-items:center;justify-content:center;}
.ios-hint-label{display:block;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:var(--sp-2);}
.ios-hint-row{display:flex;gap:var(--sp-3);}
.ios-hint-row input{flex:1;min-width:0;padding:var(--sp-4) var(--sp-5);border:var(--brutal-border);border-radius:var(--r-xs);
  font:600 14px 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;background:var(--surface);color:var(--text);box-sizing:border-box;}
.ios-hint-row input:focus{outline:none;box-shadow:var(--brutal-shadow);}
.ios-hint-row .bcta{flex:none;background:var(--action);color:var(--on-action);border:none;padding:0 var(--sp-7);min-height:44px;
  border-radius:var(--r-xs);font-weight:900;font-size:13px;}
.ios-hint-msg{margin:var(--sp-3) 0 0;font-size:13px;font-weight:800;color:var(--err);}
.ios-hint-msg.ok{color:var(--ok);}
.ios-hint [hidden]{display:none!important;}

/* ══════ Акценти з лендінгу (hub/, 2026-09-25) ══════
   Японський «кікер» над заголовками, головна з крапковою сіткою й підкресленням-«мазком»,
   Курс як лінія метро в кольорі рівня, табло відправлень для відліку до JLPT і таймера іспиту. */
.jp-kicker{margin:0 0 6px;font:900 13px/1.2 'Noto Sans JP',sans-serif;letter-spacing:.3em;color:var(--crimson);}
#ph .jp-kicker{margin-bottom:8px;}

/* Головна */
.home-wrap{position:relative;isolation:isolate;}
.home-wrap::before{content:'';position:absolute;z-index:-1;left:-24px;right:-24px;top:-2rem;height:300px;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent);}
.home-wrap .jp-kicker{margin-top:.2rem;}
.home-greet,h1.home-greet{font-size:clamp(2rem,5.2vw,2.9rem)!important;font-weight:900;letter-spacing:-.03em;line-height:1.08;margin-bottom:.55rem;}
.home-greet span{text-decoration:underline var(--accent-2);text-decoration-thickness:.15em;text-underline-offset:.08em;
  text-decoration-skip-ink:all;animation:greetSwipe .7s .15s var(--ease) both;}
@keyframes greetSwipe{from{text-decoration-color:transparent;}}

/* Курс — лінія метро: перегони між уроками в кольорі рівня, «станції» з кільцем */
.path-line{--line:var(--lv5-fill);}
.path-line.path-n4{--line:var(--lv4-fill);} .path-line.path-n3{--line:var(--lv3-fill);}
.path-line.path-n2{--line:var(--lv2-fill);} .path-line.path-n1{--line:var(--lv1-fill);}
.path-line .path-node{position:relative;}
.path-line .path-node:not(:last-child)::after{content:'';position:absolute;z-index:1;left:calc(var(--sp-6) + 12px);
  top:calc(100% + 2px);width:10px;height:9px;background:var(--line);border-inline:2px solid var(--ink);}
.path-line .path-node:is(.current,.locked):not(:last-child)::after{background:color-mix(in srgb,var(--line) 40%,var(--surface));}
.path-line .path-node.done{border-color:var(--line);}
.path-line .path-node.done .path-num{background:var(--line);color:#fff;}
.path-line .path-node.current .path-num{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 5px var(--line),0 0 0 2px var(--ink);}

/* Табло відправлень: відлік днів до JLPT і таймер пробного іспиту */
.jlpt-board .board-days,.tour-art .board-days{min-width:58px;padding:7px 10px 5px;text-align:center;border:2px solid #000;border-radius:6px;
  font:800 34px/1 'Big Shoulders Display','Unbounded','Unbounded Fallback',sans-serif;font-variant-numeric:tabular-nums;color:#FFC940;
  background:linear-gradient(#161616 0 49%,#000 49% 51%,#1f1f1f 51%);box-shadow:2px 2px 0 var(--ink-shadow);}
#mockTimer{display:inline-block;padding:4px 9px 3px;border-radius:4px;background:#111;color:#FFC940;
  font:800 19px/1 'Big Shoulders Display','Unbounded','Unbounded Fallback',sans-serif;letter-spacing:.04em;font-variant-numeric:tabular-nums;}
#mockTimer.mock-low{color:#FF7B7B;}
@media (prefers-reduced-motion:reduce){.home-greet span{animation:none;}}
/* Пошук: категорія — випадаючий список (замість прокрутки чипів) */
.gs-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 1px 8px;}
.gs-filters .gs-lvs{padding:0;}
.gs-select{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border:2px solid var(--border);border-radius:var(--r-xs);
  background:var(--surface);box-shadow:2px 2px 0 var(--ink-shadow);font-size:13px;font-weight:800;cursor:pointer;}
.gs-select .icn{margin:0;pointer-events:none;}
.gs-select select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--text);font:inherit;padding:6px 2px;cursor:pointer;min-width:7.5em;}
.gs-select select:focus-visible{outline:none;}
.gs-select:focus-within{outline:2px solid var(--accent-2);outline-offset:2px;}

/* ══════ Знайомство з можливостями (core/tour.js) — стиль лендінгу ══════ */
.ab-tour{margin:.2rem 0 1.4rem;}
html.tour-open{overflow:hidden;}
.tour-ov{display:none;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;padding:16px;
  background:rgba(10,10,20,.6);backdrop-filter:blur(2px);}
.tour-box{width:100%;max-width:440px;max-height:calc(100dvh - 32px);overflow:auto;background:var(--card);color:var(--ink);
  border:2px solid var(--border);border-radius:18px;box-shadow:6px 6px 0 var(--ink-shadow);padding:18px 20px 20px;text-align:center;}
.tour-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.tour-step{font:800 12px/1 'Unbounded','Unbounded Fallback',sans-serif;letter-spacing:.08em;color:var(--muted);}
.tour-skip{background:none;border:0;color:var(--muted);font:700 12px/1 inherit;padding:10px 4px;cursor:pointer;min-height:36px;}
.tour-skip:hover{color:var(--ink);text-decoration:underline;}
.tour-art{height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;margin-bottom:14px;
  border:2px solid var(--border);border-radius:12px;position:relative;overflow:hidden;
  background-color:var(--paper);background-image:radial-gradient(color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 1.3px);background-size:18px 18px;}
.tour-title{font:900 22px/1.2 'Unbounded','Unbounded Fallback',sans-serif;letter-spacing:-.02em;margin:0 0 8px;}
.tour-body{min-height:6.4em;font-size:14px;line-height:1.6;color:var(--muted);font-weight:600;margin:0 auto 14px;max-width:34em;}
.tour-dots{display:flex;justify-content:center;gap:4px;margin-bottom:14px;}
.tour-dots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative;}
.tour-dots button::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--border);opacity:.35;transition:width .2s var(--ease),opacity .2s;}
.tour-dots button.on::after{width:20px;margin-left:-10px;border-radius:5px;background:var(--accent-2);opacity:1;}
.tour-nav{display:flex;gap:10px;}
/* Кнопки туру — як на екранах першого запуску (screens.css .svc-btn/.svc-back): жовта головна на всю ширину + квадратна «←» */
.tour-box .tour-next{flex:1;min-height:52px;padding:0 18px;border:2px solid var(--ink)!important;border-radius:6px!important;background:var(--accent-2)!important;color:#000!important;
  font:800 15px/1.2 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;box-shadow:3px 3px 0 var(--ink-shadow)!important;cursor:pointer;transition:transform .12s,box-shadow .12s;}
.tour-box .tour-next:active{transform:translate(3px,3px)!important;box-shadow:1px 1px 0 var(--ink-shadow)!important;}
.tour-box .tour-back{flex:none;width:52px;min-height:52px;padding:0;border:2px solid var(--ink)!important;border-radius:6px!important;background:var(--surface)!important;color:var(--ink)!important;
  box-shadow:none!important;font:800 20px/1 'Manrope','Manrope Fallback',sans-serif!important;cursor:pointer;}
.tour-box .tour-back:disabled{display:none;}
/* Телефон: тур — нижній лист, кнопки завжди на тому самому місці під великим пальцем */
@media (max-width:560px){
  .tour-ov{align-items:flex-end;padding:0 0 env(safe-area-inset-bottom);}
  .tour-box{max-width:none;border-radius:18px 18px 0 0;border-bottom:0;box-shadow:none;padding-bottom:calc(20px + env(safe-area-inset-bottom));}
}
/* мініатюри */
.tr-line{display:flex;width:78%;height:10px;border-block:2px solid var(--ink);}
.tr-line i{flex:1}.tr-line .s5{background:var(--lv5-fill)}.tr-line .s4{background:var(--lv4-fill)}.tr-line .s3{background:var(--lv3-fill)}.tr-line .s2{background:var(--lv2-fill)}.tr-line .s1{background:var(--lv1-fill)}
.tr-stations{display:flex;justify-content:space-between;width:84%;margin-top:-34px;}
.tr-stations b{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--card);border:5px solid var(--lv5-fill);box-shadow:0 0 0 2px var(--ink);font:900 11px/1 'Unbounded','Unbounded Fallback',sans-serif;}
.tr-stations b:nth-child(2){border-color:var(--lv4-fill)}.tr-stations b:nth-child(3){border-color:var(--lv3-fill)}.tr-stations b:nth-child(4){border-color:var(--lv2-fill)}.tr-stations b:nth-child(5){border-color:var(--lv1-fill)}
.tr-card{position:relative;z-index:1;width:92px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--card);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink-shadow);transform:rotate(4deg);}
.tr-card span{font-size:12px;font-weight:700;color:var(--muted)}.tr-card b{font:900 48px/1 'Noto Sans JP',sans-serif}
.tr-card2{position:absolute;z-index:0;background:var(--lv5-fill);transform:rotate(-8deg) translate(-14px,4px);}
.tr-tiles{display:flex;gap:10px}
.tr-tiles b{width:52px;height:52px;display:grid;place-items:center;background:var(--card);border:2px solid var(--ink);border-radius:8px;
  box-shadow:3px 3px 0 var(--ink-shadow);font:900 26px/1 'Noto Sans JP',sans-serif;}
.tr-tiles b:nth-child(odd){background:var(--accent-2);color:#000}
.tour-art .tr-days{font-size:44px;min-width:78px}
.tr-clock{padding:4px 10px 3px;border-radius:4px;background:#111;color:#FFC940;font:800 20px/1 'Big Shoulders Display',sans-serif;letter-spacing:.04em}
.tr-search{display:flex;align-items:center;gap:10px;width:84%;padding:10px 12px;background:var(--card);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink-shadow);}
.tr-search em{flex:1;text-align:left;font-style:normal;font-weight:800;font-size:14px}
.tr-search kbd{font:800 12px/1 'Unbounded','Unbounded Fallback',sans-serif;padding:4px 7px;border:1.5px solid var(--ink);border-radius:4px}
.tr-heat{display:grid;grid-template-columns:repeat(14,14px);grid-auto-rows:14px;gap:4px}
.tr-heat i{border-radius:3px;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);background:var(--card)}
.tr-heat i.h1{background:color-mix(in srgb,var(--accent-2) 30%,var(--card))}.tr-heat i.h2{background:color-mix(in srgb,var(--accent-2) 55%,var(--card))}
.tr-heat i.h3{background:color-mix(in srgb,var(--accent-2) 80%,var(--card))}.tr-heat i.h4{background:var(--accent-2)}
@media (prefers-reduced-motion:reduce){.tour-dots button::after{transition:none}}
/* глобальне «брутальне» правило для button не має чіпати службові кнопки туру */
.tour-box .tour-skip,.tour-box .tour-dots button{border:0!important;box-shadow:none!important;background:none!important;transform:none!important;min-width:0;}
.tour-box .tour-skip{padding:10px 4px!important;font:700 12px/1 'Manrope','Manrope Fallback',sans-serif!important;color:var(--muted)!important;}
.tour-box .tour-dots button::before{display:none!important;}

/* ══════ Налаштування ══════ */
.ab-to-settings{width:100%;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);margin-bottom:1.2rem;}
.ab-to-settings>span:first-of-type{flex:1;font-size:13px;color:var(--muted);font-weight:600;}
.ab-to-settings b{color:var(--ink);}
.settings .set-danger b .icn{color:var(--crimson);}
.settings .set-del-btn{color:var(--err)!important;border-color:var(--err)!important;}
.settings .set-row>div>b{display:block;margin-bottom:3px;}
.settings .set-row>div>span{display:block;}
/* Сайдбар: описи тонші за назву розділу, щоб не зливались (назва лишається жирною) */
#sb .ni .sub{font-weight:500;font-size:11px;margin-top:4px;}
:lang(my) #sb .ni .sub{font-size:12px;}   /* бірманське письмо дрібніше — лишаємо 12px */

/* Заголовок правила граматики — flex-елемент: без min-width:0 не стискається вужче за найдовше «слово»
   (someone/something/somewhere) і при збільшеному системному шрифті вилазив за екран (tools/android_layout.py). */
.gb-head>h3{min-width:0;overflow-wrap:anywhere;}

/* Налаштування → віджети (Android): три кнопки під описом, переносяться на вузькому екрані */
.set-widgets{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.set-widgets .flat-btn{white-space:nowrap;}
.set-wotd-time{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:700;font-size:13px;}
.set-wotd-time select{padding:6px 10px;border-radius:7px;border:1.5px solid var(--border);background:var(--card);color:var(--ink);font:inherit;min-height:36px;}

/* Автофокус у модалці після тапу/кліку — без focus-ring (fallback для браузерів без focus({focusVisible})) */
html:not(.kbd-nav) [aria-modal="true"] :focus-visible{outline:none;}

/* Віджет акаунта в сайдбарі: усі контроли однакової висоти 30px, без брутал-тіні
   (глобальний button{} з !important робив кнопки різного розміру). */
.acct{padding:10px;background:var(--sb-hover);border-radius:8px;display:flex;flex-direction:column;gap:8px;}
.acct-row{display:flex;align-items:center;gap:6px;}
.acct-name{flex:1;min-width:0;font-size:13px;font-weight:800;color:var(--sb-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-prem{flex-shrink:0;height:22px;display:inline-flex;align-items:center;background:var(--accent-1);color:var(--on-accent-1);font-size:11px;font-weight:900;letter-spacing:.04em;padding:0 8px;border-radius:999px;}
.acct-meta{font-size:12px;line-height:1.4;color:var(--sb-muted);font-weight:700;}
.acct .acct-btn,.acct .acct-ref{box-shadow:none!important;border:1.5px solid var(--sb-border)!important;border-radius:6px!important;background:transparent;font-weight:800;font-size:12px;}
.acct .acct-btn{flex-shrink:0;height:30px;padding:0 10px;color:var(--sb-text);}
.acct .acct-ref{display:flex;align-items:center;gap:6px;width:100%;min-height:30px;padding:4px 8px;text-align:left;color:var(--sb-muted);border-style:dashed!important;line-height:1.3;}
.acct .acct-ref .icn{flex-shrink:0;margin:0;}
.acct-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--sb-text);font-weight:800;}
.acct-input{flex:1;min-width:0;height:30px;box-sizing:border-box;padding:0 8px;border-radius:6px;border:1.5px solid var(--sb-border);background:transparent;color:var(--sb-text);font-size:12px;}
.acct .acct-btn:active,.acct .acct-ref:active{transform:translate(1px,1px);}

/* ══════ Бренд-акцент (затверджено 2026-10-07): жовтий з лого #FFDE25, ховер синій (колишня «Вікторина»). ══════
   --crimson (темний помаранчевий для ТЕКСТУ) перевизначено нижче в «Узгодженні з лендингом». */
:root{--accent-2:#FFDE25;--accent-2-hover:#1E3A8A;}
[data-theme="dark"]{--accent-2:#FFDE25;--accent-2-hover:#3B5BDB;}
@media (hover:hover){
  .tour-dots button.on:hover{background:var(--accent-2-hover)!important;}
  .rd-card:hover{border-color:var(--accent-2-hover);}
}
/* теплова карта активності лишається теплою (помаранчевою) — не жовто-блакитна */
.tr-heat i.h1{background:color-mix(in srgb,#FF5C00 30%,var(--card))}.tr-heat i.h2{background:color-mix(in srgb,#FF5C00 55%,var(--card))}
.tr-heat i.h3{background:color-mix(in srgb,#FF5C00 80%,var(--card))}.tr-heat i.h4{background:#FF5C00}
/* Знак лого: легке «кивання» при наведенні (сайдбар і верхній бар) */
@keyframes markWiggle{0%{transform:rotate(0) scale(1)}30%{transform:rotate(-12deg) scale(1.08)}55%{transform:rotate(8deg) scale(1.08)}78%{transform:rotate(-3deg) scale(1.03)}100%{transform:rotate(0) scale(1)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  :is(.logo-btn,#mbarLogo):hover img[src*="logo-mark"]{animation:markWiggle .7s cubic-bezier(.3,.7,.4,1);}
}

/* ══════ Узгодження з лендингом (2026-10-06) — щоб застосунок і littletsu.com виглядали одним продуктом ══════
   1) кнопки дії: жовті з чорним текстом, ховер блакитний (як .btn-accent на лендингу) замість темно-синіх;
   2) акцентний текст (--crimson): темно-зелений з номерного знака у світлій темі, жовтий у темній;
   3) тло темної теми — #0B0B0B, як на лендингу. Відкотити — видалити цей блок. */
:root{--action:#FFDE25;--action-hover:#1E3A8A;--on-action:#000000;--crimson:#0F7A33;}
[data-theme="dark"]{--action:#FFDE25;--action-hover:#3B5BDB;--on-action:#000000;--crimson:#FFDE25;--bg:#0B0B0B;--bg-rgb:11,11,11;}
:is(.br,.kt-btn.primary,.err-btn.primary){border-color:#000!important;font-weight:800!important;}
/* плашки статистики на картках головної: було червоне колишнього лого */
.home-stat{border-color:#0F7A33;color:#0F7A33;}
[data-theme="dark"] .home-stat{border-color:var(--ink-shadow);color:var(--ink-shadow);}
/* бейдж рівня не стискається поруч із довгим текстом (Про іспит: пігулка сплющувалась у коло) */
.bdg:is(.bn5,.bn4,.bn3,.bn2,.bn1){flex-shrink:0;}
/* 2026-10-11: жовті кнопки дії при ховері НЕ міняють заливку (раніше — синя), а «напівнатискаються»:
   зсув на 1px і тінь 2px — посередині між спокоєм (3px) і натисканням (1px). Як кнопка «Далі» в турі. */
/* жовті .kt-btn/.err-btn були пласкими — та сама брутальна тінь, що й у решти кнопок дії */
button:is(.kt-btn.primary,.err-btn.primary):not(:disabled){box-shadow:var(--btn-shadow)!important;}
button:is(.kt-btn.primary,.err-btn.primary):not(:disabled):active{transform:var(--btn-press)!important;box-shadow:var(--btn-shadow-press)!important;}
@media (hover:hover){
  :is(button.br,.kt-btn.primary,.err-btn.primary,.ios-hint-row .bcta,.svc-btn,#authOverlay.svc #authSubmitBtn,.tour-box .tour-next,.ls-nav .ls-next):not(:disabled):hover{
    background:var(--action)!important;color:var(--on-action)!important;
    transform:translate(1px,1px)!important;box-shadow:2px 2px 0 var(--ink-shadow)!important;}
  :is(button.br,.kt-btn.primary,.err-btn.primary,.ios-hint-row .bcta,.svc-btn,#authOverlay.svc #authSubmitBtn,.tour-box .tour-next,.ls-nav .ls-next):not(:disabled):hover:active{
    transform:translate(3px,3px)!important;box-shadow:0 0 0 var(--ink-shadow)!important;}
}
/* вогник стріку: помаранчевий у світлій темі (вогонь — теплий), жовтий у темній */
:root{--flame:#FF5C00;}
[data-theme="dark"]{--flame:var(--crimson);}
/* 2026-10-07: при ховері знак «вистрілює» жовто-блакитними променями (як у старому лого),
   промені гаснуть від середини назовні. Маска-кільце між --ray-in і --ray-out. */
@property --ray-in{syntax:'<percentage>';inherits:false;initial-value:0%;}
@property --ray-out{syntax:'<percentage>';inherits:false;initial-value:0%;}
.logo-btn{position:relative;isolation:isolate;}
.logo-btn:has(img[src*="logo-mark"])::before{content:'';position:absolute;left:12px;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  opacity:0;
  clip-path:inset(0 calc(50% - 15px) 0 0);   /* праворуч від знака — текстове лого: туди промені не заходять */
  background:repeating-conic-gradient(from -6deg,#FFDE25 0deg 12deg,transparent 12deg 22.5deg,#00B2CB 22.5deg 34.5deg,transparent 34.5deg 45deg);
  /* м'які краї кільця (а не різкі) — інакше на кінцях променів видно кола */
  -webkit-mask:radial-gradient(circle closest-side,transparent var(--ray-in),#000 calc(var(--ray-in) + 18%),#000 calc(var(--ray-out) - 18%),transparent var(--ray-out));
          mask:radial-gradient(circle closest-side,transparent var(--ray-in),#000 calc(var(--ray-in) + 18%),#000 calc(var(--ray-out) - 18%),transparent var(--ray-out));}
@keyframes raysBurst{
  0%{opacity:1;--ray-in:0%;--ray-out:30%;}
  40%{opacity:1;--ray-in:10%;--ray-out:100%;}
  100%{opacity:1;--ray-in:100%;--ray-out:100%;}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .logo-btn:has(img[src*="logo-mark"]):hover::before{animation:raysBurst .45s cubic-bezier(.15,.8,.3,1);}
}
/* розширена зона натискання динаміка (::after 32px) у чіпі не виходить за його межі — інакше вміст чіпа «переповнений» */
.rd-chip .spk-btn::after{inset:-4px -3px!important;width:auto!important;height:auto!important;}
/* Абетка: символ починається нижче рядка іконок (динамік зліва, чекбокс справа 3+18px) —
   інакше широкі складені знаки (きゃ, しゅ…) у вузьких клітинках залазили під чекбокс */
.kn-cell{padding-top:24px;}
@media(max-width:420px){.kn-cell{padding-top:23px;}}
/* Сторінка правила граматики — на всю ширину контентної області (раніше max-width:760px лишав порожню праву половину на десктопі) */
.gd-page{width:100%;}

/* ══════ Урок «Курсу» (core/lesson.js, 2026-10-11): вступ → граматика → слова → практика → підсумок ══════ */
.ls-wrap{max-width:560px;margin:1rem auto 0;}
.ls-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.ls-head-t{font:800 12px/1 'Unbounded','Unbounded Fallback',sans-serif;letter-spacing:.06em;color:var(--muted);}
.ls-head .ls-exit{padding:4px 10px;font-size:12px;}
.ls-steps{display:flex;gap:4px;list-style:none;margin:0 0 14px;padding:0;}
.ls-steps li{flex:1;padding-top:8px;border-top:4px solid color-mix(in srgb,var(--ink) 14%,transparent);font:700 11px/1.2 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;color:var(--muted);}
.ls-steps li.done{border-top-color:var(--ink);}
.ls-steps li.cur{border-top-color:var(--accent-2);color:var(--ink);font-weight:800;}
.ls-card{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:18px 18px 20px;}
.ls-kicker{margin:0 0 6px;font:800 12px/1.3 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
h1.ls-h{margin:0 0 6px;font:900 clamp(1.5rem,6vw,2rem)/1.2 'Unbounded','Unbounded Fallback','Noto Sans JP','Noto Sans Myanmar',sans-serif!important;letter-spacing:-.02em;}
.ls-sub{margin:0 0 12px;font-size:15px;font-weight:700;color:var(--ink);}
.ls-p{margin:0 0 14px;font-size:15px;line-height:1.7;}
.ls-h2{margin:18px 0 8px;font:900 12px/1.2 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;letter-spacing:.07em;color:var(--muted);}
.ls-exs{display:flex;flex-direction:column;gap:5px;}
/* шаблони правила — один список-таблиця: тонка рамка, рядки через лінію */
.ls-rules{display:flex;flex-direction:column;border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:8px;overflow:hidden;}
.ls-rules .rr{border-radius:0;background:none;}
.ls-rules .rr+.rr{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);}
.ls-exs .ej{display:flex;align-items:center;gap:6px;}
.ls-plan{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;}
.ls-plan li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:var(--paper);font-weight:700;font-size:14px;}
.ls-plan li span:nth-child(2){flex:1;}
.ls-plan b{font:800 14px/1 'Unbounded','Unbounded Fallback',sans-serif;}
.ls-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:var(--accent-2);color:#000;}
.ls-time{margin:12px 0 0;font-size:13px;font-weight:700;color:var(--muted);display:flex;align-items:center;}
.ls-form{display:grid;gap:6px;}
.ls-form-row{padding:9px 12px;border-radius:8px;background:var(--paper);}
.ls-form-t{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:3px;}
.ls-form-v{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:1.5;}
/* + і − однією гарнітурою, по центру квадратика висотою в рядок (а не по базовій лінії японського тексту) */
.ls-pm{flex:none;width:1.25em;height:1.5em;display:inline-flex;align-items:center;justify-content:center;
  font:800 16px/1 'Manrope','Manrope Fallback',sans-serif;color:var(--muted);}
.ls-table{overflow-x:auto;}
.ls-table table{width:100%;border-collapse:collapse;font-size:14px;}
.ls-table th{padding:6px 8px;text-align:left;font-size:12px;font-weight:800;color:var(--muted);}
.ls-table td{padding:7px 8px;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);}
.ls-table td:first-child{font-weight:700;color:var(--muted);white-space:nowrap;}
.ls-tip{margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--paper);font-size:14px;line-height:1.6;}
.ls-why{margin-top:3px;color:var(--muted);font-size:13px;}
.ls-bad{color:var(--err,#DC2626);font-weight:900;}.ls-good{color:var(--ok,#2e7d32);font-weight:900;}
.ls-tip s{opacity:.75;}
.ls-card .ls-more-btn{margin-top:16px;width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;border:2px dashed color-mix(in srgb,var(--ink) 35%,transparent)!important;
  border-radius:8px!important;background:none!important;box-shadow:none!important;color:var(--ink);font:800 14px/1.2 'Manrope','Manrope Fallback',sans-serif;cursor:pointer;}
.ls-more-btn[aria-expanded="true"] .icn{transform:rotate(180deg);}
.ls-more{margin-top:16px;}
.ls-words{display:grid;gap:10px;margin-top:6px;}
/* слова уроку — одна колонка: під кожним словом приклад речення */
.ls-words-v{grid-template-columns:1fr;gap:8px;}
.ls-words-v .ls-w{padding:10px 12px;}
.ls-words-v .ls-w-jp{font-size:1.35rem;}
.ls-w{padding:12px 14px;border:2px solid var(--ink);border-radius:8px;background:var(--surface);}
.ls-w-jp{font-size:1.6rem;font-weight:700;display:flex;align-items:center;gap:6px;}
.ls-w-r{color:var(--muted);font-size:13px;}
.ls-w-m{font-weight:800;font-size:15px;margin-top:2px;}
.ls-w-n{margin-top:6px;font-size:13px;line-height:1.5;color:var(--ink);display:flex;gap:4px;}
.ls-k-top{display:flex;align-items:center;gap:12px;}
.ls-k-ch{font-size:2.6rem;font-weight:700;line-height:1;}
.ls-k-ex{margin-top:4px;font-size:13px;}
.ls-sum{margin-top:.4rem;}
.ls-review{margin:0;padding-left:1.1em;display:grid;gap:4px;font-size:14px;}
.ls-perfect{margin:14px 0 0;font-weight:800;color:var(--ok,#2e7d32);display:flex;align-items:center;}
.ls-nav{display:flex;gap:10px;margin-top:14px;}
.ls-nav .ls-next{flex:1;min-height:52px;padding:0 18px;border:2px solid var(--ink)!important;border-radius:6px!important;background:var(--accent-2)!important;color:#000!important;
  font:800 15px/1.2 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;box-shadow:3px 3px 0 var(--ink-shadow)!important;cursor:pointer;transition:transform .12s,box-shadow .12s;}
.ls-nav .ls-next:active{transform:translate(3px,3px)!important;box-shadow:0 0 0 var(--ink-shadow)!important;}
.ls-nav .ls-back{flex:none;width:52px;min-height:52px;padding:0;border:2px solid var(--ink)!important;border-radius:6px!important;background:var(--surface)!important;color:var(--ink)!important;
  box-shadow:none!important;font:800 20px/1 'Manrope','Manrope Fallback',sans-serif!important;cursor:pointer;}
.focus-tip{margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--paper);text-align:left;font-size:13px;line-height:1.55;}
.focus-preview-card .rr{text-align:left;}

/* Зелена «Знаю» (.bgrn) — той самий ховер, що й у жовтих: колір не міняється, кнопка «напівнатискається» */
@media (hover:hover){
  button.bgrn:not(:disabled):hover{background:#047857!important;transform:translate(1px,1px)!important;box-shadow:2px 2px 0 var(--ink-shadow)!important;}
  button.bgrn:not(:disabled):hover:active{transform:translate(3px,3px)!important;box-shadow:0 0 0 var(--ink-shadow)!important;}
}


/* ══════ Сайдбар: впорядкування (2026-10-11) ══════
   1) назва пункту — чорнильна, опис — тихий (було обидва сірі → без ієрархії);
   2) заголовки секцій — дрібні Manrope-капітелі, а не широкий Unbounded, що кричав голосніше за пункти;
   3) усі роздільники — однакова тонка лінія з однаковими відступами (було 2px/1px вперемішку);
   4) «Зберегти прогрес» і пошук — легкі поля без брутальної тіні, щоб не змагались із навігацією;
   5) щільніший ритм пунктів. */
#sb .ni{padding:8px 12px;margin:1px 10px;gap:12px;color:var(--sb-text);font-size:14px;font-weight:700;border-radius:6px;}
#sb .ni .ic{width:20px;justify-content:center;color:var(--sb-muted);}
#sb .ni.on{color:var(--on-accent-1);}
#sb .ni.on .ic{color:inherit;}
#sb .ni .sub{color:var(--sb-muted);font-size:12px;font-weight:500;margin-top:1px;}
#sb .ni.on .sub{color:inherit;opacity:.75;}
@media (max-width:800px){#sb .ni{min-height:48px;padding:8px 12px;}}
#sb .nsec,#sb .nsec-static{padding:16px 22px 6px;margin:0;font:800 11px/1.2 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif!important;
  letter-spacing:.09em;text-transform:uppercase;color:var(--sb-muted);}
#sb .nsec .nsec-arrow{opacity:.7;}
#sb>div>div[style*="height:2px"],#sb>div>div[style*="height:1px"]{height:1px!important;margin:8px 20px!important;background:var(--sb-border)!important;opacity:.6;}
#sb>div>div>div[style*="height:2px"]{height:1px!important;margin-top:14px!important;opacity:.6;}
#sb #acctBox .ink{margin:0!important;}
#sb #acctBox button[data-action="openAuthModal"]{box-shadow:none!important;transform:none!important;min-height:40px;border-width:1.5px!important;}
#sb .flat-btn[data-action="openGlobalSearch"]{min-height:40px;border:1.5px solid transparent!important;box-shadow:none!important;}

#fcGrades{flex-wrap:nowrap!important;gap:6px!important;}
@media (max-width:420px){.grbtn{font-size:11.5px;padding:10px 4px;}.grbtn small{font-size:10.5px;}}

/* Практика: «заповніть пропуск» і зворотний напрям (2026-10-11) */
.fz-kind{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--muted);margin-bottom:.6rem;}
.fz-sent{font-size:1.5rem;font-weight:600;line-height:1.6;}
.fz-gap{display:inline-block;min-width:2.4em;margin:0 .15em;border-bottom:3px solid var(--accent-2);color:transparent;}
.fz-tr{margin-top:.5rem;font-size:14px;color:var(--muted);font-weight:600;}
/* варіанти відповіді — на всю ширину навіть коли відповідь в один символ (частки в «пропуску») */
.ink:has(>.focus-mc-btn){display:block;width:100%;margin-right:0;}
.focus-mc-btn{width:100%;}

/* Приклад речення до слова (vocabExampleHtml) */
.vx{display:flex;flex-direction:column;gap:1px;margin-top:6px;padding:5px 8px;border-radius:6px;background:var(--paper);font-size:13px;line-height:1.45;}
.vx-jp{font-size:14px;}
.vx-hl{font-weight:800;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--accent-2) 70%,transparent) 62%);}
.vx-tr{color:var(--muted);font-size:12px;}
.vx-left{text-align:left;}

/* Тост угорі (підтвердження зміни мови): не перекриває кнопки внизу екранів першого запуску */
#srsToast{pointer-events:none;}
#srsToast.top{bottom:auto!important;top:calc(16px + var(--safe-area-inset-top, env(safe-area-inset-top)))!important;transform:translateX(-50%) translateY(-10px)!important;}
#srsToast.top.in{transform:translateX(-50%) translateY(0)!important;}

/* Рядок-підказка в потоці (зміна мови): займає власне місце, не перекриває вміст, згортається */
.flow-note{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;border:2px solid var(--ink);border-radius:8px;
  background:var(--accent-2);color:#000;font:800 14px/1.3 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;overflow:hidden;
  animation:flowNoteIn .25s var(--ease,ease) both;transition:height .35s var(--ease,ease),margin .35s,padding .35s,opacity .25s,border-width .35s;}
.flow-note.out{opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0;}
@keyframes flowNoteIn{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.flow-note{animation:none;transition:none;}}


/* ══════ Екрани помилок — редизайн 2026-10-11 (ui.js errVisual/renderErrorView + tools/error_pages.py) ══════
   Ритм: ілюстрація → підпис-«етикетка» з японським словом → код → заголовок → текст → дії.
   Таблички — справжні японські зразки: номерний знак із пломбою, паперове оголошення на скотчі,
   дерев'яна підвісна табличка раменної, табличка «関係者以外 立入禁止» зі смугою. */
.err{gap:0;max-width:440px;padding:40px 20px 48px;}
.err-logo{margin-bottom:28px;}
.err-visual{margin:0 0 30px;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}
.err-visual figcaption{margin:0;}
.err-word{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 8px;margin:0;padding:0;
  background:none;border:0;font:600 13px/1.4 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;color:var(--muted);}
.err-word-k{font-size:15px;font-weight:700;color:var(--ink);}
.err-word-r{font-size:13px;font-weight:600;color:var(--muted);font-style:italic;}
.err-word-m{font-size:13px;font-weight:600;color:var(--muted);}
.err-word-r::before,.err-word-m::before{content:'·';margin-right:8px;font-style:normal;opacity:.6;}
.err-kicker{margin:0 0 10px;font:800 11px/1.2 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
h1.err-title,.err-title{margin:0 0 14px!important;font:900 clamp(1.7rem,7.5vw,2.4rem)/1.12 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;
  letter-spacing:-.025em;text-wrap:balance;}
.err-title s{text-decoration:line-through;text-decoration-thickness:.1em;text-decoration-color:var(--accent-2);color:var(--muted);}
.err-text{margin:0 0 30px!important;max-width:34ch;font:500 15px/1.65 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;color:var(--muted);text-wrap:pretty;}
.err-actions{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;margin:0;}
.err-btn{cursor:pointer;}
.err-btn.primary{width:min(300px,100%);min-height:52px;padding:0 18px;border:2px solid var(--ink)!important;border-radius:6px!important;
  background:var(--accent-2)!important;color:#000!important;font:800 15px/1.2 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;
  box-shadow:3px 3px 0 var(--ink-shadow)!important;transition:transform .12s,box-shadow .12s;}
.err-btn.back{min-height:44px;padding:0 12px;border:none!important;background:none!important;box-shadow:none!important;color:var(--ink);
  font:700 14px/1.2 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif!important;text-decoration:none;}
@media (hover:hover){
  .err-btn.back:hover{background:none!important;text-decoration:underline;text-underline-offset:3px;}
  .err-btn.primary:hover{background:var(--accent-2)!important;transform:translate(1px,1px)!important;box-shadow:2px 2px 0 var(--ink-shadow)!important;}
}
.err-btn.primary:active{transform:translate(3px,3px)!important;box-shadow:0 0 0 var(--ink-shadow)!important;}

/* ── 404: номерний знак — без нахилу/тіні; круглий отвір праворуч, пломба 封印 з лого зліва ── */
.err-visual .jp-plate.err-plate{max-width:min(300px,80vw);transform:none;box-shadow:0 1px 0 rgba(0,0,0,.06);border:2px solid #1a1a1a;}
.jp-plate::after{display:none;}   /* старі гвинтики-маски (овальні на 2:1) — тепер круглі .ep-hole/.ep-seal (ui.js plateFixings) */
.jp-plate .ep-hole,.jp-plate .ep-seal{position:absolute;z-index:3;top:10%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,0);}
.jp-plate .ep-hole{left:82%;width:3%;background:radial-gradient(circle at 40% 35%,#6b6b6b,#2a2a2a 70%);box-shadow:inset 0 1px 1px rgba(0,0,0,.5),0 0 0 1.5px #c9c9c9;}
.jp-plate .ep-hole.l{left:18%;}
.jp-plate .ep-seal{left:17%;top:6.5%;width:10%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#f2f2f0,#b9b9b6 60%,#8e8e8a);box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1.5px rgba(0,0,0,.18);}
.jp-plate .ep-seal img{width:66%;height:auto;filter:grayscale(1) contrast(1.1);opacity:.85;}

/* ── спільне для табличок ── */
.es{position:relative;box-sizing:border-box;font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:900;line-height:1;}
.es-k{letter-spacing:.06em;}

/* ── 500 故障中: паперове оголошення на скотчі ── */
.es-notice{width:min(260px,72vw);aspect-ratio:1/1.05;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:0 0 18px;background:#fbfaf6;color:#1a1a1a;border-radius:2px;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 6px 18px -6px rgba(0,0,0,.25);overflow:visible;}
.es-notice .es-head{position:absolute;top:0;left:0;right:0;padding:9px 0;background:#D93A2B;color:#fff;font-size:15px;letter-spacing:.3em;text-align:center;}
.es-notice .es-k{font-size:clamp(2.4rem,12vw,3.2rem);margin-top:26px;}
.es-notice .es-sub{font-size:13px;font-weight:700;color:#555;letter-spacing:.08em;}
.es-tape{position:absolute;top:-10px;width:70px;height:24px;background:rgba(236,224,190,.78);box-shadow:0 1px 2px rgba(0,0,0,.1);z-index:2;}
.es-tape.l{left:-14px;transform:rotate(-32deg);}
.es-tape.r{right:-14px;transform:rotate(32deg);}

/* ── 503 準備中: дерев'яна підвісна табличка (вертикальний напис), погойдується на шнурку ── */
.es-fuda{width:120px;height:250px;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:es-sway 6s ease-in-out infinite;}
.es-nail{position:absolute;top:-4px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#bdbdbd,#555);z-index:2;}
.es-cord{position:absolute;top:0;left:50%;width:70px;height:46px;margin-left:-35px;
  background:linear-gradient(to bottom right,transparent calc(50% - 1.5px),#3a2a1a calc(50% - 1.5px),#3a2a1a calc(50% + 1.5px),transparent calc(50% + 1.5px)) left/50% 100% no-repeat,
             linear-gradient(to bottom left,transparent calc(50% - 1.5px),#3a2a1a calc(50% - 1.5px),#3a2a1a calc(50% + 1.5px),transparent calc(50% + 1.5px)) right/50% 100% no-repeat;}
.es-board{margin-top:44px;flex:1;width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;
  background:
    repeating-linear-gradient(90deg,rgba(90,52,20,.0) 0 7px,rgba(90,52,20,.10) 7px 8px,rgba(90,52,20,.0) 8px 15px,rgba(90,52,20,.07) 15px 17px),
    linear-gradient(90deg,#c48a52,#d9a46c 45%,#c58b54);
  box-shadow:inset 0 0 0 3px rgba(70,40,15,.55),inset 0 0 18px rgba(70,40,15,.25),0 8px 16px -8px rgba(0,0,0,.4);}
.es-fuda .es-k{writing-mode:vertical-rl;text-orientation:upright;font-family:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;
  font-size:2.6rem;letter-spacing:.18em;color:#24150a;}
@keyframes es-sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}

/* ── 403 関係者以外 立入禁止: біла табличка, червоний напис, жовто-чорна смуга, болти ── */
.es-kinshi{width:min(290px,80vw);display:flex;flex-direction:column;align-items:center;padding:30px 16px 0;background:#fff;color:#1a1a1a;
  border:2px solid #1a1a1a;border-radius:6px;overflow:hidden;box-shadow:0 6px 18px -8px rgba(0,0,0,.3);}
.es-kinshi .es-top{font-size:17px;letter-spacing:.35em;margin-left:.35em;}
.es-kinshi .es-k{margin:10px 0 22px;font-size:clamp(2.6rem,13vw,3.4rem);color:#D93A2B;letter-spacing:.04em;}
.es-band{align-self:stretch;margin:0 -16px;height:22px;background:repeating-linear-gradient(-45deg,#1a1a1a 0 14px,#F5C400 14px 28px);}
.es-bolt{position:absolute;top:10px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e0e0e0,#7a7a7a);box-shadow:0 0 0 1px rgba(0,0,0,.25);}
.es-bolt.l{left:12px}.es-bolt.r{right:12px}

@media (prefers-reduced-motion:reduce){.es-fuda{animation:none;}}
/* підпис під табличкою — два рядки: «слово · читання», нижче переклад (без «·» на початку перенесеного рядка) */
.err-word-m{flex-basis:100%;text-align:center;}
.err-word-m::before{content:none;}
/* випуклий бортик по периметру, як на справжньому штампованому знаку */
.err-plate::before{box-shadow:inset 0 0 0 4px #fdfdfb,inset 0 0 0 5.5px rgba(0,0,0,.16),inset 0 0 0 7px rgba(255,255,255,.9);}

/* супровідний текст помилки — по абзацу на речення */
.err-text{display:flex;flex-direction:column;gap:8px;}
.err-text p{margin:0;}

/* Верхній рядок знака (регіон + клас) тонший за основний номер — як на справжніх знаках */
.jp-plate .region{font-weight:500;font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Noto Sans CJK JP','Noto Sans JP',sans-serif;}
/* «・» замість нуля попереду (・4 04): власна крапка, бо шрифт номера її не має */
.jp-plate .serial .num .pd{display:inline-block;width:.085em;height:.085em;margin:0 .2em 0 .14em;border-radius:50%;background:currentColor;vertical-align:.33em;}
/* кожне речення — один рядок (тексти помилок скорочено під 335px на 375px-телефоні у всіх 8 мовах);
   на зовсім вузьких екранах (<370px) дозволяємо перенос, щоб нічого не обрізалось */
.err-text{max-width:none!important;width:100%;}
@media (min-width:370px){.err-text p{white-space:nowrap;}}

/* ══════ Екрани помилок: десктоп — дві колонки (2026-10-11) ══════
   Ліворуч велика табличка з підписом, праворуч блок .err-body (код, заголовок, текст, кнопки) за лівим краєм.
   Статичні сторінки (body > .err) — від 1000px; у застосунку (#ca, поруч сайдбар 268px) — від 1200px. */
.err-body{display:flex;flex-direction:column;align-items:center;width:100%;}
@media (min-width:1000px){
  body > .err{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;column-gap:80px;
    align-items:center;max-width:1160px;min-height:100dvh;padding:44px 56px 56px;}
  body > .err > .err-logo{grid-column:1/-1;justify-self:start;align-self:start;margin:0;}
  body > .err > .err-visual{margin:0;}
}
@media (min-width:1200px){
  #ca .err{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:64px;align-items:center;
    max-width:1100px;min-height:min(78dvh,800px);padding:40px;}
  #ca .err > .err-visual{margin:0;}
}
@media (min-width:1000px){
  body > .err .err-body{align-items:flex-start;text-align:left;}
  body > .err .err-text{align-items:flex-start;}
  body > .err .err-actions{flex-direction:row;justify-content:flex-start;gap:24px;}
  body > .err .jp-plate.err-plate,body > .err .es-kinshi{max-width:none;width:min(440px,100%);}
  body > .err .es-notice{width:min(360px,100%);}
  body > .err .es-fuda{width:160px;height:330px;}
  body > .err .es-fuda .es-k{font-size:3.4rem;}
  body > .err .es-kinshi .es-k{font-size:4.4rem;}
  body > .err .es-kinshi .es-top{font-size:22px;}
  body > .err h1.err-title{font-size:clamp(2.4rem,3.3vw,3.1rem)!important;}
  body > .err .err-text{font-size:17px;}
  body > .err .err-word{font-size:14px;}
  body > .err .err-word-k{font-size:18px;}
}
@media (min-width:1200px){
  #ca .err .err-body{align-items:flex-start;text-align:left;}
  #ca .err .err-text{align-items:flex-start;}
  #ca .err .err-actions{flex-direction:row;justify-content:flex-start;gap:24px;}
  #ca .err .jp-plate.err-plate,#ca .err .es-kinshi{max-width:none;width:min(420px,100%);}
  #ca .err .es-notice{width:min(340px,100%);}
  #ca .err .es-fuda{width:150px;height:310px;}
  #ca .err .es-fuda .es-k{font-size:3.2rem;}
  #ca .err .es-kinshi .es-k{font-size:4.2rem;}
  #ca .err h1.err-title{font-size:clamp(2.2rem,3vw,2.9rem)!important;}
  #ca .err .err-text{font-size:16px;}
}