/* ============================================================================
   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)); }
}