/* ───── DESIGN TOKENS ───── */
  :root {
    --cream:   #FFFAF6;
    --linen:   #FBF3EC;
    --paper:   #FCF5F1;
    --blush:   #F5E9E6;
    --petal:   #F7CDD2;
    --rose:    #F2A6AE;
    /* #E07686 → #BC4B5E: тот же коралловый тон, но 4.9:1 на белом (WCAG AA
       для текста и иконок; старый давал 2.96:1). Пастель остаётся в --rose. */
    --coral:   #BC4B5E;
    --plum:    #8E3F4D;
    --berry:   #5C2A33;
    --ink:     #2A1A1E;
    --gold:    #C9A55C;
    --gold-soft: #E5CFA0;
    --sage:    #84C474;
    --line:    rgba(92,42,51,0.10);
    --line-strong: rgba(92,42,51,0.18);
    /* .55→.72 и .38→.58: вторичный текст 5.0:1 (AA), подсказки 3.4:1 */
    --soft:    rgba(92,42,51,0.72);
    --hush:    rgba(92,42,51,0.58);

    /* Семантические поверхности и статусы — тёмная тема переопределяет */
    --text2:   rgba(92,42,51,.8);   /* приглушённый основной текст */
    --veil:    rgba(92,42,51,.05);  /* едва заметная подложка */
    --card:    #FFFFFF;
    --ok-ink:  #4F7B43;
    --ok-deep: #2E5021;
    --bad-ink: #B33A4A;
    --bad-bg:  #FFE5E8;
    --bad-line:#D8525F;
    --gold-ink:#8A6A26;

    /* RGB-каналы акцента для rgba(...) — тёмная тема перекрашивает в синий */
    --accent-rgb: 188,75,94;
    --rose-rgb:   242,166,174;
    --petal-rgb:  247,205,210;

    /* Layered, pink-tinted shadows */
    --shadow-xs: 0 1px 1px rgba(92,42,51,.04);
    --shadow-sm: 0 1px 2px rgba(92,42,51,.04), 0 2px 6px rgba(var(--rose-rgb),.10);
    --shadow-md: 0 2px 6px rgba(92,42,51,.05), 0 8px 22px -10px rgba(var(--accent-rgb),.22);
    --shadow-lg: 0 4px 12px -4px rgba(92,42,51,.10), 0 18px 40px -16px rgba(var(--accent-rgb),.30);
    --shadow-glow: 0 0 0 4px rgba(var(--rose-rgb),.18), 0 10px 28px -10px rgba(var(--accent-rgb),.45);

    /* Recurring gradients. grad-coral углублён (#F4B0B7→#E07686 давал белому
       тексту 2.4–2.96:1; теперь 3.4–4.9:1, в центре кнопки ≈4.1:1). */
    --grad-coral: linear-gradient(140deg, #D9687A 0%, #BC4B5E 100%);
    --grad-warm:  linear-gradient(140deg, #F2A6AE 0%, #C9A55C 100%);
    --grad-berry: linear-gradient(150deg, #6B3340 0%, #2A1A1E 100%);
    --grad-cream: linear-gradient(180deg, #FFFFFF 0%, #FFF7F1 100%);

    /* Radii */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-2xl: 36px;

    /* Motion */
    --ease-out:    cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.32, 1.18, .55, 1);
    --t-fast: .15s;
    --t-base: .25s;
    --t-slow: .45s;
  }

  /* ───── BASE RESET ─────
     Эквивалент Tailwind Preflight: приложение было свёрстано при подключённом
     Tailwind CDN, который сбрасывал box-sizing/margins/borders глобально.
     Tailwind удалён (не использовался), но reset обязан остаться — без него
     элементы с width:100% + padding вылезают за край экрана. */
  *, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }
  html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; }
  body { margin: 0; line-height: inherit; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
  p, blockquote, figure, hr, pre, dl, dd { margin: 0; }
  ul, ol, menu { list-style: none; margin: 0; padding: 0; }
  img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: inherit; }
  button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
  button, select { text-transform: none; }
  button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }
  input::placeholder, textarea::placeholder { opacity: 1; color: var(--hush); }
  summary { display: list-item; }
  table { text-indent: 0; border-color: inherit; border-collapse: collapse; }

  * { -webkit-tap-highlight-color: transparent; }
  html, body { background: var(--linen); }
  body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); }
  /* Убирает 300ms-задержку тапа и случайный двойной-тап-зум на iOS */
  button, a, [role="button"], [tabindex], .nav-item, .chip, .card-press, .hangul-key, label, summary { touch-action: manipulation; }
  .display { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.02em; }
  .ko { font-family: 'Noto Sans KR', system-ui, sans-serif; }
  .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

  /* ───── APP SHELL ───── */
  .app-shell {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.7), transparent 60%),
      var(--cream);
    min-height: 100vh;
    min-height: 100dvh; /* мобильные браузеры: без скачка из-за адресной строки */
    position: relative;
    /* overflow:clip (не hidden!) клипает по ОБЕИМ осям → скругляет углы рамки,
       но НЕ делает шелл scroll-контейнером — иначе sticky-topbar уезжал бы с
       контентом на телефоне/планшете. Теперь topbar прибит к верху фрейма и
       его верхние углы скруглены вместе с рамкой. */
    overflow: clip;
    box-shadow: 0 0 60px rgba(92,42,51,.08);
  }
  .app-main { display: block; }

  /* Мобайл/планшет (<1024px): скроллбары скрыты везде — скролл работает,
     полоса не видна (как в нативных приложениях). */
  @media (max-width: 1023.98px) {
    * { scrollbar-width: none; -ms-overflow-style: none; }
    *::-webkit-scrollbar { width: 0; height: 0; display: none; }
  }

  /* Hidden by default — only visible on desktop */
  .sidenav { display: none; }

  /* ───── TABLET (≥480px): nicer page padding, slightly wider phone shell ───── */
  @media (min-width: 480px) {
    body { padding: 24px 0; }
    .app-shell {
      border-radius: 32px;
      min-height: calc(100vh - 48px);
      border: 1px solid var(--line);
      box-shadow: 0 30px 80px -30px rgba(92,42,51,.18), 0 0 60px rgba(var(--rose-rgb),.10);
    }
  }
  @media (min-width: 720px) {
    body {
      padding: 32px 0;
      background:
        radial-gradient(80% 60% at 20% 10%, rgba(var(--petal-rgb),.26), transparent 55%),
        radial-gradient(70% 60% at 90% 90%, rgba(201,165,92,.16), transparent 55%),
        linear-gradient(160deg, #FFF8F2 0%, #F7F0EA 60%, #EFE4DC 100%);
      min-height: 100vh;
    }
    .app-shell { max-width: 540px; }
  }

  /* ───── iPad (768–1023px): шире оболочка, крупнее сетки — не «телефонная колонка» ───── */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .app-shell { max-width: 720px; }
    .hero { padding: 26px 30px; }
    .page-head { padding: 26px 24px 10px; }
    /* Клавиатура хангыля просторнее */
    #consonants-grid, #vowels-grid { grid-template-columns: repeat(8, 1fr) !important; }
    .hangul-result { font-size: 104px !important; }
    /* Модалки чуть шире */
    .modal-card { max-width: 440px; }
    .modal-sheet { max-width: 520px; }
    /* Достижения: 5 колонок */
    #ach-modal [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(5, 1fr) !important; }
    /* Профильные ачивки переносятся, не скроллятся */
    #screen-profile .scroll-x { flex-wrap: wrap; gap: 8px; }
  }

  /* ───── DESKTOP (≥1024px): sidebar layout + wider main ───── */
  @media (min-width: 1024px) {
    html, body { height: 100%; overflow: hidden; }
    body { padding: 32px 24px; display: flex; align-items: stretch; justify-content: center; }
    .app-shell {
      max-width: 1180px;
      width: 100%;
      height: calc(100vh - 64px);
      min-height: auto;
      border-radius: 32px;
      display: grid;
      grid-template-columns: 280px 1fr;
      grid-template-rows: 100%;
      overflow: hidden;
    }
    .app-main {
      display: block;
      overflow-y: auto;
      /* Контент использует весь фрейм. padding:0 — чтобы topbar был ВРОВЕНЬ с краями
         фрейма и его верхний правый угол скруглялся вместе с рамкой (overflow:hidden).
         Горизонтальные отступы дают сами блоки контента (page-head, карточки). */
      max-width: none;
      width: 100%;
      margin: 0;
      padding: 0;
      scrollbar-width: thin;
    }
    /* Левый скролл (сайдбар) не нужен — прячем; правый (контент) остаётся */
    .sidenav { scrollbar-width: none; -ms-overflow-style: none; }
    .sidenav::-webkit-scrollbar { width: 0; height: 0; display: none; }
    .app-main::-webkit-scrollbar { width: 8px; }
    .app-main::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),.25); border-radius: 999px; }
    .app-main::-webkit-scrollbar-track { background: transparent; }

    /* Sidebar nav */
    .sidenav {
      display: flex;
      flex-direction: column;
      padding: 26px 18px 22px;
      border-right: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,250,246,.96), rgba(251,232,234,.55));
      overflow-y: auto;
      gap: 4px;
    }
    .sidenav-brand {
      display: flex; align-items: center; gap: 12px;
      padding: 0 6px 18px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 14px;
    }
    .sidenav-mark {
      width: 44px; height: 44px; border-radius: 14px;
      background: white;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; overflow: hidden;
      box-shadow: 0 0 0 1px var(--line), 0 4px 12px -5px rgba(var(--accent-rgb),.35);
    }
    .sidenav-title { font-weight: 700; font-size: 15px; color: var(--berry); line-height: 1.15; letter-spacing: -0.01em; }
    .sidenav-sub { font-size: 10.5px; color: var(--soft); margin-top: 2px; letter-spacing: .04em; }
    .sidenav-section-label {
      font-size: 10px; letter-spacing: 0.18em; color: var(--soft);
      padding: 0 14px; margin-bottom: 8px; font-weight: 600;
    }
    .sidenav-list {
      display: flex; flex-direction: column; gap: 2px;
      margin-bottom: 18px;
    }
    /* Sidebar nav items */
    .sidenav .nav-item {
      flex-direction: row !important;
      justify-content: flex-start;
      gap: 12px;
      padding: 11px 14px;
      border-radius: 14px;
      font-size: 13.5px;
      font-weight: 500;
      color: var(--berry);
      cursor: pointer;
      background: transparent;
      border: none;
      width: 100%;
      text-align: left;
      transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
    }
    .sidenav .nav-item span { font-size: 13.5px; font-weight: 500; line-height: 1; }
    .sidenav .nav-item i {
      width: 26px; height: 26px;
      font-size: 15px;
      background: transparent;
      box-shadow: none;
      transform: none !important;
    }
    .sidenav .nav-item:hover { background: rgba(255,255,255,.55); }
    .sidenav .nav-item.active {
      background: linear-gradient(140deg, rgba(var(--rose-rgb),.30), rgba(var(--accent-rgb),.18));
      color: var(--coral);
      box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.18);
    }
    .sidenav .nav-item.active i {
      background: transparent;
      color: var(--coral);
      box-shadow: none;
    }
    .sidenav-stats {
      margin-top: auto;
      padding: 14px 14px 12px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      display: flex; flex-direction: column; gap: 6px;
      box-shadow: var(--shadow-sm);
    }
    .sidenav-stats-row {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 12px; color: var(--berry);
    }
    .sidenav-stats-row strong { color: var(--coral); font-size: 14px; font-weight: 700; }
    .sidenav-quote {
      text-align: center;
      margin-top: 12px;
      padding: 12px 8px;
      font-family: 'Fraunces', Georgia, serif;
      font-style: italic;
      font-size: 13px;
      color: var(--berry);
    }

    /* Hide bottom nav on desktop */
    .bottomnav { display: none !important; }
    .screen { padding-bottom: 32px; min-height: auto; }

    /* Wider hero, refined spacing */
    .hero { padding: 28px 32px; }
    .page-head { padding: 28px 24px 12px; }

    /* 3-column games grid on desktop */
    #screen-games > div:last-child > div[style*="grid-template-columns"] { grid-template-columns: repeat(3, 1fr) !important; }
    /* Span-2 cards become full-row span-3 on desktop */
    #screen-games [style*="grid-column: span 2"] { grid-column: span 3 !important; }
    /* K-Pop card stays full width */
    [data-game-key="kpop"] { grid-column: span 3 !important; }

    /* Larger Hangul keyboard on desktop */
    #consonants-grid, #vowels-grid { grid-template-columns: repeat(10, 1fr) !important; }
    .hangul-result { font-size: 120px !important; }
    .hangul-display { padding: 48px 24px 32px !important; }

    /* Achievements: 6-column grid in modal */
    #ach-modal .modal-sheet { max-width: 600px !important; }
    #ach-modal [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(6, 1fr) !important; }

    /* Modals on desktop: bigger cards */
    .modal-card { max-width: 480px !important; }
    /* Sheets stay sane */
    .modal-sheet { max-width: 520px; }

    /* Topbar: less sticky-feel since main scrolls inside */
    .topbar { padding: 18px 24px; }

    /* Lesson modal sheet wider */
    #lesson-modal .modal-sheet { max-width: 520px; }

    /* Profile stats grid wider */
    #screen-profile .scroll-x { flex-wrap: wrap; gap: 8px; }
  }

  /* Ultra-wide (≥1400px): give the shell extra breathing room */
  @media (min-width: 1400px) {
    .app-shell { max-width: 1380px; grid-template-columns: 300px 1fr; }
    .app-main { max-width: none; padding: 0 36px; }
  }

  /* ───── SCREENS ───── */
  .screen { display: none; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); min-height: 100vh; opacity: 1; position: relative; z-index: 1; }
  /* Плавный единый вход экрана. Экран НЕ трансформируется целиком (иначе
     transform ломает position:sticky у .topbar) — поэтому анимируем КОНТЕНТ
     одним блоком: всё, что не topbar, мягко проявляется снизу за один заход.
     Никаких длинных пошаговых задержек — переход быстрый и плавный, без «глюка». */
  .screen.active { display: block; }
  .screen.active > *:not(.topbar) {
    animation: screenContentIn .32s var(--ease-out) both;
  }
  @keyframes screenContentIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  body.calm-motion .screen.active > *:not(.topbar) { animation: none !important; }
  /* Общение: список чатов грузится асинхронно (Firebase). Общий вход экрана
     проигрывался на ПУСТОЙ обёртке, она доходила до opacity:1, и контент
     «выскакивал» уже готовым → мигание. Здесь вход обёртки отключаем — ряды
     приходят со своей мягкой stagger-анимацией (.stagger-in). */
  #screen-social.active > *:not(.topbar) { animation: none; }

  /* ───── HEADER ───── */
  .topbar {
    position: sticky; top: 0; z-index: 30;
    background: linear-gradient(180deg, rgba(255,250,246,0.96) 0%, rgba(255,250,246,0.78) 100%);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--line);
    /* Единая высота и ритм шапки на ВСЕХ экранах (раньше прыгала: где-то
       большой заголовок, где-то маленький). min-height фиксирует высоту,
       нормализованные размеры заголовка/надписи — единый масштаб. */
    padding: 12px 20px;
    min-height: 64px;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
  }
  /* Единый масштаб заголовков в шапке (не больше/меньше от экрана к экрану).
     nowrap+ellipsis: длинный заголовок не переносится на 2-ю строку и не
     «раздувает» высоту шапки — высота остаётся единой на всех экранах. */
  .topbar .display { font-size: 20px !important; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar > div:first-child { min-width: 0; }
  .topbar .page-eyebrow { font-size: 10px; }
  .topbar-title { font-size: 17px; }
  /* Скругление шапки под рамку. На ≥480 шелл — скруглённая карточка, но sticky-шапка
     в ряде браузеров «вылезает» квадратными углами из overflow:clip — поэтому
     скругляем углы самой шапки. Планшет/мобайл-карточка: оба верхних угла.
     ПК (есть сайднав слева): только правый — левый примыкает к сайднаву. */
  @media (min-width: 480px) and (max-width: 1023.98px) {
    .app-main .topbar, .screen > .topbar { border-radius: 32px 32px 0 0; }
  }
  @media (min-width: 1024px) {
    .app-main .topbar { border-top-right-radius: 30px; }
  }
  .topbar::after {
    content: ''; position: absolute; left: 20px; right: 20px; bottom: -1px;
    height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.22), transparent);
    pointer-events: none;
  }
  .topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .topbar-mark {
    width: 40px; height: 40px; border-radius: 13px;
    background: white;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
    box-shadow: 0 0 0 1px var(--line), 0 3px 10px -4px rgba(var(--accent-rgb),.35);
    position: relative;
  }
  .topbar-title { font-weight: 600; font-size: 15px; color: var(--berry); letter-spacing: -0.01em; line-height: 1.1; }
  .topbar-sub   { font-size: 10px; color: var(--soft); margin-top: 2px; letter-spacing: 0.06em; text-transform: lowercase; }
  .stat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--grad-cream);
    border: 1px solid var(--line);
    border-radius: 999px; padding: 6px 12px;
    font-size: 13px; font-weight: 600; color: var(--berry);
    font-variant-numeric: tabular-nums; /* XP/стрик не «прыгают» при смене цифр */
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6);
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
  }
  .stat-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.6); }
  .stat-pill .ico { font-size: 12px; }

  /* ───── PAGE TITLE BLOCK ───── */
  .page-head { padding: 20px 20px 8px; }
  .page-eyebrow {
    font-size: 10px; font-weight: 600; letter-spacing: 0.22em;
    color: var(--coral); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .page-eyebrow::before {
    content: ''; width: 14px; height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
    opacity: .8;
  }
  .page-title { font-size: 28px; line-height: 1.1; color: var(--berry); margin-top: 6px; letter-spacing: -0.02em; }
  .page-meta  { font-size: 12px; color: var(--soft); margin-top: 4px; }

  /* ───── CARDS ───── */
  .card {
    background: var(--grad-cream);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
  }
  .card-padded { padding: 18px; }
  .card-press {
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out);
    cursor: pointer;
  }
  .card-press:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
  .card-press:active { transform: scale(.985); box-shadow: var(--shadow-sm); }

  /* ───── BUTTONS ───── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 18px; border-radius: var(--r-md);
    font-weight: 600; font-size: 14px; cursor: pointer;
    border: 1px solid transparent;
    letter-spacing: 0.005em;
    transition: transform var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
    will-change: transform;
  }
  .btn:active { transform: scale(.97); }
  .btn-primary {
    background: linear-gradient(140deg, #6B3340 0%, #2A1A1E 100%);
    color: white;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.10);
  }
  .btn-primary:hover { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.14); }
  .btn-rose {
    background: var(--grad-coral);
    color: white;
    box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb),.55), inset 0 1px 0 rgba(255,255,255,.30);
  }
  .btn-rose:hover { box-shadow: 0 10px 24px -8px rgba(var(--accent-rgb),.7), inset 0 1px 0 rgba(255,255,255,.35); }
  .btn-ghost {
    background: var(--card); color: var(--berry); border-color: var(--line);
    box-shadow: var(--shadow-xs);
  }
  .btn-ghost:hover { border-color: var(--rose); color: var(--coral); }
  .btn-block   { width: 100%; }

  /* ───── PILL / CHIP ───── */
  .chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  }
  .chip-blush { background: var(--blush); color: var(--berry); }
  .chip-gold  { background: linear-gradient(135deg, rgba(201,165,92,.20), rgba(201,165,92,.10)); color: var(--gold-ink); }
  .chip-berry { background: var(--berry); color: white; }
  .chip-coral { background: var(--grad-coral); color: white; box-shadow: 0 2px 6px -2px rgba(var(--accent-rgb),.55); }
  .chip-sage  { background: rgba(132,196,116,.18); color: var(--ok-ink); }

  /* ───── BOTTOM NAV ───── */
  .bottomnav {
    position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 100%; max-width: 440px;
    background: linear-gradient(180deg, rgba(255,250,246,0.86) 0%, rgba(255,250,246,0.98) 100%);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-top: 1px solid var(--line);
    /* flex, а не сетка из 5: у админа пунктов больше (Журнал/Ученики/Лента) */
    display: flex;
    padding: 10px 6px calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    box-shadow: 0 -8px 24px -12px rgba(92,42,51,.08);
  }
  .bottomnav .nav-item { flex: 1 1 0; min-width: 0; }
  .bottomnav .nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* У админа 8 пунктов — ужимаем подписи, чтобы влезли на 375px */
  body.admin-nav .bottomnav { padding: 10px 2px calc(16px + env(safe-area-inset-bottom, 0px)); }
  body.admin-nav .bottomnav .nav-item { padding: 6px 1px; gap: 3px; }
  body.admin-nav .bottomnav .nav-item span { font-size: 8.5px; letter-spacing: 0; }
  body.admin-nav .bottomnav .nav-item i { width: 30px; }
  @media (min-width: 480px) {
    .bottomnav { border-radius: 0 0 32px 32px; }
  }
  .nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 4px; border-radius: 14px;
    font-size: 10px; font-weight: 500; color: var(--soft);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease-out);
    position: relative;
    /* <button> reset so the nav buttons look identical to the old divs */
    background: none; border: 0; font-family: inherit; width: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-item i {
    font-size: 17px;
    width: 38px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    transition: background var(--t-base) var(--ease-out),
                color var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-spring);
    position: relative;
    z-index: 1;
  }
  .nav-item:hover { color: var(--berry); }
  .nav-item.active { color: var(--coral); font-weight: 600; }
  .nav-item.active i {
    background: linear-gradient(140deg, rgba(var(--rose-rgb),.22), rgba(var(--accent-rgb),.14));
    color: var(--coral);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.18);
  }

  /* ───── PROGRESS ───── */
  .progress { height: 6px; background: rgba(var(--rose-rgb),.22); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(92,42,51,.06); }
  .progress > i {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--coral), var(--gold));
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(var(--accent-rgb),.45);
    transition: width var(--t-slow) var(--ease-out);
  }

  .progress-segments { display: flex; gap: 3px; }
  .progress-segments > span {
    flex: 1; height: 5px; border-radius: 999px;
    background: rgba(255,255,255,.5);
    transition: background var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  }
  .progress-segments > span.done    { background: linear-gradient(90deg, var(--berry), var(--plum)); }
  .progress-segments > span.current {
    background: white;
    box-shadow: 0 0 0 2px rgba(201,165,92,.45), 0 0 10px rgba(201,165,92,.55);
    animation: segPulse 1.6s ease-in-out infinite;
  }
  @keyframes segPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(201,165,92,.45), 0 0 10px rgba(201,165,92,.55); }
    50%      { box-shadow: 0 0 0 3px rgba(201,165,92,.30), 0 0 14px rgba(201,165,92,.75); }
  }

  /* ───── HERO LESSON ───── */
  .hero {
    border-radius: var(--r-xl);
    background:
      radial-gradient(120% 80% at 85% 0%, rgba(255,255,255,.55), transparent 55%),
      radial-gradient(90% 70% at 20% 110%, rgba(201,165,92,.20), transparent 60%),
      linear-gradient(150deg, #FFF4EE 0%, #FBE8EA 45%, #F2A6AE 100%);
    padding: 22px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.5);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  }
  .hero:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -4px rgba(92,42,51,.12), 0 24px 48px -18px rgba(var(--accent-rgb),.40); }
  .hero:active { transform: translateY(0); }
  .hero::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
    pointer-events: none; mix-blend-mode: overlay;
  }

  /* ───── LESSON PATH ───── */
  .lesson-tile {
    width: 92px; height: 92px;
    border-radius: 22px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    position: relative;
    background: var(--grad-cream);
    border: 1.5px solid rgba(var(--rose-rgb),.28);
    box-shadow:
      0 5px 0 rgba(92,42,51,.06),
      0 12px 28px -10px rgba(var(--accent-rgb),.28),
      inset 0 1px 0 rgba(255,255,255,.85);
    transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
  }
  .lesson-tile:hover { transform: translateY(-3px); }
  .lesson-tile:active { transform: translateY(-1px); }

  .lesson-tile .tile-eyebrow {
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--coral);
    font-weight: 700;
    text-transform: uppercase;
  }
  .lesson-tile .tile-main {
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
    color: var(--berry);
  }
  .lesson-tile .tile-main.ko {
    font-family: 'Noto Sans KR', system-ui, sans-serif;
    font-size: 30px;
  }

  .lesson-tile.done {
    background: var(--grad-coral);
    border-color: transparent;
    color: white;
    box-shadow:
      0 5px 0 rgba(142,63,77,.32),
      0 14px 30px -10px rgba(var(--accent-rgb),.50),
      inset 0 1px 0 rgba(255,255,255,.35);
  }
  .lesson-tile.done .tile-eyebrow { color: rgba(255,255,255,.85); }
  .lesson-tile.done .tile-main    { color: white; font-size: 26px; }

  .lesson-tile.current {
    background: linear-gradient(140deg, var(--coral) 0%, var(--gold) 100%);
    border-color: transparent;
    color: white;
    box-shadow:
      0 0 0 5px rgba(201,165,92,.20),
      0 5px 0 rgba(142,63,77,.32),
      0 16px 34px -8px rgba(var(--accent-rgb),.55),
      inset 0 1px 0 rgba(255,255,255,.30);
    animation: tile-pulse 2.6s ease-in-out infinite;
  }
  .lesson-tile.current .tile-eyebrow { color: rgba(255,255,255,.95); }
  .lesson-tile.current .tile-main    { color: white; }

  .lesson-tile.locked {
    background: rgba(255,255,255,.55);
    border: 1.5px dashed rgba(var(--rose-rgb),.55);
    color: rgba(92,42,51,.60);
    box-shadow: 0 3px 0 rgba(92,42,51,.04);
  }
  .lesson-tile.locked .tile-main { color: rgba(92,42,51,.60); font-size: 22px; }

  .lesson-tile.open {
    background: var(--card);
    border: 1.5px solid rgba(var(--rose-rgb),.65);
  }

  @keyframes tile-pulse {
    0%, 100% {
      box-shadow:
        0 0 0 5px rgba(201,165,92,.20),
        0 5px 0 rgba(142,63,77,.32),
        0 16px 34px -8px rgba(var(--accent-rgb),.55),
        inset 0 1px 0 rgba(255,255,255,.30);
    }
    50% {
      box-shadow:
        0 0 0 12px rgba(201,165,92,.10),
        0 5px 0 rgba(142,63,77,.32),
        0 18px 38px -8px rgba(var(--accent-rgb),.65),
        inset 0 1px 0 rgba(255,255,255,.35);
    }
  }

  /* ───── CHAT & FRIENDS ───── */
  .profile-nav-badge {
    position: absolute;
    top: 2px;
    right: 18px;
    background: linear-gradient(140deg, var(--coral), var(--rose));
    color: white;
    font-size: 9px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cream);
    line-height: 1;
    pointer-events: none;
    z-index: 6; /* поверх объёмного бокса активной иконки — иначе число пряталось за ним */
    box-shadow: 0 2px 6px -1px rgba(var(--accent-rgb),.45);
    animation: badge-pop .35s var(--ease-spring);
  }
  @keyframes badge-pop {
    0%   { transform: scale(.5); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
  }

  /* ── Chat as a full page (not a modal) ── */
  .chat-page {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 440px;
    height: 100vh;
    height: 100dvh;
    z-index: 200;
    background: var(--cream);
    /* Клипуем любой горизонтальный выход за край (на мобильном overflow:hidden
       раньше включался только с 768px — отсюда «чат вылезал за границу телефона»).
       Вертикальная прокрутка живёт внутри .chat-body. */
    overflow: hidden;
    animation: chatPageIn .25s cubic-bezier(.22,1,.36,1);
  }
  @keyframes chatPageIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
  @media (min-width: 480px) {
    .chat-page {
      box-shadow: 0 0 60px -10px rgba(92,42,51,.18);
    }
  }
  /* iPad: шире колонка чата, скруглённая карточка с воздухом по краям */
  @media (min-width: 768px) {
    .chat-page {
      max-width: 600px;
      height: calc(100dvh - 48px);
      top: 24px;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid var(--line);
    }
    .chat-sheet { border-radius: 24px; }
  }
  /* ПК: ещё шире, по центру вьюпорта (оболочка приложения тоже центрирована) */
  @media (min-width: 1024px) {
    .chat-page { max-width: 680px; }
  }
  body.chat-open .bottomnav { display: none !important; }

  /* ════════ ПРОФИЛЬ ЧЕЛОВЕКА (Telegram Premium: обложка + аватар + «о себе») ════════ */
  .user-profile-page {
    position: fixed; inset: 0; z-index: 340;
    background: var(--cream);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: gamePageIn .25s cubic-bezier(.22,1,.36,1);
  }
  @media (min-width: 480px) {
    .user-profile-page {
      left: 50%; transform: translateX(-50%); inset: 0 auto 0 50%;
      width: 100%; max-width: 440px;
      box-shadow: 0 0 60px -10px rgba(92,42,51,.18);
    }
  }
  @media (min-width: 768px) { .user-profile-page { max-width: 600px; } }
  @media (min-width: 1024px) { .user-profile-page { max-width: 680px; } }
  /* Обложка-фон */
  .up-cover {
    position: relative; height: 230px;
    background: linear-gradient(150deg, var(--rose) 0%, var(--coral) 60%, var(--plum) 100%);
    background-size: cover; background-position: center;
  }
  .up-cover.has-photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 35%, rgba(0,0,0,.12) 100%);
    pointer-events: none;
  }
  .up-back, .up-cover-edit {
    position: absolute; top: calc(14px + env(safe-area-inset-top, 0px));
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(0,0,0,.32); color: #fff; backdrop-filter: blur(6px);
    border: none; cursor: pointer; font-size: 15px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
  }
  .up-back { left: 14px; }
  .up-cover-edit { right: 14px; }
  .up-back:active, .up-cover-edit:active { transform: scale(.92); background: rgba(0,0,0,.46); }
  /* Тело профиля */
  .up-body {
    position: relative; margin-top: -54px;
    padding: 0 22px calc(40px + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }
  .up-avatar {
    position: relative; width: 108px; height: 108px; margin: 0 auto 12px;
    border-radius: 50%; border: 4px solid var(--cream);
    background: var(--blush); box-shadow: var(--shadow-md);
    overflow: visible;
  }
  .up-avatar-img { position: absolute; inset: 0; border-radius: 50%; }
  .up-avatar-initial {
    position: absolute; inset: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 42px; font-weight: 800; color: var(--coral);
    background: linear-gradient(140deg, var(--blush), var(--paper));
  }
  .up-online-dot {
    position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--ok-ink);
    border: 3px solid var(--cream); box-shadow: 0 0 0 1px rgba(0,0,0,.04);
  }
  .up-name { font-size: 22px; font-weight: 800; color: var(--berry); line-height: 1.15; }
  .up-status { font-size: 12.5px; color: var(--soft); margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }
  .up-status.online { color: var(--ok-ink); font-weight: 600; }
  .up-chips {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin: 18px 0 4px;
  }
  .up-chip {
    display: flex; align-items: center; gap: 8px; justify-content: flex-start;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 11px 10px; text-align: left;
    box-shadow: var(--shadow-xs);
  }
  .up-chip-ico { font-size: 19px; flex-shrink: 0; }
  .up-chip b { font-size: 15px; color: var(--berry); }
  .up-chip-sub { font-size: 9.5px; color: var(--soft); font-weight: 600; }
  .up-section { margin-top: 18px; text-align: left; }
  .up-section-label { font-size: 10px; letter-spacing: .18em; color: var(--coral); font-weight: 700; margin: 0 2px 7px; }
  .up-bio {
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 14px 16px; font-size: 13.5px; color: var(--text2); line-height: 1.55;
    white-space: pre-wrap; word-break: break-word;
  }
  .up-bio-empty { color: var(--hush); cursor: pointer; font-style: italic; }
  .up-join { font-size: 11px; color: var(--hush); margin-top: 14px; }
  .up-actions { margin-top: 22px; }
  .up-action {
    width: 100%; border: none; cursor: pointer; font-family: inherit;
    border-radius: var(--duo-r-md, 16px); padding: 14px; font-size: 14px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease-out);
  }
  .up-action-primary { background: var(--grad-coral); color: #fff; box-shadow: 0 4px 0 var(--duo-coral-deep, var(--plum)); }
  .up-action-ghost { background: var(--card); color: var(--berry); border: 1.5px solid var(--line-strong); }
  .up-action:active { transform: translateY(2px); box-shadow: none; }

  /* Редактирование: мини-обложка + аватар в модалке «Мои данные» */
  .ep-cover-card {
    position: relative; height: 110px; border-radius: 16px; overflow: visible;
    background: linear-gradient(150deg, var(--rose), var(--coral));
    margin-bottom: 0;
  }
  .ep-cover-preview { position: absolute; inset: 0; border-radius: 16px; background-size: cover; background-position: center; }
  .ep-cover-cam {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    background: rgba(0,0,0,.34); color: #fff; border: none; cursor: pointer;
    border-radius: 999px; padding: 6px 12px; font-size: 11px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px; backdrop-filter: blur(6px);
  }
  .ep-cover-cam:active { background: rgba(0,0,0,.5); }
  .ep-avatar-wrap {
    position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%);
    width: 76px; height: 76px; z-index: 2;
  }
  .ep-avatar-prev {
    width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--card);
    background: linear-gradient(140deg, var(--blush), var(--paper)); background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 800; color: var(--coral); box-shadow: var(--shadow-md);
  }
  .ep-avatar-cam {
    position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px;
    background: var(--grad-coral); border: 2px solid var(--card); border-radius: 50%;
    color: #fff; font-size: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }

  .chat-sheet {
    width: 100%;
    height: 100%;
    background: var(--cream);
    display: flex;
    flex-direction: column;
  }
  .chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
    background: var(--grad-cream);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .chat-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--blush);
    color: var(--berry);
    border: none;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform .15s ease, background .2s ease;
  }
  /* Невидимое расширение зоны нажатия до 48px (минимум 44px по HIG/Material) */
  .chat-back-btn::after { content: ''; position: absolute; inset: -6px; }
  .chat-back-btn:hover { transform: translateY(-1px); }
  .chat-back-btn:active { transform: scale(.94); }

  /* Кнопка настроек (шестерёнка в топбарах) — объёмный 3D-стиль как у duo-кнопок */
  .chat-back-btn:has(.fa-gear) {
    background: var(--duo-blush);
    border: 2px solid var(--duo-rose);
    box-shadow: 0 3px 0 var(--duo-rose);
    color: var(--duo-coral);
    border-radius: 13px;
    transition: transform .1s ease-out, box-shadow .1s ease-out, background .2s ease;
  }
  .chat-back-btn:has(.fa-gear):hover { transform: none; background: var(--duo-rose); color: #fff; }
  .chat-back-btn:has(.fa-gear):active { transform: translateY(3px); box-shadow: 0 0 0 var(--duo-rose); }

  .chat-buddy-info {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 0 4px;
  }
  /* DM: шапка-имя кликабельна — открывает профиль собеседника */
  .chat-buddy-info-tap { cursor: pointer; border-radius: 10px; transition: background var(--t-fast) var(--ease-out); }
  .chat-buddy-info-tap:active { background: rgba(var(--accent-rgb), .08); }
  .chat-buddy-name {
    font-weight: 700;
    color: var(--berry);
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-buddy-status {
    font-size: 10.5px;
    color: var(--soft);
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .chat-buddy-status.online { color: var(--ok-ink); }
  .chat-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sage);
    box-shadow: 0 0 0 3px rgba(132,196,116,.22);
    flex-shrink: 0;
  }
  .chat-buddy-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--rose);
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--coral);
    font-weight: 700;
    overflow: hidden;
  }
  .chat-mini-btn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    background: rgba(var(--rose-rgb),.18);
    color: var(--bad-ink);
    transition: transform .15s ease;
  }
  .chat-mini-btn:active { transform: scale(.92); }

  .chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 8px;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.5), transparent 60%),
      var(--cream);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .chat-day-label {
    display: flex;
    justify-content: center;
    margin: 12px 0 4px;
  }
  .chat-day-label span {
    background: rgba(92,42,51,.06);
    color: var(--soft);
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: .04em;
  }

  .chat-msg-row {
    display: flex;
    margin: 2px 0;
  }
  .chat-msg-row.mine   { justify-content: flex-end; }
  .chat-msg-row.theirs { justify-content: flex-start; }

  .chat-bubble {
    max-width: 78%;
    min-width: 0;
    padding: 9px 13px 7px;
    border-radius: 18px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;   /* длинная ссылка/слово без пробелов не распирает пузырь */
    box-shadow: 0 2px 6px -2px rgba(92,42,51,.12);
    position: relative;
  }
  .chat-bubble.mine {
    background: var(--grad-coral);
    color: white;
    border-bottom-right-radius: 6px;
  }
  .chat-bubble.theirs {
    background: var(--card);
    color: var(--berry);
    border: 1px solid var(--line);
    border-bottom-left-radius: 6px;
  }
  .chat-bubble-text {
    font-size: 13.5px;
    white-space: pre-wrap;
  }
  .chat-bubble-time {
    font-size: 9.5px;
    opacity: .65;
    letter-spacing: .02em;
  }
  .chat-bubble-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
  }
  .chat-tick { font-size: 10px; opacity: .7; line-height: 1; }
  .chat-tick.read { color: #8FE3FF; opacity: 1; }

  /* In-bubble reply quote */
  .chat-reply-quote {
    border-left: 2.5px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.14);
    border-radius: 6px;
    padding: 3px 8px;
    margin-bottom: 5px;
  }
  .chat-bubble.theirs .chat-reply-quote {
    border-left-color: var(--coral);
    background: rgba(var(--accent-rgb),.10);
  }
  .crq-name { font-weight: 700; font-size: 10.5px; opacity: .9; }
  .crq-text { font-size: 11.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }

  /* Reaction chips on a bubble */
  .chat-reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
  .chat-react-chip {
    border: none; cursor: pointer;
    background: rgba(255,255,255,.22); color: inherit;
    border-radius: 999px; padding: 2px 7px;
    font-size: 11px; line-height: 1.5;
  }
  .chat-bubble.theirs .chat-react-chip { background: var(--paper); }
  .chat-react-chip.mine { outline: 1.5px solid rgba(255,255,255,.85); }
  .chat-bubble.theirs .chat-react-chip.mine { outline-color: var(--coral); }

  /* Reply preview bar above the input */
  .chat-reply-preview {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: var(--paper);
    border-top: 1px solid var(--line);
    flex-shrink: 0;
  }
  .crp-bar { width: 3px; align-self: stretch; background: var(--coral); border-radius: 3px; }
  .crp-body { flex: 1; min-width: 0; }
  .crp-name { font-size: 11px; font-weight: 700; color: var(--coral); }
  .crp-text { font-size: 11.5px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crp-x { background: none; border: none; font-size: 20px; color: var(--soft); cursor: pointer; line-height: 1; padding: 2px 6px; flex-shrink: 0; }

  /* Long-press message menu */
  .msg-react-row { display: flex; justify-content: space-around; gap: 6px; }
  .msg-react-btn {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 14px; font-size: 24px;
    width: 48px; height: 48px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s var(--ease-spring);
  }
  .msg-react-btn:active { transform: scale(.88); }
  .msg-react-btn.active { background: var(--blush); border-color: var(--coral); }
  .msg-menu-quote {
    margin-top: 12px; background: var(--paper); border-radius: 14px;
    padding: 10px 12px; font-size: 12.5px; color: var(--berry);
    max-height: 84px; overflow: hidden; line-height: 1.4;
  }
  .msg-menu-quote b { color: var(--coral); }

  /* Swipe-to-reply floating arrow (Telegram-style). JS positions it via inline
     top/left/opacity/transform and toggles .armed when past the trigger point. */
  .chat-swipe-arrow {
    position: fixed;
    z-index: 250;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--blush);
    color: var(--coral);
    font-size: 15px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 12px -2px rgba(92,42,51,.25);
    transition: opacity .15s ease, background .15s ease, color .15s ease;
  }
  .chat-swipe-arrow.armed {
    background: var(--grad-coral);
    color: #fff;
    box-shadow: 0 4px 14px -1px rgba(var(--accent-rgb),.6);
  }

  /* ───────── Telegram-Premium chat FX ───────── */
  /* Message entrance: own messages spring up from the bottom, theirs ease in from the side. */
  .chat-bubble.chat-enter-mine { animation: msgInMine .26s cubic-bezier(.2,.85,.3,1.1); transform-origin: bottom right; }
  .chat-bubble.chat-enter      { animation: msgInTheirs .26s cubic-bezier(.2,.85,.3,1); transform-origin: bottom left; }
  @keyframes msgInMine {
    from { opacity: 0; transform: translateY(14px) scale(.82); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes msgInTheirs {
    from { opacity: 0; transform: translateX(-12px) scale(.9); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
  }

  /* Jumbo emoji: 1–3 emoji on their own render big & chrome-less. */
  .chat-bubble.jumbo {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 2px 0 !important;
  }
  .chat-bubble.jumbo .chat-bubble-text { line-height: 1.05; }
  .chat-bubble.jumbo.jumbo-1 .chat-bubble-text { font-size: 54px; }
  .chat-bubble.jumbo.jumbo-2 .chat-bubble-text { font-size: 44px; }
  .chat-bubble.jumbo.jumbo-3 .chat-bubble-text { font-size: 36px; }
  .chat-bubble.jumbo.mine   { color: var(--berry); }
  .chat-bubble.jumbo .chat-bubble-meta { justify-content: flex-end; }
  .chat-bubble.jumbo.theirs .chat-bubble-meta { justify-content: flex-start; }

  /* Reaction burst — a big emoji pop + sparkle ring, fired when a reaction appears. */
  .react-burst {
    position: fixed; z-index: 260;
    font-size: 30px; pointer-events: none;
    transform: translate(-50%, -50%) scale(.3);
    animation: reactBurst .7s cubic-bezier(.2,.9,.3,1) forwards;
  }
  @keyframes reactBurst {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(-12deg); }
    35%  { opacity: 1; transform: translate(-50%,-50%) scale(1.35) rotate(6deg); }
    60%  { transform: translate(-50%,-90%) scale(1.05) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%,-150%) scale(.9); }
  }
  .react-spark {
    position: fixed; z-index: 259;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--coral); pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    animation: reactSpark .6s ease-out forwards;
  }
  @keyframes reactSpark {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(.4); }
  }

  /* "печатает…" with bouncing dots */
  .chat-typing { display: inline-flex; align-items: center; gap: 4px; color: var(--coral); font-weight: 600; }
  .chat-typing-dots { display: inline-flex; gap: 2px; }
  .chat-typing-dots i {
    width: 4px; height: 4px; border-radius: 50%; background: currentColor;
    display: inline-block; animation: typingDot 1s infinite ease-in-out;
  }
  .chat-typing-dots i:nth-child(2) { animation-delay: .18s; }
  .chat-typing-dots i:nth-child(3) { animation-delay: .36s; }
  @keyframes typingDot {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
  }

  /* Unread counter badge in the chat list */
  .chat-unread-badge {
    flex-shrink: 0; min-width: 23px; height: 23px; padding: 0 7px;
    border-radius: 999px; background: var(--grad-coral); color: white;
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 9px -2px rgba(var(--accent-rgb),.6);
    animation: unreadPop .3s var(--ease-spring);
  }
  @keyframes unreadPop { from { transform: scale(.5); } to { transform: scale(1); } }

  /* Online dot on a friend/student avatar */
  .friend-avatar-wrap { position: relative; flex-shrink: 0; line-height: 0; }
  .friend-online-dot {
    position: absolute; right: -1px; bottom: -1px;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--sage); border: 2.5px solid var(--cream);
    box-shadow: 0 0 0 1px rgba(124,164,124,.4);
  }

  /* ── Telegram-style chat list rows (Общение) ── */
  .chat-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
  }
  .chat-row-av {
    width: 46px; height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--rose);
  }
  .chat-row-av-initial {
    background: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; color: var(--coral); font-weight: 700;
  }
  .chat-group-av {
    background: var(--blush);
    color: var(--coral);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
  }
  .chat-row-main { flex: 1; min-width: 0; }
  .chat-row-top {
    display: flex; align-items: baseline;
    justify-content: space-between; gap: 8px;
  }
  .chat-row-name {
    font-weight: 600; color: var(--berry); font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
  }
  .chat-row-time {
    font-size: 10.5px; color: var(--hush); flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .chat-row-time.unread { color: var(--coral); font-weight: 700; }
  .chat-row-bottom { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
  .chat-row-preview {
    flex: 1; min-width: 0;
    font-size: 12px; color: var(--soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .chat-row-me { color: var(--coral); font-weight: 600; }

  /* Закреплённые чаты */
  .chat-list-row { position: relative; }
  .chat-pinned { background: linear-gradient(160deg, var(--blush), var(--card)); }
  .chat-pin-i { font-size: 9px; color: var(--coral); transform: rotate(20deg); }
  /* Кнопка закрепа — в потоке, в ряд со счётчиком непрочитанного (не внахлёст) */
  .chat-pin-btn {
    flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 8px;
    border: none; cursor: pointer; background: var(--paper);
    color: var(--hush); font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s ease, background .15s ease;
  }
  .chat-pin-btn:hover { background: var(--blush); color: var(--coral); }
  .chat-pinned .chat-pin-btn { color: var(--coral); background: var(--blush); }
  .chat-pin-btn i { transform: rotate(20deg); }
  .chat-row-bottom { gap: 7px; }

  /* Значок-отличие группового чата на аватаре */
  .chat-av-wrap { position: relative; flex-shrink: 0; line-height: 0; }
  .chat-group-tag {
    position: absolute; right: -2px; bottom: -2px;
    width: 19px; height: 19px; border-radius: 50%;
    background: var(--coral); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; border: 2px solid var(--cream);
  }

  /* Системные сообщения в чате (вошёл/вышел/создал) */
  .chat-system { display: flex; justify-content: center; margin: 10px 0; }
  .chat-system span {
    background: rgba(92,42,51,.07); color: var(--soft);
    font-size: 11px; font-weight: 600;
    padding: 5px 14px; border-radius: 999px; text-align: center;
    max-width: 80%;
  }

  /* Фото-пикер при создании группы */
  .group-photo-pick {
    width: 54px; height: 54px; flex-shrink: 0;
    border-radius: 16px; cursor: pointer;
    border: 1.5px dashed var(--rose); background: var(--blush);
    color: var(--coral); font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center;
  }

  /* Sender names in group chats — 7 deterministic colors (Telegram-style) */
  .chat-sender-name { font-size: 11px; font-weight: 800; margin-bottom: 2px; letter-spacing: .01em; }
  .chat-sender-name.nc-0 { color: #C8473F; }
  .chat-sender-name.nc-1 { color: #9D5E10; }
  .chat-sender-name.nc-2 { color: #7A5FC4; }
  .chat-sender-name.nc-3 { color: #377B43; }
  .chat-sender-name.nc-4 { color: #17798F; }
  .chat-sender-name.nc-5 { color: #3B6FC9; }
  .chat-sender-name.nc-6 { color: #C04E84; }

  /* Scroll-to-bottom FAB inside the chat (appears when reading history) */
  .chat-sheet { position: relative; }
  .chat-scroll-fab {
    position: absolute;
    right: 14px;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--coral);
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px -6px rgba(92,42,51,.35);
    cursor: pointer;
    opacity: 0; transform: translateY(10px) scale(.88);
    pointer-events: none;
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-spring);
    z-index: 5;
  }
  .chat-scroll-fab.show { opacity: 1; transform: none; pointer-events: auto; }
  .chat-scroll-fab:active { transform: scale(.92); }

  /* Neutral header mini-button (group menu) */
  .chat-mini-btn.chat-mini-neutral { background: var(--blush); color: var(--berry); }

  /* Group creation: friend picker rows */
  .group-pick-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 12px;
    background: var(--paper);
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: border-color .2s ease, background .2s ease;
  }
  .group-pick-check { position: absolute; opacity: 0; pointer-events: none; }
  .group-pick-mark {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--line-strong);
    color: transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; flex-shrink: 0;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--ease-spring);
  }
  .group-pick-row:has(.group-pick-check:checked) { border-color: var(--rose); background: var(--blush); }
  .group-pick-row:has(.group-pick-check:checked) .group-pick-mark {
    background: var(--coral); border-color: var(--coral); color: #fff; transform: scale(1.08);
  }

  /* Generic staggered list entrance (chat list, cards) */
  .stagger-in > * { animation: rowIn .3s var(--ease-out) backwards; }
  .stagger-in > *:nth-child(1) { animation-delay: 0ms; }
  .stagger-in > *:nth-child(2) { animation-delay: 35ms; }
  .stagger-in > *:nth-child(3) { animation-delay: 70ms; }
  .stagger-in > *:nth-child(4) { animation-delay: 105ms; }
  .stagger-in > *:nth-child(5) { animation-delay: 140ms; }
  .stagger-in > *:nth-child(6) { animation-delay: 175ms; }
  .stagger-in > *:nth-child(7) { animation-delay: 210ms; }
  .stagger-in > *:nth-child(n+8) { animation-delay: 240ms; }
  @keyframes rowIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ════════════════ ДИНАМИКА UI ════════════════
     Каскадные появления и тактильные нажатия по всем экранам.
     Спокойный режим и prefers-reduced-motion гасят всё ниже. */
  /* Игры: карточки выпархивают каскадом при входе на экран */
  .screen.active .games-grid > .game-card-v2 { animation: rowIn .34s var(--ease-out) backwards; }
  .screen.active .games-grid > .game-card-v2:nth-child(1) { animation-delay: 30ms; }
  .screen.active .games-grid > .game-card-v2:nth-child(2) { animation-delay: 70ms; }
  .screen.active .games-grid > .game-card-v2:nth-child(3) { animation-delay: 110ms; }
  .screen.active .games-grid > .game-card-v2:nth-child(4) { animation-delay: 150ms; }
  .screen.active .games-grid > .game-card-v2:nth-child(5) { animation-delay: 190ms; }
  /* Путь уроков: плитки подпрыгивают по очереди */
  .screen.active #lesson-path .lesson-tile { animation: tilePop .42s var(--ease-spring) backwards; }
  .screen.active #lesson-path button:nth-of-type(1)  .lesson-tile { animation-delay: 40ms; }
  .screen.active #lesson-path button:nth-of-type(2)  .lesson-tile { animation-delay: 90ms; }
  .screen.active #lesson-path button:nth-of-type(3)  .lesson-tile { animation-delay: 140ms; }
  .screen.active #lesson-path button:nth-of-type(4)  .lesson-tile { animation-delay: 190ms; }
  .screen.active #lesson-path button:nth-of-type(5)  .lesson-tile { animation-delay: 240ms; }
  .screen.active #lesson-path button:nth-of-type(6)  .lesson-tile { animation-delay: 290ms; }
  .screen.active #lesson-path button:nth-of-type(n+7) .lesson-tile { animation-delay: 330ms; }
  @keyframes tilePop {
    from { opacity: 0; transform: scale(.7); }
    60%  { opacity: 1; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
  }
  /* Заголовки секций мягко подплывают */
  .screen.active .section-head { animation: rowIn .3s var(--ease-out) backwards; animation-delay: 20ms; }
  /* Карточки статистики профиля */
  .screen.active #screen-profile .card { animation: rowIn .3s var(--ease-out) backwards; }
  /* Нажатия: ряды настроек, чипы-кнопки, вкладки */
  .settings-row { transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
  .settings-row:active { transform: scale(.985); }
  button.chip:active, .chip[onclick]:active { transform: scale(.94); }
  button.chip, .chip[onclick] { transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
  .auth-tab:active { transform: scale(.97); }
  /* Активная вкладка навигации: иконка «подпрыгивает» */
  .nav-item.active i { animation: navPop .32s var(--ease-spring); }
  @keyframes navPop {
    0%   { transform: scale(.82); }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  /* Десктоп: карточки приподнимаются под курсором */
  @media (min-width: 1024px) {
    .card-press:hover { transform: translateY(-2px); }
    .game-card-v2:hover { transform: translateY(-3px); }
  }
  /* Спокойный режим: каскады и подпрыгивания выключены */
  body.calm-motion .screen.active .games-grid > .game-card-v2,
  body.calm-motion .screen.active #lesson-path .lesson-tile,
  body.calm-motion .screen.active .section-head,
  body.calm-motion .screen.active #screen-profile .card,
  body.calm-motion .stagger-in > *,
  body.calm-motion .nav-item.active i { animation: none !important; }

  /* ════════════════ ТАРИФЫ ════════════════ */
  .plan-profile-card { border: 1.5px solid var(--line); }
  .plan-profile-card.plan-profile-paid {
    background: linear-gradient(135deg, var(--blush), var(--paper));
    border-color: var(--rose);
  }
  /* Компактный чип тарифа вверху профиля */
  .profile-plan-chip {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; font-family: inherit; font-weight: 700; font-size: 11.5px;
    padding: 6px 13px; border-radius: 999px;
    background: var(--blush); color: var(--berry); border: 1.5px solid var(--line);
    transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-fast) var(--ease-out);
  }
  .profile-plan-chip:active { transform: scale(.95); }
  .profile-plan-chip.paid { border-color: var(--rose); background: linear-gradient(135deg, var(--blush), var(--paper)); color: var(--coral); }
  .plan-profile-ico {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 14px;
    background: var(--blush);
    display: flex; align-items: center; justify-content: center;
    font-size: 21px;
  }

  .plan-page {
    position: fixed; inset: 0;
    z-index: 300;
    background: var(--linen);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: planPageIn .28s var(--ease-out);
  }
  @keyframes planPageIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .plan-page-inner {
    max-width: 1060px;
    margin: 0 auto;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .plan-topbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
  }
  .plan-period-toggle {
    display: flex; gap: 4px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    max-width: 360px;
    margin: 0 auto 20px;
  }
  .plan-period-btn {
    flex: 1;
    border: none; cursor: pointer;
    background: transparent; color: var(--soft);
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    padding: 9px 10px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .22s var(--ease-out), color .22s var(--ease-out);
  }
  .plan-period-btn.active {
    background: var(--grad-coral);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(var(--accent-rgb),.5);
  }
  .plan-save-chip {
    font-size: 9px; font-weight: 800; letter-spacing: .04em;
    background: rgba(255,255,255,.22);
    border-radius: 999px; padding: 2px 7px;
  }
  .plan-period-btn:not(.active) .plan-save-chip { background: rgba(201,165,92,.2); color: var(--gold-ink); }

  .plan-cards { display: grid; gap: 14px; }
  .plan-card {
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 24px;
    padding: 20px 18px;
    position: relative;
    display: flex; flex-direction: column;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
  }
  .plan-card.plan-featured {
    border-color: var(--coral);
    box-shadow: 0 14px 36px -14px rgba(var(--accent-rgb),.4);
  }
  .plan-card.plan-current { border-color: var(--sage); }
  .plan-card.plan-highlight { animation: planPulse 1.1s var(--ease-out) 2; }
  @keyframes planPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.0); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.18); }
  }
  .plan-ribbon {
    position: absolute; top: -11px; left: 50%;
    transform: translateX(-50%);
    background: var(--grad-coral); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 15px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 6px 16px -4px rgba(var(--accent-rgb),.6);
  }
  .plan-ribbon-soft { background: var(--blush); color: var(--coral); box-shadow: none; border: 1px solid var(--rose); }
  .plan-current-badge {
    position: absolute; top: 12px; right: 12px;
    font-size: 9px; font-weight: 800; letter-spacing: .04em;
    background: rgba(132,196,116,.18); color: var(--ok-ink);
    border: 1px solid rgba(132,196,116,.45);
    padding: 3px 9px; border-radius: 999px;
  }
  .plan-mascot {
    position: absolute; top: -26px; right: -6px;
    width: 64px; height: 64px; object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(92,42,51,.3));
    transform: rotate(8deg);
    pointer-events: none;
  }
  /* Pro AI featured — заметно выделяем флагман */
  .plan-card.plan-featured {
    border-width: 2px;
    background: linear-gradient(170deg, var(--card), var(--blush));
  }
  .plan-head { display: flex; align-items: center; gap: 12px; }
  .plan-emoji {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 15px;
    background: var(--blush);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
  }
  .plan-name { font-weight: 800; font-size: 17px; color: var(--berry); }
  .plan-tagline { font-size: 11px; color: var(--soft); margin-top: 1px; }
  .plan-price-row {
    display: flex; align-items: baseline; gap: 10px;
    margin: 14px 0 2px;
    flex-wrap: wrap;
  }
  .plan-price {
    font-size: 30px; font-weight: 800; color: var(--berry);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .plan-price i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--soft); }
  .plan-price-sub { font-size: 11px; color: var(--soft); }
  .plan-promo {
    margin-top: 10px;
    background: rgba(201,165,92,.14);
    border: 1px dashed rgba(201,165,92,.5);
    color: var(--gold-ink);
    font-size: 11.5px; font-weight: 600;
    border-radius: 12px;
    padding: 7px 10px;
  }
  .plan-features {
    list-style: none;
    margin: 14px 0 16px; padding: 0;
    display: grid; gap: 9px;
    flex: 1;
  }
  .plan-features li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 12.5px; color: var(--ink); line-height: 1.45;
  }
  .plan-features li i {
    color: var(--coral);
    font-size: 11px;
    margin-top: 3px;
    flex-shrink: 0;
  }
  .plan-footnote {
    text-align: center;
    font-size: 11px; color: var(--hush);
    margin-top: 18px;
    line-height: 1.6;
    max-width: 420px;
    margin-left: auto; margin-right: auto;
  }
  .plan-upsell-emoji {
    width: 64px; height: 64px;
    margin: 4px auto 0;
    border-radius: 20px;
    background: var(--blush);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
  }
  .plan-upsell-price {
    font-size: 22px; font-weight: 800; color: var(--coral);
    margin: 12px 0 10px;
    font-variant-numeric: tabular-nums;
  }
  .plan-upsell-price i { font-style: normal; font-size: 13px; color: var(--soft); font-weight: 600; }

  /* Тарифы: iPad/ПК — три карточки в ряд, «Популярный» приподнят */
  @media (min-width: 768px) {
    .plan-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
    .plan-card.plan-featured { transform: translateY(-6px); }
    .plan-page-inner { padding-top: 28px; }
  }
  @media (min-width: 1024px) {
    .plan-cards { gap: 20px; }
    .plan-card { padding: 26px 24px; }
    .plan-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -16px rgba(92,42,51,.28); }
    .plan-card.plan-featured:hover { transform: translateY(-10px); }
  }

  /* Chat emoji picker */
  .chat-emoji-btn {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%; border: none; cursor: pointer;
    background: var(--paper); color: var(--coral); font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
  }
  .chat-emoji-btn:hover { background: var(--blush); }
  .chat-emoji-btn.active { background: var(--blush); transform: scale(.94); }
  .chat-emoji-panel {
    display: flex; flex-wrap: wrap; gap: 2px;
    padding: 8px 10px; background: var(--card);
    border-top: 1px solid var(--line);
    max-height: 168px; overflow-y: auto; flex-shrink: 0;
    justify-content: space-between;
  }
  .emoji-cell {
    border: none; background: none; cursor: pointer;
    font-size: 24px; line-height: 1;
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
  }
  .emoji-cell:hover { background: var(--paper); }
  .emoji-cell:active { transform: scale(.82); }

  /* New-message banner that drops in from the top */
  .chat-popup {
    position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%;
    transform: translate(-50%, -150%);
    width: calc(100% - 24px); max-width: 412px; z-index: 820;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 18px;
    background: rgba(255,250,246,.96);
    backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid var(--line);
    box-shadow: 0 14px 36px -10px rgba(92,42,51,.3);
    cursor: pointer; opacity: 0;
    transition: transform .34s var(--ease-spring), opacity .3s ease;
  }
  .chat-popup.in  { transform: translate(-50%, 0); opacity: 1; }
  .chat-popup.out { transform: translate(-50%, -150%); opacity: 0; }
  .chat-popup-av {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--blush); background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: var(--coral); border: 2px solid var(--rose);
  }
  .chat-popup-body { flex: 1; min-width: 0; }
  .chat-popup-name { font-weight: 700; color: var(--berry); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-popup-text { font-size: 12px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }

  .chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--card);
    border-top: 1px solid var(--line);
    flex-shrink: 0;
  }
  /* Prevent iOS auto-zoom on input focus (font-size must be ≥16px) */
  .chat-input { font-size: 16px; }
  .chat-input {
    flex: 1;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 11px 16px;
    font-size: 13.5px;
    color: var(--berry);
    outline: none;
    font-family: inherit;
    transition: border-color .2s ease, background .2s ease;
  }
  .chat-input:focus {
    border-color: var(--rose);
    background: var(--card);
  }
  .chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--grad-coral);
    color: white;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(var(--accent-rgb),.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform .15s ease, box-shadow .2s ease;
  }
  .chat-send-btn:hover { transform: translateY(-1px); }
  .chat-send-btn:active { transform: scale(.92); }

  /* ───── PRONUNCIATION (mic button) ───── */
  .btn-mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--blush);
    color: var(--berry);
    border: 1.5px solid rgba(var(--rose-rgb),.55);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: transform var(--t-fast) var(--ease-out), background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
  }
  .btn-mic:hover { transform: translateY(-1px); }
  .btn-mic:active { transform: translateY(0); }
  .btn-mic i { font-size: 12px; }
  .btn-mic.mic-listening {
    background: linear-gradient(140deg, var(--coral), var(--gold));
    color: white;
    border-color: transparent;
    animation: mic-pulse 1.1s ease-in-out infinite;
  }
  .btn-mic.mic-ok {
    background: rgba(132,196,116,.20);
    color: var(--ok-deep);
    border-color: var(--sage);
  }
  .btn-mic.mic-near {
    background: rgba(201,165,92,.20);
    color: #8A6A26;
    border-color: var(--gold);
  }
  .btn-mic.mic-bad {
    background: rgba(var(--rose-rgb),.20);
    color: var(--bad-ink);
    border-color: #E89BA1;
  }
  @keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(var(--accent-rgb),.50); }
    50%      { box-shadow: 0 0 0 10px rgba(var(--accent-rgb),0);   }
  }

  /* Mascot bear sitting on milestone tiles (every 5th lesson) */
  .lesson-bear {
    position: absolute;
    top: -62px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 6px 10px rgba(92,42,51,.22));
    z-index: 3;
    animation: bear-bob 6s ease-in-out infinite;
  }
  @keyframes bear-bob {
    0%, 100% { transform: translateX(-50%) translateY(0)    rotate(-1deg); }
    50%      { transform: translateX(-50%) translateY(-3px) rotate(2deg); }
  }

  /* Lesson flow — fullscreen page (not a modal) */
  /* Урок — полноэкранная страница (не попап): на телефоне, планшете и ПК
     занимает весь экран; контент держит читабельную колонку до 680px. */
  .lesson-page {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 200;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    animation: lessonPageIn .25s cubic-bezier(.22,1,.36,1);
  }
  @keyframes lessonPageIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  body.lesson-open .bottomnav { display: none !important; }

  .lesson-page-header {
    padding: calc(14px + env(safe-area-inset-top, 0px)) max(18px, calc((100% - 860px) / 2)) 14px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--grad-cream);
    flex-shrink: 0;
  }
  .lesson-page-body {
    flex: 1;
    overflow-y: auto;
    /* Колонка контента ≤860px по центру — на планшете и ПК шире, но читаемо */
    padding: 24px max(20px, calc((100% - 860px) / 2)) calc(32px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }

  /* Games & flashcards as a full-screen page (not a popup over the current screen) */
  .game-page {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--cream);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: gamePageIn .25s cubic-bezier(.22,1,.36,1);
  }
  /* The game page is full-bleed (inset:0), so it must NOT reuse lessonPageIn,
     whose translateX(-50%) is meant for the horizontally-centered .lesson-page.
     Reusing it made the game slide in 50% off to the left, then snap to center. */
  @keyframes gamePageIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .game-page-scroll {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .game-page-card {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }
  body.game-open .bottomnav { display: none !important; }
  /* Планшет и ПК: игры — ПОЛНЫЙ экран, контент — широкая колонка по центру */
  @media (min-width: 768px) {
    .game-page-scroll { padding: 36px 40px calc(44px + env(safe-area-inset-bottom, 0px)); }
    .game-page-card { max-width: 760px; }
  }
  @media (min-width: 1024px) {
    .game-page-scroll { padding-top: 48px; }
    .game-page-card { max-width: 860px; }
  }

  /* ── Урок с ИИ — полноэкранная страница (не попап) ── */
  .ai-tutor-page {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--linen);
    animation: gamePageIn .25s cubic-bezier(.22,1,.36,1);
  }
  .ai-tutor-shell {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /* Хедер: фон во всю ширину, внутренний контент центрируется колонкой */
  .ai-tutor-header {
    border-bottom: 1px solid var(--line);
    background: var(--card);
    flex-shrink: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .ai-tutor-header-inner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    max-width: 920px; margin: 0 auto; width: 100%;
  }
  .ai-tutor-ava {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 14px;
    background: var(--grad-coral);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    box-shadow: 0 4px 12px -3px rgba(var(--accent-rgb),.5);
  }
  .ai-tutor-name {
    font-weight: 800; color: var(--berry); font-size: 16px;
    display: flex; align-items: center; gap: 7px;
  }
  .ai-tutor-badge {
    font-size: 9px; font-weight: 800; letter-spacing: .08em;
    background: var(--grad-coral); color: #fff;
    padding: 2px 7px; border-radius: 999px;
  }
  .ai-tutor-status {
    font-size: 11px; color: var(--ok-ink); margin-top: 1px;
    display: flex; align-items: center; gap: 5px; font-weight: 600;
  }
  .ai-online-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--sage); flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(132,196,116,.22);
  }
  .ai-tutor-log {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ai-tutor-log > * { max-width: 920px; width: 100%; margin-left: auto; margin-right: auto; }
  /* Тёплый приветственный экран с маскотом */
  .ai-welcome {
    margin: auto; text-align: center; padding: 24px 18px;
    max-width: 440px;
    display: flex; flex-direction: column; align-items: center;
    animation: screenContentIn .4s var(--ease-out) both;
  }
  .ai-welcome-ava {
    width: 110px; height: 110px; margin-bottom: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--blush), var(--paper));
    border: 2px solid rgba(var(--rose-rgb),.4);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: var(--shadow-md);
  }
  .ai-welcome-ava img { width: 86%; height: 86%; object-fit: contain; }
  .ai-welcome-emoji { font-size: 50px; }
  .ai-welcome-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 22px; color: var(--berry); }
  .ai-welcome-sub { font-size: 13px; color: var(--soft); line-height: 1.6; margin-top: 8px; }
  /* Низ: фон-бар во всю ширину, внутренний контент центрируется */
  .ai-tutor-foot {
    flex-shrink: 0;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ai-tutor-foot-inner { max-width: 920px; margin: 0 auto; width: 100%; padding: 12px 16px 10px; }
  .ai-tutor-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
  .ai-chip {
    cursor: pointer; border: 1.5px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--berry);
    font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 8px 13px;
    transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
  }
  .ai-chip:hover { background: var(--blush); border-color: var(--rose); }
  .ai-chip:active { transform: scale(.94); }
  .ai-tutor-input-row { display: flex; gap: 9px; align-items: center; }
  .ai-input-field {
    flex: 1; min-width: 0;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 13px 18px;
    font-size: 16px; /* ≥16px — без авто-зума на iOS */
    color: var(--berry);
    outline: none; font-family: inherit;
    transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
  }
  .ai-input-field:focus { border-color: var(--rose); background: var(--card); }
  .ai-input-field::placeholder { color: var(--hush); }
  .ai-send-fab {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 50%; border: none; cursor: pointer;
    background: var(--grad-coral); color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 14px -3px rgba(var(--accent-rgb),.55);
    transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
  }
  .ai-send-fab:hover { transform: translateY(-1px); }
  .ai-send-fab:active { transform: scale(.9); }
  .ai-tutor-note { font-size: 10px; color: var(--hush); text-align: center; margin-top: 9px; }
  /* ── Редактор заметки (админ-журнал) — полноэкранная страница ── */
  .jrn-note-page {
    position: fixed;
    inset: 0;
    z-index: 320; /* выше gameModal (.game-page = 200), где живёт страница заметок */
    background: var(--linen);
    animation: gamePageIn .25s cubic-bezier(.22,1,.36,1);
  }
  .jrn-note-shell {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .jrn-note-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--grad-cream);
    flex-shrink: 0;
  }
  .jrn-note-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    -webkit-overflow-scrolling: touch;
  }
  .jrn-note-foot {
    flex-shrink: 0;
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--card);
  }
  /* Полный экран; контент редактора центрируем комфортной колонкой */
  @media (min-width: 768px) {
    .jrn-note-body, .jrn-note-foot, .jrn-note-header {
      max-width: 860px; margin-left: auto; margin-right: auto; width: 100%;
    }
  }
  body.theme-dark .jrn-note-page { background: var(--linen); }

  /* Lesson-complete celebration — fullscreen page */
  .lesson-complete-page {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: radial-gradient(120% 80% at 50% 0%, #FFF4EE 0%, var(--cream) 60%, #FFE8DC 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(40px + env(safe-area-inset-top, 0px)) 24px calc(40px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    animation: lessonCompleteIn .35s cubic-bezier(.22,1,.36,1);
    overflow-y: auto;
  }
  @keyframes lessonCompleteIn {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
  }
  .lesson-complete-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 440px;
    width: 100%;
    margin: auto 0;
  }
  .lesson-complete-bear-big {
    width: 240px;
    max-width: 65vw;
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 18px 32px rgba(92,42,51,.32));
    animation: complete-bear-in .55s cubic-bezier(.34,1.56,.64,1) both,
               bear-cheer 2.8s ease-in-out .55s infinite;
    pointer-events: none;
  }
  .lesson-complete-cta {
    width: 100%;
    max-width: 360px;
    justify-content: center;
    padding: 16px 24px;
    font-size: 15px;
    margin-top: 28px;
    flex-shrink: 0;
  }

  /* Legacy class kept for the small daily-goal popup that still uses modal-card */
  .lesson-complete-card {
    overflow: visible !important;
    text-align: center;
    padding-top: 110px !important;
    background: var(--grad-cream) !important;
    position: relative;
    border: 1.5px solid rgba(var(--rose-rgb),.25);
    box-shadow:
      0 30px 60px -20px rgba(92,42,51,.30),
      0 0 0 6px rgba(var(--rose-rgb),.10);
  }
  .lesson-complete-bear {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: auto;
    filter: drop-shadow(0 14px 24px rgba(92,42,51,.28));
    animation: complete-bear-in .55s cubic-bezier(.34,1.56,.64,1) both,
               bear-cheer 2.8s ease-in-out .55s infinite;
    pointer-events: none;
  }
  @keyframes complete-bear-in {
    0%   { opacity: 0; transform: translateX(-50%) translateY(40px) scale(.7); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
  }
  @keyframes bear-cheer {
    0%, 100% { transform: translateX(-50%) translateY(0)    rotate(-2deg); }
    50%      { transform: translateX(-50%) translateY(-6px) rotate(3deg); }
  }

  /* Decorative scatter (sakuras + sparkles) along the path */
  .path-deco {
    position: absolute;
    pointer-events: none;
    user-select: none;
  }
  .path-deco.sakura {
    font-size: 22px;
    filter: drop-shadow(0 4px 8px rgba(var(--accent-rgb),.28));
    animation: deco-float 5.5s ease-in-out infinite;
  }
  .path-deco.sakura.sm { font-size: 15px; opacity: .8; }
  .path-deco.sparkle {
    font-size: 16px;
    color: var(--gold);
    filter: drop-shadow(0 2px 4px rgba(201,165,92,.45));
    animation: deco-twinkle 3.4s ease-in-out infinite;
  }
  .path-deco.sparkle.sm { font-size: 11px; }
  @keyframes deco-float {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-6px) rotate(8deg); }
  }
  @keyframes deco-twinkle {
    0%, 100% { opacity: .35; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1.08); }
  }

  /* ───── HANGUL LAB ───── */
  .hangul-display {
    background:
      radial-gradient(80% 60% at 50% 10%, rgba(255,255,255,.7), transparent 70%),
      radial-gradient(60% 60% at 50% 100%, rgba(201,165,92,.15), transparent 70%),
      linear-gradient(160deg, var(--cream), var(--blush));
    border-radius: var(--r-xl);
    padding: 36px 20px 26px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.5);
    position: relative;
    overflow: hidden;
  }
  .hangul-result {
    font-size: 96px; line-height: 1; color: var(--berry); font-weight: 700;
    text-shadow: 0 2px 14px rgba(var(--accent-rgb),.18);
    transition: transform var(--t-base) var(--ease-spring);
  }
  .hangul-key {
    aspect-ratio: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--grad-cream);
    border: 1px solid var(--line);
    border-radius: 14px; cursor: pointer;
    font-size: 26px; font-weight: 600; color: var(--berry);
    box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.7);
    transition: transform var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out),
                color var(--t-fast) var(--ease-out);
  }
  .hangul-key:hover { border-color: var(--rose); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .hangul-key:active { transform: scale(.94); }
  .hangul-key.cons-active {
    background: var(--grad-coral); color: white; border-color: transparent;
    box-shadow: 0 6px 14px -6px rgba(var(--accent-rgb),.6), inset 0 1px 0 rgba(255,255,255,.30);
  }
  .hangul-key.vow-active {
    background: linear-gradient(140deg, #F7C3CA, var(--rose));
    color: white; border-color: transparent;
    box-shadow: 0 6px 14px -6px rgba(var(--rose-rgb),.6), inset 0 1px 0 rgba(255,255,255,.35);
  }
  .hangul-key .rom { font-size: 9px; color: rgba(92,42,51,.45); font-weight: 500; margin-top: -2px; letter-spacing: .04em; }
  .hangul-key.cons-active .rom, .hangul-key.vow-active .rom { color: rgba(255,255,255,.85); }

  /* ───── INTRO SPLASH ───── */
  #intro {
    /* БРЕНДОВЫЙ ЗАМОК: сплэш всегда в фирменных цветах Madie, независимо от
       выбранной темы (тёмной/изумруд/небо/…). Логотип у нас фиксированно-розовый,
       поэтому фон, аура, текст и линии тут берут токены Madie, а не темы —
       иначе тёплый розовый лого спорит с тёмным/бирюзовым фоном. Тема включается
       уже ПОСЛЕ сплэша. Перекрашиваем токены прямо на контейнере — всё внутри
       наследует эти значения. */
    --berry: #5C2A33; --ink: #2A1A1E;
    --soft: rgba(92,42,51,.72); --text2: rgba(92,42,51,.8);
    --hush: rgba(92,42,51,.58);
    --coral: #BC4B5E; --rose: #F2A6AE; --gold: #C9A55C;
    --accent-rgb: 188,75,94; --rose-rgb: 242,166,174; --petal-rgb: 247,205,210;
    --line: rgba(92,42,51,0.10); --line-strong: rgba(92,42,51,0.18);
    position: fixed; inset: 0; z-index: 999;
    background: radial-gradient(120% 90% at 50% 35%, #FFFCF8 0%, #FFF4F0 38%, #FBE8EA 78%, #F2D5DA 100%) !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    overflow: hidden; cursor: pointer;
  }
  #intro.dismissing { animation: introExit .65s cubic-bezier(.4,0,.2,1) forwards; }
  @keyframes introExit {
    to { opacity: 0; transform: scale(1.06); filter: blur(8px); }
  }
  .intro-aura {
    position: absolute; width: 620px; height: 620px;
    left: 50%; top: 42%; transform: translate(-50%,-50%);
    background: radial-gradient(closest-side, rgba(var(--rose-rgb),.55), rgba(201,165,92,.22) 40%, transparent 72%);
    filter: blur(28px);
    animation: auraRise 1.4s ease both, auraBreathe 5s ease-in-out 1.6s infinite;
    pointer-events: none;
  }
  @keyframes auraRise { from { opacity: 0; transform: translate(-50%,-50%) scale(.7); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
  @keyframes auraBreathe { 0%,100% { opacity: .9; } 50% { opacity: .65; transform: translate(-50%,-50%) scale(1.08); } }

  .intro-rays {
    position: absolute; width: 540px; height: 540px;
    left: 50%; top: 42%; transform: translate(-50%,-50%);
    background: conic-gradient(from 0deg,
      transparent 0deg, rgba(255,236,210,.30) 18deg, transparent 40deg,
      transparent 100deg, rgba(255,236,210,.26) 120deg, transparent 145deg,
      transparent 220deg, rgba(255,236,210,.28) 245deg, transparent 270deg,
      transparent 330deg, rgba(255,236,210,.26) 350deg, transparent 360deg);
    -webkit-mask: radial-gradient(closest-side, transparent 30%, black 60%, transparent 95%);
            mask: radial-gradient(closest-side, transparent 30%, black 60%, transparent 95%);
    opacity: 0;
    animation: raysFade 1.4s ease .6s forwards, raysSpin 32s linear .6s infinite;
    pointer-events: none;
  }
  @keyframes raysFade { to { opacity: .85; } }
  @keyframes raysSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }

  .logo-stage {
    position: relative;
    width: 320px; height: 240px;
    display: flex; align-items: center; justify-content: center;
    animation: logoFloat 6s ease-in-out 2.4s infinite;
  }
  @keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

  .logo-image {
    position: absolute; inset: 0;
    background: url('assets/logo.png') center/contain no-repeat;
    filter: drop-shadow(0 14px 30px rgba(var(--accent-rgb),.28)) drop-shadow(0 4px 10px rgba(92,42,51,.10));
    opacity: 0;
    transform-origin: 38% 78%;
    animation: fanUnfurl 1.4s cubic-bezier(.22,1,.36,1) .35s forwards;
  }
  @keyframes fanUnfurl {
    0%   { opacity: 0; transform: scale(.62) rotate(-22deg); clip-path: inset(0 50% 0 50% round 30%); }
    45%  { opacity: 1; transform: scale(1.06) rotate(4deg); clip-path: inset(0 0 0 0); }
    70%  {              transform: scale(.985) rotate(-1.5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); clip-path: inset(0 0 0 0); }
  }

  .logo-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.65) 50%, transparent 62%);
    -webkit-mask: url('assets/logo.png') center/contain no-repeat;
            mask: url('assets/logo.png') center/contain no-repeat;
    transform: translateX(-120%); opacity: 0;
    animation: shimmer 1.4s ease-out 1.5s forwards;
    pointer-events: none;
  }
  @keyframes shimmer { 0% { transform: translateX(-120%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }

  .yin-pulse {
    position: absolute; width: 70px; height: 70px;
    left: 60%; top: 64%;
    border-radius: 50%; border: 1.5px solid rgba(201,165,92,.55);
    transform: translate(-50%,-50%) scale(.4); opacity: 0;
    pointer-events: none;
    animation: yinPulse 1.6s ease-out 1.4s forwards;
  }
  .yin-pulse.late { animation-delay: 2.0s; }
  @keyframes yinPulse {
    0%   { transform: translate(-50%,-50%) scale(.4); opacity: 0; }
    30%  { opacity: .9; }
    100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; }
  }

  .intro-tagline {
    margin-top: 22px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    opacity: 0;
    animation: taglineRise .9s cubic-bezier(.22,1,.36,1) 1.85s forwards;
  }
  @keyframes taglineRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  .intro-tagline .label {
    font-family: 'Fraunces', Georgia, serif; font-weight: 600;
    color: var(--berry); font-size: 16px; letter-spacing: 0.32em;
  }
  .intro-tagline .blossom { font-size: 13px; animation: blossomTwist 3s ease-in-out infinite; }
  .intro-tagline .blossom:nth-child(even) { animation-delay: 1.2s; }
  @keyframes blossomTwist { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) scale(1.04); } }

  .intro-subline {
    margin-top: 14px; opacity: 0;
    /* var(--text2) вместо захардкоженного тёмного ink: в тёмной теме фон интро
       #161618, а старый rgba(92,42,51) был тёмным-на-тёмном (≈1.1:1, невидим). */
    color: var(--text2); font-size: 11px; letter-spacing: 0.26em; font-weight: 500;
    animation: subRise .9s ease 2.25s forwards;
  }
  @keyframes subRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  .intro-cta {
    margin-top: 34px;
    width: max-content; max-width: 92%;
    font-size: 11px; letter-spacing: 0.22em; font-weight: 600;
    /* var(--text2) — читаемо во всех темах, включая тёмную (раньше тёмный-на-тёмном). */
    color: var(--text2); opacity: 0;
    text-align: center;
    line-height: 1.7;
    animation: subRise .8s ease 2.9s forwards, ctaPulse 2s ease 3.7s infinite;
  }
  .intro-cta::before, .intro-cta::after {
    content: ''; display: inline-block; width: 22px; height: 1px;
    background: var(--line-strong); vertical-align: middle; margin: 0 10px;
  }
  /* Narrow phones: drop letter-spacing a bit so it still fits centered */
  @media (max-width: 380px) {
    .intro-cta { font-size: 10px; letter-spacing: 0.16em; }
    .intro-cta::before, .intro-cta::after { width: 16px; margin: 0 8px; }
  }
  @keyframes ctaPulse { 0%,100% { opacity: .72; } 50% { opacity: 1; } }

  .intro-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

  /* Confetti for daily-goal celebration */
  @keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
  }

  /* Ambient sakura overlay — behind all content */
  #ambient-petals {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    z-index: 0;
  }
  #ambient-petals .petal { opacity: .35; }
  .petal {
    position: absolute; top: -28px;
    animation: petalFall linear infinite;
    will-change: transform;
  }
  @keyframes petalFall {
    0%   { transform: translateY(-30px) rotate(0); opacity: 0; }
    8%   { opacity: .9; }
    100% { transform: translateY(110vh) translateX(60px) rotate(420deg); opacity: 0; }
  }

  /* ───── PHOTO ZOOM (tap any user photo to enlarge) ───── */
  .photo-zoom {
    cursor: zoom-in;
    transition: transform .15s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .photo-zoom:active { transform: scale(.95); }

  /* ───── MODAL ───── */
  .modal-bg {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(42,26,30,.55);
    backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
    animation: fadeIn .25s ease;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .modal-sheet {
    width: 100%; max-width: 440px;
    background: var(--cream);
    border-radius: 28px 28px 0 0;
    max-height: 78vh; overflow-y: auto;
    animation: sheetUp .35s cubic-bezier(.22,1,.36,1);
    -webkit-overflow-scrolling: touch;
  }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .modal-center { align-items: center; }
  .modal-card {
    width: 92%; max-width: 380px;
    max-height: 85vh; overflow-y: auto;
    background: var(--card); border-radius: 24px;
    padding: 24px;
    animation: sheetUp .35s cubic-bezier(.22,1,.36,1);
    -webkit-overflow-scrolling: touch;
  }

  /* ───── TOAST ───── */
  .toast {
    position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
    background: var(--berry); color: white;
    padding: 12px 20px; border-radius: 999px;
    font-size: 13px; font-weight: 500;
    z-index: 600;
    max-width: min(92vw, 420px); white-space: normal;
    text-align: center; line-height: 1.4;
    word-break: break-word; overflow-wrap: anywhere;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    animation: toastIn .25s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

  /* ───── FLASHCARD ───── */
  .flashcard { perspective: 1200px; }
  .flashcard-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform .6s cubic-bezier(.4,0,.2,1);
    transform-style: preserve-3d;
  }
  .flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
  .flashcard-face {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px;
  }
  .flashcard-front { background: var(--grad-cream); border: 1px solid var(--line); }
  .flashcard-back  { background: linear-gradient(160deg, var(--berry), var(--ink)); color: white; transform: rotateY(180deg); }

  /* ───── FEED CARDS ───── */
  .feed-card        { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px; }
  .feed-card-dark   { background: linear-gradient(150deg, var(--berry), #8E3F4D 60%, var(--coral) 130%); color: white; }
  .feed-card-rose   { background: linear-gradient(150deg, var(--cream), var(--blush)); }
  .feed-card-night  { background: linear-gradient(150deg, var(--ink), var(--berry) 65%, var(--gold) 160%); color: white; }

  /* Decorative waveform for voice-note feed posts */
  .feed-voice-wave { display: flex; align-items: center; gap: 2px; height: 24px; margin: 12px 0 2px; }
  .feed-voice-wave span { flex: 1; min-width: 2px; background: var(--rose); border-radius: 999px; opacity: .7; }

  .placeholder-img {
    background:
      repeating-linear-gradient(135deg, #FBE8EA 0 8px, #FFF4EE 8px 16px);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--soft); font-family: ui-monospace, monospace; font-size: 11px;
    border-radius: 14px;
  }

  /* ───── GAMES ───── */
  .game-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 20px; padding: 18px;
    cursor: pointer; transition: transform .15s ease, box-shadow .2s ease;
  }
  .game-card:active { transform: scale(.97); box-shadow: var(--shadow-md); }
  .game-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 12px;
  }

  /* ───── GAME CARDS v2 (with icon images) ───── */
  .games-grid {
    display: grid;
    /* minmax(0,1fr): колонки могут сжиматься УЖЕ своего min-content — иначе
       длинный nowrap-текст в подвале карточки распирал трек и вся сетка
       вылезала за край экрана на мобильном. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 18px;
  }
  .game-card-v2 {
    min-width: 0; /* карточка не шире своего трека — страховка от overflow */
    background: var(--grad-cream);
    border: 1.5px solid rgba(var(--rose-rgb),.18);
    border-radius: 22px;
    padding: 14px 12px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow:
      0 4px 0 rgba(92,42,51,.04),
      0 10px 22px -10px rgba(var(--accent-rgb),.22);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
    position: relative;
  }
  .game-card-v2:hover {
    transform: translateY(-3px);
    box-shadow:
      0 4px 0 rgba(92,42,51,.04),
      0 16px 30px -10px rgba(var(--accent-rgb),.32);
  }
  .game-card-v2:active { transform: translateY(-1px) scale(.99); }
  /* Мягкое каскадное появление карточек при входе на экран */
  @keyframes gcvIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .screen.active .game-card-v2 { animation: gcvIn .3s var(--ease-out) backwards; }
  .screen.active .games-grid .game-card-v2:nth-child(2) { animation-delay: .05s; }
  .screen.active .games-grid .game-card-v2:nth-child(3) { animation-delay: .1s; }
  .screen.active .games-grid .game-card-v2:nth-child(4) { animation-delay: .15s; }
  body.calm-motion .game-card-v2 { animation: none !important; }

  /* Bento-раскладка: широкая карточка-«герой» среди квадратных */
  .game-card-v2.gcv-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 76px 1fr;
    grid-template-areas:
      "icon title"
      "icon ko"
      "icon sub"
      "foot foot";
    column-gap: 14px;
    align-items: center;
    text-align: left;
    padding: 14px 16px 12px;
  }
  .gcv-wide .gcv-icon  { grid-area: icon; width: 76px; height: 76px; margin-bottom: 0; }
  .gcv-wide .gcv-title { grid-area: title; font-size: 15.5px; align-self: end; }
  .gcv-wide .gcv-ko    { grid-area: ko; }
  .gcv-wide .gcv-sub   { grid-area: sub; min-height: 0; margin-top: 3px; align-self: start; }
  .gcv-wide .gcv-foot  { grid-area: foot; }

  .gcv-icon {
    position: relative;
    width: 84px;
    height: 84px;
    margin-bottom: 10px;
    transition: transform var(--t-base) var(--ease-out);
  }
  .game-card-v2:hover .gcv-icon { transform: translateY(-2px) scale(1.04); }
  .gcv-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(var(--accent-rgb),.18));
  }
  /* Emoji-based icon (for cards without a PNG, e.g. 한글 Lab / dictation) */
  .gcv-emoji-icon {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    background: linear-gradient(140deg, var(--blush), var(--paper));
    border: 1.5px solid rgba(var(--rose-rgb),.30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--berry);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  }
  /* Акцентная игровая карточка (рекомендуемая) */
  .game-card-v2.gcv-accent {
    border-color: var(--coral);
    box-shadow: 0 10px 26px -14px rgba(var(--accent-rgb),.55);
    position: relative;
  }
  .gcv-flag {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    background: var(--grad-coral); color: #fff;
    padding: 3px 8px; border-radius: 999px;
    box-shadow: 0 3px 8px -2px rgba(var(--accent-rgb),.5);
  }
  /* Чипы выбора уровня корейского (регистрация · профиль · админка) */
  .lvl-chip {
    font-family: inherit; cursor: pointer;
    font-size: 12px; font-weight: 600;
    padding: 7px 12px; border-radius: 999px;
    border: 1.5px solid var(--line-strong);
    background: var(--paper); color: var(--berry);
    transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
  }
  .lvl-chip:hover { transform: translateY(-1px); border-color: var(--coral); }
  .lvl-chip:active { transform: translateY(0) scale(.98); }
  .lvl-chip.on {
    background: var(--grad-coral); color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px -4px rgba(var(--accent-rgb),.5);
  }
  body.calm-motion .lvl-chip { transition: none; }

  /* Календарь праздников: крупнее тап + понятная реакция на праздничных днях (#9) */
  .cal-day { min-height: 42px; }
  .cal-day-h:hover { transform: scale(1.08); filter: brightness(1.04); }
  .cal-day-h:active { transform: scale(.94); }
  body.calm-motion .cal-day-h:hover, body.calm-motion .cal-day-h:active { transform: none; }

  /* Учёба в Корее: рейтинг вузов */
  .uni-rank { font-weight: 800; color: var(--coral); }
  .uni-facts { display: grid; gap: 8px; }
  .uni-fact { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; }
  .uni-fact-h { font-size: 11px; color: var(--soft); font-weight: 600; letter-spacing: .02em; }
  .uni-fact-v { font-size: 13px; color: var(--berry); margin-top: 3px; line-height: 1.45; }

  /* ⭐ Кнопка «в избранное» на карточке игры */
  .gcv-fav-btn {
    position: absolute; top: 8px; right: 8px; z-index: 4;
    width: 30px; height: 30px; border-radius: 50%;
    border: none; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(127,127,127,.14); color: var(--hush);
    font-size: 13px; line-height: 1;
    transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
  }
  .gcv-fav-btn:hover { transform: scale(1.14); }
  .gcv-fav-btn:active { transform: scale(.96); }
  .gcv-fav-btn.on { color: var(--gold); background: rgba(201,165,92,.18); }
  /* Расширяем тач-зону ⭐ до 44px (визуальный кружок остаётся 30px). */
  .gcv-fav-btn::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
  .gcv-fav-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
  /* На карточке с флажком «Рекомендуем» (top-right) — звезду в левый верхний угол */
  .game-card-v2:has(.gcv-flag) .gcv-fav-btn { right: auto; left: 8px; }
  body.calm-motion .gcv-fav-btn { transition: none; }
  /* Кастомные SVG-иконки игр (единый набор, цвет берётся из темы) */
  .gcv-emoji-icon.gcv-svg { color: var(--coral); }
  .gcv-emoji-icon.gcv-svg svg {
    width: 48%; height: 48%;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 2px 4px rgba(var(--accent-rgb),.22));
  }
  .gcv-wide .gcv-emoji-icon.gcv-svg svg { width: 46%; height: 46%; }
  /* Лёгкое «дыхание» иконки при наведении на карточку */
  .game-card-v2:hover .gcv-emoji-icon.gcv-svg svg { transform: scale(1.06); transition: transform var(--t-base) var(--ease-spring); }
  .gcv-num {
    position: absolute;
    top: -4px;
    right: -8px;
    background: linear-gradient(140deg, var(--coral), var(--gold));
    color: white;
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: .06em;
    box-shadow: 0 4px 10px -2px rgba(var(--accent-rgb),.55);
    min-width: 28px;
    text-align: center;
  }

  .gcv-title {
    font-weight: 700;
    color: var(--berry);
    font-size: 14px;
    line-height: 1.2;
  }
  .gcv-ko {
    font-size: 12px;
    color: var(--coral);
    margin-top: 2px;
    font-weight: 600;
    line-height: 1.2;
  }
  .gcv-sub {
    font-size: 12px;
    color: var(--soft);
    margin-top: 6px;
    line-height: 1.35;
    min-height: 30px;
  }

  .gcv-foot {
    margin-top: auto;
    padding-top: 10px;
    width: 100%;
    border-top: 1px dashed rgba(var(--rose-rgb),.30);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
  }
  .gcv-best {
    font-size: 10px;
    color: var(--gold-ink);
    font-weight: 700;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
  .gcv-xp {
    font-size: 10px;
    color: var(--gold-ink);
    font-weight: 800;
    background: rgba(201,165,92,.18);
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
    letter-spacing: .02em;
  }

  /* K-Pop special variant */
  .game-card-kpop {
    background: linear-gradient(155deg, var(--berry) 0%, var(--ink) 100%);
    border-color: transparent;
    box-shadow:
      0 4px 0 rgba(0,0,0,.18),
      0 14px 30px -10px rgba(92,42,51,.45);
  }
  .game-card-kpop:hover {
    box-shadow:
      0 4px 0 rgba(0,0,0,.18),
      0 18px 36px -10px rgba(92,42,51,.55);
  }

  /* ───── FORM ───── */
  .input {
    width: 100%; background: var(--card); border: 1px solid var(--line);
    /* 16px: меньше — iOS Safari принудительно зумит экран при фокусе */
    border-radius: 12px; padding: 12px 14px; font-size: 16px; color: var(--berry);
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
    box-shadow: var(--shadow-xs);
  }
  .input:focus {
    outline: none; border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15);
  }

  /* ───── KO QUOTE ───── */
  .ko-quote {
    border-left: 3px solid var(--coral);
    background: linear-gradient(135deg, rgba(251,232,234,.85), rgba(255,244,238,.85));
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--berry);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }

  /* ───── SECTION HEADER ───── */
  .section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px; margin-bottom: 12px;
  }
  .section-head .left { display: flex; align-items: center; gap: 10px; }
  .section-head .rule {
    width: 18px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--rose), var(--coral));
  }
  .section-head .title { font-weight: 600; font-size: 16px; color: var(--berry); letter-spacing: -0.005em; }
  .section-head .meta  { font-size: 11px; color: var(--coral); font-weight: 500; font-style: italic; }

  /* ───── AUTH TABS ───── */
  /* Брендовые кнопки входа: Kakao (жёлтая) и Apple (чёрная, пока отключена).
     Объёмные, как остальные duo-кнопки: «губа» снизу + нажатие. */
  .auth-kakao {
    background: #FEE500 !important; color: #191919 !important;
    border: 2px solid #E0C900 !important;
    font-weight: 700;
    box-shadow: 0 var(--duo-lip, 4px) 0 #C9B400 !important;
    transition: filter var(--t-base) var(--ease-out), transform .12s ease-out, box-shadow .12s ease-out;
  }
  .auth-kakao:hover { filter: brightness(.97); }
  .auth-kakao:active { transform: translateY(3px); box-shadow: 0 0 0 #C9B400 !important; }
  .auth-apple {
    background: #111114 !important; color: #FFFFFF !important;
    border: 2px solid #000000 !important;
    font-weight: 700;
    box-shadow: 0 var(--duo-lip, 4px) 0 #000000 !important;
  }
  .auth-apple[disabled] { opacity: .55; cursor: not-allowed; }
  body.theme-dark .auth-apple { background: #F2F5FA !important; color: #111114 !important; border-color: #C7CEDD !important; box-shadow: 0 var(--duo-lip, 4px) 0 #9AA3B5 !important; }
  body.theme-dark .auth-apple span { background: rgba(0,0,0,.12) !important; }

  .auth-tabs {
    display: flex; gap: 4px; padding: 4px;
    background: var(--linen); border-radius: 14px; margin-bottom: 14px;
    box-shadow: inset 0 1px 2px rgba(92,42,51,.06);
  }

  /* Журнал: выбранный статус урока заливается своим цветом.
     Селекторы удвоены + !important — иначе duo-слой .btn-ghost перебивает. */
  .jrn-mark-btn.jrn-on-done, .jrn-mark-btn.jrn-on-done:hover {
    background: rgba(132,196,116,.30) !important; border-color: var(--ok-ink) !important;
    color: var(--ok-deep) !important; box-shadow: 0 3px 0 var(--ok-ink) !important;
  }
  .jrn-mark-btn.jrn-on-miss, .jrn-mark-btn.jrn-on-miss:hover {
    background: var(--bad-bg) !important; border-color: var(--bad-line) !important;
    color: var(--bad-ink) !important; box-shadow: 0 3px 0 var(--bad-line) !important;
  }
  .jrn-mark-btn.jrn-on-move, .jrn-mark-btn.jrn-on-move:hover {
    background: rgba(229,180,60,.25) !important; border-color: #C9A55C !important;
    color: var(--gold-ink) !important; box-shadow: 0 3px 0 #C9A55C !important;
  }
  .jrn-mark-btn.jrn-on-none, .jrn-mark-btn.jrn-on-none:hover {
    background: var(--blush) !important; border-color: var(--rose) !important;
    color: var(--berry) !important; box-shadow: 0 3px 0 var(--rose) !important;
  }

  /* Журнал: переключатель Неделя/Месяц */
  .jrn-viewtoggle { display: flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
  .jrn-vt-btn {
    flex: 1; border: none; background: none; font-family: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--soft); padding: 8px 10px; border-radius: 9px; cursor: pointer;
    transition: background var(--t-base, .2s) ease, color var(--t-base, .2s) ease;
  }
  .jrn-vt-btn.on { background: var(--coral); color: #fff; box-shadow: 0 2px 8px -2px rgba(var(--accent-rgb,224,118,134), .55); }

  /* Журнал: недельный вид — сетка «Время × Дни» (как бумажное расписание) */
  .jrn-tt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
  .jrn-tt { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 528px; }
  .jrn-tt th, .jrn-tt td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .jrn-tt tr > *:last-child { border-right: none; }
  .jrn-tt tbody tr:last-child > * { border-bottom: none; }
  .jrn-tt thead th {
    background: var(--blush); color: var(--berry); font-size: 12.5px; font-weight: 800;
    text-align: center; padding: 7px 4px; white-space: nowrap;
  }
  .jrn-tt-dayh .jrn-tt-date { display: block; font-size: 10px; font-weight: 600; color: var(--soft); margin-top: 1px; }
  .jrn-tt-today { background: var(--coral); color: #fff; }
  .jrn-tt-today .jrn-tt-date { color: rgba(255,255,255,.85); }
  .jrn-tt-time {
    position: sticky; left: 0; z-index: 2; background: var(--paper);
    color: var(--coral); font-size: 11.5px; font-weight: 800; text-align: center;
    padding: 6px 9px; white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .jrn-tt-corner { background: var(--blush); color: var(--berry); }
  .jrn-tt td { padding: 4px; vertical-align: top; min-width: 78px; }
  .jrn-tt-col-today { background: rgba(var(--accent-rgb, 224,118,134), .06); }
  .jrn-tt-chip {
    display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
    cursor: pointer; font-family: inherit; position: relative;
    background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--coral));
    border-radius: 7px; padding: 5px 7px; margin-bottom: 4px;
    transition: transform var(--t-fast, .15s) ease, box-shadow var(--t-fast, .15s) ease;
  }
  .jrn-tt-chip:last-child { margin-bottom: 0; }
  .jrn-tt-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(0,0,0,.25); }
  .jrn-tt-chip:active { transform: scale(.99); }
  .jrn-tt-chip-dim { opacity: .5; }
  .jrn-tt-name { font-size: 11.5px; font-weight: 700; color: var(--berry); line-height: 1.2; word-break: break-word; }
  .jrn-tt-daytag { font-size: 8.5px; font-weight: 800; color: var(--soft); letter-spacing: .03em; }
  .jrn-tt-st { position: absolute; top: 3px; right: 4px; font-size: 9px; font-weight: 800; line-height: 1; }
  .jrn-st-done { color: var(--ok-ink); }
  .jrn-st-miss { color: var(--bad-ink); }
  .jrn-st-move { color: var(--gold-ink); }
  .jrn-tt-when { font-size: 8.5px; font-weight: 800; line-height: 1.1; margin-top: 1px; }

  /* Скоро — прозрачно-фиолетовый, Идёт сейчас — прозрачно-зелёный */
  .jrn-tt-chip.jrn-tt-soon { background: rgba(146,124,228,.16); border-color: rgba(146,124,228,.5); }
  .jrn-tt-chip.jrn-tt-soon .jrn-tt-when { color: #6A52C4; }
  .jrn-tt-chip.jrn-tt-now {
    background: rgba(99,184,124,.20); border-color: rgba(99,184,124,.6);
    box-shadow: 0 0 0 1px rgba(99,184,124,.45);
    animation: jrnNowPulse 2.2s ease-in-out infinite;
  }
  .jrn-tt-chip.jrn-tt-now .jrn-tt-name { color: #2E7D45; }
  .jrn-tt-chip.jrn-tt-now .jrn-tt-when { color: #2E7D45; }
  @keyframes jrnNowPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(99,184,124,.40); }
    50%      { box-shadow: 0 0 0 4px rgba(99,184,124,.16); }
  }
  /* Легенда состояний под сеткой */
  .jrn-tt-leg { font-size: 9px; padding: 3px 9px; border: 1px solid transparent; color: var(--berry); font-weight: 700; }
  .jrn-tt-leg-soon { background: rgba(146,124,228,.18); border-color: rgba(146,124,228,.45); color: #6A52C4; }
  .jrn-tt-leg-now { background: rgba(99,184,124,.20); border-color: rgba(99,184,124,.5); color: #2E7D45; }

  body.theme-dark .jrn-tt-chip.jrn-tt-soon { background: rgba(165,146,245,.24); border-color: rgba(165,146,245,.6); }
  body.theme-dark .jrn-tt-chip.jrn-tt-soon .jrn-tt-when { color: #C4B5F5; }
  body.theme-dark .jrn-tt-chip.jrn-tt-now { background: rgba(120,205,145,.26); border-color: rgba(120,205,145,.65); }
  body.theme-dark .jrn-tt-chip.jrn-tt-now .jrn-tt-name,
  body.theme-dark .jrn-tt-chip.jrn-tt-now .jrn-tt-when { color: #A7E6BD; }
  body.theme-dark .jrn-tt-leg-soon { color: #C4B5F5; }
  body.theme-dark .jrn-tt-leg-now { color: #A7E6BD; }

  .auth-tab {
    flex: 1; padding: 9px; font-size: 12.5px;
    background: transparent; color: var(--berry);
    border: none; border-radius: 10px; cursor: pointer;
    font-weight: 500;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
  }
  .auth-tab-active {
    background: var(--berry); color: white; font-weight: 600;
    box-shadow: 0 4px 10px -4px rgba(92,42,51,.4);
  }

  /* Рейтинг: лёгкий тумблер периода (Неделя / Всё время) */
  .lb-chip {
    padding: 4px 11px; font-size: 11px; font-weight: 600;
    background: var(--linen); color: var(--soft);
    border: 1px solid transparent; border-radius: 999px; cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  }
  .lb-chip:active { transform: scale(.97); }
  .lb-chip-on {
    background: var(--blush); color: var(--berry); border-color: var(--rose);
  }

  /* ───── XP POP ───── */
  @keyframes xpPop {
    0%   { opacity: 0; transform: translate(-50%, 8px) scale(.9); }
    20%  { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
    80%  { opacity: 1; transform: translate(-50%, -10px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -22px) scale(.95); }
  }

  /* ───── ACHIEVEMENT POP ───── */
  .ach-pop {
    position: fixed; left: 50%; top: 80px;
    transform: translate(-50%, -16px);
    background: var(--card);
    border: 2px solid var(--gold);
    border-radius: 18px;
    padding: 14px 18px 14px 14px;
    z-index: 800;
    box-shadow: 0 14px 40px -10px rgba(var(--accent-rgb),.4), 0 0 0 6px rgba(201,165,92,.10);
    display: flex; align-items: center; gap: 12px;
    max-width: 360px; min-width: 240px;
    animation: achPop 3.2s var(--ease-out) forwards;
  }
  @keyframes achPop {
    0%   { opacity: 0; transform: translate(-50%, -16px) scale(.92); }
    8%   { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
    16%  { transform: translate(-50%, 0) scale(1); }
    85%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -10px); }
  }

  /* Achievements strip skeleton — shown while the cloud snapshot is still in
     flight, so a returning user never sees a misleading "0 achievements" state. */
  .ach-skeleton {
    flex-shrink: 0;
    width: 60px; height: 60px;
    border-radius: 16px;
    background: linear-gradient(110deg, var(--blush) 25%, var(--card) 50%, var(--blush) 75%);
    background-size: 220% 100%;
    animation: achSkeleton 1.1s ease-in-out infinite;
  }
  @keyframes achSkeleton {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
  }

  /* ───── FEED MEDIA EXPAND BUTTON ───── */
  .feed-media-wrap {
    position: relative;
    margin-bottom: 12px;
  }
  .feed-media-expand-btn {
    position: absolute;
    bottom: 10px; right: 10px;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    color: white;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    z-index: 5;
    transition: background var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-spring);
  }
  .feed-media-expand-btn:hover { background: rgba(0, 0, 0, .78); }
  .feed-media-expand-btn:active { transform: scale(.88); }

  /* Heart that pulses over the photo on a double-tap-to-like */
  .media-double-tap-heart {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(.3);
    font-size: 64px;
    color: white;
    text-shadow: 0 4px 16px rgba(0,0,0,.4);
    pointer-events: none;
    opacity: 0;
    z-index: 4;
    animation: doubleTapHeart .9s var(--ease-spring) forwards;
  }
  @keyframes doubleTapHeart {
    0%   { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
  }

  /* ───── PROFILE MODE TOGGLES (admin vs student) ───── */
  .profile-admin-only { display: none; }
  #screen-profile.admin-mode .profile-student-only { display: none !important; }
  #screen-profile.admin-mode .profile-admin-only { display: block; }

  /* ───── HOME GREETING AVATAR ───── */
  .home-greet-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--blush), var(--card));
    display: flex; align-items: center; justify-content: center;
    font-size: 42px;
    box-shadow: var(--shadow-sm);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
  }

  /* ───── PASSWORD TOGGLE ───── */
  /* Hide native browser reveal/clear icons across vendors so our custom icon is the only one */
  input[type="password"]::-ms-reveal,
  input[type="password"]::-ms-clear { display: none !important; width: 0; height: 0; }
  input[type="password"]::-webkit-credentials-auto-fill-button { display: none !important; visibility: hidden; pointer-events: none; }
  .pass-wrap { position: relative; display: block; }
  .pass-wrap > .input { padding-right: 42px; width: 100%; }
  .pass-toggle {
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; padding: 0;
    border-radius: 10px;
    color: var(--soft);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
  }
  .pass-toggle:hover { color: var(--coral); background: rgba(var(--accent-rgb),.08); }
  .pass-toggle:active { transform: translateY(-50%) scale(.92); }
  .pass-toggle i { font-size: 13px; pointer-events: none; }

  /* ───── FEED SOCIAL (likes + comments) ───── */
  .feed-social {
    display: flex; align-items: center; gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .feed-social-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; padding: 4px 2px;
    font-size: 12.5px; font-weight: 500;
    color: var(--soft);
    cursor: pointer;
    transition: color .25s var(--ease-out),
                transform var(--t-fast) var(--ease-spring);
  }
  .feed-social-btn:hover { color: var(--coral); }
  .feed-social-btn:active { transform: scale(.94); }
  .feed-social-btn i {
    font-size: 15px;
    transition: color .25s var(--ease-out);
  }
  .feed-social-btn.liked { color: var(--coral); }

  /* ── Like animation: heart wrapper holds the icon + the burst ring ── */
  .heart-fx {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
  }
  .heart-fx i { will-change: transform; }
  .feed-like-btn.just-liked .heart-fx i {
    animation: heartBeat .55s var(--ease-spring);
  }
  @keyframes heartBeat {
    0%   { transform: scale(1); }
    18%  { transform: scale(.78); }
    45%  { transform: scale(1.5); }
    70%  { transform: scale(.92); }
    100% { transform: scale(1); }
  }
  .feed-like-btn.just-unliked .heart-fx i {
    animation: heartDeflate .3s var(--ease-out);
  }
  @keyframes heartDeflate {
    0%   { transform: scale(1); }
    50%  { transform: scale(.8); }
    100% { transform: scale(1); }
  }
  .feed-like-btn.just-liked .heart-fx::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--coral);
    transform: scale(.3);
    opacity: 0;
    pointer-events: none;
    animation: heartRing .55s ease-out;
  }
  @keyframes heartRing {
    0%   { transform: scale(.3); opacity: .9; border-width: 5px; }
    70%  { opacity: .25; }
    100% { transform: scale(2.7); opacity: 0; border-width: 1px; }
  }
  /* Floating mini hearts on like */
  .heart-particle {
    position: absolute;
    left: 50%; top: 50%;
    pointer-events: none;
    color: var(--coral);
    font-size: 10px;
    line-height: 1;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: heartFloat .85s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  @keyframes heartFloat {
    0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 28px)) scale(.9); opacity: 0; }
  }
  /* Counter bumps when YOU change the like state */
  .feed-like-btn.just-liked .like-count {
    display: inline-block;
    animation: countPop .4s var(--ease-spring);
  }
  @keyframes countPop {
    0%   { transform: translateY(0); }
    45%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
  }
  .count-pop { animation: countPop .4s var(--ease-out); display: inline-block; }

  /* Home "Продолжить" resume chip */
  .continue-chip {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--rose-rgb),.16), rgba(var(--accent-rgb),.10));
    border: 1px solid var(--line);
    cursor: pointer; font-family: inherit; text-align: left;
    transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
  }
  .continue-chip:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(var(--accent-rgb),.4); }
  .continue-chip:active { transform: scale(.985); }
  .continue-chip .cc-ico {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    background: var(--grad-coral); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    box-shadow: 0 4px 12px -3px rgba(var(--accent-rgb),.55);
  }
  .continue-chip .cc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .continue-chip .cc-label { font-size: 10px; letter-spacing: .14em; font-weight: 700; color: var(--coral); text-transform: uppercase; }
  .continue-chip .cc-sub { font-size: 14px; font-weight: 600; color: var(--berry); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .continue-chip .cc-arrow { color: var(--soft); font-size: 13px; flex-shrink: 0; }

  /* Mini progress bar under the current lesson tile (resume point) */
  .tile-progress {
    width: 72px; height: 5px; margin: 6px auto 0;
    background: rgba(var(--rose-rgb),.28); border-radius: 999px; overflow: hidden;
  }
  .tile-progress span {
    display: block; height: 100%;
    background: var(--grad-coral); border-radius: 999px;
    transition: width .4s var(--ease-out);
  }

  /* Weekly XP bar-chart (profile) */
  .wxc-card { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; padding: 14px 12px; }
  .wxc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .wxc-bar-track { width: 100%; height: 72px; display: flex; align-items: flex-end; justify-content: center; }
  .wxc-bar {
    width: 60%; max-width: 26px; min-height: 3px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, var(--coral), var(--blush));
    transition: height .5s var(--ease-out);
  }
  .wxc-bar.today { background: var(--grad-coral); box-shadow: 0 3px 10px -3px rgba(var(--accent-rgb),.5); }
  .wxc-val { font-size: 9px; color: var(--soft); min-height: 11px; line-height: 1; }
  .wxc-day { font-size: 10px; color: var(--soft); }
  .wxc-day.today { color: var(--coral); font-weight: 700; }

  /* My Words — search + sort controls */
  .words-controls { display: flex; gap: 8px; align-items: center; }
  .words-search {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 8px 12px;
  }
  .words-search i { color: var(--soft); font-size: 12px; flex-shrink: 0; }
  .words-search input {
    flex: 1; min-width: 0; border: none; background: none; outline: none;
    font-family: inherit; font-size: 16px; color: var(--berry);
  }
  .words-sort { display: flex; gap: 4px; background: var(--paper); border-radius: 12px; padding: 3px; flex-shrink: 0; }
  .words-sort-btn {
    border: none; background: none; cursor: pointer; font-family: inherit;
    font-size: 11px; font-weight: 600; color: var(--soft);
    padding: 6px 10px; border-radius: 9px; transition: all var(--t-fast) var(--ease-out);
  }
  .words-sort-btn.active { background: var(--card); color: var(--coral); box-shadow: 0 2px 6px -2px rgba(92,42,51,.15); }
  /* Фильтр словарика по типу: слова / грамматика / фразы */
  .words-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
  .wt-chip {
    border: 1px solid var(--line); background: var(--card); cursor: pointer; font-family: inherit;
    font-size: 11px; font-weight: 600; color: var(--soft);
    padding: 5px 11px; border-radius: 999px; transition: all var(--t-fast) var(--ease-out);
  }
  .wt-chip:hover { border-color: var(--rose); }
  .wt-chip.active { background: var(--grad-coral); color: #fff; border-color: transparent; }
  .wt-badge {
    flex-shrink: 0; font-size: 12px; line-height: 1; padding: 4px 6px; border-radius: 8px;
    background: var(--blush);
  }
  .word-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 8px 12px;
    transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  }
  .word-row.selected { border-color: var(--coral); background: var(--blush); }
  .word-check { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; }
  .word-check input { width: 18px; height: 18px; accent-color: var(--coral); cursor: pointer; }

  /* ───────── TOPIK prep ───────── */
  /* Entry card (Lessons + Home) */
  .topik-entry {
    width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 16px; border-radius: 20px; border: none; cursor: pointer;
    font-family: inherit; text-align: left;
    background: linear-gradient(135deg, var(--berry) 0%, var(--coral) 100%);
    color: #fff; box-shadow: 0 10px 26px -10px rgba(92,42,51,.5);
    transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
  }
  .topik-entry:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(92,42,51,.55); }
  .topik-entry:active { transform: scale(.99); }
  .topik-entry-badge {
    flex-shrink: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 700;
    font-size: 15px; letter-spacing: .04em; line-height: 1;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32);
    border-radius: 12px; padding: 11px 12px;
  }
  .topik-entry-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .topik-entry-title { font-weight: 700; font-size: 16px; }
  .topik-entry-sub { font-size: 11.5px; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topik-entry-arrow { opacity: .85; flex-shrink: 0; }
  /* Две группы экзаменов рядом — вертикальные компактные карточки */
  .topik-entry-half {
    flex: 1; min-width: 0; flex-direction: column; align-items: flex-start;
    gap: 10px; padding: 14px;
  }
  .topik-entry-half .topik-entry-badge { font-size: 13px; padding: 8px 11px; align-self: flex-start; }
  .topik-entry-half .topik-entry-text { flex: none; width: 100%; }
  .topik-entry-half .topik-entry-title { font-size: 14px; line-height: 1.15; }
  .topik-entry-half .topik-entry-sub { font-size: 10px; white-space: normal; line-height: 1.3; opacity: .92; }
  .topik-entry-half.mock { background: linear-gradient(135deg, #5b6cb4 0%, #8a73c0 100%); box-shadow: 0 10px 26px -10px rgba(60,50,110,.5); }
  body.theme-dark .topik-entry-half.mock { background: linear-gradient(135deg, #3D5288 0%, #5a4f86 100%); }

  /* Экран выбора уровня (вход «Подготовка к ТОПИК» с главной) */
  .topik-level-pick { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
  .topik-level-pick .topik-entry { padding: 18px 16px; }
  .topik-level-pick .topik-entry-sub { white-space: normal; line-height: 1.35; opacity: .92; }

  /* ───────── Bento-раскладка входов «Уроки» (#5c) ───────── */
  .lessons-bento {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 12px 20px 4px; align-items: stretch;
  }
  .lessons-bento .be-ai { grid-column: 1 / -1; padding: 18px; }
  .lessons-bento .be-ai .topik-entry-title { font-size: 17px; }
  .lessons-bento .be-topik { grid-column: 1 / -1; padding: 18px; }
  .lessons-bento .be-topik .topik-entry-title { font-size: 17px; }
  .lessons-bento .be-self { grid-row: span 2; justify-content: space-between; }
  /* единый нейтральный бейдж поверх цветной карточки */
  .be-badge { background: rgba(255,255,255,.2) !important; border-color: rgba(255,255,255,.4) !important; color: #fff !important; }
  /* Цветовые акценты по карточкам (светлая тема) */
  .topik-entry.be-ai      { background: linear-gradient(135deg, #E8694F 0%, #C0436A 100%); box-shadow: 0 14px 34px -10px rgba(224,67,90,.5); }
  .topik-entry.be-topik   { background: linear-gradient(135deg, var(--berry) 0%, var(--coral) 100%); box-shadow: 0 14px 34px -10px rgba(92,42,51,.5); }
  .topik-entry.be-topik:hover { box-shadow: 0 20px 44px -12px rgba(92,42,51,.6); }
  .topik-entry.be-real    { background: linear-gradient(135deg, var(--berry) 0%, var(--coral) 100%); }
  .topik-entry.be-mock    { background: linear-gradient(135deg, #5b6cb4 0%, #8a73c0 100%); box-shadow: 0 10px 26px -10px rgba(60,50,110,.5); }
  .topik-entry.be-self    { background: linear-gradient(160deg, #4A5A93 0%, #6E5BA6 100%); }
  .topik-entry.be-deep    { background: linear-gradient(135deg, #C2598B 0%, #E0815F 100%); }
  .topik-entry.be-reading { background: linear-gradient(140deg, #5BA86F 0%, #3E7E52 100%); }
  .topik-entry.be-ai:hover { box-shadow: 0 20px 44px -12px rgba(224,67,90,.6); }
  /* Тёмная тема — те же акценты приглушённо (перебивают общий тёмный фон карточек по специфичности) */
  body.theme-dark .topik-entry.be-ai      { background: linear-gradient(135deg, #7A3C4E 0%, #5E2E48 100%); }
  body.theme-dark .topik-entry.be-topik   { background: linear-gradient(135deg, #3F3050 0%, #6E3B46 100%); }
  body.theme-dark .topik-entry.be-real    { background: linear-gradient(135deg, #3F3050 0%, #6E3B46 100%); }
  body.theme-dark .topik-entry.be-mock    { background: linear-gradient(135deg, #3D5288 0%, #5a4f86 100%); }
  body.theme-dark .topik-entry.be-self    { background: linear-gradient(160deg, #2E3A66 0%, #463A6B 100%); }
  body.theme-dark .topik-entry.be-deep    { background: linear-gradient(135deg, #6E3556 0%, #7A4538 100%); }
  body.theme-dark .topik-entry.be-reading { background: linear-gradient(140deg, #356046 0%, #284E37 100%); }
  /* Очень узкие экраны — один столбец, ничего не сплющивается */
  @media (max-width: 360px) {
    .lessons-bento { grid-template-columns: 1fr; }
    .lessons-bento .be-self { grid-row: auto; }
  }

  /* ───────── Дашборд аналитики: подробная таблица учениц ───────── */
  .dash-tbl-wrap { overflow: auto; max-height: 430px; -webkit-overflow-scrolling: touch; }
  .dash-tbl { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 540px; }
  .dash-tbl th {
    font-weight: 700; color: var(--soft); text-align: left;
    padding: 7px 9px; border-bottom: 2px solid var(--line); white-space: nowrap;
    position: sticky; top: 0; background: var(--paper); z-index: 1;
  }
  .dash-tbl td {
    padding: 7px 9px; border-bottom: 1px solid var(--line);
    color: var(--berry); white-space: nowrap;
  }
  .dash-tbl td:first-child {
    max-width: 130px; overflow: hidden; text-overflow: ellipsis; font-weight: 600;
  }
  .dash-tbl th.num, .dash-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .dash-tbl tbody tr:last-child td { border-bottom: none; }
  .dash-tbl tbody tr:hover td { background: var(--blush); }

  /* ═══════════ Дашборд «Аналитика школы» (.dx-*) ═══════════
     Всё на токенах темы → автоматически работает во всех 7 темах + тёмной.
     Семантические цвета (онлайн-зелёный, статусы доступа) — фиксированные. */
  .dx-empty { font-size: 12px; color: var(--soft); padding: 6px 2px; }

  /* — Аватар — */
  .dx-ava {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; background: var(--blush);
    font-size: 17px; line-height: 1; flex: none; overflow: hidden;
  }
  .dx-ava-sm { width: 34px; height: 34px; font-size: 16px; }
  .dx-ava-xs { width: 26px; height: 26px; font-size: 13px; }
  .dx-ava-img { width: 100%; height: 100%; object-fit: cover; }
  .dx-ava-on::after {
    content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
    border-radius: 50%; background: #3fae6e; border: 2px solid var(--card);
  }
  .dx-ava-xs.dx-ava-on::after { width: 8px; height: 8px; border-width: 1.5px; }

  /* — Сейчас в сети — */
  .dx-online {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    border: 1px solid rgba(63,174,110,.28); border-radius: 20px; padding: 13px 16px;
    background: linear-gradient(135deg, rgba(63,174,110,.13), rgba(63,174,110,.05));
  }
  .dx-online-empty { border-color: var(--line); background: var(--paper); }
  .dx-online-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .dx-online-txt { font-size: 13px; color: var(--berry); }
  .dx-online-txt b { color: #1f9e6a; font-weight: 800; font-variant-numeric: tabular-nums; }
  .dx-moon { font-size: 15px; line-height: 1; }
  .dx-live-dot { position: relative; width: 11px; height: 11px; flex: none; }
  .dx-live-dot::before, .dx-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3fae6e; }
  .dx-live-dot::before { animation: dxPing 1.6s cubic-bezier(0,0,.2,1) infinite; }
  @keyframes dxPing { 0% { transform: scale(1); opacity: .7; } 75%, 100% { transform: scale(2.3); opacity: 0; } }
  body.calm-motion .dx-live-dot::before { animation: none; opacity: 0; }
  .dx-online-r { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .dx-ava-stack { display: flex; flex: none; }
  .dx-ava-stack .dx-ava { margin-left: -9px; border: 2px solid var(--card); box-shadow: var(--shadow-xs); }
  .dx-ava-stack .dx-ava:first-child { margin-left: 0; }
  .dx-online-names { font-size: 12px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
  /* На телефоне аватары уже всё показывают — список имён прячем (текст пустого состояния остаётся). */
  @media (max-width: 559.98px) { .dx-online:not(.dx-online-empty) .dx-online-names { display: none; } }

  /* — KPI-карточки — */
  .dx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dx-kpi {
    position: relative; overflow: hidden; background: var(--card); min-width: 0;
    border: 1px solid var(--line); border-radius: 22px; padding: 15px;
    box-shadow: 0 8px 30px -16px rgba(var(--accent-rgb), .3);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  }
  .dx-kpi::before {
    content: ""; position: absolute; right: -18px; top: -24px; width: 84px; height: 84px;
    border-radius: 50%; background: var(--blush); opacity: .55; filter: blur(10px);
    transition: opacity var(--t-base) var(--ease-out); pointer-events: none;
  }
  .dx-kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -16px rgba(var(--accent-rgb), .42); }
  .dx-kpi:hover::before { opacity: 1; }
  .dx-kpi-ico {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 14px; background: var(--blush); font-size: 20px; line-height: 1;
  }
  .dx-kpi-val { position: relative; margin-top: 13px; font-size: 27px; font-weight: 800; line-height: 1; color: var(--berry); font-variant-numeric: tabular-nums; }
  .dx-kpi-lbl { position: relative; margin-top: 6px; font-size: 12px; color: var(--soft); }
  .dx-kpi-trend {
    position: relative; display: inline-flex; margin-top: 9px; padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; background: rgba(var(--accent-rgb), .12); color: var(--coral);
  }

  /* — Карточка-секция — */
  .dx-sec {
    background: var(--card); border: 1px solid var(--line); border-radius: 22px;
    box-shadow: 0 8px 30px -14px rgba(var(--accent-rgb), .2);
  }
  .dx-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
  .dx-sec-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .dx-sec-ico { font-size: 19px; line-height: 1; flex: none; }
  .dx-sec-title h3 { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--berry); letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dx-sec-body { padding: 0 18px 18px; }
  .dx-pill {
    flex: none; display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    background: var(--blush); color: var(--soft); white-space: nowrap;
  }

  /* — Список-бары — */
  .dx-bars { display: flex; flex-direction: column; gap: 2px; }
  .dx-bar { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 14px; transition: background var(--t-fast) var(--ease-out); }
  .dx-bar:hover { background: var(--blush); }
  .dx-rank { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--blush); color: var(--soft); }
  .dx-rank.top { background: var(--grad-coral); color: #fff; }
  .dx-bar-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: var(--blush); font-size: 16px; }
  .dx-bar-main { flex: 1; min-width: 0; }
  .dx-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .dx-bar-name { min-width: 0; font-size: 13px; color: var(--berry); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dx-bar-sub { margin-left: 6px; font-size: 11px; color: var(--soft); }
  .dx-bar-val { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--blush); color: var(--berry); }
  .dx-bar-val.lead { background: var(--grad-coral); color: #fff; }
  .dx-bar-val.zero { color: var(--hush); background: transparent; }
  .dx-track { height: 8px; border-radius: 999px; background: var(--blush); overflow: hidden; }
  .dx-fill { height: 100%; border-radius: 999px; background: var(--grad-coral); transition: width .9s var(--ease-out); }

  /* — Донат-диаграмма — */
  .dx-donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .dx-donut { position: relative; width: 128px; height: 128px; flex: none; margin: 0 auto; }
  .dx-donut svg { width: 100%; height: 100%; }
  .dx-donut circle { transition: stroke-dasharray .8s var(--ease-out); }
  .dx-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .dx-donut-num { font-size: 23px; font-weight: 800; color: var(--berry); line-height: 1; font-variant-numeric: tabular-nums; }
  .dx-donut-lbl { font-size: 10.5px; color: var(--soft); margin-top: 2px; }
  .dx-donut-legend { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 9px; }
  .dx-leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--berry); }
  .dx-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
  .dx-leg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dx-leg-val { color: var(--soft); font-variant-numeric: tabular-nums; }

  /* — Вертикальные столбцы (активность / месяцы) — */
  .dx-vbars { display: flex; align-items: flex-end; gap: 5px; height: var(--h, 96px); padding-top: 6px; }
  .dx-vbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
  .dx-vbar-val { font-size: 10px; font-weight: 700; color: var(--coral); min-height: 12px; font-variant-numeric: tabular-nums; }
  .dx-vbar-fill { width: 100%; max-width: 30px; border-radius: 6px 6px 0 0; background: var(--grad-coral); transition: height .6s var(--ease-out); }
  .dx-vbar-fill.empty { background: var(--line); }
  .dx-vbar-lbl { font-size: 9px; color: var(--soft); }

  /* — Лидерборд — */
  .dx-lb { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); margin-bottom: 9px; }
  .dx-lb:last-child { margin-bottom: 0; }
  .dx-lb-fill { position: absolute; inset: 0 auto 0 0; background: rgba(var(--accent-rgb), .10); transition: width .8s var(--ease-out); }
  .dx-lb-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 13px; }
  .dx-lb-rank { width: 22px; text-align: center; font-size: 15px; font-weight: 700; color: var(--soft); flex: none; font-variant-numeric: tabular-nums; }
  .dx-lb-info { flex: 1; min-width: 0; }
  .dx-lb-name { display: block; font-size: 13.5px; color: var(--berry); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dx-lb-lvl { display: block; font-size: 11px; color: var(--soft); }
  .dx-lb-xp { flex: none; font-size: 12.5px; font-weight: 700; color: var(--coral); font-variant-numeric: tabular-nums; }

  /* — Стат-карточки (итоги) — */
  .dx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dx-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 8px; min-width: 0; }
  .dx-stat-ico { font-size: 21px; line-height: 1; }
  .dx-stat-val { font-size: 21px; font-weight: 800; color: var(--berry); line-height: 1; font-variant-numeric: tabular-nums; }
  .dx-stat-lbl { font-size: 11px; color: var(--soft); line-height: 1.3; }

  /* — Таблица учениц (поверх .dash-tbl) — */
  .dx-tbl-legend { font-size: 10px; color: var(--soft); margin-bottom: 10px; }
  .dx-tbl td:first-child { max-width: 180px; font-weight: 600; }
  .dx-tbl-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
  .dx-tbl-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* — Сетки (брейкпоинты под ширину контейнера: тел ~440 / iPad ~720 / десктоп ~880).
       minmax(0,1fr) обязателен — иначе треки не сжимаются ниже min-content и сетка
       вылезает за правый край на телефоне (grid blowout). — */
  .dx-sec { min-width: 0; }
  .dx-grid2, .dx-grid4, .dx-grid23 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 560px) { .dx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 768px) {
    .dx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dx-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dx-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .dx-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .dx-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dx-grid23 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .dx-col2 { grid-column: span 2; }
    .dx-col3 { grid-column: span 3; }
  }

  /* — Кабинет (кнопки управления) — */
  .dx-cab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  @media (min-width: 560px) { .dx-cab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .dx-cab {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 20px 12px;
    text-align: center; cursor: pointer; font-family: inherit;
    box-shadow: 0 8px 30px -18px rgba(var(--accent-rgb), .3);
    transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  }
  .dx-cab:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .3); box-shadow: 0 14px 34px -18px rgba(var(--accent-rgb), .4); }
  .dx-cab:active { transform: translateY(-1px) scale(.98); }
  .dx-cab-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px;
    border-radius: 18px; background: var(--blush); font-size: 25px; line-height: 1;
    transition: transform var(--t-base) var(--ease-spring);
  }
  .dx-cab:hover .dx-cab-ico { transform: scale(1.08); }
  .dx-cab-title { font-size: 14px; font-weight: 700; color: var(--berry); }
  .dx-cab-desc { font-size: 11.5px; color: var(--soft); }
  .dx-cab-badge {
    position: absolute; top: 10px; right: 12px; background: var(--bad-bg); color: var(--bad-ink);
    font-size: 9px; font-weight: 800; border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums;
  }

  /* — Тёмная тема: онлайн-зелёный читаемее — */
  body.theme-dark .dx-online-txt b { color: #6fe0a6; }
  body.theme-dark .dx-online { border-color: rgba(111,224,166,.3); background: linear-gradient(135deg, rgba(111,224,166,.12), rgba(111,224,166,.04)); }

  /* ───────── Динамика карточек-входов (Уроки / Главная) ───────── */
  .topik-entry { position: relative; overflow: hidden; }
  /* Световой блик пробегает по карточке при наведении/нажатии */
  .topik-entry::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.20) 48%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.20) 52%, transparent 62%);
    transform: translateX(-130%);
    transition: transform .6s var(--ease-out);
  }
  .topik-entry:hover::after, .topik-entry:active::after { transform: translateX(130%); }
  /* Усиленный подъём при наведении */
  .topik-entry:hover { transform: translateY(-3px) scale(1.012); box-shadow: 0 18px 38px -12px rgba(92,42,51,.6); }
  .topik-entry-half.mock:hover { box-shadow: 0 18px 38px -12px rgba(60,50,110,.6); }
  .topik-entry:active { transform: translateY(-1px) scale(.985); }
  /* Бейдж слегка наклоняется и подсвечивается */
  .topik-entry-badge { transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out); }
  .topik-entry:hover .topik-entry-badge { transform: translateY(-1px) rotate(-3deg) scale(1.06); box-shadow: 0 6px 16px -6px rgba(0,0,0,.32); }
  /* Стрелка уезжает вправо */
  .topik-entry-arrow { transition: transform var(--t-base) var(--ease-spring), opacity var(--t-base) var(--ease-out); }
  .topik-entry:hover .topik-entry-arrow { transform: translateX(5px); opacity: 1; }
  /* Уважение к настройке «меньше движения» */
  body.calm-motion .topik-entry::after { display: none; }
  body.calm-motion .topik-entry:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(92,42,51,.55); }
  body.calm-motion .topik-entry:hover .topik-entry-badge,
  body.calm-motion .topik-entry:hover .topik-entry-arrow { transform: none; }

  /* Hub hero */
  .topik-hero {
    border-radius: 22px; padding: 22px 18px; text-align: center;
    background: radial-gradient(120% 100% at 50% 0%, #FFF4EE, var(--blush));
    border: 1px solid var(--line);
  }
  .topik-hero-badge {
    display: inline-block; font-family: 'Fraunces', Georgia, serif;
    background: var(--grad-coral); color: #fff; border-radius: 999px;
    padding: 4px 14px; font-size: 13px; letter-spacing: .08em;
  }
  .topik-hero-badge b { font-weight: 800; }
  .topik-hero-title { font-size: 26px; color: var(--berry); margin-top: 10px; font-weight: 700; }
  .topik-hero-sub { font-size: 12px; color: var(--soft); margin-top: 4px; }

  /* About + table */
  .topik-about p { font-size: 12.5px; color: var(--berry); line-height: 1.55; margin: 0; }
  .topik-about .topik-note { color: var(--soft); font-size: 11.5px; margin-top: 10px; background: var(--paper); padding: 8px 10px; border-radius: 10px; }
  .topik-table { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 12px; }
  .topik-table th, .topik-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--berry); }
  .topik-table th { font-size: 10px; letter-spacing: .08em; color: var(--soft); text-transform: uppercase; text-align: left; }
  .topik-table td:not(:first-child), .topik-table th:not(:first-child) { text-align: center; }
  .topik-grades { font-size: 12px; color: var(--berry); background: var(--blush); border-radius: 10px; padding: 8px 10px; }

  /* Writing-rules accordion */
  .topik-rules { display: grid; gap: 8px; }
  .topik-rule { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .topik-rule-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; }
  .topik-rule-ico { font-size: 18px; flex-shrink: 0; }
  .topik-rule-title { flex: 1; min-width: 0; font-weight: 600; color: var(--berry); font-size: 13.5px; }
  .topik-rule-check { color: var(--gold-ink); font-weight: 700; opacity: 0; flex-shrink: 0; }
  .topik-rule.read .topik-rule-check { opacity: 1; }
  .topik-rule-chev { color: var(--soft); font-size: 12px; transition: transform var(--t-base) var(--ease-out); flex-shrink: 0; }
  .topik-rule.open .topik-rule-chev { transform: rotate(180deg); }
  .topik-rule-body { display: none; padding: 0 14px 14px; font-size: 12.5px; color: var(--berry); line-height: 1.55; }
  .topik-rule.open .topik-rule-body { display: block; }
  .topik-rule-body ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
  .topik-rule-body p { margin: 0 0 8px; }
  .topik-warn { color: var(--bad-ink); background: rgba(179,58,74,.08); padding: 7px 10px; border-radius: 9px; }

  /* Materials — grouped by type */
  .topik-group + .topik-group { margin-top: 16px; }
  .topik-group-head { display: flex; align-items: center; gap: 8px; padding: 0 4px; margin-bottom: 9px; }
  .topik-group-ico { font-size: 15px; }
  .topik-group-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--berry); }
  .topik-group-count { font-size: 10.5px; font-weight: 700; color: var(--coral); background: var(--blush); border-radius: 999px; padding: 1px 8px; }
  .topik-mats { display: grid; gap: 10px; }
  .topik-mat { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--rose); border-radius: 14px; padding: 12px 14px; }
  .topik-mat-vocab   { border-left-color: var(--coral); }
  .topik-mat-grammar { border-left-color: var(--gold); }
  .topik-mat-tip     { border-left-color: var(--sage); }
  .topik-mat-file    { border-left-color: var(--berry); }
  .topik-mat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .topik-mat-del { background: none; border: none; color: var(--soft); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; flex-shrink: 0; }
  .topik-mat-title { font-weight: 600; color: var(--berry); font-size: 13.5px; flex: 1; min-width: 0; }
  .topik-mat-body { font-size: 12.5px; color: var(--berry); line-height: 1.6; margin-top: 4px; }
  a.topik-mat-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--coral); font-weight: 600; font-size: 12.5px; text-decoration: none; }

  /* ── TOPIK hub: menu + sections ── */
  .topik-exam-card {
    display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
    margin-top: 16px; padding: 16px 16px; border: none; cursor: pointer;
    border-radius: 18px; color: #fff;
    background: linear-gradient(135deg, var(--berry), var(--coral));
    box-shadow: 0 14px 30px -12px rgba(92,42,51,.5);
    transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
  }
  .topik-exam-card:active { transform: scale(.99); }
  .topik-exam-ico { font-size: 26px; flex-shrink: 0; }
  .topik-exam-tx { flex: 1; min-width: 0; }
  .topik-exam-t { font-weight: 700; font-size: 16px; }
  .topik-exam-s { font-size: 11.5px; opacity: .92; }
  .topik-exam-arrow { opacity: .85; flex-shrink: 0; }

  .topik-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 14px; }
  .topik-menu-card {
    display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
    padding: 15px 14px; border: 1px solid var(--line); cursor: pointer; text-align: left;
    background: var(--card); border-radius: 16px;
    box-shadow: 0 6px 16px -10px rgba(92,42,51,.25);
    transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out), border-color .14s;
  }
  .topik-menu-card:hover { transform: translateY(-2px); border-color: var(--rose); box-shadow: 0 12px 24px -12px rgba(92,42,51,.4); }
  .topik-menu-card:active { transform: scale(.98); }
  .topik-menu-ico { font-size: 22px; }
  .topik-menu-t { font-weight: 700; font-size: 14px; color: var(--berry); }
  .topik-menu-s { font-size: 10.5px; color: var(--soft); }

  .topik-back {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
    background: none; border: none; cursor: pointer; padding: 4px 2px;
    color: var(--coral); font-weight: 600; font-size: 13px; font-family: inherit;
  }
  .topik-sec-head { position: relative; margin-bottom: 14px; }
  .topik-sec-title { margin: 0; font-size: 21px; color: var(--berry); }
  .topik-sec-sub { margin: 2px 0 0; font-size: 12px; color: var(--soft); }
  .topik-sec-add { position: absolute; top: 0; right: 0; border: none; cursor: pointer; font-size: 11px; padding: 5px 12px; }

  /* Слова */
  /* Слова: плотные карточки-«плитки», на широком экране в 2–3 колонки —
     меньше пустого пространства, живее выглядит. */
  .topik-words { display: grid; gap: 8px; grid-template-columns: 1fr; }
  .topik-word {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ko ru" "ex ex";
    gap: 2px 10px; padding: 10px 12px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  }
  .topik-word-ko { grid-area: ko; font-weight: 700; font-size: 17px; color: var(--berry); }
  .topik-word-ru { grid-area: ru; font-size: 13px; color: var(--ink, #5c2a33); align-self: center; font-weight: 600; }
  .topik-word-ex { grid-area: ex; font-size: 11.5px; color: var(--soft); margin-top: 2px; line-height: 1.5; }
  @media (min-width: 600px) { .topik-words { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .topik-words { grid-template-columns: 1fr 1fr 1fr; } }

  /* ── TOPIK deep prep · углублённый разбор по типам ── */
  .td-soon { opacity: .6; }
  .td-soon-tag { font-size: 9.5px; font-weight: 700; color: var(--soft); background: var(--blush); border-radius: 999px; padding: 2px 8px; align-self: center; white-space: nowrap; flex-shrink: 0; }
  .td-levels { display: flex; gap: 8px; margin: 4px 0 8px; }
  .td-level-btn { flex: 1; padding: 9px 0; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card); color: var(--soft); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .td-level-btn.active { background: var(--grad-coral); color: #F2F5FA; border-color: transparent; box-shadow: 0 8px 18px -10px rgba(92,42,51,.5); }
  .td-levels-hint { font-size: 11px; color: var(--soft); margin: 0 0 14px; }
  .td-types { display: grid; gap: 10px; }
  .td-type { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-family: inherit; transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
  .td-type:not(.td-soon):hover { transform: translateY(-2px); border-color: var(--rose); box-shadow: 0 12px 24px -14px rgba(92,42,51,.4); }
  .td-type:not(.td-soon):active { transform: scale(.99); }
  .td-type-badge { flex-shrink: 0; min-width: 46px; text-align: center; font-weight: 800; font-size: 13px; color: var(--coral); background: var(--blush); border-radius: 10px; padding: 8px 6px; }
  .td-type-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .td-type-title { font-weight: 700; font-size: 13.5px; color: var(--berry); line-height: 1.25; }
  .td-type-ko { font-size: 12px; color: var(--coral); }
  .td-type-skill { font-size: 11px; color: var(--soft); }
  .td-type-arrow { color: var(--soft); font-size: 13px; flex-shrink: 0; }
  .td-block { margin-bottom: 14px; }
  .td-block-h { font-weight: 700; font-size: 13px; color: var(--berry); margin-bottom: 8px; }
  .td-strategy { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 12.5px; color: var(--berry); line-height: 1.5; }
  .td-banks { display: grid; gap: 10px; margin-bottom: 4px; }
  .td-bank-sub { font-size: 11.5px; font-weight: 700; color: var(--coral); margin-bottom: 6px; }
  .td-ex-list { display: grid; gap: 14px; }
  .td-ex { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
  .td-ex-q { font-size: 16px; font-weight: 700; color: var(--berry); line-height: 1.5; }
  .td-ex-ru { font-size: 12px; color: var(--soft); margin: 4px 0 12px; line-height: 1.45; }
  .td-opts { display: grid; gap: 8px; }
  .td-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--paper); color: var(--berry); font-family: inherit; font-size: 14px; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .td-opt:not(:disabled):hover { border-color: var(--rose); background: var(--blush); }
  .td-opt:disabled { cursor: default; }
  .td-opt-n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--blush); color: var(--coral); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
  .td-opt-t { min-width: 0; }
  .td-opt.correct { border-color: #2E9E5B; background: rgba(46,158,91,.12); color: #1F7A43; }
  .td-opt.correct .td-opt-n { background: #2E9E5B; color: #fff; }
  .td-opt.wrong { border-color: #D9534F; background: rgba(217,83,79,.10); color: #B23B37; }
  .td-opt.wrong .td-opt-n { background: #D9534F; color: #fff; }
  .td-explain { display: none; margin-top: 12px; padding: 11px 12px; border-radius: 11px; background: var(--blush); font-size: 12.5px; color: var(--berry); line-height: 1.5; }
  .td-explain.show { display: block; animation: tdFade var(--t-base) var(--ease-out); }
  .td-src { margin-top: 8px; font-size: 10.5px; font-weight: 700; color: var(--soft); }
  @keyframes tdFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
  /* Текст-аналог (passage), 가나다라, вставка предложения, контейнер вопроса */
  .td-passage { font-size: 14.5px; line-height: 1.7; color: var(--berry); background: var(--blush); border-radius: 11px; padding: 11px 13px; white-space: pre-line; }
  .td-passage-ru { font-size: 11.5px; color: var(--soft); line-height: 1.5; margin: 6px 0 12px; }
  .td-sentences { display: grid; gap: 7px; margin-bottom: 12px; }
  .td-sentence { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
  .td-sentence .ko { font-size: 14px; color: var(--berry); font-weight: 600; }
  .td-sentence-ru { display: block; font-size: 11px; color: var(--soft); margin-top: 3px; line-height: 1.45; }
  .td-insert { background: var(--blush); border: 1px dashed var(--rose); border-radius: 11px; padding: 10px 12px; margin-bottom: 12px; }
  .td-insert-label { font-size: 10.5px; font-weight: 700; color: var(--coral); margin-bottom: 4px; }
  .td-insert .ko { font-size: 14px; color: var(--berry); font-weight: 600; line-height: 1.55; }
  .td-insert-ru { font-size: 11px; color: var(--soft); margin-top: 4px; line-height: 1.45; }
  .td-q + .td-q { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .td-q-label { font-size: 11px; font-weight: 700; color: var(--coral); margin-bottom: 6px; }
  .td-done-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card); color: var(--soft); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .td-done-btn:hover { border-color: var(--sage, #8FB99A); }
  .td-done-btn.on { background: rgba(46,158,91,.12); border-color: #2E9E5B; color: #1F7A43; cursor: default; }
  .td-type-check { color: #2E9E5B; font-size: 18px; flex-shrink: 0; }
  .td-type-done .td-type-badge { background: rgba(46,158,91,.14); color: #1F7A43; }
  .td-real-tag { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--coral); background: var(--blush); border-radius: 999px; padding: 3px 10px; margin-bottom: 9px; }
  .td-ex-count { font-size: 10.5px; font-weight: 700; color: var(--coral); background: var(--blush); border-radius: 999px; padding: 2px 9px; margin-left: 6px; }

  /* ════ Раздел «Чтение» (독해) + 말하기 ════ */
  .rd-intro { background: var(--blush); border-radius: 14px; padding: 14px 15px; margin-bottom: 14px; }
  .rd-intro-ko { font-size: 13px; font-weight: 700; color: var(--coral); margin-bottom: 5px; }
  .rd-intro-txt { margin: 0; font-size: 12.5px; color: var(--berry); line-height: 1.55; }
  .rd-intro-meta { margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--soft); }
  .rd-list { display: grid; gap: 10px; }
  .rd-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--berry); font-family: inherit; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .rd-card:hover { border-color: var(--rose); transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(0,0,0,.25); }
  .rd-card-emoji { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--blush); display: flex; align-items: center; justify-content: center; font-size: 21px; }
  .rd-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .rd-card-title { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
  .rd-card-ko { font-size: 12px; color: var(--soft); }
  .rd-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
  .rd-chip { font-size: 10px; font-weight: 700; color: var(--coral); background: var(--blush); border-radius: 999px; padding: 2px 9px; }
  .rd-chip-soft { color: var(--soft); }
  .rd-card-cnt { font-size: 10.5px; color: var(--soft); }
  .rd-card-arrow { flex-shrink: 0; color: var(--soft); font-size: 13px; }
  /* Шапка текста */
  .rd-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
  .rd-head-emoji { flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; background: var(--blush); display: flex; align-items: center; justify-content: center; font-size: 24px; }
  .rd-head-info { min-width: 0; }
  .rd-head-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--berry); line-height: 1.25; }
  .rd-head-ko { font-size: 13px; color: var(--coral); margin-top: 2px; }
  .rd-head-meta { font-size: 11px; color: var(--soft); margin-top: 3px; }
  /* Переключатель режимов */
  .rd-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
  .rd-tab { flex: 1; padding: 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); color: var(--soft); font-family: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .rd-tab:hover { border-color: var(--rose); }
  .rd-tab.on { background: var(--blush); border-color: var(--coral); color: var(--coral); }
  /* Панель инструментов */
  .rd-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .rd-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--soft); font-family: inherit; font-weight: 700; font-size: 12px; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .rd-toggle:hover { border-color: var(--rose); }
  .rd-toggle.on { background: var(--blush); border-color: var(--coral); color: var(--coral); }
  .rd-toggle.playing { background: var(--blush); border-color: var(--coral); color: var(--coral); }
  /* Текст по предложениям */
  .rd-text { display: grid; gap: 10px; }
  .rd-sent { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 12px 13px; transition: border-color var(--t-base) var(--ease-out); }
  .rd-sent.rd-open { border-color: var(--rose); }
  .rd-sent-row { display: flex; align-items: flex-start; gap: 10px; }
  .rd-sent-play { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--coral); cursor: pointer; font-size: 12px; transition: all var(--t-base) var(--ease-out); }
  .rd-sent-play:hover { background: var(--blush); border-color: var(--rose); }
  .rd-sent-play[data-playing] { background: var(--coral); color: #fff; border-color: var(--coral); }
  .rd-sent-ko { flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 0; font-family: inherit; font-size: 15.5px; line-height: 1.65; color: var(--berry); font-weight: 600; cursor: pointer; }
  .rd-sent-ko:hover { color: var(--coral); }
  .rd-sent-ru { font-size: 12.5px; color: var(--soft); line-height: 1.5; margin-top: 7px; padding-left: 40px; }
  .rd-hide-ru .rd-sent-ru { display: none; }
  .rd-words { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-left: 40px; }
  .rd-word { font-family: inherit; font-size: 11.5px; color: var(--berry); background: var(--blush); border: 1px solid transparent; border-radius: 8px; padding: 4px 9px; line-height: 1.4; cursor: pointer; transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
  .rd-word b { color: var(--coral); font-weight: 700; margin-right: 3px; }
  .rd-word:hover { border-color: var(--rose); }
  .rd-word:active { transform: scale(.97); }
  .rd-word .rd-word-tick { display: none; margin-left: 5px; color: var(--coral); font-size: 10px; }
  .rd-word.saved { background: rgba(var(--rose-rgb), .22); border-color: var(--coral); }
  .rd-word.saved .rd-word-tick { display: inline; }
  /* Сохранить предложение как «фразу» */
  .rd-bd-save { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--coral); cursor: pointer; font-size: 11px; line-height: 1; transition: all var(--t-base) var(--ease-out); }
  .rd-bd-save:hover { background: var(--blush); border-color: var(--rose); }
  /* Новый макет: весь текст → перевод → разбор */
  .rd-block-h { font-weight: 700; font-size: 12.5px; color: var(--soft); letter-spacing: .02em; margin: 18px 0 8px; }
  .rd-fulltext { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; font-size: 17px; line-height: 2; color: var(--berry); }
  .rd-fs { cursor: pointer; border-radius: 5px; padding: 1px 2px; transition: background var(--t-base) var(--ease-out); }
  .rd-fs:hover { background: var(--blush); }
  .rd-fs[data-playing] { background: var(--coral); color: #fff; }
  .rd-fullru { background: var(--blush); border-radius: 12px; padding: 13px 15px; font-size: 13.5px; line-height: 1.7; color: var(--berry); }
  .rd-breakdown { display: grid; gap: 10px; }
  .rd-bd { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
  .rd-bd-top { display: flex; align-items: flex-start; gap: 9px; }
  .rd-bd-spk { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--coral); cursor: pointer; font-size: 11px; transition: all var(--t-base) var(--ease-out); }
  .rd-bd-spk:hover { background: var(--blush); border-color: var(--rose); }
  .rd-bd-spk[data-playing] { background: var(--coral); color: #fff; border-color: var(--coral); }
  .rd-bd-ko { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--berry); line-height: 1.55; }
  .rd-bd-ru { font-size: 12.5px; color: var(--soft); line-height: 1.5; margin: 6px 0 0; padding-left: 37px; }
  .rd-bd .rd-words { margin-top: 9px; padding-left: 37px; }
  /* Режим 말하기 */
  .rd-speak { display: grid; gap: 14px; }
  .rd-speak-prog { text-align: center; font-size: 12px; font-weight: 700; color: var(--soft); }
  .rd-speak-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px; text-align: center; }
  .rd-speak-ko { font-size: 22px; line-height: 1.6; color: var(--berry); font-weight: 700; }
  .rd-speak-ru { font-size: 13px; color: var(--soft); line-height: 1.5; margin-top: 12px; }
  .rd-speak-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
  .rd-speak-play, .rd-speak-rec { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .rd-speak-play { border: 1px solid var(--coral); background: var(--blush); color: var(--coral); }
  .rd-speak-play:hover { background: var(--coral); color: #fff; }
  .rd-speak-play[data-playing] { background: var(--coral); color: #fff; }
  .rd-speak-rec { border: 1px solid var(--line-strong); background: var(--card); color: var(--berry); }
  .rd-speak-rec:hover { border-color: var(--coral); }
  .rd-speak-rec.mic-listening { background: var(--coral); color: #fff; border-color: var(--coral); animation: rdPulse 1.1s var(--ease-out) infinite; }
  .rd-speak-rec.mic-ok { background: rgba(46,158,91,.14); border-color: #2E9E5B; color: #1F7A43; }
  .rd-speak-rec.mic-near { background: rgba(230,160,40,.14); border-color: #E0A030; color: #9A6A10; }
  .rd-speak-rec.mic-bad { background: rgba(217,83,79,.12); border-color: #D9534F; color: #B23B37; }
  @keyframes rdPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(217,104,122,.5); } 50% { box-shadow: 0 0 0 8px rgba(217,104,122,0); } }
  .rd-rec-hint { font-size: 11.5px; color: var(--soft); align-self: center; }
  .rd-speak-nav { display: flex; gap: 10px; }
  .rd-nav-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--berry); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .rd-nav-btn:not(:disabled):hover { border-color: var(--coral); color: var(--coral); }
  .rd-nav-btn:disabled { opacity: .4; cursor: default; }

  /* ════ Курс «한국어» (① Урок / ② Задание / ③ Домашка) ════ */
  .kc-intro { background: var(--blush); border-radius: 14px; padding: 14px 15px; margin-bottom: 14px; }
  .kc-intro-ko { font-size: 13px; font-weight: 700; color: var(--coral); margin-bottom: 5px; }
  .kc-intro-txt { margin: 0; font-size: 12.5px; color: var(--berry); line-height: 1.55; }
  .kc-list { display: grid; gap: 10px; }
  .kc-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--berry); font-family: inherit; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .kc-card:hover { border-color: var(--rose); transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(0,0,0,.25); }
  .kc-card.kc-done { border-color: #2E9E5B; }
  .kc-card-emoji { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--blush); display: flex; align-items: center; justify-content: center; font-size: 21px; }
  .kc-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .kc-card-title { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
  .kc-card-ko { font-size: 12.5px; color: var(--coral); }
  .kc-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
  .kc-card-check { flex-shrink: 0; color: #2E9E5B; font-size: 18px; }
  .kc-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
  .kc-tab { flex: 1; padding: 10px 6px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); color: var(--soft); font-family: inherit; font-weight: 700; font-size: 12px; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .kc-tab:hover { border-color: var(--rose); }
  .kc-tab.on { background: var(--blush); border-color: var(--coral); color: var(--coral); }
  .kc-sec { margin-bottom: 18px; }
  .kc-sec-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--berry); margin-bottom: 10px; }
  .kc-cnt { font-size: 11px; font-weight: 700; color: var(--coral); background: var(--blush); border-radius: 999px; padding: 2px 9px; }
  .kc-vocab { display: grid; gap: 8px; }
  .kc-word { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 12px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-family: inherit; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .kc-word:hover { border-color: var(--rose); background: var(--blush); }
  .kc-word-ko { font-size: 16px; font-weight: 700; color: var(--berry); }
  .kc-word-tr { grid-row: 2; grid-column: 1 / 2; font-size: 11px; color: var(--soft); white-space: nowrap; }
  .kc-word-ru { grid-row: 1 / 3; grid-column: 2; font-size: 13px; color: var(--berry); }
  .kc-word-spk { grid-row: 1 / 3; grid-column: 3; color: var(--coral); font-size: 13px; }
  .kc-gram { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 13px; margin-bottom: 10px; }
  .kc-gram-form { font-size: 16px; font-weight: 700; color: var(--coral); }
  .kc-gram-ru { font-size: 13px; font-weight: 600; color: var(--berry); margin-top: 4px; }
  .kc-gram-note { font-size: 12px; color: var(--soft); line-height: 1.5; margin: 6px 0 10px; }
  .kc-gram-ex { display: grid; gap: 6px; }
  .kc-ex { display: flex; align-items: center; gap: 8px; background: var(--blush); border-radius: 9px; padding: 7px 10px; flex-wrap: wrap; }
  .kc-ex .ko { font-size: 14px; font-weight: 600; color: var(--berry); }
  .kc-ex-ru { font-size: 11.5px; color: var(--soft); width: 100%; padding-left: 30px; }
  .kc-ex-spk { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--card); color: var(--coral); cursor: pointer; font-size: 11px; }
  .kc-playall { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--coral); font-family: inherit; font-weight: 700; font-size: 11px; cursor: pointer; }
  .kc-playall.playing { background: var(--blush); border-color: var(--coral); }
  .kc-dialog { display: grid; gap: 10px; }
  .kc-dlg-row { display: flex; align-items: flex-start; gap: 8px; }
  .kc-dlg-b { flex-direction: row-reverse; }
  .kc-dlg-spk { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--coral); cursor: pointer; font-size: 11px; }
  .kc-dlg-bubble { max-width: 80%; padding: 9px 12px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); }
  .kc-dlg-b .kc-dlg-bubble { background: var(--blush); }
  .kc-dlg-bubble .ko { font-size: 14.5px; font-weight: 600; color: var(--berry); line-height: 1.5; }
  .kc-dlg-ru { font-size: 11.5px; color: var(--soft); margin-top: 3px; }
  .kc-quiz { display: grid; gap: 12px; }
  .kc-q { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 13px; }
  .kc-q-text { font-size: 16px; font-weight: 700; color: var(--berry); line-height: 1.5; }
  .kc-q-ru { font-size: 12px; color: var(--soft); margin: 3px 0 10px; }
  .kc-opts { display: grid; gap: 8px; }
  .kc-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--paper); color: var(--berry); font-family: inherit; font-size: 15px; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .kc-opt:not(:disabled):hover { border-color: var(--rose); background: var(--blush); }
  .kc-opt-n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--blush); color: var(--coral); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
  .kc-opt.correct { border-color: #2E9E5B; background: rgba(46,158,91,.12); color: #1F7A43; }
  .kc-opt.correct .kc-opt-n { background: #2E9E5B; color: #fff; }
  .kc-opt.wrong { border-color: #D9534F; background: rgba(217,83,79,.10); color: #B23B37; }
  .kc-opt.wrong .kc-opt-n { background: #D9534F; color: #fff; }
  .kc-opt:disabled { cursor: default; }
  .kc-explain { display: none; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--blush); font-size: 12.5px; color: var(--berry); line-height: 1.5; }
  .kc-explain.show { display: block; animation: tdFade var(--t-base) var(--ease-out); }
  .kc-game-hint, .kc-hw-sub { font-size: 12px; color: var(--soft); margin-bottom: 10px; }
  .kc-game { display: flex; gap: 12px; }
  .kc-game-col { flex: 1; display: grid; gap: 8px; }
  .kc-chip { padding: 11px 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); color: var(--berry); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--t-base) var(--ease-out); }
  .kc-chip:hover { border-color: var(--rose); }
  .kc-chip.sel { border-color: var(--coral); background: var(--blush); color: var(--coral); }
  .kc-chip-done { border-color: #2E9E5B !important; background: rgba(46,158,91,.14) !important; color: #1F7A43 !important; cursor: default; }
  .kc-chip-bad { border-color: #D9534F !important; background: rgba(217,83,79,.12) !important; animation: kcShake .4s; }
  @keyframes kcShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
  .kc-game-status { text-align: center; font-size: 13px; font-weight: 700; color: var(--coral); margin-top: 12px; }
  .kc-hw-banner { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--card); color: var(--soft); font-weight: 700; font-size: 13px; }
  .kc-hw-banner.on { border-style: solid; border-color: #2E9E5B; background: rgba(46,158,91,.12); color: #1F7A43; }
  .kc-next-hint { font-size: 12px; color: var(--soft); text-align: center; padding: 6px 0 2px; }

  /* ════ Советы по учёбе в Корее (면접) ════ */
  .sk-soon { opacity: .72; cursor: default; }
  .sk-soon-badge { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--soft); background: var(--blush); border-radius: 999px; padding: 3px 10px; }
  .sk-list { display: grid; gap: 10px; }
  .sk-item { border: 1px solid var(--line); border-radius: 13px; background: var(--card); overflow: hidden; }
  .sk-item.open { border-color: var(--coral); }
  .sk-q { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; padding: 13px 14px; background: none; border: none; font-family: inherit; cursor: pointer; }
  .sk-q-n { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--blush); color: var(--coral); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
  .sk-q-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .sk-q-ko { font-size: 15px; font-weight: 700; color: var(--berry); line-height: 1.45; }
  .sk-q-ru { font-size: 12px; color: var(--soft); line-height: 1.4; }
  .sk-q-chev { flex-shrink: 0; color: var(--soft); font-size: 12px; margin-top: 4px; transition: transform var(--t-base) var(--ease-out); }
  .sk-item.open .sk-q-chev { transform: rotate(180deg); }
  .sk-a { padding: 0 14px 14px 49px; }
  .sk-a-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; font-weight: 700; color: var(--coral); margin-bottom: 7px; }
  .sk-a-spk { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--coral); font-family: inherit; font-weight: 700; font-size: 11px; cursor: pointer; }
  .sk-a-spk.playing { background: var(--blush); border-color: var(--coral); }
  .sk-a-ko { font-size: 14.5px; color: var(--berry); line-height: 1.65; background: var(--blush); border-radius: 10px; padding: 10px 12px; }
  .sk-a-ru { font-size: 12.5px; color: var(--soft); line-height: 1.55; margin-top: 7px; }
  .sk-tips { margin-top: 18px; background: var(--blush); border-radius: 13px; padding: 14px 15px; }
  .sk-tips-h { font-weight: 700; font-size: 13.5px; color: var(--berry); margin-bottom: 8px; }
  .sk-tips-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 12.5px; color: var(--berry); line-height: 1.5; }
  body.theme-dark .sk-item { background: #15171C !important; border-color: #2B2F39 !important; }
  body.theme-dark .sk-q-ko, body.theme-dark .sk-a-ko { color: #F0E6EA !important; }
  body.theme-dark .sk-a-ko, body.theme-dark .sk-tips { background: #23262E !important; }
  body.theme-dark .sk-tips-h, body.theme-dark .sk-tips-list { color: #F0E6EA !important; }
  body.theme-dark .sk-a-spk { background: #15171C !important; border-color: #2B2F39 !important; }

  /* Грамматика: на широком экране в 2 колонки — плотнее, без пустоты */
  .topik-gram { display: grid; gap: 8px; grid-template-columns: 1fr; }
  @media (min-width: 720px) { .topik-gram { grid-template-columns: 1fr 1fr; } }
  .topik-gram-row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; }
  .topik-gram-k { font-weight: 700; font-size: 15px; color: var(--berry); }
  .topik-gram-m { font-size: 12.5px; color: var(--coral); font-weight: 600; }
  .topik-gram-e { font-size: 12.5px; color: var(--soft); }

  /* Экзамены list */
  .topik-exams-list { display: grid; gap: 10px; }
  .topik-exam-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
  .topik-exam-no { font-size: 14px; color: var(--berry); flex-shrink: 0; min-width: 58px; }
  .topik-exam-no b { font-size: 18px; }
  .topik-exam-parts { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .topik-part-btn {
    position: relative; box-sizing: border-box; min-height: 44px;
    border: 1px solid var(--line); background: var(--card); cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .01em;
    padding: 7px 13px 7px 11px; border-radius: 13px; color: var(--soft);
    display: inline-flex; align-items: center; gap: 7px; line-height: 1.1;
    box-shadow: var(--shadow-xs);
    transition: transform .22s ease-out, box-shadow .22s ease-out, background .22s ease-out, border-color .22s ease-out;
  }
  .topik-part-btn::before { font-size: 16px; line-height: 1; }
  .topik-part-btn .ko { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
  .topik-part-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 20px -10px rgba(var(--accent-rgb),.5); }
  .topik-part-btn:active { transform: translateY(0) scale(.97); }
  @media (hover: none) { .topik-part-btn:hover { transform: none; } }

  /* 읽기 — коралл/ягода (адаптируется через токены: dark→синий, ч/б→серый) */
  .topik-part-read { color: var(--coral); border-color: rgba(var(--accent-rgb),.38);
    background: linear-gradient(135deg, rgba(var(--accent-rgb),.11), rgba(var(--rose-rgb),.07)); }
  .topik-part-read .ko { color: var(--coral); }
  .topik-part-read::before { content: '📖'; }
  .topik-part-read:hover { border-color: rgba(var(--accent-rgb),.55);
    background: linear-gradient(135deg, rgba(var(--accent-rgb),.19), rgba(var(--rose-rgb),.11)); }

  /* 듣기 — шалфейно-зелёный */
  .topik-part-listen { color: #4D7A48; border-color: rgba(122,158,118,.45);
    background: linear-gradient(135deg, rgba(122,158,118,.15), rgba(122,158,118,.05)); }
  .topik-part-listen .ko { color: #4D7A48; }
  .topik-part-listen::before { content: '🎧'; }
  .topik-part-listen:hover { border-color: rgba(122,158,118,.6); box-shadow: 0 9px 20px -10px rgba(122,158,118,.55);
    background: linear-gradient(135deg, rgba(122,158,118,.24), rgba(122,158,118,.10)); }

  /* 쓰기 — золотой */
  .topik-part-write { color: #95731F; border-color: rgba(201,165,92,.5);
    background: linear-gradient(135deg, rgba(201,165,92,.17), rgba(201,165,92,.05)); }
  .topik-part-write .ko { color: #95731F; }
  .topik-part-write::before { content: '✍️'; }
  .topik-part-write:hover { border-color: rgba(201,165,92,.68); box-shadow: 0 9px 20px -10px rgba(201,165,92,.55);
    background: linear-gradient(135deg, rgba(201,165,92,.27), rgba(201,165,92,.11)); }

  /* «скоро» — недоступная часть */
  .topik-part-soon, .topik-part-soon:hover {
    background: var(--paper) !important; border: 1px dashed var(--line) !important;
    color: var(--hush) !important; opacity: .7; cursor: default;
    transform: none !important; box-shadow: none !important; filter: grayscale(.5);
  }
  .topik-part-soon .ko { color: var(--hush) !important; }

  /* ── TOPIK Mock exam runner ── */
  .exam-overlay {
    position: fixed; inset: 0; z-index: 320; background: var(--cream, #fff8fb);
    display: flex; flex-direction: column; overflow-y: auto;
    animation: gamePageIn .28s var(--ease-out);
  }
  .exam-stick { position: sticky; top: 0; z-index: 3; background: var(--cream, #fff8fb); }
  .exam-top {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .exam-audio { padding: 10px 14px 12px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); }
  .aplayer { display: flex; flex-direction: column; gap: 9px; }
  .aplayer-ctrls { display: flex; align-items: center; justify-content: center; gap: 20px; }
  .aplayer-play {
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
    background: linear-gradient(135deg, var(--berry), var(--coral)); color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 14px -5px rgba(92,42,51,.55); transition: transform .12s;
  }
  .aplayer-play:active { transform: scale(.93); }
  .aplayer-skip {
    display: inline-flex; align-items: center; gap: 3px; height: 32px; padding: 0 11px; flex-shrink: 0;
    border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--berry);
    cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit;
  }
  .aplayer-skip span { font-size: 11px; }
  .aplayer-skip:active { transform: scale(.95); }
  .aplayer-time { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--soft); font-variant-numeric: tabular-nums; }
  .aplayer-bar {
    width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, var(--rose) 0%, var(--line) 0%); background: var(--line); cursor: pointer; outline: none;
  }
  .aplayer-bar::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%;
    background: var(--coral); cursor: pointer; box-shadow: 0 1px 5px rgba(92,42,51,.35); border: 2px solid #fff;
  }
  .aplayer-bar::-moz-range-thumb {
    width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; background: var(--coral); cursor: pointer;
  }
  .exam-qimg { display: block; width: 100%; max-width: 560px; margin: 2px auto 14px; border: 1px solid var(--line); border-radius: 12px; }
  .exam-opts-pic { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .exam-opt.pic { justify-content: center; padding: 12px 0; }
  .exam-opt.pic .exam-opt-num { font-size: 20px; }
  .exam-close { background: none; border: none; cursor: pointer; font-size: 19px; color: var(--berry); padding: 2px 6px; flex-shrink: 0; }
  .exam-title { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--berry); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .exam-timer { font-weight: 700; font-size: 14px; color: var(--gold-ink); background: rgba(201,165,92,.16); padding: 4px 10px; border-radius: 999px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
  .exam-timer.low { color: var(--bad-ink); background: rgba(179,58,74,.12); animation: countPop 1s ease-in-out infinite; }
  /* Маленькая кнопка «Завершить» в шапке, рядом с таймером/баллом */
  .exam-finish-top {
    flex-shrink: 0; cursor: pointer;
    border: 1.5px solid var(--coral); background: var(--card); color: var(--coral);
    font-family: inherit; font-weight: 700; font-size: 12px;
    padding: 6px 12px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  }
  .exam-finish-top:hover { background: var(--coral); color: #fff; }
  .exam-finish-top:active { transform: scale(.94); }
  .exam-finish-top i { font-size: 11px; }

  /* Календарь-popup: на мобайле широкий, на ПК — крупнее (а не маленький по центру) */
  .cal-sheet { width: 100%; max-width: 440px; max-height: 86vh; }
  @media (min-width: 768px) { .cal-sheet { max-width: 560px; max-height: 88vh; } }
  @media (min-width: 1024px) { .cal-sheet { max-width: 620px; } }

  /* Десктоп: единый минималистичный скроллбар во ВСЕХ контейнерах (модалки,
     экзамен, чаты, тарифы) — тонкий, скруглённый, внутри рамки. На мобайле
     скроллбары скрыты правилом выше. */
  @media (min-width: 1024px) {
    * { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.28) transparent; }
    ::-webkit-scrollbar { width: 9px; height: 9px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: rgba(var(--accent-rgb),.26);
      border-radius: 999px;
      border: 2.5px solid transparent;
      background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),.45); background-clip: padding-box; }
  }
  @media (max-width: 420px) { .exam-finish-top span, .exam-finish-top { font-size: 11px; padding: 6px 9px; } }
  .exam-progress { text-align: center; font-size: 11px; color: var(--soft); padding: 8px 0 2px; }

  .exam-body { padding: 18px 20px 10px; max-width: 620px; width: 100%; margin: 0 auto; }
  /* Планшет: даём воздуха — шире колонка и крупнее отступы */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .exam-body { max-width: 760px; padding: 26px 32px 12px; }
    .exam-foot, .exam-pal-wrap { max-width: 760px; padding-left: 32px; padding-right: 32px; }
  }
  .exam-qno { font-weight: 800; font-size: 16px; color: var(--berry); display: flex; align-items: center; gap: 8px; }
  .exam-pts { font-size: 10.5px; font-weight: 700; color: var(--coral); background: var(--blush); border-radius: 999px; padding: 3px 10px; margin-left: auto; }
  .exam-q-orig { font-size: 11px; font-weight: 600; color: var(--soft); }
  .exam-instr { font-size: 14px; font-weight: 600; color: var(--berry); margin: 9px 0 15px; padding-left: 11px; border-left: 3px solid var(--rose); line-height: 1.45; }
  .exam-listen-btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--grad-coral); border: none; border-radius: 999px; padding: 10px 18px; margin: 0 0 14px; cursor: pointer; box-shadow: 0 8px 18px -10px rgba(var(--accent-rgb),.7); transition: transform .15s ease, box-shadow .2s ease; }
  .exam-listen-btn:hover { box-shadow: 0 10px 22px -10px rgba(var(--accent-rgb),.85); }
  .exam-listen-btn:active { transform: scale(.97); }
  .exam-listen-btn.playing { background: var(--bad-line); box-shadow: 0 8px 18px -10px rgba(216,82,95,.7); }
  .exam-passage {
    background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 17px 19px;
    font-size: 17.5px; line-height: 1.95; color: var(--berry); margin-bottom: 18px;
    box-shadow: 0 8px 22px -14px rgba(92,42,51,.35);
  }
  .exam-opts { display: grid; gap: 10px; }
  .exam-opt {
    display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer;
    padding: 15px 16px; border: 1.5px solid var(--line); background: var(--card); border-radius: 15px;
    font-family: inherit; transition: border-color .14s, background .14s, transform .1s, box-shadow .14s;
  }
  .exam-opt:hover { border-color: var(--rose); box-shadow: 0 6px 16px -12px rgba(92,42,51,.3); }
  .exam-opt:active { transform: scale(.99); }
  .exam-opt.sel { border-color: #6f78c9; background: rgba(111,120,201,.12); box-shadow: 0 6px 16px -12px rgba(111,120,201,.5); }
  .exam-opt-num { font-size: 19px; color: var(--soft); flex-shrink: 0; }
  .exam-opt.sel .exam-opt-num { color: #565fb0; }
  .exam-opt.sel .exam-opt-tx { color: #3f4690; font-weight: 600; }
  .exam-opt-tx { font-size: 16px; line-height: 1.5; color: var(--berry); }

  /* Desktop exam: passage/image left, options right (only when there is media) */
  @media (min-width: 1024px) {
    .exam-body { max-width: 820px; padding: 30px 28px 14px; }
    .exam-foot, .exam-pal-wrap { max-width: 820px; }
    .exam-qno { font-size: 18px; }
    .exam-instr { font-size: 15px; }
    .exam-opt-tx { font-size: 17px; }
    .exam-body:has(.exam-passage), .exam-body:has(.exam-qimg) {
      max-width: 1060px;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      grid-template-areas:
        "qno qno"
        "instr instr"
        "media opts";
      column-gap: 36px;
      align-content: start;
    }
    .exam-body:has(.exam-passage) .exam-qno, .exam-body:has(.exam-qimg) .exam-qno { grid-area: qno; }
    .exam-body:has(.exam-passage) .exam-instr, .exam-body:has(.exam-qimg) .exam-instr { grid-area: instr; }
    .exam-body .exam-passage, .exam-body .exam-qimg { grid-area: media; align-self: start; }
    .exam-body .exam-opts { grid-area: opts; align-self: start; align-content: start; }
  }

  .exam-pal-wrap { max-width: 640px; width: 100%; margin: 0 auto; padding: 0 18px; }
  .exam-pal-wrap summary { cursor: pointer; font-size: 11.5px; color: var(--coral); font-weight: 600; padding: 6px 0; }
  .exam-palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 8px 0 4px; }
  .exam-pal-cell {
    aspect-ratio: 1; border: 1px solid var(--line); background: var(--card); border-radius: 8px; cursor: pointer;
    font-size: 11px; font-weight: 600; color: var(--soft); font-family: inherit;
  }
  .exam-pal-cell.done { background: var(--blush); color: var(--coral); border-color: var(--rose); }
  .exam-pal-cell.cur { outline: 2px solid var(--berry); outline-offset: -1px; color: var(--berry); }

  .exam-foot {
    display: flex; gap: 10px; align-items: center;
    padding: 8px 18px 22px; max-width: 600px; width: 100%; margin: 6px auto 0;
  }
  .exam-navbtn {
    border: 1px solid var(--line); background: var(--card); cursor: pointer; font-family: inherit;
    font-size: 15px; font-weight: 700; color: var(--berry); padding: 14px 16px; border-radius: 13px;
  }
  .exam-navbtn:disabled { opacity: .4; cursor: default; }
  .exam-next, .exam-finish { flex: 1; background: linear-gradient(135deg, var(--berry), var(--coral)); color: #fff; border: none; }
  .exam-finish { background: linear-gradient(135deg, var(--sage), #6f9a6a); }

  /* Results */
  .exam-results { flex: 1; padding: 16px 18px 28px; max-width: 640px; width: 100%; margin: 0 auto; }
  .exam-score-card { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 16px; box-shadow: 0 10px 26px -14px rgba(92,42,51,.4); }
  .exam-score-big { font-size: 46px; font-weight: 800; color: var(--berry); line-height: 1; }
  .exam-score-big span { font-size: 22px; color: var(--soft); font-weight: 700; }
  .exam-score-sub { font-size: 13px; color: var(--soft); margin-top: 6px; }
  .exam-score-note { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--coral); }
  /* Планшет/ПК: результаты крупнее и просторнее (а не «телефон по центру») */
  @media (min-width: 768px) {
    .exam-results { max-width: 860px; padding: 30px 32px 40px; }
    .exam-score-card { padding: 34px 24px; border-radius: 24px; }
    .exam-score-big { font-size: 64px; }
    .exam-score-big span { font-size: 30px; }
    .exam-score-sub { font-size: 15px; margin-top: 9px; }
    .exam-score-note { font-size: 16px; }
    .exam-review-head, .exam-tbl-head { font-size: 17px; }
    .exam-rev { padding: 14px 16px; }
    .exam-rev-q, .exam-rev-mine, .exam-rev-correct, .exam-rev-ex { font-size: 13.5px; }
  }
  @media (min-width: 1024px) {
    .exam-results { max-width: 960px; }
    /* Разбор в 2 колонки — меньше прокрутки, виднее весь результат */
    .exam-review { grid-template-columns: 1fr 1fr; }
  }
  .exam-score-time { margin-top: 6px; font-size: 12px; color: var(--bad-ink); }
  .exam-review-head { font-weight: 800; font-size: 15px; color: var(--berry); margin: 22px 2px 12px; }
  .exam-review { display: grid; gap: 10px; }
  .exam-rev { border: 1px solid var(--line); border-left: 4px solid var(--sage); border-radius: 13px; padding: 11px 13px; background: var(--card); }
  .exam-rev.no { border-left-color: #d98b95; }
  .exam-rev-head { display: flex; align-items: center; gap: 8px; }
  .exam-rev-no { font-weight: 800; font-size: 13px; color: var(--berry); min-width: 22px; }
  .exam-rev-mark { font-weight: 800; }
  .exam-rev.ok .exam-rev-mark { color: var(--gold-ink); }
  .exam-rev.no .exam-rev-mark { color: var(--bad-ink); }
  .exam-rev-q { font-size: 12.5px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  .exam-rev-mine { font-size: 12.5px; color: var(--bad-ink); margin-top: 6px; }
  .exam-rev-correct { font-size: 12.5px; color: var(--berry); margin-top: 4px; }
  .exam-rev-ex { font-size: 12.5px; color: var(--soft); line-height: 1.6; margin-top: 5px; background: rgba(122,158,118,.08); padding: 7px 10px; border-radius: 9px; }

  /* Results: answer overview table (green = correct, red = wrong) */
  .exam-tbl-head { font-weight: 800; font-size: 15px; color: var(--berry); margin: 24px 2px 12px; }
  .exam-ansgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 7px; }
  .exam-ans { border-radius: 11px; padding: 7px 4px 6px; text-align: center; border: 1px solid var(--line); background: var(--card); }
  .exam-ans-n { display: block; font-size: 10px; font-weight: 700; color: var(--soft); }
  .exam-ans-pick { display: block; font-size: 18px; font-weight: 700; margin-top: 1px; color: var(--berry); }
  .exam-ans-right { display: block; font-size: 10px; font-weight: 700; margin-top: 1px; color: var(--ok-ink); }
  .exam-ans.ok { background: rgba(122,158,118,.16); border-color: rgba(122,158,118,.5); }
  .exam-ans.ok .exam-ans-pick, .exam-ans.ok .exam-ans-n { color: var(--ok-ink); }
  .exam-ans.no { background: rgba(201,89,89,.12); border-color: rgba(201,89,89,.45); }
  .exam-ans.no .exam-ans-pick, .exam-ans.no .exam-ans-n { color: #b3434f; }
  .exam-ans.na { opacity: .55; }
  .exam-tbl-legend { display: flex; gap: 16px; justify-content: center; margin-top: 14px; font-size: 11.5px; color: var(--soft); }
  .exam-tbl-legend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }

  /* Mini progress bar on a locked, measurable achievement tile */
  .ach-mini-prog {
    width: 72%; height: 3px; margin-top: 4px;
    background: rgba(92,42,51,.12); border-radius: 999px; overflow: hidden;
  }
  .ach-mini-prog span { display: block; height: 100%; background: var(--coral); border-radius: 999px; }

  /* New-record badge celebration pulse */
  .record-pulse { animation: recordPulse 1s var(--ease-out) 2; transform-origin: center; }
  @keyframes recordPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201,165,92,.45); }
    40%      { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(201,165,92,0); }
  }
  /* Comments are always visible: scrollable list + input below */
  .feed-comments-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: flex; flex-direction: column;
    gap: 12px;
  }
  .feed-comments-list { display: flex; flex-direction: column; gap: 10px; }
  .feed-comment-item { display: flex; gap: 10px; align-items: flex-start; }
  .feed-comment-avatar {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--grad-coral); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
    background-size: cover; background-position: center;
    box-shadow: 0 2px 6px -2px rgba(var(--accent-rgb),.45);
  }
  .feed-comment-bubble {
    flex: 1; min-width: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px 12px;
  }
  .feed-comment-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .feed-comment-name { font-size: 12px; font-weight: 600; color: var(--berry); }
  .feed-comment-time { font-size: 10.5px; color: var(--soft); }
  .feed-comment-text {
    font-size: 13px; color: var(--ink);
    margin-top: 2px; line-height: 1.45;
    word-break: break-word; white-space: pre-wrap;
  }
  .feed-comment-empty {
    text-align: center;
    font-size: 11.5px; color: var(--soft);
    font-style: italic;
    padding: 6px 0 10px;
  }
  .feed-comment-form { display: flex; gap: 8px; align-items: center; }
  .feed-comment-input {
    flex: 1; min-width: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 16px;
    color: var(--berry);
    outline: none;
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
  }
  .feed-comment-input:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12);
  }
  .feed-comment-send {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--grad-coral);
    color: white;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
    box-shadow: 0 4px 12px -4px rgba(var(--accent-rgb),.5);
  }
  .feed-comment-send:hover { box-shadow: 0 6px 16px -4px rgba(var(--accent-rgb),.65); }
  .feed-comment-send:active { transform: scale(.92); }
  .feed-comment-delete {
    background: transparent; border: none;
    color: var(--soft); cursor: pointer;
    font-size: 11px; padding: 2px 4px;
    transition: color var(--t-fast) var(--ease-out);
  }
  .feed-comment-delete:hover { color: var(--coral); }

  /* ── Scrollable list (always visible — shows 2-3 comments, rest by scroll) ── */
  .feed-comments-list {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb),.25) transparent;
  }
  .feed-comments-list::-webkit-scrollbar { width: 5px; }
  .feed-comments-list::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb),.25);
    border-radius: 999px;
  }
  .feed-comments-list::-webkit-scrollbar-track { background: transparent; }

  /* ── Per-comment actions (like + reply) ── */
  .comment-actions {
    display: flex; gap: 14px;
    margin-top: 6px;
  }
  .comment-action {
    position: relative;
    background: transparent; border: none; padding: 0;
    color: var(--soft); cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600;
    transition: color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-spring);
  }
  .comment-action:hover { color: var(--coral); }
  .comment-action:active { transform: scale(.92); }
  .comment-action i { font-size: 12px; }
  .comment-action.liked { color: var(--coral); }
  .comment-action.just-pop i { animation: heartBeat .5s var(--ease-spring); }

  /* ── Replies (Instagram-style: hidden by default, toggle to show) ── */
  .comment-replies-toggle {
    background: transparent; border: none; padding: 0;
    color: var(--soft); cursor: pointer;
    font-size: 11px; font-weight: 600;
    margin-top: 6px;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color var(--t-fast) var(--ease-out);
  }
  .comment-replies-toggle::before {
    content: '';
    width: 22px; height: 1px;
    background: currentColor; opacity: .45;
  }
  .comment-replies-toggle:hover { color: var(--coral); }
  .comment-replies-toggle .chev {
    font-size: 9px;
    transition: transform .2s var(--ease-out);
  }
  .comment-replies-toggle.open .chev { transform: rotate(180deg); }
  .comment-replies {
    display: none;
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid rgba(var(--accent-rgb),.18);
    flex-direction: column; gap: 8px;
    /* Cap to roughly 2 replies; scroll for more (scrollbar hidden visually) */
    max-height: 170px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .comment-replies::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .comment-replies.open {
    display: flex;
    animation: repliesOpen .25s var(--ease-out);
  }
  @keyframes repliesOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Tighter actions row for nested replies */
  .reply-item .comment-actions { gap: 12px; margin-top: 4px; }
  .reply-item .comment-action { font-size: 10.5px; }
  .reply-item .comment-action i { font-size: 11px; }
  .reply-item { display: flex; gap: 8px; align-items: flex-start; }
  .reply-item .feed-comment-avatar { width: 24px; height: 24px; font-size: 10px; }
  .reply-item .feed-comment-bubble { padding: 6px 10px; border-radius: 12px; }
  .reply-item .feed-comment-text { font-size: 12.5px; }

  /* ── Inline reply form ── */
  .reply-form-wrap {
    display: none;
    margin-top: 8px;
    gap: 6px; align-items: center;
  }
  .reply-form-wrap.open { display: flex; animation: replyOpen .2s var(--ease-out); }
  @keyframes replyOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .reply-input {
    flex: 1; min-width: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 16px; color: var(--berry);
    outline: none;
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
  }
  .reply-input:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.12);
  }
  .reply-send {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--grad-coral);
    color: white; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
    transition: transform var(--t-fast) var(--ease-out);
  }
  .reply-send:active { transform: scale(.9); }

  /* ───── UTIL ───── */
  .scroll-x { display: flex; gap: 12px; overflow-x: auto; padding: 4px; scrollbar-width: none; }
  .scroll-x::-webkit-scrollbar { display: none; }


  /* ════════════════════════════════════════════════════════════
     DUOLINGO-STYLE REDESIGN — bold, chunky, 3D press-buttons.
     Keeps the cherry-blossom brand palette but turns up the
     volume: thick borders, flat saturated fills, drop-shadows
     that act as a physical "lip" you push into on press.
     ════════════════════════════════════════════════════════════ */

  :root {
    /* Bolder, more saturated brand for the new look.
       coral #E07686→#BC4B5E (белый текст 4.9:1 вместо 2.96:1),
       rose #F2A6AE→#D2697F (белая галочка done-плитки 3.5:1 вместо 1.8:1) */
    --duo-coral:       #BC4B5E;
    --duo-coral-deep:  #93303E;
    --duo-rose:        #D2697F;
    --duo-rose-deep:   #A84F61;
    --duo-berry:       #5C2A33;
    --duo-berry-deep:  #3A171E;
    --duo-gold:        #E5B43C;
    --duo-gold-deep:   #A37A1A;
    /* Kept for the few "correct answer" hooks that still reference sage,
       but the value is gold so the palette stays cherry-blossom + warm. */
    --duo-sage:        #E5B43C;
    --duo-sage-deep:   #A37A1A;
    /* Brand-override: re-route the legacy --sage everywhere it's used
       (toasts, daily-goal done, feedback messages) from leaf-green to
       brand gold so nothing slips through as off-palette green. */
    --sage:            #E5B43C;
    --duo-cream:       #FFFAF6;
    --duo-paper:       #FFF7F1;
    --duo-blush:       #FBE8EA;
    --duo-ink-line:    #5C2A33;

    /* Press depth = solid colour lip below each control */
    --duo-lip:         4px;
    --duo-lip-lg:      6px;

    /* The classic Duolingo radii */
    --duo-r-sm: 14px;
    --duo-r-md: 18px;
    --duo-r-lg: 22px;
    --duo-r-xl: 28px;
  }

  body {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    color: var(--duo-berry);
  }
  .display { font-weight: 800 !important; letter-spacing: -0.025em !important; }

  /* ── 3D PRESS BUTTONS ────────────────────────────────────── */
  /* NOTE: padding/font-size/letter-spacing/text-transform are NOT
     !important so per-button inline styles (e.g. compact 4-up rating
     row in flashcards, narrow quiz options) can still shrink them. */
  .btn {
    border-radius: var(--duo-r-md) !important;
    font-weight: 800 !important;
    border: none !important;
    padding: 12px 18px;
    font-size: 14px;
    letter-spacing: .005em;
    position: relative;
    /* Includes background + border-color so the quiz feedback
       (green-correct / red-wrong) animates in smoothly. */
    transition: transform .08s ease-out,
                box-shadow .08s ease-out,
                background .2s ease,
                border-color .2s ease,
                color .2s ease,
                filter .15s ease;
    will-change: transform;
  }
  .btn:active { transform: translateY(var(--duo-lip)) !important; }
  /* Единое состояние «нельзя» для всех вариантов .btn: гасит 3D-губу, hover-фильтр и
     продавливание, ставит курсор not-allowed и приглушает (для кнопок без своего opacity). */
  .btn:disabled, .btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
    box-shadow: 0 0 0 var(--duo-blush) !important;
  }

  /* ── Живые кнопки: подъём при наведении + световой блик, как у карточек-входов
     на «Уроках» (.topik-entry). Нажатие сохраняет 3D-продавливание (translateY на
     «губу»). Блик полупрозрачный и проходит поверх подписи — читаемость сохраняется. */
  .btn { overflow: hidden; }
  .btn::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.20) 48%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.20) 52%, transparent 60%);
    transform: translateX(-135%);
    transition: transform .55s var(--ease-out);
  }
  .btn:hover::after, .btn:active::after { transform: translateX(135%); }
  /* Лёгкий подъём при наведении; :active с !important (выше) перекроет его при нажатии */
  .btn:hover { transform: translateY(-2px); }
  /* Блик неуместен на disabled и на состояниях обратной связи квиза (там своя анимация) */
  .btn:disabled::after, .btn[disabled]::after,
  .btn.quiz-correct-pop::after, .btn.quiz-wrong-shake::after { display: none; }
  /* «Меньше движения»: гасим блик и подъём; мгновенное нажатие оставляем */
  body.calm-motion .btn::after { display: none; }
  body.calm-motion .btn:hover { transform: none; }

  /* ── QUIZ FEEDBACK (correct / wrong) ─────────────────────
     We use !important on background + border-color because
     .btn-ghost / .card sets them with !important too. Without
     this, the inline JS-set colours get silently overridden.
     Selectors stacked twice ( .quiz-correct-pop.quiz-correct-pop )
     to outweigh .btn-ghost:hover specificity (0,2,0). */
  .quiz-correct-pop.quiz-correct-pop,
  .quiz-correct-pop.quiz-correct-pop:hover {
    background: rgba(132,196,116,.28) !important;
    border-color: var(--ok-ink) !important;
    color: var(--ok-deep) !important;
    box-shadow: 0 0 0 4px rgba(132,196,116,.25), 0 4px 0 var(--ok-ink) !important;
    animation: quiz-pop .55s cubic-bezier(.34, 1.56, .64, 1);
  }
  @keyframes quiz-pop {
    0%   { transform: scale(1)    rotate(0deg);   }
    25%  { transform: scale(1.12) rotate(-1.5deg);}
    55%  { transform: scale(.95)  rotate(1deg);   }
    80%  { transform: scale(1.04) rotate(0deg);   }
    100% { transform: scale(1)    rotate(0deg);   }
  }
  .quiz-wrong-shake.quiz-wrong-shake,
  .quiz-wrong-shake.quiz-wrong-shake:hover {
    background: var(--bad-bg) !important;
    border-color: var(--bad-line) !important;
    color: var(--bad-ink) !important;
    box-shadow: 0 0 0 4px rgba(216,82,95,.25), 0 4px 0 var(--bad-line) !important;
    animation: quiz-shake .5s cubic-bezier(.36, .07, .19, .97);
  }
  @keyframes quiz-shake {
    10%, 90%      { transform: translateX(-3px); }
    20%, 80%      { transform: translateX(4px);  }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60%      { transform: translateX(7px);  }
  }
  /* Don't let the press-down :active state hide the pop scale. */
  .btn.quiz-correct-pop:active,
  .btn.quiz-wrong-shake:active { transform: none !important; }

  .btn-primary {
    background: var(--duo-berry) !important;
    color: #FFF !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-berry-deep), 0 var(--duo-lip) 0 0 rgba(0,0,0,.05) !important;
  }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-primary:active { box-shadow: 0 0 0 var(--duo-berry-deep) !important; }

  .btn-rose {
    background: var(--duo-coral) !important;
    color: #FFF !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-coral-deep) !important;
  }
  .btn-rose:hover { filter: brightness(1.05); }
  .btn-rose:active { box-shadow: 0 0 0 var(--duo-coral-deep) !important; }

  .btn-ghost {
    background: var(--card) !important;
    color: var(--duo-berry) !important;
    border: 2px solid var(--duo-blush) !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-blush) !important;
  }
  .btn-ghost:hover { border-color: var(--duo-rose) !important; color: var(--duo-coral) !important; }
  .btn-ghost:active { box-shadow: 0 0 0 var(--duo-blush) !important; }

  /* Gold CTA helper (use class="btn btn-gold").
     Текст берри вместо белого: белый на #E5B43C — 1.9:1, берри — 6.0:1. */
  .btn-gold {
    background: var(--duo-gold) !important;
    color: var(--duo-ink-line) !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-gold-deep) !important;
  }
  .btn-gold:active { box-shadow: 0 0 0 var(--duo-gold-deep) !important; transform: translateY(var(--duo-lip)) !important; }

  /* Sage / "correct" green (перекрашен в золото бренда) */
  .btn-sage {
    background: var(--duo-sage) !important;
    color: var(--duo-ink-line) !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-sage-deep) !important;
  }
  .btn-sage:active { box-shadow: 0 0 0 var(--duo-sage-deep) !important; transform: translateY(var(--duo-lip)) !important; }

  /* ── CHUNKY CARDS ────────────────────────────────────────── */
  /* NOTE: background is intentionally NOT !important so cards with
     inline gradient backgrounds (cultural banner, hero callouts) win. */
  .card {
    background: var(--card);
    border: 2px solid var(--duo-blush) !important;
    border-radius: var(--duo-r-lg) !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-blush) !important;
    overflow: visible !important;
  }
  /* Press effect uses only box-shadow (no transform transition) so
     elements that re-render after a tap don't flicker. Background
     and border-color animate smoothly for quiz feedback flashes. */
  .card-press {
    transition: box-shadow .12s ease-out,
                border-color .25s ease,
                background .25s ease !important;
  }
  .card-press:hover {
    border-color: var(--duo-rose) !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-rose) !important;
  }
  .card-press:active {
    box-shadow: 0 1px 0 var(--duo-rose) !important;
  }

  /* Bigger / outlined variant */
  .card-padded { padding: 18px !important; }

  /* ── HERO / TODAY'S LESSON ──────────────────────────────── */
  .hero {
    border: 3px solid var(--duo-coral) !important;
    border-radius: var(--duo-r-xl) !important;
    background: linear-gradient(170deg, #FFF4EE 0%, #FBE8EA 55%, #F2A6AE 130%) !important;
    box-shadow: 0 var(--duo-lip-lg) 0 var(--duo-coral-deep) !important;
    transition: transform .12s ease-out, box-shadow .12s ease-out !important;
  }
  .hero:hover { transform: translateY(0) !important; }
  .hero:active {
    transform: translateY(var(--duo-lip-lg)) !important;
    box-shadow: 0 0 0 var(--duo-coral-deep) !important;
  }

  /* ── BOLD CHIPS ─────────────────────────────────────────── */
  .chip {
    font-weight: 800 !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    border: 2px solid transparent;
  }
  .chip-coral { background: var(--duo-coral) !important; color: #FFF !important; border-color: var(--duo-coral-deep) !important; }
  .chip-berry { background: var(--duo-berry) !important; color: #FFF !important; border-color: var(--duo-berry-deep) !important; }
  .chip-gold  { background: var(--duo-gold) !important; color: var(--duo-ink-line) !important; border-color: var(--duo-gold-deep) !important; }
  .chip-blush { background: var(--duo-blush) !important; color: var(--duo-berry) !important; border-color: var(--duo-rose) !important; }
  /* "Sage" was a leaf-green semantic — re-skinned as warm gold to
     stay on brand. Used as the "progress / complete" chip. */
  .chip-sage  { background: var(--duo-gold) !important; color: var(--duo-ink-line) !important; border-color: var(--duo-gold-deep) !important; }

  /* ── STAT PILLS (streak / XP) ───────────────────────────── */
  .stat-pill {
    border: 2px solid var(--duo-blush) !important;
    background: var(--card) !important;
    box-shadow: 0 3px 0 var(--duo-blush) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    padding: 6px 14px !important;
    transition: transform .12s ease-out, box-shadow .12s ease-out !important;
  }
  .stat-pill:hover { transform: translateY(0) !important; }
  .stat-pill:active { transform: translateY(3px) !important; box-shadow: 0 0 0 var(--duo-blush) !important; }

  /* ── PROGRESS BAR — chunky ──────────────────────────────── */
  .progress {
    height: 14px !important;
    background: var(--card) !important;
    border: 2px solid var(--duo-blush) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 2px 0 rgba(92,42,51,.04) !important;
    padding: 1px;
  }
  .progress > i {
    background: linear-gradient(180deg, var(--duo-coral) 0%, var(--duo-coral-deep) 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.45),
      inset 0 -2px 0 rgba(0,0,0,.08) !important;
    border-radius: 999px !important;
  }

  /* ── BOTTOM NAV — bold pills ────────────────────────────── */
  .bottomnav {
    border-top: 2px solid var(--duo-blush) !important;
    background: var(--card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 8px 6px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .nav-item { font-weight: 700 !important; }
  .nav-item i {
    width: 44px !important;
    height: 34px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    border: 2px solid transparent;
    transition: background .15s ease-out, color .15s ease-out, border-color .15s ease-out, transform .15s ease-out !important;
  }
  .nav-item.active i {
    background: var(--duo-blush) !important;
    border-color: var(--duo-rose) !important;
    color: var(--duo-coral) !important;
    box-shadow: 0 3px 0 var(--duo-rose) !important;
    transform: translateY(-2px) !important;
  }
  .nav-item.active { color: var(--duo-coral) !important; font-weight: 800 !important; }

  /* ── TOPBAR — flatter, bolder ───────────────────────────── */
  .topbar {
    background: var(--card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 2px solid var(--duo-blush) !important;
  }
  .topbar-title { font-weight: 800 !important; font-size: 16px !important; }
  .topbar-mark {
    border-radius: 13px !important;
    box-shadow: 0 0 0 1px var(--line), 0 3px 10px -4px rgba(var(--accent-rgb),.35) !important;
  }

  /* ── PAGE TITLES ────────────────────────────────────────── */
  .page-eyebrow {
    font-weight: 800 !important;
    color: var(--duo-coral) !important;
    font-size: 11px !important;
  }
  .page-title, .display { color: var(--duo-berry); }

  /* ── INPUT / FORM ───────────────────────────────────────── */
  .input {
    background: var(--card) !important;
    border: 2px solid var(--duo-blush) !important;
    border-radius: var(--duo-r-md) !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 0 var(--duo-blush) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
  }
  .input:focus {
    border-color: var(--duo-coral) !important;
    box-shadow: 0 3px 0 var(--duo-coral) !important;
    outline: none !important;
  }

  /* ── AUTH TABS — chunky pill switcher ───────────────────── */
  .auth-tabs {
    background: var(--duo-blush) !important;
    border: 2px solid var(--duo-rose) !important;
    box-shadow: inset 0 2px 0 rgba(92,42,51,.06) !important;
    border-radius: 16px !important;
  }
  .auth-tab { font-weight: 800 !important; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px !important; }
  .auth-tab-active {
    background: var(--duo-coral) !important;
    color: #FFF !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 0 var(--duo-coral-deep) !important;
  }

  /* ── LESSON PATH TILES — chunky like Duolingo's circles,
     but in the brand palette: coral (current), gold (done), plum
     (also done variant), blush (locked). NO greens here. ───── */
  .lesson-tile {
    border-radius: 24px !important;
    border: 3px solid var(--duo-blush) !important;
    background: var(--card) !important;
    box-shadow: 0 var(--duo-lip-lg) 0 var(--duo-blush) !important;
    /* transform в списке: hover-подъём из базового слоя анимируется плавно */
    transition: transform .2s var(--ease-out), box-shadow .12s ease-out, border-color .12s ease-out !important;
  }
  .lesson-tile:active {
    box-shadow: 0 1px 0 var(--duo-blush) !important;
  }
  .lesson-tile .tile-main { font-weight: 900 !important; }

  /* DONE — dusty rose "completed" tile, the original brand pink */
  .lesson-tile.done {
    background: var(--duo-rose) !important;
    border-color: var(--duo-rose-deep) !important;
    box-shadow: 0 var(--duo-lip-lg) 0 var(--duo-rose-deep) !important;
    color: #FFF !important;
  }
  .lesson-tile.done:active { box-shadow: 0 1px 0 var(--duo-rose-deep) !important; }
  .lesson-tile.done .tile-eyebrow,
  .lesson-tile.done .tile-main { color: #FFFFFF !important; }

  /* CURRENT — bright coral with a rose halo, gentle bob */
  .lesson-tile.current {
    background: var(--duo-coral) !important;
    border-color: var(--duo-coral-deep) !important;
    box-shadow:
      0 0 0 6px rgba(229,180,60,.28),
      0 var(--duo-lip-lg) 0 var(--duo-coral-deep) !important;
    animation: duo-current-bob 2.4s ease-in-out infinite;
  }
  .lesson-tile.current:active {
    animation: none;
    box-shadow:
      0 0 0 6px rgba(229,180,60,.28),
      0 1px 0 var(--duo-coral-deep) !important;
  }
  @keyframes duo-current-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }

  .lesson-tile.locked {
    background: #F4EAE4 !important;
    border-color: #E5D2CB !important;
    box-shadow: 0 var(--duo-lip) 0 #E5D2CB !important;
    /* .40 → .60: иконка замка была 2.1:1, теперь 3.4:1 (WCAG для графики) */
    color: rgba(92,42,51,.60) !important;
  }

  /* ── HANGUL KEY TILES — chunky keys ─────────────────────── */
  .hangul-key {
    border-radius: var(--duo-r-md) !important;
    border: 2px solid var(--duo-blush) !important;
    background: var(--card) !important;
    box-shadow: 0 3px 0 var(--duo-blush) !important;
    font-weight: 800 !important;
    transition: transform .1s ease-out, box-shadow .1s ease-out !important;
  }
  .hangul-key:active {
    transform: translateY(3px) !important;
    box-shadow: 0 0 0 var(--duo-blush) !important;
  }
  .hangul-key.cons-active {
    background: var(--duo-coral) !important;
    border-color: var(--duo-coral-deep) !important;
    color: #FFF !important;
    box-shadow: 0 3px 0 var(--duo-coral-deep) !important;
  }
  .hangul-key.vow-active {
    background: var(--duo-rose) !important;
    border-color: var(--duo-rose-deep) !important;
    color: #FFF !important;
    box-shadow: 0 3px 0 var(--duo-rose-deep) !important;
  }

  /* ── MIC BUTTON ─────────────────────────────────────────── */
  .btn-mic {
    border: 2px solid var(--duo-rose) !important;
    background: var(--card) !important;
    box-shadow: 0 3px 0 var(--duo-rose) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: transform .1s ease-out, box-shadow .1s ease-out, background .15s, color .15s !important;
  }
  .btn-mic:active { transform: translateY(3px) !important; box-shadow: 0 0 0 var(--duo-rose) !important; }
  .btn-mic.mic-listening {
    background: var(--duo-coral) !important;
    border-color: var(--duo-coral-deep) !important;
    color: #FFF !important;
    box-shadow: 0 3px 0 var(--duo-coral-deep) !important;
  }
  .btn-mic.mic-ok {
    background: var(--duo-sage) !important;
    border-color: var(--duo-sage-deep) !important;
    color: #FFF !important;
    box-shadow: 0 3px 0 var(--duo-sage-deep) !important;
  }
  .btn-mic.mic-near {
    background: var(--duo-gold) !important;
    border-color: var(--duo-gold-deep) !important;
    color: #FFF !important;
    box-shadow: 0 3px 0 var(--duo-gold-deep) !important;
  }
  .btn-mic.mic-bad {
    background: var(--duo-coral) !important;
    border-color: var(--duo-coral-deep) !important;
    color: #FFF !important;
    box-shadow: 0 3px 0 var(--duo-coral-deep) !important;
  }

  /* ── FEED CARDS — thick outline ─────────────────────────── */
  .feed-card {
    border: 2px solid var(--duo-blush) !important;
    border-radius: var(--duo-r-lg) !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-blush) !important;
  }
  .feed-card-rose {
    background: linear-gradient(160deg, var(--cream), var(--blush)) !important;
    border-color: var(--duo-rose) !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-rose) !important;
  }
  .feed-card-dark {
    background: linear-gradient(150deg, var(--duo-berry), #8E3F4D 60%, var(--duo-coral) 130%) !important;
    border-color: var(--duo-berry-deep) !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-berry-deep) !important;
    color: #FFF !important;
  }
  .feed-card-night {
    border-color: #1A0E10 !important;
    box-shadow: 0 var(--duo-lip) 0 #1A0E10 !important;
  }

  /* ── FEED: композер «поделись фото» + посты учеников ────── */
  .feed-composer {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 18px; cursor: pointer;
    border: 2px solid var(--duo-blush); background: var(--card);
    box-shadow: 0 3px 0 var(--duo-blush); font-family: inherit; text-align: left;
    transition: transform .12s ease-out, box-shadow .12s ease-out;
  }
  .feed-composer:active { transform: translateY(3px); box-shadow: 0 0 0 var(--duo-blush); }
  .feed-composer-av {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--duo-rose);
  }
  .feed-composer-av-initial {
    display: flex; align-items: center; justify-content: center;
    background: var(--grad-coral); color: #fff; font-weight: 800; font-size: 15px;
  }
  .feed-composer-text { flex: 1; min-width: 0; color: var(--soft); font-size: 13.5px; font-weight: 600; }
  .feed-composer-cam {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--grad-coral); color: #fff; font-size: 14px;
  }
  .feed-composer-guest .feed-composer-av-initial { background: var(--soft); }

  .composer-drop {
    border: 2px dashed var(--line-strong); border-radius: 16px;
    padding: 28px 16px; text-align: center; cursor: pointer; background: var(--paper);
    transition: border-color .2s ease;
  }
  .composer-drop:hover { border-color: var(--coral); }
  .composer-drop.has-photo { padding: 0; border-style: solid; overflow: hidden; background: #000; }
  .composer-drop.has-photo img { width: 100%; max-height: 320px; object-fit: contain; display: block; }

  .feed-card-student { background: var(--card) !important; }
  .feed-student-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .feed-student-av {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--duo-rose);
  }
  .feed-student-av-initial {
    display: flex; align-items: center; justify-content: center;
    background: var(--grad-coral); color: #fff; font-weight: 800; font-size: 16px;
  }
  .feed-student-name { font-weight: 700; font-size: 14px; color: var(--berry); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .feed-student-you { font-size: 10px; color: var(--coral); font-weight: 700; }
  .feed-student-time { font-size: 11px; color: var(--soft); margin-top: 1px; }
  .feed-student-act {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; border: none; cursor: pointer;
    background: var(--paper); color: var(--soft); font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
  }
  .feed-student-act:hover { background: rgba(var(--rose-rgb),.16); color: var(--coral); }
  .feed-student-caption {
    font-size: 13px; color: var(--text2); line-height: 1.5; margin-top: 10px;
    white-space: pre-wrap; word-break: break-word;
  }
  body.theme-dark .feed-composer,
  body.theme-dark .feed-card-student { background: #2A2A2E !important; }
  body.theme-dark .feed-student-act { background: rgba(255,255,255,.08); }
  body.theme-dark .composer-drop { background: #1E1E22; }

  /* ── МОДУЛЬ 2: переключатель модулей ───────────────────── */
  /* Вариант А: вкладки модулей в один ряд с горизонтальной прокруткой (4+ модулей) */
  .module-switch {
    display: flex; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; padding-bottom: 2px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .module-switch::-webkit-scrollbar { display: none; }
  .module-tab {
    flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 6px;
    padding: 9px 11px; border-radius: 14px; cursor: pointer; font-family: inherit;
    border: 2px solid var(--duo-blush); background: var(--card); text-align: left;
    box-shadow: 0 2px 0 var(--duo-blush);
    transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .15s;
  }
  .module-tab:active { transform: translateY(2px); box-shadow: 0 0 0 var(--duo-blush); }
  .module-tab.active { border-color: var(--coral); background: linear-gradient(135deg, rgba(var(--rose-rgb),.16), var(--card)); box-shadow: 0 2px 0 var(--coral); }
  .module-tab-num {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 12px; background: var(--paper); color: var(--soft);
  }
  .module-tab.active .module-tab-num { background: var(--grad-coral); color: #fff; }
  .module-tab-name { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--berry); white-space: nowrap; }
  .module-tab.locked { opacity: .6; }
  .module-tab-lock { font-size: 11px; color: var(--soft); flex-shrink: 0; }

  /* ── МОДУЛЬ 2: диалог ──────────────────────────────────── */
  .dlg-list { display: flex; flex-direction: column; gap: 10px; }
  .dlg-row { display: flex; align-items: flex-end; gap: 8px; }
  .dlg-row.b { flex-direction: row-reverse; }
  .dlg-ava {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    background: var(--paper); border: 1px solid var(--line);
  }
  .dlg-bubble {
    max-width: 78%; padding: 10px 13px; border-radius: 16px; cursor: pointer;
    background: var(--card); border: 1.5px solid var(--line-strong);
    transition: transform .15s ease, box-shadow .2s ease;
  }
  .dlg-row.a .dlg-bubble { border-bottom-left-radius: 5px; }
  .dlg-row.b .dlg-bubble { border-bottom-right-radius: 5px; background: linear-gradient(135deg, var(--berry), var(--coral)); border-color: transparent; }
  .dlg-row.b .dlg-ko { color: #fff; }
  .dlg-row.b .dlg-ru { color: rgba(255,255,255,.85); }
  .dlg-ko { font-size: 15px; font-weight: 600; color: var(--berry); line-height: 1.35; }
  .dlg-ru { font-size: 13px; color: var(--soft); margin-top: 3px; line-height: 1.45; }
  .dlg-row.speaking .dlg-bubble { box-shadow: 0 0 0 3px rgba(var(--rose-rgb),.45); transform: scale(1.02); }

  /* ── МОДУЛЬ 2: конструктор предложения ─────────────────── */
  .build-answer {
    min-height: 52px; margin-top: 14px; padding: 10px; border-radius: 14px;
    border: 2px dashed var(--line-strong); background: var(--paper);
    display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  }
  .build-answer.build-shake { animation: buildShake .45s; }
  @keyframes buildShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
  .build-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .build-chip {
    padding: 9px 14px; border-radius: 12px; cursor: pointer; font-family: inherit;
    font-size: 15px; font-weight: 600; color: var(--berry);
    background: var(--card); border: 2px solid var(--duo-blush); box-shadow: 0 2px 0 var(--duo-blush);
    transition: transform .1s ease-out;
  }
  .build-chip:active { transform: translateY(2px); }
  .build-chip.in-answer { background: rgba(var(--rose-rgb),.12); border-color: var(--coral); box-shadow: 0 2px 0 var(--coral); }
  .build-chip.correct { background: rgba(132,196,116,.22); border-color: var(--ok-ink); box-shadow: 0 2px 0 var(--ok-ink); color: var(--ok-ink); }

  /* ── МОДУЛЬ 2: аудирование + варианты ──────────────────── */
  .listen-play {
    width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--grad-coral); color: #fff; font-size: 26px;
    box-shadow: 0 10px 24px -8px rgba(var(--accent-rgb),.6);
    transition: transform .12s ease-out;
  }
  .listen-play:active { transform: scale(.94); }
  .lesson-opt.opt-correct { background: rgba(132,196,116,.22) !important; border-color: var(--ok-ink) !important; color: var(--ok-ink) !important; }
  .lesson-opt.opt-wrong { background: var(--bad-bg) !important; border-color: var(--bad-line) !important; color: var(--bad-ink) !important; }

  /* ── Кнопка «в словарик» (быстрое сохранение слов/фраз/грамматики) ── */
  .lsave-btn {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1; cursor: pointer; color: var(--soft);
    background: var(--card); border: 1px solid var(--line);
    transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  }
  .lsave-btn:active { transform: scale(.88); }
  .lsave-corner { position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; border-radius: 8px; z-index: 2; }
  .lsave-inline { align-self: flex-end; }

  body.theme-dark .module-tab,
  body.theme-dark .dlg-ava,
  body.theme-dark .dlg-bubble,
  body.theme-dark .build-chip { background: #2A2A2E; }
  body.theme-dark .lsave-btn { background: var(--paper); border-color: var(--line); color: var(--soft); }

  /* ── GAME CARDS v2 ──────────────────────────────────────── */
  .game-card-v2 {
    border: 2.5px solid var(--duo-blush) !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-blush) !important;
    background: var(--card) !important;
    transition: transform .12s ease-out, box-shadow .12s ease-out !important;
  }
  .game-card-v2:hover {
    transform: translateY(0) !important;
    border-color: var(--duo-rose) !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-rose) !important;
  }
  .game-card-v2:active {
    transform: translateY(var(--duo-lip)) !important;
    box-shadow: 0 0 0 var(--duo-rose) !important;
  }
  .gcv-title { font-weight: 900 !important; }
  .gcv-num {
    background: var(--duo-gold) !important;
    border: 2px solid var(--duo-gold-deep);
    box-shadow: 0 2px 0 var(--duo-gold-deep) !important;
  }
  .game-card-kpop {
    /* Keep the dark fill — the .game-card-v2 white override above would otherwise
       leave the card white with its white/gold text invisible. */
    background: linear-gradient(155deg, var(--berry) 0%, var(--ink) 100%) !important;
    border: 2.5px solid var(--duo-berry-deep) !important;
    box-shadow: 0 var(--duo-lip) 0 var(--duo-berry-deep) !important;
  }
  .game-card-kpop:hover { border-color: var(--duo-berry-deep) !important; }

  /* ── HOME GREETING — make mascot a feature ──────────────── */
  /* Avatar uses background-image so the bear fallback works
     regardless of inline emoji/img content set by applyAvatar(). */
  #home-greet-avatar.home-greet-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 3px solid var(--duo-coral);
    box-shadow: 0 4px 0 var(--duo-coral-deep);
    background-color: var(--duo-blush);
    background-image: url('assets/bear1.png');
    background-size: cover;
    background-position: center top;
    overflow: hidden;
    font-size: 0;
    flex-shrink: 0;
  }
  /* When applyAvatar() injects a real photo URL via inline style,
     the inline background-image wins automatically. */
  #home-greet-avatar.home-greet-avatar.has-photo {
    background-image: var(--user-avatar);
  }

  /* Floating bear on the home greeting / hero corner */
  .duo-mascot {
    position: absolute;
    pointer-events: none;
    z-index: 4;
    filter: drop-shadow(0 8px 14px rgba(92,42,51,.25));
    animation: duo-mascot-bob 6.5s ease-in-out infinite;
  }
  .duo-mascot-hero {
    right: -8px;
    bottom: -14px;
    width: 110px;
    transform: rotate(6deg);
  }
  @keyframes duo-mascot-bob {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50%      { transform: translateY(-4px) rotate(1.5deg); }
  }
  .duo-mascot-hero { animation-name: duo-mascot-bob-hero; }
  @keyframes duo-mascot-bob-hero {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50%      { transform: translateY(-4px) rotate(0deg); }
  }

  /* ── KO QUOTE — chunky border-left bar ──────────────────── */
  .ko-quote {
    border-left: 6px solid var(--duo-coral) !important;
    border-radius: var(--duo-r-md) !important;
    font-weight: 600;
  }

  /* ── SIDENAV (desktop) ──────────────────────────────────── */
  @media (min-width: 1024px) {
    .sidenav .nav-item {
      border-radius: 16px !important;
      font-weight: 700 !important;
    }
    .sidenav .nav-item.active {
      background: var(--duo-blush) !important;
      color: var(--duo-coral) !important;
      box-shadow: inset 0 0 0 2px var(--duo-rose) !important;
    }
    .sidenav-mark {
      border-radius: 14px !important;
      box-shadow: 0 0 0 1px var(--line), 0 4px 12px -5px rgba(var(--accent-rgb),.35) !important;
    }
    .sidenav-stats {
      border: 2px solid var(--duo-blush) !important;
      box-shadow: 0 4px 0 var(--duo-blush) !important;
      border-radius: 18px !important;
    }
    .sidenav-stats-row strong { color: var(--duo-coral) !important; font-weight: 900 !important; }
  }

  /* ── CHAT BUBBLES — bolder ──────────────────────────────── */
  .chat-bubble.mine {
    background: var(--duo-coral) !important;
    color: #FFF;
    border: 2px solid var(--duo-coral-deep) !important;
    box-shadow: 0 3px 0 var(--duo-coral-deep) !important;
    border-radius: 20px 20px 6px 20px !important;
  }
  .chat-bubble.theirs {
    border: 2px solid var(--duo-blush) !important;
    box-shadow: 0 3px 0 var(--duo-blush) !important;
    border-radius: 20px 20px 20px 6px !important;
  }
  .chat-send-btn {
    background: var(--duo-coral) !important;
    border: 2px solid var(--duo-coral-deep) !important;
    box-shadow: 0 3px 0 var(--duo-coral-deep) !important;
    border-radius: 50% !important;
  }
  .chat-send-btn:active { transform: translateY(3px) !important; box-shadow: 0 0 0 var(--duo-coral-deep) !important; }

  /* ── BEAR MASCOT (lesson path) — bigger pop ─────────────── */
  .lesson-bear {
    width: 64px !important;
    top: -76px !important;
    filter: drop-shadow(0 8px 14px rgba(92,42,51,.28)) !important;
  }

  /* ── TOAST — chunky pill ────────────────────────────────── */
  .toast {
    background: var(--duo-berry) !important;
    border: 2px solid var(--duo-berry-deep) !important;
    box-shadow: 0 4px 0 var(--duo-berry-deep), 0 12px 24px -4px rgba(0,0,0,.25) !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 12.5px !important;
  }

  /* ── MODAL CARD ─────────────────────────────────────────── */
  .modal-card {
    border: 3px solid var(--duo-blush) !important;
    border-radius: 26px !important;
    box-shadow: 0 var(--duo-lip-lg) 0 var(--duo-blush), 0 30px 60px -20px rgba(92,42,51,.30) !important;
    overflow-x: hidden;
  }
  .modal-sheet {
    border-top: 3px solid var(--duo-rose) !important;
    border-radius: 30px 30px 0 0 !important;
  }

  /* ── ACHIEVEMENT POP — chunky gold border ───────────────── */
  .ach-pop {
    border: 3px solid var(--duo-gold) !important;
    box-shadow: 0 var(--duo-lip-lg) 0 var(--duo-gold-deep), 0 14px 40px -10px rgba(229,180,60,.45) !important;
    border-radius: 22px !important;
  }

  /* ── FLASHCARD ──────────────────────────────────────────── */
  .flashcard-front, .flashcard-back {
    border: 3px solid var(--duo-blush);
    border-radius: 24px;
  }

  /* ── SECTION HEADER ─────────────────────────────────────── */
  .section-head .title { font-weight: 800 !important; }
  .section-head .meta  { font-weight: 700 !important; font-style: normal !important; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px !important; }

  /* ───── ACCESSIBILITY ───── */
  /* Visible keyboard-focus ring (mouse/touch users don't see it, keyboard users do). */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [tabindex]:focus-visible,
  .nav-item:focus-visible,
  .card-press:focus-visible,
  .game-card-v2:focus-visible,
  .hangul-key:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 2px;
    /* border-radius не задаём: outline повторяет собственный радиус элемента,
       иначе круглые кнопки на фокусе становились 8px-квадратами */
  }

  /* ───── SETTINGS (профиль) ───── */
  .settings-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); cursor: pointer; background: none; width: 100%; text-align: left; font-family: inherit; }
  .settings-row:last-child { border-bottom: none; }
  .settings-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; background: var(--blush); display: flex; align-items: center; justify-content: center; font-size: 16px; }
  .settings-tx { flex: 1; min-width: 0; }
  .settings-title { font-weight: 600; color: var(--berry); font-size: 13px; }
  .settings-sub { font-size: 10.5px; color: var(--soft); margin-top: 1px; }
  .switch { position: relative; width: 44px; height: 26px; border-radius: 999px; background-color: rgba(92,42,51,.16); transition: background-color .6s var(--ease-out), box-shadow .6s var(--ease-out); flex-shrink: 0; }
  .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(92,42,51,.25); transition: transform .55s cubic-bezier(.4, 1.2, .4, 1); will-change: transform; }
  .switch.on { background-color: var(--coral); box-shadow: 0 4px 12px -4px rgba(var(--accent-rgb),.55), inset 0 1px 0 rgba(255,255,255,.25); }
  .switch.on::after { transform: translateX(18px); }

  /* ───── ОНБОРДИНГ ───── */
  #onboard {
    position: fixed; inset: 0; z-index: 880;
    background: linear-gradient(170deg, #FFF7F1 0%, var(--cream) 55%, #FDEFF0 100%);
    display: flex; flex-direction: column;
    animation: fadeIn .4s var(--ease-out);
  }
  .ob-top { display: flex; justify-content: space-between; align-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 22px 0; flex-shrink: 0; width: 100%; max-width: 460px; margin: 0 auto; }
  .ob-dots { display: flex; gap: 6px; }
  .ob-dots span { width: 28px; height: 5px; border-radius: 999px; background: rgba(var(--accent-rgb),.18); transform: scaleX(.64); transform-origin: left center; transition: background .3s var(--ease-out), transform .3s var(--ease-out); }
  .ob-dots span.on { background: var(--coral); transform: scaleX(1); }
  .ob-skip { font-size: 12px; font-weight: 600; color: var(--soft); cursor: pointer; background: none; border: none; padding: 6px; font-family: inherit; }
  .ob-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 26px; text-align: center; width: 100%; max-width: 460px; margin: 0 auto; }
  .ob-art { position: relative; width: 190px; height: 190px; margin-bottom: 18px; flex-shrink: 0; }
  .ob-art .ob-circle { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FBE3E6, var(--blush)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.15); }
  .ob-art img { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); height: 165px; width: auto; max-width: none; filter: drop-shadow(0 10px 18px rgba(92,42,51,.18)); }
  .ob-art .ob-emoji { position: absolute; font-size: 26px; filter: drop-shadow(0 4px 6px rgba(92,42,51,.15)); }
  .ob-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 25px; line-height: 1.18; color: var(--berry); letter-spacing: -0.02em; }
  .ob-sub { font-size: 13.5px; line-height: 1.6; color: var(--soft); margin-top: 10px; max-width: 300px; }
  .ob-foot { padding: 12px 26px calc(22px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; width: 100%; max-width: 460px; margin: 0 auto; }
  .ob-opt {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--card); border: 1.5px solid var(--line); border-radius: 16px;
    padding: 14px 16px; margin-bottom: 10px; cursor: pointer; font-family: inherit;
    font-size: 14px; font-weight: 600; color: var(--berry);
    transition: border-color .15s, background .15s, transform .1s;
  }
  .ob-opt:active { transform: scale(.985); }
  .ob-opt.sel { border-color: var(--coral); background: rgba(var(--accent-rgb),.08); box-shadow: 0 6px 16px -10px rgba(var(--accent-rgb),.5); }
  .ob-opt .ob-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: var(--blush); display: flex; align-items: center; justify-content: center; font-size: 18px; }
  .ob-opt .ob-check { margin-left: auto; color: var(--coral); opacity: 0; transition: opacity .15s; font-size: 15px; }
  .ob-opt.sel .ob-check { opacity: 1; }

  /* ───── ФОКУС-ТАЙМЕР (учебная комната) ───── */
  .focus-pill {
    position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
    z-index: 750; display: flex; align-items: center; gap: 10px;
    background: var(--grad-berry); color: #fff; border-radius: 999px; padding: 8px 8px 8px 16px;
    box-shadow: var(--shadow-lg); cursor: pointer; font-weight: 700; font-size: 14px;
    animation: toastIn .3s var(--ease-out);
  }
  .focus-pill .fp-stop {
    width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.16);
    display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; border: none; color: #fff;
  }
  .focus-ring { transform: rotate(-90deg); }
  .focus-ring .bg { fill: none; stroke: rgba(92,42,51,.10); stroke-width: 11; }
  .focus-ring .fg { fill: none; stroke: url(#focusGrad); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset .45s linear; }
  .focus-time { font-variant-numeric: tabular-nums; }
  .focus-preset { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--berry); cursor: pointer; font-family: inherit; transition: all .15s var(--ease-out); }
  .focus-preset.sel { background: var(--grad-coral); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); }

  /* Пользовательские настройки: лепестки и спокойные анимации */
  body.no-petals #ambient-petals { display: none !important; }
  body.calm-motion #ambient-petals, body.calm-motion #intro-petals, body.calm-motion .petal,
  body.calm-motion .path-deco, body.calm-motion .lesson-bear, body.calm-motion .duo-mascot { display: none !important; }
  body.calm-motion .progress-segments > span.current { animation: none !important; }

  /* ───── ТЁМНАЯ ТЕМА (графит · серый · тёмно-синий) ─────
     Для мужской аудитории и любителей тёмного. Включается в Настройках
     (body.theme-dark). Перекрашивает токены + светлые поверхности. */
  /* ════════════════════════════════════════════════════════════
     ЦВЕТОВЫЕ ТЕМЫ (выбор в Настройках → 🎨 Цветовая тема).
     Каждая тема переопределяет токены бренда + duo-слоя; блок стоит
     ПЕРЕД тёмной темой, поэтому body.theme-dark всегда побеждает.
     Акценты проверены: текст ≥4.5:1 на белом, иконки на заливке ≥3:1.
     ════════════════════════════════════════════════════════════ */
  /* Изумруд — тёмная бирюза + светлая мята (скрин 1) */
  body.ct-emerald {
    --cream:#F4FFFD; --linen:#E9FBF8; --paper:#EFFCFA; --blush:#DCF6F1; --petal:#C0EDE6; --rose:#8FD3C9;
    --coral:#2E6B64; --plum:#1F4F49; --berry:#234B45; --ink:#15302C;
    --line:rgba(35,75,69,.12); --line-strong:rgba(35,75,69,.2);
    --soft:rgba(35,75,69,.78); --hush:rgba(35,75,69,.58); --text2:rgba(35,75,69,.82); --veil:rgba(35,75,69,.05);
    --accent-rgb:46,107,100; --rose-rgb:143,211,201; --petal-rgb:192,237,230;
    --grad-coral:linear-gradient(140deg,#3F8A81 0%,#2E6B64 100%);
    --grad-warm:linear-gradient(140deg,#8FD3C9 0%,#C9A55C 100%);
    --grad-berry:linear-gradient(150deg,#2C5C55 0%,#15302C 100%);
    --grad-cream:linear-gradient(180deg,#FFFFFF 0%,#EFFCFA 100%);
    --duo-coral:#2E6B64; --duo-coral-deep:#1F4F49; --duo-rose:#4E948B; --duo-rose-deep:#356F68;
    --duo-berry:#234B45; --duo-berry-deep:#122B27;
    --duo-cream:#F4FFFD; --duo-paper:#EFFCFA; --duo-blush:#DCF6F1; --duo-ink-line:#234B45;
  }
  /* Розовый лайм — пудровый розовый + лайм (скрин 5) */
  body.ct-blossom {
    --cream:#FEF6FB; --linen:#FBEAF4; --paper:#FCF0F7; --blush:#F6DCEC; --petal:#EFC4DF; --rose:#E39BC9;
    --coral:#B03A8C; --plum:#8A2C6C; --berry:#5F2B4F; --ink:#321A2B;
    --line:rgba(95,43,79,.12); --line-strong:rgba(95,43,79,.2);
    --soft:rgba(95,43,79,.78); --hush:rgba(95,43,79,.58); --text2:rgba(95,43,79,.82); --veil:rgba(95,43,79,.05);
    --accent-rgb:176,58,140; --rose-rgb:227,155,201; --petal-rgb:239,196,223;
    --grad-coral:linear-gradient(140deg,#CF63AC 0%,#B03A8C 100%);
    --grad-warm:linear-gradient(140deg,#E3FB9E 0%,#E39BC9 100%);
    --grad-berry:linear-gradient(150deg,#8A2C6C 0%,#321A2B 100%);
    --grad-cream:linear-gradient(180deg,#FFFFFF 0%,#FCF0F7 100%);
    --duo-coral:#B03A8C; --duo-coral-deep:#8A2C6C; --duo-rose:#CF63AC; --duo-rose-deep:#A84B89;
    --duo-berry:#5F2B4F; --duo-berry-deep:#3D1A33;
    --duo-cream:#FEF6FB; --duo-paper:#FCF0F7; --duo-blush:#F6DCEC; --duo-ink-line:#5F2B4F;
  }
  /* Лайм — графит + лайм (скрин 6, слева) */
  body.ct-lime {
    --cream:#FBFDF4; --linen:#F3F9E4; --paper:#F7FBEC; --blush:#EAF7CF; --petal:#DCF5A8; --rose:#B9E366;
    --coral:#3D3D3D; --plum:#232323; --berry:#3A3A3A; --ink:#222222;
    --line:rgba(58,58,58,.13); --line-strong:rgba(58,58,58,.22);
    --soft:rgba(40,40,40,.74); --hush:rgba(40,40,40,.58); --text2:rgba(40,40,40,.82); --veil:rgba(40,40,40,.05);
    --accent-rgb:61,61,61; --rose-rgb:185,227,102; --petal-rgb:220,245,168;
    --grad-coral:linear-gradient(140deg,#5A5A5A 0%,#3D3D3D 100%);
    --grad-warm:linear-gradient(140deg,#C3FA4E 0%,#B9E366 100%);
    --grad-berry:linear-gradient(150deg,#3D3D3D 0%,#161616 100%);
    --grad-cream:linear-gradient(180deg,#FFFFFF 0%,#F7FBEC 100%);
    --duo-coral:#3D3D3D; --duo-coral-deep:#232323; --duo-rose:#7A9929; --duo-rose-deep:#5C741C;
    --duo-berry:#3A3A3A; --duo-berry-deep:#1F1F1F;
    --duo-cream:#FBFDF4; --duo-paper:#F7FBEC; --duo-blush:#EAF7CF; --duo-ink-line:#3A3A3A;
  }
  /* Небо — голубой + кремовый (скрин 6, справа) */
  body.ct-sky {
    --cream:#FBFDFF; --linen:#EAF5FD; --paper:#F2F9FE; --blush:#DDF0FC; --petal:#BFE2F9; --rose:#8FC8F0;
    --coral:#2470B4; --plum:#18558C; --berry:#27485F; --ink:#1A2B38;
    --line:rgba(39,72,95,.12); --line-strong:rgba(39,72,95,.2);
    --soft:rgba(39,72,95,.78); --hush:rgba(39,72,95,.58); --text2:rgba(39,72,95,.82); --veil:rgba(39,72,95,.05);
    --accent-rgb:36,112,180; --rose-rgb:143,200,240; --petal-rgb:191,226,249;
    --grad-coral:linear-gradient(140deg,#4E94D6 0%,#2470B4 100%);
    --grad-warm:linear-gradient(140deg,#F7EDC0 0%,#8FC8F0 100%);
    --grad-berry:linear-gradient(150deg,#18558C 0%,#1A2B38 100%);
    --grad-cream:linear-gradient(180deg,#FFFFFF 0%,#F2F9FE 100%);
    --duo-coral:#2470B4; --duo-coral-deep:#18558C; --duo-rose:#4E94D6; --duo-rose-deep:#3573AC;
    --duo-berry:#27485F; --duo-berry-deep:#142C3D;
    --duo-cream:#FBFDFF; --duo-paper:#F2F9FE; --duo-blush:#DDF0FC; --duo-ink-line:#27485F;
  }
  /* Чёрно-белая — строгий монохром (фото нет — по описанию) */
  body.ct-mono {
    --cream:#FAFAFA; --linen:#F1F1F1; --paper:#F6F6F6; --blush:#ECECEC; --petal:#DEDEDE; --rose:#BDBDBD;
    --coral:#2F2F2F; --plum:#1A1A1A; --berry:#2B2B2B; --ink:#161616;
    --gold:#6E6E6E; --gold-soft:#D9D9D9; --gold-ink:#4A4A4A; --sage:#6E6E6E;
    --ok-ink:#3C3C3C; --ok-deep:#222222; --bad-ink:#3C3C3C; --bad-bg:#E8E8E8; --bad-line:#9A9A9A;
    --line:rgba(0,0,0,.12); --line-strong:rgba(0,0,0,.22);
    --soft:rgba(0,0,0,.68); --hush:rgba(0,0,0,.54); --text2:rgba(0,0,0,.8); --veil:rgba(0,0,0,.05);
    --accent-rgb:47,47,47; --rose-rgb:158,158,158; --petal-rgb:222,222,222;
    --grad-coral:linear-gradient(140deg,#555555 0%,#2F2F2F 100%);
    --grad-warm:linear-gradient(140deg,#BDBDBD 0%,#6E6E6E 100%);
    --grad-berry:linear-gradient(150deg,#2F2F2F 0%,#0F0F0F 100%);
    --grad-cream:linear-gradient(180deg,#FFFFFF 0%,#F6F6F6 100%);
    --duo-coral:#2F2F2F; --duo-coral-deep:#111111; --duo-rose:#555555; --duo-rose-deep:#333333;
    --duo-berry:#2B2B2B; --duo-berry-deep:#0F0F0F; --duo-gold:#6E6E6E; --duo-gold-deep:#4A4A4A;
    --duo-sage:#6E6E6E; --duo-sage-deep:#4A4A4A;
    --duo-cream:#FAFAFA; --duo-paper:#F6F6F6; --duo-blush:#ECECEC; --duo-ink-line:#2B2B2B;
  }
  /* Ч/б тема: «тёплые» розовые поверхности заданы литеральными hex'ами (не через
     токены), поэтому переменные их не перекрашивают — глушим вручную в серый.
     :not(.theme-dark) — страховка: эти светлые !important-оверрайды НИКОГДА не
     должны срабатывать в тёмной теме (иначе светлая карточка + светлый текст =
     нечитаемо). applySettings и так не вешает ct-* в тёмной теме. */
  body.ct-mono:not(.theme-dark) .hero,
  body.ct-mono:not(.theme-dark) .hangul-display,
  body.ct-mono:not(.theme-dark) .feed-card-rose,
  body.ct-mono:not(.theme-dark) .topik-hero { background: linear-gradient(150deg, #FFFFFF 0%, #ECECEC 100%) !important; }
  body.ct-mono:not(.theme-dark) .hero { border-color: #BDBDBD !important; }
  body.ct-mono:not(.theme-dark) .lesson-complete-page { background: radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, #F1F1F1 60%, #E2E2E2 100%) !important; }
  /* #intro в ч/б НЕ перекрашиваем — сплэш брендовый (фирменный розовый), см. «БРЕНДОВЫЙ ЗАМОК». */
  body.ct-mono:not(.theme-dark) .placeholder-img { background: repeating-linear-gradient(135deg, #ECECEC 0 8px, #F6F6F6 8px 16px) !important; }
  /* Ч/б: глушим зелёный/золотой кнопок частей экзамена в серый (읽기 и так серый через токены). */
  body.ct-mono:not(.theme-dark) .topik-part-listen,
  body.ct-mono:not(.theme-dark) .topik-part-write {
    color: #2F2F2F !important; border-color: rgba(0,0,0,.16) !important;
    background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.025)) !important;
  }
  body.ct-mono:not(.theme-dark) .topik-part-listen .ko,
  body.ct-mono:not(.theme-dark) .topik-part-write .ko { color: #2F2F2F !important; }
  body.ct-mono:not(.theme-dark) .topik-part-listen:hover,
  body.ct-mono:not(.theme-dark) .topik-part-write:hover {
    border-color: rgba(0,0,0,.28) !important; box-shadow: 0 9px 20px -10px rgba(0,0,0,.28) !important;
    background: linear-gradient(135deg, rgba(0,0,0,.11), rgba(0,0,0,.05)) !important;
  }

  /* Свотчи выбора темы в Настройках */
  /* ── Кнопки с градиентом → сплошная заливка во ВСЕХ темах, КРОМЕ оригинальной
     (madie). Градиент золото→coral / золото→белый хорош только в фирменной теме;
     в остальных уезжает в грязь. madie = голый body (без ct-* и theme-dark),
     поэтому инлайн-градиент остаётся её дефолтом, а тут перебиваем для прочих. ── */
  body.ct-emerald .culture-banner,
  body.ct-blossom .culture-banner,
  body.ct-lime    .culture-banner,
  body.ct-sky     .culture-banner,
  body.ct-mono    .culture-banner {
    background: var(--coral) !important; color: #fff !important;
  }
  body.theme-dark .culture-banner {
    background: var(--grad-coral) !important; /* в тёмной --grad-coral = сплошной #3D5288 */
    color: #fff !important;
  }
  body.ct-emerald .goal-done,
  body.ct-blossom .goal-done,
  body.ct-lime    .goal-done,
  body.ct-sky     .goal-done,
  body.ct-mono    .goal-done,
  body.theme-dark .goal-done {
    background: rgba(var(--accent-rgb), .12) !important;
  }

  .theme-picker { padding: 12px 4px 4px; }
  .theme-picker-title {
    font-size: 12.5px; font-weight: 700; color: var(--berry);
    display: flex; align-items: center; gap: 8px;
    margin: 0 2px 10px;
  }
  .theme-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 6px;
  }
  .theme-swatch-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer; padding: 0;
    font-family: inherit;
  }
  .theme-swatch {
    width: 46px; height: 46px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    border: 2.5px solid var(--line-strong);
    position: relative;
    transition: transform .2s var(--ease-spring), border-color .2s ease, box-shadow .2s ease;
  }
  .theme-swatch span { flex: 1; }
  .theme-swatch-wrap:active .theme-swatch { transform: scale(.9); }
  .theme-swatch-wrap.active .theme-swatch {
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.25);
  }
  .theme-swatch i {
    position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center;
    color: #fff; font-size: 14px;
    background: rgba(0,0,0,.28);
  }
  .theme-swatch-wrap.active .theme-swatch i { display: flex; }
  .theme-swatch-name {
    font-size: 9.5px; font-weight: 600; color: var(--soft);
    max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .theme-swatch-wrap.active .theme-swatch-name { color: var(--coral); font-weight: 800; }

  /* ── Кроссворд ── */
  .cw-lobby { display: grid; gap: 10px; }
  .cw-lobby-card {
    display: flex; align-items: center; gap: 13px;
    width: 100%; cursor: pointer; font-family: inherit; text-align: left;
    background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
    padding: 14px 16px;
    transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  }
  .cw-lobby-card:hover { border-color: var(--rose); box-shadow: var(--shadow-md); }
  .cw-lobby-card:active { transform: scale(.98); }
  .cw-lobby-ico {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px;
    background: linear-gradient(140deg, var(--blush), var(--paper));
    display: flex; align-items: center; justify-content: center; font-size: 23px;
  }
  .cw-lobby-tx { flex: 1; min-width: 0; }
  .cw-lobby-title { display: block; font-weight: 800; color: var(--berry); font-size: 15px; }
  .cw-lobby-sub { display: block; font-size: 11.5px; color: var(--soft); margin-top: 1px; }

  .cw-grid {
    display: grid; gap: 5px;
    max-width: 340px; margin: 6px auto 14px;
  }
  .cw-cell {
    position: relative; aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--card); border: 1.5px solid var(--line-strong);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
  }
  .cw-cell.cw-blank { background: transparent; border: none; cursor: default; pointer-events: none; }
  .cw-cell.inword { background: var(--blush); }
  .cw-cell.active { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.3); transform: scale(1.04); z-index: 1; }
  .cw-cell.cw-wrong { animation: cwShake .4s; border-color: var(--bad-line); background: var(--bad-bg); }
  @keyframes cwShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
  .cw-num { position: absolute; top: 2px; left: 3px; font-size: 8px; font-weight: 800; color: var(--coral); line-height: 1; }
  .cw-syl { font-size: 19px; font-weight: 800; color: var(--berry); }

  .cw-bank { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 14px; }
  .cw-bank-key {
    min-width: 44px; height: 44px; padding: 0 8px;
    border-radius: 12px; cursor: pointer; font-family: inherit;
    background: var(--card); border: 2px solid var(--duo-blush, var(--line)); box-shadow: 0 3px 0 var(--duo-blush, var(--line));
    font-size: 19px; font-weight: 800; color: var(--berry);
    transition: transform .1s ease-out, box-shadow .1s ease-out;
  }
  .cw-bank-key:active { transform: translateY(3px); box-shadow: 0 0 0 var(--duo-blush, var(--line)); }
  .cw-bank-bs { color: var(--bad-ink); font-size: 16px; }

  .cw-clues { display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 560px) { .cw-clues { grid-template-columns: 1fr 1fr; } }
  .cw-clues-head { font-size: 11px; font-weight: 800; color: var(--coral); letter-spacing: .03em; margin-bottom: 7px; }
  .cw-clue {
    display: flex; align-items: center; gap: 9px; width: 100%;
    cursor: pointer; font-family: inherit; text-align: left;
    background: var(--card); border: 1px solid var(--line); border-radius: 11px;
    padding: 8px 11px; margin-bottom: 6px;
    transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  }
  .cw-clue.active { border-color: var(--coral); background: var(--blush); }
  .cw-clue-num { font-weight: 800; color: var(--coral); font-size: 12px; min-width: 16px; }
  .cw-clue-tx { flex: 1; min-width: 0; font-size: 12.5px; color: var(--berry); }
  .cw-clue-len { font-size: 10px; color: var(--hush); background: var(--paper); border-radius: 999px; padding: 2px 7px; }

  /* ── Поиск слов (단어 찾기) ── */
  .ws-grid {
    display: grid; gap: 3px;
    max-width: 360px; margin: 6px auto 14px;
    touch-action: none; user-select: none; -webkit-user-select: none;
  }
  .ws-cell {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: var(--card); border: 1px solid var(--line);
    font-size: 15px; font-weight: 700; color: var(--berry);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, transform .12s var(--ease-spring);
  }
  .ws-cell.sel { background: var(--coral); color: #fff; transform: scale(1.06); border-color: var(--coral); }
  .ws-cell.found {
    background: rgba(132,196,116,.22); color: var(--ok-ink);
    border-color: rgba(132,196,116,.5);
    animation: wsFoundPop .4s var(--ease-spring);
  }
  @keyframes wsFoundPop { 0%,100%{transform:scale(1)} 45%{transform:scale(1.12)} }
  .ws-words { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
  .ws-word {
    display: inline-flex; align-items: baseline; gap: 6px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
    padding: 6px 13px; position: relative;
    transition: opacity .3s ease, background .3s ease;
  }
  .ws-word-ko { font-weight: 800; color: var(--berry); font-size: 14px; }
  .ws-word-ru { font-size: 11px; color: var(--soft); }
  .ws-word.found { background: rgba(132,196,116,.16); opacity: .6; }
  /* анимация вычёркивания найденного слова */
  .ws-word.found::after {
    content: ''; position: absolute; left: 10px; right: 10px; top: 50%;
    height: 2px; background: var(--ok-ink); border-radius: 2px;
    transform-origin: left center; animation: wsStrike .45s var(--ease-out) forwards;
  }
  @keyframes wsStrike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  body.theme-dark .ws-word.found::after { background: var(--ok-ink); }

  /* Планшет/ПК: кроссворд и поиск слов — крупнее по центру широкой колонки,
     а не маленький квадрат в пустоте. Клетки тянутся (aspect-ratio:1),
     поэтому достаточно поднять max-width сетки и кегль. */
  @media (min-width: 768px) {
    .cw-grid  { max-width: 480px; gap: 7px; }
    .cw-cell  { border-radius: 12px; }
    .cw-syl   { font-size: 26px; }
    .cw-num   { font-size: 10px; }
    .ws-grid  { max-width: 520px; gap: 5px; }
    .ws-cell  { font-size: 21px; border-radius: 10px; }
    .cw-bank-key { min-width: 50px; height: 50px; font-size: 22px; }
    .cw-lobby, .cw-clues { max-width: 620px; margin-left: auto; margin-right: auto; }
  }

  /* ── Игра «Память»: 3D-переворот карточек ── */
  .mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .mem-card {
    aspect-ratio: 1; min-height: 62px; cursor: pointer;
    perspective: 700px;
  }
  .mem-card-inner {
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .42s cubic-bezier(.2,.85,.3,1.05);
  }
  .mem-card.flipped .mem-card-inner { transform: rotateY(180deg); }
  .mem-face {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 6px; text-align: center;
    border-radius: 16px;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border: 2px solid;
  }
  .mem-back {
    background: var(--grad-coral); color: #fff;
    border-color: transparent;
    font-size: 24px;
    box-shadow: 0 4px 0 var(--duo-coral-deep, rgba(0,0,0,.15));
  }
  .mem-front {
    background: var(--card); border-color: var(--duo-blush, var(--line));
    transform: rotateY(180deg);
    box-shadow: 0 4px 0 var(--duo-blush, var(--line));
  }
  .mem-card:active .mem-card-inner { transform: scale(.96) rotateY(var(--mem-r, 0deg)); }
  .mem-card.flipped:active .mem-card-inner { transform: scale(.96) rotateY(180deg); }
  .mem-card.matched .mem-front {
    background: rgba(229,180,60,.18); border-color: var(--duo-gold, var(--gold));
    animation: memMatchPop .4s var(--ease-spring);
  }
  .mem-card.matched { opacity: .82; }
  @keyframes memMatchPop { 0%,100% { transform: scale(1);} 45% { transform: scale(1.08);} }
  body.calm-motion .mem-card-inner { transition: none; }

  /* Выбор пола в настройках */
  .gender-pick { padding: 12px 4px 6px; }
  .gender-pick[data-required] {
    background: rgba(var(--accent-rgb),.06);
    border: 1px dashed rgba(var(--accent-rgb),.4);
    border-radius: 14px; padding: 12px; margin: 4px 0;
  }
  .gender-pick-title { font-size: 12.5px; font-weight: 700; color: var(--berry); margin: 0 2px 10px; }
  .gender-pick-row { display: flex; gap: 8px; }
  .gender-opt {
    flex: 1; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px;
    padding: 12px 8px; border-radius: 14px;
    border: 1.5px solid var(--line); background: var(--paper); color: var(--berry);
    transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  }
  .gender-opt:active { transform: scale(.96); }
  .gender-opt.active {
    border-color: var(--coral); background: var(--blush); color: var(--coral);
    box-shadow: inset 0 0 0 1px var(--coral);
  }

  body.theme-dark {
    --cream:   #161618;
    --linen:   #121212;
    --paper:   #1B1C1F;
    --blush:   #222631;
    --petal:   #333A4A;
    --rose:    #46587A;
    --coral:   #6B8BD6;
    --plum:    #8FA7DE;
    --berry:   #E7EBF4;
    --ink:     #E7EBF4;
    --gold:    #B8C4DC;
    --gold-soft: #5E6C88;
    --sage:    #7FB08A;
    --line:    rgba(231,235,244,.09);
    --line-strong: rgba(231,235,244,.17);
    --soft:    rgba(231,235,244,.64);
    --hush:    rgba(231,235,244,.56); /* .50 было 4.4:1 на карточках — теперь 5.2:1 */
    --shadow-xs: 0 1px 1px rgba(0,0,0,.25);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.3);
    --shadow-md: 0 2px 6px rgba(0,0,0,.3), 0 8px 22px -10px rgba(0,0,0,.55);
    --shadow-lg: 0 4px 12px -4px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
    --shadow-glow: 0 0 0 4px rgba(107,139,214,.16), 0 10px 28px -10px rgba(107,139,214,.4);
    /* Без градиентов: сплошной тёмно-синий + белый текст */
    --grad-coral: #3D5288;
    --grad-warm:  #344878;
    --grad-berry: #1B1C1F;
    --grad-cream: #1C1D21;

    /* Семантические поверхности и статусы */
    --accent-rgb: 107,139,214;
    --rose-rgb:   143,167,222;
    --petal-rgb:  70,88,122;
    --text2:   rgba(231,235,244,.78);
    --veil:    rgba(231,235,244,.07);
    --card:    #1E1F23;
    --ok-ink:  #8FC98A;
    --ok-deep: #B5E0B0;
    --bad-ink: #E08896;
    --bad-bg:  rgba(224,107,125,.14);
    --bad-line:#B95E6C;
    --gold-ink:#D9C28A;

    /* Duo-слой (объёмные карточки): его !important-правила берут цвета
       из этих токенов, поэтому тему переключаем на уровне токенов */
    /* #5874B8→#4E69AE: текст #F2F5FA на текущей плитке 4.9:1 (было 4.2:1) */
    --duo-coral:      #4E69AE;
    --duo-coral-deep: #3D5288;
    --duo-rose:       #4A63A6;
    --duo-rose-deep:  #344878;
    --duo-berry:      #4E69AE;
    --duo-berry-deep: #36497F;
    --duo-gold:       #80671F;
    --duo-gold-deep:  #5F4E1D;
    --duo-sage:       #80671F;
    --duo-sage-deep:  #5F4E1D;
    --sage:           #C9A94E;
    --duo-cream:      #161618;
    --duo-paper:      #1B1C1F;
    --duo-blush:      #2B2F39;
    /* Текст на тёмном золоте/sage (.btn-gold/.chip-gold): светлый, иначе берри #5C2A33
       давал 2.1:1. Теперь #FBF4E4 → 4.9:1 (AA). Перебивает свотчевый duo-ink-line. */
    --duo-ink-line:   #FBF4E4;
    /* Тёмный «жёсткий» акцент: эти значения раньше были захардкожены в правилах
       ниже (switch, exam.sel, play, прогресс, hero, topik-entry…) и НЕ перекрашивались
       под свотч. Теперь это токены → каждый ct-X.theme-dark задаёт свой цвет.
       --dk-fill: яркая заливка без текста; --dk-fill-deep: глубокая заливка с мелким
       белым текстом/иконкой (бейдж, ▶); --dk-ink: светлый акцент-текст; --dk-surf/2:
       приподнятые тёмные поверхности (hero, topik-entry, flashcard-back…). */
    --dk-fill:        #5874B8;
    --dk-fill-deep:   #3D5288;
    --dk-ink:         #AFC4EF;
    --dk-surf:        #222A3C;
    --dk-surf-2:      #2E3A52;
  }
  /* ───── ТЁМНАЯ ВЕРСИЯ КАЖДОГО СВОТЧА ─────
     body.ct-X.theme-dark (специфичность 0,2,1) перебивает базовую тёмную (0,1,1):
     сохраняем проверенные тёмные поверхности/текст/тени/статусы, но перекрашиваем
     АКЦЕНТ под цвет темы. Контраст выверен: акцент-текст на карточке ≥4.2:1,
     белый на кнопке-заливке ≥5.2:1, белый на акценте-фоне (play-кнопки) ≥3.2:1. */
  body.ct-emerald.theme-dark {
    --coral:#2E988A; --plum:#4BB6A6;
    --accent-rgb:46,152,138; --rose:#3A6A62; --rose-rgb:92,201,182; --petal:#2A453F; --petal-rgb:58,106,98; --blush:#1E2F2B;
    --grad-coral:#1F7468; --grad-warm:#1B6359; --grad-berry:#14302C;
    --shadow-glow:0 0 0 4px rgba(46,152,138,.18), 0 10px 28px -10px rgba(46,152,138,.4);
    --duo-coral:#1F7468; --duo-coral-deep:#155349; --duo-rose:#2C7A6E; --duo-rose-deep:#1C5A50; --duo-berry:#1F7468; --duo-berry-deep:#16453E; --duo-blush:#1E2F2B;
    --dk-fill:#2E988A; --dk-fill-deep:#1F7468; --dk-ink:#4BB6A6; --dk-surf:#16322D; --dk-surf-2:#1B3D37;
  }
  body.ct-blossom.theme-dark {
    --coral:#C75BA0; --plum:#D77FB8;
    --accent-rgb:199,91,160; --rose:#6E4460; --rose-rgb:230,143,197; --petal:#4A2C40; --petal-rgb:110,68,96; --blush:#2E2229;
    --grad-coral:#A53A82; --grad-warm:#913874; --grad-berry:#2A1726;
    --shadow-glow:0 0 0 4px rgba(199,91,160,.18), 0 10px 28px -10px rgba(199,91,160,.4);
    --duo-coral:#A53A82; --duo-coral-deep:#7C2C61; --duo-rose:#B84E96; --duo-rose-deep:#8A3A6E; --duo-berry:#A53A82; --duo-berry-deep:#6E2856; --duo-blush:#2E2229;
    --dk-fill:#C75BA0; --dk-fill-deep:#A53A82; --dk-ink:#D77FB8; --dk-surf:#2C1A26; --dk-surf-2:#3A2230;
  }
  body.ct-lime.theme-dark {
    --coral:#6E9132; --plum:#8AAE52;
    --accent-rgb:110,145,50; --rose:#5A6A38; --rose-rgb:166,200,90; --petal:#36421E; --petal-rgb:90,106,56; --blush:#25291C;
    --grad-coral:#4A6320; --grad-warm:#41571C; --grad-berry:#1A1F12;
    --shadow-glow:0 0 0 4px rgba(110,145,50,.18), 0 10px 28px -10px rgba(110,145,50,.4);
    --duo-coral:#4A6320; --duo-coral-deep:#334816; --duo-rose:#5C7A26; --duo-rose-deep:#415C1A; --duo-berry:#4A6320; --duo-berry-deep:#2C3F14; --duo-blush:#25291C;
    --dk-fill:#6E9132; --dk-fill-deep:#4A6320; --dk-ink:#8AAE52; --dk-surf:#1F261A; --dk-surf-2:#2A3420;
  }
  body.ct-sky.theme-dark {
    --coral:#4892D0; --plum:#6FAEE0;
    --accent-rgb:72,146,208; --rose:#3A6280; --rose-rgb:120,180,235; --petal:#243E52; --petal-rgb:58,98,128; --blush:#1E2A36;
    --grad-coral:#1E6FB4; --grad-warm:#1A609E; --grad-berry:#15283A;
    --shadow-glow:0 0 0 4px rgba(72,146,208,.18), 0 10px 28px -10px rgba(72,146,208,.4);
    --duo-coral:#1E6FB4; --duo-coral-deep:#16558C; --duo-rose:#2974AE; --duo-rose-deep:#1E6298; --duo-berry:#1E6FB4; --duo-berry-deep:#184C7E; --duo-blush:#1E2A36;
    --dk-fill:#4892D0; --dk-fill-deep:#1E6FB4; --dk-ink:#6FAEE0; --dk-surf:#1B2A3A; --dk-surf-2:#243A52;
  }
  body.ct-mono.theme-dark {
    --coral:#8E8E8E; --plum:#ABABAB; --sage:#B8B8B8; --gold:#B8B8B8; --gold-ink:#D0D0D0;
    --accent-rgb:142,142,142; --rose:#5E5E5E; --rose-rgb:170,170,170; --petal:#3A3A3A; --petal-rgb:94,94,94; --blush:#262626;
    --grad-coral:#5A5A5A; --grad-warm:#4E4E4E; --grad-berry:#141414;
    --shadow-glow:0 0 0 4px rgba(142,142,142,.18), 0 10px 28px -10px rgba(142,142,142,.4);
    --duo-coral:#5A5A5A; --duo-coral-deep:#3A3A3A; --duo-rose:#6E6E6E; --duo-rose-deep:#4A4A4A; --duo-berry:#5A5A5A; --duo-berry-deep:#333333; --duo-blush:#262626;
    --dk-fill:#8E8E8E; --dk-fill-deep:#5A5A5A; --dk-ink:#ABABAB; --dk-surf:#242424; --dk-surf-2:#2E2E2E;
  }
  body.theme-dark, body.theme-dark .app-shell { background: var(--linen); color: var(--ink); }
  body.theme-dark .card,
  body.theme-dark .modal-card,
  body.theme-dark .game-page-card,
  body.theme-dark .hangul-display,
  body.theme-dark .input,
  body.theme-dark .auth-tab,
  body.theme-dark .stat-pill,
  body.theme-dark .game-card-v2,
  body.theme-dark .focus-preset,
  body.theme-dark .ob-opt,
  body.theme-dark .exam-passage,
  body.theme-dark .exam-opt,
  body.theme-dark .settings-row { background: var(--paper); color: var(--ink); border-color: var(--line); }
  body.theme-dark .auth-tab-active { background: var(--grad-coral); color: #fff; }
  body.theme-dark .lb-chip { background: var(--paper); color: var(--soft); border-color: var(--line); }
  body.theme-dark .lb-chip-on { background: rgba(var(--accent-rgb),.18); color: var(--ink); border-color: rgba(var(--accent-rgb),.5); }
  body.theme-dark .topbar,
  body.theme-dark .bottomnav,
  body.theme-dark .sidenav,
  body.theme-dark .exam-stick { background: rgba(22,22,24,.92); border-color: var(--line); }
  body.theme-dark #topik-exam-overlay,
  body.theme-dark .game-page { background: var(--linen); }
  body.theme-dark .modal-bg { background: rgba(18,18,18,.8); }
  body.theme-dark #onboard { background: #141519; }
  body.theme-dark .ob-art .ob-circle { background: #24262C; box-shadow: inset 0 0 0 1px var(--line); }
  body.theme-dark .topbar-mark, body.theme-dark .sidenav-mark { background: #E9EDF5; }
  body.theme-dark .switch { background-color: rgba(231,235,244,.18); }
  body.theme-dark .switch.on { background-color: var(--dk-fill); box-shadow: 0 4px 12px -4px rgba(var(--accent-rgb),.6); }
  body.theme-dark .toast { background: #2B2F39; color: #E7EBF4; }
  body.theme-dark .exam-opt.sel { border-color: var(--dk-fill); background: rgba(var(--accent-rgb),.16); }
  body.theme-dark .exam-opt.sel .exam-opt-tx, body.theme-dark .exam-opt.sel .exam-opt-num { color: var(--dk-ink); }
  body.theme-dark .hero { background: var(--dk-surf) !important; border-color: var(--line) !important; }
  body.theme-dark .exam-top { background: rgba(22,22,24,.94); }
  body.theme-dark .exam-audio { background: rgba(22,22,24,.94); }
  body.theme-dark .sidenav .nav-item:hover { background: rgba(231,235,244,.07); }
  body.theme-dark .topbar { background: rgba(18,18,18,.94); }
  body.theme-dark .exam-navbtn { background: var(--paper); color: var(--ink); border-color: var(--line); }
  body.theme-dark .exam-next, body.theme-dark .exam-finish { background: var(--grad-coral); color: #fff; }
  body.theme-dark .chip { background: #222631; color: var(--ink); }
  body.theme-dark #ambient-petals { opacity: .25; }
  body.theme-dark #write-wrap { background: #1B1C1F !important; }
  body.theme-dark .focus-pill { background: #23262E !important; }
  /* Декоративные поверхности — сплошные цвета (в тёмной теме без градиентов).
     #intro НЕ трогаем — сплэш всегда брендовый розовый (см. «БРЕНДОВЫЙ ЗАМОК»). */
  body.theme-dark .lesson-complete-page { background: #18191C; }
  body.theme-dark .topik-hero { background: #1C1E24 !important; border-color: #2B2F39 !important; }
  /* Текст героя — явно светлый в тёмной теме (не полагаемся на var, чтобы при
     любом сочетании классов карточка+текст оставались читаемыми). */
  body.theme-dark .topik-hero-title { color: #F0E6EA !important; }
  body.theme-dark .topik-hero-sub { color: #B9A9AE !important; }
  /* TOPIK deep prep — тёмная тема */
  body.theme-dark .td-level-btn { background: #1C1E24 !important; border-color: #2B2F39 !important; color: #B9A9AE !important; }
  body.theme-dark .td-level-btn.active { background: var(--grad-coral) !important; color: #F2F5FA !important; border-color: transparent !important; }
  body.theme-dark .td-type, body.theme-dark .td-ex { background: #1C1E24 !important; border-color: #2B2F39 !important; }
  body.theme-dark .td-type-title, body.theme-dark .td-ex-q, body.theme-dark .td-block-h { color: #F0E6EA !important; }
  body.theme-dark .td-strategy { color: #E8DDE2 !important; }
  body.theme-dark .td-opt { background: #15171C !important; border-color: #2B2F39 !important; color: #E8DDE2 !important; }
  body.theme-dark .td-opt:not(:disabled):hover { border-color: var(--rose) !important; background: #23262E !important; }
  body.theme-dark .td-opt.correct { background: rgba(46,158,91,.20) !important; color: #8FE3AC !important; border-color: #2E9E5B !important; }
  body.theme-dark .td-opt.wrong { background: rgba(217,83,79,.20) !important; color: #F1A8A5 !important; border-color: #D9534F !important; }
  body.theme-dark .td-explain { background: #23262E !important; color: #E8DDE2 !important; }
  body.theme-dark .td-real-tag, body.theme-dark .td-ex-count { background: #2E2530 !important; color: #F0B6B0 !important; }
  body.theme-dark .td-passage { background: #23262E !important; color: #F0E6EA !important; }
  body.theme-dark .td-sentence { background: #15171C !important; border-color: #2B2F39 !important; }
  body.theme-dark .td-sentence .ko { color: #F0E6EA !important; }
  body.theme-dark .td-insert { background: #23262E !important; border-color: var(--rose) !important; }
  body.theme-dark .td-insert .ko { color: #F0E6EA !important; }
  body.theme-dark .td-q + .td-q { border-top-color: #2B2F39 !important; }
  body.theme-dark .td-done-btn { background: #1C1E24 !important; border-color: #2B2F39 !important; color: #B9A9AE !important; }
  body.theme-dark .td-done-btn.on { background: rgba(46,158,91,.20) !important; color: #8FE3AC !important; border-color: #2E9E5B !important; }
  /* Тёмная тема — раздел «Чтение» */
  body.theme-dark .rd-intro { background: #23262E !important; }
  body.theme-dark .rd-intro-txt { color: #F0E6EA !important; }
  body.theme-dark .rd-card { background: #15171C !important; border-color: #2B2F39 !important; color: #F0E6EA !important; }
  body.theme-dark .rd-card-emoji, body.theme-dark .rd-head-emoji { background: #23262E !important; }
  body.theme-dark .rd-tab, body.theme-dark .rd-toggle, body.theme-dark .rd-nav-btn { background: #15171C !important; border-color: #2B2F39 !important; }
  body.theme-dark .rd-tab.on, body.theme-dark .rd-toggle.on, body.theme-dark .rd-toggle.playing { background: #2B2F39 !important; }
  body.theme-dark .rd-sent, body.theme-dark .rd-speak-card { background: #15171C !important; border-color: #2B2F39 !important; }
  body.theme-dark .rd-fulltext, body.theme-dark .rd-bd { background: #15171C !important; border-color: #2B2F39 !important; }
  body.theme-dark .rd-fulltext, body.theme-dark .rd-bd-ko, body.theme-dark .rd-fullru { color: #F0E6EA !important; }
  body.theme-dark .rd-fullru { background: #23262E !important; }
  body.theme-dark .rd-fs:hover { background: #2B2F39 !important; }
  body.theme-dark .rd-bd-spk { background: #23262E !important; border-color: #2B2F39 !important; }
  body.theme-dark .rd-sent-ko, body.theme-dark .rd-speak-ko { color: #F0E6EA !important; }
  body.theme-dark .rd-sent-play { background: #23262E !important; border-color: #2B2F39 !important; }
  body.theme-dark .rd-word { background: #23262E !important; color: #F0E6EA !important; }
  body.theme-dark .rd-word.saved { background: rgba(var(--rose-rgb), .26) !important; border-color: var(--coral) !important; }
  body.theme-dark .rd-bd-save { background: #23262E !important; border-color: #2B2F39 !important; }
  body.theme-dark .rd-speak-play { background: #2B2F39 !important; }
  /* Тёмная тема — Курс */
  body.theme-dark .kc-intro { background: #23262E !important; }
  body.theme-dark .kc-intro-txt { color: #F0E6EA !important; }
  body.theme-dark .kc-card, body.theme-dark .kc-gram, body.theme-dark .kc-q, body.theme-dark .kc-word,
  body.theme-dark .kc-tab, body.theme-dark .kc-dlg-bubble, body.theme-dark .kc-chip { background: #15171C !important; border-color: #2B2F39 !important; color: #F0E6EA !important; }
  body.theme-dark .kc-card-emoji, body.theme-dark .kc-ex, body.theme-dark .kc-dlg-b .kc-dlg-bubble, body.theme-dark .kc-tab.on { background: #23262E !important; }
  body.theme-dark .kc-card-title, body.theme-dark .kc-word-ko, body.theme-dark .kc-q-text, body.theme-dark .kc-ex .ko, body.theme-dark .kc-word-ru, body.theme-dark .kc-dlg-bubble .ko { color: #F0E6EA !important; }
  body.theme-dark .kc-opt { background: #1B1E24 !important; border-color: #2B2F39 !important; color: #F0E6EA !important; }
  body.theme-dark .kc-explain { background: #23262E !important; color: #F0E6EA !important; }
  body.theme-dark .kc-hw-banner { background: #15171C !important; }
  /* Кнопки частей экзамена в тёмной: зелёный/золотой осветляем (читаемо на #1E1F23).
     읽기 берёт цвет из токенов (--coral→синий), отдельный оверрайд не нужен. */
  body.theme-dark .topik-part-listen { color: #9FD0A6; border-color: rgba(127,176,138,.4);
    background: linear-gradient(135deg, rgba(127,176,138,.18), rgba(127,176,138,.07)); }
  body.theme-dark .topik-part-listen .ko { color: #9FD0A6; }
  body.theme-dark .topik-part-listen:hover { border-color: rgba(127,176,138,.55); box-shadow: 0 9px 20px -10px rgba(127,176,138,.5);
    background: linear-gradient(135deg, rgba(127,176,138,.28), rgba(127,176,138,.12)); }
  body.theme-dark .topik-part-write { color: #DEC988; border-color: rgba(201,169,78,.4);
    background: linear-gradient(135deg, rgba(201,169,78,.18), rgba(201,169,78,.07)); }
  body.theme-dark .topik-part-write .ko { color: #DEC988; }
  body.theme-dark .topik-part-write:hover { border-color: rgba(201,169,78,.55); box-shadow: 0 9px 20px -10px rgba(201,169,78,.5);
    background: linear-gradient(135deg, rgba(201,169,78,.28), rgba(201,169,78,.12)); }
  body.theme-dark .feed-card-rose { background: #262A35 !important; }
  body.theme-dark .feed-card-night { background: #1E2026 !important; border-color: #121212 !important; box-shadow: 0 var(--duo-lip) 0 #121212 !important; }
  body.theme-dark .feed-card-dark { background: #2E3A52 !important; border-color: #26304A !important; box-shadow: 0 var(--duo-lip) 0 #26304A !important; }
  body.theme-dark .placeholder-img { background: #1B1C1F; }
  body.theme-dark .lesson-tile.locked { background: #18191C !important; border-color: #2B2F39 !important; box-shadow: 0 var(--duo-lip) 0 #2B2F39 !important; }
  body.theme-dark .hangul-key.vow-active { background: #3A455C; }
  body.theme-dark .ach-skeleton { background: #222631; }
  body.theme-dark .ko-quote { background: #222631; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
  /* Фокус-кольцо: дуга одним цветом (SVG-градиент гасим одинаковыми стопами) */
  body.theme-dark .focus-ring .bg { stroke: rgba(231,235,244,.10); }
  body.theme-dark #focusGrad stop:first-child { stop-color: var(--dk-fill); }
  body.theme-dark #focusGrad stop:last-child  { stop-color: var(--dk-fill); }
  /* Инлайновые градиенты из светлой темы: в тёмной — сплошной тёмно-синий
     с белым текстом (или ровная тёмная поверхность для blush/petal-пар). */
  body.theme-dark [style*="var(--gold), var(--coral)"],
  body.theme-dark [style*="var(--coral), var(--gold)"],
  body.theme-dark [style*="var(--coral),var(--gold)"],
  body.theme-dark [style*="var(--rose), var(--gold)"],
  body.theme-dark [style*="var(--coral), var(--rose)"] { background: var(--dk-fill-deep) !important; color: #F2F5FA !important; }
  body.theme-dark [style*="var(--berry), var(--coral)"] { background: var(--dk-surf-2) !important; color: #F2F5FA !important; }
  body.theme-dark [style*="var(--blush), var(--petal)"],
  body.theme-dark [style*="var(--blush), var(--rose)"],
  body.theme-dark [style*="var(--blush), var(--paper)"],
  body.theme-dark [style*="var(--blush), var(--card)"] { background: var(--blush) !important; }
  body.theme-dark [style*="var(--card), var(--paper)"] { background: var(--card) !important; }
  /* Зачистка оставшихся градиентов классов: тёмная тема = сплошные цвета */
  body.theme-dark .topik-entry { background: var(--dk-surf-2); box-shadow: 0 10px 26px -10px rgba(0,0,0,.5); }
  body.theme-dark .topik-exam-card { background: var(--dk-surf-2); box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
  body.theme-dark .aplayer-play { background: var(--dk-fill-deep); }
  body.theme-dark .flashcard-back { background: var(--dk-surf-2); }
  body.theme-dark .game-card-kpop { background: var(--dk-surf) !important; }
  body.theme-dark .btn-mic.mic-listening { background: var(--dk-fill-deep); }
  body.theme-dark .progress > i { background: var(--duo-coral) !important; }
  body.theme-dark .progress-segments > span.done { background: var(--dk-fill); }
  body.theme-dark .profile-nav-badge { background: var(--dk-fill-deep); }
  body.theme-dark .gcv-emoji-icon { background: var(--blush); }
  body.theme-dark .home-greet-avatar { background: var(--blush); }
  body.theme-dark .continue-chip { background: rgba(var(--accent-rgb),.10); }
  body.theme-dark .wxc-bar { background: var(--dk-fill); }
  body.theme-dark .sidenav .nav-item.active { background: rgba(var(--accent-rgb),.14); }
  body.theme-dark .nav-item.active i { background: rgba(var(--accent-rgb),.14); }
  body.theme-dark .section-head .rule { background: rgba(var(--rose-rgb),.45); }
  body.theme-dark .chat-body { background: var(--linen); }
  /* ЧАТ, тёмная тема: попап входящего сообщения был светлым со светлым текстом —
     нечитабельно. Тёмная карточка + видимые рамки/тени. */
  body.theme-dark .chat-popup {
    background: rgba(30,31,35,.97);
    border-color: var(--line-strong);
    box-shadow: 0 14px 36px -10px rgba(0,0,0,.65);
  }
  body.theme-dark .chat-day-label span { background: rgba(231,235,244,.10); color: var(--text2); }
  body.theme-dark .chat-system span { background: rgba(231,235,244,.10); color: var(--text2); }
  body.theme-dark .chat-group-tag { border-color: var(--card); }
  body.theme-dark .chat-bubble.theirs { background: #23252B; color: var(--ink); }
  body.theme-dark .chat-bubble.theirs .chat-react-chip { background: #2B2F39; }
  body.theme-dark .chat-scroll-fab { box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); }
  body.theme-dark .chat-tick.read { color: #9FE8FF; }
  /* Имена отправителей в группах: светлые варианты для тёмных пузырей */
  body.theme-dark .chat-sender-name.nc-0 { color: #FF9A92; }
  body.theme-dark .chat-sender-name.nc-1 { color: #FFC078; }
  body.theme-dark .chat-sender-name.nc-2 { color: #C3ABFF; }
  body.theme-dark .chat-sender-name.nc-3 { color: #8FD89C; }
  body.theme-dark .chat-sender-name.nc-4 { color: #7FDCEE; }
  body.theme-dark .chat-sender-name.nc-5 { color: #93B5FF; }
  body.theme-dark .chat-sender-name.nc-6 { color: #FF9FC8; }
  /* Тарифы, тёмная тема: сплошные тёмные поверхности, без градиентов */
  body.theme-dark .plan-page { background: var(--linen); }
  body.theme-dark .plan-card { background: var(--card); }
  body.theme-dark .plan-profile-card.plan-profile-paid { background: var(--dk-surf); border-color: var(--rose); }
  body.theme-dark .plan-card.plan-featured { box-shadow: 0 14px 36px -14px rgba(0,0,0,.55); }
  body.theme-dark .plan-promo { background: rgba(201,169,78,.12); border-color: rgba(201,169,78,.4); }
  /* WCAG AA: мелкие цветные метки — тонированный фон + светлый текст,
     вместо белого текста на светлых акцентах. !important перебивает duo-слой. */
  body.theme-dark .chip-coral { background: rgba(var(--accent-rgb),.16) !important; color: var(--dk-ink) !important; border-color: rgba(var(--accent-rgb),.35) !important; box-shadow: none !important; }
  body.theme-dark .chip-gold  { background: rgba(201,169,78,.16) !important;  color: #DCC788 !important; border-color: rgba(201,169,78,.35) !important; }
  body.theme-dark .chip-sage  { background: rgba(143,201,138,.14) !important; color: #A9D4B0 !important; border-color: rgba(143,201,138,.35) !important; }
  body.theme-dark .chip-berry { background: rgba(143,167,222,.16) !important; color: #BBCBF1 !important; border-color: rgba(143,167,222,.35) !important; }
  body.theme-dark .chip-blush { background: rgba(231,235,244,.08) !important; color: #C7CEDD !important; border-color: rgba(231,235,244,.18) !important; }
  body.theme-dark .btn-ghost  { color: var(--dk-ink) !important; }
  body.theme-dark .btn-ghost:hover { color: var(--dk-ink) !important; filter: brightness(1.14); }
  body.theme-dark .page-eyebrow { color: var(--plum) !important; }
  body.theme-dark .tile-eyebrow { color: #F2F5FA !important; }
  body.theme-dark .rom { color: #F2F5FA; opacity: .96; }
  /* Золотые кнопки: в тьме фон тёмное золото — текст светлый (5.0:1) */
  body.theme-dark .btn-gold, body.theme-dark .btn-sage { color: #F2F5FA !important; }
  /* Замок закрытой плитки: берри-цвет был невидим на #18191C (1.1:1) → 4.6:1 */
  body.theme-dark .lesson-tile.locked,
  body.theme-dark .lesson-tile.locked .tile-main { color: rgba(231,235,244,.50) !important; }

  /* Respect "reduce motion": calm the petals/confetti/pulses for users who ask. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
    #ambient-petals, #intro-petals, .petal,
    .path-deco, .lesson-bear, .duo-mascot { display: none !important; }
    .progress-segments > span.current { animation: none !important; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     МОБИЛЬНЫЕ ФИКСЫ ГОРИЗОНТАЛЬНОГО OVERFLOW (аудит headless-рендером 2026-06-26)
     Подтверждено Chrome на 375/360/320px. Корень: грид/флекс-элементы с
     дефолтным min-width:auto не сжимались до ячейки и распирались длинным
     неразрывным контентом (e-mail/URL) — контент обрезался краем .app-shell
     (overflow:clip). Лечим сжатием элементов и переносом длинных строк.
     ═══════════════════════════════════════════════════════════════════ */
  /* Любой ряд stagger-списка (чаты, лента, люди) — грид/флекс-элемент:
     min-width:0 даёт ему сжаться до трека, иначе длинный e-mail распирает строку. */
  .stagger-in > * { min-width: 0; }
  /* Строка списка чатов/людей (Общение): была 431px при вьюпорте 375px. */
  .chat-list-row { min-width: 0; }
  /* Карточка ленты: длинные ссылки/почты в посте переносим, карточку сжимаем. */
  .feed-card { min-width: 0; overflow-wrap: anywhere; }
  /* Вариант ответа экзамена TOPIK: длинный неразрывный токен (дата/число/URL). */
  .exam-opt-tx { min-width: 0; overflow-wrap: anywhere; }
  /* Картинки (в т.ч. загруженные ученицами в ленту/чат) не распирают контейнер. */
  img, video { max-width: 100%; }
  /* Бренд-тэглайн «KOREAN WITH MADIE»: на узких экранах ужимаем трекинг,
     как крайняя мера — перенос (flex-wrap), чтобы не вылезал за край. */
  .intro-tagline { flex-wrap: wrap; }
  @media (max-width: 384px) {
    .intro-tagline { gap: 8px; }
    .intro-tagline .label { letter-spacing: 0.18em; }
  }
  /* Клавиатура хангыля: на очень узких экранах (≤360px) уменьшаем зазор,
     чтобы 5 клавиш гарантированно влезали без обрезки по краю. */
  @media (max-width: 360px) {
    #consonants-grid, #vowels-grid { gap: 6px !important; }
  }
  /* Инлайновые SVG-графики в заданиях экзаменов TOPIK (쓰기 53, 듣기/읽기):
     адаптивная ширина, иначе фикс. <svg width="460"> уезжает за край на мобиле. */
  .exam-passage svg, .td-passage svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }

  /* ═══════════════════════ УЧЕБНИК (교과서) ═══════════════════════ */
  /* Вход на «Уроках» — широкая, но КОМПАКТНАЯ карточка внизу bento (меньше больших AI/ТОПИК) */
  .lessons-bento .be-book { grid-column: 1 / -1; padding: 12px 16px; gap: 12px; }
  .lessons-bento .be-book .topik-entry-badge { font-size: 13px; padding: 8px 11px; }
  .lessons-bento .be-book .topik-entry-title { font-size: 14px; }
  .lessons-bento .be-book .topik-entry-sub { font-size: 11px; }
  .topik-entry.be-book { background: linear-gradient(135deg, #C98A3C 0%, #B5536A 100%); box-shadow: 0 14px 34px -10px rgba(181,83,106,.5); }
  .topik-entry.be-book:hover { box-shadow: 0 20px 44px -12px rgba(181,83,106,.6); }
  body.theme-dark .topik-entry.be-book { background: linear-gradient(135deg, #7A5A2E 0%, #6E3548 100%); }

  #textbook-hub { --tb-acc: var(--coral); }
  .tb-acc-berry { --tb-acc: var(--berry); }
  .tb-acc-coral { --tb-acc: var(--coral); }
  .tb-empty { text-align: center; color: var(--soft); padding: 48px 20px; line-height: 1.7; }

  /* Обложка */
  .tb-cover {
    text-align: center; border-radius: 26px; padding: 40px 24px 28px; color: #fff;
    background: linear-gradient(150deg, var(--berry) 0%, var(--coral) 100%);
    box-shadow: 0 22px 50px -18px rgba(92,42,51,.6); position: relative; overflow: hidden;
  }
  .tb-cover-flower { font-size: 40px; }
  .tb-cover-brand { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-top: 8px; }
  .tb-cover-ko { font-size: 50px; font-weight: 800; margin: 10px 0 14px; line-height: 1; }
  .tb-cover-title { font-family: 'Fraunces', Georgia, serif; font-size: 28px; font-weight: 700; line-height: 1.15; }
  .tb-cover-sub { font-size: 13px; opacity: .9; margin-top: 6px; }
  .tb-cover-start {
    margin-top: 24px; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    background: #fff; color: var(--berry); border: none; border-radius: 16px;
    font-family: inherit; font-weight: 700; font-size: 15px; padding: 14px 22px;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
  }
  .tb-cover-start:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,.4); }
  .tb-cover-start:active { transform: scale(.98); }
  .tb-print-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
    color: #fff; opacity: .92; font-size: 12.5px; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(255,255,255,.4); border-radius: 12px; padding: 9px 14px; background: rgba(255,255,255,.12);
  }
  .tb-print-link:hover { opacity: 1; background: rgba(255,255,255,.2); }

  /* Полка книг (выбор книги) */
  .tb-shelf-hero { text-align: center; padding: 6px 0 18px; }
  .tb-shelf-flower { font-size: 38px; }
  .tb-shelf-brand { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); font-weight: 700; margin-top: 6px; }
  .tb-shelf-title { font-family: 'Fraunces', Georgia, serif; font-size: 28px; color: var(--berry); margin: 4px 0 2px; }
  .tb-shelf-sub { font-size: 13px; color: var(--soft); }
  .tb-shelf-list { display: flex; flex-direction: column; gap: 13px; }
  .tb-shelf-book {
    width: 100%; display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: left;
    font-family: inherit; border: none; border-radius: 20px; padding: 16px; color: #fff;
    box-shadow: 0 14px 32px -12px rgba(92,42,51,.5); transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
  }
  .tb-shelf-book:hover { transform: translateY(-3px); box-shadow: 0 20px 42px -14px rgba(92,42,51,.6); }
  .tb-shelf-book:active { transform: scale(.99); }
  .tb-shelf-b1 { background: linear-gradient(135deg, var(--berry) 0%, var(--coral) 100%); }
  .tb-shelf-b2 { background: linear-gradient(135deg, #4A5A93 0%, #6E5BA6 100%); box-shadow: 0 14px 32px -12px rgba(60,50,110,.5); }
  body.theme-dark .tb-shelf-b1 { background: linear-gradient(135deg, #3F3050 0%, #6E3B46 100%); }
  body.theme-dark .tb-shelf-b2 { background: linear-gradient(135deg, #2E3A66 0%, #463A6B 100%); }
  .tb-shelf-spine {
    flex-shrink: 0; width: 52px; height: 66px; border-radius: 9px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
  }
  .tb-shelf-spine b { font-family: 'Noto Sans KR', sans-serif; font-size: 11px; font-weight: 500; opacity: .92; }
  .tb-shelf-spine span { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 26px; line-height: 1; }
  .tb-shelf-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .tb-shelf-t { font-weight: 700; font-size: 16px; }
  .tb-shelf-s { font-size: 12px; opacity: .92; }
  .tb-shelf-meta { font-size: 11px; opacity: .8; margin-top: 1px; }
  .tb-shelf-arrow { opacity: .85; flex-shrink: 0; }

  /* Оглавление */
  .tb-toc-head { margin-bottom: 14px; }
  .tb-toc-eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-top: 10px; }
  .tb-toc-title { font-family: 'Fraunces', Georgia, serif; font-size: 24px; color: var(--berry); margin: 2px 0 0; }
  .tb-chip-back {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: var(--blush); color: var(--berry); border: none; border-radius: 11px;
    font-family: inherit; font-weight: 600; font-size: 12.5px; padding: 8px 12px;
  }
  .tb-chip-back:hover { filter: brightness(.97); }
  .tb-toc-list { display: flex; flex-direction: column; gap: 11px; }
  .tb-toc-item {
    width: 100%; display: flex; align-items: center; gap: 13px; cursor: pointer; text-align: left;
    background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 14px 16px;
    font-family: inherit; transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-base), box-shadow var(--t-base);
  }
  .tb-toc-item:hover { transform: translateY(-2px); border-color: var(--tb-acc); box-shadow: 0 12px 26px -14px rgba(92,42,51,.4); }
  .tb-toc-item:active { transform: scale(.99); }
  .tb-toc-no {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--tb-acc); color: #fff; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 18px;
  }
  .tb-toc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .tb-toc-t { font-weight: 700; font-size: 15px; color: var(--ink); }
  .tb-toc-s { font-size: 11.5px; color: var(--soft); }
  .tb-toc-emoji { font-size: 22px; flex-shrink: 0; }
  .tb-toc-arrow { color: var(--soft); flex-shrink: 0; }
  .tb-print-wide { display: flex; justify-content: center; margin-top: 18px; color: var(--berry); background: var(--blush); border-color: transparent; }
  .tb-print-wide:hover { background: var(--rose); }

  /* Страница */
  .tb-page-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
  .tb-page-loc { font-size: 11.5px; color: var(--soft); font-weight: 600; text-align: right; min-width: 0; }
  .tb-blocks { display: flex; flex-direction: column; gap: 20px; }
  .tb-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; }
  .tb-pg-btn {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; cursor: pointer;
    background: var(--card); border: 1.5px solid var(--line); color: var(--berry); font-size: 16px;
    display: grid; place-items: center; transition: transform var(--t-fast) var(--ease-spring), background var(--t-base);
  }
  .tb-pg-btn.tb-pg-next { background: var(--tb-acc); color: #fff; border-color: transparent; }
  .tb-pg-btn:hover:not(:disabled) { transform: translateY(-2px); }
  .tb-pg-btn:active:not(:disabled) { transform: scale(.96); }
  .tb-pg-btn:disabled { opacity: .35; cursor: default; }
  .tb-dots { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; flex: 1; }
  .tb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: all var(--t-base); }
  .tb-dot.on { background: var(--tb-acc); width: 22px; border-radius: 5px; }

  /* Вступление главы */
  .tb-intro { text-align: center; padding: 8px 4px 6px; }
  .tb-intro-emoji { font-size: 46px; }
  .tb-intro-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tb-acc); font-weight: 700; margin-top: 10px; }
  .tb-intro-title { font-family: 'Fraunces', Georgia, serif; font-size: 30px; color: var(--berry); margin: 4px 0 10px; }
  .tb-intro-lead { font-size: 14px; line-height: 1.65; color: var(--ink); max-width: 560px; margin: 0 auto; text-align: left; }
  .tb-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
  .tb-goal { display: flex; align-items: center; gap: 9px; background: var(--blush); border-radius: 13px; padding: 11px 13px; font-size: 12.5px; color: var(--berry); font-weight: 600; text-align: left; }
  .tb-goal-i { font-size: 18px; flex-shrink: 0; }

  /* Обучающая плашка */
  .tb-note { border-radius: 16px; padding: 15px 17px; background: var(--card); border: 1.5px solid var(--line); border-left: 5px solid var(--tb-acc); }
  .tb-note-rule { border-left-color: var(--coral); background: linear-gradient(180deg, rgba(188,75,94,.06), transparent); }
  .tb-note-tip { border-left-color: var(--gold); background: linear-gradient(180deg, rgba(201,165,92,.08), transparent); }
  .tb-note-warn { border-left-color: #E0834A; }
  .tb-note-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
  .tb-note-ico { font-size: 17px; }
  .tb-note-title { font-weight: 700; font-size: 14px; color: var(--berry); }
  .tb-note-body { font-size: 13.5px; line-height: 1.6; color: var(--ink); }
  .tb-note-body .ko { font-weight: 600; }

  /* Буквы */
  .tb-sec-head { margin-bottom: 12px; }
  .tb-sec-title { font-size: 17px; font-weight: 700; color: var(--berry); margin: 0; }
  .tb-sec-sub { font-size: 12.5px; color: var(--soft); line-height: 1.5; margin: 4px 0 0; }
  .tb-letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
  .tb-letter {
    background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
  }
  .tb-stroke {
    width: 100%; max-width: 132px; aspect-ratio: 1; border-radius: 14px;
    background: linear-gradient(160deg, #FFF7F1, #FBEDE6); display: grid; place-items: center; overflow: hidden;
  }
  .tb-svg { width: 100%; height: 100%; display: block; }
  .tb-grid { stroke: #E7D6CC; stroke-width: 1; stroke-dasharray: 3 4; }
  .tb-ghost { font-size: 72px; fill: #EBDAD1; font-weight: 700; }
  .tb-pth { stroke: var(--tb-acc); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
  .tb-num circle { fill: #fff; stroke: var(--tb-acc); stroke-width: 1.6; }
  .tb-num text { font-size: 11px; font-weight: 700; fill: var(--tb-acc); font-family: system-ui, sans-serif; }
  .tb-arrow { fill: var(--tb-acc); }
  .tb-glyph-big { font-size: 64px; color: var(--berry); font-weight: 700; }
  .tb-letter-info { display: flex; align-items: center; gap: 11px; width: 100%; justify-content: center; }
  .tb-glyph {
    font-size: 34px; line-height: 1; color: var(--berry); font-weight: 700; cursor: pointer;
    background: none; border: none; padding: 2px 4px; border-radius: 10px; transition: transform var(--t-fast) var(--ease-spring), background var(--t-base);
  }
  .tb-glyph:hover { background: var(--blush); transform: scale(1.06); }
  .tb-glyph:active { transform: scale(.95); }
  .tb-letter-meta { min-width: 0; }
  .tb-letter-name { font-size: 13px; font-weight: 700; color: var(--ink); }
  .tb-letter-base { font-size: 11px; color: var(--soft); font-weight: 600; }
  .tb-letter-rom { font-size: 11px; color: var(--soft); }
  .tb-write-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit;
    background: var(--blush); color: var(--berry); border: none; border-radius: 10px; padding: 7px 11px; font-size: 11.5px; font-weight: 600;
  }
  .tb-write-btn:hover { background: var(--rose); }
  .tb-write-btn:active { transform: scale(.97); }
  .tb-letter-ex {
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-family: inherit;
    background: var(--cream); border: 1px dashed var(--line); border-radius: 12px; padding: 8px 6px; transition: border-color var(--t-base), background var(--t-base);
  }
  .tb-letter-ex:hover { border-color: var(--tb-acc); background: var(--blush); }
  .tb-ex-emoji { font-size: 20px; }
  .tb-ex-w { font-size: 17px; font-weight: 700; color: var(--berry); }
  .tb-ex-tr { font-size: 10.5px; color: var(--soft); text-align: center; line-height: 1.3; }

  /* Составные гласные */
  .tb-combos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
  .tb-combo { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
  .tb-combo .tb-glyph { font-size: 42px; }
  .tb-combo-formula { font-size: 14px; color: var(--ink); font-weight: 600; }
  .tb-combo-formula .ko { color: var(--coral); }

  /* Сборка слога */
  .tb-syls { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 4px; }
  .tb-syl { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; font-family: inherit; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 8px; transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-base); }
  .tb-syl:hover { transform: translateY(-2px); border-color: var(--tb-acc); }
  .tb-syl:active { transform: scale(.98); }
  .tb-syl-parts { font-size: 16px; color: var(--soft); display: flex; align-items: center; gap: 2px; }
  .tb-syl-plus { color: var(--tb-acc); margin: 0 3px; font-weight: 700; }
  .tb-syl-eq { color: var(--soft); font-size: 13px; }
  .tb-syl-res { font-size: 32px; font-weight: 700; color: var(--berry); line-height: 1; }
  .tb-syl-tr { font-size: 11px; color: var(--soft); }

  /* Таблица */
  .tb-table-wrap { overflow-x: auto; border-radius: 14px; border: 1.5px solid var(--line); }
  .tb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .tb-table th { background: var(--tb-acc); color: #fff; font-weight: 700; padding: 9px 11px; text-align: left; font-size: 12px; }
  .tb-table td { padding: 9px 11px; border-top: 1px solid var(--line); color: var(--ink); }
  .tb-table td .ko { font-size: 16px; font-weight: 600; color: var(--berry); }
  .tb-table tbody tr:nth-child(even) { background: var(--cream); }

  /* Упражнения */
  .tb-ex { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 16px; }
  .tb-ex-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .tb-ex-badge { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--tb-acc); border-radius: 7px; padding: 4px 8px; }
  .tb-ex-title { font-size: 15px; font-weight: 700; color: var(--berry); margin: 0; }
  .tb-ex-instr { font-size: 12.5px; color: var(--soft); margin: 0 0 12px; }
  .tb-q { margin-top: 14px; }
  .tb-q-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
  .tb-q-n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: var(--blush); color: var(--berry); font-weight: 700; font-size: 12px; display: grid; place-items: center; }
  .tb-q-text { font-size: 20px; font-weight: 700; color: var(--ink); }
  .tb-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
  .tb-opt {
    cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
    background: var(--cream); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 8px;
    transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-base), background var(--t-base);
  }
  .tb-opt:hover:not(:disabled) { border-color: var(--tb-acc); transform: translateY(-1px); }
  .tb-opt:active:not(:disabled) { transform: scale(.97); }
  .tb-opt.ok { background: var(--sage); border-color: var(--sage); color: #fff; }
  .tb-opt.no { background: #F6DDDD; border-color: #E0A3A3; color: #9B3B3B; opacity: .8; }
  .tb-opt:disabled { cursor: default; }

  .tb-match { display: flex; gap: 22px; }
  .tb-match-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
  .tb-mt {
    cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
    background: var(--cream); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 10px; text-align: center;
    transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-base), background var(--t-base);
  }
  .tb-mt-l { font-size: 22px; font-weight: 700; color: var(--berry); }
  .tb-mt:hover:not(:disabled) { border-color: var(--tb-acc); }
  .tb-mt.sel { border-color: var(--tb-acc); background: var(--blush); box-shadow: 0 0 0 3px rgba(188,75,94,.18); }
  .tb-mt.done { background: var(--sage); border-color: var(--sage); color: #fff; cursor: default; }
  .tb-mt.done.tb-mt-l { color: #fff; }
  .tb-mt.shake { animation: tbShake .4s; border-color: #E0A3A3; }
  @keyframes tbShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }

  /* Домашка */
  .tb-hw { background: linear-gradient(170deg, rgba(201,165,92,.12), rgba(188,75,94,.06)); border: 1.5px solid var(--line); border-radius: 18px; padding: 16px 18px; }
  .tb-hw-head { display: flex; align-items: center; gap: 10px; }
  .tb-hw-ico { font-size: 22px; }
  .tb-hw-title { font-size: 16px; font-weight: 700; color: var(--berry); margin: 0; }
  .tb-hw-intro { font-size: 12.5px; color: var(--soft); margin: 6px 0 10px; }
  .tb-hw-list { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 9px; }
  .tb-hw-task { display: flex; }
  .tb-hw-task label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
  .tb-hw-cb { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--coral); cursor: pointer; }
  .tb-hw-note { margin-top: 12px; font-size: 12.5px; color: var(--berry); background: var(--card); border-radius: 12px; padding: 10px 12px; }

  /* Словарь (карточки слов) */
  .tb-vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .tb-voc { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; font-family: inherit; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 13px 10px; transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-base); }
  .tb-voc:hover { transform: translateY(-2px); border-color: var(--tb-acc); }
  .tb-voc:active { transform: scale(.98); }
  .tb-voc-emoji { font-size: 26px; }
  .tb-voc-ko { font-size: 20px; font-weight: 700; color: var(--berry); }
  .tb-voc-ru { font-size: 12.5px; color: var(--ink); text-align: center; line-height: 1.25; }
  .tb-voc-tr { font-size: 10.5px; color: var(--soft); }

  /* Грамматика (правило + примеры) */
  .tb-gram { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 16px; border-top: 4px solid var(--tb-acc); }
  .tb-gram-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
  .tb-gram-badge { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--tb-acc); border-radius: 7px; padding: 4px 8px; }
  .tb-gram-title { font-size: 16px; color: var(--berry); margin: 0; font-weight: 700; }
  .tb-gram-ko { font-size: 15px; color: var(--coral); font-weight: 700; }
  .tb-gram-rule { font-size: 13.5px; line-height: 1.6; color: var(--ink); }
  .tb-gram-rule .ko { font-weight: 600; }
  .tb-gram-ex { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
  .tb-gex { display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: inherit; text-align: left; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; transition: border-color var(--t-base), background var(--t-base); }
  .tb-gex:hover { border-color: var(--tb-acc); background: var(--blush); }
  .tb-gex-ko { font-size: 16px; font-weight: 600; color: var(--berry); flex-shrink: 0; }
  .tb-gex-ru { font-size: 12px; color: var(--soft); flex: 1; }
  .tb-gex-spk { color: var(--tb-acc); font-size: 13px; flex-shrink: 0; }

  /* Диалог */
  .tb-dialog { display: flex; flex-direction: column; gap: 10px; }
  .tb-dl { display: flex; gap: 9px; align-items: flex-end; cursor: pointer; font-family: inherit; background: none; border: none; padding: 0; text-align: left; width: 100%; }
  .tb-dl-b { flex-direction: row-reverse; text-align: right; }
  .tb-dl-av { font-size: 24px; flex-shrink: 0; }
  .tb-dl-bub { display: flex; flex-direction: column; gap: 2px; background: var(--blush); border-radius: 16px; padding: 10px 14px; max-width: 82%; }
  .tb-dl-a .tb-dl-bub { border-bottom-left-radius: 5px; }
  .tb-dl-b .tb-dl-bub { background: var(--tb-acc); border-bottom-right-radius: 5px; }
  .tb-dl-name { display: block; font-size: 10.5px; font-weight: 700; color: var(--coral); opacity: .85; margin-bottom: 1px; }
  .tb-dl-b .tb-dl-name { color: rgba(255,255,255,.92); }
  .tb-dl-ko { font-size: 16px; font-weight: 600; color: var(--berry); }
  .tb-dl-b .tb-dl-ko { color: #fff; }
  .tb-dl-ru { font-size: 11.5px; color: var(--soft); }
  .tb-dl-b .tb-dl-ru { color: rgba(255,255,255,.85); }
  .tb-dl:hover .tb-dl-bub { filter: brightness(.98); }

  /* Полезные фразы */
  .tb-phrases { display: flex; flex-direction: column; gap: 8px; }
  .tb-phr { display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: inherit; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 13px; padding: 11px 13px; transition: border-color var(--t-base); }
  .tb-phr:hover { border-color: var(--tb-acc); }
  .tb-phr-ko { font-size: 16px; font-weight: 600; color: var(--berry); flex-shrink: 0; }
  .tb-phr-ru { font-size: 12px; color: var(--soft); flex: 1; }
  .tb-phr-spk { color: var(--tb-acc); flex-shrink: 0; }

  /* Пропуск в задании «вставь» */
  .tb-q-ru { font-size: 12px; color: var(--soft); margin: -2px 0 7px 31px; }
  .tb-blank { display: inline-block; min-width: 30px; border-bottom: 2.5px solid var(--tb-acc); text-align: center; color: var(--tb-acc); font-weight: 700; padding: 0 4px; }
  .tb-blank.filled { border-bottom-color: var(--sage); color: var(--sage); }

  /* Задание «слушай и выбери» (озвучка через playSyllable) */
  .tb-listen-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 700; color: #fff; background: var(--tb-acc); border: none;
    border-radius: 12px; padding: 9px 16px; transition: transform var(--t-fast) var(--ease-spring);
  }
  .tb-listen-btn:hover { transform: translateY(-1px); }
  .tb-listen-btn:active { transform: scale(.96); }
  .tb-listen-btn i { font-size: 12px; }

  /* Задание «собери предложение» (тап слово → строка сборки) */
  .tb-q-text-ru { font-size: 14px; font-weight: 600; color: var(--ink); }
  .tb-order-slot {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 46px; margin: 10px 0;
    padding: 8px; border: 2px dashed var(--line); border-radius: 12px; background: var(--cream);
    transition: border-color var(--t-base), background var(--t-base);
  }
  .tb-order-slot.ok { border-color: var(--sage); border-style: solid; background: rgba(141,184,140,.14); }
  .tb-order-slot.wrong { border-color: #E0A3A3; animation: tbShake .4s; }
  .tb-order-bank { display: flex; flex-wrap: wrap; gap: 8px; }
  .tb-word {
    cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--berry);
    background: var(--card); border: 1.5px solid var(--line); border-radius: 11px; padding: 9px 14px;
    transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-base), background var(--t-base);
  }
  .tb-word:hover:not(:disabled) { border-color: var(--tb-acc); transform: translateY(-1px); }
  .tb-word.placed { background: var(--blush); }
  .tb-word:disabled { cursor: default; }
  .tb-order-slot.ok .tb-word { background: var(--sage); border-color: var(--sage); color: #fff; }

  /* ── Игры: кроссворд / филворд / анаграмма ── */
  .tb-game-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 13px; }
  .tb-game-btn { cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; border: none; border-radius: 11px; padding: 9px 17px; color: #fff; background: var(--tb-acc); transition: transform var(--t-fast) var(--ease-spring), filter var(--t-base); }
  .tb-game-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
  .tb-game-btn:active { transform: scale(.97); }
  .tb-game-btn-ghost { background: transparent; color: var(--berry); border: 1.5px solid var(--line); }
  .tb-game-msg { font-size: 12px; color: var(--soft); }
  .tb-game-msg.good { color: var(--sage); font-weight: 700; }

  .tb-cw-wrap { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-top: 11px; }
  .tb-cw-grid { display: grid; gap: 0; }
  .tb-cw-cell { position: relative; width: 34px; height: 34px; border: 1px solid var(--soft); background: var(--card); }
  .tb-cw-gap { width: 34px; height: 34px; }
  .tb-cw-num { position: absolute; top: 1px; left: 2px; font-size: 8px; line-height: 1; color: var(--tb-acc); font-weight: 800; z-index: 1; pointer-events: none; }
  .tb-cw-in { width: 100%; height: 100%; border: none; background: transparent; text-align: center; font-size: 18px; font-weight: 700; color: var(--berry); padding: 0; }
  .tb-cw-in:focus { outline: 2px solid var(--tb-acc); outline-offset: -2px; background: var(--cream); }
  .tb-cw-in.ok { color: var(--sage); background: rgba(141,184,140,.18); }
  .tb-cw-in.bad { color: var(--bad-ink); background: rgba(224,107,125,.14); }
  .tb-cw-clues { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 11px; }
  .tb-cw-cl-h { font-weight: 800; color: var(--berry); font-size: 12.5px; margin-bottom: 3px; }
  .tb-cw-clue { font-size: 12px; margin: 2px 0; color: var(--ink); }
  .tb-cw-clue b { color: var(--tb-acc); }
  .tb-cw-bank-h { font-size: 11.5px; color: var(--soft); margin: 12px 0 6px; }
  .tb-cw-bank { display: flex; flex-wrap: wrap; gap: 6px; }
  .tb-cw-key { min-width: 36px; height: 38px; padding: 0 9px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--card); font-size: 18px; font-weight: 700; color: var(--berry); cursor: pointer; transition: transform var(--t-fast) var(--ease-spring), background var(--t-base), border-color var(--t-base); }
  .tb-cw-key:hover { transform: translateY(-1px); border-color: var(--tb-acc); background: var(--cream); }
  .tb-cw-key:active { transform: scale(.94); }

  .tb-ws-grid { display: grid; gap: 3px; max-width: 330px; margin: 11px 0; }
  .tb-ws-cell { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-size: 15px; font-weight: 600; color: var(--berry); cursor: pointer; padding: 0; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
  .tb-ws-cell.mark { background: var(--tb-acc); color: #fff; border-color: var(--tb-acc); }
  .tb-ws-cell.sol { background: rgba(141,184,140,.32); border-color: var(--sage); color: var(--berry); }
  .tb-ws-words { display: flex; flex-wrap: wrap; gap: 6px; }
  .tb-ws-word { border: 1.5px solid var(--line); border-radius: 9px; padding: 5px 10px; background: var(--cream); font-size: 12px; cursor: pointer; font-family: inherit; color: var(--soft); }
  .tb-ws-word .ko { color: var(--berry); font-weight: 700; font-size: 14px; }
  .tb-ws-word.found { opacity: .5; text-decoration: line-through; }

  .tb-ana-row { border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 13px; margin: 9px 0; background: var(--card); }
  .tb-ana-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
  .tb-ana-n { width: 21px; height: 21px; flex-shrink: 0; border-radius: 50%; background: var(--tb-acc); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
  .tb-ana-ru { font-size: 13.5px; color: var(--ink); font-weight: 600; }
  .tb-ana-slot { min-height: 46px; border: 2px dashed var(--line); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 7px; padding: 7px; margin-bottom: 8px; align-items: center; background: var(--cream); transition: border-color var(--t-base), background var(--t-base); }
  .tb-ana-slot.ok { border-style: solid; border-color: var(--sage); background: rgba(141,184,140,.14); }
  .tb-ana-slot.wrong { border-color: #E0A3A3; animation: tbShake .4s; }
  .tb-ana-bank { display: flex; flex-wrap: wrap; gap: 7px; }
  .tb-ana-chip { min-width: 40px; height: 42px; padding: 0 11px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--card); font-size: 19px; font-weight: 700; color: var(--berry); cursor: pointer; transition: transform var(--t-fast) var(--ease-spring), background var(--t-base); }
  .tb-ana-chip:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--tb-acc); }
  .tb-ana-chip.placed { background: var(--blush); }
  .tb-ana-chip:disabled { cursor: default; }
  .tb-ana-slot.ok .tb-ana-chip { background: var(--sage); border-color: var(--sage); color: #fff; }

  /* Адаптив */
  @media (max-width: 384px) {
    .tb-letters, .tb-combos { grid-template-columns: 1fr 1fr; }
    .tb-vocab { grid-template-columns: 1fr 1fr; }
    .tb-goals { gap: 7px; }
    .tb-match { gap: 12px; }
    .tb-cover-title { font-size: 24px; }
    .tb-intro-title { font-size: 25px; }
  }
  @media (min-width: 700px) {
    .tb-letters, .tb-combos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  }

  /* Тёмная тема: базовые токены (--card/--line/--ink/--coral…) уже переопределены
     в body.theme-dark, поэтому правила на них адаптируются сами. Здесь — только
     точечные оверрайды для жёстко заданных СВЕТЛЫХ цветов и для градиентов. */
  body.theme-dark .tb-acc-berry { --tb-acc: var(--coral); }   /* в тёмной --berry≈белый, ломает акцент */
  body.theme-dark .tb-cover { background: linear-gradient(150deg, #2C3358 0%, #3D5288 100%); }
  body.theme-dark .tb-cover-start { background: #E7EBF4; color: #1B1C1F; }
  body.theme-dark .tb-stroke { background: linear-gradient(160deg, #24262E, #1B1C1F); }
  body.theme-dark .tb-grid { stroke: rgba(231,235,244,.14); }
  body.theme-dark .tb-ghost { fill: rgba(231,235,244,.10); }
  body.theme-dark .tb-num circle { fill: #1B1C1F; }
  body.theme-dark .tb-opt, body.theme-dark .tb-mt, body.theme-dark .tb-syl,
  body.theme-dark .tb-letter-ex, body.theme-dark .tb-gex { background: var(--paper); }
  body.theme-dark .tb-opt.no { background: rgba(224,107,125,.18); border-color: var(--bad-line); color: var(--bad-ink); }
  body.theme-dark .tb-opt.ok, body.theme-dark .tb-mt.done { background: var(--sage); border-color: var(--sage); color: #1B1C1F; }
  body.theme-dark .tb-hw-note { background: var(--paper); }