/* NeoSquaregram (NEOSQ_V1) — шар теми хоста. ЗГЕНЕРОВАНО crm-ui/host/build_theme.py; правити джерела, не цей файл. */

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


/* ============================================================================
   Squaregram · стиль NeoSquaregram (NEOSQ_V1) · токени і базові класи
   ============================================================================
   Джерело правди для ВСЬОГО інтерфейсу Squaregram: оболонки хоста, розділів 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;

  /* ── Лінії. Рамок немає; є кромка скла (вище) і дві обводки ── */
  --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;


  /* ── ПОВНА ПАЛІТРА NeoSquaregram. Інших кольорів в інтерфейсі нема (власник 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; }
/* Смуги прокрутки */
.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)); }
}


:root {
  --ico-structure: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%223%22 width=%226%22 height=%225%22 rx=%221.5%22/%3E%3Crect x=%223%22 y=%2216%22 width=%226%22 height=%225%22 rx=%221.5%22/%3E%3Crect x=%2215%22 y=%2216%22 width=%226%22 height=%225%22 rx=%221.5%22/%3E%3Cpath d=%22M12 8v4M6 16v-4h12v4%22/%3E%3C/svg%3E");
  --ico-companies: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 10l9-6 9 6M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20h18%22/%3E%3C/svg%3E");
  --ico-clients: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%229%22 cy=%228%22 r=%223.2%22/%3E%3Cpath d=%22M3.5 19c.6-3 2.8-5 5.5-5s4.9 2 5.5 5M15.5 5.2a3 3 0 0 1 0 5.6M17.5 14.2c1.6.6 2.7 2.3 3 4.8%22/%3E%3C/svg%3E");
  --ico-deals: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%225%22 height=%2216%22 rx=%221.5%22/%3E%3Crect x=%2210%22 y=%224%22 width=%225%22 height=%2211%22 rx=%221.5%22/%3E%3Crect x=%2217%22 y=%224%22 width=%224%22 height=%227%22 rx=%221.5%22/%3E%3C/svg%3E");
  --ico-tasks: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%224%22 width=%2216%22 height=%2216%22 rx=%224%22/%3E%3Cpath d=%22M8.5 12.2l2.4 2.4 4.8-5%22/%3E%3C/svg%3E");
  --ico-cashbox: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%229%22 width=%2216%22 height=%2211%22 rx=%222%22/%3E%3Cpath d=%22M7 9V5h10v4M8 13h2M14 13h2M8 16.5h8%22/%3E%3C/svg%3E");
  --ico-documents: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7z%22/%3E%3Cpath d=%22M14 3v4h4M9 13h6M9 17h6%22/%3E%3C/svg%3E");
  --ico-integrations: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0zM12 17v4%22/%3E%3C/svg%3E");
  --ico-chats: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-6l-5 4v-4.3A3 3 0 0 1 4 14z%22/%3E%3C/svg%3E");
  --ico-inbox: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6.5A2.5 2.5 0 0 1 5.5 4h8A2.5 2.5 0 0 1 16 6.5v5a2.5 2.5 0 0 1-2.5 2.5H9l-3.5 3v-3A2.5 2.5 0 0 1 3 11.5z%22/%3E%3Cpath d=%22M19 9a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2V20l-3-2.5h-3%22/%3E%3C/svg%3E");
  --ico-mail: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%226%22 width=%2217%22 height=%2212%22 rx=%223%22/%3E%3Cpath d=%22M4.5 8l7.5 5 7.5-5%22/%3E%3C/svg%3E");
  --ico-phone: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5.5 4h2.8l1.5 4-2 1.3a11 11 0 0 0 5 5l1.3-2 4 1.5v2.7a2 2 0 0 1-2.2 2A15 15 0 0 1 3.5 6.2 2 2 0 0 1 5.5 4z%22/%3E%3C/svg%3E");
  --ico-help: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223.5%22/%3E%3Cpath d=%22M5.9 5.9l3.6 3.6M14.5 14.5l3.6 3.6M18.1 5.9l-3.6 3.6M9.5 14.5l-3.6 3.6%22/%3E%3C/svg%3E");
  --ico-dashboard: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 19v-7M9.5 19V5M14.5 19v-9M19.5 19v-4M3 21h18%22/%3E%3C/svg%3E");
  --ico-sales: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224.5%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221%22/%3E%3C/svg%3E");
  --ico-warehouse: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 7.5l9-4.5 9 4.5v9l-9 4.5-9-4.5z%22/%3E%3Cpath d=%22M3 7.5l9 4.5 9-4.5M12 12v9%22/%3E%3C/svg%3E");
  --ico-products: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 12.5V4.5a1 1 0 0 1 1-1h8l8 8a1.5 1.5 0 0 1 0 2.1l-6.9 6.9a1.5 1.5 0 0 1-2.1 0z%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%221.4%22/%3E%3C/svg%3E");
  --ico-deliveries: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h11v10H3zM14 10h4l3 3v3h-7%22/%3E%3Ccircle cx=%227%22 cy=%2217.5%22 r=%221.8%22/%3E%3Ccircle cx=%2217.5%22 cy=%2217.5%22 r=%221.8%22/%3E%3C/svg%3E");
  --ico-ttn: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%223%22 width=%2216%22 height=%2218%22 rx=%222.5%22/%3E%3Cpath d=%22M8 8h8M8 12h8M8 16h5%22/%3E%3C/svg%3E");
  --ico-procurement: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 4h2.5l2 11h10.5l2-8H6.5%22/%3E%3Ccircle cx=%229.5%22 cy=%2219%22 r=%221.4%22/%3E%3Ccircle cx=%2217%22 cy=%2219%22 r=%221.4%22/%3E%3C/svg%3E");
  --ico-finance: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 7.5V6.8A1.8 1.8 0 0 1 6.8 5h10.7v2.5%22/%3E%3Crect x=%223.5%22 y=%227.5%22 width=%2217%22 height=%2212%22 rx=%223%22/%3E%3Cpath d=%22M16 13.5h2%22/%3E%3C/svg%3E");
  --ico-coins: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2212%22 cy=%226.5%22 rx=%227%22 ry=%222.5%22/%3E%3Cpath d=%22M5 6.5v5c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-5M5 11.5v5c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-5%22/%3E%3C/svg%3E");
  --ico-agent: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%228%22 width=%2214%22 height=%2211%22 rx=%223.5%22/%3E%3Cpath d=%22M12 4.5V8M3 12.5v2.5M21 12.5v2.5%22/%3E%3Ccircle cx=%229.5%22 cy=%2213.5%22 r=%221%22/%3E%3Ccircle cx=%2214.5%22 cy=%2213.5%22 r=%221%22/%3E%3C/svg%3E");
  --ico-printer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 9V4h10v5%22/%3E%3Crect x=%224%22 y=%229%22 width=%2216%22 height=%227%22 rx=%222%22/%3E%3Crect x=%227%22 y=%2214%22 width=%2210%22 height=%226%22 rx=%221%22/%3E%3C/svg%3E");
  --ico-folder: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 7.5A2.5 2.5 0 0 1 5.5 5h3.7l2 2h7.3A2.5 2.5 0 0 1 21 9.5v7a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 16.5z%22/%3E%3C/svg%3E");
  --ico-vault: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2210%22 width=%2214%22 height=%2210%22 rx=%222.5%22/%3E%3Cpath d=%22M8 10V7a4 4 0 0 1 8 0v3M12 14v2%22/%3E%3C/svg%3E");
  --ico-settings: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h10M18 7h2M4 17h4M12 17h8%22/%3E%3Ccircle cx=%2216%22 cy=%227%22 r=%222%22/%3E%3Ccircle cx=%2210%22 cy=%2217%22 r=%222%22/%3E%3C/svg%3E");
  --ico-admin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l7.5 3v6c0 4.5-3.2 7.6-7.5 9-4.3-1.4-7.5-4.5-7.5-9V6z%22/%3E%3Cpath d=%22M9 12l2 2 4-4%22/%3E%3C/svg%3E");
  --ico-profile: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%223.5%22/%3E%3Cpath d=%22M5 20c.8-3.5 3.6-6 7-6s6.2 2.5 7 6%22/%3E%3C/svg%3E");
  --ico-link: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1%22/%3E%3C/svg%3E");
  --ico-logout: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4M10 16l-4-4 4-4M6 12h10%22/%3E%3C/svg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%226.5%22/%3E%3Cpath d=%22M16 16l4.5 4.5%22/%3E%3C/svg%3E");
  --ico-bell: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6.5 16V11a5.5 5.5 0 0 1 11 0v5l1.5 2h-14zM10 20a2 2 0 0 0 4 0%22/%3E%3C/svg%3E");
  --ico-plus: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14M5 12h14%22/%3E%3C/svg%3E");
  --ico-minus: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3C/svg%3E");
  --ico-close: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6L6 18%22/%3E%3C/svg%3E");
  --ico-menu: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16M4 12h16M4 17h16%22/%3E%3C/svg%3E");
  --ico-more: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%225.5%22 cy=%2212%22 r=%221.2%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.2%22/%3E%3Ccircle cx=%2218.5%22 cy=%2212%22 r=%221.2%22/%3E%3C/svg%3E");
  --ico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E");
  --ico-chevron-right: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 6l6 6-6 6%22/%3E%3C/svg%3E");
  --ico-chevron-left: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 6l-6 6 6 6%22/%3E%3C/svg%3E");
  --ico-chevrons-left: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 7l-5 5 5 5M18 7l-5 5 5 5%22/%3E%3C/svg%3E");
  --ico-dcheck: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 12.5l4 4 7-8M10.5 16.5l1 1 7-8%22/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.5l4.5 4.5L19 7.5%22/%3E%3C/svg%3E");
  --ico-calendar: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%225%22 width=%2217%22 height=%2215.5%22 rx=%223%22/%3E%3Cpath d=%22M3.5 10h17M8 3v4M16 3v4%22/%3E%3C/svg%3E");
  --ico-filter: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 6h16M7 12h10M10 18h4%22/%3E%3C/svg%3E");
  --ico-columns: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%224.5%22 width=%2217%22 height=%2215%22 rx=%222.5%22/%3E%3Cpath d=%22M9.5 4.5v15M14.5 4.5v15%22/%3E%3C/svg%3E");
  --ico-export: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 15V4M8 8l4-4 4 4M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4%22/%3E%3C/svg%3E");
  --ico-import: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4v11M8 11l4 4 4-4M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4%22/%3E%3C/svg%3E");
  --ico-spark: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8zM18.5 15.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z%22/%3E%3C/svg%3E");
  --ico-star: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8L3.5 9.7l5.9-.9z%22/%3E%3C/svg%3E");
  --ico-refresh: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 11a8 8 0 0 0-14.6-4.5M4 4v4h4M4 13a8 8 0 0 0 14.6 4.5M20 20v-4h-4%22/%3E%3C/svg%3E");
  --ico-trash: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16M9 7V4.5h6V7M6 7l1 12.5A1.5 1.5 0 0 0 8.5 21h7a1.5 1.5 0 0 0 1.5-1.5L18 7%22/%3E%3C/svg%3E");
  --ico-edit: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4%22/%3E%3C/svg%3E");
  --ico-eye: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E");
  --ico-cat: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 20v-8.5L4 4l4.5 3h7L20 4l-1 7.5V20z%22/%3E%3Ccircle cx=%229.5%22 cy=%2212.5%22 r=%22.9%22/%3E%3Ccircle cx=%2214.5%22 cy=%2212.5%22 r=%22.9%22/%3E%3Cpath d=%22M11 16h2%22/%3E%3C/svg%3E");
  --ico-sun: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4%22/%3E%3C/svg%3E");
  --ico-moon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19.5 14.5A8 8 0 1 1 9.5 4.5a6.5 6.5 0 0 0 10 10z%22/%3E%3C/svg%3E");
  --ico-alert: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4l9 16H3z%22/%3E%3Cpath d=%22M12 10v4.5M12 17.5v.01%22/%3E%3C/svg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M12 7.5V12l3 2%22/%3E%3C/svg%3E");
  --ico-receipt: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 3h12v18l-2.5-1.5L13 21l-2.5-1.5L8 21l-2-1.5z%22/%3E%3Cpath d=%22M9 8h6M9 12h6M9 16h3%22/%3E%3C/svg%3E");
  --ico-clipboard: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%225%22 width=%2214%22 height=%2216%22 rx=%222.5%22/%3E%3Cpath d=%22M9 5V3.5h6V5M9 11h6M9 15h4%22/%3E%3C/svg%3E");
  --ico-pin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%222.3%22/%3E%3C/svg%3E");
  --ico-paperclip: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 11.5l-7.8 7.8a5 5 0 0 1-7.1-7.1l8-8a3.4 3.4 0 0 1 4.8 4.8l-8 8a1.7 1.7 0 0 1-2.4-2.4l7.4-7.4%22/%3E%3C/svg%3E");
  --ico-external: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 4h6v6M20 4l-9 9M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4%22/%3E%3C/svg%3E");
  --ico-ban: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M6 6l12 12%22/%3E%3C/svg%3E");
  --ico-bolt: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 3L5 13.5h6L10 21l8-10.5h-6z%22/%3E%3C/svg%3E");
  --ico-bulb: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2V17h5v-1.1c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z%22/%3E%3C/svg%3E");
  --ico-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225.5%22 width=%2218%22 height=%2213%22 rx=%222.5%22/%3E%3Cpath d=%22M3 10h18M7 15h4%22/%3E%3C/svg%3E");
  --ico-save: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 4h11l3 3v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z%22/%3E%3Cpath d=%22M8 4v5h7V4M8 20v-6h8v6%22/%3E%3C/svg%3E");
  --ico-hash: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 9h14M5 15h14M10 4L8 20M16 4l-2 16%22/%3E%3C/svg%3E");
  --ico-play: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 5v14l11-7z%22/%3E%3C/svg%3E");
  --ico-briefcase: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%227%22 width=%2217%22 height=%2212.5%22 rx=%222.5%22/%3E%3Cpath d=%22M9 7V5h6v2M3.5 12.5h17%22/%3E%3C/svg%3E");
  --ico-dot: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224.5%22 fill=%22currentColor%22/%3E%3C/svg%3E");
  --ico-globe: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M3.5 12h17M12 3.5c2.5 2.6 3.5 5.5 3.5 8.5s-1 5.9-3.5 8.5c-2.5-2.6-3.5-5.5-3.5-8.5s1-5.9 3.5-8.5z%22/%3E%3C/svg%3E");
  --ico-book: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5.5A1.5 1.5 0 0 1 5.5 4H11v16H5.5A1.5 1.5 0 0 1 4 18.5zM20 5.5A1.5 1.5 0 0 0 18.5 4H13v16h5.5a1.5 1.5 0 0 0 1.5-1.5z%22/%3E%3C/svg%3E");
  --ico-camera: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 8.5A1.5 1.5 0 0 1 5.5 7h2l1.5-2.5h6L16.5 7h2A1.5 1.5 0 0 1 20 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5z%22/%3E%3Ccircle cx=%2212%22 cy=%2212.5%22 r=%223.5%22/%3E%3C/svg%3E");
  --ico-flag: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 21V4M5 4h11l-2 4 2 4H5%22/%3E%3C/svg%3E");
  --ico-gift: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%229%22 width=%2216%22 height=%2211%22 rx=%221.5%22/%3E%3Cpath d=%22M3 9h18v-3H3zM12 6v14M12 6c-1.5-3-5-3-5-1s3 1 5 1zm0 0c1.5-3 5-3 5-1s-3 1-5 1z%22/%3E%3C/svg%3E");
  --ico-scale: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4v16M6 20h12M5 8h14M5 8l-2.5 6a2.5 2.5 0 0 0 5 0zM19 8l-2.5 6a2.5 2.5 0 0 0 5 0z%22/%3E%3C/svg%3E");
  --ico-square: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2215%22 height=%2215%22 rx=%224%22/%3E%3C/svg%3E");
  --ico-flask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 3h6M10 3v6.2L4.8 18.1A2 2 0 0 0 6.5 21h11a2 2 0 0 0 1.7-2.9L14 9.2V3%22/%3E%3Cpath d=%22M7.3 15h9.4%22/%3E%3C/svg%3E");
  --ico-monitor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2212%22 rx=%222.5%22/%3E%3Cpath d=%22M8 20h8M12 16v4%22/%3E%3C/svg%3E");
  --ico-map: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 4.5 3.5 6.5v13l5.5-2 6 2 5.5-2v-13l-5.5 2-6-2z%22/%3E%3Cpath d=%22M9 4.5v13M15 6.5v13%22/%3E%3C/svg%3E");
  --ico-mic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%223%22 width=%226%22 height=%2211%22 rx=%223%22/%3E%3Cpath d=%22M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21%22/%3E%3C/svg%3E");
  --ico-pause: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 5.5v13M15 5.5v13%22/%3E%3C/svg%3E");
  --ico-expand: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5%22/%3E%3C/svg%3E");
  --ico-dice: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%224%22 width=%2216%22 height=%2216%22 rx=%224%22/%3E%3Cpath d=%22M9 9h.01M15 9h.01M9 15h.01M15 15h.01M12 12h.01%22/%3E%3C/svg%3E");
  --img-logout: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%235e626b%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4M10 16l-4-4 4-4M6 12h10%22/%3E%3C/svg%3E");
}

/* палітра: усі кольори Tailwind бандла → гами NeoSquaregram */
:root, :host {
  --color-slate-50: var(--sg-gray-50);
  --color-slate-100: var(--sg-gray-100);
  --color-slate-200: var(--sg-gray-200);
  --color-slate-300: var(--sg-gray-300);
  --color-slate-400: var(--sg-gray-400);
  --color-slate-500: var(--sg-gray-500);
  --color-slate-600: var(--sg-gray-600);
  --color-slate-700: var(--sg-gray-700);
  --color-slate-800: var(--sg-gray-800);
  --color-slate-900: var(--sg-gray-900);
  --color-slate-950: var(--sg-gray-950);
  --color-gray-50: var(--sg-gray-50);
  --color-gray-100: var(--sg-gray-100);
  --color-gray-200: var(--sg-gray-200);
  --color-gray-300: var(--sg-gray-300);
  --color-gray-400: var(--sg-gray-400);
  --color-gray-500: var(--sg-gray-500);
  --color-gray-600: var(--sg-gray-600);
  --color-gray-700: var(--sg-gray-700);
  --color-gray-800: var(--sg-gray-800);
  --color-gray-900: var(--sg-gray-900);
  --color-gray-950: var(--sg-gray-950);
  --color-zinc-50: var(--sg-gray-50);
  --color-zinc-100: var(--sg-gray-100);
  --color-zinc-200: var(--sg-gray-200);
  --color-zinc-300: var(--sg-gray-300);
  --color-zinc-400: var(--sg-gray-400);
  --color-zinc-500: var(--sg-gray-500);
  --color-zinc-600: var(--sg-gray-600);
  --color-zinc-700: var(--sg-gray-700);
  --color-zinc-800: var(--sg-gray-800);
  --color-zinc-900: var(--sg-gray-900);
  --color-zinc-950: var(--sg-gray-950);
  --color-neutral-50: var(--sg-gray-50);
  --color-neutral-100: var(--sg-gray-100);
  --color-neutral-200: var(--sg-gray-200);
  --color-neutral-300: var(--sg-gray-300);
  --color-neutral-400: var(--sg-gray-400);
  --color-neutral-500: var(--sg-gray-500);
  --color-neutral-600: var(--sg-gray-600);
  --color-neutral-700: var(--sg-gray-700);
  --color-neutral-800: var(--sg-gray-800);
  --color-neutral-900: var(--sg-gray-900);
  --color-neutral-950: var(--sg-gray-950);
  --color-stone-50: var(--sg-gray-50);
  --color-stone-100: var(--sg-gray-100);
  --color-stone-200: var(--sg-gray-200);
  --color-stone-300: var(--sg-gray-300);
  --color-stone-400: var(--sg-gray-400);
  --color-stone-500: var(--sg-gray-500);
  --color-stone-600: var(--sg-gray-600);
  --color-stone-700: var(--sg-gray-700);
  --color-stone-800: var(--sg-gray-800);
  --color-stone-900: var(--sg-gray-900);
  --color-stone-950: var(--sg-gray-950);
  --color-red-50: var(--sg-red-50);
  --color-red-100: var(--sg-red-100);
  --color-red-200: var(--sg-red-200);
  --color-red-300: var(--sg-red-300);
  --color-red-400: var(--sg-red-400);
  --color-red-500: var(--sg-red-500);
  --color-red-600: var(--sg-red-600);
  --color-red-700: var(--sg-red-700);
  --color-red-800: var(--sg-red-800);
  --color-red-900: var(--sg-red-900);
  --color-red-950: var(--sg-red-900);
  --color-rose-50: var(--sg-red-50);
  --color-rose-100: var(--sg-red-100);
  --color-rose-200: var(--sg-red-200);
  --color-rose-300: var(--sg-red-300);
  --color-rose-400: var(--sg-red-400);
  --color-rose-500: var(--sg-red-500);
  --color-rose-600: var(--sg-red-600);
  --color-rose-700: var(--sg-red-700);
  --color-rose-800: var(--sg-red-800);
  --color-rose-900: var(--sg-red-900);
  --color-rose-950: var(--sg-red-900);
  --color-pink-50: var(--sg-red-50);
  --color-pink-100: var(--sg-red-100);
  --color-pink-200: var(--sg-red-200);
  --color-pink-300: var(--sg-red-300);
  --color-pink-400: var(--sg-red-400);
  --color-pink-500: var(--sg-red-500);
  --color-pink-600: var(--sg-red-600);
  --color-pink-700: var(--sg-red-700);
  --color-pink-800: var(--sg-red-800);
  --color-pink-900: var(--sg-red-900);
  --color-pink-950: var(--sg-red-900);
  --color-fuchsia-50: var(--sg-red-50);
  --color-fuchsia-100: var(--sg-red-100);
  --color-fuchsia-200: var(--sg-red-200);
  --color-fuchsia-300: var(--sg-red-300);
  --color-fuchsia-400: var(--sg-red-400);
  --color-fuchsia-500: var(--sg-red-500);
  --color-fuchsia-600: var(--sg-red-600);
  --color-fuchsia-700: var(--sg-red-700);
  --color-fuchsia-800: var(--sg-red-800);
  --color-fuchsia-900: var(--sg-red-900);
  --color-fuchsia-950: var(--sg-red-900);
  --color-green-50: var(--sg-green-50);
  --color-green-100: var(--sg-green-100);
  --color-green-200: var(--sg-green-200);
  --color-green-300: var(--sg-green-300);
  --color-green-400: var(--sg-green-400);
  --color-green-500: var(--sg-green-500);
  --color-green-600: var(--sg-green-600);
  --color-green-700: var(--sg-green-700);
  --color-green-800: var(--sg-green-800);
  --color-green-900: var(--sg-green-900);
  --color-green-950: var(--sg-green-900);
  --color-emerald-50: var(--sg-green-50);
  --color-emerald-100: var(--sg-green-100);
  --color-emerald-200: var(--sg-green-200);
  --color-emerald-300: var(--sg-green-300);
  --color-emerald-400: var(--sg-green-400);
  --color-emerald-500: var(--sg-green-500);
  --color-emerald-600: var(--sg-green-600);
  --color-emerald-700: var(--sg-green-700);
  --color-emerald-800: var(--sg-green-800);
  --color-emerald-900: var(--sg-green-900);
  --color-emerald-950: var(--sg-green-900);
  --color-lime-50: var(--sg-green-50);
  --color-lime-100: var(--sg-green-100);
  --color-lime-200: var(--sg-green-200);
  --color-lime-300: var(--sg-green-300);
  --color-lime-400: var(--sg-green-400);
  --color-lime-500: var(--sg-green-500);
  --color-lime-600: var(--sg-green-600);
  --color-lime-700: var(--sg-green-700);
  --color-lime-800: var(--sg-green-800);
  --color-lime-900: var(--sg-green-900);
  --color-lime-950: var(--sg-green-900);
  --color-teal-50: var(--sg-green-50);
  --color-teal-100: var(--sg-green-100);
  --color-teal-200: var(--sg-green-200);
  --color-teal-300: var(--sg-green-300);
  --color-teal-400: var(--sg-green-400);
  --color-teal-500: var(--sg-green-500);
  --color-teal-600: var(--sg-green-600);
  --color-teal-700: var(--sg-green-700);
  --color-teal-800: var(--sg-green-800);
  --color-teal-900: var(--sg-green-900);
  --color-teal-950: var(--sg-green-900);
  --color-amber-50: var(--sg-amber-50);
  --color-amber-100: var(--sg-amber-100);
  --color-amber-200: var(--sg-amber-200);
  --color-amber-300: var(--sg-amber-300);
  --color-amber-400: var(--sg-amber-400);
  --color-amber-500: var(--sg-amber-500);
  --color-amber-600: var(--sg-amber-600);
  --color-amber-700: var(--sg-amber-700);
  --color-amber-800: var(--sg-amber-800);
  --color-amber-900: var(--sg-amber-900);
  --color-amber-950: var(--sg-amber-900);
  --color-yellow-50: var(--sg-amber-50);
  --color-yellow-100: var(--sg-amber-100);
  --color-yellow-200: var(--sg-amber-200);
  --color-yellow-300: var(--sg-amber-300);
  --color-yellow-400: var(--sg-amber-400);
  --color-yellow-500: var(--sg-amber-500);
  --color-yellow-600: var(--sg-amber-600);
  --color-yellow-700: var(--sg-amber-700);
  --color-yellow-800: var(--sg-amber-800);
  --color-yellow-900: var(--sg-amber-900);
  --color-yellow-950: var(--sg-amber-900);
  --color-orange-50: var(--sg-amber-50);
  --color-orange-100: var(--sg-amber-100);
  --color-orange-200: var(--sg-amber-200);
  --color-orange-300: var(--sg-amber-300);
  --color-orange-400: var(--sg-amber-400);
  --color-orange-500: var(--sg-amber-500);
  --color-orange-600: var(--sg-amber-600);
  --color-orange-700: var(--sg-amber-700);
  --color-orange-800: var(--sg-amber-800);
  --color-orange-900: var(--sg-amber-900);
  --color-orange-950: var(--sg-amber-900);
  --color-blue-50: var(--sg-blue-50);
  --color-blue-100: var(--sg-blue-100);
  --color-blue-200: var(--sg-blue-200);
  --color-blue-300: var(--sg-blue-300);
  --color-blue-400: var(--sg-blue-400);
  --color-blue-500: var(--sg-blue-500);
  --color-blue-600: var(--sg-blue-600);
  --color-blue-700: var(--sg-blue-700);
  --color-blue-800: var(--sg-blue-800);
  --color-blue-900: var(--sg-blue-900);
  --color-blue-950: var(--sg-blue-900);
  --color-sky-50: var(--sg-blue-50);
  --color-sky-100: var(--sg-blue-100);
  --color-sky-200: var(--sg-blue-200);
  --color-sky-300: var(--sg-blue-300);
  --color-sky-400: var(--sg-blue-400);
  --color-sky-500: var(--sg-blue-500);
  --color-sky-600: var(--sg-blue-600);
  --color-sky-700: var(--sg-blue-700);
  --color-sky-800: var(--sg-blue-800);
  --color-sky-900: var(--sg-blue-900);
  --color-sky-950: var(--sg-blue-900);
  --color-cyan-50: var(--sg-blue-50);
  --color-cyan-100: var(--sg-blue-100);
  --color-cyan-200: var(--sg-blue-200);
  --color-cyan-300: var(--sg-blue-300);
  --color-cyan-400: var(--sg-blue-400);
  --color-cyan-500: var(--sg-blue-500);
  --color-cyan-600: var(--sg-blue-600);
  --color-cyan-700: var(--sg-blue-700);
  --color-cyan-800: var(--sg-blue-800);
  --color-cyan-900: var(--sg-blue-900);
  --color-cyan-950: var(--sg-blue-900);
  --color-indigo-50: var(--sg-blue-50);
  --color-indigo-100: var(--sg-blue-100);
  --color-indigo-200: var(--sg-blue-200);
  --color-indigo-300: var(--sg-blue-300);
  --color-indigo-400: var(--sg-blue-400);
  --color-indigo-500: var(--sg-blue-500);
  --color-indigo-600: var(--sg-blue-600);
  --color-indigo-700: var(--sg-blue-700);
  --color-indigo-800: var(--sg-blue-800);
  --color-indigo-900: var(--sg-blue-900);
  --color-indigo-950: var(--sg-blue-900);
  --color-violet-50: var(--sg-violet-50);
  --color-violet-100: var(--sg-violet-100);
  --color-violet-200: var(--sg-violet-200);
  --color-violet-300: var(--sg-violet-300);
  --color-violet-400: var(--sg-violet-400);
  --color-violet-500: var(--sg-violet-500);
  --color-violet-600: var(--sg-violet-600);
  --color-violet-700: var(--sg-violet-700);
  --color-violet-800: var(--sg-violet-800);
  --color-violet-900: var(--sg-violet-900);
  --color-violet-950: var(--sg-violet-900);
  --color-purple-50: var(--sg-violet-50);
  --color-purple-100: var(--sg-violet-100);
  --color-purple-200: var(--sg-violet-200);
  --color-purple-300: var(--sg-violet-300);
  --color-purple-400: var(--sg-violet-400);
  --color-purple-500: var(--sg-violet-500);
  --color-purple-600: var(--sg-violet-600);
  --color-purple-700: var(--sg-violet-700);
  --color-purple-800: var(--sg-violet-800);
  --color-purple-900: var(--sg-violet-900);
  --color-purple-950: var(--sg-violet-900);
  --color-brand-50: rgba(255, 255, 255, .62);
  --color-brand-100: rgba(255, 255, 255, .78);
  --color-brand-200: var(--sg-gray-200);
  --color-brand-300: var(--sg-gray-400);
  --color-brand-400: var(--sg-gray-700);
  --color-brand-500: var(--sg-gray-950);
  --color-brand-600: var(--sg-gray-950);
  --color-brand-700: var(--sg-gray-950);
  --color-brand-800: var(--sg-gray-950);
  --color-brand-900: var(--sg-gray-950);
  --color-brand-950: var(--sg-gray-950);
}

/* ============================================================================
   NeoSquaregram (NEOSQ_V1) · шар теми хоста
   ============================================================================
   Вантажиться після зібраного Tailwind v4 бандла як /assets/sg-theme-<тег>.css (збирає
   crm-ui/host/build_theme.py: шрифти + docs/design/tokens.css + цей файл + іконки меню).
   Tailwind v4 кладе утиліти в @layer utilities, тому правила тут (поза шарами) перемагають
   їх без !important. Стилі розділів CRM (.sgc-*, .sg-*) тут не чіпаються: їм вистачає токенів.
   Фрагменти складу (.vx-*) вставляють свій <style> пізніше, тому для них — подвоєна специфічність.

   Анкори взято з живого бандла index-Sd1010head.js (10.10.2026). Якщо фронтенд перезберуть —
   звірити розділи 3–5 (оболонка) і перегенерувати.
   ========================================================================== */

/* ---------- 1. Змінні Tailwind бандла під NeoSquaregram ---------- */
:root, :host {
  --font-sans: var(--sg-font);
  --font-display: var(--sg-font);
  --radius-sm: 8px; --radius: 10px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-3xl: 30px;
  /* кольори Tailwind (усі гами) генерує build_theme.py → var(--sg-<гама>-<відтінок>) з tokens.css */
  /* «Пошта» (палітра gm-*): ті самі нейтралі й чорний акцент */
  --color-gm-bg: transparent; --color-gm-ink: #141518; --color-gm-muted: #5e626b; --color-gm-line: rgba(20, 21, 24, .1); --color-gm-line-soft: rgba(20, 21, 24, .06);
  --color-gm-read: rgba(255, 255, 255, .5); --color-gm-sel: rgba(20, 21, 24, .08); --color-gm-chip: rgba(20, 21, 24, .07); --color-gm-compose: #ffffff;
  --color-gm-blue: #0e0e10; --color-gm-blue-deep: #141518;
}

/* ---------- 2. База ---------- */
html, body, button, input, select, textarea { font-family: var(--sg-font); }
html, body, #root { background: var(--sg-canvas-bg); background-attachment: fixed; }
body { color: var(--sg-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:where(h1, h2, h3, h4) { font-family: var(--sg-font); }
:where(table, .tabular-nums, td, th) { font-variant-numeric: tabular-nums; }
::selection { background: var(--sg-blue-100); color: #141518; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--sg-black); outline-offset: 2px; border-radius: 10px; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--sg-black); }
::placeholder { color: var(--sg-faint); }
* { scrollbar-width: thin; scrollbar-color: rgba(20, 21, 24, .2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20, 21, 24, .2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(20, 21, 24, .32); background-clip: padding-box; }
:where(button, a, [role="button"], summary) { transition: background-color var(--sg-ease), color var(--sg-ease), border-color var(--sg-ease), box-shadow .2s ease, opacity var(--sg-ease); }

/* ---------- 3. Каркас: полотно під усім; на десктопі робоча область — лист (СТИЛЬ.md §2) поруч із панеллю меню.
   Два скла на полотні з однаковими відступами 12 і радіусом 30: між ними видно полотно, стик м'який (власник 10.10:
   «перехід між меню і вікном»). Без backdrop-filter на main — він зробив би main контейнером для position:fixed
   (модалки й шторки сторінок малюються всередині main), а полотно під ним і так гладке. ---------- */
main.relative.min-h-0.flex-1.overflow-hidden { background: transparent; }
main.relative.min-h-0.flex-1 > .pointer-events-none.absolute.rounded-full.blur-3xl { display: none; }
@media (min-width: 768px) {
  main.relative.min-h-0.flex-1.overflow-hidden {
    margin: 12px; border-radius: 30px;
    background: var(--sg-sheet); box-shadow: var(--sg-glass-edge);
  }
}

/* ---------- 4. Бокове меню: скляна панель із підписами (≈30 розділів — підписи потрібні, UX.md §1.2 п.9),
   кружечки-іконки, активний пункт — чорна пігулка. Анкор: aside.inset-y-0.w-72 (TN у бандлі). ---------- */
@media (min-width: 768px) {
  aside.inset-y-0.w-72 {
    width: 252px; margin: 12px 0 12px 12px; border: 0; border-radius: 30px;
    background: rgba(255, 255, 255, .42); box-shadow: var(--sg-glass-edge);
    backdrop-filter: blur(var(--sg-blur)) saturate(1.25); -webkit-backdrop-filter: blur(var(--sg-blur)) saturate(1.25);
  }
}
aside.inset-y-0.w-72 { border-right-color: transparent; }
/* лого-рядок */
aside.inset-y-0.w-72 > div:first-child { border-bottom: 0; padding: 18px 18px 10px; gap: 10px; }
aside.inset-y-0.w-72 > div:first-child > img { width: 34px; height: 34px; border-radius: 10px; }
aside.inset-y-0.w-72 > div:first-child > .text-brand-700 { color: var(--sg-ink); font-weight: 600; letter-spacing: -.02em; font-size: 17px; }
aside.inset-y-0.w-72 > div:first-child > span.rounded-full { width: 7px; height: 7px; }
aside.inset-y-0.w-72 > div:first-child > span.bg-green-500 { background: var(--sg-green-400); box-shadow: 0 0 0 3px rgba(79, 167, 123, .18); }
aside.inset-y-0.w-72 > div:first-child > button { width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 28px; font-size: 15px; color: var(--sg-muted); }
aside.inset-y-0.w-72 > div:first-child > button:hover { background: rgba(255, 255, 255, .7); color: var(--sg-ink); }
/* людина */
aside.inset-y-0.w-72 > div:nth-child(2) { margin: 2px 12px 8px; padding: 8px 10px; border-radius: 20px; background: rgba(255, 255, 255, .55); background-image: none; --tw-ring-color: transparent; box-shadow: none; gap: 10px; }
aside.inset-y-0.w-72 > div:nth-child(2) .truncate.font-semibold { font-size: 13.5px; color: var(--sg-ink); }
aside.inset-y-0.w-72 > div:nth-child(2) .text-brand-600\/80 { color: var(--sg-muted); font-size: 12px; }
aside.inset-y-0.w-72 > div:nth-child(2) > :first-child { --tw-ring-color: rgba(255, 255, 255, .9); }
/* пункти: смуга прокрутки прихована (≈30 пунктів прокручуються колесом/пальцем), краї списку м'яко тануть */
aside.inset-y-0.w-72 nav { padding: 8px 10px 16px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 8px, #000 calc(100% - 16px), transparent); }
aside.inset-y-0.w-72 nav::-webkit-scrollbar { display: none; }
aside.inset-y-0.w-72 nav > :not(:first-child) { margin-top: 2px; }
aside.inset-y-0.w-72 nav a {
  --ico: var(--ico-folder); --ico-ink: var(--sg-ink-2);
  gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--sg-ink-2); background: transparent;
}
aside.inset-y-0.w-72 nav a:hover { background: rgba(255, 255, 255, .55); color: var(--sg-ink); }
aside.inset-y-0.w-72 nav a > span:first-child {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center;
  background: rgba(255, 255, 255, .6); box-shadow: var(--sg-glass-edge); color: transparent; font-size: 0; line-height: 0; overflow: hidden;
}
aside.inset-y-0.w-72 nav a > span:first-child::before {
  content: ""; width: 17px; height: 17px; background: var(--ico-ink);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
aside.inset-y-0.w-72 nav a.bg-brand-50 { background: var(--sg-black); color: #fff; font-weight: 600; --ico-ink: #fff; }
aside.inset-y-0.w-72 nav a.bg-brand-50 > span:first-child { background: rgba(255, 255, 255, .14); box-shadow: none; }
/* підпункти відділів — ті самі пігулки, кружечок трохи менший */
aside.inset-y-0.w-72 nav .nav-group-open { margin: 2px 0 6px; padding: 0; border-left: 0; }
aside.inset-y-0.w-72 nav .nav-group-open a { padding: 4px 12px 4px 5px; }
aside.inset-y-0.w-72 nav .nav-group-open a > span:first-child { flex-basis: 28px; width: 28px; height: 28px; }
aside.inset-y-0.w-72 nav .nav-group-open a > span:first-child::before { width: 15px; height: 15px; }
/* заголовок відділу — підпис групи 10.5 uppercase із шевроном, без плитки-емодзі */
aside.inset-y-0.w-72 nav .pt-1 { padding-top: 6px; }
aside.inset-y-0.w-72 nav .pt-1 > button { padding: 6px 10px 4px 12px; border-radius: 999px; background: transparent; color: var(--sg-faint); gap: 8px; }
aside.inset-y-0.w-72 nav .pt-1 > button:hover { background: rgba(255, 255, 255, .45); color: var(--sg-ink-2); }
aside.inset-y-0.w-72 nav .pt-1 > button > span:first-child { display: none; }
aside.inset-y-0.w-72 nav .pt-1 > button > .uppercase { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: inherit; }
aside.inset-y-0.w-72 nav .pt-1 > button > span:last-child { color: var(--sg-faint); font-size: 10px; }
aside.inset-y-0.w-72 nav .pt-1 > button.bg-brand-50\/70 { background: rgba(255, 255, 255, .55); color: var(--sg-ink); }
/* лічильники в меню (Переписки, Пошта, Дашборд продажів) — червоні, як увага */
aside.inset-y-0.w-72 nav .bg-red-500 { background: var(--sg-attention); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
aside.inset-y-0.w-72 nav a.bg-brand-50 .bg-red-500 { box-shadow: none; }
/* «Вхід в CRM» (посилання на KeepinCRM) прибрано за рішенням власника 10.10 — і в меню, і на лендингу /welcome */
a[href="https://semenchenko.keepincrm.com/users/sign_in#/app/agreements/archive"] { display: none !important; }
/* низ меню: «Вийти» */
aside.inset-y-0.w-72 > div:last-child { border-top: 0; padding: 8px 10px 14px; }
aside.inset-y-0.w-72 > div:last-child > a, aside.inset-y-0.w-72 > div:last-child > button {
  --ico-ink: var(--sg-muted); display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--sg-muted); background: transparent;
}
aside.inset-y-0.w-72 > div:last-child > a:hover { background: rgba(255, 255, 255, .55); color: var(--sg-ink); }
aside.inset-y-0.w-72 > div:last-child > a > span:first-child { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0; color: transparent;
  box-shadow: inset 0 0 0 1px var(--sg-outline); }
aside.inset-y-0.w-72 > div:last-child > a > span:first-child::before { content: ""; width: 16px; height: 16px; background: var(--ico-ink); -webkit-mask: var(--ico-link) center / contain no-repeat; mask: var(--ico-link) center / contain no-repeat; }
aside.inset-y-0.w-72 > div:last-child > button { font-size: 0; }
aside.inset-y-0.w-72 > div:last-child > button::before { content: ""; flex: 0 0 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--sg-outline);
  background: var(--img-logout) center / 16px no-repeat; }
aside.inset-y-0.w-72 > div:last-child > button::after { content: "Вийти"; font-size: 13px; }
aside.inset-y-0.w-72 > div:last-child > button:hover { background: var(--sg-pastel-red); color: var(--sg-pastel-red-ink); --ico-ink: var(--sg-pastel-red-ink); }
/* згорнуте меню: вузька скляна рейка з одним кружечком ☰ */
div.hidden.w-12.shrink-0.flex-col.items-center.border-r { width: 64px; border-right: 0; background: transparent; padding-top: 16px; }
div.hidden.w-12.shrink-0.flex-col.items-center.border-r > button { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: var(--sg-glass-edge); color: var(--sg-ink-2); }
div.hidden.w-12.shrink-0.flex-col.items-center.border-r > button .bg-red-500 { background: var(--sg-attention); }
/* затемнення під мобільною шторкою меню */
div.fixed.inset-0.z-40.bg-black\/40.md\:hidden { background: rgba(14, 14, 16, .24); }

/* ---------- 5. Шапка на телефоні (MN у бандлі): скляна, липка, знак + назва + кружечки ---------- */
header.flex.shrink-0.items-center.gap-3.border-b.bg-white.md\:hidden {
  position: sticky; top: 0; z-index: 30; border-bottom: 0; padding: 10px 12px; gap: 10px;
  background: rgba(255, 255, 255, .42); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
header.md\:hidden > button { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .6); box-shadow: var(--sg-glass-edge); color: var(--sg-ink-2); }
header.md\:hidden > button .bg-red-500 { background: var(--sg-attention); box-shadow: 0 0 0 2px #fff; }
header.md\:hidden > img { width: 28px; height: 28px; border-radius: 8px; }
header.md\:hidden > .text-brand-700 { color: var(--sg-ink); font-weight: 600; letter-spacing: -.02em; }

/* ---------- 6. Шапки сторінок хоста: прозорі, без смуги, заголовок 30/500 ---------- */
main header.border-b { border-bottom-color: transparent; }
main header.bg-white, main header.bg-white\/90, main header.bg-white\/70, main .shrink-0.border-b.bg-white\/70 { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
main header :where(h1, h2) { font-weight: 500; letter-spacing: -.03em; color: var(--sg-ink); }
main header :where(h1, h2).text-xl, main header :where(h1, h2).text-2xl, main header :where(h1, h2).text-lg { font-size: 26px; line-height: 1.15; }
main header .text-gray-400, main header .text-gray-500 { color: var(--sg-muted); }

/* ---------- 7. Поверхні: білі картки бандла → біле скло без рамок і тіней ---------- */
main .bg-white { background-color: rgba(255, 255, 255, .8); }
main .bg-white\/95, main .bg-white\/90, main .bg-white\/85, main .bg-white\/80 { background-color: rgba(255, 255, 255, .8); }
main .bg-white\/70 { background-color: rgba(255, 255, 255, .6); }
main .bg-gray-50, main .bg-gray-50\/70, main .bg-gray-50\/60, main .bg-\[\#eef1f4\] { background-color: rgba(255, 255, 255, .5); }
main .bg-gray-100 { background-color: rgba(255, 255, 255, .62); }
main .bg-gray-200, main .bg-gray-200\/70 { background-color: rgba(20, 21, 24, .07); }
main .hover\:bg-gray-50:hover, main .hover\:bg-gray-100:hover, main .hover\:bg-black\/5:hover { background-color: rgba(255, 255, 255, .7); }
main .hover\:bg-gray-200:hover { background-color: rgba(255, 255, 255, .85); }
main :is(.rounded-2xl, .rounded-3xl, .rounded-xl).bg-white { --tw-ring-color: transparent; border-color: transparent; }
main :is(.rounded-2xl, .rounded-3xl).bg-white.shadow-sm, main :is(.rounded-2xl, .rounded-3xl, .rounded-xl).bg-white.shadow { --tw-shadow: 0 0 #0000; box-shadow: none; }
main .ring-gray-100, main .ring-gray-200, main .ring-gray-900\/5, main .ring-black\/5, main .ring-black\/10, main .ring-brand-100 { --tw-ring-color: transparent; }
main .border-gray-100, main .border-gray-200, main .border-gray-50, main .border-gray-200\/70 { border-color: var(--sg-line); }
main .border-gray-300 { border-color: rgba(20, 21, 24, .14); }
main .divide-gray-100 > :not(:last-child), main .divide-gray-200 > :not(:last-child), main .divide-y > :not(:last-child) { border-color: var(--sg-line); }
main .shadow-sm, main .shadow, main .hover\:shadow-md:hover { --tw-shadow: 0 0 #0000; box-shadow: none; }
main .border-dashed { border-color: rgba(20, 21, 24, .16); }
/* випадні, модалки, шторки, тости: суцільні білі з однією тінню */
.shadow-lg, .shadow-xl, .shadow-2xl { --tw-shadow: var(--sg-shadow-pop); }
:is(.fixed, .absolute).bg-white:is(.shadow-lg, .shadow-xl, .shadow-2xl) { background-color: #fff; --tw-ring-color: transparent; border-color: transparent; }
/* модальні вікна бандла (fixed inset-0 > біла картка) — суцільні, щоб текст під ними не просвічував */
.fixed.inset-0 :is(.bg-white, .bg-white\/95, .bg-white\/90):is(.rounded-xl, .rounded-2xl, .rounded-3xl), [role="dialog"] .bg-white { background-color: #fff; }
.fixed.inset-0.bg-black\/40, .fixed.inset-0.bg-black\/50, .fixed.inset-0.bg-black\/30 { background-color: rgba(14, 14, 16, .24); }
/* кольорові плашки-підказки (bg-<колір>-50 + ring/border) — пастель без рамки */
main :is(.bg-red-50, .bg-amber-50, .bg-green-50, .bg-sky-50, .bg-blue-50, .bg-teal-50, .bg-violet-50) { --tw-ring-color: transparent; border-color: transparent; }
main .bg-brand-50 { background-color: rgba(255, 255, 255, .62); }
main .bg-brand-50\/50 { background-color: rgba(255, 255, 255, .5); }
main .bg-brand-100 { background-color: rgba(255, 255, 255, .78); }
/* полотно схем і дерев (Структура: bg-gray-50/40) — прозоре, лист і так скляний */
main .bg-gray-50\/40, main .bg-gray-50\/50 { background-color: transparent; }

/* ---------- 8. Керування ---------- */
/* суцільний бренд (кнопки, активні вкладки, бульбашки) → чорний; градієнтні «геро»-плашки → чорна картка */
.bg-brand-500, .bg-brand-600, .bg-brand-700, .hover\:bg-brand-700:hover, .hover\:bg-brand-600:hover { background-color: var(--sg-black); background-image: none; }
:is(button, a).bg-brand-500, :is(button, a).bg-brand-600 { border-radius: 999px; box-shadow: var(--sg-shadow-black); }
:is(button, a):is(.bg-brand-500, .bg-brand-600):hover:not(:disabled) { background-color: #26272b; }
:is(button, a):is(.bg-brand-500, .bg-brand-600):disabled { box-shadow: none; opacity: .45; }
.bg-brand-400 { background-color: #3b3e45; }
[class*="bg-gradient-to-"]:is(.from-brand-400, .from-brand-500, .from-brand-600, .from-brand-700, .from-brand-800) {
  background-image: none; background-color: var(--sg-black); box-shadow: var(--sg-shadow-black); color: #fff; }
/* великі «геро»-плашки (Компанії, Люда, Склад): чорна картка з великим радіусом, без синіх відблисків */
.relative.overflow-hidden.rounded-3xl[class*="bg-gradient-to-"]:is(.from-brand-800, .from-brand-600) { border-radius: 30px; }
.relative.overflow-hidden.rounded-3xl[class*="bg-gradient-to-"] > .pointer-events-none.absolute { display: none; }
/* екран входу/реєстрації: полотно замість синього градієнта, картка входу біла */
.flex.min-h-full.items-center.justify-center.bg-gradient-to-br.from-brand-400 { background: var(--sg-canvas-bg); box-shadow: none; color: var(--sg-ink); }
:is(.from-brand-600, .from-brand-500, .from-brand-800, .from-brand-700) :is(.bg-white\/15, .bg-white\/10, .bg-white\/20) { background-color: rgba(255, 255, 255, .12); }
:is(.from-brand-600, .from-brand-500, .from-brand-800) :is(button, a):is(.bg-green-500, .bg-green-600, .bg-white) { background-color: #fff; color: var(--sg-black); box-shadow: none; }
:is(.from-brand-600, .from-brand-500, .from-brand-800) :is(button, a):is(.bg-green-500, .bg-green-600):hover:not(:disabled) { background-color: var(--sg-gray-50); }
/* зелені/смарагдові «зроби» кнопки поза чорними плашками → чорні; червоні суцільні → біла з червоним текстом */
:is(button, a):is(.bg-green-500, .bg-green-600, .bg-emerald-600, .bg-emerald-500) { background-color: var(--sg-black); color: #fff; border-radius: 999px; box-shadow: var(--sg-shadow-black); }
:is(button, a):is(.bg-green-500, .bg-green-600, .bg-emerald-600):hover:not(:disabled) { background-color: #26272b; }
:is(button, a):is(.bg-red-500, .bg-red-600):not(.rounded-full.h-2):not(.h-2) { background-color: #fff; color: var(--sg-attention); box-shadow: inset 0 0 0 1px rgba(238, 93, 100, .45); border-radius: 999px; }
:is(button, a):is(.bg-red-500, .bg-red-600):hover:not(:disabled) { background-color: var(--sg-pastel-red); }
/* білі/сірі кнопки-контури → білі пігулки */
main :is(button, a).bg-white:is(.border, .ring-1) { border-color: transparent; --tw-ring-color: transparent; box-shadow: inset 0 0 0 1px var(--sg-outline-field); }
main button.rounded-lg, main a.rounded-lg.inline-flex, main button.rounded-xl:not(.w-full):not(.text-left) { border-radius: 999px; }
/* вкладки-«язички» бандла (rounded-t-*): та сама пігулка в усіх станах — спокійна, наведена (біла 55%), активна (чорна).
   Власник 10.10: «коли наводиш — один вигляд, коли вибрав — інший, це дивно»; СТИЛЬ.md §10: наведення = форма активного. */
main :is(button, a):is(.rounded-t-xl, .rounded-t-lg, .rounded-t-2xl, .rounded-t-md) { border-radius: 999px; }
main :is(button, a):is(.rounded-t-xl, .rounded-t-lg, .rounded-t-2xl, .rounded-t-md, .rounded-xl, .rounded-lg, .rounded-full):is(.hover\:bg-gray-100, .hover\:bg-gray-50, .hover\:bg-brand-50):not(.bg-white):not(.border):hover { background-color: rgba(255, 255, 255, .55); }
main :is(button, a):is(.rounded-t-xl, .rounded-t-lg, .rounded-t-2xl).bg-brand-600 { box-shadow: none; }
/* сегменти й вкладки-пігулки бандла: активна (біла з тінню або brand) → чорна пігулка */
main :is(.rounded-xl, .rounded-full, .rounded-2xl).bg-gray-100.p-1, main :is(.rounded-xl, .rounded-full, .rounded-2xl).bg-gray-100.p-0\.5 { background-color: rgba(255, 255, 255, .45); border-radius: 999px; }
main :is(.rounded-xl, .rounded-full, .rounded-2xl).bg-gray-100.p-1 > button.bg-white, main :is(.rounded-xl, .rounded-full, .rounded-2xl).bg-gray-100.p-0\.5 > button.bg-white { background-color: #fff; border-radius: 999px; box-shadow: none; color: var(--sg-black); }
main button.rounded-full.bg-brand-50.text-brand-700, main a.rounded-full.bg-brand-50.text-brand-700, main button.bg-brand-50.text-brand-700.ring-1 { background-color: var(--sg-black); color: #fff; --tw-ring-color: transparent; }
main .text-brand-700:is(button, a).bg-white.shadow, main .text-brand-700:is(button, a).bg-white.shadow-sm { color: var(--sg-black); }
/* поля */
:is(main, .min-h-full) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select):is(.border, .ring-1) {
  border-color: transparent; --tw-ring-color: transparent; background-color: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px var(--sg-outline-field); border-radius: 999px; padding-left: 14px; padding-right: 14px; }
:is(main, .min-h-full) textarea:is(.border, .ring-1) { border-color: transparent; --tw-ring-color: transparent; background-color: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px var(--sg-outline-field); border-radius: 18px; }
:is(main, .min-h-full) :is(input, textarea, select):is(.border, .ring-1):focus { box-shadow: inset 0 0 0 1px var(--sg-outline-focus); background-color: #fff; outline: none; }
:is(input, textarea, select).focus\:border-brand-400:focus { border-color: transparent; }
:is(input, textarea, select):is(.focus\:ring-brand-200, .focus\:ring-brand-100):focus { --tw-ring-color: rgba(20, 21, 24, .08); }
:is(input, textarea, select):focus-visible { outline: none; }
main :is(input, textarea).bg-gray-50, main :is(input, textarea).bg-gray-100 { background-color: rgba(255, 255, 255, .7); }
/* пігулки-статуси бандла: м'якші */
main span.rounded-full.bg-brand-600.text-white, main span.rounded-full.bg-brand-500.text-white { background-color: var(--sg-pastel-blue); color: var(--sg-pastel-blue-ink); box-shadow: none; }
main span.rounded-full:is(.bg-green-500, .bg-green-600).text-white { background-color: var(--sg-pastel-green); color: var(--sg-pastel-green-ink); }

/* ---------- 9. Таблиці бандла ---------- */
main table:not(.sgc-table) thead th { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-faint); background: rgba(255, 255, 255, .9); }
main table:not(.sgc-table) tbody tr:hover { background-color: rgba(255, 255, 255, .6); }

/* ---------- 10. «Дашборд директора» (темна сторінка) → світла на полотні ---------- */
main .flex.h-full.flex-col.bg-gray-950 { background: transparent; color: var(--sg-ink); }
main .bg-gray-950 > :is(header, .bg-gray-950\/80) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
main .bg-gray-950 > .bg-gray-950\/80 h1 { font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
main .bg-gray-950 .text-white, main .bg-gray-950 .text-gray-100, main .bg-gray-950 .text-gray-200 { color: var(--sg-ink); }
main .bg-gray-950 :is(.text-white\/55, .text-white\/60, .text-white\/50, .text-white\/70, .text-gray-300, .text-gray-400) { color: var(--sg-muted); }
main .bg-gray-950 :is(.text-white\/40, .text-white\/35, .text-white\/25) { color: var(--sg-faint); }
main .bg-gray-950 :is(.bg-white\/5, .bg-white\/\[\.04\], .bg-gray-900, .bg-gray-900\/60, .bg-gray-800, .bg-white\/10) { background-color: rgba(255, 255, 255, .8); }
main .bg-gray-950 :is(.ring-white\/10, .ring-white\/5, .ring-white\/20) { --tw-ring-color: transparent; }
main .bg-gray-950 :is(.border-white\/10, .border-white\/15, .border-white\/5) { border-color: var(--sg-line); }
main .bg-gray-950 .border-dashed { border-color: rgba(20, 21, 24, .16); }
main .bg-gray-950 > :is(header, .bg-gray-950\/80) button.bg-white { background-color: var(--sg-black); color: #fff; border-radius: 999px; box-shadow: var(--sg-shadow-black); }
main .bg-gray-950 :is(.bg-emerald-500\/10, .bg-green-500\/10) { background-color: var(--sg-pastel-green); --tw-ring-color: transparent; }
main .bg-gray-950 :is(.text-emerald-300, .text-emerald-200, .text-green-300) { color: var(--sg-pastel-green-ink); }
main .bg-gray-950 :is(.bg-red-500\/10) { background-color: var(--sg-pastel-red); }
main .bg-gray-950 :is(.text-red-300, .text-red-200) { color: var(--sg-pastel-red-ink); }
main .bg-gray-950 :is(.bg-amber-500\/10, .bg-amber-500\/20) { background-color: var(--sg-pastel-yellow); }
main .bg-gray-950 :is(.text-amber-300, .text-amber-200) { color: var(--sg-pastel-yellow-ink); }
main .bg-gray-950 :is(.text-sky-300, .text-brand-300, .text-sky-200) { color: var(--sg-pastel-blue-ink); }
main .bg-gray-950 svg :is(line, path)[stroke="rgba(255,255,255,.08)"], main .bg-gray-950 svg :is(line, path)[stroke="rgba(255,255,255,0.08)"] { stroke: rgba(20, 21, 24, .08); }

/* ---------- 11. Фрагменти складу (vx_base: Зміна, Наявність, Повернення, Статистика, Ревізії, Журнал, Кіктор) ---------- */
.vx.vx {
  --vx-brand: #0e0e10; --vx-brand-lt: #2b2e35; --vx-brand-50: rgba(255, 255, 255, .62); --vx-brand-100: rgba(255, 255, 255, .8);
  --vx-ink: #141518; --vx-ink-2: #2b2e35; --vx-mute: #5e626b; --vx-faint: #8a8e97;
  --vx-line: rgba(20, 21, 24, .07); --vx-hair: rgba(20, 21, 24, .06); --vx-soft: rgba(255, 255, 255, .55); --vx-soft-2: rgba(255, 255, 255, .45);
  --vx-red: #d9474f; --vx-red-bg: #f8d7d6; --vx-red-ln: rgba(238, 93, 100, .35);
  --vx-green: #1f7a4d; --vx-green-bg: #d6ecdf; --vx-green-ln: rgba(31, 122, 77, .25);
  --vx-amber: #8a6410; --vx-amber-bg: #f2dfa6; --vx-amber-ln: rgba(138, 100, 16, .25);
  --vx-violet: #46387f; --vx-violet-bg: #e7e2f8; --vx-teal: var(--sg-green-700); --vx-teal-bg: var(--sg-green-100);
  --vx-sh-1: none; --vx-sh-2: none; --vx-sh-3: var(--sg-shadow-pop);
  --vx-r-s: 999px; --vx-r-m: 16px; --vx-r-l: 24px; --vx-r-xl: 30px;
}
.vx :is(h1, h2, h3, h4) { font-family: var(--sg-font); }
.vx .vx-panel, .vx .vx-panel-flat { background: rgba(255, 255, 255, .78); border-color: transparent; box-shadow: none; }
.vx .vx-bar { background: rgba(255, 255, 255, .45); border-color: transparent; box-shadow: var(--sg-glass-edge); }
.vx .vx-btn-pri, .vx .vx-btn-ok { background: var(--sg-black); background-image: none; color: #fff; box-shadow: var(--sg-shadow-black); }
.vx .vx-btn-pri:hover:not(:disabled), .vx .vx-btn-ok:hover:not(:disabled) { background: #26272b; box-shadow: var(--sg-shadow-black); }
.vx .vx-btn-soft { background: rgba(255, 255, 255, .85); border-color: transparent; box-shadow: inset 0 0 0 1px var(--sg-outline-field); }
.vx .vx-btn-danger { background: #fff; border-color: rgba(238, 93, 100, .45); color: #d9474f; }
.vx .vx-ico { border-radius: 50%; border-color: transparent; background: rgba(255, 255, 255, .6); box-shadow: var(--sg-glass-edge); }
.vx .vx-h { font-weight: 600; }
.vx .vx-num { font-weight: 500; letter-spacing: -.02em; }
.vx .vx-eyebrow { font-weight: 600; letter-spacing: .1em; font-size: 10.5px; }

/* ---------- 11б. Пульти агентів із власними стилями (ld- Люда, sv- Света, sd- Дашборд продажів, rv- Повернення, kk- Кіктор) ----------
   Їхні <style> вставляються пізніше за цей файл — тому подвоєні класи. Сині «геро» → чорна картка; синя палітра → чорний акцент. */
.ld-hero.ld-hero, .sv-hero.sv-hero, .sd-hero.sd-hero { background: var(--sg-black); background-image: none; color: #fff; border-radius: 28px; box-shadow: var(--sg-shadow-black); }
.ld-hero.ld-hero::after, .sd-hero.sd-hero::before { content: none; }
.ld-hero.ld-hero h1 { font-weight: 600; }
.ld-tabs.ld-tabs { background: rgba(255, 255, 255, .45); border-color: transparent; box-shadow: none; border-radius: 999px; }
.ld-tabs.ld-tabs button { border-radius: 999px; }
.ld-phone.ld-phone { background: rgba(255, 255, 255, .55); border-color: transparent; box-shadow: none; }
.rv-head.rv-head, .rv-foot.rv-foot, .ld-foot.ld-foot { background: transparent; }
.kk-tab.kk-tab.on, .kk-wear.kk-wear.on { background: var(--sg-black); background-image: none; box-shadow: var(--sg-shadow-black); }
.sv.sv {
  --sv-bg: transparent; --sv-card: rgba(255, 255, 255, .8); --sv-line: rgba(20, 21, 24, .08); --sv-line2: rgba(20, 21, 24, .14);
  --sv-text: #141518; --sv-muted: #5e626b; --sv-faint: #8a8e97; --sv-brand: #0e0e10; --sv-brand2: #26272b; --sv-brand-soft: rgba(20, 21, 24, .06);
  --sv-good: #1f7a4d; --sv-good-soft: #d6ecdf; --sv-warn: #b4770c; --sv-warn-soft: #f2dfa6; --sv-bad: #d9474f; --sv-bad-soft: #f8d7d6; --sv-r: 20px;
}
.sv-wrap.sv-wrap { background: transparent; }

/* аватари без фото (колір від імені, інлайном) → пастель палітри з темними ініціалами */
span.inline-flex.rounded-full.overflow-hidden.shrink-0.text-white.font-semibold { background: var(--sg-gray-200) !important; color: var(--sg-gray-800) !important; }

/* ---------- 12. Плавучі елементи: віджет Олі/Марії, тости ---------- */
.fixed.bottom-4.right-4.rounded-full.bg-white { background: var(--sg-black); color: #fff; --tw-ring-color: transparent; box-shadow: var(--sg-shadow-black); }
.fixed.bottom-4.right-4.rounded-full.bg-white :is(.text-gray-800, .text-gray-700) { color: #fff; }
.fixed.bottom-0.right-0.z-40.rounded-t-2xl.bg-white { --tw-ring-color: transparent; border-radius: 22px 22px 0 0; }
@media (min-width: 640px) { .fixed.bottom-0.right-0.z-40.rounded-t-2xl.bg-white { border-radius: 22px; } }
.fixed.bottom-0.right-0.z-40.rounded-t-2xl.bg-white .bg-brand-600 { background-color: var(--sg-black); }
.fixed.bottom-6.left-1\/2.bg-gray-900\/90 { background: var(--sg-black); border-radius: 999px; }
.gm-snack { background: var(--sg-black); border-radius: 999px; }
/* кнопка ШІ-секретарки (Оля) на правому краю: замість фото — фірмова «іскра» фіолетового кольору ШІ (СТИЛЬ §7) у скляному
   кружечку 44 (власник 10.10: «значок крутий у нашому стилі, типу ШІ»); підказка й поведінка кнопки хоста без змін */
button.fixed.right-0.top-\[58\%\] { right: 14px; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 999px;
  background: var(--sg-black); --tw-ring-color: transparent; box-shadow: var(--sg-shadow-black);
  transition: transform var(--sg-ease), box-shadow var(--sg-ease); }   /* чорна, бо біла зливалась із полотном (власник 10.10) */
button.fixed.right-0.top-\[58\%\]:hover { padding: 0; background: var(--sg-black); transform: translateX(-2px) scale(1.04); box-shadow: var(--sg-shadow-black); }
button.fixed.right-0.top-\[58\%\] img { display: none; }
button.fixed.right-0.top-\[58\%\]::before { content: ""; width: 24px; height: 24px; background: var(--sg-violet-300, var(--sg-violet-500));
  -webkit-mask: var(--ico-spark) center / contain no-repeat; mask: var(--ico-spark) center / contain no-repeat; }

/* ---------- 13. Телефон ---------- */
@media (max-width: 767px) {
  aside.inset-y-0.w-72 { width: min(86vw, 320px); background: #fff; border-radius: 0 26px 26px 0; box-shadow: var(--sg-shadow-pop); }
  main .bg-white { background-color: rgba(255, 255, 255, .84); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  aside.inset-y-0.w-72 { background: rgba(255, 255, 255, .82); }
  header.md\:hidden { background: rgba(255, 255, 255, .88); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }


/* захардкоджені кольори бандла (графіки, легенди) → палітра */
:is([stroke="#38bdf8"], [stroke="#38BDF8"]):not(.kk *) { stroke: var(--sg-gray-900); }
:is([fill="#38bdf8"], [fill="#38BDF8"]):not(.kk *) { fill: var(--sg-gray-900); }
[style*="background: rgb(56, 189, 248)"]:not(.kk *), [style*="background-color: rgb(56, 189, 248)"]:not(.kk *) { background: var(--sg-gray-900) !important; }
:is([stroke="#1999d6"], [stroke="#1999D6"]):not(.kk *) { stroke: var(--sg-gray-900); }
:is([fill="#1999d6"], [fill="#1999D6"]):not(.kk *) { fill: var(--sg-gray-900); }
[style*="background: rgb(25, 153, 214)"]:not(.kk *), [style*="background-color: rgb(25, 153, 214)"]:not(.kk *) { background: var(--sg-gray-900) !important; }
:is([stroke="#0f7cb4"], [stroke="#0F7CB4"]):not(.kk *) { stroke: var(--sg-gray-900); }
:is([fill="#0f7cb4"], [fill="#0F7CB4"]):not(.kk *) { fill: var(--sg-gray-900); }
[style*="background: rgb(15, 124, 180)"]:not(.kk *), [style*="background-color: rgb(15, 124, 180)"]:not(.kk *) { background: var(--sg-gray-900) !important; }
:is([stroke="#2563eb"], [stroke="#2563EB"]):not(.kk *) { stroke: var(--sg-blue-500); }
:is([fill="#2563eb"], [fill="#2563EB"]):not(.kk *) { fill: var(--sg-blue-500); }
[style*="background: rgb(37, 99, 235)"]:not(.kk *), [style*="background-color: rgb(37, 99, 235)"]:not(.kk *) { background: var(--sg-blue-500) !important; }
:is([stroke="#0f5f8c"], [stroke="#0F5F8C"]):not(.kk *) { stroke: var(--sg-gray-800); }
:is([fill="#0f5f8c"], [fill="#0F5F8C"]):not(.kk *) { fill: var(--sg-gray-800); }
[style*="background: rgb(15, 95, 140)"]:not(.kk *), [style*="background-color: rgb(15, 95, 140)"]:not(.kk *) { background: var(--sg-gray-800) !important; }
:is([stroke="#f43f5e"], [stroke="#F43F5E"]):not(.kk *) { stroke: var(--sg-red-500); }
:is([fill="#f43f5e"], [fill="#F43F5E"]):not(.kk *) { fill: var(--sg-red-500); }
[style*="background: rgb(244, 63, 94)"]:not(.kk *), [style*="background-color: rgb(244, 63, 94)"]:not(.kk *) { background: var(--sg-red-500) !important; }
:is([stroke="#dc2626"], [stroke="#DC2626"]):not(.kk *) { stroke: var(--sg-red-600); }
:is([fill="#dc2626"], [fill="#DC2626"]):not(.kk *) { fill: var(--sg-red-600); }
[style*="background: rgb(220, 38, 38)"]:not(.kk *), [style*="background-color: rgb(220, 38, 38)"]:not(.kk *) { background: var(--sg-red-600) !important; }
:is([stroke="#cc3a42"], [stroke="#CC3A42"]):not(.kk *) { stroke: var(--sg-red-600); }
:is([fill="#cc3a42"], [fill="#CC3A42"]):not(.kk *) { fill: var(--sg-red-600); }
[style*="background: rgb(204, 58, 66)"]:not(.kk *), [style*="background-color: rgb(204, 58, 66)"]:not(.kk *) { background: var(--sg-red-600) !important; }
:is([stroke="#ef4444"], [stroke="#EF4444"]):not(.kk *) { stroke: var(--sg-red-500); }
:is([fill="#ef4444"], [fill="#EF4444"]):not(.kk *) { fill: var(--sg-red-500); }
[style*="background: rgb(239, 68, 68)"]:not(.kk *), [style*="background-color: rgb(239, 68, 68)"]:not(.kk *) { background: var(--sg-red-500) !important; }
:is([stroke="#7f1d1d"], [stroke="#7F1D1D"]):not(.kk *) { stroke: var(--sg-red-800); }
:is([fill="#7f1d1d"], [fill="#7F1D1D"]):not(.kk *) { fill: var(--sg-red-800); }
[style*="background: rgb(127, 29, 29)"]:not(.kk *), [style*="background-color: rgb(127, 29, 29)"]:not(.kk *) { background: var(--sg-red-800) !important; }
:is([stroke="#4ade80"], [stroke="#4ADE80"]):not(.kk *) { stroke: var(--sg-green-400); }
:is([fill="#4ade80"], [fill="#4ADE80"]):not(.kk *) { fill: var(--sg-green-400); }
[style*="background: rgb(74, 222, 128)"]:not(.kk *), [style*="background-color: rgb(74, 222, 128)"]:not(.kk *) { background: var(--sg-green-400) !important; }
:is([stroke="#16a34a"], [stroke="#16A34A"]):not(.kk *) { stroke: var(--sg-green-600); }
:is([fill="#16a34a"], [fill="#16A34A"]):not(.kk *) { fill: var(--sg-green-600); }
[style*="background: rgb(22, 163, 74)"]:not(.kk *), [style*="background-color: rgb(22, 163, 74)"]:not(.kk *) { background: var(--sg-green-600) !important; }
:is([stroke="#22c55e"], [stroke="#22C55E"]):not(.kk *) { stroke: var(--sg-green-500); }
:is([fill="#22c55e"], [fill="#22C55E"]):not(.kk *) { fill: var(--sg-green-500); }
[style*="background: rgb(34, 197, 94)"]:not(.kk *), [style*="background-color: rgb(34, 197, 94)"]:not(.kk *) { background: var(--sg-green-500) !important; }
:is([stroke="#178051"], [stroke="#178051"]):not(.kk *) { stroke: var(--sg-green-600); }
:is([fill="#178051"], [fill="#178051"]):not(.kk *) { fill: var(--sg-green-600); }
[style*="background: rgb(23, 128, 81)"]:not(.kk *), [style*="background-color: rgb(23, 128, 81)"]:not(.kk *) { background: var(--sg-green-600) !important; }
:is([stroke="#166534"], [stroke="#166534"]):not(.kk *) { stroke: var(--sg-green-700); }
:is([fill="#166534"], [fill="#166534"]):not(.kk *) { fill: var(--sg-green-700); }
[style*="background: rgb(22, 101, 52)"]:not(.kk *), [style*="background-color: rgb(22, 101, 52)"]:not(.kk *) { background: var(--sg-green-700) !important; }
:is([stroke="#f59e0b"], [stroke="#F59E0B"]):not(.kk *) { stroke: var(--sg-amber-400); }
:is([fill="#f59e0b"], [fill="#F59E0B"]):not(.kk *) { fill: var(--sg-amber-400); }
[style*="background: rgb(245, 158, 11)"]:not(.kk *), [style*="background-color: rgb(245, 158, 11)"]:not(.kk *) { background: var(--sg-amber-400) !important; }
:is([stroke="#d97706"], [stroke="#D97706"]):not(.kk *) { stroke: var(--sg-amber-600); }
:is([fill="#d97706"], [fill="#D97706"]):not(.kk *) { fill: var(--sg-amber-600); }
[style*="background: rgb(217, 119, 6)"]:not(.kk *), [style*="background-color: rgb(217, 119, 6)"]:not(.kk *) { background: var(--sg-amber-600) !important; }
:is([stroke="#ca8a04"], [stroke="#CA8A04"]):not(.kk *) { stroke: var(--sg-amber-500); }
:is([fill="#ca8a04"], [fill="#CA8A04"]):not(.kk *) { fill: var(--sg-amber-500); }
[style*="background: rgb(202, 138, 4)"]:not(.kk *), [style*="background-color: rgb(202, 138, 4)"]:not(.kk *) { background: var(--sg-amber-500) !important; }
:is([stroke="#ea580c"], [stroke="#EA580C"]):not(.kk *) { stroke: var(--sg-amber-600); }
:is([fill="#ea580c"], [fill="#EA580C"]):not(.kk *) { fill: var(--sg-amber-600); }
[style*="background: rgb(234, 88, 12)"]:not(.kk *), [style*="background-color: rgb(234, 88, 12)"]:not(.kk *) { background: var(--sg-amber-600) !important; }
:is([stroke="#b45309"], [stroke="#B45309"]):not(.kk *) { stroke: var(--sg-amber-700); }
:is([fill="#b45309"], [fill="#B45309"]):not(.kk *) { fill: var(--sg-amber-700); }
[style*="background: rgb(180, 83, 9)"]:not(.kk *), [style*="background-color: rgb(180, 83, 9)"]:not(.kk *) { background: var(--sg-amber-700) !important; }
:is([stroke="#92400e"], [stroke="#92400E"]):not(.kk *) { stroke: var(--sg-amber-800); }
:is([fill="#92400e"], [fill="#92400E"]):not(.kk *) { fill: var(--sg-amber-800); }
[style*="background: rgb(146, 64, 14)"]:not(.kk *), [style*="background-color: rgb(146, 64, 14)"]:not(.kk *) { background: var(--sg-amber-800) !important; }
:is([stroke="#94a3b8"], [stroke="#94A3B8"]):not(.kk *) { stroke: var(--sg-gray-400); }
:is([fill="#94a3b8"], [fill="#94A3B8"]):not(.kk *) { fill: var(--sg-gray-400); }
[style*="background: rgb(148, 163, 184)"]:not(.kk *), [style*="background-color: rgb(148, 163, 184)"]:not(.kk *) { background: var(--sg-gray-400) !important; }
:is([stroke="#e2e8f0"], [stroke="#E2E8F0"]):not(.kk *) { stroke: var(--sg-gray-200); }
:is([fill="#e2e8f0"], [fill="#E2E8F0"]):not(.kk *) { fill: var(--sg-gray-200); }
[style*="background: rgb(226, 232, 240)"]:not(.kk *), [style*="background-color: rgb(226, 232, 240)"]:not(.kk *) { background: var(--sg-gray-200) !important; }
:is([stroke="#e5e7eb"], [stroke="#E5E7EB"]):not(.kk *) { stroke: var(--sg-gray-200); }
:is([fill="#e5e7eb"], [fill="#E5E7EB"]):not(.kk *) { fill: var(--sg-gray-200); }
[style*="background: rgb(229, 231, 235)"]:not(.kk *), [style*="background-color: rgb(229, 231, 235)"]:not(.kk *) { background: var(--sg-gray-200) !important; }
:is([stroke="#f1f5f9"], [stroke="#F1F5F9"]):not(.kk *) { stroke: var(--sg-gray-100); }
:is([fill="#f1f5f9"], [fill="#F1F5F9"]):not(.kk *) { fill: var(--sg-gray-100); }
[style*="background: rgb(241, 245, 249)"]:not(.kk *), [style*="background-color: rgb(241, 245, 249)"]:not(.kk *) { background: var(--sg-gray-100) !important; }
:is([stroke="#475569"], [stroke="#475569"]):not(.kk *) { stroke: var(--sg-gray-600); }
:is([fill="#475569"], [fill="#475569"]):not(.kk *) { fill: var(--sg-gray-600); }
[style*="background: rgb(71, 85, 105)"]:not(.kk *), [style*="background-color: rgb(71, 85, 105)"]:not(.kk *) { background: var(--sg-gray-600) !important; }
:is([stroke="#334155"], [stroke="#334155"]):not(.kk *) { stroke: var(--sg-gray-700); }
:is([fill="#334155"], [fill="#334155"]):not(.kk *) { fill: var(--sg-gray-700); }
[style*="background: rgb(51, 65, 85)"]:not(.kk *), [style*="background-color: rgb(51, 65, 85)"]:not(.kk *) { background: var(--sg-gray-700) !important; }
:is([stroke="#232f3d"], [stroke="#232F3D"]):not(.kk *) { stroke: var(--sg-gray-800); }
:is([fill="#232f3d"], [fill="#232F3D"]):not(.kk *) { fill: var(--sg-gray-800); }
[style*="background: rgb(35, 47, 61)"]:not(.kk *), [style*="background-color: rgb(35, 47, 61)"]:not(.kk *) { background: var(--sg-gray-800) !important; }
:is([stroke="#a855f7"], [stroke="#A855F7"]):not(.kk *) { stroke: var(--sg-violet-500); }
:is([fill="#a855f7"], [fill="#A855F7"]):not(.kk *) { fill: var(--sg-violet-500); }
[style*="background: rgb(168, 85, 247)"]:not(.kk *), [style*="background-color: rgb(168, 85, 247)"]:not(.kk *) { background: var(--sg-violet-500) !important; }
:is([stroke="#8b5cf6"], [stroke="#8B5CF6"]):not(.kk *) { stroke: var(--sg-violet-500); }
:is([fill="#8b5cf6"], [fill="#8B5CF6"]):not(.kk *) { fill: var(--sg-violet-500); }
[style*="background: rgb(139, 92, 246)"]:not(.kk *), [style*="background-color: rgb(139, 92, 246)"]:not(.kk *) { background: var(--sg-violet-500) !important; }
:is([stroke="#7c3aed"], [stroke="#7C3AED"]):not(.kk *) { stroke: var(--sg-violet-600); }
:is([fill="#7c3aed"], [fill="#7C3AED"]):not(.kk *) { fill: var(--sg-violet-600); }
[style*="background: rgb(124, 58, 237)"]:not(.kk *), [style*="background-color: rgb(124, 58, 237)"]:not(.kk *) { background: var(--sg-violet-600) !important; }

/* іконки пунктів меню */
aside.inset-y-0.w-72 nav a[href="/"] { --ico: var(--ico-structure); }
aside.inset-y-0.w-72 nav a[href="/companies"] { --ico: var(--ico-companies); }
aside.inset-y-0.w-72 nav a[href="/crm/clients"] { --ico: var(--ico-clients); }
aside.inset-y-0.w-72 nav a[href="/crm/deals"] { --ico: var(--ico-deals); }
aside.inset-y-0.w-72 nav a[href="/crm/tasks"] { --ico: var(--ico-tasks); }
aside.inset-y-0.w-72 nav a[href="/crm/cashbox"] { --ico: var(--ico-cashbox); }
aside.inset-y-0.w-72 nav a[href="/crm/documents"] { --ico: var(--ico-documents); }
aside.inset-y-0.w-72 nav a[href="/crm/integrations"] { --ico: var(--ico-integrations); }
aside.inset-y-0.w-72 nav a[href="/chats"] { --ico: var(--ico-chats); }
aside.inset-y-0.w-72 nav a[href="/inbox"] { --ico: var(--ico-inbox); }
aside.inset-y-0.w-72 nav a[href="/mail"] { --ico: var(--ico-mail); }
aside.inset-y-0.w-72 nav a[href="/telephony"] { --ico: var(--ico-phone); }
aside.inset-y-0.w-72 nav a[href="/oles-help"] { --ico: var(--ico-help); }
aside.inset-y-0.w-72 nav a[href="/sales"] { --ico: var(--ico-sales); }
aside.inset-y-0.w-72 nav a[href="/dashboard"] { --ico: var(--ico-dashboard); }
aside.inset-y-0.w-72 nav a[href="/luda"] { --ico: var(--ico-agent); }
aside.inset-y-0.w-72 nav a[href="/cabinets"] { --ico: var(--ico-folder); }
aside.inset-y-0.w-72 nav a[href="/warehouse"] { --ico: var(--ico-warehouse); }
aside.inset-y-0.w-72 nav a[href="/crm/products"] { --ico: var(--ico-products); }
aside.inset-y-0.w-72 nav a[href="/deliveries"] { --ico: var(--ico-deliveries); }
aside.inset-y-0.w-72 nav a[href="/orders/new"] { --ico: var(--ico-ttn); }
aside.inset-y-0.w-72 nav a[href="/procurement"] { --ico: var(--ico-procurement); }
aside.inset-y-0.w-72 nav a[href="/finance"] { --ico: var(--ico-finance); }
aside.inset-y-0.w-72 nav a[href="/crm/finance"] { --ico: var(--ico-coins); }
aside.inset-y-0.w-72 nav a[href="/sveta"] { --ico: var(--ico-printer); }
aside.inset-y-0.w-72 nav a[href="/vault"] { --ico: var(--ico-vault); }
aside.inset-y-0.w-72 nav a[href="/admin"] { --ico: var(--ico-admin); }
aside.inset-y-0.w-72 nav a[href="/crm/settings"] { --ico: var(--ico-settings); }
aside.inset-y-0.w-72 nav a[href="/profile"] { --ico: var(--ico-profile); }