/* ============================================================================
   Helomi · стиль NeoHelomi (NEOSQ_V1) · токени і базові класи
   ============================================================================
   Джерело правди для ВСЬОГО інтерфейсу Helomi: оболонки хоста, розділів CRM
   (crm-ui), вкладок складу, пультів ШІ-агентів, мобільної версії.
   Еталон вигляду: docs/design/reference/structure-mock.html (варіант D, фон «Насичений»),
   опис і правила: docs/design/СТИЛЬ.md, скіл для сесій: .claude/skills/squaregram-design/.

   Ідея стилю одним реченням: сіро-блакитне полотно з м'якими кольоровими плямами,
   на ньому чотири шари прозорого білого (лист → група → картка), без тіней і рамок,
   великі радіуси, чорне лише для одного головного на екрані, червона крапка для уваги,
   пастельні пігулки статусів, контурні іконки 1.6 px, шрифт Onest.

   Як підключати:
   - хост (бандл без вихідників): цей файл іде першим у docs/design/host-theme.css
     (шар поверх Tailwind), який деплоїться як /assets/sg-theme-<тег>.css і лінкується з index.html;
   - crm-ui: import tokens from "../../docs/design/tokens.css?inline" у src/styles.ts
     (замість docs/crm/design-tokens.css; старі імена змінних нижче лишаються робочими — «місток»).
   ========================================================================== */

:root {
  /* ── Полотно (фон усього застосунку). Плями стоять на місцях, узгоджених із власником 10.10 ── */
  --sg-canvas: #dde2eb;
  --sg-canvas-bg:
    radial-gradient(760px 520px at 86% 18%, #a4c0ee 0%, rgba(164, 192, 238, 0) 66%),
    radial-gradient(680px 480px at 52% 104%, #cbbff4 0%, rgba(203, 191, 244, 0) 64%),
    radial-gradient(720px 520px at 4% 92%, #f5d3bb 0%, rgba(245, 211, 187, 0) 64%),
    radial-gradient(760px 420px at 22% 8%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%),
    var(--sg-canvas);
  /* Нейтральний варіант полотна (сторінки друку, PDF, вкладки-попапи, де плями зайві) */
  --sg-canvas-plain: linear-gradient(180deg, #e4e5e8 0%, #e0e2e6 50%, #d7dce8 100%);

  /* ── Чотири шари скла. Кожен наступний світліший; лист і група розмивають те, що під ними ── */
  --sg-sheet: rgba(255, 255, 255, .30);   /* великий лист розділу на все полотно */
  --sg-group: rgba(255, 255, 255, .50);   /* група всередині листа: колонка, блок картки, панель фільтрів */
  --sg-card: rgba(255, 255, 255, .86);    /* картка запису, рядок таблиці, поле вводу */
  --sg-solid: #ffffff;                    /* суцільний білий: випадні меню, шторки, модалки */
  --sg-blur: 24px;                        /* backdrop-filter листа і групи */
  --sg-blur-sm: 18px;                     /* backdrop-filter кнопок-кружечків, доків, пігулок */
  --sg-glass-edge: inset 0 0 0 1px rgba(255, 255, 255, .7); /* єдина «межа» скла: світла кромка зсередини */

  /* ── Чорнило ── */
  --sg-ink: #141518;        /* основний текст, заголовки */
  --sg-ink-2: #2b2e35;      /* іконки, другорядні заголовки */
  --sg-muted: #5e626b;      /* підписи, ролі, описи */
  --sg-faint: #8a8e97;      /* підписи груп, плейсхолдери, лічильники */
  --sg-black: #0e0e10;      /* ЧОРНЕ: один головний елемент на екрані + активний пункт */
  --sg-black-hover: #26272b; /* чорне під курсором */
  --sg-on-black: #ffffff;
  --sg-on-black-muted: #b9bcc4;

  /* ── Ніч першого екрана головної (виняток власника 16.10, лише перший екран /welcome: нічний вихор Ломі, далі прокрутка
     переходить у полотно). Скло ночі — той самий білий, лише прозоріший; більше ніде не вживати ── */
  --sg-night: var(--sg-gray-950);
  --sg-night-ink: #ffffff; --sg-night-ink-2: #e1e4ea; --sg-night-muted: #b9bcc4; --sg-night-faint: #9a9fa9;
  --sg-night-group: rgba(255, 255, 255, .08); --sg-night-card: rgba(255, 255, 255, .12);
  --sg-night-edge: inset 0 0 0 1px rgba(255, 255, 255, .14); --sg-night-outline: rgba(255, 255, 255, .3);
  --sg-night-glow: rgba(139, 110, 232, .55);  /* violet-500: сяйво головної кнопки й Ломі */

  /* ── Лінії. Рамок немає; є кромка скла (вище) і дві обводки ── */
  --sg-line: rgba(20, 21, 24, .08);          /* розділювачі рядків таблиць, списків */
  --sg-outline: rgba(20, 21, 24, .22);       /* порожні круглі кнопки, кнопки-контури */
  --sg-outline-field: rgba(20, 21, 24, .10); /* поля вводу у спокої */
  --sg-outline-focus: rgba(20, 21, 24, .45); /* поля вводу у фокусі */

  /* ── Увага і статуси ── */
  --sg-attention: #ee5d64;  /* червона крапка на іконці, вузол дерева, скасування, помилка */
  --sg-ok: #1f7a4d;         /* текст «успішно», знак ✓ в журналі; не заливка */
  --sg-warn: #b4770c;
  --sg-info: #244268;
  /* Пастельні пігулки: фон = колір 28% на білому, текст = колір 70% з чорним.
     Для кольорів із налаштувань (етапи, джерела) — через color-mix, див. .sg-pill[style="--c"] нижче. */
  --sg-pastel-blue: #cfe0f6;   --sg-pastel-blue-ink: #244268;
  --sg-pastel-violet: #e7e2f8; --sg-pastel-violet-ink: #46387f;
  --sg-pastel-green: #d6ecdf;  --sg-pastel-green-ink: #1f5a3d;
  --sg-pastel-yellow: #f2dfa6; --sg-pastel-yellow-ink: #6b4e08;
  --sg-pastel-red: #f8d7d6;    --sg-pastel-red-ink: #7e3230;
  --sg-pastel-gray: rgba(255, 255, 255, .85); --sg-pastel-gray-ink: #3b3e45;
  /* Повна заливка лише для червоного «скасовано/прострочено» (як «Scheduled» на референсі) */
  --sg-solid-red: #ec7b80;


  /* ── ПОВНА ПАЛІТРА NeoHelomi. Інших кольорів в інтерфейсі нема (власник 10.10: «жодних інших кольорів»).
     Нейтралі + чорний + п'ять смислових гам (увага, успіх, попередження, інфо, мітка). Tailwind-кольори хоста,
     стилі CRM і пульти агентів зводяться лише до цих значень (host-theme.css, neo.css). ── */
  --sg-gray-50: #f5f6f9;  --sg-gray-100: #eceef2; --sg-gray-200: #e1e4ea; --sg-gray-300: #cdd1d9; --sg-gray-400: #9a9fa9;
  --sg-gray-500: #6b7079; --sg-gray-600: #4c5058; --sg-gray-700: #3b3e45; --sg-gray-800: #2b2e35; --sg-gray-900: #141518; --sg-gray-950: #0e0e10;
  --sg-red-50: #fcefef;   --sg-red-100: #f8d7d6;  --sg-red-200: #f3c0c2;  --sg-red-300: #ec9297;  --sg-red-400: #ee5d64;
  --sg-red-500: #ee5d64;  --sg-red-600: #d9474f;  --sg-red-700: #a8353c;  --sg-red-800: #7e3230;  --sg-red-900: #5c2523;
  --sg-green-50: #ecf6f0; --sg-green-100: #d6ecdf; --sg-green-200: #b9dcc8; --sg-green-300: #8cc6a6; --sg-green-400: #4fa77b;
  --sg-green-500: #2f8f5f; --sg-green-600: #1f7a4d; --sg-green-700: #1f5a3d; --sg-green-800: #18452f; --sg-green-900: #123323;
  --sg-amber-50: #fbf3e0; --sg-amber-100: #f2dfa6; --sg-amber-200: #ead08a; --sg-amber-300: #dcb45a; --sg-amber-400: #d4900a;
  --sg-amber-500: #c98a0b; --sg-amber-600: #b4770c; --sg-amber-700: #8a6410; --sg-amber-800: #6b4e08; --sg-amber-900: #4d3806;
  --sg-blue-50: #edf3fc;  --sg-blue-100: #cfe0f6;  --sg-blue-200: #b5cdee;  --sg-blue-300: #8fb2e3;  --sg-blue-400: #5b8fd6;
  --sg-blue-500: #3b6fb6; --sg-blue-600: #2f5b99;  --sg-blue-700: #244268;  --sg-blue-800: #1c3352;  --sg-blue-900: #14243a;
  --sg-violet-50: #f2effc; --sg-violet-100: #e7e2f8; --sg-violet-200: #d3caf2; --sg-violet-300: #b6a7ea; --sg-violet-400: #9a85e4;
  --sg-violet-500: #8b6ee8; --sg-violet-600: #6b52c8; --sg-violet-700: #46387f; --sg-violet-800: #352a61; --sg-violet-900: #251d44;

  /* ── Радіуси ── */
  --sg-r-sheet: 34px;
  --sg-r-group: 26px;
  --sg-r-card: 20px;
  --sg-r-row: 16px;
  --sg-r-tile: 26%;      /* чорна плитка лого: 12.5 px на 48 px */
  --sg-r-pill: 999px;

  /* ── Розміри керування ── */
  --sg-circ: 44px;       /* кругла кнопка рейки, шапки, доку */
  --sg-circ-sm: 34px;    /* кругла кнопка дії в рядку (чат, ⋯, ✓) */
  --sg-ctl-h: 40px;      /* висота поля, селекта, пігулки-кнопки */
  --sg-ctl-h-sm: 32px;   /* вкладка, маленька кнопка */
  --sg-rail-w: 84px;     /* ширина рейки меню на десктопі */
  --sg-halo: 44px;       /* ореол аватара */
  --sg-av: 34px;         /* сам аватар */
  --sg-icon: 18px;
  --sg-icon-sm: 15px;
  --sg-stroke: 1.6px;    /* товщина лінії іконок */

  /* ── Відступи ── */
  /* компактна щільність CRM (власник 10.10: «щоб більше влізало на екран») — ті самі значення, що були */
  --sg-space-1: 3px;
  --sg-space-2: 6px;
  --sg-space-3: 10px;
  --sg-space-4: 12px;
  --sg-space-5: 16px;
  --sg-space-6: 18px;
  --sg-space-8: 24px;
  --sg-page-x: 26px;     /* бічний відступ контенту від рейки і краю на десктопі */
  --sg-page-x-m: 12px;   /* на телефоні */

  /* ── Шрифт ── */
  --sg-font: "Onest", "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sg-fs-title: 30px;   /* заголовок сторінки, вага 500, letter-spacing -.03em */
  --sg-fs-h2: 20px;      /* заголовок листа/блоку, вага 500 */
  --sg-fs-h3: 15.5px;    /* назва групи у листі, вага 500 */
  --sg-fs-name: 13.5px;  /* назва запису в картці/рядку, вага 600 */
  --sg-fs-body: 14px;    /* текст, вага 400 */
  --sg-fs-sm: 13px;      /* описи, підзаголовки */
  --sg-fs-xs: 12px;      /* роль, другий рядок, комірки таблиць */
  --sg-fs-cap: 10.5px;   /* ПІДПИС ГРУПИ, вага 600, letter-spacing .1em, uppercase */
  --sg-fs-kpi: 26px;     /* число в показнику, вага 500, tabular-nums */

  /* ── Тіні. Їх дві, і обидві не для карток ── */
  --sg-shadow-black: 0 14px 24px -10px rgba(0, 0, 0, .6);     /* чорна кнопка/плитка */
  --sg-shadow-pop: 0 24px 48px -24px rgba(20, 24, 32, .45);   /* випадне меню, шторка, модалка */
  --sg-shadow-none: none;

  /* ── Рух ── */
  --sg-ease: .18s ease;

  /* ── Щільність таблиць (власник 10.10: «щоб більше влізало на екран») ── */
  --sg-cell-pad: 5px 10px;
  --sg-cell-fs: 12px;
  --sg-th-fs: 10.5px;

  /* ================= МІСТОК до старих імен crm-ui (docs/crm/design-tokens.css) =================
     Старі класи sgc-* одразу отримують новий вигляд; компонентні правки — у crm-ui/src/neo.css.
     Прибрати, коли всі розділи переведено на класи sg-* (див. ПЛАН-РЕДИЗАЙНУ.md). */
  --sg-blue: #0f7cb4;                        /* фірмовий синій: графіки, синя версія лого */
  --sg-brand: var(--sg-black);               /* «акцент» CRM = чорний: головні кнопки, активні вкладки */
  --sg-brand-600: #26272b;
  --sg-brand-50: rgba(20, 21, 24, .06);      /* м'яке підсвічування вибраного на білому */
  --sg-bg: rgba(20, 21, 24, .045);           /* тонка заливка чипів/шапок на білому й на склі */
  --sg-panel: #ffffff;                       /* картки, шторки, меню — суцільні */
  --sg-panel-border: rgba(20, 21, 24, .08);  /* тонка межа полів і чекбоксів; панелі розділів її знімають (neo.css) */
  --sg-panel-radius: var(--sg-r-card);
  --sg-panel-shadow: none;
  --sg-text: var(--sg-ink);
  --sg-text-muted: var(--sg-muted);
  --sg-text-faint: var(--sg-faint);
  --sg-danger: #d9474f;
  --sg-radius-sm: 10px;
  --sg-radius-pill: var(--sg-r-pill);
  --sg-font-sm: 12px;
  --sg-font-md: 13px;
  --sg-font-lg: 18px;
  /* кольори етапів і джерел: лишаються як джерело кольору, подаються пастеллю (neo.css, .sg-pill) */
  --sg-stage-new: var(--sg-gray-500); --sg-stage-accepted: var(--sg-blue-500); --sg-stage-to_pick: var(--sg-amber-400); --sg-stage-picked: var(--sg-violet-500);
  --sg-stage-sent: var(--sg-green-500); --sg-stage-won: var(--sg-green-700); --sg-stage-lost: var(--sg-red-500); --sg-stage-help: var(--sg-amber-600); --sg-stage-return: var(--sg-red-800);
  --sg-src-prom: var(--sg-violet-500); --sg-src-rozetka: var(--sg-green-500); --sg-src-olx: var(--sg-amber-400); --sg-src-kasta: var(--sg-red-400);
  --sg-src-epicentr: var(--sg-green-400); --sg-src-site: var(--sg-blue-500); --sg-src-telegram: var(--sg-blue-400);
}

/* ============================================================================
   Базові класи sg-* (ті самі в хості й у crm-ui). Префікс sg-, щоб не битися з Tailwind бандла.
   ========================================================================== */

/* Полотно: ставиться на кореневий контейнер застосунку (main хоста або .sg-app) */
.sg-canvas { background: var(--sg-canvas-bg); color: var(--sg-ink); font-family: var(--sg-font); font-size: var(--sg-fs-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.sg-canvas--plain { background: var(--sg-canvas-plain); }

/* Шари скла */
.sg-sheet { background: var(--sg-sheet); border-radius: var(--sg-r-sheet); backdrop-filter: blur(var(--sg-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--sg-blur)) saturate(1.2); }
.sg-sheet--bottom { border-radius: var(--sg-r-sheet) var(--sg-r-sheet) 0 0; } /* лист, що йде до нижнього краю екрана */
.sg-group { background: var(--sg-group); border-radius: var(--sg-r-group); backdrop-filter: blur(var(--sg-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--sg-blur)) saturate(1.2); }
.sg-card { background: var(--sg-card); border-radius: var(--sg-r-card); color: var(--sg-ink); }
.sg-card--black { background: var(--sg-black); color: var(--sg-on-black); box-shadow: var(--sg-shadow-black); }
.sg-card--black .sg-muted, .sg-card--black .sg-role { color: var(--sg-on-black-muted); }
.sg-pop { background: var(--sg-solid); border-radius: var(--sg-r-card); box-shadow: var(--sg-shadow-pop); } /* випадне, шторка, модалка */

/* Текст */
.sg-title { font-size: var(--sg-fs-title); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; margin: 0; color: var(--sg-ink); text-wrap: balance; }
.sg-sub { font-size: var(--sg-fs-sm); color: var(--sg-muted); margin: 0; }
.sg-h2 { font-size: var(--sg-fs-h2); font-weight: 500; letter-spacing: -.02em; margin: 0; }
.sg-h3 { font-size: var(--sg-fs-h3); font-weight: 500; margin: 0; }
.sg-h3 .sg-count { color: var(--sg-faint); font-weight: 400; }
.sg-cap { font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.sg-name { font-size: var(--sg-fs-name); font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sg-role { font-size: var(--sg-fs-xs); color: var(--sg-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-muted { color: var(--sg-muted); }
.sg-faint { color: var(--sg-faint); }
.sg-num { font-variant-numeric: tabular-nums; }

/* Іконки: контурні, 1.6 px */
.sg-i { width: var(--sg-icon); height: var(--sg-icon); fill: none; stroke: currentColor; stroke-width: var(--sg-stroke); stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sg-i--sm { width: var(--sg-icon-sm); height: var(--sg-icon-sm); }

/* Кругла кнопка: скло / контур / чорна */
.sg-circ { position: relative; width: var(--sg-circ); height: var(--sg-circ); border-radius: 50%; display: inline-grid; place-items: center; padding: 0; border: 0;
  background: rgba(255, 255, 255, .55); color: var(--sg-ink-2); box-shadow: var(--sg-glass-edge); cursor: pointer; font: inherit; flex: 0 0 auto;
  backdrop-filter: blur(var(--sg-blur-sm)); -webkit-backdrop-filter: blur(var(--sg-blur-sm)); transition: background var(--sg-ease), color var(--sg-ease); }
.sg-circ:hover { background: rgba(255, 255, 255, .82); }
.sg-circ--line { background: transparent; box-shadow: inset 0 0 0 1px var(--sg-outline); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sg-circ--line:hover { background: rgba(255, 255, 255, .45); }
.sg-circ--black, .sg-circ.is-active { background: var(--sg-black); color: var(--sg-on-black); box-shadow: none; }
.sg-circ--sm { width: var(--sg-circ-sm); height: var(--sg-circ-sm); }
.sg-circ--sm .sg-i { width: var(--sg-icon-sm); height: var(--sg-icon-sm); }
.sg-circ:disabled { opacity: .45; cursor: default; }
.sg-pip { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--sg-attention); box-shadow: 0 0 0 2px rgba(255, 255, 255, .92); }

/* Кнопки-пігулки */
.sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--sg-ctl-h); padding: 0 16px; border-radius: var(--sg-r-pill);
  font: inherit; font-size: var(--sg-fs-sm); font-weight: 600; border: 0; cursor: pointer; white-space: nowrap; transition: background var(--sg-ease), color var(--sg-ease); }
.sg-btn--black { background: var(--sg-black); color: var(--sg-on-black); box-shadow: var(--sg-shadow-black); }
.sg-btn--black:hover { background: var(--sg-black-hover); }
.sg-btn--white { background: var(--sg-card); color: var(--sg-ink); }
.sg-btn--white:hover { background: var(--sg-solid); }
.sg-btn--line { background: transparent; color: var(--sg-ink); box-shadow: inset 0 0 0 1px var(--sg-outline); }
.sg-btn--line:hover { background: rgba(255, 255, 255, .45); }
.sg-btn--sm { height: var(--sg-ctl-h-sm); padding: 0 12px; font-size: var(--sg-fs-xs); }
.sg-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* Вкладки: текст без контейнера, активна — чорна пігулка */
.sg-tabs { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.sg-tab { border: 0; background: none; font: inherit; font-size: var(--sg-fs-sm); color: #3b3e45; padding: 7px 14px; border-radius: var(--sg-r-pill); cursor: pointer; transition: background var(--sg-ease), color var(--sg-ease); }
.sg-tab:hover { background: rgba(255, 255, 255, .5); }
.sg-tab.is-active { background: var(--sg-black); color: var(--sg-on-black); }
/* Перемикач вигляду (2–3 стани): скляний трек, біла пігулка */
.sg-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--sg-r-pill); background: rgba(255, 255, 255, .45); }
.sg-seg > button { border: 0; background: none; font: inherit; font-size: var(--sg-fs-xs); font-weight: 500; color: #3b3e45; padding: 5px 12px; border-radius: var(--sg-r-pill); cursor: pointer; }
.sg-seg > button.is-active { background: var(--sg-solid); color: var(--sg-black); }

/* Поля: білі пігулки з тонкою обводкою */
.sg-input, .sg-select { display: inline-flex; align-items: center; gap: 8px; height: var(--sg-ctl-h); padding: 0 14px; border-radius: var(--sg-r-pill); border: 0;
  background: var(--sg-card); box-shadow: inset 0 0 0 1px var(--sg-outline-field); font: inherit; font-size: var(--sg-fs-sm); color: var(--sg-ink); min-width: 0; box-sizing: border-box; outline: none; }
.sg-input::placeholder { color: var(--sg-faint); }
.sg-input:focus, .sg-select:focus, .sg-input:focus-within { box-shadow: inset 0 0 0 1px var(--sg-outline-focus); background: var(--sg-solid); }
.sg-textarea { border-radius: var(--sg-r-card); padding: 10px 14px; height: auto; min-height: 84px; resize: vertical; }
.sg-field { display: grid; gap: 5px; min-width: 0; }
.sg-field > label { font-size: var(--sg-fs-xs); color: var(--sg-muted); }
.sg-check { accent-color: var(--sg-black); width: 16px; height: 16px; }

/* Пігулки статусів: пастель. Для довільного кольору: <span class="sg-pill" style="--c:#f59e0b"> */
.sg-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: var(--sg-r-pill); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--c, #8a8e97) 28%, white); color: color-mix(in srgb, var(--c, #8a8e97) 70%, black); }
.sg-pill--blue { background: var(--sg-pastel-blue); color: var(--sg-pastel-blue-ink); }
.sg-pill--violet { background: var(--sg-pastel-violet); color: var(--sg-pastel-violet-ink); }
.sg-pill--green { background: var(--sg-pastel-green); color: var(--sg-pastel-green-ink); }
.sg-pill--yellow { background: var(--sg-pastel-yellow); color: var(--sg-pastel-yellow-ink); }
.sg-pill--red { background: var(--sg-pastel-red); color: var(--sg-pastel-red-ink); }
.sg-pill--gray { background: var(--sg-pastel-gray); color: var(--sg-pastel-gray-ink); box-shadow: inset 0 0 0 1px var(--sg-line); }
.sg-pill--solid-red { background: var(--sg-solid-red); color: #fff; }
.sg-pill--sm { height: 18px; padding: 0 8px; font-size: 10.5px; }
/* Тип запису крапкою з підписом (Людина / ШІ агент / ШІ програма; Prom / Rozetka …) */
.sg-kind { display: inline-flex; align-items: center; gap: 5px; font-size: var(--sg-fs-cap); color: var(--sg-muted); white-space: nowrap; }
.sg-kind::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c, var(--sg-faint)); }

/* Аватар у білому ореолі. Люди — теплі пастелі, ШІ — холодні; фото з профілю, якщо є */
.sg-halo { width: var(--sg-halo); height: var(--sg-halo); border-radius: 50%; background: rgba(255, 255, 255, .62); display: inline-grid; place-items: center; flex: 0 0 var(--sg-halo); position: relative; }
.sg-av { width: var(--sg-av); height: var(--sg-av); border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 12px; object-fit: cover;
  background: var(--av-bg, #dbe3f0); color: var(--av-ink, #2c3a50); }
.sg-av--human { --av-bg: hsl(28 55% 86%); --av-ink: hsl(28 40% 32%); }
.sg-av--ai { --av-bg: hsl(220 55% 86%); --av-ink: hsl(220 40% 32%); }
.sg-badge { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--sg-r-pill); font-size: 9.5px; font-weight: 700;
  color: #fff; background: var(--c, var(--sg-black)); display: grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, .95); }
.sg-team { display: flex; align-items: center; }
.sg-team .sg-halo { margin-left: -10px; background: rgba(255, 255, 255, .95); }
.sg-team .sg-halo:first-child { margin-left: 0; }

/* Рядок запису всередині групи (плаский) і картка запису */
.sg-row { position: relative; display: grid; grid-template-columns: var(--sg-halo) minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 7px 6px; border-radius: var(--sg-r-row); min-width: 0; }
.sg-row:hover { background: rgba(255, 255, 255, .55); }
.sg-row.is-selected { background: var(--sg-card); }
.sg-rec { display: grid; grid-template-columns: var(--sg-halo) minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 10px 12px 10px 10px; border-radius: var(--sg-r-card); background: var(--sg-card); min-width: 0; }
.sg-acts { display: flex; align-items: center; gap: 8px; }
/* Пунктир ієрархії з червоними крапками (дерево, ланцюжок етапів) */
.sg-thread { position: relative; padding-left: 14px; }
.sg-thread::before { content: ""; position: absolute; left: 4px; top: 2px; bottom: 24px; border-left: 1px dashed #b4c0d8; }
.sg-thread > .sg-row::before { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--sg-attention); }

/* Показник (KPI): біла картка, підпис зверху, число великим; без кольорової смуги */
.sg-kpi { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--sg-r-card); background: var(--sg-card); min-width: 0; }
.sg-kpi > small { font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.sg-kpi > b { font-size: var(--sg-fs-kpi); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-kpi > span { font-size: var(--sg-fs-xs); color: var(--sg-muted); }
.sg-kpi--black { background: var(--sg-black); color: var(--sg-on-black); box-shadow: var(--sg-shadow-black); }
.sg-kpi--black > small, .sg-kpi--black > span { color: var(--sg-on-black-muted); }

/* Таблиці: щільні, білі 70% на листі, без вертикальних ліній */
.sg-table-wrap { overflow: auto; border-radius: var(--sg-r-row); background: rgba(255, 255, 255, .7); scrollbar-width: thin; }
.sg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--sg-cell-fs); }
.sg-table th { position: sticky; top: 0; z-index: 1; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: var(--sg-th-fs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-faint); text-align: left; padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--sg-line); }
.sg-table td { padding: var(--sg-cell-pad); border-top: 1px solid var(--sg-line); vertical-align: middle; line-height: 1.3; }
.sg-table tbody tr:first-child td { border-top: 0; }
.sg-table tbody tr:hover td { background: rgba(255, 255, 255, .6); }
.sg-table tbody tr.is-selected td { background: var(--sg-solid); }
.sg-table td.is-num, .sg-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.sg-table tfoot td { font-weight: 600; background: rgba(255, 255, 255, .85); }

/* Канбан: колонка = група, картка = картка, назва колонки знизу або зверху з лічильником */
.sg-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: 272px; gap: 16px; align-items: start; overflow-x: auto; padding-bottom: 12px; }
.sg-kanban-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--sg-r-group); background: var(--sg-group); backdrop-filter: blur(var(--sg-blur)); -webkit-backdrop-filter: blur(var(--sg-blur)); }
.sg-kanban-col > .sg-cap { display: flex; align-items: center; gap: 7px; padding: 4px 6px 6px; }
.sg-kanban-col > .sg-cap i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--sg-faint)); }
.sg-kanban-col > .sg-cap .sg-count { margin-left: auto; letter-spacing: 0; }

/* Степер етапів: пласкі кроки, пройдені — чорна крапка, поточний — чорна пігулка */
.sg-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; }
.sg-step { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--sg-r-pill); font-size: var(--sg-fs-xs); color: var(--sg-muted); border: 0; background: none; font-family: inherit; cursor: pointer; }
.sg-step::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sg-outline); }
.sg-step.is-done { color: var(--sg-ink); } .sg-step.is-done::before { background: var(--sg-black); box-shadow: none; }
.sg-step.is-current { background: var(--sg-black); color: var(--sg-on-black); } .sg-step.is-current::before { background: var(--sg-on-black); box-shadow: none; }
.sg-step + .sg-step { margin-left: 2px; }

/* Док кнопок (масштаб, плаваючі дії): скляна пігулка, головна дія чорна */
.sg-dock { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; align-items: center; z-index: 2; padding: 8px; border-radius: var(--sg-r-pill);
  background: rgba(255, 255, 255, .55); box-shadow: var(--sg-glass-edge); backdrop-filter: blur(var(--sg-blur-sm)); -webkit-backdrop-filter: blur(var(--sg-blur-sm)); }
.sg-dock--row { flex-direction: row; }

/* Порожній стан, завантаження, помилка */
.sg-empty { display: grid; place-items: center; gap: 8px; padding: 40px 16px; text-align: center; color: var(--sg-muted); font-size: var(--sg-fs-sm); }
.sg-empty > b { color: var(--sg-ink); font-weight: 600; font-size: var(--sg-fs-body); }
.sg-skeleton { background: linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.8), rgba(255,255,255,.4)); background-size: 200% 100%; border-radius: var(--sg-r-row); animation: sg-shimmer 1.2s linear infinite; }
@keyframes sg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sg-error { padding: 10px 14px; border-radius: var(--sg-r-row); background: var(--sg-pastel-red); color: var(--sg-pastel-red-ink); font-size: var(--sg-fs-sm); }

/* Фокус із клавіатури: чорна обводка, без синьої */
.sg-canvas :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--sg-black); outline-offset: 2px; border-radius: 10px; }
/* Смуги прокрутки */
@media (hover: hover) and (pointer: fine) {   /* на сенсорних екранах — рідні накладні повзунки */
  .sg-canvas * { scrollbar-width: thin; scrollbar-color: rgba(20, 21, 24, .18) transparent; }
  .sg-canvas ::-webkit-scrollbar { width: 10px; height: 10px; }
  .sg-canvas ::-webkit-scrollbar-thumb { background: rgba(20, 21, 24, .18); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
}
@media (prefers-reduced-motion: reduce) { .sg-canvas *, .sg-canvas *::before, .sg-canvas *::after { transition: none !important; animation: none !important; } }

/* ── Телефон (≤ 768 px): рейка стає нижнім доком, лист прилягає до країв, ряди таблиць — картками ── */
@media (max-width: 768px) {
  :root { --sg-r-sheet: 24px; --sg-page-x: var(--sg-page-x-m); --sg-fs-title: 24px; }
  .sg-kanban { grid-auto-columns: 86vw; scroll-snap-type: x mandatory; }
  .sg-kanban-col { scroll-snap-align: start; }
  .sg-dock { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Onest (OFL, Google Fonts) самохостом: /assets/fonts/onest-*.woff2, змінна вага 400–700. Згенеровано з css2?family=Onest:wght@400..700 */
/* cyrillic-ext */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/onest-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/onest-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/onest-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/onest-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================================
   WIKI Helomi (SG_WIKI_V2, власник 22.10.2026): один файл стилів для WIKI в CRM (/crm/help, crm-ui/src/sections/Help.tsx
   бере його через ?inline) і для відкритої WIKI в інтернеті (/wiki, app/routers/wiki_public.py віддає tokens.css + цей файл).
   Лише токени docs/design/tokens.css; шари як у СТИЛЬ.md §2: лист → група → картка, аркуш статті — суцільний білий.
   Розмітку статті дає app/ai/wiki_md.py (кроки, скріни, виноски, дорога чипами, розділи з якорями).
   ========================================================================== */

.sg-wiki { --wk-col: 760px; --wk-aside: 224px; --wk-gap: 26px; display: flex; flex-direction: column; gap: 22px; width: 100%;
  min-width: 0; box-sizing: border-box; color: var(--sg-ink); font-family: var(--sg-font); font-size: var(--sg-fs-body); }
.sg-wiki *, .sg-wiki *::before, .sg-wiki *::after { box-sizing: border-box; }
.sg-wiki a { color: inherit; }
.sg-wiki-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── шапка головної: назва, підзаголовок, великий пошук, часті запити ── */
.sg-wiki-hero { display: grid; gap: 14px; justify-items: start; padding: 6px 2px 4px; }
.sg-wiki-hero h1 { margin: 0; font-size: 36px; font-weight: 500; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.sg-wiki-hero p { margin: 0; max-width: 680px; font-size: 15px; line-height: 1.5; color: var(--sg-muted); }
.sg-wiki-search { position: relative; width: min(100%, 680px); }
.sg-wiki-search label { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 18px; border-radius: var(--sg-r-pill);
  background: var(--sg-solid); box-shadow: inset 0 0 0 1px var(--sg-outline-field); color: var(--sg-faint); cursor: text;
  transition: box-shadow var(--sg-ease); }
.sg-wiki-search label:focus-within { box-shadow: inset 0 0 0 1px var(--sg-outline-focus); }
.sg-wiki-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--sg-ink); outline: none; }
.sg-wiki-search input::placeholder { color: var(--sg-faint); }
.sg-wiki-search kbd, .sg-wiki-kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 8px;
  font: 600 12px var(--sg-font); color: var(--sg-muted); background: var(--sg-gray-100); }
.sg-wiki-search--sm label { height: 40px; padding-left: 14px; }
.sg-wiki-search--sm input { font-size: var(--sg-fs-sm); }
/* підказки пошуку: розділи статей зі збігом */
.sg-wiki-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; max-height: min(70vh, 520px); overflow: auto; padding: 6px;
  border-radius: var(--sg-r-card); background: var(--sg-solid); box-shadow: var(--sg-shadow-pop); }
.sg-wiki-suggest[hidden] { display: none; }
.sg-wiki-hit { display: grid; gap: 3px; padding: 9px 12px; border-radius: 14px; text-decoration: none; color: var(--sg-ink); cursor: pointer; }
.sg-wiki-hit:hover, .sg-wiki-hit.is-active { background: var(--sg-gray-50); }
.sg-wiki-hit small { font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-faint); }
.sg-wiki-hit b { font-size: var(--sg-fs-name); font-weight: 600; }
.sg-wiki-hit span { font-size: var(--sg-fs-xs); line-height: 1.45; color: var(--sg-muted); }
.sg-wiki-hit mark, .sg-wiki-results mark { background: var(--sg-pastel-yellow); color: inherit; border-radius: 4px; padding: 0 2px; }
.sg-wiki-noresult { padding: 14px 12px; font-size: var(--sg-fs-sm); color: var(--sg-muted); }
.sg-wiki-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-wiki-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--sg-r-pill);
  background: rgba(255, 255, 255, .6); box-shadow: var(--sg-glass-edge); font: inherit; font-size: var(--sg-fs-xs); font-weight: 500; color: var(--sg-ink-2);
  text-decoration: none; cursor: pointer; transition: background var(--sg-ease); }
.sg-wiki-chip:hover { background: var(--sg-solid); }

/* ── підпис блоку головної ── */
.sg-wiki-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 0 4px; }
.sg-wiki-h h2 { margin: 0; font-size: var(--sg-fs-h2); font-weight: 500; letter-spacing: -.02em; }
.sg-wiki-h span { font-size: var(--sg-fs-xs); color: var(--sg-muted); }

/* ── «Почніть тут»: шлях пронумерованими картками ── */
.sg-wiki-start { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.sg-wiki-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px 14px 14px 12px;
  border-radius: var(--sg-r-card); background: var(--sg-card); text-decoration: none; color: var(--sg-ink); transition: background var(--sg-ease); }
.sg-wiki-step:hover { background: var(--sg-solid); }
.sg-wiki-step > i { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-weight: 600;
  font-size: var(--sg-fs-sm); box-shadow: inset 0 0 0 1px var(--sg-outline); }
.sg-wiki-step b { font-size: var(--sg-fs-name); font-weight: 600; line-height: 1.3; }
.sg-wiki-step span { font-size: var(--sg-fs-xs); color: var(--sg-muted); }

/* ── полички (категорії) плитками ── */
.sg-wiki-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: start; }
.sg-wiki-cat { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 14px 12px; border-radius: var(--sg-r-group); background: var(--sg-group);
  backdrop-filter: blur(var(--sg-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--sg-blur)) saturate(1.2); }
.sg-wiki-cat-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 0 4px 4px; text-decoration: none; color: var(--sg-ink); }
.sg-wiki-cat-head .sg-wiki-ic { grid-row: span 2; }
.sg-wiki-cat-head b { font-size: var(--sg-fs-h3); font-weight: 500; }
.sg-wiki-cat-head span { font-size: var(--sg-fs-xs); color: var(--sg-muted); }
.sg-wiki-cat-about { margin: 0; padding: 0 4px; font-size: var(--sg-fs-xs); line-height: 1.45; color: var(--sg-muted); }
.sg-wiki-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--sg-ink-2);
  box-shadow: var(--sg-glass-edge); flex: 0 0 auto; }
.sg-wiki-ic svg { width: 19px; height: 19px; }
.sg-wiki-links { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.sg-wiki-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: var(--sg-r-row);
  text-decoration: none; color: var(--sg-ink); font-size: var(--sg-fs-sm); line-height: 1.3; transition: background var(--sg-ease); }
.sg-wiki-link:hover { background: rgba(255, 255, 255, .7); }
.sg-wiki-link small { font-size: var(--sg-fs-cap); color: var(--sg-faint); white-space: nowrap; }
.sg-wiki-sub { margin: 8px 0 2px; padding: 0 10px; font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.sg-wiki-all { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 0 4px; padding: 6px 10px; border-radius: var(--sg-r-pill);
  font-size: var(--sg-fs-xs); font-weight: 600; color: var(--sg-ink-2); text-decoration: none; }
.sg-wiki-all:hover { background: rgba(255, 255, 255, .6); }

/* ── дві колонки головної: нещодавно оновлені + для ШІ ── */
.sg-wiki-duo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sg-wiki-panel { display: flex; flex-direction: column; gap: 6px; padding: 16px 14px; border-radius: var(--sg-r-group); background: var(--sg-group); }
.sg-wiki-panel > p { margin: 0 4px 6px; font-size: var(--sg-fs-sm); line-height: 1.5; color: var(--sg-muted); }
.sg-wiki-panel code { padding: 1px 6px; border-radius: 8px; background: var(--sg-gray-100); font: 12.5px var(--sg-font-mono); color: var(--sg-ink-2); }
.sg-wiki-recent .sg-wiki-link { grid-template-columns: minmax(0, 1fr) auto; }

/* ── «Хто ми» на відкритій WIKI ── */
.sg-wiki-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; padding: 22px; border-radius: var(--sg-r-sheet); background: var(--sg-sheet);
  backdrop-filter: blur(var(--sg-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--sg-blur)) saturate(1.2); }
.sg-wiki-about h2 { margin: 0 0 8px; font-size: 24px; font-weight: 500; letter-spacing: -.025em; }
.sg-wiki-about p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--sg-ink-2); }
.sg-wiki-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sg-wiki-fact { display: grid; gap: 4px; padding: 14px; border-radius: var(--sg-r-card); background: var(--sg-card); }
.sg-wiki-fact small { font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.sg-wiki-fact b { font-size: 15px; font-weight: 600; }
.sg-wiki-fact span { font-size: var(--sg-fs-xs); line-height: 1.4; color: var(--sg-muted); }
.sg-wiki-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── сторінка полички: статті картками ── */
.sg-wiki-cathead { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; align-items: center; }
.sg-wiki-cathead .sg-wiki-ic { grid-row: span 2; width: 56px; height: 56px; }
.sg-wiki-cathead h1 { margin: 0; font-size: var(--sg-fs-title); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.sg-wiki-cathead p { margin: 0; font-size: var(--sg-fs-sm); color: var(--sg-muted); }
.sg-wiki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.sg-wiki-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; padding: 14px 16px; border-radius: var(--sg-r-card); background: var(--sg-card);
  text-decoration: none; color: var(--sg-ink); transition: background var(--sg-ease); }
.sg-wiki-card:hover { background: var(--sg-solid); }
.sg-wiki-card.has-logo { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
.sg-wiki-card.has-logo > img { grid-row: span 3; width: 40px; height: 40px; padding: 5px; border-radius: 12px; object-fit: contain; background: var(--sg-solid); }
.sg-wiki-card b { font-size: var(--sg-fs-name); font-weight: 600; line-height: 1.3; }
.sg-wiki-card > span { font-size: var(--sg-fs-xs); line-height: 1.45; color: var(--sg-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sg-wiki-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-faint); }
.sg-wiki-meta > * { display: inline-flex; align-items: center; gap: 5px; }
.sg-wiki-meta svg { width: 13px; height: 13px; }
.sg-wiki .sg-wiki-groupcap { margin: 8px 0 8px; padding: 0 4px; font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }

/* ── сторінка статті: крихти, шапка, аркуш, «На цій сторінці» ── */
.sg-wiki-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--sg-fs-xs); color: var(--sg-muted); }
.sg-wiki-crumbs a { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--sg-r-pill); text-decoration: none; color: var(--sg-muted);
  transition: background var(--sg-ease), color var(--sg-ease); }
.sg-wiki-crumbs a:hover { background: rgba(255, 255, 255, .55); color: var(--sg-ink); }
.sg-wiki-crumbs li { display: inline-flex; align-items: center; }
.sg-wiki-crumbs li + li::before { content: "›"; margin: 0 2px; color: var(--sg-faint); }
.sg-wiki-crumbs li:last-child { color: var(--sg-ink); font-weight: 500; }
.sg-wiki-crumbs li:last-child:not(:first-child)::before { margin-right: 12px; }
.sg-wiki-art { display: grid; grid-template-columns: minmax(0, var(--wk-col)) var(--wk-aside); gap: var(--wk-gap); align-items: start; justify-content: start; }
.sg-wiki-art.has-nav { grid-template-columns: 232px minmax(0, var(--wk-col)) var(--wk-aside); }
.sg-wiki-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sg-wiki-head { display: grid; gap: 12px; padding: 4px 4px 2px; }
.sg-wiki-head h1 { margin: 0; font-size: 34px; font-weight: 500; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.sg-wiki-lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--sg-ink-2); max-width: 70ch; }
.sg-wiki-btn { display: inline-flex; font-family: var(--sg-font); align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: var(--sg-r-pill); font: inherit;
  font-size: var(--sg-fs-xs); font-weight: 600; color: var(--sg-ink); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--sg-card); transition: background var(--sg-ease); }
.sg-wiki-btn:hover { background: var(--sg-solid); }
.sg-wiki-btn--line { background: transparent; box-shadow: inset 0 0 0 1px var(--sg-outline); }
.sg-wiki-btn--line:hover { background: rgba(255, 255, 255, .5); }
.sg-wiki-btn--black { background: var(--sg-black); color: var(--sg-on-black); box-shadow: var(--sg-shadow-black); }
.sg-wiki-btn--black:hover { background: var(--sg-black-hover); }
.sg-wiki-btn svg { width: 15px; height: 15px; }
.sg-wiki-btn.is-done { background: var(--sg-pastel-green); color: var(--sg-pastel-green-ink); }
.sg-wiki-sheet { padding: 8px 34px 34px; border-radius: var(--sg-r-sheet); background: var(--sg-solid); min-width: 0; overflow-wrap: anywhere; }
.sg-wiki-aside { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 32px); overflow: auto; scrollbar-width: thin; }
.sg-wiki-toc { display: flex; flex-direction: column; gap: 1px; padding: 14px 10px 12px; border-radius: var(--sg-r-group); background: var(--sg-group); }
.sg-wiki-toc > b { padding: 0 10px 6px; font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.sg-wiki-toc a { display: block; padding: 6px 10px; border-radius: 12px; font-size: var(--sg-fs-xs); line-height: 1.35; color: var(--sg-muted); text-decoration: none;
  transition: background var(--sg-ease), color var(--sg-ease); }
.sg-wiki-toc a.is-l3 { padding-left: 22px; font-size: 11.5px; }
.sg-wiki-toc a:hover { background: rgba(255, 255, 255, .6); color: var(--sg-ink); }
.sg-wiki-toc a.is-active { background: var(--sg-solid); color: var(--sg-ink); font-weight: 600; }
.sg-wiki-tocm { display: none; }
.sg-wiki-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 32px); overflow: auto; padding: 12px 8px;
  border-radius: var(--sg-r-group); background: var(--sg-group); scrollbar-width: thin; }
.sg-wiki-nav > b { padding: 4px 10px 8px; font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.sg-wiki-nav a { display: block; padding: 7px 10px; border-radius: 12px; font-size: var(--sg-fs-xs); line-height: 1.35; color: var(--sg-ink-2); text-decoration: none; }
.sg-wiki-nav a:hover { background: rgba(255, 255, 255, .6); }
.sg-wiki-nav a.is-active { background: var(--sg-solid); font-weight: 600; color: var(--sg-ink); }
.sg-wiki-nav .sg-wiki-sub { margin-top: 10px; }

/* ── текст статті ── */
.sg-wiki-body { font-size: 14.5px; line-height: 1.65; color: var(--sg-ink); }
.sg-wiki-body p { margin: 0 0 12px; }
.sg-wiki-body b { font-weight: 600; }
.sg-wiki-body a { color: var(--sg-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--sg-gray-300); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.sg-wiki-body a:hover { text-decoration-color: var(--sg-ink); }
.sg-wiki-body ul { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.sg-wiki-body ul ul { margin: 6px 0 4px; list-style: circle; }
.sg-wiki-body li { margin: 4px 0; padding-left: 2px; }
.sg-wiki-body li::marker { color: var(--sg-faint); }
.sg-wiki-sec { padding-top: 6px; scroll-margin-top: 16px; }
.sg-wiki-sec + .sg-wiki-sec { margin-top: 10px; box-shadow: inset 0 1px 0 var(--sg-line); }
.sg-wiki-body h2 { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; scroll-margin-top: 16px; }
.sg-wiki-body h3 { margin: 22px 0 8px; font-size: 16px; font-weight: 600; line-height: 1.3; scroll-margin-top: 16px; }
.sg-wiki-body h4 { margin: 16px 0 6px; font-size: 14.5px; font-weight: 600; }
.sg-wiki-hnum { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--sg-r-pill);
  font-size: var(--sg-fs-sm); font-weight: 600; letter-spacing: 0; background: var(--sg-gray-100); color: var(--sg-ink); }
.sg-wiki-body code { padding: 1px 6px; border-radius: 7px; background: var(--sg-gray-100); font: 12.5px var(--sg-font-mono); color: var(--sg-ink-2); overflow-wrap: anywhere; }
.sg-wiki-body pre { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--sg-r-card); background: var(--sg-gray-50); box-shadow: inset 0 0 0 1px var(--sg-line);
  overflow: auto; font-size: 12.5px; line-height: 1.5; }
.sg-wiki-body pre code { padding: 0; background: transparent; }
.sg-wiki-body hr { height: 1px; margin: 20px 0; border: 0; background: var(--sg-line); }
.sg-wiki-body blockquote { margin: 0 0 14px; padding: 12px 16px; border-radius: var(--sg-r-card); background: var(--sg-gray-50); color: var(--sg-ink-2); }
.sg-wiki-body blockquote > :last-child { margin-bottom: 0; }
.sg-wiki-intro { padding-top: 10px; }

/* кроки: кружечок з номером і тонка лінія між кроками */
.sg-wiki-steps { counter-reset: sg-step; margin: 4px 0 16px; padding: 0; list-style: none; }
.sg-wiki-steps > li { position: relative; counter-increment: sg-step; margin: 0; padding: 4px 0 14px 46px; }
.sg-wiki-steps > li::before { content: counter(sg-step); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; font-size: var(--sg-fs-sm); font-weight: 600; color: var(--sg-ink); background: var(--sg-solid); box-shadow: inset 0 0 0 1.5px var(--sg-outline); }
.sg-wiki-steps > li::after { content: ""; position: absolute; left: 14.5px; top: 36px; bottom: 2px; width: 1px; background: var(--sg-gray-200); }
.sg-wiki-steps > li:last-child { padding-bottom: 4px; }
.sg-wiki-steps > li:last-child::after { display: none; }
.sg-wiki-steps > li > p { margin: 6px 0 0; }

/* скрін: рамка-скло, збільшення кліком, підпис */
.sg-wiki-shot { margin: 12px 0 16px; padding: 6px; border-radius: 22px; background: var(--sg-gray-100); width: fit-content; max-width: 100%; }
.sg-wiki-steps .sg-wiki-shot { margin: 10px 0 4px; }
.sg-wiki-zoom { display: block; border-radius: 16px; overflow: hidden; cursor: zoom-in; line-height: 0; background: var(--sg-solid); }
.sg-wiki-shot img { display: block; max-width: 100%; height: auto; }
.sg-wiki-shot figcaption { padding: 8px 8px 2px; font-size: var(--sg-fs-xs); line-height: 1.45; color: var(--sg-muted); }
.sg-wiki-zoom:focus-visible { outline: 2px solid var(--sg-black); outline-offset: 2px; }

/* виноски: пастельні картки, підпис великими літерами */
.sg-wiki-callout { margin: 4px 0 16px; padding: 12px 16px; border-radius: var(--sg-r-card); background: var(--sg-pastel-blue); color: var(--sg-ink); }
.sg-wiki-callout > :last-child { margin-bottom: 0; }
.sg-wiki-callout-label { display: block; margin-bottom: 4px; font-size: var(--sg-fs-cap); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-pastel-blue-ink); }
.sg-wiki-callout.is-tip { background: var(--sg-pastel-green); } .sg-wiki-callout.is-tip .sg-wiki-callout-label { color: var(--sg-pastel-green-ink); }
.sg-wiki-callout.is-warning, .sg-wiki-callout.is-important { background: var(--sg-amber-50); }
.sg-wiki-callout.is-warning .sg-wiki-callout-label, .sg-wiki-callout.is-important .sg-wiki-callout-label { color: var(--sg-pastel-yellow-ink); }
.sg-wiki-callout.is-caution { background: var(--sg-red-50); } .sg-wiki-callout.is-caution .sg-wiki-callout-label { color: var(--sg-pastel-red-ink); }

/* дорога в інтерфейсі чипами: «Налаштування › Типи даних › Угоди» */
.sg-wiki-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; vertical-align: baseline; }
.sg-wiki-path > span:not(.sg-wiki-sr) { display: inline-block; padding: 0 8px; border-radius: 8px; background: var(--sg-gray-100); font-size: .93em; font-weight: 500; line-height: 1.6; color: var(--sg-ink); }
.sg-wiki-path > i { font-style: normal; color: var(--sg-faint); font-weight: 600; }

/* таблиці */
.sg-wiki-table { margin: 0 0 16px; overflow-x: auto; border-radius: var(--sg-r-row); box-shadow: inset 0 0 0 1px var(--sg-line); }
.sg-wiki-table table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.sg-wiki-table th, .sg-wiki-table td { padding: 8px 12px; text-align: left; vertical-align: top; }
.sg-wiki-table th { font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-faint); background: var(--sg-gray-50); }
.sg-wiki-table tr + tr td, .sg-wiki-table tbody tr:first-child td { box-shadow: inset 0 1px 0 var(--sg-line); }

/* розділ «Для ШІ-співробітників» — тихіший: людині він для довідки, ШІ — головний */
.sg-wiki-sec.is-ai { margin-top: 18px; padding: 4px 20px 10px; border-radius: var(--sg-r-card); background: var(--sg-violet-50); box-shadow: none; }
.sg-wiki-sec.is-ai h2 { font-size: 18px; }
.sg-wiki-sec.is-ai .sg-wiki-sec { box-shadow: none; }
.sg-wiki-sec.is-ai + .sg-wiki-sec { box-shadow: none; }

/* низ статті: попередня / наступна, ще в поличці */
.sg-wiki-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sg-wiki-pager a { display: grid; gap: 3px; padding: 14px 16px; border-radius: var(--sg-r-card); background: var(--sg-card); text-decoration: none; color: var(--sg-ink);
  transition: background var(--sg-ease); }
.sg-wiki-pager a:hover { background: var(--sg-solid); }
.sg-wiki-pager a.is-next { text-align: right; grid-column: 2; }
.sg-wiki-pager small { font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.sg-wiki-pager b { font-size: var(--sg-fs-name); font-weight: 600; }
.sg-wiki-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 2px 6px; font-size: var(--sg-fs-xs); color: var(--sg-muted); }
.sg-wiki-foot code { padding: 1px 6px; border-radius: 7px; background: rgba(255, 255, 255, .7); font: 12px var(--sg-font-mono); }

/* збільшений скрін: суцільне полотно на весь екран (як «вікно запису», СТИЛЬ.md §10) */
.sg-wiki-lb { position: fixed; inset: 0; z-index: 2147483000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 14px 18px 18px;
  background: var(--sg-canvas-bg); background-color: var(--sg-canvas); font-family: var(--sg-font); color: var(--sg-ink); }
.sg-wiki-lb-bar { display: flex; justify-content: flex-end; }
.sg-wiki-lb-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--sg-ink);
  box-shadow: inset 0 0 0 1px var(--sg-outline); cursor: pointer; font: inherit; }
.sg-wiki-lb-close:hover { background: rgba(255, 255, 255, .55); }
.sg-wiki-lb-img { display: grid; place-items: center; min-height: 0; overflow: auto; }
.sg-wiki-lb-img img { max-width: 100%; max-height: 100%; border-radius: 16px; background: var(--sg-solid); box-shadow: var(--sg-shadow-pop); object-fit: contain; }
.sg-wiki-lb-cap { margin: 0 auto; max-width: 860px; text-align: center; font-size: var(--sg-fs-sm); line-height: 1.5; color: var(--sg-ink-2); }

/* ── скелети й порожньо ── */
.sg-wiki-empty { padding: 28px 16px; text-align: center; color: var(--sg-muted); font-size: var(--sg-fs-sm); }
.sg-wiki-results { display: flex; flex-direction: column; gap: 8px; }
.sg-wiki-results .sg-wiki-hit { padding: 14px 16px; border-radius: var(--sg-r-card); background: var(--sg-card); }
.sg-wiki-results .sg-wiki-hit:hover { background: var(--sg-solid); }

/* ── відкрита WIKI: сторінка без CRM навколо ── */
.sg-wiki-pub { margin: 0; min-height: 100vh; font-family: var(--sg-font); font-size: var(--sg-fs-body); color: var(--sg-ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--sg-canvas-bg); background-attachment: fixed; background-color: var(--sg-canvas); }
.sg-wiki-pub .sg-wiki { max-width: 1240px; margin: 0 auto; padding: 0 22px 60px; }
.sg-wiki-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; max-width: 1240px; margin: 0 auto; padding: 12px 22px; }
.sg-wiki-topbar { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .42); backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: inset 0 -1px 0 var(--sg-line); margin-bottom: 22px; }
.sg-wiki-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sg-ink); font-weight: 600; letter-spacing: -.025em; font-size: 17px; white-space: nowrap; }
.sg-wiki-brand > span { font-weight: 700; }   /* словесний знак Helomi — жирним (власник 25.10) */
.sg-wiki-brand svg { width: 32px; height: 32px; flex: 0 0 auto; }
.sg-wiki-brand em { font-style: normal; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--sg-r-pill); background: var(--sg-gray-100);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--sg-ink-2); }
.sg-wiki-top .sg-wiki-search { flex: 1; max-width: 460px; margin-left: auto; }
.sg-wiki-top nav { display: flex; align-items: center; gap: 6px; }
/* підвал відкритої WIKI: скляний лист → групи (полички, для ШІ) → білі картки; чорного тут нема (чорна — кнопка в шапці) */
.sg-wiki-foot-pub { max-width: 1240px; margin: 8px auto 0; padding: 0 22px 28px; box-sizing: border-box; }
.sg-wiki-foot-card { display: grid; gap: 18px; padding: 24px; border-radius: var(--sg-r-sheet); background: var(--sg-sheet); box-shadow: var(--sg-glass-edge);
  backdrop-filter: blur(var(--sg-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--sg-blur)) saturate(1.2); }
.sg-wiki-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 4px; }
.sg-wiki-foot-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--sg-ink); min-width: 0; }
.sg-wiki-foot-brand svg { width: 48px; height: 48px; flex: 0 0 auto; }
.sg-wiki-foot-brand b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.sg-wiki-foot-brand small { display: block; margin-top: 2px; font-size: var(--sg-fs-sm); color: var(--sg-muted); }
.sg-wiki-foot-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.sg-wiki-foot-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: var(--sg-r-group); background: var(--sg-group); }
.sg-wiki-foot-group h2 { margin: 0; padding: 0 6px; font-size: var(--sg-fs-cap); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-faint); }
.sg-wiki-fcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 2px 8px; }
.sg-wiki-fcat { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 5px 12px 5px 5px;
  border-radius: var(--sg-r-row); text-decoration: none; color: var(--sg-ink); font-size: var(--sg-fs-sm); font-weight: 500; transition: background var(--sg-ease); }
.sg-wiki-fcat:hover { background: rgba(255, 255, 255, .72); }
.sg-wiki-fic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .78); box-shadow: var(--sg-glass-edge); color: var(--sg-ink-2); }
.sg-wiki-fcat small { font-size: var(--sg-fs-cap); font-weight: 600; color: var(--sg-faint); font-variant-numeric: tabular-nums; }
.sg-wiki-fais { display: flex; flex-direction: column; gap: 6px; }
.sg-wiki-fai { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 12px; border-radius: var(--sg-r-row);
  background: var(--sg-card); text-decoration: none; color: var(--sg-ink); transition: background var(--sg-ease); }
.sg-wiki-fai:hover { background: var(--sg-solid); }
.sg-wiki-fai code { font: 600 12.5px var(--sg-font-mono); color: var(--sg-ink); }
.sg-wiki-fai span { grid-column: 1; font-size: var(--sg-fs-xs); line-height: 1.4; color: var(--sg-muted); }
.sg-wiki-fai svg { grid-column: 2; grid-row: 1 / span 2; color: var(--sg-faint); }
.sg-wiki-foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 14px 4px 0;
  box-shadow: inset 0 1px 0 var(--sg-line); font-size: var(--sg-fs-xs); color: var(--sg-muted); }
.sg-wiki-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.sg-wiki-foot-links a { color: var(--sg-ink-2); text-decoration: none; }
.sg-wiki-foot-links a:hover { color: var(--sg-ink); text-decoration: underline; text-underline-offset: 3px; }
.sg-wiki-foot-up { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--sg-r-pill); box-shadow: inset 0 0 0 1px var(--sg-outline);
  text-decoration: none; color: var(--sg-ink); font-weight: 600; transition: background var(--sg-ease); }
.sg-wiki-foot-up:hover { background: rgba(255, 255, 255, .55); }
.sg-wiki-foot-up svg { transform: rotate(180deg); }

/* ── вузько: планшет і телефон ── */
@media (max-width: 1180px) {
  .sg-wiki-art.has-nav { grid-template-columns: minmax(0, var(--wk-col)) var(--wk-aside); }
  .sg-wiki-art.has-nav > .sg-wiki-nav { display: none; }
}
@media (max-width: 1060px) {
  .sg-wiki-art, .sg-wiki-art.has-nav { grid-template-columns: minmax(0, 1fr); }
  .sg-wiki-aside { display: none; }
  .sg-wiki-tocm { display: block; border-radius: var(--sg-r-card); background: var(--sg-group); }
  .sg-wiki-tocm > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 16px; cursor: pointer; list-style: none;
    font-size: var(--sg-fs-sm); font-weight: 600; }
  .sg-wiki-tocm > summary::-webkit-details-marker { display: none; }
  .sg-wiki-tocm > summary::after { content: "›"; transform: rotate(90deg); color: var(--sg-faint); font-size: 18px; transition: transform var(--sg-ease); }
  .sg-wiki-tocm[open] > summary::after { transform: rotate(-90deg); }
  .sg-wiki-tocm .sg-wiki-toc { padding-top: 0; background: transparent; }
  .sg-wiki-tocm .sg-wiki-toc > b { display: none; }
  .sg-wiki-duo, .sg-wiki-about, .sg-wiki-foot-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .sg-wiki { gap: 16px; }
  .sg-wiki-hero h1 { font-size: 28px; }
  .sg-wiki-hero p { font-size: 14px; }
  .sg-wiki-search label { height: 48px; }
  .sg-wiki-search kbd { display: none; }
  .sg-wiki-head h1 { font-size: 26px; }
  .sg-wiki-lead { font-size: 15px; }
  .sg-wiki-sheet { padding: 4px 16px 22px; border-radius: 24px; }
  .sg-wiki-body { font-size: 15px; }
  .sg-wiki-body h2 { font-size: 19px; }
  .sg-wiki-steps > li { padding-left: 40px; }
  .sg-wiki-shot { padding: 4px; border-radius: 18px; }
  .sg-wiki-zoom { border-radius: 14px; }
  .sg-wiki-sec.is-ai { padding: 2px 14px 8px; }
  .sg-wiki-pager { grid-template-columns: 1fr; }
  .sg-wiki-pager a.is-next { grid-column: 1; }
  .sg-wiki-facts { grid-template-columns: 1fr; }
  .sg-wiki-btn, .sg-wiki-chip, .sg-wiki-link, .sg-wiki-toc a, .sg-wiki-crumbs a { min-height: 44px; }
  .sg-wiki-chip { height: 40px; }
  .sg-wiki-pub .sg-wiki { padding: 0 12px 48px; }
  .sg-wiki-topbar { position: static; margin-bottom: 14px; }
  .sg-wiki-top { flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
  .sg-wiki-top .sg-wiki-search { order: 3; flex: 1 1 100%; max-width: none; margin: 0; }
  .sg-wiki-top nav { margin-left: auto; }
  .sg-wiki-top nav .sg-wiki-btn--line { display: none; }
  .sg-wiki-hide-m { display: none; }
  .sg-wiki-pub.is-home .sg-wiki-top .sg-wiki-search { display: none; }
  .sg-wiki-foot-pub { padding: 0 12px 20px; }
  .sg-wiki-foot-card { gap: 14px; padding: 16px; border-radius: 24px; }
  .sg-wiki-foot-brand svg { width: 40px; height: 40px; }
  .sg-wiki-foot-brand b { font-size: 19px; }
  .sg-wiki-foot-top .sg-wiki-actions { width: 100%; }
  .sg-wiki-foot-top .sg-wiki-btn { flex: 1 1 0; justify-content: center; }
  .sg-wiki-foot-top .sg-wiki-btn--line { flex: 0 0 auto; padding: 0 18px; }
  .sg-wiki-foot-group { padding: 10px; }
  .sg-wiki-fcats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 4px; }
  .sg-wiki-fcat { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; min-height: 44px; padding: 4px 6px 4px 4px; font-size: var(--sg-fs-xs); line-height: 1.25; }
  .sg-wiki-fic { width: 28px; height: 28px; }
  .sg-wiki-fcat small { display: none; }
  .sg-wiki-foot-up { height: 44px; }
  .sg-wiki-about { padding: 16px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { .sg-wiki *, .sg-wiki-lb * { transition: none !important; } }