/* ===== ШРИФТ =====
     Inter Display в двух начертаниях, файлы лежат в приложении (fonts/), из сети ничего
     не грузится. Во всех правилах только два веса: 400 (Regular) и 600 (SemiBold). */
  @font-face { font-family:'Inter Display'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/InterDisplay-Regular.woff2') format('woff2'); }
  /* Полужирное это SemiBold (600), а не Bold: жирнее в приложении ничего нет, и <b> тоже даёт 600. */
  @font-face { font-family:'Inter Display'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/InterDisplay-SemiBold.woff2') format('woff2'); }
  /* ===== ТОКЕНЫ =====
     Все цвета, отступы, скругления и размеры шрифта берутся отсюда. Значения
     согласованы с владельцем 23 сентября 2026 года (work/фронт/Аудит стилей и токены.md).
     Переменные, которые выставляет код, живут не здесь: --cat (цвет части речи),
     --tf-color/--tf-width/--tf-radius и --hold (рамка касания), --label и
     --caption-scale (подпись карточки). Тёмная тема — второй набор значений в конце файла. */
  :root {
    --bg:#ffffff;            /* фон экрана */
    --bg-muted:#f5f5f5;      /* фон панели, кнопок второго плана, чипов */
    --bg-subtle:#fafafa;     /* поле загрузки фото и подобное */
    --surface:#ffffff;       /* белые поверхности: строка фразы, кнопки столбца, секции панели */
    --card:#ffffff;          /* карточка ребёнка: остаётся белой в любой теме */
    --card-ink:#444444;      /* подпись на карточке */
    --board-bg:#ececec;      /* серое поле доски: светлее, чтобы цветные карточки читались контрастнее */
    --line:#e0e0e0;          /* тонкие рамки и разделители */
    --line-strong:#c4c4c4;   /* рамки папок, выключенные переключатели */
    --ink:#222222;           /* основной текст */
    --ink-2:#444444;         /* текст второго плана, значки кнопок */
    --ink-muted:#6e6e6e;     /* пояснения */
    --ink-faint:#9a9a9a;     /* подписи групп, пустые состояния */
    --white:#ffffff;         /* текст на цветном фоне, всегда белый */
    --accent:#ffd900;        /* жёлтый акцент */
    --accent-press:#f0cc00;  /* жёлтый нажатый */
    --accent-soft:#fffde6;   /* жёлтая подсветка нажатия и выбора */
    --accent-mid:#fff3c4;    /* жёлтая заливка активной кнопки */
    --accent-ink:#7a5c00;    /* текст на жёлтом фоне */
    --on-accent:#222222;     /* текст и значок на жёлтой кнопке */
    --danger:#e53935;  --danger-soft:#fff0f0;
    --ok:#2e9e4f;      --ok-soft:#e8f5e9;
    --warn:#c9772e;
    --adult:#5b3fbf;         /* ход взрослого */
    --overlay:rgba(0,0,0,.5);
    --toast-bg:#333333;
    --shadow-1:0 1px 3px rgba(0,0,0,.2);
    --shadow-2:0 4px 16px rgba(0,0,0,.25);
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
    --radius-s:12px; --radius-m:24px; --radius-l:32px; --radius-xl:40px;   /* скругления ещё в полтора раза крупнее, кратны 4 (23 сентября 2026) */
    /* Пять размеров шрифта (24 сентября 2026): 12 и 13 слиты в 14, 15 и 17 в 16 */
    --text-2xs:10px; --text-xs:14px; --text-m:16px; --text-xl:20px; --text-2xl:28px;
  }
  /* Мелкие утилиты вместо встроенных стилей в разметке */
  .mt-2 { margin-top:var(--space-2); }
  .mb-4 { margin-bottom:var(--space-4); }
  b, strong { font-weight:600; }
  .form-label-hint { color:var(--line-strong); font-weight:400; }
  .form-label-block { margin-bottom:var(--space-3); display:block; }
  .search-count { padding:var(--space-2) var(--space-3) 0; font-size:var(--text-xs); color:var(--ink-muted); font-weight:600; }
  .confirm-text { font-size:var(--text-m); line-height:1.5; color:var(--ink-2); margin-bottom:var(--space-5); white-space:pre-line; }
  .toast-global { z-index:100; }
  .ui-empty-btn { margin-top:var(--space-4); max-width:260px; }
  /* Погашенная кнопка: одно правило для столбца, полосы правки и поиска */
  .is-off { opacity:.35; pointer-events:none; }
  /* Круглая кнопка-значок 44 px: «‹», «✕», «⋯» во всех шапках и списках */
  .icon-btn { width:44px; height:44px; border-radius:50%; background:var(--bg-muted); border:none; font-size:var(--text-xl); line-height:1; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .icon-btn:active { background:var(--line); }
  .icon-btn .mi { width:24px; height:24px; }
  /* Жёлтые кнопки: текст и значок всегда тёмные, в любой теме */
  #btnSpeak, .edit-done { color:var(--on-accent); }
  #btnSpeak .mi, .edit-done .mi { fill:var(--on-accent); }
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  /* Обводки фокуса нет: клавиатурный доступ убран из продукта до зрелой версии. */
  html, body { height:100%; overflow:hidden; overscroll-behavior:none; }
  body {
    font-family:'Inter Display',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg); color:var(--ink); display:flex; justify-content:center; align-items:center;
    min-height:100vh; overflow:hidden; user-select:none; position:fixed; width:100%; height:100%; touch-action:manipulation; -webkit-text-size-adjust:100%;
  }
  /* Кнопки и поля ввода сами шрифт не наследуют: без этого браузер ставит им
     системный (Arial), и любая кнопка без своего font-family выпадает из Inter Display. */
  button, input, select, textarea { font-family:inherit; }
  /* container-type:size — чтобы раскладка доски могла зависеть от размера экрана
     приложения, а не окна браузера: в режиме ревью экран лежит в рамке устройства. */
  .phone-screen { width:100%; height:100%; overflow:hidden; position:relative; background:var(--bg); container-type:size; }
  .screen { position:absolute; top:0; left:0; width:100%; height:100%; display:none; flex-direction:column; }
  .screen.active { display:flex; }
  /* ===== ВЫДВИЖНАЯ ПАНЕЛЬ ВЗРОСЛОГО =====
     Все экраны, кроме доски, открываются справа на половину экрана поверх
     затемнённой доски, как настройки Avaz. На узком экране панель во всю ширину. */
  .screen:not(#aac-main) { left:auto; right:0; width:max(50%, 420px); max-width:100%; z-index:40; box-shadow:-8px 0 32px rgba(0,0,0,.18); background:var(--bg-muted); }
  .drawer-dim { position:absolute; inset:0; background:var(--overlay); z-index:39; display:none; }
  body.drawer-open .drawer-dim { display:block; }
  @container (max-width: 700px) { .screen:not(#aac-main) { width:100%; box-shadow:none; } }

  /* ===== MAIN AAC ===== */
  #aac-main { background:var(--board-bg); }   /* доска серая: белыми остаются карточки, кнопки и поле фразы */
  /* Отступы доски: один шаг 8px везде — поле строки, сетки и столбца. Запас под вырез экрана берётся из env() и на компьютере равен нулю. */
  .message-strip { background:transparent; padding:calc(env(safe-area-inset-top, 0px) + var(--space-2)) 0 var(--space-2) var(--space-2); position:relative; }
  /* Одно белое поле во всю ширину, как строка сообщения Avaz */
  .strip-box { --strip-h:96px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); display:flex; align-items:stretch; min-height:var(--strip-h); overflow:hidden; cursor:pointer; }
  .strip-pictograms { flex:1; min-width:0; display:flex; gap:var(--space-1); overflow-x:auto; padding:var(--space-2); align-items:center; scrollbar-width:none; }   /* отступ от края поля 8, между карточками 4 */
  .strip-pictograms::-webkit-scrollbar { display:none; }
  .strip-item { height:80px; aspect-ratio:4/3; padding:var(--space-1) var(--space-1) var(--space-1); border-radius:var(--radius-m); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-1); flex-shrink:0; position:relative; box-sizing:border-box; }   /* карточка в строке тоже 4 × 3 */
  .strip-sym { width:100%; height:48px; min-height:0; }
  .strip-caption { font-size:var(--text-xs); font-weight:600; color:var(--ink); max-width:112px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
  /* Кнопки строки видны только когда в строке есть слова */
  .strip-actions { display:none; gap:var(--space-1); padding:var(--space-2); align-items:stretch; flex-shrink:0; }   /* кнопки во всю высоту поля минус отступ, зазор 4 */
  .message-strip.has-words .strip-actions { display:flex; }
  /* Кнопки строки одинаковые: серый квадрат со значком без подписи; «Сказать» жёлтая */
  .strip-btn { display:flex; align-items:center; justify-content:center; width:calc(var(--strip-h) - 2*var(--space-2) - 2px); height:calc(var(--strip-h) - 2*var(--space-2) - 2px); padding:0; border:none; border-radius:var(--radius-m); background:var(--bg-muted); color:var(--ink); cursor:pointer; transition:transform .12s, background .12s; }
  .strip-btn:active { transform:scale(.95); background:var(--bg-muted); }
  .strip-btn .mi-slot { width:32px; height:32px; display:inline-flex; }
  .strip-btn .mi { width:32px; height:32px; fill:var(--ink); }
  #btnSpeak { background:var(--accent); border-color:var(--accent); }
  #btnSpeak.speaking { animation:speakPulse .6s infinite; }

  @keyframes speakPulse { 0%,100%{box-shadow:0 3px 12px rgba(255,217,0,.5)} 50%{box-shadow:0 3px 22px rgba(255,217,0,.9)} }
  /* Partner view — крупный показ сообщения + памятка для взрослого */
  /* Режим моделирования: баннер сверху + фиолетовая тонировка строки (ход взрослого ≠ ход ребёнка) */
  /* Коуч-полоса (пауза → реакция) — спокойный зелёный, отличается от фиолетового моделирования.
     Тонкая, сверху, НЕ перекрывает сетку: ребёнок отвечает на доске под ней. */

  /* ===== ДОСКА: ОКНО НА МАТРИЦУ, ПУТЬ, БОКОВОЙ СТОЛБЕЦ =====
     Окно всегда полного размера: сетка задаётся строго рядами и столбцами окна и
     занимает всю площадь, ничего не прокручивается. Пустая клетка — мёртвая зона. */
  .board-body { flex:1; display:flex; min-height:0; }
  #aac-main[data-side="left"] .board-body { flex-direction:row-reverse; }
  #aac-main[data-side="left"] .message-strip { padding-left:0; padding-right:var(--space-2); }
  #aac-main[data-side="left"] .board-path { padding-left:0; padding-right:var(--space-2); }
  #aac-main[data-side="left"] .pictogram-grid { padding-left:0; padding-right:var(--space-2); }
  #aac-main[data-side="left"] .edit-bar { padding-left:0; padding-right:var(--space-2); }
  .board-main { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
  .board-path { display:flex; align-items:center; gap:var(--space-1); padding:0 0 0 var(--space-2); min-height:32px; overflow-x:auto; white-space:nowrap; scrollbar-width:none; flex-shrink:0; }
  .board-path::-webkit-scrollbar { display:none; }
  #aac-main.path-off .board-path { display:none; }   /* настройка «Путь по папкам» выключена */
  .path-crumb { border:none; background:transparent; font:inherit; font-size:var(--text-m); font-weight:600; color:var(--ink-2); padding:var(--space-1) var(--space-1); cursor:pointer; min-height:28px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--ink-faint); }
  .path-crumb.is-current { color:var(--ink); text-decoration:none; cursor:default; }
  .path-sep { color:var(--line-strong); font-size:var(--text-m); }
  .grid-area { flex:1; min-height:0; overflow:hidden; touch-action:pan-y; }
  .pictogram-grid { height:100%; padding:var(--space-2) 0 var(--space-2) var(--space-2); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:var(--space-1); }   /* клетки растянуты на всю доску; ряды и столбцы ставит renderWindow */
  .cell-empty { border-radius:var(--radius-l); }
  /* ===== ПРИСПОСОБЛЕНИЯ К КАСАНИЮ =====
     Под пальцем карточка подсвечивается сразу, при удержании по ней бежит полоска
     длиной в порог удержания (--hold). */
  .picto-card.is-pressed { outline:var(--tf-width, 4px) solid var(--tf-color, var(--accent)); outline-offset:-2px; border-radius:var(--tf-radius, 16px); background:var(--accent-soft); }
  .picto-card.is-holding::after { content:''; position:absolute; left:0; bottom:0; height:8px; width:0; background:var(--tf-color, var(--accent)); animation:holdfill var(--hold, 500ms) linear forwards; }
  @keyframes holdfill { to { width:100%; } }
  /* ===== РЕЖИМ ПРАВКИ (как «Редактировать» у Avaz) ===== */
  .edit-bar { display:none; align-items:center; gap:var(--space-2); padding:calc(env(safe-area-inset-top, 0px) + var(--space-2)) 0 var(--space-2) var(--space-2); overflow-x:auto; scrollbar-width:none; }
  .edit-bar::-webkit-scrollbar { display:none; }
  #aac-main.is-editing .edit-bar { display:flex; }
  #aac-main.is-editing .message-strip { display:none; }
  #aac-main.is-editing .grid-area { touch-action:none; }
  #aac-main.is-editing #iconPanel { display:none; }
  .side-btn.side-folder-options { display:none; }   /* две классовые части: общее правило .side-btn ниже ставит flex и иначе перебивало бы скрытие */
  #aac-main.is-editing .side-folder-options { display:flex; }
  .edit-title { font-size:var(--text-m); font-weight:600; color:var(--ink); margin:0 auto 0 var(--space-1); white-space:nowrap; }
  .edit-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-1); min-width:64px; min-height:56px; padding:var(--space-1) var(--space-2); border:none; border-radius:var(--radius-m); background:var(--surface); font:inherit; font-size:var(--text-2xs); font-weight:600; color:var(--ink); cursor:pointer; flex-shrink:0; }
  .edit-btn .mi { width:24px; height:24px; fill:var(--ink); }
  .edit-btn:active { transform:scale(.96); }
  .edit-done { background:var(--accent); }
  .edit-danger { color:var(--danger); }
  .edit-danger .mi { fill:var(--danger); }
  #aac-main.is-editing .cell-empty { border:2px dashed var(--line-strong); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  #aac-main.is-editing .cell-empty:active { background:var(--accent-soft); }
  .cell-plus { display:flex; color:var(--ink-faint); }
  .cell-plus .mi { width:28px; height:28px; }
  .sel-circle { position:absolute; top:5px; right:5px; width:18px; height:18px; border-radius:50%; border:2px solid var(--line-strong); background:var(--card); z-index:3; }
  .sel-circle.is-on { background:var(--accent); border-color:var(--accent-press); }
  .picto-card.is-selected { outline:3px solid var(--accent); outline-offset:-1px; }
  .picto-card.is-hidden-all, .picto-card.is-hidden-here { opacity:.4; }
  .hidden-badge { position:absolute; top:4px; right:4px; font-size:var(--text-2xs); font-weight:600; color:var(--white); background:var(--ink-faint); border-radius:var(--radius-s); padding:var(--space-1) var(--space-1); z-index:3; }
  .picto-card.is-dragging { opacity:.55; pointer-events:none; z-index:6; transition:none; }
  .drop-target { outline:3px solid var(--accent); outline-offset:-3px; background:var(--accent-soft); }
  .board-empty { grid-column:1/-1; grid-row:1/-1; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ink-faint); font-size:var(--text-m); line-height:1.5; padding:var(--space-5); }
  .picto-card {
    background:var(--card); border-radius:var(--radius-l); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:var(--space-1); cursor:pointer; min-width:0; min-height:0;
    transition:all .12s; border:none; padding:var(--space-1) var(--space-1) calc(var(--space-1) + 2px); position:relative; overflow:hidden;   /* снизу на 2 px больше: подпись не липнет к краю */   /* без прозрачной обводки: цветное кольцо части речи стоит вплотную к краю */
    /* Статический сигнификатор «нажимаемости» + фигура-фон в покое (R-J3/R-J4):
       тень даём через filter, чтобы не конфликтовать с инсет-кольцом цвета части
       речи (оно на box-shadow) и чтобы overflow:hidden её не обрезал. */
    filter:none;   /* теней у карточек нет: белая карточка на сером поле видна и так */
  }
  .picto-card:active { transform:scale(.93); }
  /* ===== Цвет части речи (Fitzgerald Key) =====
     R-C2: цвет — РАМКОЙ (обводка), НЕ заливкой фона. Сплошной фон искать не помогает
     и мешает младшим, поэтому режима заливки в приложении нет вовсе (решения №9 и №12).
     Класс cat-* задаёт только тон (--cat); режим (off/border) переключается
     атрибутом data-color-mode на <body>. Буквы-метки части речи на карточке нет:
     владелец убрал её 23 сентября 2026 года. Работает одинаково на picto-card и strip-item. */
  .cat-noun    { --cat:#FF8A1A; }  /* С — существительное: оранжевый */
  .cat-verb    { --cat:#2FB34A; }  /* Д — глагол: зелёный             */
  .cat-pronoun { --cat:#F5C400; }  /* М — местоимения и люди: жёлтый  */
  .cat-adj     { --cat:#1A8AF5; }  /* П — признак: синий              */
  .cat-phrase  { --cat:#F03C90; }  /* Ф — фразы и зачины: розовый     */
  .cat-place   { --cat:#9B2BC4; }  /* места: фиолетовый               */
  .cat-misc    { --cat:#8E8E8E; }
  /* Четыре способа показать цвет части речи: не красить, рамка (по умолчанию),
     полоска сверху, фон. Режим переключается атрибутом data-color-mode на <body>. */
  body[data-color-mode="border"] .pos-colored { box-shadow: inset 0 0 0 3px var(--cat); }
  body[data-color-mode="stripe"] .pos-colored::before { content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--cat); }
  body[data-color-mode="fill"] .pos-colored { background:color-mix(in srgb, var(--cat) 30%, var(--surface)); }
  body[data-color-mode="fill"] .strip-item.pos-colored { background:color-mix(in srgb, var(--cat) 30%, var(--surface)); }
  /* Папка выглядит иначе, чем слово: белый силуэт с закладкой сверху, без обводки —
     на сером поле доски форма папки читается и так. */
  .picto-card.is-folder { background:var(--card); border:none; border-radius:0 var(--radius-l) var(--radius-l) var(--radius-l); margin-top:12px; overflow:visible; }
  .picto-card.is-folder .folder-tab { position:absolute; top:-12px; left:0; width:42%; height:12px; background:var(--card); border-radius:var(--radius-s) var(--radius-s) 0 0; }
  .picto-card.is-folder .cat-sym-img { width:100%; height:100%; object-fit:contain; }
  .picto-card.is-folder .cat-sym-letter { font-size:var(--text-2xl); color:var(--ink-faint); }
  .picto-card .picto-emoji { font-size:36px; line-height:1; }
  /* Длинное слово («электрокардиограмма») не должно вылезать за карточку и
     наезжать на соседние: переносим внутри слова и не даём занять больше двух строк. */
  .picto-card .picto-label { font-size:calc(var(--label,13px) * var(--caption-scale,1)); font-weight:600; color:var(--card-ink); text-align:center; line-height:1.2;
    max-width:100%; overflow-wrap:anywhere; hyphens:auto;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* Подпись карточки: положение и размер — настройка «Подпись карточки» (атрибуты на <body>) */
  body[data-caption="above"] .picto-card { flex-direction:column-reverse; }
  body[data-caption-size="small"] { --caption-scale:.8; }
  body[data-caption-size="large"] { --caption-scale:1.4; }
  /* Крайние размеры действуют и на папки: до 24 сентября 2026 года папки оставались с
     картинкой и подписью при любом выборе, владелец попросил вести их как слова. */
  body[data-caption-size="none"] .picto-card .picto-label { display:none; }
  body[data-caption-size="text"] .picto-card .picto-img-wrap { display:none; }
  body[data-caption-size="text"] .picto-card .picto-label { --caption-scale:1.6; -webkit-line-clamp:3; }
  .picto-card .picto-photo { width:100%; height:60%; object-fit:cover; border-radius:var(--radius-m); }
  .picto-card .picto-img-wrap { display:flex; align-items:center; justify-content:center; width:100%; flex:1; min-height:0; padding:6% 10% 2%; }
  .picto-card .picto-arasaac { width:100%; height:100%; object-fit:contain; border-radius:var(--radius-s); display:block; }
  /* Крупность подписи и картинки зависит от плотности окна (число рядов). */
  .pictogram-grid[data-density="xl"] { --label:22px; }
  .pictogram-grid[data-density="l"]  { --label:15px; }
  .pictogram-grid[data-density="s"]  { --label:11px; }
  .pictogram-grid[data-density="xs"] { --label:9px; }
  .pictogram-grid[data-density="xs"] .picto-label { -webkit-line-clamp:1; }
  .pictogram-grid[data-density="xs"] .picto-card { border-radius:var(--radius-s); padding:var(--space-1) var(--space-1) calc(var(--space-1) + 2px); gap:var(--space-1); }
  .pictogram-grid[data-density="s"] .picto-card, .pictogram-grid[data-density="xs"] .picto-card { gap:var(--space-1); }
  /* ===== Единый визуальный язык символов (R-C4b) =====
     Одна система символов на всех детских поверхностях: своё фото → ARASAAC →
     нейтральная заглушка. Эмодзи в детской зоне не используются. */
  .sym-img { width:100%; height:100%; object-fit:contain; display:block; }
  /* Картинки нет: показываем спокойный пустой плейсхолдер, а не чужой символ.
     Подпись словом под карточкой остаётся, взрослого зовём добавить фото. */
  .sym-stub { display:block; width:62%; height:62%; margin:auto; border-radius:var(--radius-m); background:var(--bg-muted); border:2px dashed var(--line); }
  .sym-loading { display:block; width:22px; height:22px; margin:auto; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
  /* Контейнеры символов на разных поверхностях — центрируем содержимое */
  .strip-sym, .picto-emoji { display:flex; align-items:center; justify-content:center; overflow:hidden; }

  .picto-spinner { width:24px; height:24px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  /* Add card */
  .picto-card.add-card { border:2px dashed var(--line); background:var(--bg-subtle); }
  .picto-card.add-card .picto-emoji { font-size:var(--text-2xl); color:var(--line-strong); }
  .picto-card.add-card .picto-label { color:var(--line-strong); }

  /* Иконка папки в списках и на карточке-папке — пиктограмма ARASAAC или буква названия */
  .cat-sym-img { width:100%; height:100%; object-fit:contain; }
  .cat-sym-letter { font-weight:600; text-transform:uppercase; line-height:1; }

  /* Боковой столбец: «Назад», «Домой», «Ключевые слова», «Поиск», стрелки страниц,
     в углу — «Меню». Кнопки крупные, подпись под значком. */
  #aac-main.side-off .side-buttons { display:none; }
  #aac-main.side-off .side-column { width:auto; }
  .side-column { width:auto; flex-shrink:0; display:flex; flex-direction:column; background:transparent; border-left:none; padding:calc(env(safe-area-inset-top, 0px) + var(--space-2)) var(--space-2) calc(env(safe-area-inset-bottom, 0px) + var(--space-2)); gap:var(--space-2); }
  .side-buttons { display:flex; flex-direction:column; gap:var(--space-2); flex:1; min-height:0; }
  /* Кнопки столбца — квадраты одной стороны (--side-btn считает fitSideButtons в app-2-board.js) */
  .side-btn { border:none; background:var(--surface); border-radius:var(--radius-m); width:var(--side-btn, 72px); height:var(--side-btn, 72px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-1); cursor:pointer; font:inherit; color:var(--ink); padding:var(--space-1) var(--space-1); transition:transform .12s, background .12s; flex-shrink:0; }
  .side-btn:active { transform:scale(.94); background:var(--bg-muted); }
  .side-btn .mi, .side-btn .mi-slot .mi { width:32px; height:32px; fill:currentColor; }
  .side-btn .mi-slot { width:32px; height:32px; display:inline-flex; }
  .side-btn .side-label { display:none; }
  .side-btn.has-label .side-label { display:block; }
  .side-label { font-size:var(--text-2xs); font-weight:600; line-height:1.05; text-align:center; max-width:100%; overflow:hidden; white-space:normal; max-height:2.1em; overflow-wrap:anywhere; }
  .side-btn.is-active { background:var(--accent-mid); }
  /* Стрелки страниц: белый контейнер шириной с кнопку панели, внутри две серые кнопки
     одна под другой, как кнопки в строке фразы. Высота контейнера равна двум кнопкам
     с промежутком, поэтому ряд панели не сбивается. */
  .side-pager { width:var(--side-btn, 72px); height:calc(2 * var(--side-btn, 72px) + var(--space-2)); flex-shrink:0; background:var(--surface); border-radius:var(--radius-m); padding:var(--space-2); display:flex; flex-direction:column; gap:var(--space-1); box-sizing:border-box; }   /* между стрелками 4 px, как между кнопками строки фразы */
  .pager-btn { flex:1; width:100%; min-height:0; border:none; border-radius:var(--radius-m); background:var(--bg-muted); color:var(--ink); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; font:inherit; transition:transform .12s; }
  .pager-btn:active { transform:scale(.94); }
  .pager-btn .mi { width:28px; height:28px; fill:currentColor; }
  /* Недоступная стрелка бледнеет только значком: серый фон остаётся тем же, что у соседней */
  .pager-btn.is-off { opacity:1; }
  .pager-btn.is-off .mi { opacity:.35; }
  .side-settings.holding { opacity:1; transition:opacity 2.5s linear; }
  .chip-icon { display:inline-flex; width:20px; height:20px; margin-right:var(--space-2); vertical-align:middle; }
  .chip-icon .mi { width:20px; height:20px; }
  /* Меню и поддержка */
  #menu-screen .cg-item { min-height:56px; }
  /* Низ меню: «Поддержка» и «О приложении» в один ряд, тише основных пунктов */
  #menu-screen .panel-body { display:flex; flex-direction:column; }
  .menu-minor { display:flex; gap:var(--space-2); margin-top:auto; padding-top:var(--space-4); }
  .menu-minor-btn { flex:1; min-height:44px; border:none; border-radius:var(--radius-m); background:var(--surface); color:var(--ink-muted); font:inherit; font-size:var(--text-xs); font-weight:400; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); padding:0 var(--space-3); }
  .menu-minor-btn .mi-slot { display:inline-flex; }
  .menu-minor-btn .mi { width:20px; height:20px; fill:currentColor; flex-shrink:0; }
  .menu-minor-btn.is-danger { color:var(--danger); }
  /* Тот же нижний ряд на экране профилей: «Резервное копирование» и «Удалить все данные» */
  #profiles-screen .panel-body { display:flex; flex-direction:column; }
  a.cg-item { text-decoration:none; color:inherit; }
  .faq { display:flex; flex-direction:column; gap:var(--space-2); }
  .faq-item { background:var(--surface); border-radius:var(--radius-l); padding:var(--space-3) var(--space-4); }
  .faq-item summary { font-size:var(--text-m); font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--space-2); }
  .faq-chev .mi { width:20px; height:20px; fill:var(--line-strong); transition:transform .15s; }
  .faq-item[open] .faq-chev .mi { transform:rotate(180deg); }
  .faq-answer { font-size:var(--text-m); line-height:1.5; color:var(--ink-2); padding-top:var(--space-2); }
  .search-add .mi { width:20px; height:20px; }
  .search-nopath { color:var(--danger); }
  .search-add { display:inline-flex; align-items:center; gap:var(--space-1); border:none; background:var(--bg-muted); border-radius:var(--radius-m); padding:var(--space-2) var(--space-3); font:inherit; font-size:var(--text-xs); font-weight:600; color:var(--ink); cursor:pointer; min-height:40px; flex-shrink:0; }
  /* Показ пути: подсветка папки, кнопки столбца и найденной карточки; доска не принимает нажатий */
  /* Показ пути: обведённая карточка мигает, остальные бледнеют и не нажимаются; в столбце живёт только «Выход» и обведённая кнопка */
  .path-glow { outline:4px solid var(--accent); outline-offset:2px; z-index:4; animation:pathPulse .9s ease-in-out infinite; opacity:1 !important; pointer-events:auto !important; }
  @keyframes pathPulse { 0%,100% { outline-color:var(--accent); } 50% { outline-color:var(--danger, #e53935); } }
  #aac-main.is-showing-path .picto-card:not(.path-glow), #aac-main.is-showing-path .side-btn:not(.path-glow):not(.side-exit), #aac-main.is-showing-path .pager-btn:not(.path-glow) { opacity:.4; pointer-events:none; }
  #aac-main.is-showing-path .board-path { pointer-events:none; }
  @media (prefers-reduced-motion: reduce) { .path-glow { animation:none; } }

  /* ===== MODALS & OVERLAYS =====
     Шторка занимает ту же правую половину, что и панель взрослого: одно пространство,
     доска слева остаётся видна. Затемнение накрывает весь экран, чтобы нажатие по доске
     закрывало шторку, а не срабатывало на карточке. На узком экране шторка во всю ширину. */
  .modal-overlay {
    position:absolute; inset:0;
    background:var(--overlay); display:none; align-items:stretch;
    justify-content:flex-end; z-index:50; backdrop-filter:blur(4px);
  }
  .modal-overlay.show { display:flex; }
  /* Один слой за раз: пока открыта шторка, панель под ней спрятана и вернётся после закрытия */
  body.sheet-open .screen:not(#aac-main), body.sheet-open .drawer-dim { visibility:hidden; }
  /* Список действий в шторке: строки, как в панели; опасное действие красным */
  .action-list .cg-item { padding:var(--space-4) var(--space-3); }
  .cgi-title.is-danger { color:var(--danger); }
  .modal-sheet {
    background:var(--surface); border-radius:0; width:max(50%, 420px); max-width:100%; height:100%; max-height:none;
    padding:calc(env(safe-area-inset-top, 0px) + var(--space-5)) var(--space-5) calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
    overflow-y:auto; animation:slideRight .3s ease; box-shadow:-8px 0 32px rgba(0,0,0,.18);
  }
  @container (max-width: 700px) { .modal-sheet { width:100%; box-shadow:none; } }
  .modal-handle { display:none; }   /* ручка нужна была нижней шторке; правая панель её не тянет */
  .modal-title { font-size:var(--text-xl); font-weight:600; margin-bottom:var(--space-4); }

  /* Form elements */
  .form-field { margin-bottom:var(--space-4); }
  .form-label { font-size:var(--text-xs); font-weight:600; color:var(--ink-faint); margin-bottom:var(--space-2); display:block; }
  .form-input {
    width:100%; padding:var(--space-4) var(--space-4); border-radius:var(--radius-l); border:2px solid var(--bg-muted);
    font-size:var(--text-m); font-family:inherit; outline:none; transition:border .2s;
  }
  .form-input:focus { border-color:var(--accent); }
  .form-row { display:flex; gap:var(--space-2); margin-bottom:var(--space-4); flex-wrap:wrap; }
  .form-chip {
    display:inline-flex; align-items:center; padding:var(--space-2) var(--space-4); border-radius:var(--radius-m); background:var(--bg-muted); border:2px solid transparent;
    font-size:var(--text-xs); font-weight:600; cursor:pointer; transition:all .15s;
  }
  .form-chip.active { border-color:var(--accent); background:var(--accent-soft); }
  .form-chip:active { transform:scale(.95); }

  /* Аватар профиля — монограмма: буква имени в цветном круге, без эмодзи (R-H4).
     Цвет — из палитры (по выбору взрослого), буква — из имени ребёнка. */
  /* Выбор цвета аватара — кружки-образцы вместо эмодзи-иконок */

  /* Photo upload area */
  .photo-upload {
    width:100%; height:120px; border-radius:var(--radius-l); border:2px dashed var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:var(--space-2); cursor:pointer; transition:all .15s; margin-bottom:var(--space-4); overflow:hidden;
    position:relative; background:var(--bg-subtle);
  }
  .photo-upload:active { border-color:var(--accent); background:var(--accent-soft); }
  .photo-upload .pu-icon { font-size:32px; }
  .photo-upload .pu-text { font-size:var(--text-xs); color:var(--ink-muted); }
  .photo-upload img { width:100%; height:100%; object-fit:cover; position:absolute; }
  .photo-upload img.no-bg { background: repeating-conic-gradient(var(--bg-muted) 0% 25%, var(--surface) 0% 50%) 50%/16px 16px; }
  .photo-actions { display:flex; gap:var(--space-2); margin-bottom:var(--space-4); }
  .photo-action-btn {
    flex:1; padding:var(--space-3) var(--space-2); border-radius:var(--radius-m); border:2px solid var(--bg-muted); background:var(--surface);
    font-size:var(--text-xs); font-weight:600; cursor:pointer; display:flex; align-items:center;
    justify-content:center; gap:var(--space-2); transition:all .15s;
  }
  .photo-action-btn:active { transform:scale(.95); background:var(--bg-muted); }
  .photo-action-btn.active { border-color:var(--ok); background:var(--ok-soft); color:var(--ok); }
  .photo-action-btn .pab-icon { font-size:var(--text-m); }
  .photo-action-btn.processing { opacity:.6; pointer-events:none; }
  .photo-action-btn.processing .pab-icon { animation:spin 1s linear infinite; }

  .btn-full {
    width:100%; padding:var(--space-4); background:var(--accent); border:none; border-radius:var(--radius-l);
    font-size:var(--text-m); font-weight:600; cursor:pointer; transition:all .15s; margin-top:var(--space-2);
  }
  .btn-full:active { transform:scale(.97); background:var(--accent-press); }
  .btn-secondary { background:var(--bg-muted); color:var(--ink); }
  .btn-danger { background:var(--danger-soft); color:var(--danger); }

  /* ===== ПАНЕЛЬ ПОМОЩНИКА (меню и экраны настроек) ===== */
  /* Шапка панели: «‹» слева (кроме корня), заголовок, «✕» справа. Одна на все экраны, включая меню и поиск. */
  /* Шапка панели без своего фона и черты снизу: она лежит на сером поле панели (решение владельца от 24 сентября 2026 года) */
  .panel-header { background:transparent; padding:calc(env(safe-area-inset-top, 0px) + var(--space-4)) var(--space-5) var(--space-4); display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }
  /* Значки в шапке чуть толще: обводка поверх заливки утолщает штрих с 16 до 20 единиц из 256 */
  .panel-header .mi path { stroke:currentColor; stroke-width:4; stroke-linejoin:round; stroke-linecap:round; }
  .panel-header h2 { font-size:var(--text-xl); font-weight:600; flex:1; }
  .panel-header .form-input { flex:1; }
  /* Шапка меню: имя текущего профиля с галочкой вниз, нажимается целиком и ведёт к списку профилей */
  /* Имя профиля в шапке меню выглядит кнопкой: серая таблетка с шевроном, не тянется на всю ширину */
  .menu-profile { flex:0 1 auto; min-width:0; max-width:100%; display:inline-flex; align-items:center; gap:var(--space-1); background:var(--surface); border:none; border-radius:var(--radius-xl); min-height:44px; padding:0 var(--space-3) 0 var(--space-4); font:inherit; font-size:var(--text-l); font-weight:600; color:var(--ink); cursor:pointer; text-align:left; }
  .menu-profile:active { transform:scale(.97); }
  #menu-screen .panel-header .icon-btn { margin-left:auto; }
  /* Кнопки шапки («‹» и «✕») белые: на сером фоне панели серый круг не читался как кнопка */
  .panel-header .icon-btn { background:var(--surface); }
  .menu-profile-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .menu-profile .mi { width:20px; height:20px; }
  .menu-profile-icon { display:inline-flex; margin-right:var(--space-1); }
  .menu-profile-icon .mi { width:22px; height:22px; }
  /* Тело панели: прокручивается под неподвижной шапкой */
  .panel-body { flex:1; overflow-y:auto; padding:var(--space-3) var(--space-4) calc(env(safe-area-inset-bottom, 0px) + var(--space-4)); }   /* снизу тот же отступ, что по бокам: нижний ряд кнопок стоит у самого края поля (замечание владельца от 24 сентября 2026 года) */
  .cg-section { background:var(--surface); border-radius:var(--radius-l); margin-bottom:var(--space-3); overflow:hidden; }
  .cg-item { padding:var(--space-4) var(--space-5); display:flex; align-items:center; gap:var(--space-4); cursor:pointer; transition:background .1s; border-bottom:1px solid var(--bg-muted); }
  .cg-item:last-child { border-bottom:none; }
  /* Подсвечивается нажатие только там, где оно что-то делает: строка с действием или ссылка.
     Строка с переключателем, сегментом или набором кнопок сама ничего не делает, и пустое
     место в ней на нажатие не отвечает (замечание владельца от 24 сентября 2026 года). */
  .cg-item[onclick]:active, a.cg-item:active { background:var(--bg-muted); }
  .cg-item.toggle-row, .cg-item-stack { cursor:default; }
  .cg-item .cgi-icon { width:40px; height:40px; border-radius:var(--radius-m); background:var(--bg-muted); display:flex; align-items:center; justify-content:center; font-size:var(--text-xl); flex-shrink:0; color:var(--ink-2); }
  /* Единый набор иконок Material Symbols (инлайн-SVG) в интерфейсе взрослого — C8 */
  .mi { width:24px; height:24px; fill:currentColor; display:block; flex-shrink:0; }
  .cgi-icon .mi { width:24px; height:24px; }
  .cg-item .cgi-text { flex:1; }
  .cg-item .cgi-title { font-size:var(--text-m); font-weight:600; }
  .cg-item .cgi-desc { font-size:var(--text-xs); color:var(--ink-muted); margin-top:var(--space-1); }
  .cg-item .cgi-arrow { color:var(--line-strong); display:flex; flex-shrink:0; }
  .cgi-arrow .mi { width:20px; height:20px; }
  /* Части строки: аватар и картинка слова слева, значок «натуральный», ряд кнопок под текстом */
  .cg-item .cgi-icon.cgi-lead { width:44px; height:44px; background:none; overflow:hidden; }
  .cg-item .cgi-foot { display:flex; gap:var(--space-1); flex-wrap:wrap; }
  .cg-item-stack .cgi-main[onclick] { cursor:pointer; }
  .cg-item-stack .cgi-main[onclick]:active { background:var(--bg-muted); border-radius:var(--radius-m); }
  .cg-item .ui-radio + .icon-btn { margin-left:var(--space-2); }
  /* Сегмент внутри шторки: те же кнопки, что в панели, отступ как у ряда формы */
  .modal-sheet .gs-options { margin-bottom:var(--space-4); }



  /* Grid settings */
  .gs-options { display:flex; gap:var(--space-2); margin-bottom:var(--space-6); flex-wrap:wrap; }
  .gs-opt { padding:var(--space-3) var(--space-5); border-radius:var(--radius-m); background:var(--surface); border:2px solid var(--bg-muted); font-size:var(--text-m); font-weight:600; cursor:pointer; transition:all .15s; }
  .gs-opt.active { border-color:var(--accent); background:var(--accent-soft); }
  /* Карточки-образцы в выборе вида: маленькая карточка 4 × 3 и подпись варианта под ней */
  .gs-opt.gs-opt-card { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); padding:var(--space-2); }
  .gs-opt-card small { font-size:var(--text-xs); font-weight:400; color:var(--ink-muted); }
  .gs-opt-card.active small { color:var(--ink); }
  .sample-card { width:72px; aspect-ratio:4/3; background:var(--card); border-radius:var(--radius-s); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; position:relative; overflow:hidden; border:1px solid var(--line); }
  .sample-card img { height:28px; width:auto; }
  .sample-card.is-bw img { filter:grayscale(1); }
  .sample-label { font-size:var(--text-2xs); font-weight:600; color:var(--card-ink); line-height:1; }
  .sample-card.mode-border { box-shadow: inset 0 0 0 3px var(--cat); }
  .sample-card.mode-stripe::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--cat); }
  .sample-card.mode-fill { background:color-mix(in srgb, var(--cat) 30%, var(--surface)); }
  .gs-opt:active { transform:scale(.95); }
  .gs-preview { padding:0; margin:0; }   /* блок лежит внутри строки настроек, свои отступы и фон ему не нужны: они удваивали поле вокруг предпросмотра */
  .gs-preview-label { font-size:var(--text-xs); font-weight:400; color:var(--ink-muted); margin-bottom:var(--space-3); }   /* как подсказки под строками (.cgi-desc) */
  .gs-preview-grid { display:grid; gap:var(--space-2); aspect-ratio:3/2; max-width:360px; }   /* пропорции доски поперечного планшета: клетки в предпросмотре той же формы, что на доске */
  .gs-preview-cell { background:var(--bg-muted); border-radius:var(--radius-s); display:flex; align-items:center; justify-content:center; font-size:var(--text-xl); }

  /* Toggles */
  .toggle-row { display:flex; align-items:center; justify-content:space-between; }
  /* Границы у трека и пятачка — чтобы состояние и сам контрол были различимы
     ≥3:1 (WCAG 1.4.11, R-I4), а не только по бледному цвету заливки. */
  /* Переключатель без обводок: выключенный — светло-серая дорожка, кружок белый с мягкой тенью */
  .toggle-switch { width:48px; height:28px; border-radius:var(--radius-l); background:var(--line-strong); border:none; position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
  /* Невидимое расширение тач-цели до ≥44px по высоте (WCAG 2.5.8/AAA, R-I3) —
     сам переключатель визуально остаётся стандартным 28px. */
  .toggle-switch::before { content:''; position:absolute; top:-8px; bottom:-8px; left:-4px; right:-4px; }
  .toggle-switch.on { background:var(--ok); }
  .toggle-switch::after { content:''; position:absolute; width:22px; height:22px; border-radius:50%; background:var(--white); top:3px; left:3px; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
  .toggle-switch.on::after { transform:translateX(20px); }

  /* Voice */
  /* Список реальных голосов системы + подсказка, как поставить улучшенный */
  .cgi-badge { font-size:var(--text-xs); font-weight:600; color:var(--ok); background:var(--ok-soft); border-radius:var(--radius-s); padding:var(--space-1) var(--space-2); margin-left:var(--space-2); vertical-align:middle; }
  .cgi-badge.is-neutral { color:var(--ink-muted); background:var(--bg); }
  .voice-hint { font-size:var(--text-xs); line-height:1.6; color:var(--ink-faint); padding:var(--space-3) var(--space-5) var(--space-4); }
  .voice-empty { font-size:var(--text-xs); line-height:1.5; color:var(--danger); background:var(--danger-soft); border-radius:var(--radius-m); padding:var(--space-3) var(--space-4); margin:var(--space-3) var(--space-5); }

  .settings-group-label { font-size:var(--text-xs); font-weight:600; color:var(--ink-faint); padding:var(--space-4) var(--space-5) var(--space-2); text-transform:uppercase; letter-spacing:.5px; }

  /* Toast */
  .toast { position:absolute; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--toast-bg); color:var(--white); padding:var(--space-3) var(--space-5); border-radius:var(--radius-m); font-size:var(--text-xs); font-weight:400; opacity:0; transition:all .3s; z-index:60; pointer-events:none; white-space:nowrap; }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
  /* Undo toast — с кнопкой «Вернуть» */
  .undo-toast { position:absolute; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--toast-bg); color:var(--white); padding:var(--space-2) var(--space-2) var(--space-2) var(--space-5); border-radius:var(--radius-l); font-size:var(--text-m); font-weight:600; opacity:0; transition:all .25s; z-index:65; display:flex; align-items:center; gap:var(--space-4); white-space:nowrap; box-shadow:var(--shadow-2); pointer-events:none; }
  .undo-toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
  .undo-toast button { background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius-m); padding:var(--space-2) var(--space-4); font-size:var(--text-m); font-weight:600; cursor:pointer; font-family:inherit; }
  .undo-toast button:active { transform:scale(.94); }

  /* Animations */
  .fade-in { animation:fadeIn .3s ease; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  .slide-left { animation:slideLeft .3s ease; }
  /* Выдвижная панель взрослого въезжает справа, затемнение проявляется */
  .slide-right { animation:slideRight .3s ease; }
  @keyframes slideRight { from{transform:translateX(100%)} to{transform:translateX(0)} }
  body.drawer-open .drawer-dim { animation:dimIn .3s ease; }
  @keyframes dimIn { from{opacity:0} to{opacity:1} }
  @keyframes slideLeft { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
  .pop-in { animation:popIn .2s ease; }
  @keyframes popIn { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
  @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
  /* Сенсорная безопасность (R-C8): если система просит «уменьшить движение» — гасим
     декоративные анимации независимо от настройки. Спиннер загрузки (spin) оставляем —
     он информативный, а не декоративный. */
  @media (prefers-reduced-motion: reduce) {
    .fade-in, .slide-left, .slide-right, .pop-in, .drawer-dim,
    #btnSpeak.speaking, .modal-sheet { animation: none !important; }
  }
  ::-webkit-scrollbar { width:0; height:0; }

  /* Выбор пиктограммы: та же шторка, только высокая, с сеткой и «Отмена» внизу */
  .picker-sheet { display:flex; flex-direction:column; overflow:hidden; }
  .picker-sheet .picker-head, .picker-sheet .btn-full { flex-shrink:0; }
  /* Smart field */
  .smart-divider { height:1px; background:var(--bg-muted); margin:var(--space-1) 0 var(--space-4); }
  .verb-form-row { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-2); }
  .vfr-label { font-size:var(--text-xs); font-weight:600; color:var(--ink-faint); width:76px; flex-shrink:0; }
  .vfr-input { flex:1; }

  .emoji-grid-wrap { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:var(--space-1) var(--space-4) var(--space-5); }
  .emoji-section-title { font-size:var(--text-xs); font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.5px; padding:var(--space-2) 0 var(--space-1); position:sticky; top:0; background:var(--surface); z-index:1; }
  /* Пикер пиктограмм ARASAAC для иконки категории (R-H4) */
  .ara-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); }
  .ara-cell { padding:var(--space-2); border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); cursor:pointer; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
  .ara-cell:active { transform:scale(.95); background:var(--accent-soft); }
  .ara-cell img { width:100%; height:100%; object-fit:contain; }
  .cat-icon-btn-thumb { width:24px; height:24px; object-fit:contain; vertical-align:middle; margin-right:var(--space-2); }

  /* ===== ОБЩИЕ КОМПОНЕНТЫ ВЗРОСЛОЙ ЗОНЫ =====
     Строки панели и настроек собираются одними и теми же кусками (uiRow, uiToggle,
     uiSegment, uiEmpty в app-1-state.js), поэтому и стили у них общие. */
  .cgi-value { flex-shrink:0; max-width:38%; font-size:var(--text-xs); font-weight:400; color:var(--ink-faint); text-align:right; line-height:1.3; }
  .cg-item-stack { flex-direction:column; align-items:stretch; gap:var(--space-3); cursor:default; }
  .cgi-main { display:flex; align-items:center; gap:var(--space-4); }
  .gs-options-wrap { flex-wrap:wrap; }
  .cg-item-stack .gs-options { margin-bottom:0; }

  /* Радио выбора одного значения из списка (источник символов) */
  /* Знак «один из многих»: серое кольцо у всех строк, у выбранной внутри жёлтая точка.
     Сплошной жёлтый круг у выбранной владелец отклонил 23 сентября 2026 года. */
  .ui-radio { width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); flex-shrink:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
  .ui-radio.on { border-color:var(--ink); }
  .ui-radio.on::after { content:''; width:12px; height:12px; border-radius:50%; background:var(--accent); }

  /* Пустое состояние: что здесь будет и что нажать */
  .ui-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:48px var(--space-6); color:var(--ink-faint); font-size:var(--text-m); line-height:1.5; }

  .sub-intro { font-size:var(--text-xs); color:var(--ink-faint); line-height:1.5; margin:var(--space-1) var(--space-1) var(--space-3); }

  /* ===== ЗАМЕНА ЭМОДЗИ =====
     В приложении нет ни одного эмодзи. Символы ребёнка — фото или пиктограммы
     ARASAAC, значки взрослого — инлайн-иконки одного набора, остальное — текст. */
  .mi-slot { display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; }
  .mi-slot .mi { width:100%; height:100%; fill:currentColor; }
  /* Размеры окна: сетка равных клеток, а не ряд кнопок по ширине текста, чтобы ряды были ровными */
  .gs-options-wrap { display:grid; grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); }
  .gs-opt-size { display:flex; flex-direction:column; align-items:center; line-height:1.1; padding:var(--space-3) var(--space-1); }
  .gs-opt-size small { font-size:var(--text-2xs); font-weight:400; opacity:.7; }
  .pu-icon .mi { width:24px; height:24px; fill:var(--line-strong); }

  /* Избранное на карточке — точка, а не звёздочка-эмодзи */
  .picto-fav { position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--accent); z-index:2; }

  .form-hint { font-size:var(--text-xs); color:var(--ink-faint); line-height:1.5; margin-top:var(--space-2); }

/* ===== СТРОКА ФРАЗЫ И «МЕНЮ» СНИЗУ =====
   Настройка «Где стоят строка фразы и «Меню»». Экран доски — колонка, сетка занимает
   всё свободное место, а строка (в режиме правки — полоса правки) встаёт после неё.
   Боковой столбец переворачивается, и кнопка «Меню» (в правке — «Опции папки»)
   оказывается внизу, вровень со строкой, как и сверху. */
#aac-main[data-strip="bottom"] .message-strip, #aac-main[data-strip="bottom"] .edit-bar { order:2;
  padding-top:0; padding-bottom:calc(env(safe-area-inset-bottom, 0px) + var(--space-2)); }
/* Путь по папкам переезжает вместе со строкой и стоит прямо над ней, между сеткой и строкой. */
#aac-main[data-strip="bottom"] .board-path { order:1; }
#aac-main[data-strip="bottom"] .side-column { flex-direction:column-reverse; }

/* ===== ГОРИЗОНТАЛЬНЫЙ ТЕЛЕФОН =====
   Высоты экрана мало (около 390 px), и полоска фразы в две строки съедала
   половину доски. На низком экране она сжимается в одну строку: карточки
   слева, кнопки и текст справа, иконка настроек в углу. Срабатывает по высоте
   самого экрана приложения, поэтому одинаково работает и на телефоне, и в
   рамке режима ревью. Отступы доски здесь не трогаем: шаг 8px один на все экраны. */
@container (max-height: 500px) {
  .strip-box { --strip-h:64px; border-radius:var(--radius-m); }
  .strip-item { height:56px; padding:var(--space-1); }
  .strip-sym { height:32px; }
  .strip-caption { font-size:var(--text-xs); max-width:88px; }
  .strip-btn .mi-slot, .strip-btn .mi { width:24px; height:24px; }
  .side-btn { border-radius:var(--radius-m); }
  .side-btn .mi, .side-btn .mi-slot, .side-btn .mi-slot .mi { width:24px; height:24px; }
  .pager-btn .mi { width:20px; height:20px; }
  .side-label { font-size:var(--text-2xs); }
  .board-path { min-height:24px; }
  .path-crumb { font-size:var(--text-xs); min-height:24px; padding:var(--space-1) var(--space-2); }
  .pictogram-grid { gap:var(--space-1); }
  .edit-bar { gap:var(--space-1); }
  .edit-btn { min-height:48px; min-width:56px; font-size:var(--text-2xs); }
  .edit-btn .mi { width:24px; height:24px; }
  .edit-title { font-size:var(--text-xs); }
  /* Меню на низком экране: панель во всю высоту, пункты компактнее, чтобы не прокручивать */
  #menu-screen .cg-item { min-height:44px; padding:var(--space-2) var(--space-4); }
  #menu-screen .cg-item .cgi-icon { width:32px; height:32px; }
}
/* Непрерывные скругления, как у macOS и iOS: угол строится плавной кривой, а не дугой.
   Где браузер свойство не знает, остаются обычные скругления. */
*, *::before, *::after { corner-shape: squircle; }
/* Настоящие круги и пилюли остаются круглыми: плавный угол превращал бы их в квадраты */
.icon-btn, .sel-circle, .sym-loading, .picto-spinner, .toggle-switch, .toggle-switch::after, .ui-radio, .picto-fav, .modal-handle { corner-shape: round; }

/* ===== ТЁМНАЯ ТЕМА =====
   Второй набор значений токенов. Карточки остаются светлыми (--card не меняется),
   всё вокруг темнеет: доска, строка, столбец, меню и настройки. */
body[data-theme="dark"] {
  --bg:#1f1f1f; --bg-muted:#303030; --bg-subtle:#262626;
  --surface:#333333; --board-bg:#262626;
  --line:#3a3a3a; --line-strong:#555555;
  --ink:#eeeeee; --ink-2:#dddddd; --ink-muted:#aaaaaa; --ink-faint:#999999;
  --accent-soft:#5a4b00; --accent-mid:#5a4b00; --accent-ink:#ffe680;
  --danger-soft:#4a2020; --ok-soft:#1f3a26;
  --overlay:rgba(0,0,0,.65);
}
body[data-theme="dark"] .path-crumb.is-current { color:var(--white); }
body[data-theme="dark"] .form-input { background:var(--bg); }