/* style.css — все стили интерфейса (темы, разметка, компоненты). */

:root {
    /* Холодные нейтрали + один акцент; тени с лёгким teal-оттенком */
    --bg-primary: #f4f5f7;
    --bg-secondary: #e6e8ed;
    --bg-card: #ffffff;
    --text-primary: #1d1d1f;
    --text-secondary: #3a3a3c;
    --text-muted: #636366;
    --accent: #0e6f68;
    --accent-light: #d6f0ec;
    --accent-dark: #0c857a;
    --accent-glow: rgba(14, 111, 104, 0.12);
    --border: rgba(15, 40, 45, 0.08);
    --shadow: 0 1px 2px rgba(15, 40, 45, 0.04), 0 4px 14px rgba(15, 40, 45, 0.045);
    --shadow-lg: 0 8px 28px rgba(15, 40, 45, 0.08), 0 2px 8px rgba(14, 111, 104, 0.05);
    --shadow-xl: 0 20px 56px rgba(15, 40, 45, 0.12), 0 6px 18px rgba(14, 111, 104, 0.06);
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 980px;
    --shadow-cta: 0 3px 12px rgba(14, 111, 104, 0.26);
    --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Display = тот же Plex, чуть плотнее трекинг (офлайн, без внешнего CDN) */
    --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Типографическая шкала (роль → размер / интерлиньяж / трекинг) */
    --text-caption: 0.8125rem;   /* ~13–14.6px */
    --text-sm: 0.875rem;
    --text-body: 1rem;
    --text-body-lg: 1.125rem;
    --text-heading: 1.25rem;
    --text-title: 1.5rem;
    --text-display: clamp(1.85rem, 4vw + 0.55rem, 2.65rem);
    --leading-tight: 1.12;
    --leading-snug: 1.3;
    --leading-body: 1.55;
    --leading-loose: 1.7;
    --tracking-display: -0.04em;
    --tracking-title: -0.028em;
    --tracking-body: 0.005em;
    --tracking-label: 0.04em;
    --measure: 65ch;
    --hairline: rgba(15, 40, 45, 0.07);
    --glass: rgba(255, 255, 255, 0.68);
    --glass-edge: rgba(255, 255, 255, 0.55);
    --overlay: rgba(12, 18, 20, 0.42);
    --focus-ring: rgba(14, 111, 104, 0.45);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --duration: 0.2s;
    --duration-fast: 0.15s;
    --z-base: 1;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-skip: 300;
    --z-panel: 1000;
    --z-fullscreen: 3000;
    --z-grain: 50;
    color-scheme: light;
    /* Цвет знаков тодо: по умолчанию цвет текста; иначе — пресет из сердечка в шапке. */
    --todo-ink: var(--text-primary);
}

[data-glyph-color="teal"]   { --todo-ink: #0e6f68; }
[data-glyph-color="blue"]   { --todo-ink: #2563eb; }
[data-glyph-color="rose"]   { --todo-ink: #e11d48; }
[data-glyph-color="amber"]  { --todo-ink: #d97706; }
[data-glyph-color="green"]  { --todo-ink: #16a34a; }
[data-glyph-color="indigo"] { --todo-ink: #4f46e5; }
[data-glyph-color="slate"]  { --todo-ink: #475569; }

[data-theme="dark"][data-glyph-color="teal"]   { --todo-ink: #2bb8a8; }
[data-theme="dark"][data-glyph-color="blue"]   { --todo-ink: #60a5fa; }
[data-theme="dark"][data-glyph-color="rose"]   { --todo-ink: #fb7185; }
[data-theme="dark"][data-glyph-color="amber"]  { --todo-ink: #fbbf24; }
[data-theme="dark"][data-glyph-color="green"]  { --todo-ink: #4ade80; }
[data-theme="dark"][data-glyph-color="indigo"] { --todo-ink: #a5b4fc; }
[data-theme="dark"][data-glyph-color="slate"]  { --todo-ink: #94a3b8; }

/* Совместимость со старым переключателем «бирюзовые глифы» */
[data-glyph-accent="1"]:not([data-glyph-color]) { --todo-ink: var(--accent); }

[data-theme="dark"] {
    /* Off-black + разделение secondary/card, без чистого #000 */
    --bg-primary: #0c0c0e;
    --bg-secondary: #161618;
    --bg-card: #1c1c1e;
    --text-primary: #f5f5f7;
    --text-secondary: #d1d1d6;
    --text-muted: #98989d;
    --accent: #2bb8a8;
    --accent-light: #134e4a;
    --accent-dark: #5eead4;
    --accent-glow: rgba(43, 184, 168, 0.1);
    --border: rgba(255, 255, 255, 0.1);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(43, 184, 168, 0.04);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
    --shadow-cta: 0 2px 10px rgba(0, 0, 0, 0.4);
    --hairline: rgba(255, 255, 255, 0.09);
    --glass: rgba(22, 22, 24, 0.72);
    --glass-edge: rgba(255, 255, 255, 0.08);
    --overlay: rgba(0, 0, 0, 0.55);
    --focus-ring: rgba(43, 184, 168, 0.5);
    color-scheme: dark;
}

[data-theme="light"] {
    --bg-primary: #f4f5f7;
    --bg-secondary: #e6e8ed;
    --bg-card: #ffffff;
    --text-primary: #1d1d1f;
    --text-secondary: #3a3a3c;
    --text-muted: #636366;
    --accent: #0e6f68;
    --accent-light: #d6f0ec;
    --accent-dark: #0c857a;
    --accent-glow: rgba(14, 111, 104, 0.12);
    --border: rgba(15, 40, 45, 0.08);
    --shadow: 0 1px 2px rgba(15, 40, 45, 0.04), 0 4px 14px rgba(15, 40, 45, 0.045);
    --shadow-lg: 0 8px 28px rgba(15, 40, 45, 0.08), 0 2px 8px rgba(14, 111, 104, 0.05);
    --shadow-xl: 0 20px 56px rgba(15, 40, 45, 0.12), 0 6px 18px rgba(14, 111, 104, 0.06);
    --shadow-cta: 0 3px 12px rgba(14, 111, 104, 0.26);
    --hairline: rgba(15, 40, 45, 0.07);
    --glass: rgba(255, 255, 255, 0.68);
    --glass-edge: rgba(255, 255, 255, 0.55);
    --overlay: rgba(12, 18, 20, 0.42);
    --focus-ring: rgba(14, 111, 104, 0.45);
    color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Базовый кегль чуть крупнее стандартных 16px; --ui-font-scale меняется кнопками в шапке */
html { font-size: calc(112.5% * var(--ui-font-scale, 1)); } /* ≈18px при scale=1 */

body {
    font-family: var(--font-ui);
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(1000px 520px at 8% -8%, rgba(14, 111, 104, 0.07), transparent 55%),
        radial-gradient(800px 420px at 96% 0%, rgba(12, 133, 122, 0.045), transparent 50%),
        linear-gradient(180deg, #f8f9fb 0%, var(--bg-primary) 42%);
    color: var(--text-primary);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-body);
    font-weight: 400;
    font-kerning: normal;
    font-optical-sizing: auto;
    hyphens: none;
    -webkit-hyphens: none;
    transition: background-color 0.35s ease, color 0.35s ease;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
::selection {
    background: var(--accent-glow);
    color: var(--text-primary);
}
[data-theme="dark"] ::selection {
    background: rgba(43, 184, 168, 0.35);
    color: var(--text-primary);
}
/* Ссылки: подчёркивание по метрикам шрифта */
a {
    text-underline-position: from-font;
    text-decoration-thickness: from-font;
    text-decoration-skip-ink: auto;
}
[data-theme="dark"] body {
    background-image:
        radial-gradient(900px 480px at 12% -12%, rgba(43, 184, 168, 0.045), transparent 55%),
        radial-gradient(700px 380px at 100% 0%, rgba(20, 160, 145, 0.03), transparent 50%),
        linear-gradient(180deg, #101012 0%, var(--bg-primary) 40%);
}
/* Лёгкое зерно — ломает «стерильную» плоскость без шума */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
    mix-blend-mode: multiply;
}
[data-theme="dark"] body::before {
    opacity: 0.05;
    mix-blend-mode: soft-light;
}

/* ===== ДОСТУПНОСТЬ (a11y) ===== */

/* Содержимое только для скринридеров: визуально скрыто, но доступно AT.
   Применяется к подписям глифов вертикального письма (сам глиф — это латинский
   код хак-шрифта, который скринридер озвучил бы как мусор). */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Видимое фокус-кольцо ТОЛЬКО при навигации с клавиатуры (:focus-visible),
   а не при обычном клике мышью. Покрывает кнопки, карточки-кнопки, ссылки и поля. */
:where(a, button, [role="button"], [role="link"], input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Ссылка «Перейти к содержанию»: спрятана над экраном, выезжает при фокусе с Tab.
   Первый интерактивный элемент страницы — для пользователей клавиатуры и скринридеров. */
.skip-link {
    position: absolute;
    left: 0; top: 0;
    transform: translateY(-130%);
    z-index: var(--z-skip);
    margin: 0.5rem;
    padding: 0.6rem 1.1rem;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-pill);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-cta);
    transition: transform var(--duration-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* Уважаем системную настройку «уменьшить движение»: глушим анимации, плавную
   прокрутку и переходы для пользователей, которым движение мешает или вредит. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@keyframes taste-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes taste-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
    .about-hero {
        animation: taste-rise 0.55s var(--ease) both;
    }
    .about-lead {
        animation: taste-fade 0.6s var(--ease) 0.05s both;
    }
    .about-portrait {
        animation: taste-rise 0.7s var(--ease) 0.1s both;
    }
    .about-portrait img {
        transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
    }
    .about-portrait:hover img {
        transform: scale(1.015);
        box-shadow: var(--shadow-xl);
    }
    .nav-group-tab,
    .nav-item,
    .char-card,
    .course-go {
        transition: color var(--duration) var(--ease), background var(--duration) var(--ease),
            box-shadow var(--duration) var(--ease), transform var(--duration-fast) var(--ease),
            border-color var(--duration) var(--ease);
    }
}

/* baseline-ui: табличные цифры в данных */
.card-id,
.practice-score,
.practice-count,
.progress-toggle-pct,
.hp-row-count,
.sum-zoom-label,
.font-scale-value {
    font-variant-numeric: tabular-nums;
}

.header {
    border-bottom: 1px solid var(--hairline);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background: var(--glass);
    box-shadow: inset 0 1px 0 var(--glass-edge);
    padding-top: env(safe-area-inset-top, 0px);
}
.header-inner {
    max-width: 1080px; margin: 0 auto; padding: 0.85rem 1.5rem;
    display: flex; justify-content: space-between; align-items: center;
}

/* ===== ЛОГОТИП ===== */
.logo {
    display: flex; align-items: center; gap: 0.75rem;
    color: var(--text-primary); text-decoration: none;
}
.logo-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 12px;
    display: block;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(14, 111, 104, 0.22);
}
[data-theme="dark"] .logo-icon {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.logo-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
h1 {
    font-size: var(--text-heading); font-weight: 600; line-height: var(--leading-tight); margin: 0;
    letter-spacing: var(--tracking-title);
}
.logo-sub {
    font-size: var(--text-caption); color: var(--text-secondary); font-weight: 400;
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-snug);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.header-controls {
    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end;
    overflow: visible;
}
.font-scale-controls { display: flex; gap: 0.2rem; align-items: center; }
.theme-btn {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.04); border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
[data-theme="dark"] .theme-btn { background: rgba(255, 255, 255, 0.08); }
.theme-btn:hover:not(:disabled) {
    background: var(--accent-light); color: var(--accent);
    transform: scale(1.04);
}
.theme-btn:active:not(:disabled) {
    transform: scale(0.96);
}
.theme-btn:disabled {
    opacity: 0.4; cursor: default; transform: none;
}
.font-scale-btn { font-family: var(--font-ui); font-weight: 700; color: var(--text-secondary); }
.font-scale-icon { line-height: 1; font-weight: 700; }
.font-scale-icon-sm { font-size: 0.85rem; }
.font-scale-icon-lg { font-size: 1.25rem; }
.font-scale-value {
    flex-shrink: 0;
    min-width: 2.75em;
    height: 28px;
    margin-right: 2px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(60, 60, 67, 0.55);
    background: rgba(120, 120, 128, 0.12);
    border-radius: var(--radius-pill);
    text-align: center;
    line-height: 1;
    user-select: none;
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
[data-theme="dark"] .font-scale-value {
    color: rgba(235, 235, 245, 0.55);
    background: rgba(120, 120, 128, 0.24);
}

/* Телефон (Apple-стиль): шапка — стекло + одна сегментная панель; размеры в px */
@media (max-width: 720px) {
    .header {
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        backdrop-filter: saturate(180%) blur(24px);
    }
    .header-inner {
        gap: 10px;
        align-items: center;
        min-width: 0;
        padding: 10px 14px;
    }
    .logo {
        min-width: 0;
        flex: 1 1 auto;
        gap: 10px;
    }
    .logo-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        box-shadow: var(--shadow-cta);
    }
    .header h1 {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.03em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .header-controls {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 0;
        padding: 3px;
        background: var(--glass);
        border: 1px solid var(--hairline);
        border-radius: var(--radius-pill);
        box-shadow: var(--shadow);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        overflow: visible;
    }
    .font-scale-controls {
        display: flex;
        align-items: center;
        gap: 0;
        flex: 0 0 auto;
    }
    .header-controls .theme-btn {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: var(--radius-pill);
        background: transparent;
        box-shadow: none;
        font-size: 16px;
    }
    .header-controls .font-scale-icon-sm { font-size: 12px; }
    .header-controls .font-scale-icon-lg { font-size: 18px; }
    .header-controls .font-scale-value {
        height: 28px;
        min-width: 2.5em;
        margin-right: 1px;
        padding: 0 7px;
        font-size: 11px;
        font-weight: 600;
        background: rgba(120, 120, 128, 0.16);
    }
    [data-theme="dark"] .header-controls .font-scale-value {
        background: rgba(120, 120, 128, 0.28);
    }
    .header-controls .theme-btn:hover:not(:disabled),
    .header-controls .theme-btn:active:not(:disabled) {
        background: var(--accent-glow);
        border-color: transparent;
        color: var(--accent);
        transform: none;
    }
    .header-controls .glyph-color-btn.is-active,
    .header-controls .glyph-color-btn.is-active:hover {
        background: var(--accent-glow);
        border-color: transparent;
    }
    .header-controls .theme-btn:not(:last-child),
    .header-controls .glyph-color-wrap:not(:last-child) {
        box-shadow: inset -1px 0 0 var(--hairline);
    }
}

/* Палитра цвета глифов (сердечко в шапке) */
.glyph-color-wrap { position: relative; display: inline-flex; align-items: center; }
.glyph-color-btn .glyph-heart {
    font-size: 1.05em; line-height: 1;
    color: var(--todo-ink);
    transition: color 0.2s ease, transform 0.2s ease;
}
.glyph-color-btn.is-active .glyph-heart { transform: scale(1.08); }
.glyph-color-btn[aria-expanded="true"] {
    background: var(--accent-glow);
    color: var(--accent);
}
.glyph-color-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px;
    min-width: 168px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.glyph-color-menu[hidden] { display: none !important; }
.glyph-swatch {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--swatch, var(--bg-secondary));
    color: #fff;
    font-size: 14px; line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.glyph-swatch:hover { transform: scale(1.08); }
.glyph-swatch[aria-checked="true"] {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--swatch, var(--accent));
}
.glyph-swatch-auto {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 700;
}
.glyph-swatch[data-color="teal"]   { --swatch: #0e6f68; }
.glyph-swatch[data-color="blue"]   { --swatch: #2563eb; }
.glyph-swatch[data-color="rose"]   { --swatch: #e11d48; }
.glyph-swatch[data-color="amber"]  { --swatch: #d97706; }
.glyph-swatch[data-color="green"]  { --swatch: #16a34a; }
.glyph-swatch[data-color="indigo"] { --swatch: #4f46e5; }
.glyph-swatch[data-color="slate"]  { --swatch: #475569; }
[data-theme="dark"] .glyph-swatch[data-color="teal"]   { --swatch: #2bb8a8; color: #0f172a; }
[data-theme="dark"] .glyph-swatch[data-color="blue"]   { --swatch: #60a5fa; color: #0f172a; }
[data-theme="dark"] .glyph-swatch[data-color="rose"]   { --swatch: #fb7185; color: #0f172a; }
[data-theme="dark"] .glyph-swatch[data-color="amber"]  { --swatch: #fbbf24; color: #0f172a; }
[data-theme="dark"] .glyph-swatch[data-color="green"]  { --swatch: #4ade80; color: #0f172a; }
[data-theme="dark"] .glyph-swatch[data-color="indigo"] { --swatch: #a5b4fc; color: #0f172a; }
[data-theme="dark"] .glyph-swatch[data-color="slate"]  { --swatch: #94a3b8; color: #0f172a; }

.container { max-width: 1080px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* ПК: панель инструментов ближе к шапке */
@media (min-width: 721px) {
    .container { padding-top: 1rem; }
    .top-tools { margin-top: 0; margin-bottom: 0.65rem; }
    .top-tools.progress-open,
    .top-tools.search-open { margin-bottom: 0.85rem; }
}

/* ===== TOP TOOLS: серия занятий (слева) + поиск (справа) ===== */
.top-tools {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.6rem;
    margin-bottom: 0.85rem;
}
.progress-toggle,
.search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    background: var(--glass);
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.progress-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: auto;
    min-width: 42px;
    padding: 0 0.95rem;
    gap: 0.35rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.progress-toggle-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    white-space: nowrap;
    max-width: min(70vw, 22rem);
    overflow: hidden;
    text-overflow: ellipsis;
}
.progress-toggle-streak { flex-shrink: 0; }
.progress-toggle-sep { color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.progress-toggle-stats {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.progress-toggle-pct { color: var(--text-muted); font-weight: 500; }
.top-tools.progress-open .progress-toggle-sep,
.top-tools.progress-open .progress-toggle-stats,
.top-tools.progress-open .progress-toggle-pct { color: rgba(255, 255, 255, 0.85); }
.search-toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 42px;
}
.progress-toggle:hover,
.progress-toggle:focus-visible,
.search-toggle:hover,
.search-toggle:focus-visible {
    border-color: transparent;
    color: var(--accent);
    background: var(--accent-glow);
    outline: none;
}
.search-toggle-icon-close { display: none; }
.top-tools.progress-open .progress-toggle,
.top-tools.search-open .search-toggle {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-cta);
}
.top-tools.search-open .search-toggle-icon-open { display: none; }
.top-tools.search-open .search-toggle-icon-close { display: inline; font-size: 22px; font-weight: 500; }
.progress-panel,
.search-panel {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}
.progress-panel { grid-row: 2; }
.search-panel {
    grid-row: 2;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--shadow);
}
.top-tools.progress-open.search-open .search-panel { grid-row: 3; }
.top-tools.progress-open .progress-panel { display: block; }
.top-tools.search-open .search-panel { display: flex; }
.top-tools.progress-open,
.top-tools.search-open { margin-bottom: 1.1rem; }
.top-tools:not(.search-open) .search-suggest { display: none; }
.search-suggest { grid-column: 1 / -1; }
.search-input-wrap { position: relative; flex: 1 1 260px; min-width: 0; display: flex; align-items: center; }
.search-icon {
    position: absolute; left: 0.85rem; font-size: 1.1rem; color: var(--text-muted); pointer-events: none;
}
#search-input {
    width: 100%; font-family: inherit; font-size: 1rem;
    padding: 0.85rem 2.5rem 0.85rem 2.6rem;
    border: 1px solid var(--hairline); border-radius: var(--radius-pill);
    background: var(--bg-secondary); color: var(--text-primary);
    box-shadow: none;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
#search-input:focus {
    outline: none; border-color: var(--focus-ring);
    box-shadow: 0 0 0 4px var(--accent-glow);
}
#search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear {
    position: absolute; right: 0.6rem; width: 28px; height: 28px; border-radius: 50%;
    border: none; background: var(--bg-card); color: var(--text-muted);
    font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
}
.search-clear:hover { background: var(--accent); color: #fff; }
.search-clear:active { transform: scale(0.94); }
#search-filter {
    font-family: inherit; font-size: 0.95rem; padding: 0.85rem 1.1rem;
    border: 1px solid var(--hairline); border-radius: var(--radius-pill);
    background: var(--bg-secondary); color: var(--text-primary); cursor: pointer;
    flex: 0 1 180px; min-width: 140px;
    box-shadow: none;
}
#search-filter:focus { outline: none; border-color: var(--focus-ring); }

@media (max-width: 720px) {
    .top-tools { column-gap: 8px; row-gap: 8px; margin-bottom: 10px; }
    .progress-toggle,
    .search-toggle { height: 40px; }
    .search-toggle { width: 40px; }
    .progress-toggle { padding: 0 0.7rem; font-size: 0.8rem; max-width: calc(100vw - 72px); }
    .progress-toggle-label { max-width: 100%; }
    .progress-toggle-pct { display: none; }
    .search-panel { gap: 8px; padding: 10px; }
    .top-tools.progress-open,
    .top-tools.search-open { margin-bottom: 14px; }
    .search-input-wrap { flex: 1 1 100%; }
    #search-input {
        padding: 12px 40px;
        font-size: 16px; /* без auto-zoom на iOS */
    }
    #search-filter {
        flex: 1 1 100%;
        min-width: 0;
        padding: 12px 14px;
        font-size: 16px;
    }
}
.search-results { animation: fadeIn 0.25s ease; }
.search-results .char-grid { margin-top: 1.25rem; }
.search-empty {
    margin-top: 1.5rem; padding: 2.25rem 1.75rem; text-align: center; color: var(--text-secondary);
    background: var(--bg-secondary); border: 1px dashed var(--border); border-radius: var(--radius-lg);
    line-height: 1.6; box-shadow: none;
}
.search-empty p { margin: 0 0 1rem; max-width: 36ch; margin-inline: auto; }
.search-empty-chips { justify-content: center; }

/* Подсказки и недавние запросы */
.search-suggest {
    width: 100%;
    flex: 1 1 100%;
    order: 3;
    margin: 0.35rem 0 0.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow);
}
.search-suggest-label {
    font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
    letter-spacing: -0.01em; margin: 0.35rem 0 0.4rem;
}
.search-suggest-label:first-child { margin-top: 0; }
.search-suggest-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.search-chip {
    padding: 0.35rem 0.75rem; border: 1px solid var(--hairline); border-radius: var(--radius-pill);
    background: var(--bg-secondary); color: var(--text-secondary);
    font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.search-chip:hover { background: var(--accent-glow); color: var(--accent); border-color: transparent; }

/* Результаты: правила и разделы */
.search-hit-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem; margin-top: 0.85rem;
}
.search-hit {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
    width: 100%; text-align: left; padding: 1rem 1.1rem;
    border: 1px solid var(--hairline); border-radius: var(--radius-lg);
    background: var(--bg-card); box-shadow: var(--shadow); cursor: pointer;
    font: inherit; color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.search-hit:hover {
    border-color: transparent; background: var(--accent-glow);
    box-shadow: var(--shadow); transform: translateY(-1px);
}
.search-hit:active {
    transform: translateY(0) scale(0.99);
}
.search-hit-kicker {
    font-size: 0.78rem; font-weight: 600; color: var(--accent);
    letter-spacing: -0.01em;
}
.search-hit-title {
    font-size: 1.05rem; font-weight: 600; color: var(--text-primary);
    letter-spacing: -0.02em; line-height: 1.3;
}
.search-hit-body {
    font-size: var(--text-sm); color: var(--text-secondary);
    line-height: var(--leading-body); letter-spacing: var(--tracking-body);
}
.search-hit-meta {
    margin-top: 0.35rem; font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
}
.word-card .search-hit-meta { position: relative; z-index: 1; }

@media (max-width: 720px) {
    .search-suggest { margin-top: 0; }
}

/* Подсветка совпадений в результатах поиска. */
mark.hl {
    background: var(--accent-glow); color: inherit;
    border-radius: 3px; padding: 0 0.1em; font-weight: 700;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
[data-theme="dark"] mark.hl { background: var(--accent-light); color: var(--accent-dark); }

/* Фрагмент примечания на карточке — когда совпадение нашлось только в тексте. */
.card-note {
    margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px dashed var(--border);
    font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; text-align: left;
}
/* Заголовки групп результатов («Буквы и знаки», «Слова»). */
.search-group-title { font-size: 1.05rem; font-weight: 700; color: var(--accent); margin: 1.75rem 0 0.25rem; }
.search-group-title:first-of-type { margin-top: 1.25rem; }

/* ===== ОБЗОР ПРОГРЕССА (панель серии занятий) ===== */
.progress-panel .hp-card { margin: 0; }
.hp-card {
    background: var(--bg-card); border: 1px solid var(--hairline);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    padding: 1.35rem 1.4rem;
}
.hp-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.95rem;
}
.hp-streak { font-size: 1.02rem; font-weight: 600; color: var(--text-primary); }
.hp-streak b { color: var(--accent); }
.hp-streak .hp-best { color: var(--text-muted); font-weight: 500; font-size: 0.85rem; }
.hp-overall { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.7rem; }
.hp-overall b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hp-rows { display: grid; gap: 0.4rem; }
.hp-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto auto;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--bg-secondary);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hp-row:hover,
.hp-row:focus-visible {
    border-color: transparent;
    background: var(--accent-glow);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.hp-row:hover .hp-row-label,
.hp-row:focus-visible .hp-row-label,
.hp-row:hover .hp-row-go,
.hp-row:focus-visible .hp-row-go { color: var(--accent); }
.hp-row-label { font-size: 0.82rem; color: var(--text-secondary); font-weight: 600; }
.hp-bar { height: 8px; background: var(--bg-card); border-radius: var(--radius-pill); overflow: hidden; }
.hp-bar-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 0.5s ease; }
.hp-row-count { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }
.hp-row-go {
    font-size: 0.95rem; font-weight: 600; color: var(--text-muted);
    transition: color 0.2s ease, transform 0.2s ease;
}
.hp-row:hover .hp-row-go,
.hp-row:focus-visible .hp-row-go { transform: translateX(2px); }
.hp-cta {
    margin-top: 1.1rem; display: inline-flex; align-items: center;
    padding: 0.72rem 1.35rem;
    background: var(--accent); color: #fff; border: none; border-radius: var(--radius-pill);
    font-family: inherit; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
    cursor: pointer; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow-cta);
}
.hp-cta:hover { background: var(--accent-dark); box-shadow: var(--shadow-lg); }
.hp-cta:active { transform: scale(0.98); }
[data-theme="dark"] .hp-cta { color: #fff; }
.hp-empty {
    font-size: var(--text-sm); color: var(--text-muted);
    line-height: var(--leading-body); max-width: var(--measure);
    margin-bottom: 0.7rem;
}
.hp-tips {
    margin: 0.65rem 0 0.85rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.hp-path {
    display: block;
    width: 100%;
    margin: 0 0 1.05rem;
    padding: 0.85rem 0.9rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--hairline));
    border-radius: 16px;
    background: var(--accent-glow);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hp-path:hover,
.hp-path:focus-visible {
    border-color: transparent;
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.hp-path-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.hp-path-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent);
}
.hp-path-count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text-primary);
}
.hp-path .lp-scale-track { height: 8px; }
.hp-path-now {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.hp-split-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.55rem;
}
@media (max-width: 600px) {
    .hp-row { grid-template-columns: 4.4rem 1fr auto auto; padding: 0.6rem 0.7rem; }
    .hp-row-label { font-size: 0.78rem; }
}

/* Кнопки в конце раздела: «Дальше» → следующий раздел, «Назад» → к списку */
.section-end-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    margin-top: 2.5rem;
    padding: 1.5rem 0 max(0.5rem, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
}
.section-next-btn,
.back-to-nav {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.32rem;
    max-width: 100%;
    padding: 0.44rem 0.77rem;
    border-radius: var(--radius-pill);
    font-family: inherit; font-size: 0.76rem; font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.section-next-btn {
    border: 1px solid transparent;
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-cta);
}
.section-next-btn:hover {
    background: var(--accent-dark);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-cta);
}
.back-to-nav {
    border: 1px solid var(--hairline);
    background: var(--bg-card);
    color: var(--text-secondary);
    box-shadow: var(--shadow);
}
.back-to-nav:hover {
    color: var(--accent);
    border-color: transparent;
    background: var(--accent-glow);
}
.section-next-btn:active,
.back-to-nav:active {
    transform: scale(0.98);
    filter: brightness(0.96);
}
.section-next-btn > span[aria-hidden="true"],
.back-to-nav > span[aria-hidden="true"] {
    font-size: 0.84rem; line-height: 1; font-weight: 700;
}
.section-next-text,
.back-to-nav-text { letter-spacing: 0.02em; white-space: nowrap; }
@media (max-width: 480px) {
    .section-end-nav { margin-top: 2rem; padding-top: 1.25rem; gap: 0.5rem; }
    .section-next-btn,
    .back-to-nav { padding: 0.42rem 0.67rem; font-size: 0.7rem; }
    .section-next-text,
    .back-to-nav-text { white-space: normal; text-align: center; line-height: 1.2; }
}

.nav-tabs {
    display: flex; flex-direction: column; gap: 0.85rem;
    margin-bottom: 2rem;
    padding-bottom: 1.35rem; border-bottom: 1px solid var(--hairline);
    scroll-margin-top: calc(5.5rem + env(safe-area-inset-top, 0px));
}
.nav-group-tabs {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    align-items: center;
}
.nav-group-tab {
    margin: 0;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="dark"] .nav-group-tab { background: rgba(255, 255, 255, 0.08); }
.nav-group-tab:hover,
.nav-group-tab:focus-visible {
    color: var(--accent);
    background: var(--accent-glow);
    outline: none;
}
.nav-group-tab:active {
    transform: scale(0.98);
}
.nav-group-tab.is-active {
    color: #fff;
    background: var(--accent);
    box-shadow: var(--shadow-cta);
}
[data-theme="dark"] .nav-group-tab.is-active { color: #fff; }
.nav-chips {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow);
}
.nav-item {
    padding: 0.48rem 0.95rem; background: rgba(0, 0, 0, 0.03); border: 1px solid transparent;
    border-radius: var(--radius-pill); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.01em;
    color: var(--text-secondary); cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .nav-item { background: rgba(255, 255, 255, 0.06); }
.nav-item:hover { color: var(--accent); background: var(--accent-glow); }
.nav-item:active { transform: scale(0.98); }
.nav-item.active { color: #fff; background: var(--accent); box-shadow: var(--shadow-cta); }
[data-theme="dark"] .nav-item.active { color: #fff; }

/* Телефон: навигация — плотная сетка капсул в том же Apple-стиле */
@media (max-width: 720px) {
    .nav-tabs {
        gap: 8px;
        padding-bottom: 12px;
        margin-bottom: 14px;
        max-width: 100%;
        overflow-x: clip;
        border-bottom-color: var(--hairline);
    }
    .nav-group-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
    }
    .nav-group-tab {
        width: 100%;
        min-width: 0;
        padding: 9px 6px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.15;
        text-align: center;
        border-radius: var(--radius-pill);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: none;
    }
    .nav-group-tab.is-active {
        box-shadow: var(--shadow-cta);
    }
    .nav-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
        overflow: hidden;
        border-radius: 18px;
        border-color: var(--hairline);
        box-shadow: var(--shadow);
        min-width: 0;
        max-width: 100%;
    }
    .nav-item {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        padding: 10px 6px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: -0.01em;
        line-height: 1.15;
        text-align: center;
        border-radius: var(--radius-pill);
        white-space: normal;
        overflow: hidden;
        word-break: break-word;
    }
    .nav-item.active {
        box-shadow: var(--shadow-cta);
    }
}

.section { display: none; scroll-margin-top: calc(5.5rem + env(safe-area-inset-top, 0px)); }
.section.active { display: block; animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.section-title {
    font-size: var(--text-display); font-weight: 600; margin-bottom: 0.55rem;
    letter-spacing: var(--tracking-display); line-height: var(--leading-tight);
}
.section-info {
    font-size: var(--text-body-lg); color: var(--text-secondary); margin-bottom: 1.65rem;
    padding: 0.95rem 0 1.05rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    box-shadow: none;
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-body);
    max-width: var(--measure);
}

/* Тренажёр «Направление» — iframe без двойной прокрутки */
.writer-host {
    margin: 0 0 0.5rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: transparent;
}
.writer-frame {
    display: block;
    width: 100%;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    height: min(92dvh, 900px);
    min-height: 560px;
}
.section-info-writer {
    margin-bottom: 0.85rem;
    padding: 0.65rem 0 0.85rem;
    font-size: 0.92rem;
}
#section-direction .section-end-nav {
    margin-top: 0.75rem;
}

.char-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.85rem;
}
.syl-group { margin-bottom: 2rem; }
.syl-group-head {
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
    margin: 0 0 0.85rem; padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
}
.syl-group-series {
    font-size: 1.25rem; font-weight: 700; color: var(--accent);
    background: var(--accent-glow); border: 1px solid var(--accent);
    border-radius: 8px; padding: 2px 12px; line-height: 1.4;
}
.syl-group-desc { font-size: 0.9rem; color: var(--text-secondary); }
.syl-group-desc--none { font-style: italic; color: var(--text-muted); }
.syl-group-count {
    margin-left: auto; font-size: 0.75rem; font-weight: 600;
    color: var(--text-muted); background: var(--bg-secondary);
    border-radius: var(--radius-pill); padding: 2px 10px;
}
.char-card {
    background: var(--bg-card); border: 1px solid transparent;
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
    cursor: pointer; padding: 1.15rem 1.1rem;
}
.char-card:hover {
    box-shadow: var(--shadow-lg); border-color: rgba(14, 111, 104, 0.22);
    transform: translateY(-2px);
}
.char-card:active {
    transform: translateY(0) scale(0.99);
    box-shadow: var(--shadow);
}
.card-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.85rem; gap: 0.65rem;
}
.card-id {
    font-size: var(--text-caption); font-weight: 600; color: var(--text-muted);
    background: var(--bg-secondary); padding: 4px 8px; border-radius: 4px;
    letter-spacing: var(--tracking-label); line-height: var(--leading-snug);
    text-box: trim-both cap alphabetic;
}
.card-cyr { font-size: var(--text-body); font-weight: 600; color: var(--accent); letter-spacing: var(--tracking-title); }
.card-latin { font-size: var(--text-caption); color: var(--text-muted); line-height: var(--leading-snug); }
.card-audio-row {
    display: flex; justify-content: center; align-items: center;
    margin-top: 0.85rem; padding-top: 0.75rem;
    border-top: 1px solid var(--hairline);
}

/* Озвучка букв */
.audio-play-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--bg-secondary); color: var(--accent);
    cursor: pointer; font-size: 0.7rem; line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.audio-play-btn:hover {
    background: var(--accent-glow); border-color: var(--accent); color: var(--accent);
}
.audio-play-btn:active {
    transform: scale(0.94);
}
.audio-play-btn:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
.audio-play-btn.is-playing {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.audio-play-btn.is-missing {
    border-color: #e11d48; color: #e11d48; animation: audio-missing-shake 0.35s ease;
}
@keyframes audio-missing-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}
.modal h2#modal-title,
.modal #modal-title {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.modal-title-text { min-width: 0; }
.modal-audio-btn { flex-shrink: 0; }
.card-display { padding: 0.5rem 0; display: flex; justify-content: center; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.form-box { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.form-box-label { font-size: 0.65rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.form-box-char {
    font-family: 'TodoPozdneyev', serif; font-size: 3.1rem;
    writing-mode: vertical-lr; text-orientation: mixed;
    min-height: 140px; width: 66px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 6px; color: var(--todo-ink);
}
.form-box-missing {
    font-size: 1.5rem; color: var(--text-muted); font-style: italic;
    min-height: 140px; width: 66px; display: flex; align-items: center; justify-content: center;
    background: var(--bg-secondary); border: 1px dashed var(--border); border-radius: 8px;
}

/* Цифры в шрифте тодо: горизонтальная ориентация глифа (в строке, сочетаниях). */
.todo-num {
    display: inline-block;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

/* В карточке атласа, модалке, тренировке, пути и правилах — цифра по центру ячейки. */
.form-box-char.todo-num,
.modal-form-char.todo-num,
.practice-char.todo-num,
.fb-form-glyph.todo-num,
.lp-form-char.todo-num,
.lp-flash-char.todo-num,
.cw-tile-glyph.todo-num,
.wr-glyph-g.todo-num,
.ww-key-glyph.todo-num {
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    text-align: center;
    line-height: 1;
}

.sum-glyph.todo-num,
.wr-syll-glyph.todo-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    text-align: center;
    line-height: 1;
}

/* ===== СВОДНАЯ ТАБЛИЦА ===== */
.sum-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg-card); box-shadow: var(--shadow);
}
.sum-table {
    width: 100%; border-collapse: collapse; min-width: 560px;
    font-size: calc(0.95rem * var(--sum-zoom, 1));
}
.sum-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-secondary); color: var(--text-secondary);
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    text-align: center; padding: 0.7rem 0.6rem;
    border-bottom: 2px solid var(--border); white-space: nowrap;
}
.sum-table thead th:nth-child(1),
.sum-table thead th:nth-child(2),
.sum-table thead th:nth-child(3) { text-align: left; }
.sum-group-row td {
    background: var(--accent-glow);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    padding: 0.55rem 0.85rem;
}
.sum-group-label {
    font-size: 1.05rem; font-weight: 700; color: var(--accent);
}
.sum-group-count {
    margin-left: 0.6rem; font-size: 0.72rem; font-weight: 600;
    color: var(--text-muted); background: var(--bg-secondary);
    border-radius: var(--radius-pill); padding: 2px 10px;
}
.sum-row { cursor: pointer; transition: background 0.15s ease; border-bottom: 1px solid var(--border); }
.sum-row:last-child { border-bottom: none; }
.sum-row:hover { background: var(--accent-glow); }
.sum-row td { padding: 0.5rem 0.6rem; text-align: center; vertical-align: middle; }
.sum-id {
    font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
    text-align: left !important; white-space: nowrap;
}
.sum-cyr { font-size: 1.05rem; font-weight: 700; color: var(--accent); text-align: left !important; white-space: nowrap; }
.sum-lat { font-size: 0.85rem; color: var(--text-secondary); text-align: left !important; white-space: nowrap; }
.sum-glyph {
    font-family: 'TodoPozdneyev', serif; font-size: calc(2.2rem * var(--sum-zoom, 1)); line-height: 1;
    writing-mode: vertical-lr; text-orientation: mixed;
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center; vertical-align: middle;
    min-height: calc(60px * var(--sum-zoom, 1)); min-width: 30px; color: var(--todo-ink);
}
.sum-missing { color: var(--text-muted); font-style: italic; font-size: 1.1rem; }
@media (max-width: 600px) {
    .sum-glyph { font-size: calc(1.9rem * var(--sum-zoom, 1)); min-height: calc(52px * var(--sum-zoom, 1)); }
    .sum-table { min-width: 480px; font-size: calc(0.88rem * var(--sum-zoom, 1)); }
    .sum-zoombtn { min-width: 44px; }
}

/* ── панель управления сводной таблицы (зум + развернуть) ── */
.sum-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.4rem 0.6rem;
    background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
    padding: 0.5rem 0.7rem; margin-bottom: 0.7rem; box-shadow: var(--shadow);
}
.sum-toolgrp { display: flex; align-items: center; gap: 0.35rem; }
.sum-tool-label { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.sum-tool-btn {
    padding: 0.4rem 0.75rem; font-family: inherit; font-size: 0.82rem; font-weight: 600;
    background: var(--bg-secondary); color: var(--text-secondary);
    border: 1px solid var(--hairline); border-radius: var(--radius-pill); cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.sum-tool-btn:hover { border-color: transparent; color: var(--accent); background: var(--accent-glow); }
.sum-zoom-group { gap: 0.3rem; }
.sum-zoombtn { min-width: 38px; font-size: 1.05rem; line-height: 1; padding: 0.35rem 0.5rem; }
.sum-zoom-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); min-width: 46px; text-align: center; }
.sum-expand { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sum-expand:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-cta); }
[data-theme="dark"] .sum-expand:hover { color: #fff; }

/* развёрнутый (полноэкранный) режим сводной таблицы */
.sum-board.zoomed {
    position: fixed; inset: 0; z-index: var(--z-fullscreen); background: var(--bg-primary);
    display: flex; flex-direction: column; padding: 0.6rem; gap: 0.6rem;
}
.sum-board.zoomed .sum-toolbar { order: 1; margin: 0; flex: 0 0 auto; }
.sum-board.zoomed .sum-wrap {
    order: 2; flex: 1 1 auto; min-height: 0;
    overflow: auto; -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
    .sum-board.zoomed { padding: 0.4rem; }
    .sum-board.zoomed .sum-toolbar { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
    .sum-board.zoomed .sum-toolgrp { flex: 0 0 auto; }
}

/* ===== СОСТАВИТЬ СЛОВО ===== */
.cw-wrap { max-width: 760px; margin: 0 auto; }
.cw-progress {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem;
}
.cw-progress .cw-streak { font-weight: 700; color: var(--accent); }
.cw-task {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: 1.4rem; text-align: center; margin-bottom: 1.1rem;
}
.cw-meaning { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.cw-meaning-row {
    display: flex; align-items: center; justify-content: center; gap: 0.65rem; flex-wrap: wrap;
}
.cw-audio { display: inline-flex; align-items: center; }
.cw-audio-btn { width: 2.2rem; height: 2.2rem; flex-shrink: 0; }
.cw-translit { font-size: 0.95rem; color: var(--text-secondary); margin-top: 0.3rem; }
.cw-translit b { color: var(--accent); font-weight: 700; }
.cw-hint-translit { color: var(--text-muted); font-style: italic; }

.cw-stage {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    background: var(--bg-secondary); border: 1px dashed var(--border);
    border-radius: var(--radius-lg); padding: 1.4rem; margin-bottom: 1.1rem;
}
.cw-stage-label { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.cw-assembled {
    font-family: 'TodoPozdneyev', serif;
    writing-mode: vertical-lr; text-orientation: mixed;
    font-size: calc(3.4rem * var(--cw-zoom, 1)); line-height: 1.15; color: var(--todo-ink);
    min-height: 120px; min-width: 56px;
    max-height: 56vh;             /* по достижении этой высоты текст переносится в следующий столбец */
    overflow-wrap: anywhere;      /* длинные слова при необходимости переносятся */
    overflow-x: auto; overflow-y: hidden;  /* если столбцов много — прокрутка по горизонтали */
    padding: 0.4rem 0.6rem;
    text-align: center;           /* центрирование столбца по вертикали (инлайн-ось верт. письма) */
    margin-inline: auto;
    word-spacing: 0.16em;         /* удвоенный зазор между словами (пробел шрифта 0.16em + столько же) */
    max-width: 100%; box-sizing: border-box;
}
.cw-assembled.cw-empty { display: flex; align-items: center; justify-content: center; }
.cw-assembled.cw-empty::after {
    content: 'выкладывайте буквы →';
    writing-mode: horizontal-tb; font-family: var(--font-ui);
    font-size: 0.85rem; color: var(--text-muted); font-style: italic;
}
.cw-assembled.cw-ok { color: var(--accent); }
.cw-assembled.cw-bad { color: #dc2626; }
[data-theme="dark"] .cw-assembled.cw-bad { color: #f87171; }

/* палитра «каждая буква — свой цвет» (составить слово). Цвет хранится в --cl,
   чтобы одни и те же классы подходили и собранной строке, и чипам, и менялись
   автоматически при переключении темы. */
.cl0 { --cl: #e03131; } .cl1 { --cl: #1971c2; } .cl2 { --cl: #2f9e44; }
.cl3 { --cl: #e8590c; } .cl4 { --cl: #9c36b5; } .cl5 { --cl: #0c8599; }
.cl6 { --cl: #d6336c; } .cl7 { --cl: #5f3dc4; } .cl8 { --cl: #f08c00; } .cl9 { --cl: #66a80f; }
[data-theme="dark"] .cl0 { --cl: #ff8787; } [data-theme="dark"] .cl1 { --cl: #74c0fc; }
[data-theme="dark"] .cl2 { --cl: #8ce99a; } [data-theme="dark"] .cl3 { --cl: #ffa94d; }
[data-theme="dark"] .cl4 { --cl: #eebefa; } [data-theme="dark"] .cl5 { --cl: #66d9e8; }
[data-theme="dark"] .cl6 { --cl: #faa2c1; } [data-theme="dark"] .cl7 { --cl: #b197fc; }
[data-theme="dark"] .cl8 { --cl: #ffc078; } [data-theme="dark"] .cl9 { --cl: #c0eb75; }
.cw-assembled :where(.cl0,.cl1,.cl2,.cl3,.cl4,.cl5,.cl6,.cl7,.cl8,.cl9) { color: var(--cl); }

.cw-placed { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; min-height: 2.2rem; }
.cw-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--bg-card); border: 1px solid var(--accent);
    color: var(--text-primary); border-radius: var(--radius-pill);
    padding: 4px 12px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    box-shadow: var(--shadow); transition: background 0.15s ease, box-shadow 0.15s ease;
}
.cw-chip:hover { background: var(--accent-glow); }
.cw-chip:where(.cl0,.cl1,.cl2,.cl3,.cl4,.cl5,.cl6,.cl7,.cl8,.cl9) { border-color: var(--cl); color: var(--cl); }
.cw-chip .cw-chip-num { font-size: 0.65rem; color: var(--text-muted); font-weight: 700; }
.cw-chip .cw-chip-x { color: var(--text-muted); font-weight: 700; }

.cw-tray-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.55rem; text-align: center; }
.cw-tray { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 1.1rem; }
/* ===== «Написать слово» (свободный набор) ===== */
.ww-translit { text-align: center; font-family: var(--font-ui); font-size: 1.1rem;
    color: var(--text-secondary); letter-spacing: 1px; min-height: 1.4em; margin-top: 0.45rem; }
.ww-alias { text-align: center; font-family: var(--font-ui); font-size: 0.92rem;
    color: var(--text-muted); letter-spacing: 0; margin-top: 0.12rem; min-height: 0; }
.ww-alias:empty { display: none; }
.ww-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 0.5rem 0 1.2rem; }
.ww-save { position: relative; }
.ww-save-menu { position: absolute; top: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; gap: 0.3rem; z-index: 20;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.4rem; box-shadow: var(--shadow); min-width: max-content; }
.ww-save-opt { display: block; width: 100%; text-align: left; white-space: nowrap;
    background: none; border: none; border-radius: calc(var(--radius) - 2px);
    color: var(--text-primary); font-size: 0.9rem; font-weight: 500; cursor: pointer; padding: 0.5rem 0.8rem; }
.ww-save-opt:hover { background: var(--accent-glow); color: var(--accent); }
.ww-save-sep { height: 1px; background: var(--border); margin: 0.15rem 0.3rem; }
.ww-save-swlabel { font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
    padding: 0.15rem 0.8rem 0.1rem; }
.ww-save-swatches { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.15rem 0.8rem 0.3rem;
    max-width: 11rem; }
.ww-save-swatch { width: 1.35rem; height: 1.35rem; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--border); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); padding: 0; }
.ww-save-swatch:hover { transform: scale(1.12); box-shadow: 0 0 0 2px var(--accent-glow); }
.ww-keyboard { display: flex; flex-direction: column; gap: 0.45rem; }
.ww-krow-label { font-size: 0.66rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0.35rem; }
.ww-krow { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ww-key { min-width: 44px; height: 44px; padding: 0 0.55rem; border: 1px solid var(--hairline);
    border-radius: var(--radius-pill); background: var(--bg-card); color: var(--text-primary);
    font-family: var(--font-ui); font-size: 1rem; font-weight: 600; cursor: pointer;
    box-shadow: var(--shadow);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease; }
.ww-key:hover { border-color: transparent; color: var(--accent); background: var(--accent-glow); }
.ww-key:active { transform: scale(0.97); background: var(--accent); color: #fff; border-color: var(--accent); }
#ww-out.cw-empty::after { content: 'печатайте или нажимайте буквы'; }
.ww-typebox { margin-bottom: 1rem; }
.ww-input { width: 100%; box-sizing: border-box; padding: 0.7rem 0.9rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); color: var(--text-primary);
    font-family: var(--font-ui); font-size: 1.15rem; letter-spacing: 1px; }
.ww-input:focus { outline: none; border-color: var(--accent); }
.ww-input::placeholder { color: var(--text-muted); letter-spacing: normal; font-size: 1rem; }
.ww-kbd-hint { font-size: 0.78rem; color: var(--text-muted); text-align: center; margin: 0.2rem 0 0.6rem; }
/* Кнопки раздела «Цифры и знаки»: глиф тодо сверху, подпись снизу. */
.ww-krow-signs { align-items: flex-end; }
.ww-key-sign { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: auto; min-height: 56px; padding: 0.35rem 0.5rem; }
.ww-key-glyph { font-family: 'TodoPozdneyev', serif; font-size: 1.5rem; line-height: 1;
    writing-mode: vertical-lr; text-orientation: mixed; min-height: 26px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--todo-ink); }
.ww-key-sign:hover .ww-key-glyph { color: var(--accent); }
.ww-key-sign:active .ww-key-glyph { color: #fff; }
.ww-key-cap { font-size: 0.6rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.3px; }
.cw-tile {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    background: var(--bg-card); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: 0.6rem 0.7rem; cursor: pointer; min-width: 58px;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cw-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cw-tile:active { transform: scale(0.98); }
.cw-tile-glyph {
    font-family: 'TodoPozdneyev', serif; font-size: 2rem; line-height: 1;
    writing-mode: vertical-lr; text-orientation: mixed;
    min-height: 50px; display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--todo-ink);
}
.cw-tile-cyr { font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.cw-tile.cw-used { opacity: 0.3; pointer-events: none; filter: grayscale(1); }

.cw-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 1rem; }
.cw-btn {
    border: none; border-radius: var(--radius-pill); padding: 0.65rem 1.2rem;
    font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    background: var(--accent); color: #fff; box-shadow: var(--shadow-cta);
}
.cw-btn:hover { background: var(--accent-dark); }
.cw-btn:active:not(:disabled) { transform: scale(0.98); }
[data-theme="dark"] .cw-btn { color: #fff; }
.cw-btn-ghost {
    background: var(--bg-card); color: var(--text-secondary);
    border: 1px solid var(--hairline); box-shadow: var(--shadow);
}
.cw-btn-ghost:hover {
    background: var(--accent-glow); color: var(--accent);
    border-color: var(--accent); box-shadow: var(--shadow);
}
.cw-btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
.cw-nav { display: flex; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.cw-nav .cw-btn { flex: 1; max-width: 220px; }
.cw-zoom { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.ww-color-btn { padding: 0.35rem 0.75rem; font-size: 0.78rem; margin-right: 0.4rem; border-radius: var(--radius-pill); }
.ww-color-btn.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.cw-zoom-label-txt { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.cw-zoom-btn { width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--radius-pill);
    background: transparent; color: var(--text-muted); font-size: 1.1rem; font-weight: 600; line-height: 1;
    cursor: pointer; transition: color 0.15s ease, background 0.15s ease; }
.cw-zoom-btn:hover { color: var(--accent); background: var(--accent-glow); }
.cw-zoom-btn:active { color: var(--accent); background: var(--accent-glow); }
.cw-zoom-val { min-width: 3.2em; text-align: center; font-weight: 700; font-size: 0.9rem; color: var(--text-secondary); }
.cw-feedback { text-align: center; min-height: 1.5rem; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem; }
.cw-feedback.cw-fb-ok { color: var(--accent); }
.cw-feedback.cw-fb-bad { color: #dc2626; }
[data-theme="dark"] .cw-feedback.cw-fb-bad { color: #f87171; }
.cw-forms-note { text-align: center; font-size: 0.78rem; color: var(--text-muted); }
.cw-forms-note b { color: var(--text-secondary); }
@media (max-width: 600px) {
    .cw-assembled { font-size: calc(2.8rem * var(--cw-zoom, 1)); }
    .cw-meaning {
        font-size: 1.35rem;
        letter-spacing: -0.03em;
        font-weight: 600;
    }
    .cw-nav .cw-btn { max-width: none; }
}

.modal-overlay {
    position: fixed; inset: 0;
    background: var(--overlay);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: var(--z-overlay);
    display: none; align-items: center; justify-content: center;
    padding: max(1rem, env(safe-area-inset-top, 0px))
             max(1rem, env(safe-area-inset-right, 0px))
             max(1rem, env(safe-area-inset-bottom, 0px))
             max(1rem, env(safe-area-inset-left, 0px));
}
.modal-overlay.active { display: flex; }
.modal {
    background: var(--bg-card); border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    max-width: 640px; width: 100%; max-height: 90vh; max-height: 90dvh; overflow-y: auto;
    box-shadow: var(--shadow-xl), inset 0 1px 0 var(--glass-edge); padding: 2.1rem; position: relative;
}
.modal-close {
    position: absolute; top: 0.65rem; right: 0.65rem;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--bg-secondary); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
    font-size: 1.35rem; line-height: 1; cursor: pointer; color: var(--text-muted);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.modal-close:hover { color: var(--accent); background: var(--accent-glow); border-color: transparent; }
.modal-back {
    display: inline-block; margin-bottom: 1rem;
    background: var(--bg-card); border: 1px solid var(--hairline);
    border-radius: var(--radius-pill); padding: 0.45rem 0.9rem;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    color: var(--text-secondary); font-family: var(--font-ui);
    box-shadow: var(--shadow);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.modal-back:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }
.modal h2 {
    font-size: var(--text-title); font-weight: 600;
    line-height: var(--leading-snug); letter-spacing: var(--tracking-title);
    margin-bottom: 1.5rem; padding-right: 2.25rem;
}
.modal-forms { display: flex; gap: 1.5rem; justify-content: center; margin: 2rem 0; flex-wrap: wrap; }
.modal-form-item { text-align: center; }
.modal-form-char {
    font-family: 'TodoPozdneyev', serif; font-size: 7rem;
    writing-mode: vertical-lr; text-orientation: mixed;
    min-height: 280px; width: 140px; display: flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1;
    background: var(--bg-secondary); border-radius: 12px; padding: 20px 12px;
    border: 1px solid var(--border); margin: 0 auto 0.75rem; color: var(--todo-ink);
}
.modal-form-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.modal-info { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.modal-info dt { font-weight: 600; font-size: 0.82rem; color: var(--text-muted); letter-spacing: -0.01em; margin-top: 1rem; }
.modal-info dd { font-size: 0.9rem; margin-top: 0.5rem; color: var(--text-secondary); line-height: 1.6; }
.modal-switch {
    display: flex; justify-content: space-between; gap: 0.75rem;
    margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.modal-switch-btn {
    flex: 1; background: var(--bg-card); border: 1px solid var(--hairline);
    border-radius: var(--radius-pill); padding: 0.55rem 0.85rem;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    color: var(--text-secondary); font-family: var(--font-ui);
    box-shadow: var(--shadow);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.modal-switch-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }
.modal-switch-btn:disabled { opacity: 0.35; cursor: default; }
.modal-swipe-hint { display: none; }
.modal { touch-action: pan-y; }
.expr-lb-overlay { touch-action: pan-y; }
@media (max-width: 720px) {
    .modal-swipe-hint {
        display: block;
        margin: 0.55rem 0 0;
        text-align: center;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--text-muted);
        letter-spacing: 0.01em;
    }
}

/* На телефоне ужимаем блоки форм, чтобы три формы (начало/середина/конец) помещались
   в один ряд, а не вытягивали модалку в длинную «простыню» с прокруткой. */
@media (max-width: 600px) {
    .modal h2 {
        font-size: 1.35rem;
        letter-spacing: -0.03em;
        font-weight: 600;
    }
    .modal-forms { gap: 0.5rem; margin: 1.25rem 0; }
    .modal-form-char {
        font-size: 4rem; min-height: 168px; width: 82px; padding: 14px 8px;
        border-radius: 16px;
        border-color: var(--hairline);
    }
}

/* Сенсорные устройства: увеличиваем самые мелкие управляющие элементы до
   комфортного тапа (наведения мышью нет — hover:none + крупный «грубый» указатель). */
@media (hover: none) and (pointer: coarse) {
    .cb-color { width: 34px; height: 34px; }
    .cb-letter { min-width: 44px; min-height: 44px; }
    .cb-zoombtn { min-width: 44px; min-height: 44px; }
    .cw-zoom-btn { width: 44px; height: 44px; }
    .search-clear { width: 40px; height: 40px; }
    .search-toggle { width: 44px; height: 44px; }
    .syl-chip { min-height: 2.5rem; padding: 0.45rem 0.85rem; }
    .pp-btn, .pp-reset { min-height: 2.5rem; padding: 0.5rem 0.9rem; }
    .riddle-lb-zoombtn { min-width: 44px; min-height: 44px; padding: 0.4rem 0.6rem; }
    .sum-zoombtn { min-width: 44px; min-height: 44px; }
    .theme-btn { width: 44px; height: 44px; }
    /* Панель шапки / поиск на телефоне — фиксированный px */
    .header-controls .theme-btn { width: 36px; height: 36px; font-size: 16px; }
    .search-toggle { width: 40px; height: 40px; }
    .nav-group-tab:hover,
    .nav-group-tab:focus-visible {
        background: rgba(0, 0, 0, 0.04);
        color: var(--text-secondary);
    }
    [data-theme="dark"] .nav-group-tab:hover,
    [data-theme="dark"] .nav-group-tab:focus-visible {
        background: rgba(255, 255, 255, 0.08);
    }
    .nav-group-tab:active { background: var(--accent-glow); color: var(--accent); }
    .nav-group-tab.is-active:hover,
    .nav-group-tab.is-active:active {
        background: var(--accent);
        color: #fff;
    }
    .nav-item:hover {
        color: var(--text-secondary);
        background: rgba(0, 0, 0, 0.03);
    }
    [data-theme="dark"] .nav-item:hover {
        background: rgba(255, 255, 255, 0.06);
    }
    .nav-item:active { background: var(--accent-glow); color: var(--accent); }
    .nav-item.active:hover,
    .nav-item.active:active {
        color: #fff;
        background: var(--accent);
    }
}

.practice-container {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 3rem 2rem; max-width: 600px;
    margin: 0 auto; box-shadow: var(--shadow);
}
.practice-char-display { text-align: center; margin-bottom: 2rem; }
.practice-audio-wrap {
    display: flex; justify-content: center; align-items: center;
    min-height: 2rem; margin: 0 auto 0.85rem;
}
.practice-audio-btn { width: 2.35rem; height: 2.35rem; font-size: 0.8rem; }
.practice-char {
    font-family: 'TodoPozdneyev', serif; font-size: 5rem;
    writing-mode: vertical-lr; text-orientation: mixed;
    min-height: 180px; display: flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1;
    background: var(--accent-glow); border: 1px solid var(--accent); border-radius: var(--radius-lg);
    padding: 1.5rem; color: var(--todo-ink); margin: 0 auto 1rem; width: 120px;
}
[data-theme="dark"] .practice-char {
    background: rgba(45, 212, 191, 0.06);
    border-color: rgba(45, 212, 191, 0.45);
}
.practice-prompt { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; }
.practice-btn {
    padding: 0.8rem 1.6rem; background: var(--accent); color: #fff; border: none;
    border-radius: var(--radius-pill); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
    cursor: pointer; box-shadow: var(--shadow-cta);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.practice-btn:hover { background: var(--accent-dark); }
.practice-btn:active { transform: scale(0.98); }
.practice-feedback {
    padding: 0.85rem 1rem; border-radius: var(--radius); margin: 0 0 1.25rem; font-weight: 600;
    text-align: center; min-height: 52px; display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; background: transparent; color: transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.practice-feedback.correct { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.practice-feedback.incorrect { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
[data-theme="dark"] .practice-feedback.correct { background: #022c22; border-color: #065f46; color: #6ee7b7; }
[data-theme="dark"] .practice-feedback.incorrect { background: #450a0a; border-color: #dc2626; color: #fca5a5; }
.practice-skip { display: block; margin: 0 auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; text-decoration: underline; }
.practice-skip:hover { color: var(--accent); }
.practice-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.stat-box { background: var(--bg-secondary); padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--border); text-align: center; }
.stat-label {
    font-size: var(--text-caption); color: var(--text-muted); font-weight: 600;
    letter-spacing: var(--tracking-label); margin-bottom: 0.5rem;
    line-height: var(--leading-snug);
}
.stat-value { font-size: 2rem; font-weight: 700; color: var(--accent); }

/* развёрнутая обратная связь */
.practice-feedback.rich { flex-direction: column; gap: 0.7rem; min-height: 0; height: auto; padding: 1rem 1.1rem; text-align: center; }
.fb-line { font-weight: 600; }
.fb-forms { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.fb-form { display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    background: rgba(255,255,255,.45); border-radius: 8px; padding: 0.5rem 0.55rem 0.4rem; }
[data-theme="dark"] .fb-form { background: rgba(0,0,0,.25); }
.fb-form-glyph { font-family: 'TodoPozdneyev', serif; font-size: 2rem; line-height: 1;
    writing-mode: vertical-lr; text-orientation: mixed; height: 60px;
    display: flex; align-items: center; justify-content: center; text-align: center; color: var(--todo-ink); }
.fb-form-lbl { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.8; }
.fb-note { font-size: 0.82rem; font-weight: 500; opacity: 0.9; line-height: 1.5; }
.practice-next { display: block; width: 100%; margin: -0.5rem 0 1.25rem; }

/* варианты ответа (режим «выбор из 4») — minmax(0,1fr), чтобы длинные подписи не разъезжали сетку */
.practice-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
    align-items: stretch;
}
.choice-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; min-width: 0; max-width: 100%;
    padding: 0.85rem 0.7rem; min-height: 66px;
    border: 1px solid var(--hairline); border-radius: var(--radius-lg);
    background: var(--bg-card); color: var(--text-primary);
    font-size: clamp(1.05rem, 3.6vw, 1.35rem); font-weight: 600; line-height: 1.15;
    box-shadow: var(--shadow); cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.1s, box-shadow 0.18s;
}
.choice-btn:hover:not(:disabled) { border-color: transparent; background: var(--accent-glow); color: var(--accent); }
.choice-btn:active:not(:disabled) { transform: scale(0.97); }
.choice-btn:disabled { cursor: default; }
.choice-label {
    min-width: 0; max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.choice-num { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0;
    border: 1px solid var(--hairline); border-radius: var(--radius-pill); width: 1.5rem; height: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center; }
.choice-btn.is-correct { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.choice-btn.is-wrong { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
[data-theme="dark"] .choice-btn.is-correct { background: #022c22; border-color: #065f46; color: #6ee7b7; }
[data-theme="dark"] .choice-btn.is-wrong { background: #450a0a; border-color: #dc2626; color: #fca5a5; }
.choice-btn.is-correct .choice-num, .choice-btn.is-wrong .choice-num { border-color: currentColor; color: inherit; }

/* тренажёр сингармонизма */
.harmony-ref {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin: 1rem 0 1.25rem; padding: 0.85rem 1rem;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
}
.harmony-ref-chip {
    font-size: 0.78rem; font-weight: 700; padding: 0.35rem 0.65rem; border-radius: var(--radius-pill);
    letter-spacing: 0.02em; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.harmony-ref-hard { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.harmony-ref-soft { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.harmony-ref-neutral { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
[data-theme="dark"] .harmony-ref-hard { background: #451a03; color: #fcd34d; border-color: #92400e; }
[data-theme="dark"] .harmony-ref-soft { background: #1e3a5f; color: #93c5fd; border-color: #1e40af; }
[data-theme="dark"] .harmony-ref-neutral { background: #2e1065; color: #c4b5fd; border-color: #5b21b6; }
.harmony-i-note {
    margin: 0 0 1rem; padding: 0.75rem 1rem;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.88rem; line-height: 1.55;
}
.harmony-i-note strong { display: block; margin-bottom: 0.35rem; }
.harmony-i-example { display: inline-block; margin: 0.25rem 0.75rem 0.25rem 0; }
.harmony-glyphs-compare.cw-empty { min-height: 2.5rem; border: 1px dashed var(--border); border-radius: var(--radius); }
.harmony-ref-active { transform: translateY(-1px); box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow); }
.harmony-rules-link { margin-left: auto; font-size: 0.82rem; background: none; border: none; padding: 0; }
.harmony-modes, .harmony-filters {
    display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-bottom: 1rem;
}
.harmony-filters-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.harmony-chip, .harmony-mode-chip {
    padding: 0.4rem 0.85rem; border: 1px solid var(--hairline); border-radius: var(--radius-pill);
    background: var(--bg-card); color: var(--text-secondary); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; box-shadow: var(--shadow);
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.harmony-chip:hover, .harmony-mode-chip:hover { border-color: transparent; color: var(--accent); background: var(--accent-glow); }
.harmony-chip.active, .harmony-mode-chip.active {
    background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-cta);
}
.harmony-mode-note {
    flex: 1 1 220px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.35;
}
.harmony-progress {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.75rem;
}
#harmony-score { color: var(--accent); }
.harmony-question-state {
    text-align: center; margin: -0.2rem 0 0.75rem;
    font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.45px;
}
.harmony-prompt {
    font-size: 1.05rem; font-weight: 600; color: var(--text-primary);
    text-align: center; margin-bottom: 1rem; line-height: 1.5;
}
.harmony-cons { font-family: 'TodoPozdneyev', serif; font-size: 1.15em; }
.harmony-row-hard { color: #b45309; }
.harmony-row-soft { color: #2563eb; }
[data-theme="dark"] .harmony-row-hard { color: #fcd34d; }
[data-theme="dark"] .harmony-row-soft { color: #93c5fd; }
.harmony-row-tag { font-size: 0.88em; font-weight: 500; color: var(--text-muted); }

/* вертикальные глифы (как cw-assembled / ww-out) */
.harmony-wrap.practice-container { max-width: 720px; }
.harmony-stage { margin: 0.5rem 0 1.25rem; }
.harmony-glyphs {
    margin: 0 auto;
    --cw-zoom: 1;
}
.harmony-glyphs.cw-empty::after { content: 'выберите ответ — слово появится здесь'; }
.harmony-glyphs-sm {
    font-size: calc(1.55rem * var(--cw-zoom, 1));
    min-height: 64px; min-width: 40px;
    max-height: none; padding: 0.2rem 0.35rem;
}
.harmony-glyphs-vowel {
    font-size: calc(2.1rem * var(--cw-zoom, 1));
    min-height: 52px; min-width: 36px;
    max-height: none; padding: 0.15rem 0.25rem;
}
.harmony-word-meta {
    text-align: center; font-size: 0.82rem; color: var(--text-muted);
    margin-top: 0.55rem; line-height: 1.45;
}
.harmony-legend {
    display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center;
    margin-top: 0.75rem;
}
.harmony-leg-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.65rem; padding: 0.2rem 0.5rem;
    border: 1px solid var(--hairline); border-radius: var(--radius-pill);
    font-size: 0.95rem; font-weight: 700;
    background: var(--bg-card);
}
.harmony-leg-chip:where(.cl0,.cl1,.cl2,.cl3,.cl4,.cl5,.cl6,.cl7,.cl8,.cl9) {
    border-color: var(--cl); color: var(--cl);
}
.harmony-leg-slot {
    border-style: dashed; border-width: 2px;
    border-color: var(--accent) !important; color: var(--accent) !important;
    min-width: 1.5rem;
}
.harmony-leg-slot-wrong { border-color: #dc2626 !important; color: #dc2626 !important; background: #fee2e2; }
.harmony-leg-slot-correct { border-color: #059669 !important; color: #047857 !important; background: #d1fae5; }
[data-theme="dark"] .harmony-leg-slot-wrong { color: #fca5a5 !important; background: #450a0a; }
[data-theme="dark"] .harmony-leg-slot-correct { color: #6ee7b7 !important; background: #022c22; }

.harmony-review {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem; width: 100%;
}
.harmony-review-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    border-radius: var(--radius); padding: 0.75rem;
    background: rgba(255,255,255,0.55); border: 1px solid currentColor;
}
[data-theme="dark"] .harmony-review-card { background: rgba(0,0,0,0.22); }
.harmony-review-wrong { color: #991b1b; }
.harmony-review-correct { color: #065f46; }
[data-theme="dark"] .harmony-review-wrong { color: #fca5a5; }
[data-theme="dark"] .harmony-review-correct { color: #6ee7b7; }
.harmony-review-label {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.45px;
}
.harmony-review-word { font-size: 0.82rem; font-weight: 700; color: currentColor; }
.harmony-review .harmony-legend { margin-top: 0.15rem; }
.harmony-finish-note { font-size: 0.86rem; font-weight: 500; line-height: 1.45; opacity: 0.9; }
.harmony-repeat-btn { width: auto; margin-top: 0.15rem; padding: 0.65rem 1.1rem; }

/* варианты ответа с вертикальными глифами */
.harmony-choices { grid-template-columns: repeat(2, 1fr); }
.harmony-choice-btn {
    flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 0.35rem; padding: 0.85rem 0.55rem; min-height: 0;
}
.harmony-choice-btn .choice-num { align-self: flex-start; }
.harmony-choice-stack {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    width: 100%;
}
.harmony-choice-cyr {
    font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.harmony-choice-word { min-height: 140px; }

/* кнопки гласных — как ww-key-sign в «Написать слово» */
.harmony-choice-vowel { min-height: 118px; justify-content: flex-start; }
.harmony-vowel-key {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem; width: 100%;
}
.harmony-vowel-key .ww-key-glyph {
    font-size: 2rem; min-height: 2.5rem; display: flex; align-items: center; justify-content: center;
}
.harmony-vowel-glyph :where(.cl0,.cl1,.cl2,.cl3,.cl4,.cl5,.cl6,.cl7,.cl8,.cl9) { color: var(--cl); }
.harmony-vowel-hint {
    font-size: 0.62rem; font-weight: 600; color: var(--text-muted); line-height: 1.2; text-align: center;
}
.harmony-vowel-empty {
    font-family: inherit; font-size: 1.35rem; color: var(--text-muted);
    writing-mode: horizontal-tb; line-height: 1;
}
.harmony-glyphs :where(.cl0,.cl1,.cl2,.cl3,.cl4,.cl5,.cl6,.cl7,.cl8,.cl9) { color: var(--cl); }

.harmony-explain {
    margin-top: 0.45rem; font-size: 0.85rem; font-weight: 500; line-height: 1.45; opacity: 0.95;
}

/* прогресс изучения */
.practice-progress { margin-top: 1.5rem; background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.pp-head > span:first-child { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
.pp-count { font-size: 0.95rem; font-weight: 700; color: var(--accent); }
.pp-bar { height: 10px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.pp-bar-fill { height: 100%; width: 0; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--accent), var(--accent-dark)); transition: width 0.4s ease; }
.pp-toggle { margin-top: 0.7rem; background: none; border: none; color: var(--text-secondary);
    font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0; }
.pp-toggle:hover { color: var(--accent); }
.pp-grid { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.8rem; }
.pp-chip { font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.55rem; border-radius: var(--radius-pill);
    border: 1px solid var(--hairline); background: var(--bg-card); color: var(--text-muted); cursor: default; }
.pp-chip.seen { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.pp-chip.learned { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
[data-theme="dark"] .pp-chip.seen { background: #422006; color: #fcd34d; border-color: #92400e; }
[data-theme="dark"] .pp-chip.learned { background: #022c22; color: #6ee7b7; border-color: #065f46; }
.pp-actions { margin-top: 0.9rem; text-align: right; }
.pp-reset { background: var(--bg-card); border: 1px solid var(--hairline); color: var(--text-muted);
    border-radius: var(--radius-pill); padding: 0.4rem 0.8rem; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; box-shadow: var(--shadow); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.pp-reset:hover { border-color: #dc2626; color: #dc2626; background: #fee2e2; }
.pp-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }
.pp-btn { background: var(--bg-card); border: 1px solid var(--hairline); color: var(--text-secondary);
    border-radius: var(--radius-pill); padding: 0.4rem 0.8rem; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; box-shadow: var(--shadow); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.pp-btn:hover { border-color: transparent; color: var(--accent); background: var(--accent-glow); }

/* верхняя панель управления практикой */
.practice-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    flex-wrap: wrap; margin-bottom: 1.25rem; }
.pc-toggle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
    font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); user-select: none; }
.pc-toggle input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: var(--radius-pill);
    background: var(--border); position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.pc-toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pc-toggle input:checked { background: var(--accent); }
.pc-toggle input:checked::after { transform: translateX(16px); }
.practice-streak { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary);
    background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
    padding: 0.35rem 0.8rem; box-shadow: var(--shadow); }
.practice-streak b { color: var(--accent); }

/* выбор серии слогов в блоке «Тренировка: слоги» */
.syl-groups { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.9rem 1rem; margin-bottom: 1.25rem; }
.syl-groups-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    flex-wrap: wrap; margin-bottom: 0.7rem; }
.syl-groups-head > span:first-child { font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-secondary); }
.syl-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; transition: opacity 0.2s; }
.syl-chips-disabled { opacity: 0.45; pointer-events: none; }
.syl-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem;
    border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--bg-card);
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; cursor: pointer;
    box-shadow: var(--shadow); transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s; }
.syl-chip:hover:not(:disabled) { border-color: transparent; color: var(--accent); background: var(--accent-glow); }
.syl-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-cta); }
.syl-chip.locked { opacity: 0.55; cursor: not-allowed; }
.syl-chip-pct { font-size: 0.7rem; font-weight: 700; opacity: 0.85; }

.ui-hint {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.syl-groups .ui-hint { margin: -0.15rem 0 0.75rem; }
.practice-progress .ui-hint { margin: 0.65rem 0 0; }

/* ===== ABOUT ===== */
.about-wrap { max-width: 760px; }
.about-hero { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; scroll-margin-top: calc(5.5rem + env(safe-area-inset-top, 0px)); }
.about-glyph {
    font-family: 'TodoPozdneyev', serif; font-size: 3rem;
    writing-mode: vertical-lr; text-orientation: mixed;
    color: var(--accent); background: var(--accent-glow);
    border: 1px solid var(--accent); border-radius: var(--radius);
    padding: 0.75rem 0.9rem; min-height: 110px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1;
}
.about-kicker {
    font-family: var(--font-display);
    font-size: var(--text-sm); letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--accent); font-weight: 600; margin-bottom: 0.35rem;
    line-height: var(--leading-snug);
}
.about-title {
    font-family: var(--font-display);
    font-size: var(--text-display); font-weight: 600;
    line-height: var(--leading-tight); letter-spacing: var(--tracking-display);
    font-feature-settings: 'ss01' 0, 'kern' 1;
}
.about-lead {
    font-size: var(--text-body-lg); color: var(--text-primary); margin-bottom: 1.15rem;
    letter-spacing: var(--tracking-body); line-height: var(--leading-body);
    max-width: var(--measure);
}
.about-oirat {
    font-family: 'BarinTodo', serif;
    font-size: 1.35em;
    line-height: 1;
    color: var(--todo-ink);
    white-space: nowrap;
}
.about-wrap p {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: var(--text-body);
    line-height: var(--leading-loose);
    letter-spacing: var(--tracking-body);
    max-width: var(--measure);
    overflow-wrap: break-word;
    hyphens: none;
    -webkit-hyphens: none;
}
.about-wrap em { color: var(--accent); font-style: normal; font-weight: 600; }
.about-h3 {
    font-family: var(--font-display);
    font-size: var(--text-title); font-weight: 600;
    line-height: var(--leading-snug); letter-spacing: var(--tracking-title);
    margin: 2rem 0 0.5rem;
}
.about-h3-sub {
    font-size: var(--text-body-lg);
    font-weight: 600;
    margin: 1.35rem 0 0.45rem;
    color: var(--text-primary);
}
.about-method-intro { font-style: italic; }
.about-howto {
    margin: 1rem 0 1.75rem;
    padding: 1.15rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.about-howto-list {
    margin: 0 0 1rem;
    padding-left: 1.15rem;
    color: var(--text-primary);
    line-height: var(--leading-body);
    max-width: var(--measure);
}
.about-howto-list li { margin-bottom: 0.55rem; }
.about-howto-list li:last-child { margin-bottom: 0; }
.about-howto-list strong { color: var(--text-primary); font-weight: 600; }
.about-inline-link {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.12em;
    text-underline-position: from-font;
}
.about-inline-link:hover { color: var(--accent-dark); }
.about-howto-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.about-steps { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0 1.5rem; }
.about-step {
    display: flex; gap: 0.9rem; align-items: flex-start;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem 1.1rem;
}
.about-step span:last-child { color: var(--text-secondary); }
.about-step-body { flex: 1; color: var(--text-primary); }
.about-step-body > p { margin: 0 0 0.45rem; }
.about-step-lead { margin-bottom: 0.55rem !important; }
.about-step-body .wr-glyph-item { margin-top: 0.15rem; }
.about-step-n {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .about-step-n { color: #fff; }
.about-source { font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1.5rem; font-style: italic; }
.about-source a,
.about-wiki-note a {
    color: var(--accent-dark, var(--accent));
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.about-source a:hover,
.about-wiki-note a:hover {
    border-bottom-color: var(--accent);
}
.about-wiki-note {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: -0.35rem 0 1.1rem;
    line-height: 1.55;
}
.about-pwa-details {
    margin: 1.35rem 0 1.75rem;
}
.about-pwa-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    padding: 0.35rem 0;
}
.about-pwa-summary::-webkit-details-marker { display: none; }
.about-pwa-summary::after {
    content: '';
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -0.2rem;
}
.about-pwa-details[open] > .about-pwa-summary::after {
    transform: rotate(-135deg);
    margin-top: 0.15rem;
}
.about-pwa-summary:hover { color: var(--accent-dark, var(--accent)); }
.about-pwa-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}
.about-pwa-details > .about-method-intro {
    margin: 0.65rem 0 0.85rem;
}
.about-pwa {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
}
.about-pwa-platform {
    padding: 1.05rem 1.2rem 1.15rem;
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.about-pwa-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border);
}
.about-pwa-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.about-pwa-browser {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.about-pwa-steps {
    margin: 0;
    padding-left: 1.35rem;
    color: var(--text-primary);
    line-height: 1.55;
}
.about-pwa-steps li { margin-bottom: 0.4rem; }
.about-pwa-steps li:last-child { margin-bottom: 0; }
.about-pwa-hint {
    color: var(--text-muted);
    font-size: 0.92em;
}
.about-pwa-note {
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.about-support {
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.about-support--page {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: none;
}
.about-support .about-h3 { margin-top: 0; }
.about-support-text {
    color: var(--text-secondary);
    margin: 0.35rem 0 0.9rem;
    line-height: 1.6;
}
.about-support-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.about-support-note {
    margin: 0.85rem 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-muted);
    line-height: var(--leading-body, 1.55);
    max-width: var(--measure, 65ch);
}
.about-support-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    color: var(--accent-dark, var(--accent));
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    padding-bottom: 1px;
}
.about-support-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.about-support-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Подзаголовок в шапке и увеличенный вариант глифа-заставки (целое слово «тодо») */
.about-hero-sub { color: var(--text-secondary); font-size: 0.95rem; margin-top: 0.35rem; line-height: 1.5; max-width: 46ch; }
.about-glyph-hero { font-size: 2.4rem; min-height: 220px; padding: 1rem 0.85rem; }

/* Портрет Зая-пандиты перед разделом «История создания» */
.about-portrait {
    margin: 1.5rem 0 2rem;
    text-align: center;
}
.about-portrait img {
    max-width: min(100%, 520px);
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    background: var(--bg-card);
}
.about-portrait figcaption {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    max-width: min(100%, 520px);
    margin-left: auto;
    margin-right: auto;
    line-height: var(--leading-body);
}
.about-photo-frame {
    position: relative;
    display: inline-block;
    max-width: min(100%, 520px);
    width: 100%;
    min-height: 220px;
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    background: var(--bg-secondary, var(--bg-card));
    border: 1px dashed var(--border);
}
.about-photo-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: min(100%, 520px);
    position: relative;
    z-index: 1;
}
.about-photo-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.25rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.45;
    font-style: normal;
}
.about-photo-placeholder small {
    font-size: 0.78rem;
    opacity: 0.85;
}

/* Маршрут переселения — декоративная схема без реальной карты: точки-остановки,
   соединённые линией, чтобы дать наглядное ощущение пути, не изображая границы. */
.about-route {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 0.35rem 0; margin: 1.25rem 0 0.5rem; padding: 1.1rem 0.75rem;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.about-route-point { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 84px; }
.about-route-point span:last-child { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); text-align: center; }
.about-route-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--accent); }
.about-route-dot-end { background: var(--accent); }
.about-route-line { flex: 1 1 32px; min-width: 24px; height: 2px; margin: 0 0.35rem 1.35rem;
    background: repeating-linear-gradient(to right, var(--accent) 0 6px, transparent 6px 11px); opacity: 0.7; }
.about-route-caption { font-size: 0.82rem; color: var(--text-muted); text-align: center; font-style: italic; margin-bottom: 1.25rem; }

/* Цитата-врезка */
.about-quote {
    position: relative; margin: 1.25rem 0; padding: 1.1rem 1.4rem 1.1rem 2.2rem;
    background: var(--accent-glow); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 1.02rem; font-style: italic; color: var(--text-primary); line-height: 1.65;
}
.about-quote::before {
    content: '“'; position: absolute; left: 0.5rem; top: 0.2rem;
    font-size: 2.2rem; font-style: normal; font-weight: 700; color: var(--accent); opacity: 0.55; line-height: 1;
}

/* Числовые факты */
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin: 1.25rem 0 1.5rem; }
.about-stat {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.9rem 0.6rem; text-align: center; box-shadow: var(--shadow);
}
.about-stat-n { font-size: 1.5rem; font-weight: 700; color: var(--accent); line-height: 1.1; }
.about-stat-l { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.3rem; line-height: 1.3; }

/* Витрина знаков — крупные глифы шрифта тодо с подписью кириллицей */
.about-glyphstrip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1.1rem 0 1.5rem; }
.about-gs-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.7rem 0.9rem; min-width: 64px; box-shadow: var(--shadow);
}
.about-gs-glyph {
    font-family: 'TodoPozdneyev', serif; font-size: 2rem; line-height: 1;
    writing-mode: vertical-lr; text-orientation: mixed; color: var(--todo-ink);
    min-height: 52px; display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.about-gs-cyr { font-size: 0.85rem; font-weight: 700; color: var(--accent); }

/* «Письмо сегодня» — три карточки */
.about-today { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin: 1.1rem 0 1.5rem; }
.about-today-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1rem 1.1rem; box-shadow: var(--shadow);
}
.about-today-title { font-weight: 700; color: var(--accent); margin-bottom: 0.4rem; font-size: 0.95rem; }
.about-today-card p { margin-bottom: 0; font-size: 0.88rem; }

/* Хронология */
.about-timeline { margin: 1rem 0 0.5rem; }
.about-tl-item { position: relative; padding: 0 0 1.4rem 1.75rem; }
.about-tl-item:last-child { padding-bottom: 0; }
.about-tl-dot {
    position: absolute; left: 3px; top: 0.35rem; width: 10px; height: 10px;
    border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.about-tl-item:not(:last-child)::before {
    content: ''; position: absolute; left: 7px; top: 1.1rem; bottom: -0.15rem; width: 2px; background: var(--border);
}
.about-tl-when { font-weight: 700; color: var(--accent); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.2rem; }
.about-tl-text { color: var(--text-secondary); line-height: 1.6; font-size: 0.92rem; }

@media (max-width: 640px) {
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .about-today { grid-template-columns: 1fr; }
    .about-route-line { flex-basis: 18px; }
}


/* ===== COURSE ===== */
.course-wrap { max-width: 800px; }
.course-timeline { display: flex; flex-direction: column; gap: 0; margin: 1.5rem 0 1rem; }
.course-stage { display: flex; gap: 1rem; position: relative; padding-bottom: 1.25rem; }
.course-stage:not(:last-child)::before {
    content: ''; position: absolute; left: 19px; top: 40px; bottom: -4px; width: 2px; background: var(--border);
}
.course-badge {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center; z-index: 1;
}
[data-theme="dark"] .course-badge { color: #fff; }
.course-body {
    flex: 1; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--shadow);
}
.course-stage-title {
    font-size: var(--text-heading); font-weight: 600; margin-bottom: 0.35rem;
    line-height: var(--leading-snug); letter-spacing: var(--tracking-title);
}
.course-stage-text {
    color: var(--text-secondary); font-size: var(--text-sm);
    line-height: var(--leading-body); margin-bottom: 0.8rem;
    max-width: var(--measure); letter-spacing: var(--tracking-body);
}
.course-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.course-go {
    padding: 0.45rem 0.95rem; font-family: inherit; font-size: 0.85rem; font-weight: 600;
    background: var(--accent-glow); color: var(--accent); border: 1px solid var(--accent);
    border-radius: var(--radius-pill); cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.course-go:hover { background: var(--accent); color: #fff; box-shadow: var(--shadow-cta); }
[data-theme="dark"] .course-go:hover { color: #fff; }

/* ===== COPYBOOK (пропись) ===== */
.cb-wrap { max-width: 980px; }
.cb-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.25rem 0 0.6rem; }
.cb-tab {
    padding: 0.5rem 0.9rem; font-family: inherit; font-size: 0.85rem; font-weight: 600;
    background: var(--bg-card); color: var(--text-secondary);
    border: 1px solid var(--hairline); border-radius: var(--radius-pill); cursor: pointer;
    box-shadow: var(--shadow);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cb-tab:hover { border-color: transparent; color: var(--accent); background: var(--accent-glow); }
.cb-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-cta); }
[data-theme="dark"] .cb-tab.active { color: #fff; }

.cb-letterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.75rem; }
.cb-letter {
    min-width: 36px; height: 36px; padding: 0 0.55rem; font-family: inherit; font-size: 0.95rem; font-weight: 600;
    background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--hairline);
    border-radius: var(--radius-pill); cursor: pointer; box-shadow: var(--shadow);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cb-letter:hover { border-color: transparent; color: var(--accent); background: var(--accent-glow); }
.cb-letter-all { width: auto; font-size: 0.8rem; color: var(--text-muted); }

.cb-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
    background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
    padding: 0.6rem 0.7rem; margin-bottom: 0.8rem; box-shadow: var(--shadow);
}
.cb-toolgrp { display: flex; align-items: center; gap: 0.35rem; }
.cb-tool-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.cb-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--hairline); cursor: pointer; padding: 0; transition: transform 0.15s, border-color 0.15s, opacity 0.2s; }
.cb-color:hover { transform: scale(1.1); }
.cb-color.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent); }
.cb-color.cb-dim { opacity: 0.4; }
.cb-size, .cb-tool-btn {
    padding: 0.4rem 0.75rem; font-family: inherit; font-size: 0.82rem; font-weight: 600;
    background: var(--bg-secondary); color: var(--text-secondary);
    border: 1px solid var(--hairline); border-radius: var(--radius-pill); cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.cb-size:hover, .cb-tool-btn:hover { border-color: transparent; color: var(--accent); background: var(--accent-glow); }
.cb-size.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-cta); }
[data-theme="dark"] .cb-size.active { color: #fff; }
.cb-tool-btn:disabled { opacity: 0.4; cursor: default; }
.cb-tool-btn:disabled:hover { border-color: var(--hairline); color: var(--text-secondary); background: var(--bg-secondary); }
.cb-tool-on { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-cta); }
[data-theme="dark"] .cb-tool-on { color: #fff; }
.cb-expand { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cb-expand:hover { background: var(--accent); color: #fff; box-shadow: var(--shadow-cta); }
[data-theme="dark"] .cb-expand:hover { color: #fff; }
.cb-range { width: 92px; accent-color: var(--accent); cursor: pointer; }
.cb-zoom-group { gap: 0.3rem; }
.cb-zoombtn { min-width: 38px; font-size: 1.05rem; line-height: 1; padding: 0.35rem 0.5rem; }
.cb-zoom-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); min-width: 44px; text-align: center; }

.cb-viewport {
    position: relative; height: 68vh; height: 68dvh; min-height: 360px; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-secondary); touch-action: none; cursor: crosshair;
}
.cb-pan { position: absolute; top: 0; left: 0; width: 100%; transform-origin: 0 0; will-change: transform; }
.cb-stage { display: none; position: relative; width: 100%; background: #fff; }
.cb-stage.active { display: block; }
.cb-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; transition: opacity 0.15s; }
.cb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

.cb-hint { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 4; pointer-events: none; }
.cb-hint.cb-hidden { display: none; }
.cb-hint-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; max-width: 340px; box-shadow: var(--shadow-xl); color: var(--text-secondary); font-size: 0.9rem; pointer-events: auto; }
.cb-hint-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.6rem; }
.cb-hint-row { margin-bottom: 0.4rem; line-height: 1.4; }
.cb-hint-ok {
    margin-top: 0.8rem; width: 100%; background: var(--accent); color: #fff;
    border: none; border-radius: var(--radius-pill); padding: 0.65rem 1rem;
    font-weight: 600; box-shadow: var(--shadow-cta); cursor: pointer;
}
[data-theme="dark"] .cb-hint-ok { color: #fff; }

/* развёрнутый (полноэкранный) режим */
.cb-board.zoomed {
    position: fixed; inset: 0; z-index: var(--z-fullscreen); background: var(--bg-primary);
    display: flex; flex-direction: column; padding: 0.5rem; gap: 0.5rem;
}
.cb-board.zoomed .cb-toolbar { order: 2; margin: 0; flex: 0 0 auto; }
.cb-board.zoomed .cb-viewport { order: 1; flex: 1 1 auto; height: auto; }

@media (max-width: 640px) {
    .cb-toolbar { gap: 0.35rem 0.45rem; padding: 0.5rem; }
    .cb-tool-btn, .cb-size { padding: 0.5rem 0.7rem; font-size: 0.85rem; touch-action: manipulation; }
    .cb-tool-label { display: none; }
    .cb-viewport { height: 60vh; height: 60dvh; min-height: 280px; }
    .cb-board.zoomed { padding: 0.35rem; padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px)); }
    .cb-board.zoomed .cb-toolbar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
    .cb-board.zoomed .cb-toolgrp { flex: 0 0 auto; }
}

/* ===== RULES ===== */
.rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.rule-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.25rem;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
    box-shadow: var(--shadow); border-left: 3px solid var(--accent);
}
.rule-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.rule-card:active { transform: translateY(0); }
.rule-tag {
    display: inline-block;
    font-size: 0.78rem; font-weight: 600; color: var(--accent);
    background: var(--accent-glow); padding: 0.2rem 0.6rem; border-radius: 6px; margin-bottom: 0.6rem;
    font-family: var(--font-ui);
}
.rule-title {
    font-size: var(--text-heading); font-weight: 600; margin-bottom: 0.5rem;
    color: var(--text-primary); line-height: var(--leading-snug);
    letter-spacing: var(--tracking-title);
}
.rule-body {
    font-size: var(--text-sm); color: var(--text-secondary);
    line-height: var(--leading-body); letter-spacing: var(--tracking-body);
    max-width: var(--measure);
}
.rule-num {
    float: right; font-size: 0.72rem; font-weight: 700; color: #fff;
    background: var(--accent); border-radius: var(--radius-pill); padding: 0.15rem 0.55rem;
    font-family: var(--font-ui);
}
[data-theme="dark"] .rule-num { color: #fff; }
.rule-card.rule-highlight {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-lg);
    animation: rulePulse 1.6s ease;
}
@keyframes rulePulse {
    0% { box-shadow: 0 0 0 0 var(--accent); }
    40% { box-shadow: 0 0 0 6px var(--accent-glow), var(--shadow-lg); }
    100% { box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-lg); }
}
.note-link {
    color: var(--accent); font-weight: 600; cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.note-link:hover { color: var(--accent-dark); }

/* ===== WORDS ===== */
.word-group { margin-bottom: 2rem; }
.word-group-title {
    font-size: var(--text-heading); font-weight: 600; color: var(--accent);
    margin-bottom: 0.9rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--accent-glow);
    letter-spacing: var(--tracking-title); line-height: var(--leading-snug);
}
.word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.85rem; }
.word-card {
    position: relative; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.1rem 1rem; cursor: pointer;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
    box-shadow: var(--shadow); text-align: center; overflow: hidden;
}
.word-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.word-card:active { transform: translateY(0); }
.word-old { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); }
.word-arrow { color: var(--accent); font-size: 1rem; margin: 0.35rem 0; opacity: 0.6; }
.word-reveal { max-height: 0; opacity: 0; transition: max-height 0.3s var(--ease), opacity 0.3s var(--ease); }
.word-card.revealed .word-reveal { max-height: 100px; opacity: 1; }
.word-card.revealed .word-hint { opacity: 0; }
.word-modern { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.word-meaning { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; font-style: italic; }
.word-hint {
    position: absolute; bottom: 0.5rem; left: 0; right: 0; text-align: center;
    font-size: 0.7rem; color: var(--text-muted); letter-spacing: -0.01em;
    transition: opacity 0.2s;
}
.word-card.revealed { padding-bottom: 1.1rem; }
.word-audio-row {
    position: absolute; top: 0.5rem; right: 0.5rem;
    margin: 0; padding: 0; border: none;
    z-index: 2;
}
.word-audio-btn { width: 1.9rem; height: 1.9rem; }

@media (max-width: 640px) {
    body {
        background-image:
            radial-gradient(700px 360px at 0% -5%, rgba(14, 111, 104, 0.06), transparent 55%),
            linear-gradient(180deg, #f8f9fb 0%, var(--bg-primary) 36%);
    }
    [data-theme="dark"] body {
        background-image:
            radial-gradient(700px 360px at 0% -5%, rgba(43, 184, 168, 0.04), transparent 55%),
            linear-gradient(180deg, #101012 0%, var(--bg-primary) 36%);
    }
    .char-grid { grid-template-columns: 1fr; gap: 12px; }
    .logo-sub { display: none; }
    .container { padding: 16px 14px 40px; }
    .search-input-wrap { flex: 1 1 100%; min-width: 0; }
    .practice-stats { grid-template-columns: 1fr; }
    .practice-container {
        padding: 1.5rem 1.1rem;
        border-radius: 22px;
        border: 1px solid var(--hairline);
        box-shadow: var(--shadow);
    }
    .about-hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .rules-grid { grid-template-columns: 1fr; gap: 12px; }
    .section-title { margin-bottom: 0.55rem; }
    .section-info {
        margin-bottom: 1.25rem;
        padding: 0.65rem 0 0.9rem;
        border-radius: 0;
    }
    /* Длинный текст дублирует подсказки внутри тренажёра — на телефоне прячем */
    .section-info-writer {
        display: none;
    }
    .writer-host { margin-bottom: 0.25rem; }
    .writer-frame {
        height: min(88dvh, 820px);
        min-height: 480px;
        border-radius: 16px;
    }
    .char-card {
        border-radius: 18px;
        padding: 1.15rem 1.05rem;
    }
    .char-card:hover { transform: none; }
    .char-card:active {
        transform: scale(0.985);
        box-shadow: var(--shadow);
    }
    .hp-card {
        border-radius: 22px;
        padding: 1.15rem 1.1rem;
    }
    .hp-cta {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        font-size: 16px;
        box-shadow: var(--shadow-cta);
    }
    .section-end-nav {
        gap: 10px;
        margin-top: 2rem;
        padding-top: 1.25rem;
        border-top-color: var(--hairline);
    }
    .section-next-btn,
    .back-to-nav {
        min-height: 34px;
        width: 100%;
        max-width: 15.4rem;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: -0.01em;
        box-shadow: var(--shadow);
    }
    .section-next-btn {
        box-shadow: var(--shadow-cta);
    }
    .section-next-btn:hover,
    .back-to-nav:hover {
        transform: none;
    }
    .modal {
        border-radius: 22px;
        padding: 1.5rem 1.15rem;
        max-height: 88dvh;
    }
    .word-card,
    .rule-card {
        border-radius: 16px;
        border-color: var(--hairline);
    }
    .rd-subnav {
        top: calc(52px + env(safe-area-inset-top, 0px));
        gap: 6px;
        padding: 6px 0;
        background: transparent;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    .rd-tab {
        padding: 10px 14px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -0.01em;
        border-color: var(--hairline);
        box-shadow: var(--shadow);
    }
    .rd-tab:hover { transform: none; }
    .rd-tab.active {
        box-shadow: var(--shadow-cta);
    }
    .rd-note,
    .rd-controls {
        border-radius: 16px;
        border-color: var(--hairline);
        border-style: solid;
        padding: 12px 14px;
        box-shadow: var(--shadow);
        background: var(--bg-card);
    }
    .rd-cell,
    .rd-prose {
        border-radius: 16px;
        border-color: var(--hairline);
    }
    .practice-btn,
    .cw-btn {
        min-height: 48px;
        font-size: 16px;
        border-radius: var(--radius-pill);
        font-weight: 600;
        letter-spacing: -0.01em;
    }
    .choice-btn {
        border-radius: 18px;
        border-color: var(--hairline);
        min-height: 56px;
    }
    .practice-choices { gap: 10px; }
    .cw-task,
    .cw-stage {
        border-radius: 22px;
        border-color: var(--hairline);
        padding: 1.2rem 1rem;
        box-shadow: var(--shadow);
    }
    .cw-stage { border-style: solid; }
    .course-body {
        border-radius: 18px;
        border-color: var(--hairline);
        padding: 1rem 1.05rem;
    }
    .course-go {
        min-height: 40px;
        padding: 0.5rem 1rem;
        font-size: 14px;
    }
    .cb-tabs { gap: 6px; }
    .cb-tab {
        padding: 10px 14px;
        font-size: 13px;
        font-weight: 600;
        border-color: var(--hairline);
        box-shadow: var(--shadow);
    }
    .cb-toolbar,
    .sum-toolbar {
        border-radius: 16px;
        border-color: var(--hairline);
        box-shadow: var(--shadow);
        padding: 10px;
    }
    .cb-letter {
        border-radius: var(--radius-pill);
        border-color: var(--hairline);
    }
    .modal-close {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-pill);
        background: var(--bg-secondary);
        top: 10px;
        right: 10px;
    }
    .modal-switch-btn,
    .modal-back {
        min-height: 44px;
        border-radius: var(--radius-pill);
        font-size: 14px;
        border-color: var(--hairline);
    }
    .lp-scale-track {
        height: 12px;
    }
    .lp-scale-compact .lp-scale-track {
        height: 8px;
    }
    .lp-unit-head {
        border-bottom-color: var(--hairline);
        letter-spacing: -0.02em;
    }
    .lp-node {
        width: 56px;
        height: 56px;
        box-shadow: var(--shadow);
    }
    .lp-node:not(:disabled):hover { transform: none; }
    .lp-node:not(:disabled):active { transform: scale(0.96); }
    .lp-card {
        border-radius: 16px;
        border-color: var(--hairline);
        padding: 1rem 0.65rem;
    }
    .lp-card:hover { transform: none; }
    .lp-flash-char {
        border-radius: 16px;
        border-color: var(--hairline);
    }
    .lp-flash-arrow {
        box-shadow: var(--shadow);
    }
    .search-empty {
        border-radius: var(--radius-lg);
        border: 1px dashed var(--border);
        padding: 1.5rem 1rem;
        box-shadow: none;
    }
}

/* ============================================================
   Раздел «Чтение» — связные тексты письмом Тодо (шрифт BarinTodo).
   Вертикальные столбцы, читаемые слева направо.
   ============================================================ */

.rd-note {
    margin: 0 0 1.25rem; padding: 0.85rem 1rem;
    background: var(--bg-secondary); border: 1px dashed var(--border);
    border-radius: var(--radius); color: var(--text-secondary);
    font-size: 0.85rem; line-height: 1.5;
}

/* Подвкладки жанров */
.rd-subnav {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 1.5rem;
    position: sticky; top: 0; z-index: 5;
    padding: 0.4rem 0; background: var(--bg-primary);
}
.rd-tab {
    padding: 0.5rem 1rem; border: 1px solid var(--hairline);
    border-radius: var(--radius-pill); background: var(--bg-card); color: var(--text-secondary);
    font-size: 0.88rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.rd-tab:hover { border-color: transparent; color: var(--accent); background: var(--accent-glow); }
.rd-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-cta); }

.rd-pane[hidden] { display: none; }

/* Базовый тодо-текст раздела */
.rd-todo {
    font-family: 'BarinTodo', serif;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    line-height: 1.15;
    color: var(--todo-ink);
    font-size: 1.9rem;
}

/* Одна строка стиха/фраза — один столбец без переноса */
.rd-line { white-space: nowrap; }

/* Каждое слово текста тодо — неразрывный блок: при обтекающем переносе
   (white-space: normal у .rd-prose/.riddle-lb-todo) браузер переносит
   в новый столбец только между такими блоками, никогда не разрывая
   отдельное слово посередине. */
.rd-todo-word { display: inline-block; }

/* «Краткие выражения»: текст в кодировке TodoPozdneyev — рисуем этим шрифтом
   (остальные вкладки чтения остаются на BarinTodo). */
.rd-todo-pozd { font-family: 'TodoPozdneyev', serif; }

/* Кликабельная карточка выражения + подсказка увеличения */
.rd-cell-expr {
    cursor: pointer; position: relative;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rd-expr-audio {
    position: absolute; top: 0.4rem; left: 0.4rem; z-index: 2;
}
.rd-expr-audio-btn { width: 1.9rem; height: 1.9rem; }
.expr-lb-audio {
    display: flex; justify-content: center; margin-bottom: 0.65rem;
}
.expr-lb-audio-btn { width: 2.4rem; height: 2.4rem; font-size: 0.85rem; }
.rd-cell-expr:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); border-color: var(--accent); }
.rd-cell-expr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-zoom-hint {
    position: absolute; top: 6px; right: 8px; font-size: 0.95rem; line-height: 1;
    color: var(--text-muted); opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.rd-cell-expr:hover .rd-zoom-hint,
.rd-cell-expr:focus-visible .rd-zoom-hint { opacity: .75; }

/* Карточка выражения растёт под свой текст */
.rd-cell-expr { max-width: 340px; }

/* Чипы скрытия строк на самой карточке */
.rd-cell-toggles { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-top: .7rem; }
.rd-chip {
    font-family: var(--font-ui); font-size: .68rem; font-weight: 600; letter-spacing: .2px;
    padding: .22rem .55rem; border-radius: var(--radius-pill); cursor: pointer;
    color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--hairline);
    box-shadow: var(--shadow);
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.rd-chip:hover { border-color: transparent; color: var(--accent); background: var(--accent-glow); }
.rd-chip.off { opacity: .45; text-decoration: line-through; }

/* Скрытие строк на КОНКРЕТНОЙ карточке (независимо от общих галочек) */
.rd-cell.rd-cell-hide-km .rd-km,
.rd-cell.rd-cell-hide-tr .rd-tr,
.rd-cell.rd-cell-hide-ru .rd-ru { display: none; }

/* Лайтбокс выражения — открыть карточку крупно */
.expr-lb-overlay {
    display: none; position: fixed; inset: 0; z-index: var(--z-panel);
    background: rgba(0,0,0,.62); backdrop-filter: blur(2px);
    align-items: center; justify-content: center; gap: 0.5rem; padding: 1.5rem;
}
.expr-lb-overlay.active { display: flex; }
.expr-lb-card {
    position: relative; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow);
    padding: 1.6rem 1.8rem; max-width: 92vw; max-height: 88vh;
    display: flex; flex-direction: column; align-items: center; gap: 1.1rem; overflow: auto;
}
.expr-lb-todo {
    writing-mode: vertical-lr; text-orientation: mixed;
    font-size: clamp(3.2rem, 13vh, 7rem); line-height: 1.1; color: var(--todo-ink);
}
.expr-lb-meta { text-align: center; }
.expr-lb-km { font-family: var(--font-ui); font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.expr-lb-ru { font-family: var(--font-ui); font-size: 1.1rem; font-weight: 500; color: var(--text-secondary); margin-top: .35rem; }
.expr-lb-tr { font-family: var(--font-ui); font-size: 1rem; color: var(--text-secondary); margin-top: .25rem; }
.expr-lb-count { font-family: var(--font-ui); font-size: .8rem; color: var(--text-muted); margin-top: .5rem; }
.expr-lb-close {
    position: fixed; top: 1rem; right: 1.2rem; background: none; border: none;
    font-size: 2.2rem; line-height: 1; color: #fff; cursor: pointer; opacity: .85; z-index: 1;
}
.expr-lb-close:hover { opacity: 1; }
.expr-lb-nav {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
    color: #fff; width: 46px; height: 46px; border-radius: var(--radius-pill); font-size: 1.7rem; line-height: 1;
    cursor: pointer; flex: 0 0 auto; transition: background .15s ease;
}
.expr-lb-nav:hover { background: rgba(255,255,255,.26); }
@media (max-width: 640px) {
    .expr-lb-overlay { padding: 0.5rem; gap: 0.2rem; }
    .expr-lb-card { padding: 1rem 1.1rem; }
    .expr-lb-nav { width: 40px; height: 40px; font-size: 1.5rem; }
    .expr-lb-close { top: .5rem; right: .6rem; }
}

/* Лайтбокс загадок: переиспользует expr-lb-overlay/expr-lb-card, но текст
   вопроса — обтекающий (не одна бесконечная колонка), крупный и удобный
   для чтения; отгадка раскрывается кнопкой прямо внутри окна. */
.riddle-lb-card { max-width: min(94vw, 620px); }
.riddle-lb-top {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    width: 100%; flex-wrap: wrap;
}
.riddle-lb-count {
    font-family: var(--font-ui); font-size: .8rem; font-weight: 600;
    letter-spacing: .3px; color: var(--text-muted);
}
/* Панель «Размер»: те же кнопки, что и у сводной таблицы букв (sum-tool-btn) */
.riddle-lb-zoom-group { display: flex; align-items: center; gap: 0.3rem; }
.riddle-lb-zoom-label-text {
    font-family: var(--font-ui); font-size: .78rem; font-weight: 600; color: var(--text-muted);
    margin-right: 0.1rem;
}
.riddle-lb-zoombtn { min-width: 30px; padding: 0.25rem 0.45rem; font-size: 0.95rem; }
/* Размер текста тодо в лайтбоксе масштабируется переменной --riddle-zoom
   (кнопки −/+ рядом со счётчиком «Загадка N / M»); сброс — при закрытии
   между сессиями значение сохраняется (localStorage), как и у атласа букв. */
.riddle-lb-todo {
    writing-mode: vertical-lr; text-orientation: mixed;
    white-space: normal; text-align: left;
    font-size: calc(clamp(1.7rem, 4.4vh, 2.5rem) * var(--riddle-zoom, 1)); line-height: 1.3;
    max-height: min(58dvh, 58vh, 460px); max-width: 100%;
    color: var(--todo-ink);
}
.riddle-lb-todo-a {
    font-size: calc(clamp(1.5rem, 3.8vh, 2.1rem) * var(--riddle-zoom, 1));
    max-height: min(40vh, 320px);
}
.riddle-lb-tr, .riddle-lb-ru {
    max-width: 46ch; text-align: left; margin-left: auto; margin-right: auto;
    font-size: calc(1rem * var(--riddle-zoom, 1));
}
.riddle-lb-answer {
    margin-top: 0.3rem; padding-top: 1rem; border-top: 1px dashed var(--border);
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.riddle-lb-answer[hidden] { display: none; }
#riddle-lb-reveal { margin-top: 0.3rem; }
@media (max-width: 640px) {
    .riddle-lb-todo { font-size: calc(clamp(1.4rem, 5vh, 1.9rem) * var(--riddle-zoom, 1)); max-height: 42vh; }
    .riddle-lb-todo-a { font-size: calc(clamp(1.3rem, 4vh, 1.7rem) * var(--riddle-zoom, 1)); max-height: 30vh; }
    .riddle-lb-tr, .riddle-lb-ru { max-width: 32ch; font-size: calc(.92rem * var(--riddle-zoom, 1)); }
    .riddle-lb-zoom-label-text { display: none; }
}

/* Группа строк (стих, пословица, строфа): столбцы слева направо */
.rd-lines {
    display: flex; flex-direction: row; gap: 0.55rem;
    align-items: flex-start;
}

/* Сетка коротких выражений */
.rd-grid {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.rd-cell {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0.9rem 0.7rem;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: var(--shadow);
}

/* Сетка блоков (пословицы, строфы) */
.rd-block-grid {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: flex-start;
}
.rd-block {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem 0.9rem;
    box-shadow: var(--shadow);
}
.rd-block-wide { width: 100%; }

/* Загадки */
.rd-riddle-grid {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;
}
.rd-riddle {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    box-shadow: var(--shadow); min-width: 120px;
    position: relative; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rd-riddle:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); border-color: var(--accent); }
.rd-riddle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-riddle:hover .rd-zoom-hint,
.rd-riddle:focus-visible .rd-zoom-hint { opacity: .75; }
.rd-riddle-num {
    align-self: flex-start;
    font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
    letter-spacing: .3px; color: var(--text-muted);
}
.rd-riddle-audio {
    position: absolute; z-index: 2;
}
.rd-riddle-audio-q { top: 0.55rem; right: 2.1rem; }
.rd-riddle-audio-a {
    position: relative; top: auto; right: auto;
    display: flex; justify-content: center; margin-bottom: 0.5rem;
}
.rd-riddle-audio-btn { width: 1.9rem; height: 1.9rem; }
.rd-reveal-btn {
    padding: 0.45rem 0.95rem; border: 1px solid var(--accent);
    border-radius: var(--radius-pill); background: var(--accent-glow); color: var(--accent);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.rd-reveal-btn:hover { background: var(--accent); color: #fff; box-shadow: var(--shadow-cta); }
.rd-riddle-a {
    padding-top: 0.6rem; border-top: 1px dashed var(--border);
    display: flex; justify-content: center; width: 100%; cursor: default;
}
.rd-riddle-a[hidden] { display: none; }
.rd-riddle-a-inner { display: flex; flex-direction: column; align-items: center; }

/* Загадки из Zagadki.xlsx (шрифт TodoPozdneyev): вопрос — обтекающий текст
   в рамке, ограниченный по высоте, а не одна нескончаемая колонка. Строки
   перевода/транслитерации/калмыцкой формы читаем шире и по левому краю —
   так длинные предложения не превращаются в узкую «лесенку». */
.rd-riddle-q .rd-prose { max-width: 460px; }
.rd-riddle-q .rd-tr,
.rd-riddle-q .rd-ru,
.rd-riddle-a .rd-tr,
.rd-riddle-a .rd-ru {
    max-width: 30ch; text-align: left; margin-left: auto; margin-right: auto;
}
.rd-riddle-q .rd-km,
.rd-riddle-a .rd-km { text-align: center; }

/* Песни */
.rd-song { margin-bottom: 2rem; }
.rd-song-title {
    font-size: 1.05rem; font-weight: 700; color: var(--accent);
    margin: 0 0 0.75rem;
}

/* Сказка (проза): абзацы перетекают в столбцы слева направо */
.rd-tale {
    display: flex; flex-direction: column; gap: 1.25rem;
}
.rd-prose {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.1rem 1rem;
    box-shadow: var(--shadow);
    max-height: 620px;
    white-space: normal;
}

@media (max-width: 640px) {
    .rd-todo { font-size: 1.6rem; }
    .rd-prose {
        max-height: 70vh;
        padding: 1rem 0.85rem;
    }
    .rd-song-title {
        font-size: 1.1rem;
        letter-spacing: -0.02em;
    }
}

/* --- Раздел «Чтение»: транслитерация, перевод, переключатели --- */
.rd-controls {
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    margin-bottom: 1rem; padding: 0.6rem 0.85rem;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.rd-toggle {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; user-select: none;
}
.rd-toggle input { accent-color: var(--accent); cursor: pointer; }

/* Современная калмыцкая форма (кириллица) */
.rd-km {
    font-family: var(--font-ui); font-weight: 600;
    font-size: 1rem; line-height: 1.35; color: var(--text-primary);
    margin-top: 0.55rem; text-align: center;
}

/* Транслитерация */
.rd-tr {
    font-style: italic; color: var(--text-secondary);
    font-size: 0.82rem; line-height: 1.4; margin-top: 0.45rem;
    text-align: center; max-width: 22ch;
}
/* В группах строк (стих/пословица) транслитерация идёт построчно, по левому краю */
.rd-tr-block { margin-top: 0.5rem; padding-left: 0.2rem; border-left: 2px solid var(--accent-light); }
.rd-tr-block .rd-tr { text-align: left; margin-top: 0.15rem; max-width: none; }
.rd-tr-prose { text-align: left; margin-top: 0.6rem; max-width: none; }

/* Перевод */
.rd-ru {
    font-size: 0.86rem; line-height: 1.45; color: var(--text-primary);
    margin-top: 0.5rem; text-align: center;
}
.rd-tr-block + .rd-ru, .rd-tr-prose + .rd-ru { text-align: left; }
.rd-empty { color: var(--text-muted); }

/* Переключатели скрывают соответствующие строки во всём разделе */
.rd-root.rd-hide-km .rd-km { display: none; }
.rd-root.rd-hide-tr .rd-tr,
.rd-root.rd-hide-tr .rd-tr-block { display: none; }
.rd-root.rd-hide-ru .rd-ru { display: none; }

.rd-tale-para {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.1rem 1rem; box-shadow: var(--shadow);
}
.rd-tale-para .rd-prose { background: none; border: 0; padding: 0; box-shadow: none; }

/* ============================================================
   ПРАВИЛА ПИСЬМА — единый блок с аккордеонами, диаграммами
   и кликабельными примерами знаков (раздел «writing_rules»).
   ============================================================ */

.wr-wrap { max-width: 900px; }

.wr-hero {
    margin-bottom: 1rem;
}
.wr-hero-main {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.wr-hero-main { padding: 1.2rem 1.25rem; }
.wr-hero-main .about-title { margin-bottom: 0.4rem; }
.wr-hero-main .about-lead { margin-bottom: 0; max-width: 62ch; }
.wr-hero-actions {
    display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-top: 1rem;
}
.wr-action-primary { width: auto; padding: 0.65rem 1rem; }
.wr-action-link {
    font: inherit; font-size: 0.82rem; font-weight: 600;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    background: var(--accent-glow);
    color: var(--accent);
    cursor: pointer;
    box-shadow: var(--shadow);
    touch-action: manipulation;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.wr-action-link:hover, .wr-action-link:focus-visible {
    background: var(--accent);
    color: #fff;
    outline: none;
    box-shadow: var(--shadow-cta);
}
.wr-action-link:active {
    transform: scale(0.98);
}
[data-theme="dark"] .wr-action-link:hover,
[data-theme="dark"] .wr-action-link:focus-visible { color: #fff; }

/* Три опоры в hero */
.wr-pillars {
    list-style: none; margin: 1rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem;
}
.wr-pillars li {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    background: var(--bg-secondary); border: 1px solid var(--hairline);
    border-radius: var(--radius); min-width: 0;
}
.wr-pillars strong {
    font-size: 0.88rem; font-weight: 700; color: var(--accent);
    letter-spacing: -0.01em;
}
.wr-pillars span {
    font-size: 0.75rem; color: var(--text-muted); line-height: 1.35;
}

/* Оглавление-чипы */
.wr-toc {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin: 0 0 1rem; padding: 0.15rem 0;
}
.wr-toc-chip {
    flex: 0 0 auto;
    font: inherit; font-size: 0.78rem; font-weight: 600;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--hairline); border-radius: var(--radius-pill);
    background: var(--bg-card); color: var(--text-secondary);
    cursor: pointer; box-shadow: var(--shadow);
    touch-action: manipulation;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wr-toc-chip:hover, .wr-toc-chip:focus-visible {
    background: var(--accent-glow); color: var(--accent);
    border-color: transparent; outline: none;
}

.wr-next-link { margin: 0.85rem 0 0.25rem !important; font-size: 0.9rem; }
.wr-ref-block {
    margin-top: 1.15rem; padding-top: 0.85rem;
    border-top: 1px dashed var(--hairline);
}

/* Три формы буквы — карточки вместо таблицы */
.wr-form-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem; margin: 0.85rem 0 1rem;
}
.wr-form-card {
    padding: 0.85rem 0.9rem;
    background: var(--bg-secondary); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); min-width: 0;
}
.wr-form-card-title {
    font-size: 0.95rem; font-weight: 700; color: var(--accent);
    margin-bottom: 0.35rem; letter-spacing: -0.01em;
}
.wr-form-card p {
    margin: 0 0 0.5rem !important; font-size: 0.86rem; line-height: 1.45;
    color: var(--text-secondary);
}
.wr-form-card .wr-glyphs-after { margin-bottom: 0; }

/* Аккордеон на нативных <details>/<summary> — доступность и клавиатура
   работают из коробки, без дополнительного JS. */
.wr-acc {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 0.75rem; overflow: hidden;
    box-shadow: var(--shadow); transition: box-shadow 0.2s;
}
.wr-acc[open] { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.wr-acc summary {
    list-style: none; cursor: pointer; padding: 1rem 1.2rem;
    display: flex; align-items: center; gap: 0.85rem;
    font-weight: 700; color: var(--text-primary); font-size: 1.02rem;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.wr-acc summary::-webkit-details-marker { display: none; }
.wr-acc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wr-acc-n {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent-glow); color: var(--accent); font-weight: 700;
    font-size: 0.95rem; display: flex; align-items: center; justify-content: center;
}
.wr-acc-title {
    min-width: 0; display: flex; flex-direction: column; gap: 0.08rem; line-height: 1.25;
}
.wr-acc-title small {
    color: var(--text-muted); font-size: 0.74rem; font-weight: 550;
}
.wr-acc-kind {
    margin-left: auto; flex-shrink: 0;
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.45px;
    color: var(--accent); background: var(--accent-glow);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    border-radius: var(--radius-pill); padding: 0.18rem 0.5rem;
}
.wr-acc-chev { margin-left: auto; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }
.wr-acc-kind + .wr-acc-chev { margin-left: 0; }
.wr-acc[open] .wr-acc-chev { transform: rotate(180deg); color: var(--accent); }
.wr-acc-body {
    padding: 0 1.2rem 1.25rem 4.1rem; color: var(--text-secondary); line-height: 1.7; font-size: 0.94rem;
    overflow-wrap: break-word;
}
.wr-acc-body p { margin-bottom: 0.8rem; }
.wr-acc-body p:last-child { margin-bottom: 0; }
.wr-acc-body strong { color: var(--text-primary); }
.wr-table-lead { margin: 0 0 0.35rem; }
.wr-glyphs-after {
    display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; justify-content: center;
    margin: 0.15rem 0 0.85rem;
}
.wr-acc-body .wr-glyphs-after:last-child { margin-bottom: 0; }
.wr-table td .wr-glyphs-after { margin: 0.2rem 0 0; }
.about-step-body .wr-glyphs-after { margin: 0.1rem 0 0; }
.wr-glyphs-after .wr-nurhun-ref { margin: 0; }
.wr-mistake-glyphs {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center;
    margin: 0.35rem 0 0.55rem;
}

/* Диаграмма направления письма */
.wr-dir-svg { display: block; margin: 0.5rem auto 1rem; max-width: 260px; width: 100%; height: auto; }
.wr-dir-svg .wr-line { stroke: var(--accent); stroke-width: 2.5; fill: none; }
.wr-dir-svg .wr-dot { fill: var(--todo-ink); }
.wr-dir-svg .wr-arrow { fill: var(--accent); }
.wr-dir-svg text { fill: var(--text-muted); font-size: 8px; font-family: var(--font-ui); }
.wr-dir-caption {
    text-align: center; font-size: 0.82rem; color: var(--text-muted); font-style: italic;
    margin-top: -0.4rem; margin-bottom: 0.5rem; line-height: 1.45; max-width: 28rem; margin-inline: auto;
}

/* нурһн — простая вертикальная линия (ось письма) */
.wr-nurhun-line {
    display: inline-block;
    width: 2px;
    background: var(--todo-ink);
    border-radius: 1px;
}
.wr-nurhun-line--inline { height: 1.35em; vertical-align: middle; }
.wr-nurhun-line-track {
    display: flex; align-items: flex-start; justify-content: center;
    height: 80px; width: 2.5px; flex-shrink: 0;
}
.wr-nurhun-line--card {
    height: 80px; width: 2.5px;
    transform: scaleY(0); transform-origin: top center;
    animation: wr-nurhun-draw 1.1s ease-out forwards;
}
.wr-nurhun-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.45rem; flex: 1; width: 100%;
}
.wr-nurhun-card-label {
    font-size: 0.78rem; font-weight: 700; color: var(--accent); line-height: 1.2;
    opacity: 0; animation: wr-nurhun-label-in 0.35s ease-out 0.95s forwards;
}
@keyframes wr-nurhun-draw {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
@keyframes wr-nurhun-label-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .wr-nurhun-line--card { transform: scaleY(1); animation: none; }
    .wr-nurhun-card-label { opacity: 1; animation: none; }
}
.wr-glyph-item--nurhun {
    justify-content: center; min-width: 72px; min-height: 118px; padding: 0.85rem 1rem;
}
.wr-glyph-item--nurhun .wr-glyph-hint { margin-top: 0.15rem; }
.wr-nurhun-ref {
    display: inline-flex; align-items: center; gap: 0.4rem; vertical-align: middle;
    padding: 0.15rem 0.55rem; margin: 0 0.1rem;
    background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
    cursor: pointer; font: inherit; color: inherit; box-shadow: var(--shadow);
}
.wr-nurhun-ref:hover, .wr-nurhun-ref:focus-visible {
    border-color: transparent; background: var(--accent-glow); outline: none;
}
.wr-nurhun-label { font-size: 0.85rem; font-weight: 700; color: var(--accent); }

.wr-vowels-chart {
    margin: 1rem 0 1.1rem;
    text-align: center;
}
.wr-vowels-chart figcaption {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

.wr-strokes-grid {
    margin: 1rem 0 1.1rem;
    text-align: center;
}
.wr-strokes-grid-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
.wr-strokes-grid picture {
    flex: 1 1 140px;
    max-width: 220px;
}
.wr-strokes-grid img,
.wr-vowels-chart img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
}
.wr-vowels-chart img { max-width: 760px; }
.wr-strokes-grid figcaption {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Полоса кликабельных знаков — переиспользует существующий .about-glyphstrip,
   но добавляет курсор/подсказку интерактивности. */
.wr-glyph-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0.9rem 0 1.1rem; }
.wr-glyph-row--solo { justify-content: center; }
.wr-glyph-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
    background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
    padding: 0.6rem 0.85rem; min-width: 60px; cursor: pointer; box-shadow: var(--shadow);
    transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.wr-glyph-item:hover, .wr-glyph-item:focus-visible {
    border-color: var(--accent); background: var(--accent-glow); transform: translateY(-2px);
    outline: none; box-shadow: var(--shadow-lg);
}
.wr-glyph-g {
    font-family: 'TodoPozdneyev', serif; font-size: 1.6rem; line-height: 1;
    writing-mode: vertical-lr; text-orientation: mixed; color: var(--todo-ink);
    min-height: 40px; display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.wr-glyph-c { font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.wr-glyph-item[aria-label*="нурһн"] .wr-glyph-c { color: var(--accent); font-weight: 700; }
.wr-glyph-hint {
    font-size: 0.68rem; color: var(--text-muted); max-width: 7.5rem;
    text-align: center; line-height: 1.35; hyphens: none;
}

/* Мини-уроки внутри правил письма. */
.wr-mini-title {
    font-size: 0.78rem; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.65rem;
}
.wr-round-lesson, .wr-final-lesson {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem; margin: 1rem 0;
}

.wr-round-lesson p { margin-bottom: 0.8rem; }
.wr-round-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}
.wr-round-card {
    display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; align-items: center;
    gap: 0.25rem; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0.85rem 0.55rem; text-align: center;
    box-shadow: var(--shadow);
}
.wr-round-pair {
    font-size: 0.86rem; font-weight: 700; color: var(--text-primary);
}
.wr-round-arrow {
    color: var(--accent); font-weight: 700; line-height: 1;
}
.wr-syll-glyph {
    font-family: 'TodoPozdneyev', serif; writing-mode: vertical-lr; text-orientation: mixed;
    min-height: 84px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.35rem; color: var(--todo-ink); line-height: 1;
}
.wr-round-note {
    font-size: 0.72rem; line-height: 1.35; color: var(--text-muted);
}
.wr-final-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 0.65rem;
}
.wr-final-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0.75rem 0.55rem;
    text-align: center; box-shadow: var(--shadow);
}
.wr-final-label { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); }
.wr-final-note { font-size: 0.7rem; line-height: 1.35; color: var(--text-muted); }

/* Таблицы (галики, цифры, пунктуация) */
.wr-table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 1rem; font-size: 0.88rem; }
.wr-table th, .wr-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.wr-table th { color: var(--text-muted); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.4px; }
.wr-table td { color: var(--text-secondary); }
.wr-table tr:last-child td { border-bottom: 0; }
.wr-table .wr-td-glyph { font-family: 'TodoPozdneyev', serif; writing-mode: vertical-lr; text-orientation: mixed; color: var(--todo-ink); font-size: 1.15rem; width: 40px; }

/* Мини-урок про букву «н»: три случая — перед гласной, перед согласной, в конце. */
.wr-n-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem; margin: 1rem 0;
}
.wr-n-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-top: 3px solid var(--accent); border-radius: var(--radius);
    padding: 0.9rem 0.75rem; text-align: center; box-shadow: var(--shadow);
}
.wr-n-dot { border-top-color: #2563eb; }
.wr-n-plain { border-top-color: #b45309; }
.wr-n-final { border-top-color: var(--accent); }
.wr-n-kicker {
    font-size: 0.68rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.45px;
}
.wr-n-title {
    min-height: 2.4em; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 700; color: var(--text-primary); line-height: 1.25;
}
.wr-n-word-glyph {
    --cw-zoom: 0.95;
    min-height: 96px; min-width: 44px; margin: 0.1rem auto;
}
.wr-n-word-glyph :where(.cl0,.cl1,.cl2,.cl3,.cl4,.cl5,.cl6,.cl7,.cl8,.cl9) { color: var(--cl); }
.wr-n-word { font-size: 0.82rem; font-weight: 700; color: var(--accent); }
.wr-n-note { font-size: 0.78rem; line-height: 1.45; color: var(--text-secondary); }
.wr-n-rule {
    background: var(--accent-glow); border: 1px solid var(--accent-light);
    border-radius: var(--radius); padding: 0.8rem 0.95rem;
    font-size: 0.88rem; color: var(--text-primary); line-height: 1.55;
}
.wr-n-rule br { display: none; }
@media (min-width: 520px) {
    .wr-n-rule br { display: inline; }
}

/* Ошибки новичков: «неверно» / «верно» */
.wr-mistake-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.wr-mistake {
    background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid #dc2626;
    border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow);
}
.wr-mistake-bad, .wr-mistake-good { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.88rem; line-height: 1.55; }
.wr-mistake-bad > span:last-child, .wr-mistake-good > span:last-child { min-width: 0; flex: 1; }
.wr-mistake-bad { color: var(--text-secondary); margin-bottom: 0.55rem; }
.wr-mistake-good { color: var(--text-primary); }
.wr-mistake-tag { flex-shrink: 0; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px;
    border-radius: var(--radius-pill); padding: 0.1rem 0.5rem; margin-top: 0.05rem; }
.wr-mistake-bad .wr-mistake-tag { color: #dc2626; background: rgba(220, 38, 38, 0.12); }
.wr-mistake-good .wr-mistake-tag { color: var(--accent); background: var(--accent-glow); }

@media (max-width: 640px) {
    .wr-wrap { max-width: none; }
    .wr-pillars { grid-template-columns: 1fr; gap: 0.4rem; }
    .wr-toc {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 0.85rem;
        padding-bottom: 2px;
        touch-action: pan-x;
    }
    .wr-toc::-webkit-scrollbar { display: none; }
    .wr-toc-chip { padding: 0.45rem 0.8rem; font-size: 0.76rem; }
    .wr-acc summary {
        padding: 0.95rem 1rem;
        gap: 0.65rem;
        border-radius: 16px;
    }
    .wr-acc-kind { display: none; }
    .wr-acc-body { padding: 0 0.95rem 1.1rem; }
    .wr-form-grid { grid-template-columns: 1fr; gap: 0.5rem; }
    .wr-mistake-grid { grid-template-columns: 1fr; gap: 12px; }
    .wr-mistake {
        border-radius: 16px;
        border-color: var(--hairline);
        padding: 1rem;
    }
    .wr-mistake-glyphs { margin-left: 0; justify-content: center; }
    .wr-n-grid { grid-template-columns: 1fr; gap: 12px; }
    .wr-round-grid { grid-template-columns: 1fr; }
    .wr-glyph-row { gap: 0.5rem; }
    .wr-n-rule { border-radius: 16px; }
}

/* ============================================================
   ПУТЬ — структурированный курс в духе Duolingo (раздел «path»).
   ============================================================ */

.lp-wrap { max-width: 640px; margin: 0 auto; }

.lp-scale-full {
    margin: 1rem 0 1.35rem;
    padding: 0.95rem 1.05rem 1.05rem;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--shadow);
}
.lp-scale-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}
.lp-scale-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent);
}
.lp-scale-count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.lp-scale-track {
    display: flex;
    gap: 3px;
    height: 10px;
}
.lp-scale-seg {
    flex: 1;
    min-width: 0;
    border-radius: 4px;
    background: var(--bg-secondary);
    overflow: hidden;
    border: 1px solid var(--hairline);
}
.lp-scale-seg-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.lp-scale-seg.is-done { border-color: transparent; }
.lp-scale-seg.is-current { box-shadow: 0 0 0 1px var(--accent); }
.lp-scale-now {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.lp-scale-compact {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.7rem 0 0;
}
.lp-intro-card .lp-scale-compact,
.lp-celebrate .lp-scale-compact,
.lp-result .lp-scale-compact { margin: 0.35rem auto 0.85rem; max-width: 22rem; }
.lp-scale-compact .lp-scale-track { flex: 1; height: 7px; }
.lp-scale-compact-count {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    flex-shrink: 0;
}

.lp-unit { margin-bottom: 2rem; }
.lp-unit-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-weight: 700; color: var(--text-primary); margin-bottom: 1rem;
    padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.lp-unit-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}
.lp-unit-meter {
    display: inline-block;
    width: 2.5rem;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--bg-secondary);
    overflow: hidden;
    border: 1px solid var(--hairline);
}
.lp-unit-meter-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-pill);
}

.lp-nodes { display: flex; flex-direction: column; gap: 0.9rem; }
.lp-row { display: flex; align-items: center; gap: 1rem; }
.lp-row.lp-left { justify-content: flex-start; }
.lp-row.lp-right { justify-content: flex-start; margin-left: 15%; }
@media (max-width: 480px) { .lp-row.lp-right { margin-left: 8%; } }

.lp-node {
    flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--hairline);
    box-shadow: var(--shadow);
}
.lp-node:not(:disabled):hover { transform: scale(1.04); }
.lp-node.lp-done { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-cta); }
.lp-node.lp-current {
    background: var(--accent-glow); color: var(--accent); border-color: var(--accent);
    animation: lpPulse 1.8s ease-in-out infinite;
}
.lp-node.lp-unlocked { background: var(--bg-card); color: var(--accent); border-color: var(--accent); }
.lp-node.lp-locked { cursor: not-allowed; opacity: 0.55; box-shadow: none; }
@keyframes lpPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
    50% { box-shadow: 0 0 0 5px transparent; }
}
[data-theme="dark"] .lp-node.lp-current {
    animation: none;
    box-shadow: var(--shadow);
}

.lp-label-title { font-weight: 700; color: var(--text-primary); font-size: 0.95rem; }
.lp-label-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.1rem; }
.lp-stars { color: var(--accent); letter-spacing: 1px; font-size: 0.85rem; margin-top: 0.2rem; }

/* Урок: карточки «выучить», квиз, результат — переиспользуют .practice-* стили */
.lp-lesson { max-width: 520px; margin: 0 auto; }
.lp-back {
    background: none; border: none; color: var(--accent); font-weight: 700; cursor: pointer;
    padding: 0; margin-bottom: 1rem; font-size: 0.9rem;
}
.lp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin: 1.2rem 0 1.6rem; }
.lp-card {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    width: 100%; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
    padding: 0.9rem 0.5rem; box-shadow: var(--shadow); cursor: pointer; font: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.lp-card:hover, .lp-card:focus-visible {
    border-color: var(--accent); transform: translateY(-2px); outline: none; box-shadow: var(--shadow-lg);
}
.lp-card-zoom {
    position: absolute; top: 6px; right: 8px; font-size: 0.9rem; color: var(--text-muted);
}
.lp-card:hover .lp-card-zoom, .lp-card:focus-visible .lp-card-zoom { color: var(--accent); }

/* Увеличенный вид одной буквы с перелистыванием */
.lp-flash-wrap { text-align: center; outline: none; }
.lp-flash-close {
    background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.95rem;
    cursor: pointer; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.lp-flash-close:hover { border-color: transparent; color: var(--accent); background: var(--accent-glow); }
.lp-flash-count { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.lp-flash-nav { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.lp-flash-forms { display: flex; gap: 1.2rem; justify-content: center; }
.lp-flash-char {
    font-family: 'TodoPozdneyev', serif; font-size: 4rem;
    writing-mode: vertical-lr; text-orientation: mixed;
    min-height: 170px; width: 88px; display: flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1;
    background: var(--bg-secondary); border-radius: 12px; padding: 12px 8px;
    border: 1px solid var(--border); margin: 0 auto 0.5rem; color: var(--todo-ink);
}
.lp-flash-arrow {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline);
    background: var(--bg-card); color: var(--accent); font-size: 1.2rem; cursor: pointer;
    box-shadow: var(--shadow);
}
.lp-flash-arrow:hover { border-color: transparent; background: var(--accent-glow); }
.lp-flash-cyr { font-weight: 700; color: var(--accent); font-size: 1.3rem; margin-top: 1rem; }
.lp-flash-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.4rem; }
@media (max-width: 480px) {
    .lp-flash-char { width: 60px; min-height: 130px; font-size: 3rem; }
    .lp-flash-forms { gap: 0.6rem; }
}
.lp-card-forms { display: flex; gap: 0.4rem; justify-content: center; }
.lp-form-item { text-align: center; }
.lp-form-char {
    font-family: 'TodoPozdneyev', serif; font-size: 1.5rem;
    writing-mode: vertical-lr; text-orientation: mixed;
    min-height: 54px; width: 34px; display: flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1;
    background: var(--bg-secondary); border-radius: 12px; padding: 4px;
    border: 1px solid var(--hairline); margin: 0 auto 0.3rem; color: var(--todo-ink);
}
.lp-form-char.lp-form-empty { color: var(--text-muted); font-family: var(--font-ui); font-size: 1rem; }
.lp-form-label { font-size: 0.62rem; color: var(--text-muted); font-weight: 600; }
.lp-card-cyr { font-weight: 700; color: var(--accent); font-size: 0.9rem; text-align: center; margin-top: 0.5rem; }

.lp-result { text-align: center; }
.lp-result-stars { font-size: 2.4rem; color: var(--accent); letter-spacing: 4px; margin-bottom: 0.5rem; }
.lp-result-actions { display: flex; flex-direction: column; gap: 0.55rem; align-items: stretch; margin-top: 1.15rem; }

.lp-jump-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
    width: 100%; margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: none;
    border-radius: var(--radius-xl, 28px); background: var(--accent); color: #fff;
    font-family: var(--font-ui); text-align: left; cursor: pointer; box-shadow: var(--shadow-cta);
}
.lp-jump-btn:hover { background: var(--accent-dark); }
.lp-jump-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.lp-jump-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.lp-jump-done {
    width: 100%; margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius-xl, 28px);
    background: var(--accent-glow); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--accent); font-weight: 600; text-align: center;
}

.lp-unit.is-current .lp-unit-head { border-bottom-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.lp-unit-kicker {
    display: block; width: 100%; font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.2rem;
}
.lp-unit.is-current .lp-unit-kicker { color: var(--accent); }
.lp-unit-head { flex-wrap: wrap; }
.lp-unit-title { flex: 1 1 auto; font-size: 1.05rem; }

.lp-row { position: relative; }
.lp-row-current { z-index: 1; }
.lp-duo-start {
    position: absolute; top: -1.85rem; left: 0; z-index: 2;
    padding: 0.35rem 0.85rem; border: none; border-radius: var(--radius-pill);
    background: var(--accent); color: #fff; font-family: var(--font-ui);
    font-size: 0.72rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-cta);
}
.lp-duo-start:hover { background: var(--accent-dark); }
.lp-label-lock { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; }
.lp-node.lp-current {
    width: 64px; height: 64px; background: var(--accent); color: #fff; border-color: transparent;
    box-shadow: var(--shadow-cta);
}

.lp-intro-card {
    text-align: center; padding: 2rem 1.5rem 1.6rem; border-radius: var(--radius-xl, 28px);
    background: var(--bg-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg);
}
.lp-intro-kicker {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 0.55rem;
}
.lp-intro-title {
    margin: 0; font-size: clamp(1.45rem, 4vw, 1.85rem); font-weight: 700;
    letter-spacing: -0.035em; line-height: 1.15; color: var(--text-primary);
}
.lp-intro-unit { margin-top: 0.4rem; font-size: 0.85rem; color: var(--text-muted); }
.lp-intro-sub, .lp-intro-goal {
    margin: 0.85rem 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--text-secondary);
}
.lp-intro-goal { color: var(--text-muted); font-size: 0.88rem; }
.lp-intro-start {
    margin-top: 1.4rem; width: 100%; padding: 0.95rem 1.25rem; border: none;
    border-radius: var(--radius-pill); background: var(--accent); color: #fff;
    font-family: var(--font-ui); font-size: 1.02rem; font-weight: 600; cursor: pointer;
    box-shadow: var(--shadow-cta);
}
.lp-intro-start:hover { background: var(--accent-dark); }
.lp-result-actions .lp-intro-start { margin-top: 0; }
.lp-text-btn {
    background: none; border: none; padding: 0.65rem; font-family: var(--font-ui);
    font-size: 0.92rem; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.lp-text-btn:hover { color: var(--accent); }

.lp-celebrate { padding-top: 1.25rem; }
.lp-celebrate-mark {
    width: 72px; height: 72px; margin: 0 auto 1.1rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--hairline));
}
.lp-celebrate-check {
    display: block; width: 14px; height: 26px;
    border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
    transform: rotate(45deg) translateY(-2px); margin-top: -4px;
}

.course-rail {
    position: sticky; top: calc(4.25rem + env(safe-area-inset-top, 0px));
    z-index: 35; margin: 0 0 0.85rem;
}
.course-rail[hidden] { display: none !important; }
.course-rail-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem 1rem; padding: 0.8rem 1.05rem; border: 1px solid var(--hairline);
    border-radius: var(--radius-xl, 28px); background: var(--glass);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--shadow-lg);
}
.course-rail-meta { min-width: 0; flex: 1 1 12rem; }
.course-rail-kicker {
    display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.15rem;
}
.course-rail-title {
    display: block; font-size: 0.98rem; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.course-rail-meta .lp-scale-compact { margin-top: 0.45rem; }
.course-rail-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.course-rail-btn {
    font-family: var(--font-ui); font-size: 0.84rem; font-weight: 600;
    border-radius: var(--radius-pill); padding: 0.55rem 1.05rem; cursor: pointer;
}
.course-rail-btn-primary {
    border: 1px solid transparent; background: var(--accent); color: #fff; box-shadow: var(--shadow-cta);
}
.course-rail-btn-primary:hover { background: var(--accent-dark); }
.course-rail-btn-secondary {
    border: 1px solid var(--hairline); background: transparent; color: var(--text-secondary);
}
.course-rail-btn-secondary:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--hairline));
    color: var(--accent); background: var(--accent-glow);
}

@media (max-width: 640px) {
    .course-rail { top: calc(3.4rem + env(safe-area-inset-top, 0px)); }
    .lp-duo-start { left: 50%; transform: translateX(-50%); }
    .lp-row.lp-right { margin-left: 0; }
}