/* ===== Design tokens =====
           Дизайн-система PRIME BPM: единый источник правды для цветов,
           радиусов, теней, типографики. Меняй значения здесь — они применяются
           глобально. Для тёмной темы добавь [data-theme="dark"] блок ниже. */
        :root {
            /* ========================================================
               Палитра «Future Dusk × Apple» — лаконичный лук, единый
               brand-цвет, нейтральные серые и системные семафоры Apple.
               ======================================================== */

            /* Brand / Primary — Future Dusk #3E3C59
               Hover/strong — Royal Indigo, Digital Lavender — мягкий вариант. */
            --color-primary:        #3E3C59;
            --color-primary-hover:  #524F81;
            --color-primary-dark:   #2D2B40;
            --color-primary-strong: #524F81;
            --color-primary-500:    #524F81;
            --color-primary-400:    #8F89B8;   /* Digital Lavender */
            --color-primary-50:     #E5E2F4;
            --color-primary-25:     #F4F2FA;
            --color-primary-20:     #F4F2FA;
            --color-primary-10:     #FAFAFD;

            /* Neutrals — серые Apple */
            --color-surface: #FFFFFF;
            --color-gray-50:  #FAFAFB;
            --color-gray-100: #F5F5F7;          /* Space Gray */
            --color-gray-200: #E5E7EB;          /* Titanium Silver */
            --color-gray-300: #D1D5DB;
            --color-gray-400: #9CA3AF;
            --color-gray-500: #636366;          /* Steel Gray */
            --color-gray-700: #3A3A3C;
            --color-gray-900: #1C1C1E;          /* Apple Midnight */
            --color-nav-bg:   #1C1C1E;

            /* App backgrounds — Space Gray для секций, белый для страниц */
            --color-bg-app:    #F5F5F7;
            --color-bg-subtle: #F5F5F7;
            --color-bg-chip:   #F5F5F7;
            --color-bg-tint:   #FAFAFB;
            --color-bg-faint:  #FAFAFB;

            /* Semantic text */
            --color-text: var(--color-gray-900);
            --color-text-strong: var(--color-gray-700);
            --color-text-secondary: var(--color-gray-500);
            /* Steel Gray (#636366) на белом — 5.7:1, выше WCAG AA. */
            --color-text-muted: var(--color-gray-500);

            /* Borders — Titanium Silver */
            --color-border: var(--color-gray-200);
            --color-border-strong: var(--color-gray-300);

            /* Accent / CTA — единый brand-цвет (Apple-style: один primary
               CTA на экран, accent совпадает с brand). Highlighty-варианты
               (бейджи, hover) — Ultramarine Tint #A5B4FC. */
            --color-accent:        #3E3C59;
            --color-accent-hover:  #524F81;
            --color-accent-strong: #2D2B40;
            --color-accent-50:     #E5E2F4;
            --color-accent-25:     #F4F2FA;
            --color-accent-tint:   #A5B4FC;     /* Ultramarine Tint */

            /* Status: Apple system colors */
            --color-success:     #34C759;       /* Apple Green */
            --color-success-500: #34C759;
            --color-success-50:  #E0F8E5;
            --color-warning:     #FF9500;       /* Apple Orange */
            --color-warning-50:  #FFE9CC;
            --color-danger:      #FF3B30;       /* Apple Red */
            --color-danger-600:  #FF3B30;
            --color-danger-700:  #D70015;
            --color-danger-text: #D70015;
            --color-danger-500:  #FF453A;
            --color-danger-50:   #FFE5E3;
            --color-danger-25:   #FFF2F1;

            /* Info / link — единый синий для информационных акцентов
               (статус «в работе», ссылки, обучающие подсказки). Заменяет
               захардкоженный #007AFF, который раньше встречался в коде
               вне дизайн-системы. */
            --color-info:        #2563EB;
            --color-info-hover:  #1E4ED8;
            --color-info-50:     #DBEAFE;

            /* Radii */
            /* Fluid radii — масштабируются вместе с UI, но менее агрессивно.
               На 320px ~85% от базы, на 2560px ~115%. pill всегда 999px. */
            --radius-xs:  clamp(3px,  0.05vw + 2.84px,  5px);   /* base 4 */
            --radius-sm:  clamp(5px,  0.07vw + 4.78px,  7px);   /* base 6 */
            --radius-md:  clamp(7px,  0.07vw + 6.78px,  9px);   /* base 8 */
            --radius-lg:  clamp(8px,  0.13vw + 7.58px,  12px);  /* base 10 */
            --radius-xl:  clamp(10px, 0.13vw + 9.58px,  14px);  /* base 12 */
            --radius-2xl: clamp(13px, 0.20vw + 12.36px, 19px);  /* base 16 */
            --radius-3xl: clamp(17px, 0.20vw + 16.36px, 23px);  /* base 20 */
            --radius-pill: 999px;

            /* Shadows — единая elevation-шкала (как Material/Tailwind).
               Используй --shadow-1..4 для новых компонентов. Старые
               --shadow-sm/md/lg/xl оставлены для обратной совместимости. */
            --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
            --shadow-2: 0 2px 8px rgba(15, 23, 42, 0.08);
            --shadow-3: 0 8px 24px rgba(15, 23, 42, 0.12);
            --shadow-4: 0 18px 40px rgba(15, 23, 42, 0.16);
            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
            --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 4px 24px rgba(15, 23, 42, 0.08);
            --shadow-xl: 0 18px 40px rgba(15, 23, 42, 0.16);
            /* Тени бренда — оттенок Future Dusk (62, 60, 89). */
            --shadow-primary: 0 2px 8px rgba(62, 60, 89, 0.22);
            --shadow-primary-lg: 0 8px 20px rgba(62, 60, 89, 0.30);
            --shadow-sidebar: 3px 0 6px -2px rgba(0, 0, 0, 0.12);

            /* Typography
               --font-sans: Onest — современный гротеск с нативной
               кириллицей, спроектирован для UI с фокусом на legibility
               на мелких кеглях (12-14px читаются чётко). Подключается
               через Google Fonts CDN в <head> HTML.
               --font-mono: JetBrains Mono — стандарт для кода. */
            --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

            /* Fluid typography via clamp(min, preferred, max).
               Базовая точка 1440px → значение из «было» (12/13/14/16/18/20/24/30).
               На 320px текст сжимается ~8%, на 2560px растёт ~10%.
               Используется 1954 раз в CSS через var(--text-*) — изменение
               формулы здесь автоматически адаптирует весь интерфейс. */
            --text-xs:   clamp(11px,   0.13vw + 10.58px, 13px);   /* base 12 */
            --text-sm:   clamp(12px,   0.13vw + 11.58px, 14.5px); /* base 13 */
            --text-base: clamp(12.5px, 0.20vw + 11.86px, 16px);   /* base 14 */
            --text-md:   clamp(14px,   0.30vw + 13.04px, 18px);   /* base 16 */
            --text-lg:   clamp(16px,   0.35vw + 14.88px, 21px);   /* base 18 */
            --text-xl:   clamp(17px,   0.50vw + 15.40px, 24px);   /* base 20 */
            --text-2xl:  clamp(20px,   0.60vw + 18.08px, 28px);   /* base 24 */
            --text-3xl:  clamp(24px,   0.90vw + 21.12px, 36px);   /* base 30 */

            /* Интерлиньяж. Мелкому тексту нужен больший — тело 1.5,
               заголовки плотнее. (Design Review 2026-05-15.) */
            --leading-tight: 1.2;
            --leading-snug: 1.35;
            --leading-normal: 1.5;

            /* Fluid spacing (4px-база на 1440px). Аналогично --text-*,
               отступы плавно масштабируются с экраном. Менее агрессивно
               чем шрифты — на 320px ~75%, на 2560px ~125% от базового.
               Используется 863 раз в CSS через var(--space-*). */
            --space-0:   0;
            --space-1:   clamp(3px,  0.07vw + 2.78px,  5px);    /* base 4 */
            --space-2:   clamp(6px,  0.13vw + 5.58px,  10px);   /* base 8 */
            --space-3:   clamp(9px,  0.20vw + 8.36px,  15px);   /* base 12 */
            --space-4:   clamp(12px, 0.27vw + 11.14px, 20px);   /* base 16 */
            --space-5:   clamp(15px, 0.33vw + 13.94px, 25px);   /* base 20 */
            --space-6:   clamp(18px, 0.40vw + 16.72px, 30px);   /* base 24 */
            --space-8:   clamp(24px, 0.53vw + 22.30px, 40px);   /* base 32 */
            --space-10:  clamp(30px, 0.67vw + 27.86px, 50px);   /* base 40 */
            --space-12:  clamp(36px, 0.80vw + 33.44px, 60px);   /* base 48 */

            /* Transitions */
            --transition-fast: 0.15s ease;
            --transition-base: 0.2s ease;

            /* Z-index scale */
            --z-sticky: 20;
            --z-sidebar: 40;
            --z-modal: 100;
            --z-toast: 200;
            --z-palette: 300;
        }

        /* ===== Тёмная тема =====
           Активируется через document.documentElement.dataset.theme = 'dark'.
           Переопределяем только семантические переменные — компоненты
           автоматически перекрашиваются, если используют var(--color-*). */
        [data-theme="dark"] {
            --color-surface: #1B1F2A;
            --color-bg-app: #0F131C;
            --color-bg-subtle: #161A24;
            --color-bg-chip: #232838;
            --color-bg-tint: #1B1F2A;
            --color-bg-faint: #161A24;

            --color-text: #E5E7EB;
            --color-text-strong: #F3F4F6;
            --color-text-secondary: #9CA3AF;
            --color-text-muted: #6B7280;

            --color-border: #2A3142;
            --color-border-strong: #3A4257;

            --color-gray-50: #1B1F2A;
            --color-gray-100: #232838;
            --color-gray-200: #2A3142;
            --color-gray-300: #3A4257;

            --color-primary-25: rgba(62, 60, 89, 0.10);
            --color-primary-50: rgba(62, 60, 89, 0.18);

            --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
            --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
            --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55);
            --shadow-4: 0 18px 40px rgba(0, 0, 0, 0.65);
        }
        [data-theme="dark"] body { color: var(--color-text); }

        * { box-sizing: border-box; margin: var(--space-0); padding: var(--space-0); }
        /* Fluid root font-size — на 320px ≈ 13px, на 1440px = 14px (base),
           на 2560px ≈ 18px. Любые rem-наследники (h1, медиа-объекты,
           внешние библиотеки) автоматически масштабируются. */
        html {
            overflow-x: hidden;
            font-family: var(--font-sans);
            font-size: clamp(13px, 0.2vw + 12.36px, 18px);
        }
        /* media — никогда не вылазит за контейнер */
        img, svg, video, canvas, audio, iframe, embed, object {
            max-width: 100%;
            height: auto;
        }
        body {
            font-family: var(--font-sans);
            background: var(--color-bg-app);
            color: var(--color-text);
            /* Тело — воздух без перевёрстки (Design Review 2026-05-15).
               Компоненты со своим line-height не затрагиваются. */
            line-height: var(--leading-normal);
            overflow-x: hidden;
            max-width: 100%;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            font-feature-settings: 'cv11' on, 'ss01' on;
            letter-spacing: -0.003em;
            line-height: 1.5;
        }
        h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; line-height: 1.2; font-weight: 600; }
        /* Tabular figures для дат, цифр, прогресса — выравниваются по сетке,
           не «прыгают» при смене значения. */
        input[type="date"],
        input[type="number"],
        input[type="time"],
        .tabular-nums,
        .progress-label,
        .fav-card-progress-label,
        .task-shift-dates,
        .shift-pop-dates,
        .shift-item-dates,
        .task-dates-cell,
        .hist-v2-time,
        .pc-msg-time,
        #overall-progress { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

        /* ===== Utility & atom classes =====
           Заменяют повторяющиеся inline-стили в HTML. Семантические названия
           (.text-hint, .form-hint, .empty-placeholder) предпочтительнее
           атомарных (.mt-20, .w-100), чтобы HTML оставался читаемым. */
        .sidebar-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 8px 4px; }
        .row-flex-gap { display: flex; gap: var(--space-3); }
        .row-flex-gap-sm { display: flex; gap: var(--space-2); align-items: center; }
        .row-flex-center { display: flex; align-items: center; gap: var(--space-2); }
        .form-hint { font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: 4px; }
        .text-hint { color: var(--color-text-muted); font-size: var(--text-xs); }
        .text-micro { color: var(--color-text-secondary); font-size: var(--text-xs); }
        .text-secondary-sm { font-size: var(--text-xs); color: var(--color-text-secondary); }
        .empty-placeholder { color: var(--color-text-muted); padding: var(--space-6); text-align: center; }
        .is-hidden { display: none !important; }

        /* === Loading state кнопки (правило loading-buttons из §2) ===
           Показывает пользователю, что async-операция в процессе. Кнопка
           отключается, контент тускнеет, появляется спиннер. */
        .btn-loading {
            position: relative;
            color: transparent !important;
            pointer-events: none;
        }
        .btn-loading::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            width: 14px; height: 14px;
            margin-top: -7px; margin-left: -7px;
            border: 2px solid currentColor;
            border-top-color: transparent;
            border-radius: 50%;
            color: rgba(255,255,255,0.95);
            animation: btn-spin 0.65s linear infinite;
        }
        @keyframes btn-spin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) {
            .btn-loading::after { animation: none; }
        }

        /* === Press feedback (правило press-feedback из §2 Touch & Interaction) ===
           Маленький translateY(1px) на :active даёт ощущение «нажалось».
           Длительность 50ms — мгновенный отклик. */
        button:not(:disabled):active,
        .btn-toolbar-add:active,
        .admin-btn-primary:active,
        .admin-btn-secondary:active,
        .risks-v2-btn-add:active,
        .sumv2-export-btn:active,
        .ann-btn-submit:active,
        .btn-add-task:active,
        .btn-confirm:active,
        .bulk-toolbar-btn:active,
        .plan-view-chip:active,
        .kb-card-action:active,
        .btn-attach:active,
        .btn-comment:active {
            transform: translateY(1px);
            transition-duration: 50ms;
        }

        /* === Accessibility: prefers-reduced-motion (правило §1) ===
           Уважаем системную настройку «уменьшить движение» — критично для
           пользователей с вестибулярными расстройствами и при укачивании. */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ====================================================================
           ПРИМИТИВЫ КОМПОНЕНТОВ — Linear/Notion-стиль.
           Используются по всей системе, замещают разрозненные классы.
           ==================================================================== */

        /* ===== BUTTONS ===== */
        /* Универсальные кнопки. Все имеют единые: высоту 36px, radius 8px,
           font-size 13px, weight 500, padding 8px 16px. Разница только в
           интенсивности (primary/secondary/ghost). */
        .btn,
        .btn-primary,
        .btn-secondary,
        .btn-ghost,
        .btn-danger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            height: 36px;
            padding: 0 16px;
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            font-weight: 500;
            font-family: inherit;
            line-height: 1;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
            user-select: none;
            border: 1px solid transparent;
        }
        .btn-primary {
            background: var(--color-primary);
            color: #fff;
            font-weight: 600;
            letter-spacing: -0.005em;
        }
        .btn-primary:hover {
            background: var(--color-primary-hover);
            box-shadow: var(--shadow-primary);
        }
        .btn-primary:active { transform: translateY(1px); transition-duration: 50ms; }

        .btn-secondary {
            background: white;
            color: var(--color-text-strong);
            border-color: var(--color-border-strong);
        }
        .btn-secondary:hover {
            background: var(--color-bg-subtle);
            border-color: var(--color-text-secondary);
        }
        .btn-secondary:active { transform: translateY(1px); transition-duration: 50ms; }

        .btn-ghost {
            background: transparent;
            color: var(--color-text-strong);
        }
        .btn-ghost:hover {
            background: var(--color-bg-subtle);
        }
        .btn-ghost:active { transform: translateY(1px); transition-duration: 50ms; }

        .btn-danger {
            background: white;
            color: var(--color-danger);
            border-color: var(--color-danger-50);
        }
        .btn-danger:hover {
            background: var(--color-danger);
            color: white;
            border-color: var(--color-danger);
        }

        .btn-sm {
            height: 30px;
            padding: 0 12px;
            font-size: var(--text-xs);
            border-radius: var(--radius-sm);
        }
        .btn-lg {
            height: 42px;
            padding: 0 20px;
            font-size: var(--text-base);
        }
        .btn:disabled,
        .btn-primary:disabled,
        .btn-secondary:disabled,
        .btn-ghost:disabled,
        .btn-danger:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            pointer-events: none;
        }
        .btn:focus-visible,
        .btn-primary:focus-visible,
        .btn-secondary:focus-visible,
        .btn-ghost:focus-visible,
        .btn-danger:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--color-primary-25);
        }

        /* ===== STATUS PILL ===== */
        /* Компактный статус: только цветной текст 12/500, без точки.
           Используется в строках задач, карточках, фильтрах, dashboard. */
        .status-pill {
            display: inline-flex;
            align-items: center;
            font-size: var(--text-xs);
            font-weight: 500;
            line-height: 1;
            color: var(--color-text-strong);
            padding: 4px 8px;
            border-radius: var(--radius-pill);
            background: transparent;
            white-space: nowrap;
        }
        .status-pill.is-todo     { color: #6B7280; }
        .status-pill.is-progress { color: #007AFF; }
        .status-pill.is-done     { color: #15803D; }
        .status-pill.is-blocked  { color: #B91C1C; }
        .status-pill.is-clickable { cursor: pointer; }
        .status-pill.is-clickable:hover { background: var(--color-bg-subtle); }

        /* Filled-вариант — для случаев, где нужна цветная плашка
           (карточки канбана, drawer-header). */
        .status-pill--filled {
            padding: 4px 8px;
            font-weight: 600;
        }
        .status-pill--filled.is-todo     { background: #F3F4F6; color: #4B5563; }
        .status-pill--filled.is-progress { background: #DBEAFE; color: #0040DD; }
        .status-pill--filled.is-done     { background: #DCFCE7; color: #166534; }
        .status-pill--filled.is-blocked  { background: #FEE2E2; color: #991B1B; }

        /* ===== AVATAR ===== */
        /* Круглый аватар: инициалы или фото. Цвет фона — стабильный hash
           по ФИО, чтобы один и тот же сотрудник всегда был одного цвета. */
        .avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            font-size: var(--text-xs);
            font-weight: 600;
            color: #fff;
            background: var(--color-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.2px;
            flex-shrink: 0;
            overflow: hidden;
            line-height: 1;
            user-select: none;
        }
        .avatar img { width: 100%; height: 100%; object-fit: cover; }
        .avatar-sm { width: 20px; height: 20px; font-size: var(--text-xs); }
        .avatar-md { width: 24px; height: 24px; font-size: var(--text-xs); }
        .avatar-lg { width: 32px; height: 32px; font-size: var(--text-xs); }
        .avatar-xl { width: 44px; height: 44px; font-size: var(--text-md); }

        /* Стек аватаров с overlap (для multiple assignees) */
        .avatar-stack {
            display: inline-flex;
            align-items: center;
        }
        .avatar-stack > .avatar {
            border: 2px solid white;
            margin-left: -6px;
        }
        .avatar-stack > .avatar:first-child { margin-left: 0; }
        .avatar-stack > .avatar-more {
            background: var(--color-bg-subtle);
            color: var(--color-text-secondary);
            font-weight: 600;
        }

        /* Пустой аватар (нет ассигни) — пунктирный круг */
        .avatar-empty {
            width: 24px; height: 24px;
            border-radius: 50%;
            border: 1px dashed var(--color-border-strong);
            background: transparent;
            display: inline-flex; align-items: center; justify-content: center;
            color: var(--color-text-muted);
            font-size: var(--text-xs);
        }

        /* ===== POPOVER ===== */
        /* Универсальный popover — крепится к элементу-триггеру.
           Используется для inline-выбора статуса, срочности и т.п.
           Закрытие: клик вне, Esc, выбор опции. */
        .ui-popover {
            position: absolute;
            z-index: 1000;
            min-width: 180px;
            background: white;
            border: 1px solid var(--color-border-strong);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05);
            padding: var(--space-1);
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity 0.12s ease-out, transform 0.12s ease-out;
            pointer-events: none;
        }
        .ui-popover.is-open {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .ui-popover-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            width: 100%;
            padding: var(--space-2);
            border: none;
            background: transparent;
            text-align: left;
            font-size: var(--text-sm);
            color: var(--color-text);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-family: inherit;
            line-height: 1.2;
        }
        .ui-popover-item:hover,
        .ui-popover-item:focus-visible {
            background: var(--color-bg-subtle);
            outline: none;
        }
        .ui-popover-item.is-selected {
            background: var(--color-primary-25);
            color: var(--color-primary);
            font-weight: 500;
        }
        .ui-popover-item-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .ui-popover-item-check {
            margin-left: auto;
            color: var(--color-primary);
            opacity: 0;
        }
        .ui-popover-item.is-selected .ui-popover-item-check { opacity: 1; }

        /* ===== SYSTEM SELECT ===== */
        /* Единый минималистичный select. Не выкручиваемся в primary-цвет
           на hover — только подсветка границы, как у inputs в Linear/Notion. */
        .system-select {
            background: white;
            color: var(--color-text);
            border: 1px solid var(--color-border-strong);
            border-radius: var(--radius-md);
            padding: 8px 32px 8px 12px;
            font-size: var(--text-sm);
            font-weight: 500;
            font-family: inherit;
            line-height: 1.2;
            cursor: pointer;
            min-width: 200px;
            max-width: 360px;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 14px 14px;
            transition: border-color 0.12s, box-shadow 0.12s;
        }
        .system-select:hover {
            border-color: var(--color-text-secondary);
        }
        .system-select:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-25);
        }
        .system-select:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            background-color: var(--color-bg-subtle);
        }
        .system-select-label {
            font-size: var(--text-xs);
            font-weight: 500;
            color: var(--color-text-secondary);
            white-space: nowrap;
        }

        /* Триггер popover — кликабельный статус-пилл выглядит как кнопка */
        .status-pill.is-clickable {
            border: 1px solid transparent;
            background: transparent;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.12s, border-color 0.12s;
        }
        .status-pill.is-clickable:hover {
            background: var(--color-bg-subtle);
            border-color: var(--color-border);
        }
        .status-pill.is-clickable:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--color-primary-25);
        }

        /* ===== COMMAND PALETTE (Cmd+K) ===== */
        .cmdk-overlay {
            position: fixed; inset: 0;
            background: rgba(15, 23, 42, 0.45);
            backdrop-filter: blur(2px);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 12vh;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s;
        }
        .cmdk-overlay.is-open {
            opacity: 1;
            pointer-events: auto;
        }
        .cmdk-window {
            width: 600px;
            max-width: calc(100vw - 32px);
            background: white;
            border-radius: var(--radius-xl);
            box-shadow: 0 16px 48px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.10);
            border: 1px solid var(--color-border-strong);
            overflow: hidden;
            transform: translateY(-8px);
            transition: transform 0.18s ease-out;
            display: flex;
            flex-direction: column;
            max-height: 75vh;
        }
        .cmdk-overlay.is-open .cmdk-window { transform: translateY(0); }
        .cmdk-input-row {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: 12px 16px;
            border-bottom: 1px solid var(--color-border);
        }
        .cmdk-search-ico {
            color: var(--color-text-muted);
            flex-shrink: 0;
        }
        .cmdk-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: var(--text-base);
            font-family: inherit;
            color: var(--color-text);
            background: transparent;
        }
        .cmdk-input::placeholder { color: var(--color-text-muted); }
        .cmdk-kbd {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            background: var(--color-bg-subtle);
            border: 1px solid var(--color-border-strong);
            border-bottom-width: 2px;
            border-radius: var(--radius-xs);
            padding: 1px 4px;
            line-height: 1.2;
        }
        .cmdk-list {
            overflow-y: auto;
            padding: var(--space-2);
            flex: 1;
            min-height: 60px;
        }
        .cmdk-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            width: 100%;
            padding: var(--space-2);
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            text-align: left;
            font-family: inherit;
            font-size: var(--text-sm);
            color: var(--color-text);
            line-height: 1.2;
        }
        .cmdk-item.is-active {
            background: var(--color-primary-25);
            color: var(--color-primary);
        }
        .cmdk-item-ico {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            color: var(--color-text-secondary);
            flex-shrink: 0;
        }
        .cmdk-item.is-active .cmdk-item-ico { color: var(--color-primary); }
        .cmdk-item-label {
            flex: 1;
            white-space: normal;
            overflow: hidden;
        }
        .cmdk-item-hint {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
            background: var(--color-bg-subtle);
            padding: 2px 8px;
            border-radius: var(--radius-xs);
            flex-shrink: 0;
        }
        .cmdk-empty {
            padding: var(--space-6);
            text-align: center;
            color: var(--color-text-muted);
            font-size: var(--text-sm);
        }
        .cmdk-footer {
            display: flex;
            gap: var(--space-3);
            padding: 8px 12px;
            border-top: 1px solid var(--color-border);
            background: var(--color-bg-subtle);
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
        }
        .cmdk-footer span {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
        }
        body.cmdk-open { overflow: hidden; }

        /* ── Accordion core navigation ── */
        .nav-divider {
            height: 1px;
            background: rgba(255,255,255,0.07);
            margin: 4px 12px;
        }
        .nav-core {
            display: flex;
            flex-direction: column;
        }
        /* Core section header: mirrors side-link layout exactly, bolder */
        .nav-core-btn {
            width: 100%;
            border: none;
            background: transparent;
            color: rgba(255,255,255,0.75);
            display: flex;
            align-items: center;
            gap: var(--space-3, 8px);
            border-radius: var(--radius-xl, 8px);
            padding: 8px 12px;
            cursor: pointer;
            text-align: left;
            transition: background 0.2s ease, color 0.2s ease;
            font-size: var(--text-base, 14px);
            font-weight: 600;
            font-family: inherit;
        }
        .nav-core-btn:hover {
            background: rgba(255,255,255,0.1);
            color: var(--color-surface, #fff);
        }
        .nav-core-btn.active {
            background: rgba(255,255,255,0.15);
            color: var(--color-surface, #fff);
            position: relative;
        }
        .nav-core-btn.active::before {
            content: '';
            position: absolute;
            left: 0; top: 8px; bottom: 8px;
            width: 3px;
            background: var(--color-accent-tint, #8F89B8);
            border-radius: 0 3px 3px 0;
        }
        /* Sub-items container */
        .nav-core-items {
            display: flex;
            flex-direction: column;
        }
        /* Sub-item: inherits side-link styles, slightly dimmer + smaller */
        .nav-sub {
            color: var(--ink-muted, #6B7280) !important;
            font-size: 13px !important;
            padding: 6px 12px !important;
        }
        .nav-sub:hover {
            color: var(--color-text, #1c1917) !important;
        }
        .nav-sub.active {
            color: var(--color-text, #1c1917) !important;
        }
        /* Bullet icon for sub-items: centered in same 36px box as regular icons */
        .nav-sub-ico {
            font-size: 8px;
            color: var(--color-text-muted, #9CA3AF);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        .nav-sub.active .nav-sub-ico {
            color: var(--color-accent-tint, #8F89B8);
        }
        /* Labels in core headers: same behaviour as .side-label (opacity 0→1 on hover) */
        .nav-core-label {
            white-space: nowrap;
        }
        /* Hide sub-items when sidebar is collapsed */
        .sidebar-nav:not(:hover) .nav-core-items {
            display: none !important;
        }