/* Темы оформления портала поверх страниц инструментов («Глубина» и ещё девять).
 *
 * Сервер отдаёт /assets/style.css как assets/style.css + этот файл, поэтому всё
 * здесь переопределяет старые правила той же специфичности просто тем, что идёт
 * позже. Старые файлы сайта не правятся.
 *
 * Весь файл — внутри @media screen: на печати остаётся старая светлая «Лоция»
 * (тёмный фон на бумаге не нужен, таблицы должны читаться) — в любой теме.
 *
 * Темы. Тема — личная настройка человека (users.theme, список — portal/server/
 * themes.js); сервер ставит её в <html data-theme="<id>"> любой HTML-страницы
 * человека с сессией. Без атрибута (вход, приглашение) — «Глубина» с :root.
 * Каждый цвет здесь и в portal.css — только через переменные --tm-*:
 *   - палитра темы (блоки «palette:<id>»): bg, surface, line, ink, muted, accent,
 *     primary/on-primary, warn/warn-bg, error/error-bg + RGB-тройки (-rgb) для
 *     полупрозрачных оттенков: rgba(var(--tm-over-rgb), 0.12) — тонкая рамка/подложка
 *     (в тёмных темах — белым, в светлых — цветом текста), rgba(var(--tm-accent-rgb), …) —
 *     подсветка акцентом;
 *   - производные (strong, ink-soft, accent-text, pill, page, bar-bg …): у «Глубины» —
 *     её нынешние значения, у остальных — общие правила «derived:dark» / «derived:light»,
 *     выведенные из палитры (color-mix).
 * Новый цвет — новой переменной во всех темах, а не числом в правиле.
 * Старые переменные assets/style.css (--water, --surface, --ink, --accent …)
 * пересчитываются из --tm-* — страницы инструментов перекрашиваются сами.
 * Блоки палитр сверяет со списком тем portal/web/theme.test.js.
 *
 * Добавки каркаса (portal/web/shell-addon.js) — .portal-bar, .portal-menu,
 * .portal-help — создаются с атрибутом hidden и показываются только здесь, на
 * экране: старое правило [hidden]{display:none!important} прячет их на печати,
 * а правило с [hidden] ниже весомее и на экране его перебивает.
 *
 * Раскладка: .app — колонка; .app__side — верхняя полоса во всю ширину
 * (значок и «MukhLine», кнопка «Инструменты», справа ссылки портала); список инструментов
 * с переключателем «Экспорт / Импорт» — выпадающая панель .portal-menu под
 * кнопкой на любой ширине (открывает её assets/shell.js классом is-open).
 * Макеты: .superpowers/brainstorm/41798-1792325312/content/g-export-import.html
 * (вариант G1) и g-results.html. */

@media screen {
  /* ───────────── «Глубина» — тема по умолчанию ─────────────
   * .tm-swatch[data-theme] — плитки-образцы в «Моём профиле»: каждая берёт палитру
   * своей темы (только палитру — производные цвета им не нужны). */

  /* palette:depth */
  :root,
  .tm-swatch[data-theme="depth"] {
    color-scheme: dark;
    --tm-bg: #0b2236;
    --tm-surface: rgba(255, 255, 255, 0.09);   /* «стекло» поверх перелива, на вид ≈ #163448 */
    --tm-line: rgba(255, 255, 255, 0.16);
    --tm-ink: #eef5fa;
    --tm-ink-rgb: 238, 245, 250;
    --tm-muted: #a9c3d3;
    --tm-muted-rgb: 169, 195, 211;
    --tm-accent: #7fe3f0;
    --tm-accent-rgb: 127, 227, 240;
    --tm-primary: #7fe3f0;
    --tm-on-primary: #072033;
    --tm-warn: #ffd28a;
    --tm-warn-rgb: 255, 210, 138;
    --tm-warn-bg: rgba(255, 210, 138, 0.1);
    --tm-error: #ffb4a8;
    --tm-error-rgb: 255, 180, 168;
    --tm-error-bg: rgba(255, 107, 91, 0.14);
    --tm-over-rgb: 255, 255, 255;
  }

  /* Производные «Глубины» — её прежние значения как есть */
  :root {
    --tm-strong: #ffffff;                      /* заголовки, наведение */
    --tm-ink-soft: #c4d6e1;                    /* текст между основным и второстепенным */
    --tm-accent-text: #7fe3f0;                 /* акцент текстом: ссылки, номера */
    --tm-accent-h: #a5eef7;
    --tm-pill: linear-gradient(90deg, #7fe3f0, #4fb6e8);   /* главная кнопка, выбранная вкладка */
    --tm-pill-h: linear-gradient(90deg, #9aeaf4, #6cc4ee);
    --tm-switch-on: #4fb6e8;                   /* включённый тумблер, галочки */
    --tm-warn-strong: #ffe2b0;                 /* текст предупреждения на его подложке */
    --tm-on-warn: #072033;                     /* текст на заливке «внимание» (счётчик) */
    --tm-error-line: #ff8a78;                  /* левая полоса сообщения об ошибке */
    --tm-error-border: rgba(255, 140, 120, 0.4);
    --tm-page: #071624 radial-gradient(120% 90% at 0% 0%, #1f5f86 0%, #0b2236 55%, #071624 100%) fixed;
    --tm-bar-bg: rgba(7, 22, 36, 0.78);        /* верхняя полоса */
    --tm-panel-bg: rgba(9, 30, 47, 0.97);      /* выпадающая панель — почти непрозрачная */
    --tm-action-bg: rgba(11, 34, 54, 0.9);     /* полоса действия */
    --tm-select-bg: #0e2b42;                   /* выпадающий список — сплошной, иначе пункты не читаются */
    --tm-field-bg: rgba(var(--tm-over-rgb), 0.07);
    --tm-table-bg: rgba(var(--tm-over-rgb), 0.05);
    --tm-block-bg: rgba(var(--tm-over-rgb), 0.04);
    --tm-step-bg: rgba(var(--tm-over-rgb), 0.07);
    --tm-track-bg: rgba(var(--tm-over-rgb), 0.08);   /* дорожка переключателей вкладок */
    --tm-drop-bg: rgba(var(--tm-accent-rgb), 0.05);   /* зона для файлов */
    --tm-count-opacity: 0.8;                   /* счётчик «7 из 7» на вкладке — приглушён */
    --tm-shadow-menu: 0 18px 48px rgba(0, 0, 0, 0.5);
    --tm-shadow-bar: 0 10px 30px rgba(0, 0, 0, 0.35);
    /* Логотип MukhLine — картинка на белом фоне. На тёмных темах (эти значения наследуют все
     * тёмные) — на белой скруглённой плашке, значок полосы — в белом кольце */
    --tm-logo-bg: #ffffff;
    --tm-logo-blend: normal;
    --tm-logo-radius: 24px;
    --tm-logo-ring: 0 0 0 2px var(--tm-logo-bg);
  }

  /* Старые переменные assets/style.css — из текущей темы */
  :root {
    --water: rgba(var(--tm-over-rgb), 0.05);   /* подложка особых строк таблиц */
    --surface: var(--tm-surface);              /* карточки */
    --line: var(--tm-line);                    /* рамки */
    --ink: var(--tm-ink);                      /* основной текст */
    --muted: var(--tm-muted);                  /* второстепенный текст */
    --accent: var(--tm-accent-text);           /* акцент, ссылки, фокус */
    --accent-h: var(--tm-accent-h);
    --accent-t: rgba(var(--tm-accent-rgb), 0.14);
    --tint: rgba(var(--tm-over-rgb), 0.06);    /* шапки таблиц, итоговые строки */
    --depth: var(--tm-strong);                 /* заголовки (в старой теме — тёмные) */
    --depth-2: rgba(var(--tm-over-rgb), 0.08);
    --sea: var(--tm-accent);                   /* полосы дашбордов */
    --warn: var(--tm-warn);                    /* «внимание» */
    --warn-bg: var(--tm-warn-bg);
    --error: var(--tm-error);
    --error-bg: var(--tm-error-bg);
    --drop-line: rgba(var(--tm-accent-rgb), 0.55);
    --side-text: var(--tm-ink);
    --side-muted: var(--tm-muted);

    --radius: 12px;
    --radius-btn: 999px;
    --bar-pad: max(40px, calc((100% - 1240px) / 2 + 40px));
  }

  /* ───────────── Производные остальных тем ───────────── */

  /* derived:dark */
  :root[data-theme="emerald"],
  :root[data-theme="graphite"],
  :root[data-theme="sunset"],
  :root[data-theme="bordeaux"],
  :root[data-theme="steel"] {
    --tm-over-rgb: 255, 255, 255;
    --tm-bg-deep: color-mix(in srgb, var(--tm-bg) 70%, #000000);
    --tm-strong: #ffffff;
    --tm-ink-soft: color-mix(in srgb, var(--tm-ink) 55%, var(--tm-muted));
    --tm-accent-text: var(--tm-accent);
    --tm-accent-h: color-mix(in srgb, var(--tm-accent) 70%, #ffffff);
    --tm-pill: var(--tm-primary);
    --tm-pill-h: color-mix(in srgb, var(--tm-primary) 80%, #ffffff);
    --tm-switch-on: var(--tm-primary);
    --tm-warn-strong: color-mix(in srgb, var(--tm-warn) 60%, #ffffff);
    --tm-on-warn: var(--tm-bg-deep);
    --tm-error-line: var(--tm-error);
    --tm-error-border: rgba(var(--tm-error-rgb), 0.4);
    --tm-page: var(--tm-bg-deep) radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tm-accent) 18%, var(--tm-bg)) 0%, var(--tm-bg) 55%, var(--tm-bg-deep) 100%) fixed;
    --tm-bar-bg: color-mix(in srgb, var(--tm-bg-deep) 80%, transparent);
    --tm-panel-bg: color-mix(in srgb, var(--tm-surface) 97%, transparent);
    --tm-action-bg: color-mix(in srgb, var(--tm-bg) 90%, transparent);
    --tm-select-bg: var(--tm-surface);
    --tm-count-opacity: 1;
  }

  /* derived:light */
  :root[data-theme="day"],
  :root[data-theme="mint"],
  :root[data-theme="chart"],
  :root[data-theme="arctic"] {
    --tm-over-rgb: var(--tm-ink-rgb);          /* тонкие рамки и подложки — цветом текста */
    --tm-strong: var(--tm-ink);
    --tm-ink-soft: color-mix(in srgb, var(--tm-ink) 70%, var(--tm-muted));
    /* Акцент текстом — темнее самого акцента: на светлом фоне и на подсветке акцентом
     * (номер страницы, пройденный шаг) чистый акцент светлых палитр не даёт 4,5:1 */
    --tm-accent-text: color-mix(in srgb, var(--tm-accent) 75%, #000000);
    --tm-accent-h: color-mix(in srgb, var(--tm-accent-text) 80%, #000000);
    --tm-pill: var(--tm-primary);
    --tm-pill-h: color-mix(in srgb, var(--tm-pill) 85%, #000000);
    --tm-switch-on: var(--tm-pill);
    --tm-warn-strong: color-mix(in srgb, var(--tm-warn) 80%, #000000);
    --tm-on-warn: #ffffff;
    --tm-error-line: var(--tm-error);
    --tm-error-border: rgba(var(--tm-error-rgb), 0.35);
    --tm-page: var(--tm-bg) radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tm-accent) 10%, var(--tm-surface)) 0%, var(--tm-bg) 55%) fixed;
    --tm-bar-bg: color-mix(in srgb, var(--tm-surface) 88%, transparent);
    --tm-panel-bg: var(--tm-surface);
    --tm-action-bg: color-mix(in srgb, var(--tm-surface) 94%, transparent);
    --tm-select-bg: var(--tm-surface);
    --tm-field-bg: var(--tm-surface);
    --tm-table-bg: var(--tm-surface);
    --tm-block-bg: var(--tm-surface);
    --tm-step-bg: var(--tm-surface);
    --tm-track-bg: var(--tm-surface);
    --tm-drop-bg: var(--tm-surface);
    --tm-count-opacity: 1;
    --tm-shadow-menu: 0 18px 48px rgba(var(--tm-ink-rgb), 0.18);
    --tm-shadow-bar: 0 10px 30px rgba(var(--tm-ink-rgb), 0.1);
    /* На светлых белый фон логотипа растворяется в фоне страницы (multiply) — без плашки и рамки */
    --tm-logo-blend: multiply;
    --tm-logo-radius: 0;
    --tm-logo-ring: none;
  }

  /* ───────────── Палитры остальных тем (значения — из брифа, как есть) ─────────────
   * Ошибка: в тёмных темах светло-красная, в светлых — тёмно-красная на розовом,
   * как у старого сайта. Акцент текстом в светлых темах — темнее (см. derived:light),
   * а где главная кнопка с белым текстом не дотягивает до 4,5:1, кнопка того же цвета,
   * чуть темнее (--tm-pill); сама палитра не меняется. */

  /* palette:emerald */
  :root[data-theme="emerald"],
  .tm-swatch[data-theme="emerald"] {
    color-scheme: dark;
    --tm-bg: #0c2a1f;
    --tm-surface: #143a2c;
    --tm-line: #245540;
    --tm-ink: #eaf7f0;
    --tm-ink-rgb: 234, 247, 240;
    --tm-muted: #9fc7b3;
    --tm-muted-rgb: 159, 199, 179;
    --tm-accent: #5fe0a5;
    --tm-accent-rgb: 95, 224, 165;
    --tm-primary: #5fe0a5;
    --tm-on-primary: #062a1b;
    --tm-warn: #f5d36b;
    --tm-warn-rgb: 245, 211, 107;
    --tm-warn-bg: #3b3518;
    --tm-error: #ff8a80;
    --tm-error-rgb: 255, 138, 128;
    --tm-error-bg: rgba(255, 138, 128, 0.14);
  }

  /* palette:day */
  :root[data-theme="day"],
  .tm-swatch[data-theme="day"] {
    color-scheme: light;
    --tm-bg: #f3f6f8;
    --tm-surface: #ffffff;
    --tm-line: #d8e1e8;
    --tm-ink: #14212b;
    --tm-ink-rgb: 20, 33, 43;
    --tm-muted: #5b6b78;
    --tm-muted-rgb: 91, 107, 120;
    --tm-accent: #1d6fb8;
    --tm-accent-rgb: 29, 111, 184;
    --tm-primary: #1d6fb8;
    --tm-on-primary: #ffffff;
    --tm-warn: #8a5a00;
    --tm-warn-rgb: 138, 90, 0;
    --tm-warn-bg: #fdf0d5;
    --tm-error: #b42318;
    --tm-error-rgb: 180, 35, 24;
    --tm-error-bg: #fdecea;
  }

  /* palette:mint */
  :root[data-theme="mint"],
  .tm-swatch[data-theme="mint"] {
    color-scheme: light;
    --tm-bg: #e9f4ee;
    --tm-surface: #ffffff;
    --tm-line: #cfe3d7;
    --tm-ink: #163326;
    --tm-ink-rgb: 22, 51, 38;
    --tm-muted: #55705f;
    --tm-muted-rgb: 85, 112, 95;
    --tm-accent: #1f8a5b;
    --tm-accent-rgb: 31, 138, 91;
    --tm-primary: #1f8a5b;
    --tm-on-primary: #ffffff;
    --tm-warn: #7a5200;
    --tm-warn-rgb: 122, 82, 0;
    --tm-warn-bg: #fbefcf;
    --tm-error: #b42318;
    --tm-error-rgb: 180, 35, 24;
    --tm-error-bg: #fdecea;
    /* белым по кнопке #1f8a5b — 4,3:1: кнопка чуть темнее */
    --tm-pill: color-mix(in srgb, var(--tm-primary) 90%, #000000);
  }

  /* palette:graphite */
  :root[data-theme="graphite"],
  .tm-swatch[data-theme="graphite"] {
    color-scheme: dark;
    --tm-bg: #17191c;
    --tm-surface: #22252a;
    --tm-line: #363a40;
    --tm-ink: #eceae6;
    --tm-ink-rgb: 236, 234, 230;
    --tm-muted: #a3a09a;
    --tm-muted-rgb: 163, 160, 154;
    --tm-accent: #ff9f43;
    --tm-accent-rgb: 255, 159, 67;
    --tm-primary: #ff9f43;
    --tm-on-primary: #2a1500;
    --tm-warn: #ff8a80;
    --tm-warn-rgb: 255, 138, 128;
    --tm-warn-bg: #402020;
    /* «внимание» здесь уже светло-красное — ошибка ярче, чтобы их различать */
    --tm-error: #ff6b6b;
    --tm-error-rgb: 255, 107, 107;
    --tm-error-bg: rgba(255, 107, 107, 0.14);
  }

  /* palette:chart */
  :root[data-theme="chart"],
  .tm-swatch[data-theme="chart"] {
    color-scheme: light;
    --tm-bg: #f5efe3;
    --tm-surface: #fffaf1;
    --tm-line: #e3d7c2;
    --tm-ink: #1b2a3a;
    --tm-ink-rgb: 27, 42, 58;
    --tm-muted: #6b6458;
    --tm-muted-rgb: 107, 100, 88;
    --tm-accent: #c4532f;
    --tm-accent-rgb: 196, 83, 47;
    --tm-primary: #1b2a3a;
    --tm-on-primary: #f5efe3;
    --tm-warn: #8a3517;
    --tm-warn-rgb: 138, 53, 23;
    --tm-warn-bg: #f6dfd3;
    --tm-error: #b42318;
    --tm-error-rgb: 180, 35, 24;
    --tm-error-bg: #fdecea;
    /* кнопка тёмная — при наведении светлеет, а не темнеет */
    --tm-pill-h: color-mix(in srgb, var(--tm-primary) 85%, #ffffff);
  }

  /* palette:sunset */
  :root[data-theme="sunset"],
  .tm-swatch[data-theme="sunset"] {
    color-scheme: dark;
    --tm-bg: #1d1630;
    --tm-surface: #2a2045;
    --tm-line: #3e3260;
    --tm-ink: #f1ecf8;
    --tm-ink-rgb: 241, 236, 248;
    --tm-muted: #b4a8c9;
    --tm-muted-rgb: 180, 168, 201;
    --tm-accent: #ff8a65;
    --tm-accent-rgb: 255, 138, 101;
    --tm-primary: #ff8a65;
    --tm-on-primary: #2d0f05;
    --tm-warn: #ffd27a;
    --tm-warn-rgb: 255, 210, 122;
    --tm-warn-bg: #3e3420;
    --tm-error: #ff8a80;
    --tm-error-rgb: 255, 138, 128;
    --tm-error-bg: rgba(255, 138, 128, 0.14);
  }

  /* palette:arctic */
  :root[data-theme="arctic"],
  .tm-swatch[data-theme="arctic"] {
    color-scheme: light;
    --tm-bg: #eef6fa;
    --tm-surface: #ffffff;
    --tm-line: #cfe4ec;
    --tm-ink: #10303d;
    --tm-ink-rgb: 16, 48, 61;
    --tm-muted: #56717d;
    --tm-muted-rgb: 86, 113, 125;
    --tm-accent: #0f8f9a;
    --tm-accent-rgb: 15, 143, 154;
    --tm-primary: #0f8f9a;
    --tm-on-primary: #ffffff;
    --tm-warn: #7d4f00;
    --tm-warn-rgb: 125, 79, 0;
    --tm-warn-bg: #fdeccf;
    --tm-error: #b42318;
    --tm-error-rgb: 180, 35, 24;
    --tm-error-bg: #fdecea;
    /* белым по кнопке #0f8f9a — 3,9:1: кнопка чуть темнее */
    --tm-pill: color-mix(in srgb, var(--tm-primary) 88%, #000000);
  }

  /* palette:bordeaux */
  :root[data-theme="bordeaux"],
  .tm-swatch[data-theme="bordeaux"] {
    color-scheme: dark;
    --tm-bg: #2a0f17;
    --tm-surface: #3a1822;
    --tm-line: #552633;
    --tm-ink: #f7ecee;
    --tm-ink-rgb: 247, 236, 238;
    --tm-muted: #c6a7ae;
    --tm-muted-rgb: 198, 167, 174;
    --tm-accent: #e2b860;
    --tm-accent-rgb: 226, 184, 96;
    --tm-primary: #e2b860;
    --tm-on-primary: #2a1a00;
    --tm-warn: #ffb37a;
    --tm-warn-rgb: 255, 179, 122;
    --tm-warn-bg: #4a2a14;
    --tm-error: #ff8a80;
    --tm-error-rgb: 255, 138, 128;
    --tm-error-bg: rgba(255, 138, 128, 0.14);
  }

  /* palette:steel */
  :root[data-theme="steel"],
  .tm-swatch[data-theme="steel"] {
    color-scheme: dark;
    --tm-bg: #26303a;
    --tm-surface: #323e4a;
    --tm-line: #465462;
    --tm-ink: #eef2f5;
    --tm-ink-rgb: 238, 242, 245;
    --tm-muted: #a7b3bd;
    --tm-muted-rgb: 167, 179, 189;
    --tm-accent: #c6e85a;
    --tm-accent-rgb: 198, 232, 90;
    --tm-primary: #c6e85a;
    --tm-on-primary: #1f2a00;
    --tm-warn: #ffc560;
    --tm-warn-rgb: 255, 197, 96;
    --tm-warn-bg: #4a3a1a;
    --tm-error: #ff8a80;
    --tm-error-rgb: 255, 138, 128;
    --tm-error-bg: rgba(255, 138, 128, 0.14);
  }

  /* ───────────── Общее ───────────── */

  body {
    min-height: 100vh;
    background: var(--tm-page);
    color: var(--ink);
  }

  ::selection {
    background: rgba(var(--tm-accent-rgb), 0.35);
    color: var(--tm-strong);
  }

  a {
    color: var(--accent);
  }

  h2,
  h3 {
    color: var(--tm-strong);
  }

  /* ───────────── Каркас: полоса сверху + рабочая область ───────────── */

  .app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .app__side {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px var(--bar-pad);
    background: var(--tm-bar-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(var(--tm-over-rgb), 0.1);
    color: var(--side-text);
    overflow: visible;
  }

  .app__side::after {
    display: none;
  }

  .app__main {
    margin: 0 auto;
    padding: 28px 40px 40px;
  }

  .side__brand {
    order: 1;
    padding: 4px 0;
    color: var(--tm-strong);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .side__brand-sub,
  .side__safe {
    display: none;
  }

  /* Бренд MukhLine в полосе: круглый значок (portal/web/mukhline-badge.png — муха-капитан
   * из логотипа) и слово «Mukh» + «Line» цветами темы. Разметка — shell-addon.js:
   * <a class="side__brand"><img class="mk-brand__badge"><span class="mk-brand__word">
   * Mukh<span class="mk-brand__line">Line</span></span></a>. У картинки белый фон:
   * на тёмных темах значок в белом кольце, на светлых — без рамки (--tm-logo-ring). */
  .side__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .mk-brand__badge {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--tm-logo-bg);
    box-shadow: var(--tm-logo-ring);
  }

  .mk-brand__word {
    color: var(--tm-strong);
    white-space: nowrap;
  }

  .mk-brand__line {
    color: var(--tm-accent-text);
  }

  .side__menu-btn {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(var(--tm-over-rgb), 0.3);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  }

  .side__menu-btn::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
  }

  .side__menu-btn:hover {
    border-color: var(--tm-accent);
  }

  .side__menu-btn[aria-expanded="true"] {
    background: rgba(var(--tm-accent-rgb), 0.16);
    border-color: var(--tm-accent);
    color: var(--tm-strong);
  }

  .side__menu-btn[aria-expanded="true"]::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }

  /* Ссылки портала справа: «Журнал», «Пользователи», имя, «Выйти» */

  .portal-bar[hidden] {
    order: 3;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
    margin-left: auto;
    min-width: 0;
    font-size: 15px;
  }

  .portal-bar__link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .portal-bar__link:hover {
    color: var(--tm-strong);
  }

  .portal-bar__count {
    display: inline-block;
    min-width: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--tm-warn);
    color: var(--tm-on-warn);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
  }

  .portal-bar__user {
    display: inline-block;
    max-width: 220px;
    padding: 4px 12px;
    border: 1px solid rgba(var(--tm-over-rgb), 0.2);
    border-radius: 999px;
    background: rgba(var(--tm-over-rgb), 0.1);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .portal-bar__user:hover {
    border-color: var(--tm-accent);
  }

  /* Выпадающая панель: вкладки «Экспорт / Импорт» и список инструментов */

  .portal-menu[hidden] {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--bar-pad);
    z-index: 30;
    display: none !important;
    width: min(440px, calc(100% - 32px));
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 12px;
    background: var(--tm-panel-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--tm-shadow-menu);
  }

  /* Колонка, а не grid: старые правила узкого экрана дают .side__tabs и
   * .side__nav grid-area — в grid-панели они легли бы друг на друга. */
  .app__side.is-open .portal-menu[hidden] {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }

  .portal-menu .side__tabs {
    flex: none;
  }

  .side__tabs {
    padding: 3px;
    background: var(--tm-track-bg);
    border: 1px solid var(--line);
    border-radius: 999px;
  }

  .side__tab {
    min-height: 40px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 16px;
  }

  .side__tab:hover {
    color: var(--tm-strong);
  }

  .side__tab[aria-selected="true"] {
    background: var(--tm-pill);
    color: var(--tm-on-primary);
  }

  .side__tab[aria-selected="true"]:focus-visible {
    outline-color: var(--tm-strong);
  }

  .portal-menu .side__nav {
    display: block;
    flex: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .side__link {
    border-radius: 10px;
    color: var(--ink);
  }

  .side__link:hover {
    background: rgba(var(--tm-over-rgb), 0.08);
    color: var(--tm-strong);
  }

  .side__link[aria-current="page"] {
    background: rgba(var(--tm-accent-rgb), 0.16);
    color: var(--tm-strong);
  }

  .side__link[aria-current="page"]:focus-visible {
    outline-color: var(--tm-strong);
  }

  .side__num,
  .side__link[aria-current="page"] .side__num {
    color: var(--accent);
  }

  .side__fmt,
  .side__link[aria-current="page"] .side__fmt {
    color: var(--muted);
  }

  /* ───────────── Заголовок страницы, крошки, справка ───────────── */

  .crumbs {
    font-family: var(--font-ui);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
  }

  .crumbs a {
    color: var(--accent);
    font-weight: 600;
  }

  .crumbs a:hover {
    color: var(--tm-strong);
  }

  .page__title {
    color: var(--tm-strong);
  }

  .page__num {
    border-color: rgba(var(--tm-accent-rgb), 0.4);
    background: rgba(var(--tm-accent-rgb), 0.12);
    color: var(--accent);
  }

  .page__subtitle {
    color: var(--muted);
  }

  .portal-help[hidden] {
    display: block !important;
    margin: -16px 0 24px;
    font-size: 16px;
  }

  .portal-help a {
    color: var(--accent);
    text-underline-offset: 3px;
  }

  .portal-help a:hover {
    color: var(--tm-strong);
  }

  /* ───────────── Шаги 1 → 2 → 3 — «пилюли» ───────────── */

  .steps {
    gap: 8px;
    color: var(--muted);
  }

  .steps li {
    flex: 1 1 auto;
    gap: 10px;
    min-height: 40px;
    padding: 5px 16px 5px 6px;
    border: 1px solid rgba(var(--tm-over-rgb), 0.12);
    border-radius: 999px;
    background: var(--tm-step-bg);
  }

  .steps li + li::before {
    display: none;
  }

  .steps__num {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(var(--tm-over-rgb), 0.25);
    background: transparent;
    color: var(--muted);
  }

  .steps li.is-done {
    color: var(--accent);
  }

  .steps li.is-done .steps__num {
    background: rgba(var(--tm-accent-rgb), 0.16);
    border-color: var(--tm-accent);
    color: var(--accent);
  }

  .steps li.is-current {
    border-color: var(--tm-accent);
    background: rgba(var(--tm-accent-rgb), 0.16);
    color: var(--tm-strong);
  }

  .steps li.is-current .steps__num {
    border-color: transparent;
    background: var(--tm-pill);
    color: var(--tm-on-primary);
  }

  /* ───────────── Кнопки: главная — «пилюля» цвета темы, остальные — контур ───────────── */

  .btn {
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--tm-pill);
    color: var(--tm-on-primary);
    font-weight: 700;
  }

  .btn:hover:not(:disabled) {
    background: var(--tm-pill-h);
    border-color: transparent;
  }

  .btn:disabled {
    background: rgba(var(--tm-over-rgb), 0.08);
    border-color: rgba(var(--tm-over-rgb), 0.12);
    color: rgba(var(--tm-ink-rgb), 0.45);
  }

  .btn--secondary {
    background: transparent;
    border-color: rgba(var(--tm-over-rgb), 0.3);
    color: var(--ink);
    font-weight: 600;
  }

  .btn--secondary:hover:not(:disabled) {
    background: rgba(var(--tm-accent-rgb), 0.08);
    border-color: var(--tm-accent);
    color: var(--tm-strong);
  }

  .btn--secondary:disabled {
    background: transparent;
    border-color: rgba(var(--tm-over-rgb), 0.14);
    color: rgba(var(--tm-ink-rgb), 0.4);
  }

  /* ───────────── Зона для файлов и список ───────────── */

  .dropzone {
    border-width: 1.5px;
    background: var(--tm-drop-bg);
    color: var(--tm-ink-soft);
  }

  .dropzone.dropzone--active {
    border-color: var(--tm-accent);
    background: var(--accent-t);
    color: var(--tm-strong);
  }

  .file-list {
    background: var(--surface);
    border-color: var(--line);
  }

  .file-list li {
    border-bottom-color: rgba(var(--tm-over-rgb), 0.08);
  }

  .file-list__remove:hover {
    background: rgba(var(--tm-over-rgb), 0.1);
    color: var(--tm-strong);
  }

  /* ───────────── Поля и тумблер ───────────── */

  .field input,
  .field select,
  .field textarea {
    border-color: rgba(var(--tm-over-rgb), 0.28);
    border-radius: 10px;
    background: var(--tm-field-bg);
    color: var(--ink);
  }

  .field input::placeholder {
    color: rgba(var(--tm-muted-rgb), 0.6);
  }

  .field input:hover {
    border-color: rgba(var(--tm-over-rgb), 0.45);
  }

  .switch__track {
    background: rgba(var(--tm-over-rgb), 0.22);
  }

  .switch__input:checked + .switch__track {
    background: var(--tm-switch-on);
  }

  /* ───────────── Полоса действия ───────────── */

  .action-bar {
    background: var(--tm-action-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: var(--line);
    border-radius: 16px;
    box-shadow: var(--tm-shadow-bar);
  }

  /* ───────────── Результат ───────────── */

  .result {
    padding-top: 24px;
    border-top: 1px solid rgba(var(--tm-over-rgb), 0.12);
  }

  .stat {
    background: var(--surface);
    border-color: var(--line);
  }

  .stat__value {
    color: var(--tm-strong);
  }

  .stat__label {
    color: var(--muted);
  }

  .data-table {
    background: var(--tm-table-bg);
    border-color: var(--line);
  }

  .data-table th {
    background: var(--tint);
    color: var(--muted);
    border-bottom-color: rgba(var(--tm-over-rgb), 0.18);
  }

  .data-table td {
    border-bottom-color: rgba(var(--tm-over-rgb), 0.07);
  }

  .data-table tr.is-total td,
  .dashboard-row--port-total td {
    background: var(--tint);
    color: var(--tm-strong);
  }

  .dashboard-row--grand-total td {
    background: rgba(var(--tm-over-rgb), 0.1);
    border-top: 1px solid rgba(var(--tm-over-rgb), 0.25);
    color: var(--tm-strong);
  }

  .dashboard-row--empty td {
    background: rgba(var(--tm-over-rgb), 0.03);
    color: var(--muted);
  }

  .dashboard-block {
    padding: 16px 18px 4px;
    background: var(--tm-block-bg);
    border: 1px solid rgba(var(--tm-over-rgb), 0.12);
    border-radius: var(--radius);
  }

  .dashboard-block > :first-child {
    margin-top: 0;
  }

  .dashboard-block .data-table {
    background: transparent;
  }

  .port-bar {
    background: rgba(var(--tm-over-rgb), 0.1);
  }

  .port-bar__fill {
    opacity: 0.85;
  }

  /* ───────────── Сообщения ───────────── */

  .error-message {
    border-color: var(--tm-error-border);
    border-left-color: var(--tm-error-line);
  }

  .warning-message {
    border-color: rgba(var(--tm-warn-rgb), 0.35);
    border-left-color: var(--warn);
    color: var(--tm-warn-strong);
  }

  /* ───────────── Узкий экран ───────────── */

  @media (max-width: 699.98px) {
    .app__side {
      position: relative;
      padding: 10px 16px;
      gap: 6px 12px;
    }

    .side__menu-btn {
      margin-left: auto;
    }

    .portal-bar[hidden] {
      flex-basis: 100%;
      gap: 2px 12px;
      margin-left: 0;
      font-size: 14px;
    }

    .portal-bar__user {
      max-width: 130px;
      padding: 3px 10px;
    }

    .portal-menu[hidden] {
      left: 16px;
      right: 16px;
      width: auto;
    }

    .app__main {
      padding: 20px 16px 32px;
    }

    .portal-help[hidden] {
      margin-top: -16px;
    }
  }
}