/* ============================================================
   DESIGN-2026 · глобальный редизайн PRIME BPM
   Минималистичный enterprise-style уровня Linear / Notion /
   Plane / Vercel. Только CSS, бизнес-логика и HTML-структура
   не трогаются.

   Подключается ПОСЛЕДНИМ среди CSS, чтобы перекрывать
   токены и точечные стили. Наполняется ПО ФАЗАМ —
   после каждой пользователь проверяет в браузере.

   ────────────────────────────────────────────────────────────
   PHASE A · Tokens + Inter + Page Header + Sidebar polish
   ────────────────────────────────────────────────────────────
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. ДИЗАЙН-ТОКЕНЫ
   Перезаписываем имена переменных, которые используются по
   всей системе — все компоненты, читающие var(--color-*),
   автоматически получают новую палитру.
   ──────────────────────────────────────────────────────────── */
:root {
    /* ─── BPM v2026 · Flat Minimalism ───────────────────────────────
       Нейтральный серый фон, плоский стиль, hairline-границы.
       Содержит как новые имена (--bg-page, --surface, --text…),
       так и старые (--color-bg-app, --color-surface…) для обратной
       совместимости — все компоненты продолжают работать.
       ─────────────────────────────────────────────────────────────── */

    /* === «Холодные нейтрали + Future Dusk» ===
       Базовый слой: холодные серо-голубые нейтрали (#F8F9FB/#FFFFFF) +
       Future Dusk (акцент). Тёплая бумага упразднена 2026-06-05 —
       значения ниже уже финальные холодные (бывшие override-блоки слиты). */

    /* ── Канонические токены PRD (источник правды) ── */
    /* Нейтрали (холодные) */
    --paper-bg:       #F8F9FB;   /* основной фон страниц */
    --paper-surface:  #FFFFFF;   /* карточки, поверхности, поповеры */
    --paper-fill:     #EEF1F5;   /* мягкая заливка, треки прогресс-баров, hover */
    --paper-border:   #E3E7EE;   /* линии, разделители, границы */
    --ink:            #181B26;   /* основной текст */
    --ink-muted:      #6A7180;   /* вторичный текст, подписи */
    /* Future Dusk */
    --dusk:           #4E5180;   /* основной акцент */
    --dusk-deep:      #353659;   /* active, заголовки-акценты, текст на тинтах */
    --dusk-mid:       #6E709C;   /* второстепенный акцент, «в работе» */
    --dusk-tint:      #ECECF5;   /* фон выделенной строки/чипа, hover акцента */
    /* Статусы (холодные, по Stitch DESIGN.md) */
    --status-idle:        #9AA1AE;  --status-idle-fg:     #181B26;
    --status-progress:    #4E5180;  --status-progress-fg: #FFFFFF;
    --status-done:        #4E8A6A;  --status-done-fg:     #FFFFFF;
    --status-failed:      #C0553B;  --status-failed-fg:   #FFFFFF;
    --status-overdue:     #9A3324;  --status-overdue-fg:  #FFFFFF;
    /* Мягкие тинты статусов (фон чипов) */
    --status-idle-soft:     #EEF1F5;
    --status-progress-soft: #E4E3EF;
    --status-done-soft:     #E8F3ED;
    --status-failed-soft:   #FDE8E8;
    --status-overdue-soft:  #FDE8E8;

    /* Backgrounds */
    --bg-base:        #FFFFFF;    /* карточки — paper-surface */
    --bg-surface:     #EEF1F5;    /* вложенные поверхности / сайдбар — paper-fill */
    --bg-page:        #F8F9FB;    /* фон страницы */
    --bg-canvas:      #FFFFFF;
    --bg-subtle:      #EEF1F5;
    --bg-muted:       #E3E7EE;

    /* Surfaces (compat aliases) */
    --surface:        #FFFFFF;
    --surface-2:      #EEF1F5;
    --surface-hover:  #EEF1F5;    /* hover — paper-fill */
    --surface-active: #E3E7EE;
    --surface-sunk:   #F8F9FB;    /* мягкая вложенная зона (inset) */

    /* Borders — хэйрлайны 0.5px */
    --border:         #E3E7EE;
    --border-strong:  #D5DAE3;
    --hairline:       #E8EBF1;

    /* Text — холодный ink */
    --text:           #181B26;
    --text-primary:   #181B26;   /* V2 canonical name */
    --text-strong:    #0F1320;
    --text-2:         #6A7180;
    --text-muted:     #6A7180;   /* V2 canonical name */
    --text-3:         #6A7180;   /* compat alias */
    --text-hint:      #9AA1AE;   /* V2 canonical name */
    --text-4:         #9AA1AE;   /* compat alias */
    --text-disabled:  #B4B9C4;
    --text-inverse:   #FFFFFF;

    /* Accent — Future Dusk #4E5180 */
    --accent:         #4E5180;
    --accent-text:    #353659;   /* для текста (WCAG AA на светлом фоне) */
    --accent-on:      #FFFFFF;
    --accent-soft:    #ECECF5;   /* активное / выбранное (дуск-tint) */
    --accent-line:    #D7D8EC;

    /* Псевдонимы из дизайн-промпта (семантические имена). Ссылаются на
       токены paper/dusk, поэтому автоматически следуют за тёмной темой —
       дублировать в [data-theme="dark"] не нужно. */
    --bg:           var(--paper-bg);
    --fill:         var(--paper-fill);
    --accent-deep:  var(--dusk-deep);
    --accent-mid:   var(--dusk-mid);
    --accent-tint:  var(--dusk-tint);
    --on-accent:    var(--paper-bg);   /* светлый текст на акценте */
    --accent-hover:   #353659;

    /* Semantic — отображаем на статусную палитру PRD */
    --success:        #4E8A6A;
    --success-soft:   #E8F3ED;
    --success-fg:     #356B4E;
    --warning:        #9AA1AE;   /* «не начато»/нейтральный */
    --warning-soft:   #EEF1F5;
    --warning-fg:     #5A6170;
    --danger:         #C0553B;
    --danger-soft:    #FDE8E8;
    --danger-fg:      #8A3D29;
    --info:           #4E5180;
    --info-soft:      #E4E3EF;
    --info-fg:        #353659;
    --purple:         #6E709C;
    --purple-soft:    #E4E3EF;
    --teal:           #4E5180;
    --teal-soft:      #E4E3EF;

    /* === Поверхности (совместимость с --color-*) === */
    --color-surface:        #FFFFFF;
    --color-bg:             #F8F9FB;
    --color-bg-app:         #F8F9FB;
    --color-bg-subtle:      #EEF1F5;
    --color-bg-chip:        #EEF1F5;
    --color-bg-tint:        #F8F9FB;
    --color-bg-faint:       #F8F9FB;

    /* серая шкала (холодная) */
    --color-gray-50:        #F8F9FB;
    --color-gray-100:       #EEF1F5;
    --color-gray-200:       #E3E7EE;
    --color-gray-300:       #D5DAE3;
    --color-gray-400:       #9AA1AE;
    --color-gray-500:       #6A7180;
    --color-gray-700:       #3A3F4C;
    --color-gray-900:       #181B26;

    /* === Текст (compat) === */
    --color-text:           #262A38;
    --color-text-strong:    #0F1320;
    --color-text-secondary: #6B7280;
    --color-text-muted:     #9AA1AE;

    /* === Границы === */
    --color-border:         #E3E7EE;
    --color-border-strong:  #D5DAE3;

    /* === Акцент / Primary — Future Dusk #4E5180 === */
    --color-primary:        #4E5180;
    --color-primary-hover:  #353659;
    --color-primary-dark:   #353659;
    --color-primary-strong: #353659;
    --color-primary-500:    #4E5180;
    --color-primary-400:    #6E709C;
    --color-primary-50:     #E4E3EF;   /* выбранное / активное — дуск-tint */
    --color-primary-25:     rgba(78, 81, 128, 0.06);
    --color-primary-20:     rgba(78, 81, 128, 0.05);
    --color-primary-10:     rgba(78, 81, 128, 0.03);

    --color-accent:         #4E5180;
    --color-accent-hover:   #353659;
    --color-accent-strong:  #353659;
    --color-accent-50:      #E4E3EF;
    --color-accent-25:      rgba(78, 81, 128, 0.06);
    --color-accent-tint:    #6E709C;

    /* === Sidebar / nav — глубокий Future Dusk === */
    --color-nav-bg:         #353659;
    --rm-navy:              #353659;
    --rm-navy-soft:         #45466B;

    /* === Семантика → статусная палитра PRD === */
    --color-success:        #4E8A6A;
    --color-success-500:    #4E8A6A;
    --color-success-50:     #E8F3ED;
    --color-success-soft:   #E8F3ED;

    --color-warning:        #9AA1AE;
    --color-warning-50:     #EEF1F5;
    --color-warning-soft:   #EEF1F5;

    --color-danger:         #C0553B;
    --color-danger-500:     #C0553B;
    --color-danger-600:     #AD4430;
    --color-danger-700:     #9A3324;
    --color-danger-text:    #9A3324;
    --color-danger-50:      #FDE8E8;
    --color-danger-25:      #FEF1F1;
    --color-danger-soft:    #FDE8E8;

    --color-info:           #4E5180;
    --color-info-hover:     #353659;
    --color-info-50:        #E4E3EF;
    --color-info-soft:      #E4E3EF;

    /* === Тени — Flat Minimalism ===
       raised:   тонкая граница-тень (карточки, кнопки)
       elevated: граница + лёгкая тень (модалки, попапы)
       sunk:     утопленный инпут
       pop:      выпадающее меню */
    --shadow-flat:     none;
    --shadow-raised:   0 0 0 1px rgba(0,0,0,0.08);
    --shadow-elevated: 0 0 0 1px rgba(0,0,0,0.08), 0 4px 16px -4px rgba(0,0,0,0.06);
    --shadow-sunk:     inset 0 0 0 1px rgba(0,0,0,0.10);
    --shadow-pop:      0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px -4px rgba(0,0,0,0.10);

    --shadow-1:          0 0 0 1px rgba(0,0,0,0.08);
    --shadow-2:          0 0 0 1px rgba(0,0,0,0.08);
    --shadow-3:          0 0 0 1px rgba(0,0,0,0.08), 0 4px 16px -4px rgba(0,0,0,0.06);
    --shadow-4:          0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px -4px rgba(0,0,0,0.10);
    --shadow-sm:         var(--shadow-raised);
    --shadow-md:         var(--shadow-raised);
    --shadow-lg:         var(--shadow-elevated);
    --shadow-xl:         var(--shadow-pop);
    --shadow-primary:    var(--shadow-raised);
    --shadow-primary-lg: var(--shadow-elevated);
    --shadow-sidebar:    0 0 0 1px rgba(0,0,0,0.06);

    /* === Радиусы (V2: --r-sm=кнопки/инпуты, --r-md=карточки/модалки) === */
    --r-sm:  8px;
    --r-md:  12px;
    --r-lg:  16px;
    --r-xl:  20px;
    --r-2xl: 24px;
    --r-pill: 999px;

    --radius-xs:   4px;
    --radius-sm:   6px;   /* compat: старый размер кнопок */
    --radius-md:   8px;   /* compat: старый размер карточек */
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  22px;
    --radius-3xl:  22px;
    --radius-pill: 999px;

    /* === Шрифты (редизайн): гуманистический гротеск Hanken Grotesk для UI,
       серифная Fraunces — дозированно для крупных заголовков/названий. === */
    --font-sans: "Hanken Grotesk", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-ui:   var(--font-sans);
    --font-display: "Hanken Grotesk", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --tracking-tight:   -0.02em;
    --tracking-tighter: -0.035em;

    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   15px;
    --text-lg:   17px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  30px;

    --leading-tight:  1.2;
    --leading-snug:   1.4;
    --leading-normal: 1.55;

    /* === Motion === */
    --ease:            cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast:          140ms;
    --t-normal:        220ms;
    --t-slow:          360ms;
    --transition-fast: 140ms var(--ease);
    --transition-base: 220ms var(--ease);

    /* === Layout === */
    --rail-w:     64px;
    --context-w:  248px;
    --header-h:   56px;
    --island-gap: 12px;

    /* (перенесено из бывших override-блоков при чистке легаси) */
    --color-gray-600: #565C6B;
    --color-gray-800: #272B36;
    --text-secondary: #6A7180;
}

/* ────────────────────────────────────────────────────────────
   1b. DARK THEME · холодный navy/slate (без OLED-black)
   ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    color-scheme: dark;

    /* ── Канонические токены (dark): холодный navy + светлый dusk ── */
    --paper-bg:       #0F131C;
    --paper-surface:  #1B1F2A;
    --paper-fill:     #232838;
    --paper-border:   #2A3142;
    --ink:            #F3F4F8;
    --ink-muted:      #9AA1AE;
    --dusk:           #8589C7;   /* светлый Future Dusk — читаем на тёмном */
    --dusk-deep:      #C0C2F9;
    --dusk-mid:       #6E709C;
    --dusk-tint:      rgba(133,137,199,0.16);
    --status-idle:        #9AA1AE;  --status-idle-fg:     #0F131C;
    --status-progress:    #8589C7;  --status-progress-fg: #0F131C;
    --status-done:        #5FB389;  --status-done-fg:     #0F131C;
    --status-failed:      #D46A6A;  --status-failed-fg:   #0F131C;
    --status-overdue:     #D46A6A;  --status-overdue-fg:  #0F131C;
    --status-idle-soft:     rgba(154,161,174,0.16);
    --status-progress-soft: rgba(156, 161, 219, 0.16);
    --status-done-soft:     rgba(91, 174, 134, 0.16);
    --status-failed-soft:   rgba(217, 132, 128, 0.16);
    --status-overdue-soft:  rgba(212,106,106,0.16);

    --bg-page:        #0F131C;
    --bg-canvas:      #1B1F2A;
    --bg-base:        #1B1F2A;
    --bg-subtle:      #161A24;
    --bg-muted:       #232838;

    --surface:        #1B1F2A;
    --surface-2:      #161A24;
    --surface-hover:  #232838;
    --surface-active: #2A3142;
    --surface-sunk:   #232838;

    --border:         #2A3142;
    --border-strong:  #3A4257;
    --hairline:       rgba(255,255,255,0.06);

    --text:           #E5E7EB;
    --text-strong:    #FFFFFF;
    --text-2:         #9CA3AF;
    --text-3:         #9CA3AF;
    --text-4:         #6B7280;
    --text-disabled:  #4B5563;
    --text-inverse:   #0F131C;

    --accent:         #8589C7;
    --accent-on:      #0F131C;
    --accent-soft:    rgba(133,137,199,0.16);
    --accent-line:    #3A3D5E;

    --success:        #5FB389;
    --success-soft:   rgba(91, 174, 134, 0.16);
    --success-fg:     #CFE0D8;
    --warning:        #9AA1AE;
    --warning-soft:   rgba(154,161,174,0.16);
    --warning-fg:     #D8DEE9;
    --danger:         #D46A6A;
    --danger-soft:    rgba(217, 132, 128, 0.16);
    --danger-fg:      #E9C3C8;
    --info:           #8589C7;
    --info-soft:      rgba(156, 161, 219, 0.16);
    --info-fg:        #C0C2F9;

    --color-surface:        #1B1F2A;
    --color-bg:             #1B1F2A;
    --color-bg-app:         #0F131C;
    --color-bg-subtle:      #161A24;
    --color-bg-chip:        #232838;
    --color-bg-tint:        #1B1F2A;
    --color-bg-faint:       #1B1F2A;

    --color-gray-50:        #1B1F2A;
    --color-gray-100:       #232838;
    --color-gray-200:       #2A3142;
    --color-gray-300:       #3A4257;
    --color-gray-400:       #6B7280;
    --color-gray-500:       #9CA3AF;
    --color-gray-700:       #CBD2DD;
    --color-gray-900:       #E5E7EB;

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

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

    --color-primary:        #9CA1DB;
    --color-primary-hover:  #B0B5E4;
    --color-primary-dark:   #5C5F8E;
    --color-primary-strong: #C4C8EE;
    --color-primary-500:    #9CA1DB;
    --color-primary-400:    #B0B5E4;
    --color-primary-50:     rgba(156, 161, 219, 0.18);
    --color-primary-25:     rgba(156, 161, 219, 0.10);
    --color-primary-20:     rgba(156, 161, 219, 0.08);
    --color-primary-10:     rgba(156, 161, 219, 0.05);

    --color-accent:         #9CA1DB;
    --color-accent-hover:   #BEC5D1;
    --color-accent-strong:  #C4C8EE;
    --color-accent-50:      rgba(156, 161, 219, 0.18);
    --color-accent-25:      rgba(156, 161, 219, 0.10);
    --color-accent-tint:    #BEC5D1;

    --color-nav-bg:         #19181b;
    --rm-navy:              #19181b;
    --rm-navy-soft:         #242229;

    --color-success:        #5FB389;
    --color-success-500:    #5BAE86;
    --color-success-50:     rgba(91, 174, 134, 0.18);
    --color-success-soft:   rgba(91, 174, 134, 0.16);
    --color-warning:        #9AA1AE;
    --color-warning-50:     rgba(201, 162, 78, 0.18);
    --color-warning-soft:   rgba(154,161,174,0.16);
    --color-danger:         #D46A6A;
    --color-danger-500:     #D98480;
    --color-danger-600:     #D98480;
    --color-danger-700:     #efc3c0;
    --color-danger-text:    #efc3c0;
    --color-danger-50:      rgba(217, 132, 128, 0.18);
    --color-danger-25:      rgba(217, 132, 128, 0.10);
    --color-danger-soft:    rgba(217, 132, 128, 0.16);
    --color-info:           #9CA1DB;
    --color-info-hover:     #C4C8EE;
    --color-info-50:        rgba(156, 161, 219, 0.18);
    --color-info-soft:      rgba(156, 161, 219, 0.16);

    --shadow-flat:     0 1px 0 rgba(244, 247, 255, 0.04) inset;
    --shadow-raised:
        0 1px 0 rgba(244, 247, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.24), 0 10px 24px -18px rgba(0, 0, 0, 0.70);
    --shadow-elevated:
        0 1px 0 rgba(244, 247, 255, 0.05) inset, 0 10px 28px -14px rgba(0, 0, 0, 0.72), 0 24px 58px -30px rgba(0, 0, 0, 0.86);
    --shadow-sunk:
        inset 0 1px 2px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(226, 232, 244, 0.06);
    --shadow-pop:
        0 1px 0 rgba(244, 247, 255, 0.05) inset, 0 0 0 1px rgba(226, 232, 244, 0.08), 0 18px 54px -22px rgba(0, 0, 0, 0.90);

    --shadow-1:          var(--shadow-raised);
    --shadow-2:          var(--shadow-raised);
    --shadow-3:          var(--shadow-elevated);
    --shadow-4:          var(--shadow-pop);
    --shadow-sm:         var(--shadow-raised);
    --shadow-md:         var(--shadow-raised);
    --shadow-lg:         var(--shadow-elevated);
    --shadow-xl:         var(--shadow-pop);
    --shadow-primary:    0 8px 24px -16px rgba(156, 161, 219, 0.58);
    --shadow-primary-lg: 0 14px 36px -18px rgba(156, 161, 219, 0.64);
    --shadow-sidebar:    0 0 0 1px rgba(226, 232, 244, 0.08);

    /* (перенесено из бывших override-блоков при чистке легаси) */
    --color-gray-600: #B4B9C4;
    --color-gray-800: #E2E4EC;
    --text-primary: #F3F4F8;
    --text-secondary: #9AA1AE;
    --m-muted: #CBD2DD;
    --paper-fill-strong: #2A3142;
    --purple: #8589C7;
    --teal: #8589C7;
    /* фикс легаси-лика: в dark резолвился в светлый бежевый (hover-фоны) */
    --bg-surface: #232838;
}

html,
body,
.main-area,
.tab-content,
.roadmap-sheet,
.kb-wrap,
.messenger-root {
    transition:
        background-color 220ms var(--ease),
        color 220ms var(--ease),
        border-color 220ms var(--ease),
        box-shadow 220ms var(--ease);
}

html.theme-is-changing,
html.theme-is-changing *,
html.theme-is-changing *::before,
html.theme-is-changing *::after {
    transition:
        background-color 320ms var(--ease),
        background 320ms var(--ease),
        color 260ms var(--ease),
        border-color 320ms var(--ease),
        box-shadow 320ms var(--ease),
        filter 260ms var(--ease),
        opacity 220ms var(--ease) !important;
}

[data-theme="dark"] body,
[data-theme="dark"] .main-area {
    background: radial-gradient(circle at 52% -18%, rgba(156, 161, 219, 0.055), transparent 32%),
                var(--color-bg-app);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--color-text-strong);
}


/* ────────────────────────────────────────────────────────────
   2. ТИПОГРАФИКА · Geist Sans, антиалиасинг, OpenType features
   ──────────────────────────────────────────────────────────── */
html, body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01", "ss03";
    letter-spacing: -0.006em;
    overflow: hidden;
    height: 100%;
}
body {
    background: var(--color-bg-app);
    color: var(--color-text);
    font-size: var(--text-base);   /* 14px — V2 body default */
    line-height: var(--leading-normal);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    color: var(--color-text);
    letter-spacing: -0.02em;
    font-weight: 600;
    line-height: var(--leading-tight);
}
h1 { font-weight: 700; letter-spacing: -0.024em; }
h2 { font-weight: 700; letter-spacing: -0.022em; }
input, textarea, select, button { font-family: var(--font-sans); }

/* T8 · keyboard focus ring (V2 accessibility) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
button:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}


/* ────────────────────────────────────────────────────────────
   3. PAGE HEADER (top bar) · Future Dusk #3E3C59
   ──────────────────────────────────────────────────────────── */
.main-area > header {
    background: var(--color-nav-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    color: #fff;
    height: 64px !important;
    min-height: 64px;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}

.main-area > header #pageHeaderIcon,
.main-area > header .page-header-icon-img {
    display: none !important;
}
@media (min-width: 769px) {
    .main-area > header .mobile-hamburger { display: none !important; }
}

.main-area > header > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.main-area > header > div:first-child > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.main-area > header h1 {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
}
.main-area > header > div:first-child span,
.main-area > header .text-secondary-sm {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.main-area > header .page-help {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
}

.main-area > header > div:last-child {
    gap: 24px;
    align-items: center;
}

.main-area > header #progressWrap {
    text-align: right;
}
.main-area > header #overall-progress {
    color: #fff !important;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.main-area > header #progressWrap .text-secondary-sm {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.main-area > header .user-info { gap: 10px; }
.main-area > header .user-name {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.main-area > header .user-status {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
}
.main-area > header .user-avatar {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.main-area > header .btn-logout {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    transition: background var(--t-fast) var(--ease);
}
.main-area > header .btn-logout:hover {
    background: rgba(255, 255, 255, 0.18);
}

.main-area > header .notif-btn,
.main-area > header .notes-header-btn {
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
}
.main-area > header .notif-btn:hover,
.main-area > header .notes-header-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.main-area > header .notif-btn-icon-img {
    filter: invert(1) opacity(0.85);
}

/* Тёмная тема реализована (442 правила [data-theme="dark"]) — переключатель
   тем снова виден в шапке. Светлая тема — по умолчанию (см. initTheme). */

.main-area > header .mobile-hamburger {
    color: #fff;
    background: transparent;
}

@media (max-width: 768px) {
    .main-area > header {
        min-height: 88px;
        padding: 16px 20px;
    }
    .main-area > header h1 { font-size: 26px; }
    .main-area > header #overall-progress { font-size: 32px; }
}


/* ────────────────────────────────────────────────────────────
   3b. КНОПКИ · глобальные состояния (T7 V2)
   primary / secondary / ghost + hover/active/disabled
   ──────────────────────────────────────────────────────────── */

/* Primary */
.btn-primary,
button.btn-primary {
    background: var(--accent);
    color: var(--accent-on);
    border: none;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:active { opacity: 0.78; }
.btn-primary:disabled,
.btn-primary[disabled] { opacity: 0.40; cursor: not-allowed; pointer-events: none; }

/* Secondary */
.btn-secondary,
button.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-secondary:hover { background: var(--bg-surface); }
.btn-secondary:active { background: var(--surface-active); }
.btn-secondary:disabled,
.btn-secondary[disabled] { opacity: 0.40; cursor: not-allowed; pointer-events: none; }

/* Ghost */
.btn-ghost,
button.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-ghost:hover { background: var(--bg-surface); color: var(--text-primary); }
.btn-ghost:active { background: var(--surface-active); }
.btn-ghost:disabled,
.btn-ghost[disabled] { opacity: 0.40; cursor: not-allowed; pointer-events: none; }

/* ────────────────────────────────────────────────────────────
   4. SIDEBAR · светлый, cream, minimal — как Image #2
   ──────────────────────────────────────────────────────────── */
.sidebar-nav {
    width: 64px;
    background: var(--bg-canvas);
    border-right: none;
    box-shadow: none;
    z-index: 100;
}
.sidebar-nav:hover {
    width: 232px;
    box-shadow: 4px 0 20px rgba(8, 10, 18, 0.07);
}

.sidebar-brand {
    min-height: 64px !important;
    height: 64px;
    padding: 0 14px;
    background: var(--bg-page);   /* V2: light sidebar — unified with page bg */
    border-bottom: 1px solid var(--border) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    box-sizing: border-box;
}
.sidebar-brand-label { letter-spacing: -0.01em; color: var(--accent-text); }

/* Текст пунктов сайдбара — по токенам темы, НЕ белый.
   База checklist_operational.css ставила rgba(255,255,255,...) для старого
   тёмного сайдбара; сейчас сайдбар светлый, поэтому переопределяем токенами. */
.side-link { color: var(--ink-muted); }
.side-link .side-label, .side-link .nav-core-label { color: inherit; }
.side-link:hover { background: var(--paper-fill); color: var(--ink); }
.side-link.active,
.nav-core-btn.active {
    background: var(--dusk-tint) !important;
    color: var(--dusk-deep) !important;
}
.side-link.active::before, .nav-core-btn.active::before { background: var(--dusk) !important; }
.nav-core-btn { color: var(--ink-muted); }
.nav-core-btn:hover { background: var(--paper-fill); color: var(--ink); }
.nav-sub { color: var(--ink-muted); }
.nav-sub.active { color: var(--dusk-deep) !important; }

.sidebar-menu {
    padding-top: 0 !important;
}

.sidebar-section-title {
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 12px 14px 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.sidebar-nav:hover .sidebar-section-title { opacity: 1; }

.side-link {
    color: var(--color-text-secondary);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
    margin: 1px 6px;
    gap: 12px;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.side-link:hover {
    background: var(--bg-surface);   /* T9: V2 hover */
    color: var(--text-primary);
}
.side-link.active {
    background: var(--accent-soft);   /* V2: forest-green soft tint */
    color: var(--accent-text);
    font-weight: 600;
    box-shadow: none;
}
.side-link.active::before {
    background: var(--accent);
    width: 2px;
    border-radius: 0;
    left: -7px;
    top: 6px;
    bottom: 6px;
}

.side-ico {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-nav .side-ico-img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 1;
    filter: brightness(0) saturate(0) opacity(0.46) !important;
}
.sidebar-nav .side-link:hover .side-ico-img {
    filter: brightness(0) saturate(0) opacity(0.62) !important;
}
.sidebar-nav .side-link.active .side-ico-img {
    opacity: 1;
    /* approximate #4C4F76 (Future Dusk accent) from black src */
    filter: brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(1500%) hue-rotate(202deg) brightness(96%) contrast(89%) !important;
}

.side-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

/* ── Secondary sidebar toggle ───────────────────────────────────── */
.sidebar-secondary-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    border-radius: var(--r-md);
    color: rgba(255,255,255,0.40);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.sidebar-nav:hover .sidebar-secondary-toggle {
    opacity: 1;
}
.sidebar-secondary-toggle:hover {
    color: rgba(255,255,255,0.65);
}
.sidebar-secondary-toggle .side-ico {
    flex-shrink: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    letter-spacing: -2px;
}
.sidebar-secondary-toggle .secondary-toggle-arrow {
    font-style: normal;
    transition: transform 0.15s ease;
    display: inline-block;
}
.sidebar-secondary-toggle[aria-expanded="true"] .secondary-toggle-arrow {
    transform: rotate(90deg);
}

.sidebar-secondary-content {
    display: none;
    overflow: hidden;
}
.sidebar-secondary-content.is-open {
    display: block;
}

.main-area {
    /* Collapsed-sidebar (64px) занимает место — контент начинается за ним.
       При hover sidebar расширяется до 232px и накладывается ПОВЕРХ
       контента (см. z-index:100 у .sidebar-nav), не сдвигая main-area. */
    padding-left: 64px;
    min-width: 0;
}
@media (max-width: 768px) {
    .main-area { padding-left: 0; }
}


/* ============================================================
   PHASE B · SUBTABS дорожной карты — стиль «закладки»
   Классические браузерные табы: неактивные — серые с рамкой,
   активная — белая, сливается с листом снизу.
   Лист занимает оставшееся пространство и скроллится внутри.
   ============================================================ */

/* Контейнер активной вкладки становится flex-колонкой фиксированной высоты,
   чтобы лист (.roadmap-sheet) скроллился внутри, а не тянул страницу.
   ВАЖНО: .active обязателен — без него правило перебивает display:none
   и все вкладки становятся видны одновременно.
   ID-специфичность у #tab-plan выше (:has → 0,3,0 vs ID → 1,0,0),
   поэтому padding-bottom переопределяем отдельными ID-правилами ниже. */
@keyframes subtabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tab-content.active {
    animation: subtabFadeIn 0.18s ease-out;
}
.tab-content.active:has(> .roadmap-subtabs) {
    height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    max-width: none;
    margin: 0;
}
/* Явные ID-правила — перекрывают padding-top: 10px из checklist_operational.css
   (там тоже ID-специфичность, но design-2026.css загружается последним → побеждает) */
#tab-plan, #tab-gantt, #tab-kanban,
#tab-schema, #tab-passport, #tab-competitors {
    padding-top: 0 !important;
}
#tab-plan, #tab-gantt, #tab-schema,
#tab-kanban, #tab-passport, #tab-competitors {
    padding-bottom: 0;
}

.plan-roadmap-header { display: none !important; }

.roadmap-subtabs {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 20px;
    margin: 0;
    gap: 3px;
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
}
.roadmap-subtab {
    padding: 7px 16px;
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: 7px 7px 0 0;
    background: var(--color-bg-app);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    margin-bottom: 0;
    box-shadow: none;
    position: relative;
    z-index: 1;
    transition: background 0.15s ease-out, color 0.15s ease-out;
    letter-spacing: -0.005em;
}
.roadmap-subtab:hover:not(.active) {
    background: var(--color-gray-100);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.roadmap-subtab.active {
    padding: 8px 16px;
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    border-color: var(--color-border);
    border-bottom-color: var(--color-surface);
    margin-bottom: -1px;
    z-index: 4;
    box-shadow: none;
}
.roadmap-subtab:focus-visible {
    outline: 2px solid rgba(8, 10, 18, 0.3);
    outline-offset: -4px;
}

/* Лист — белая карточка, скролл внутри блока. */
.roadmap-sheet {
    flex: 1;
    min-height: 0;
    height: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0 8px 8px 8px;
    box-shadow: none;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 3;
    margin: 0 20px 0;
}
/* Паспорт 3+1 — без обрамляющей «коробки»: чистые секции на фоне страницы,
   как в Stitch. Скролл листа сохраняем, убираем только рамку/фон/скругление.
   Scoped через :has() — другие подвкладки роадмапа (план/Гант/ОТК) не задеты. */
.roadmap-sheet:has(.passport-root),
[data-theme="dark"] .roadmap-sheet:has(.passport-root) {
    background: transparent;
    border: none;
    border-radius: 0 !important;   /* перебиваем групповое .roadmap-sheet{radius:12px !important} */
    box-shadow: none;
}

/* Гарантированный сброс боковых отступов у всех прямых обёрток внутри
   roadmap-sheet. Специфичность (0,3,0) перекрывает любые (0,1,0)/(0,2,0)
   правила из других файлов. */
.tab-content .roadmap-sheet > .plan-table-wrap,
.tab-content .roadmap-sheet > .gantt-v2-wrap,
.tab-content .roadmap-sheet > .gantt-v2-source-bar,
.tab-content .roadmap-sheet > .comp-root,
.tab-content .roadmap-sheet > .passport-root {
    padding-left: 0;
    padding-right: 0;
}
/* Потомок вместо прямого ребёнка — нужен для plan-table-wrap,
   вложенного через .scrollable, и для comp-root с passport-root. */
.tab-content .roadmap-sheet .plan-table-wrap,
.tab-content .roadmap-sheet .passport-root,
.tab-content .roadmap-sheet .comp-root {
    padding-left: 0;
    padding-right: 0;
}

/* Plan context bar — селекторы департамента / проекта / плана.
   Делаем легче: убираем тяжёлые рамки. */
.plan-context-bar {
    background: var(--color-bg-app);
    border-bottom: 1px solid var(--color-border);
    padding: 8px 16px;
    box-shadow: none;
    gap: 12px;
}
.dept-selector-label {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.dept-select-styled,
.project-select-styled {
    background: var(--bg-subtle);
    border: none;
    border-radius: var(--radius-md);
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    color: var(--color-text);
    box-shadow: var(--shadow-sunk);
    transition: box-shadow var(--t-fast) var(--ease);
}
.dept-select-styled:hover,
.project-select-styled:hover {
    box-shadow: var(--shadow-sunk), 0 0 0 1px rgba(8, 10, 18,0.08);
}
.dept-select-styled:focus,
.project-select-styled:focus {
    outline: none;
    box-shadow: var(--shadow-sunk), 0 0 0 2px var(--accent-soft);
}
.plan-context-divider {
    color: var(--color-text-muted);
    opacity: 0.5;
}
.plan-inline-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}
.plan-inline-btn:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.plan-inline-btn--danger:hover {
    background: var(--color-danger-50);
    color: var(--color-danger-700);
}


/* ============================================================
   PHASE C · ДОРОЖНАЯ КАРТА (таблица фазы / этапы / задачи)
   Linear/Notion-style: navy thead, белые ряды, soft pills
   с точкой, цветные аватары, прогресс на phase-row.
   ============================================================ */

/* Фильтр статусов над таблицей — soft pills с цветной точкой. */
/* plan-status-filter удалён — легенда статусов убрана с дорожной карты */


/* Toolbar над таблицей — лёгкая полоса с ghost-кнопками */
.toolbar {
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
    padding: 8px 16px;
    gap: 6px;
}
.toolbar button {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 7px;
    box-shadow: none;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}
.toolbar button:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.toolbar .btn-expand,
.toolbar .btn-collapse {
    background: transparent;
    color: var(--color-text-secondary);
}
.toolbar .btn-expand:hover,
.toolbar .btn-collapse:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.toolbar .btn-toolbar-add,
.toolbar .btn-add-phase {
    background: var(--color-text);
    color: #fff;
    border: none;
    padding: 6px 12px;
    font-weight: 500;
}
.toolbar .btn-toolbar-add:hover,
.toolbar .btn-add-phase:hover {
    background: var(--color-gray-700);
    box-shadow: none;
}
.toolbar .plan-view-chip,
.toolbar .plan-view-chip.is-active {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid transparent;
}
.toolbar .plan-view-chip.is-active {
    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-weight: 600;
}

/* Контейнер таблицы — боковые отступы задаются roadmap-sheet */
.plan-table-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 16px 32px 48px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.roadmap-sheet > .plan-table-wrap {
    padding-left: 0;
    padding-right: 0;
}

/* Таблица с тонким бордером и скруглёнными верхними углами —
   overflow: hidden обрезает углы thead без дополнительных правил. */
.plan-table {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: none;
    width: 100%;
    min-width: 1010px;
    table-layout: fixed;
    /* Базовый шрифт масштабируется с шириной вьюпорта:
       при 1240px+ = 13px, при 1010px = 11px, плавно между. */
    font-size: clamp(11px, 0.85vw + 2.5px, 13px);
}

/* THEAD — тёмный Future Dusk, белые uppercase-лейблы */
.plan-table thead {
    background: var(--rm-navy);
}
.plan-table thead tr {
    background: var(--rm-navy);
}
.plan-table th {
    background: var(--rm-navy);
    color: rgba(255, 255, 255, 0.72);
    padding: 1em 1.23em;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: none;
    border-top: none;
}
.plan-table thead tr:first-child th:first-child {
    border-top-left-radius: 8px;
}
.plan-table thead tr:first-child th:last-child {
    border-top-right-radius: 8px;
}
.plan-table th .th-filter-btn {
    color: rgba(255, 255, 255, 0.6);
}
.plan-table th .th-filter-btn:hover,
.plan-table th .th-filter-btn.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.plan-table td {
    padding: 0.54em 1.23em;
    border-bottom: 1px solid var(--color-border);
    font-size: 1em;
    color: var(--color-text);
    background: var(--color-surface);
    vertical-align: middle;
}
.plan-table tbody tr:last-child td { border-bottom: none; }

/* Roadmap column geometry: keep deadlines/assignee from touching status */
#tab-plan .plan-table th:nth-child(2),
#tab-plan .plan-table td:nth-child(2) {
    width: clamp(400px, 44vw, 820px) !important;
}
#tab-plan .plan-table {
    min-width: 1160px;
}
#tab-plan .plan-table th:nth-child(3),
#tab-plan .plan-table td:nth-child(3) {
    width: 206px !important;
    padding-left: 0.85em;
    padding-right: 0.65em;
}
/* Ответственный: убираем большой левый отступ (поле уезжало вправо за
   пределы колонки и обрезалось), сдвигаем под свой заголовок + чуть шире. */
#tab-plan .plan-table th:nth-child(4),
#tab-plan .plan-table td:nth-child(4) {
    width: 200px !important;
    padding-left: 0.85em;
    padding-right: 0.45em;
}
#tab-plan .plan-table th:nth-child(5),
#tab-plan .plan-table td:nth-child(5) {
    width: 124px !important;
    padding-left: 0.75em;
}
#tab-plan .task-dates-wrap {
    justify-content: flex-start;
}
#tab-plan .task-date-input,
#tab-plan .step-date-input {
    width: 86px;
}
#tab-plan .task-row td:nth-child(4) input[data-fio-picker] {
    width: 172px !important;
    min-width: 0;
    max-width: 172px;
    text-overflow: ellipsis;
}

/* PHASE ROW — белая, цветная точка фазы слева, UPPERCASE.
   Левый акцент рисуется псевдо-stripe через box-shadow:inset. */
.phase-row td {
    background: var(--color-bg-subtle, #F8FAFC);
    color: var(--color-text);
    font-weight: 600;
    font-size: 1em;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.38em 1.23em;
    border-top: 3px solid var(--color-bg-app, #F1F5F9);
    border-bottom: 1px solid var(--color-border);
    background-image: none;
    filter: none;
}
.phase-row td:first-child {
    box-shadow: inset 3px 0 0 var(--phase-color, var(--color-primary));
    border-radius: 0;
}
.phase-row:hover td {
    background: var(--color-bg-subtle);
    filter: brightness(0.97);
}
.phase-row .toggle-icon,
.phase-row .plan-drag-handle {
    color: var(--color-text-muted);
}

/* Phase-progress: справа на phase-row — мини-bar 60×4 + цифры */
.phase-row .phase-progress-block {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    float: right;
    background: transparent;
}
.phase-row .phase-progress-bar {
    width: 64px;
    height: 3px;
    background: var(--color-bg-subtle);
    border-radius: 99px;
    overflow: hidden;
    display: inline-block;
    border: none;
}
.phase-row .phase-progress-fill {
    height: 100%;
    background: var(--phase-color, var(--color-primary));
    border-radius: 99px;
    display: block;
    transition: width 0.3s ease-out;
}
.phase-row .phase-progress {
    color: var(--color-text-secondary);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

/* STEP ROW — под фазой, отступ + «—» префикс через ::before */
.step-row td {
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.96em;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.23em 1.23em;
    border-top: 1px solid var(--color-border);
    box-shadow: none;
}
.step-row td:first-child {
    box-shadow: none;
}
/* Имя этапа (колонка «Задача/Этап») — отступ вложенности + «—» как в Linear.
   «—» позиционирован абсолютно, чтобы не смещать текст названия. Отступ
   только в этой колонке, остальные ячейки этапа выровнены по сетке. */
.step-row td.step-name-cell {
    padding-left: 2.7em;
    position: relative;
}
.step-row td.step-name-cell::before {
    content: '—';
    position: absolute;
    left: 1.15em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 0.92em;
    opacity: 0.55;
    pointer-events: none;
}
.step-row:hover td {
    background: var(--color-bg-subtle);
}
/* Сроки этапа — в своей колонке «Сроки», выровнены с датами задач
   (колонка nth-child(3) задаёт padding-left; снимаем инлайн-отступ спана). */
.step-row td.step-dates-cell { vertical-align: middle; }
.step-row td.step-dates-cell .step-dates { margin-left: 0; }

/* Step-progress: справа, занимает оставшиеся колонки (colspan) */
.step-row td.step-progress-cell {
    text-align: right;
    vertical-align: middle;
}
.step-row .step-progress-block {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.step-row .step-progress-bar {
    width: 48px;
    height: 2px;
    background: var(--color-bg-subtle);
    border-radius: 99px;
    display: inline-block;
    overflow: hidden;
    border: none;
}
.step-row .step-progress-fill {
    height: 100%;
    background: var(--phase-color, var(--color-text-muted));
    border-radius: 99px;
    display: block;
}
.step-row .step-progress {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
}

/* TASK ROW — соответствует mock: padding 10/16, top-border 1px,
   чекмарка-кружок как псевдо-элемент перед task-name-text. */
.task-row td {
    background: var(--color-surface);
    font-size: 1em;
    padding: 0.31em 1.23em;
    border-top: 1px solid var(--color-border);
    border-bottom: none;
    vertical-align: middle;
}
.task-row:hover td {
    background: #F8FAFC;
}
/* Скрываем первую колонку (бывший чекбокс) у task-row и step-row.
   phase-row НЕ трогаем — у неё единственный td с colspan="8",
   и он же td:nth-child(1); скрывать его нельзя. */
.plan-table th:nth-child(1),
.task-row td:nth-child(1),
.step-row td:nth-child(1) {
    width: 0;
    max-width: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    visibility: hidden;
    box-shadow: none;
}
.task-row td:nth-child(1) > *,
.step-row td:nth-child(1) > * {
    display: none !important;
}

.task-row td.task-name-cell {
    padding-left: 4.8em;
    position: relative;
}
.task-name-cell,
.task-name-cell:hover {
    background: transparent;
}
.task-name-cell .task-name-text {
    color: var(--color-text);
    font-weight: 500;
}

/* Нативный checkbox перенесён внутрь task-name-cell (из td:nth-child(1)).
   Прозрачный, абсолютно позиционированный поверх кружка ::before —
   клики на кружок попадают на него и вызывают toggleCheck. */
.task-row .task-name-cell input[type="checkbox"] {
    position: absolute;
    left: 2.95em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.69em;
    height: 1.69em;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    margin: 0;
    padding: 0;
}

/* Чекмарка-кружок 15×15 слева от названия задачи. Цвет состояния
   читается из data-status на task-row. */
.task-row .task-name-cell::before {
    content: '';
    position: absolute;
    left: 3.25em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.15em;
    height: 1.15em;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
    background: var(--color-surface);
    box-sizing: border-box;
    transition: background 0.15s ease-out, border-color 0.15s ease-out;
    pointer-events: none;
}
.task-row[data-status="done"] .task-name-cell::before {
    background: var(--color-success);
    border-color: var(--color-success);
}
.task-row[data-status="done"] .task-name-cell::after {
    content: '✓';
    position: absolute;
    left: 3.25em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.15em;
    height: 1.15em;
    text-align: center;
    line-height: 1.15em;
    color: #fff;
    font-weight: 800;
    pointer-events: none;
}
.task-row[data-status="progress"] .task-name-cell::before {
    border-color: var(--color-info);
}
.task-row[data-status="progress"] .task-name-cell::after {
    content: '';
    position: absolute;
    left: 3.67em;
    top: 50%;
    width: 0.31em;
    height: 0.31em;
    border-radius: 50%;
    background: var(--color-info);
    transform: translateY(-50%);
    pointer-events: none;
}
.task-row[data-status="blocked"] .task-name-cell::before {
    border-color: var(--color-danger);
}
.task-row[data-status="blocked"] .task-name-cell::after {
    content: '';
    position: absolute;
    left: 3.48em;
    top: 50%;
    width: 0.69em;
    height: 1.5px;
    background: var(--color-danger);
    transform: translateY(-50%);
    pointer-events: none;
}

/* Колонка «Сроки» — чисто текст, без рамки инпутов */
.task-dates-cell,
.task-row .task-dates-cell {
    color: var(--color-text-secondary);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
}

/* Колонка «Ответственный» — аватар + имя в одну строку */
.task-row td:nth-child(4) {
    color: var(--color-text);
}
.task-row td:nth-child(4) input[data-fio-picker] {
    border: none;
    background: transparent;
    padding: 4px 6px;
    font-size: 12px;
    color: var(--color-text);
    width: auto;
    min-width: 100px;
    max-width: 140px;
}
.task-row td:nth-child(4) input[data-fio-picker]:hover {
    background: var(--color-surface);
}
.task-row td:nth-child(4) input[data-fio-picker]:focus {
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    box-shadow: 0 0 0 3px rgba(8, 10, 18, 0.10);
    outline: none;
}

/* Колонка «Примечание» — мелкий приглушённый текст */
.task-row .task-note-cell {
    color: var(--color-text-secondary);
    font-size: 0.88em;
    line-height: 1.4;
}
.task-row .task-note-input {
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 6px;
    font-size: inherit;
    color: var(--color-text-secondary);
}
.task-row .task-note-input:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
}
.task-row .task-note-input:focus {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(8, 10, 18, 0.10);
    outline: none;
}

/* Колонка delete (последняя) — компактная, прозрачная до hover */
.plan-table th:last-child,
.task-row td:last-child {
    width: 36px;
    padding: 6px;
    text-align: center;
}
.btn-delete-task {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-muted);
    border-radius: 6px;
    width: 22px;
    height: 22px;
    line-height: 1;
    padding: 0;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.15s ease-out, background 0.15s ease-out, color 0.15s ease-out;
}
.task-row:hover .btn-delete-task { opacity: 0.7; }
.btn-delete-task:hover {
    opacity: 1;
    background: var(--color-danger-50);
    color: var(--color-danger);
    border-color: var(--color-danger-50);
}

/* Status pill — soft pill с точкой. Цвет приглушённый. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    background: var(--color-bg-subtle);
    border: none;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-secondary);
}
.status-pill::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.85;
}
.status-pill.is-todo {
    background: rgba(100,116,139,.10);
    color: #64748B;
}
.status-pill.is-progress {
    background: var(--color-info-soft);
    color: var(--color-info);
}
.status-pill.is-review {
    background: rgba(90, 126, 184, 0.12);
    color: var(--color-info);
}
.status-pill.is-done {
    background: var(--color-success-soft);
    color: var(--color-success);
}
.status-pill.is-blocked {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}
.status-pill.is-clickable {
    cursor: pointer;
    transition: filter 0.15s ease-out;
}
.status-pill.is-clickable:hover {
    filter: brightness(0.96);
}

/* Status select в task-row (нативный select) — выравниваем по
   цвету статуса, без фоновой заливки. */
.task-row td:nth-child(5) select {
    border: 1px solid transparent;
    background: transparent;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.task-row[data-status="todo"]     td:nth-child(5) select { color: var(--color-warning); }
.task-row[data-status="progress"] td:nth-child(5) select { color: var(--color-info); }
.task-row[data-status="review"]   td:nth-child(5) select { color: var(--color-info); }
.task-row[data-status="done"]     td:nth-child(5) select { color: var(--color-success); }
.task-row[data-status="blocked"]  td:nth-child(5) select { color: var(--color-danger); }
.task-row td:nth-child(5) select:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
}

/* Urgency pill — приглушённые soft fills, без точки */
.urgency-pill,
.priority-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    border: none;
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
}
.urgency-pill.is-normal,
.priority-pill.is-low,
.priority-pill.is-normal {
    background: var(--color-success-soft);
    color: var(--color-success);
}
.urgency-pill.is-urgent,
.priority-pill.is-medium {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}
.urgency-pill.is-critical,
.priority-pill.is-high,
.priority-pill.is-critical {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* Pills внутри plan-table масштабируются вместе с em-базой */
.plan-table .status-pill,
.plan-table .urgency-pill,
.plan-table .priority-pill {
    font-size: 0.88em;
    padding: 0.23em 0.77em 0.23em 0.69em;
    gap: 0.46em;
}
.plan-table .urgency-pill,
.plan-table .priority-pill {
    padding: 0.23em 0.77em;
}
.plan-table .status-pill::before {
    width: 0.46em;
    height: 0.46em;
}

/* Inputs/dates в строках — невидимые до hover/focus */
.task-date-input,
.task-name-cell input,
.task-owner-cell input {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    padding: 0.31em 0.46em;
    font-size: 0.96em;
    transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
.task-date-input:hover,
.task-name-cell input:hover,
.task-owner-cell input:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
}
.task-date-input:focus,
.task-name-cell input:focus,
.task-owner-cell input:focus {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(8, 10, 18, 0.10);
    outline: none;
}
.task-dates-sep { color: var(--color-text-muted); }

/* Note cell — компактный, нейтральный */
.task-note-cell {
    color: var(--color-text-secondary);
    font-size: 12px;
}
.task-note-textarea,
.task-note-cell textarea {
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 12px;
    border-radius: 6px;
    padding: 4px 6px;
    transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
.task-note-textarea:hover,
.task-note-cell textarea:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
}
.task-note-textarea:focus,
.task-note-cell textarea:focus {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(8, 10, 18, 0.10);
    outline: none;
}

/* Avatars (.avatar глобальный) — мягче, не доминируют */
.avatar {
    background: var(--color-text-muted);
    color: #fff;
    border: none;
    font-weight: 600;
    width: 26px;
    height: 26px;
    font-size: 11px;
}

/* Кнопка добавления задачи на step-row */
.btn-inline-add-step {
    background: transparent;
    border: 1px dashed var(--color-border-strong);
    color: var(--color-text-secondary);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}
.btn-inline-add-step:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-25);
    border-style: solid;
}
.btn-inline-add {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
}
.btn-inline-add:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* Delete-кнопки в строке — невидимые до hover row */
.btn-delete-task,
.btn-del-phase,
.btn-del-step {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.15s ease-out, color 0.15s ease-out;
}
.task-row:hover .btn-delete-task,
.phase-row:hover .btn-del-phase,
.step-row:hover .btn-del-step { opacity: 1; }
.btn-delete-task:hover,
.btn-del-phase:hover,
.btn-del-step:hover { color: var(--color-danger); }

/* Toggle chevron */
.toggle-icon {
    color: var(--color-text-muted);
    margin-right: 6px;
}

/* Date-shift chip — приглушённый */
.task-shift-chip,
.task-shift-chip-btn {
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border: none;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-weight: 600;
}

/* Btn-attach / btn-comment / risk-flag — иконки на step-row
   и task-row. По умолчанию приглушённые маленькие, при hover
   на родительском row становятся ярче. Это убирает визуальный
   шум, который перегружал интерфейс. */
.step-row .btn-attach,
.step-row .btn-comment,
.step-row .btn-step-attach,
.step-row .btn-step-comment {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 2px 4px;
    margin: 0 1px;
    border-radius: 5px;
    opacity: 0.5;
    transition: opacity 0.15s ease-out, color 0.15s ease-out, background 0.15s ease-out;
}
.step-row .btn-attach svg,
.step-row .btn-comment svg,
.step-row .btn-step-attach svg,
.step-row .btn-step-comment svg {
    width: 13px;
    height: 13px;
}
.step-row:hover .btn-attach,
.step-row:hover .btn-comment,
.step-row:hover .btn-step-attach,
.step-row:hover .btn-step-comment {
    opacity: 1;
}
.step-row .btn-attach:hover,
.step-row .btn-comment:hover,
.step-row .btn-step-attach:hover,
.step-row .btn-step-comment:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

/* Done-badge у step-row/phase-row («✓ Выполнено») — приглушённая
   пилюля рядом с названием этапа. Видна только при .is-complete. */
.step-row .done-badge,
.phase-row .done-badge {
    background: var(--color-success-soft);
    color: var(--color-success);
    border: none;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 10px;
    gap: 4px;
}
.step-row.is-complete .done-badge,
.phase-row.is-complete .done-badge {
    display: inline-flex;
    align-items: center;
}

/* Risk-flag в задаче — компактный приглушённый */
.task-risk-flag {
    background: var(--color-warning-soft);
    border: none;
    color: var(--color-warning);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 8px;
    opacity: 0.85;
}
.task-risk-flag svg { width: 10px; height: 10px; }
.task-risk-flag.risk-prio-critical { background: var(--color-danger-soft); color: var(--color-danger); }
.task-risk-flag.risk-prio-high     { background: var(--color-warning-soft); color: var(--color-warning); }
.task-risk-flag.risk-prio-low      { background: var(--color-bg-subtle); color: var(--color-text-muted); }

/* Date-shift chip компактнее */
.task-shift-chip svg,
.task-shift-chip-btn svg { width: 10px; height: 10px; }

/* Textarea примечания: ограничиваем высоту тремя строками */
.task-note-input {
    max-height: 60px;
    overflow-y: hidden;
    resize: none;
}
.task-note-input:focus {
    max-height: 120px;
    overflow-y: auto;
}

/* Note-кнопки (⋯ / expand) в task-note-cell — невидимы до hover */
.task-note-cell .task-note-more,
.task-note-cell .task-note-expand {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.15s ease-out, background 0.15s ease-out;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.task-row:hover .task-note-cell .task-note-more,
.task-row:hover .task-note-cell .task-note-expand,
.task-note-cell:focus-within .task-note-more,
.task-note-cell:focus-within .task-note-expand {
    opacity: 0.8;
}
.task-note-cell .task-note-more:hover,
.task-note-cell .task-note-expand:hover {
    opacity: 1;
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
/* Когда примечание длинное — кнопка expand всегда видна (не только при hover) */
.task-note-cell.has-long-note .task-note-expand {
    opacity: 0.65;
}
.task-note-cell.has-long-note .task-note-expand:hover {
    opacity: 1;
    background: var(--color-primary-25);
    color: var(--color-primary);
}

/* Mirror-pill на phase-row — компактнее, приглушённый */
.phase-row .mirror-source-pill,
.phase-row .mirror-badge {
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-left: 10px;
}


/* ============================================================
   PHASE D · ДИАГРАММА ГАНТА
   Navy header с uppercase месяцами, светлые task-rows,
   серые phase-rows с цветной точкой, округлые градиентные
   бары (цвет фазы — inline-style из JS, сохраняется),
   тонкая красная Сегодня-линия с лейблом.
   ============================================================ */

/* Внешний контейнер */
.gantt-v2-wrap {
    padding: 1em 2em 3em;
    background: transparent;
}
/* Внутри roadmap-sheet: контент на всю ширину.
   Небольшой отступ сверху (0.5em source-bar) + 0 у wrap → Ганта прижат к краям как plan-table.
   Отступ снизу 3em — как у plan-table-wrap (padding-bottom: 48px). */
.roadmap-sheet .gantt-v2-wrap {
    padding: 0 0 3em;
    overflow-x: auto;
    overflow-y: clip;
}
.roadmap-sheet .gantt-v2-source-bar {
    padding: 0.5em 0;
}

/* Карточка */
.gantt-v2-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75em;
    box-shadow: var(--shadow-1);
    overflow: visible;
}
/* Ганта-лист: делаем flex-колонку, чтобы gantt-v2-wrap взял оставшуюся высоту
   и скроллил внутри себя, а не тянул лист. :has(> .gantt-v2-source-bar) срабатывает
   только на листе с Гантом — другие subtab-листы не затрагиваются. */
.roadmap-sheet:has(> .gantt-v2-source-bar) {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.roadmap-sheet:has(> .gantt-v2-source-bar) > .gantt-v2-source-bar {
    flex-shrink: 0;
}
.roadmap-sheet:has(> .gantt-v2-source-bar) > .gantt-v2-wrap {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
}

/* Внутри roadmap-sheet gantt-card сам является вложенной карточкой — убираем.
   min-width: 100% — карта растягивается до ширины контейнера, когда диапазон
   дат узкий; overflow-x: auto на gantt-v2-wrap берёт на себя скролл когда
   карта шире (много дней/недель). */
.roadmap-sheet .gantt-v2-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-width: 100%;
}

/* Тулбар «Дни / Недели / Месяцы» */
.gantt-v2-scale {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.5em;
}
.gantt-v2-scale-btn {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
}
.gantt-v2-scale-btn:hover { color: var(--color-text); }
.gantt-v2-scale-btn.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-1);
    font-weight: 600;
}

/* HEADER — navy с белыми uppercase лейблами */
.gantt-v2-header {
    background: var(--rm-navy);
    border-bottom: none;
    border-top-left-radius: 0.75em;
    border-top-right-radius: 0.75em;
}
/* Внутри roadmap-sheet хедер идёт от края до края — скругление убираем */
.roadmap-sheet .gantt-v2-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.gantt-v2-name-head {
    background: var(--rm-navy);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.gantt-v2-top-row {
    background: var(--rm-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gantt-v2-top-cell {
    color: rgba(255, 255, 255, 0.55);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.gantt-v2-cells-row { background: var(--rm-navy); }
.gantt-v2-month-cell {
    color: rgba(255, 255, 255, 0.65);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.gantt-v2-month-cell.is-today {
    background: rgba(220, 38, 38, 0.18);
    color: #fff;
    font-weight: 700;
}
.gantt-v2-month-cell.is-today .gantt-v2-dow { color: rgba(255, 255, 255, 0.85); }
.gantt-v2-dow { color: rgba(255, 255, 255, 0.5); }
.gantt-v2-month-cell.is-weekend {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.4);
}

/* PHASE ROW — светло-серая полоса с цветной точкой */
.gantt-v2-phase-row {
    background: var(--color-bg-subtle);
    border-top: 5px solid var(--color-bg-app);
    border-bottom: 1px solid var(--color-border);
    min-height: 36px;
}
.gantt-v2-phase-name {
    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-right: 1px solid var(--color-border);
}
.gantt-v2-phase-dot {
    width: 8px;
    height: 8px;
}
.gantt-v2-phase-count {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
}

/* TASK ROW — белая бумага */
.gantt-v2-row {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    min-height: 40px;
}
.gantt-v2-task-name {
    background: var(--color-surface);
    color: var(--color-text);
    border-right: 1px solid var(--color-border);
    font-size: 11px;
    font-weight: 500;
    padding-left: 26px;
}
.gantt-v2-row:hover,
.gantt-v2-row:hover .gantt-v2-task-name {
    background: var(--color-bg-subtle);
}

/* Phase-stripe слева от названия задачи — тонкая, мягкая */
.gantt-v2-phase-stripe {
    width: 2px;
    border-radius: 1px;
    opacity: 0.7;
}

/* BAR — округлый pill высотой 14px (как в mock). Inline background
   цвета фазы остаётся; сверху ::after накладывает полупрозрачный
   градиент белого, давая эффект "от светлого к насыщенному". */
/* Гант: стиль бара теперь полностью в gantt.css (cell-fill, плоский, --status-*).
   Старые правила (height:14px / border-radius:5px / box-shadow / градиентный
   ::after) удалены — они перекрывали cell-fill по высоте, добавляли тень
   вопреки плоскому стилю PRD и переопределяли ::after-ручку resize. */

/* Phase rollup bar — тонкая полупрозрачная подложка */
.gantt-v2-phase-bar {
    height: 5px;
    opacity: 0.45;
    border-radius: 999px;
}

/* Avatar в баре — нейтральный, читаемый */
.gantt-v2-avatar {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(8, 10, 18,0.08);
    color: var(--color-text);
    font-weight: 600;
}

/* TODAY LINE — тонкая красная с текстовым лейблом сверху (mock-style) */
.gantt-v2-today-line {
    background: var(--color-danger);
    width: 2px;
    box-shadow: none;
}
.gantt-v2-today-line::before {
    content: 'Сегодня';
    background: transparent;
    color: var(--color-danger);
    font-size: 9px;
    font-weight: 700;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    letter-spacing: 0.04em;
    text-transform: none;
    top: -16px;
    line-height: 1;
}

/* Сетка — едва заметна */
.gantt-v2-grid-line { background: rgba(8, 10, 18,0.04); }
.gantt-v2-grid-line.is-major { background: rgba(8, 10, 18,0.08); }

/* No-date chip */
.gantt-v2-no-date {
    background: var(--color-bg-subtle);
    border: 1px dashed var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: 11px;
}

/* Dep handle */
.gantt-v2-bar-dep-handle {
    border-color: var(--color-primary);
}

/* Empty state */
.gantt-v2-empty {
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Inline-rename outline */
.gantt-v2-task-label.is-editing {
    outline: 2px solid var(--color-primary);
    background: var(--color-surface);
}


/* ============================================================
   PHASE E · СДР / WBS — горизонтальный T-tree (node graph)
   renderWBS() в 37-wbs.js собирает HTML с обёртками
   .wbs-p-branch / .wbs-branch / .wbs-leaf и T-connectors
   через ::before/::after hooks. Ширины фаз/этапов задаются
   inline (sum of children × 88px), чтобы T-connector
   рисовался ровно.
   ============================================================ */

/* Внешняя обёртка вкладки */
.wbs-wrap {
    padding: 16px 32px 32px;
    background: transparent;
    gap: 12px;
    display: flex;
    flex-direction: column;
}
.roadmap-sheet > .wbs-wrap {
    padding-left: 1.75em;
    padding-right: 1.75em;
    gap: 4px;
}

/* Toolbar */
.wbs-toolbar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-1);
    padding: 10px 14px;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.wbs-toolbar-hint {
    color: var(--color-text-secondary);
    font-size: 11.5px;
    margin-left: auto;
}
.wbs-toolbar button {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}
.wbs-toolbar button:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.wbs-toolbar .btn-primary,
.wbs-toolbar > button:first-child {
    background: var(--color-text);
    color: #fff;
    border: none;
}
.wbs-toolbar .btn-primary:hover,
.wbs-toolbar > button:first-child:hover {
    background: var(--color-gray-700);
}

/* Контейнер дерева — внешняя «бумага» */
.wbs-tree {
    display: block;
    flex-direction: initial;
    background: transparent;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
    scroll-snap-type: none;
}
.wbs-tree-canvas {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.875em;
    box-shadow: var(--shadow-1);
    padding: 1.75em 1em 1.5em;
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
}
/* Внутри roadmap-sheet убираем двойную белую карточку — sheet сам белый */
.roadmap-sheet .wbs-tree-canvas {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding-top: 0.5em;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}
.roadmap-sheet .wbs-tree-inner {
    padding-left: 0;
    padding-right: 0;
}
/* kanban.css adds 24px side padding here — зануляем */
.roadmap-sheet .wbs-tree {
    padding-left: 0;
    padding-right: 0;
}
.wbs-tree-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 100%;
    padding: 0 16px;
    font-size: clamp(11px, 0.75vw + 2.5px, 14px);
}

/* ROOT — чёрная капсула сверху */
.wbs-tree-root { display: flex; justify-content: center; }
.wbs-root-node {
    background: #111827;
    color: #fff;
    border-radius: 12px;
    padding: 14px 28px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(8, 10, 18,0.20);
}
.wbs-root-name {
    font-size: 1.29em;
    font-weight: 800;
    letter-spacing: -0.014em;
    line-height: 1.1;
}
.wbs-root-sub {
    font-size: 0.79em;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    letter-spacing: 0.01em;
}

/* Стволы (вертикальные соединители между уровнями) */
.wbs-stem,
.wbs-stem-sm {
    width: 2px;
    background: var(--color-border-strong);
    flex-shrink: 0;
}
.wbs-stem    { height: 26px; }
.wbs-stem-sm { height: 16px; }
.wbs-tree-inner > .wbs-stem { align-self: center; }

/* Ряды уровней:
   - .wbs-p1 — фазы горизонтально
   - .wbs-l1 — этапы под фазой горизонтально
   - .wbs-l2 — задачи под этапом ВЕРТИКАЛЬНО (стэком) */
.wbs-p1,
.wbs-l1 { display: flex; }
.wbs-p1 { gap: 0.75em; }
.wbs-l2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    width: 100%;
    padding: 0;
}

/* Бранчи на каждом уровне.
   Ширина задаётся inline-style из JS (sum × 88px). */
.wbs-p-branch,
.wbs-branch {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wbs-branch {
    /* Отступ между карточками этапов — через margin на самой карточке,
       чтобы .wbs-hook (линия-коннектор) занимал полную ширину ветки. */
}
.wbs-p-branch {
    zoom: var(--wbs-zoom, 1);
}
.wbs-leaf {
    width: 88px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* HOOK — T-коннектор.
   ::before — горизонтальная перекладина (на всю ширину branch),
   ::after  — вертикальный отрезок (по центру). */
.wbs-hook {
    align-self: stretch;
    height: 26px;
    flex-shrink: 0;
    position: relative;
}
.wbs-hook::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--color-border-strong);
}
.wbs-hook::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: calc(50% - 1px);
    width: 2px;
    background: var(--color-border-strong);
}
/* На крайних бранчах горизонтальная перекладина обрезается,
   чтобы не выходить за пределы дерева. */
.wbs-p1 > .wbs-p-branch:first-child  > .wbs-hook::before { left: 50%; }
.wbs-p1 > .wbs-p-branch:last-child   > .wbs-hook::before { right: 50%; }
.wbs-p1 > .wbs-p-branch:only-child   > .wbs-hook::before { display: none; }

/* Этапы горизонтально — T-hook у каждого, обрезаем по краям ряда. */
.wbs-l1 > .wbs-branch:first-child > .wbs-hook::before { left: 50%; }
.wbs-l1 > .wbs-branch:last-child  > .wbs-hook::before { right: 50%; }
.wbs-l1 > .wbs-branch:only-child  > .wbs-hook::before { display: none; }

/* Задачи вертикальной стопкой: T-hook им не нужен — между задачами
   работает gap, разделитель не рисуем (минималистичный лук). */
.wbs-l2 > .wbs-leaf > .wbs-hook { display: none; }
.wbs-l2 > .wbs-leaf { width: 100%; align-items: stretch; }

/* ── PHASE CARD (level 1) ─────────────────────────────────────
   Цветная solid карточка. --phase-color приходит inline из JS.
   .wbs-p-branch в селекторе даёт (0,3,0) — перекрывает wbs.css (0,2,0),
   из-за которого нормальное состояние оставалось белым. */
.wbs-node--phase {
    flex: none;
    width: 12.5em;
    min-width: 12.5em;
    max-width: none;
    background: transparent;
    border: none;
    border-right: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.wbs-p-branch .wbs-node--phase > .wbs-row {
    background: var(--phase-color, var(--color-primary));
    color: #fff;
    border: none;
    border-radius: 0.625em;
    box-shadow: 0 6px 18px rgba(8, 10, 18,0.10),
                0 0 0 1px rgba(8, 10, 18,0.04);
    padding: 0.75em 0.875em;
    width: 12.5em;
    min-height: 4em;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    text-align: center;
    flex-wrap: nowrap;
    cursor: grab;
    margin: 0;
    position: relative;
    overflow: hidden;
}
.wbs-p-branch .wbs-node--phase > .wbs-row:hover {
    background: var(--phase-color, var(--color-primary));
    border: none;
    filter: brightness(1.06);
}
.wbs-node--phase .wbs-phase-num {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    line-height: 1;
    order: 1;
}
/* (0,3,0) — перекрывает wbs.css .wbs-node--phase > .wbs-row .wbs-title { color: var(--color-text) } */
.wbs-node--phase > .wbs-row .wbs-title {
    color: #fff;
    font-weight: 700;
    font-size: 1em;
    letter-spacing: -0.01em;
    text-transform: none;
    line-height: 1.25;
    order: 2;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    white-space: normal;
    max-width: 100%;
    margin: 0;
    flex: none;
    overflow: visible;
}
.wbs-node--phase .wbs-phase-meta {
    font-size: 0.79em;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    order: 3;
    margin-top: 1px;
}

/* ── STEP CARD (level 2) ──────────────────────────────────────
   Outlined, цвет фазы — это рамка/заголовок-тон. */
.wbs-node--step {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    /* 8px с каждой стороны — визуальный зазор между карточками этапов.
       Hook-коннектор — соседний элемент, он занимает полную ширину
       .wbs-branch и не затрагивается этим margin. */
    margin: 0 8px;
}
.wbs-node--step > .wbs-row {
    background: color-mix(in srgb, var(--step-color, var(--color-primary)) 8%, var(--surface));
    color: var(--step-color, var(--color-primary));
    border: 1.5px solid color-mix(in srgb, var(--step-color, var(--color-primary)) 45%, transparent);
    border-radius: 10px;
    box-shadow: none;
    padding: 10px 12px;
    width: 180px;
    min-height: 76px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    flex-wrap: nowrap;
    cursor: grab;
    margin: 0;
    position: relative;
    overflow: hidden;
}
.wbs-node--step > .wbs-row:hover {
    border-color: var(--step-color, var(--color-primary));
    background: color-mix(in srgb, var(--step-color, var(--color-primary)) 14%, var(--surface));
}
.wbs-node--step .wbs-step-num {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    opacity: 0.7;
    order: 1;
}
.wbs-node--step .wbs-title {
    font-weight: 600;
    font-size: 0.93em;
    color: var(--step-color, var(--color-text));
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.3;
    order: 2;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    max-width: 100%;
    text-align: center;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wbs-node--step .wbs-step-count {
    font-size: 0.79em;
    opacity: 0.65;
    font-weight: 500;
    line-height: 1;
    order: 3;
    margin-top: 1px;
}

/* ── TASK CARD (level 3) ──────────────────────────────────────
   Белая карточка с тонкой цветной полоской сверху. */
.wbs-node--task {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}
.wbs-node--task > .wbs-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--task-color, var(--color-border-strong));
    border-top: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-1);
    padding: 6px 10px;
    width: 100%;
    min-height: 28px;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    flex-wrap: nowrap;
    cursor: grab;
    margin: 0;
    position: relative;
    overflow: visible;
}
/* Статус-точка прижата к верхней строке текста, не центру карточки */
.wbs-node--task .wbs-status-dot {
    margin-top: 5px;
}
.wbs-node--task > .wbs-row:hover {
    border-color: var(--task-color, var(--color-border-strong));
    border-top-color: var(--task-color, var(--color-border-strong));
    box-shadow: var(--shadow-2);
}
.wbs-node--task .wbs-title {
    font-size: 0.93em;
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    text-align: left;
    letter-spacing: -0.005em;
    margin: 0;
    flex: 1;
    min-width: 0;
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
    white-space: normal;
}

/* Status dot — приглушённая палитра */
.wbs-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: none;
    flex-shrink: 0;
}
.wbs-status-dot.is-todo,
.wbs-status-dot[data-status="todo"]     { background: var(--color-warning); }
.wbs-status-dot.is-progress,
.wbs-status-dot[data-status="progress"] { background: var(--color-info); }
.wbs-status-dot.is-done,
.wbs-status-dot[data-status="done"]     { background: var(--color-success); }
.wbs-status-dot.is-blocked,
.wbs-status-dot[data-status="blocked"]  { background: var(--color-danger); }

/* Action-кнопки (+ / ✕) — невидимы по умолчанию, появляются только
   при hover на конкретной карточке. Жёсткий + pointer-events
   гарантируют, что в idle-состоянии их не видно и они не кликаются
   (иначе case-by-case стилизация из wbs.css могла бы их «вытянуть»). */
.wbs-node .wbs-action {
    position: absolute;
    top: 4px;
    background: rgba(0, 0, 0, 0.18);
    border: none;
    color: rgba(255, 255, 255, 0.92);
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 4px;
    padding: 0;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.15s ease-out, background 0.15s ease-out;
    cursor: pointer;
    z-index: 2;
}
.wbs-node .wbs-action.wbs-add { right: 26px; }
.wbs-node .wbs-action.wbs-del { right: 4px; }
.wbs-node .wbs-row:hover > .wbs-action,
.wbs-node:hover > .wbs-row > .wbs-action {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.wbs-node .wbs-action:hover {
    background: rgba(0, 0, 0, 0.32);
}

/* Action-кнопки на step/task карточках — серые, не белые */
.wbs-node--step .wbs-action,
.wbs-node--task .wbs-action {
    background: rgba(8, 10, 18,0.08);
    color: var(--color-text-secondary);
}
.wbs-node--step .wbs-action:hover,
.wbs-node--task .wbs-action:hover {
    background: rgba(8, 10, 18,0.16);
    color: var(--color-text);
}

/* Phase-num / step-num / phase-meta / step-count в карточках —
   подавляем возможное text-clamp с родительского узла */
.wbs-node--phase .wbs-phase-num,
.wbs-node--phase .wbs-phase-meta,
.wbs-node--step  .wbs-step-num,
.wbs-node--step  .wbs-step-count {
    display: block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Drop indicators */
.wbs-row.is-drop-before,
.wbs-row.is-drop-after,
.wbs-row.is-drop-inside {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.wbs-row.is-drop-before::before,
.wbs-row.is-drop-after::after {
    display: none;
}

/* Empty states */
.wbs-empty {
    color: var(--color-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 60px 24px;
}
.wbs-step-empty,
.wbs-task-empty {
    color: var(--color-text-muted);
    font-size: 11px;
    font-style: italic;
    padding: 8px 12px;
}

/* Mirror badge — компактный круглый значок в углу карточки.
   Текст-подсказка появляется только в title (tooltip). */
.wbs-mirror-badge {
    background: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0;
    font-weight: 600;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.wbs-mirror-badge::before {
    content: '↻';
    font-size: 10px;
    line-height: 1;
}

/* Inline rename input */
.wbs-rename-input {
    border: 1px solid var(--color-primary);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 11px;
    text-align: center;
    box-shadow: 0 0 0 3px rgba(8, 10, 18, 0.10);
    width: 100%;
    max-width: 100%;
}

/* Grip и toggle — скрываем в T-tree (он визуально лишний) */
.wbs-node--phase .wbs-grip,
.wbs-node--step .wbs-grip,
.wbs-node--task .wbs-grip,
.wbs-node--phase .wbs-toggle,
.wbs-node--step .wbs-toggle,
.wbs-node--task .wbs-toggle,
.wbs-node--step .wbs-stepnav,
.wbs-node .wbs-kind {
    display: none !important;
}

/* Legend внизу */
.wbs-tree-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    justify-content: center;
}
.wbs-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--color-text-secondary);
}
.wbs-legend-swatch {
    width: 26px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}
.wbs-legend-root  { background: #111827; }
.wbs-legend-phase { background: var(--color-primary); }
.wbs-legend-step  {
    border: 1.5px solid var(--color-primary);
    background: rgba(8, 10, 18, 0.08);
}
.wbs-legend-task  {
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-primary);
    background: var(--color-surface);
}


/* ============================================================
   PHASE F · КАНБАН / ПАСПОРТ / КОНКУРЕНТЫ
   Финальная полировка трёх оставшихся подвкладок.
   ============================================================ */

/* ── 1. КАНБАН — палитра темы поверх kanban.css ──────────── */
/* kanban.css задаёт всю структуру и размеры.
   Здесь только цветовые корректировки под палитру темы. */

.kb-card {
    border: 1px solid rgba(8, 10, 18,0.08);
    box-shadow: 0 1px 2px rgba(8, 10, 18,0.06), 0 1px 4px rgba(8, 10, 18,0.04);
}
.kb-card:hover {
    box-shadow: 0 4px 12px rgba(8, 10, 18,0.10);
    border-color: rgba(8, 10, 18,0.14);
}
.kb-col-title { color: var(--color-text); }
.kb-col-count {
    background: rgba(8, 10, 18,0.06);
    color: var(--color-text-secondary);
    border-color: rgba(8, 10, 18,0.1);
}
.kb-card-desc { display: none; }
.kb-view-desc { display: block; }
.kb-priority-chip {
    display: inline-flex; align-items: center; padding: 2px 7px;
    border-radius: 999px; font-size: 10px; font-weight: 600;
    flex-shrink: 0; line-height: 1.3; white-space: nowrap;
}
.kb-wip-bar-wrap { display: flex; align-items: center; gap: 5px; }
.kb-wip-bar-track { width: 40px; height: 4px; background: rgba(0,0,0,0.08); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.kb-wip-bar-fill  { height: 100%; border-radius: 2px; transition: width 0.3s ease, background 0.3s ease; }
.kb-subtitle,
.kb-toolbar-filter-label,
.kb-toolbar-filter-sel { font-size: 0.72em; }


/* ── 2. ПАСПОРТ ПРОЕКТА ───────────────────────────────────── */
/* Токены --p-* задаёт passport.css (холодная Stitch-палитра, scoped к
   .passport-root). Бывший здесь тёплый greige-блок удалён при чистке легаси —
   он незаметно перебивал холодные значения (design-2026 грузится позже). */

#tab-passport .passport-root {
    background: transparent;
    padding: 16px 32px 48px;
    color: var(--color-text);
    /* СВЕТЛАЯ тема: ремап scoped-палитры паспорта на глобальные токены
       дизайн-системы (раньше ремап был только в [data-theme=dark] —
       в светлой паспорт жил на Stitch-палитре, акцент «выбивался»). */
    --p-ink: var(--color-text);
    --p-ink-2: var(--color-text-strong);
    --p-muted: var(--color-text-secondary);
    --p-muted-2: var(--color-text-muted);
    --p-line: var(--color-border);
    --p-line-2: var(--color-border);
    --p-bg: var(--color-bg-app);
    --p-bg-2: var(--color-surface);
    --p-card: var(--color-surface);
    --p-white: var(--color-surface);
    --p-accent: var(--color-accent);
    --p-accent-strong: var(--color-accent-strong);
    --p-accent-tint: var(--accent-soft);
    --p-mono: var(--font-mono);
    --p-fn: var(--color-success);
    --p-tech: var(--color-primary);
    --p-vis: var(--color-danger);
    --p-scn: var(--color-warning);
    --p-fn-bg: var(--color-success-soft);
    --p-tech-bg: var(--color-primary-25);
    --p-vis-bg: var(--color-danger-soft);
    --p-scn-bg: var(--color-warning-soft);
    --p-warn: var(--color-warning);
    --p-warn-bg: var(--color-warning-soft);
    --p-danger: var(--color-danger);
    --p-success: var(--color-success);
}
#tab-passport .passport-section,
#tab-passport .passport-sub-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-1);
}
#tab-passport .passport-section-title {
    color: var(--color-text);
    font-weight: 700;
    letter-spacing: -0.012em;
}
#tab-passport .passport-eyebrow {
    color: var(--color-text-secondary);
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
}
#tab-passport .passport-field-label {
    color: var(--color-text-secondary);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
#tab-passport .passport-btn {
    border-radius: 8px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: none;
    font-weight: 500;
    transition: background 0.15s ease-out, border-color 0.15s ease-out;
}
#tab-passport .passport-btn:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
}
#tab-passport .passport-btn.is-primary,
#tab-passport .passport-btn--primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
#tab-passport .passport-btn.is-primary:hover,
#tab-passport .passport-btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}
#tab-passport .passport-input,
#tab-passport .passport-textarea {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 13px;
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
#tab-passport .passport-input:hover,
#tab-passport .passport-textarea:hover {
    border-color: var(--color-border-strong);
}
#tab-passport .passport-input:focus,
#tab-passport .passport-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(8, 10, 18, 0.10);
    outline: none;
}


/* ── 3. АНАЛИЗ КОНКУРЕНТОВ ────────────────────────────────── */
#tab-competitors .comp-root {
    /* Переопределяем локальную палитру модуля */
    --c-ink:     var(--color-text);
    --c-ink-2:   var(--color-text);
    --c-muted:   var(--color-text-secondary);
    --c-muted-2: var(--color-text-muted);
    --c-line:    var(--color-border);
    --c-line-2:  var(--color-bg-subtle);
    --c-bg:      var(--color-bg-app);
    --c-white:   var(--color-surface);

    /* акцент модуля = app-акцент Future Dusk; «Мы/PrimeBPM» — акцентом */
    --c-accent:       var(--color-accent);
    --c-accent-light: var(--accent-soft);
    --c-bg-2:         var(--color-bg-subtle);
    --c-us:      var(--color-accent);
    --c-us-bg:   var(--accent-soft);
    --c-good:    var(--color-success);
    --c-good-bg: var(--color-success-soft);
    --c-bad:     var(--color-danger);
    --c-bad-bg:  var(--color-danger-soft);
    --c-neut:    var(--color-warning);
    --c-neut-bg: var(--color-warning-soft);
    --c-info:    var(--color-info);
    --c-info-bg: var(--color-info-soft);

    background: transparent;
    padding: 16px 32px 48px;
}
#tab-competitors .comp-subtabs {
    background: transparent;
    border-bottom-color: var(--color-border);
    padding: 0;
    margin-bottom: 16px;
}
#tab-competitors .comp-subtab {
    color: var(--color-text-secondary);
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 10px 14px;
    font-weight: 500;
}
#tab-competitors .comp-subtab:hover { color: var(--color-text); }
#tab-competitors .comp-subtab.is-active {
    background: transparent;
    color: var(--color-text);
    border-color: transparent;
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
#tab-competitors .comp-btn {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: none;
    font-weight: 500;
}
#tab-competitors .comp-btn:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
}
#tab-competitors .comp-btn.is-primary {
    background: var(--color-text);
    color: #fff;
    border-color: var(--color-text);
}
#tab-competitors .comp-btn.is-primary:hover {
    background: var(--color-gray-700);
    border-color: var(--color-gray-700);
}
/* Контейнер вида — без обрамляющей рамки (Stitch: чистые секции на фоне).
   Раньше .comp-screen имел border+тень+bg вокруг ВСЕХ видов — «коробка». */
#tab-competitors .comp-screen {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
#tab-competitors .comp-swot-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-1);
}
/* Тёмная тема: групповое правило ниже возвращает фон/тень .comp-screen —
   перебиваем (контейнер без рамки и в dark). */
[data-theme="dark"] #tab-competitors .comp-screen {
    background: transparent;
    box-shadow: none;
    border: none;
}


/* ============================================================
   ОБЩЕЕ: scrollbar, focus-ring, выделение
   ============================================================ */
.roadmap-sheet ::-webkit-scrollbar,
.main-area ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.roadmap-sheet ::-webkit-scrollbar-thumb,
.main-area ::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 999px;
    border: 2px solid var(--color-bg-app);
}
.roadmap-sheet ::-webkit-scrollbar-thumb:hover,
.main-area ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}
.roadmap-sheet ::-webkit-scrollbar-track,
.main-area ::-webkit-scrollbar-track {
    background: transparent;
}

::selection {
    background: rgba(8, 10, 18, 0.14);
    color: inherit;
}

/* Базовые ширины двух «фиксированных» колонок — чекбокс слева и
   меню «…» справа. Все остальные колонки шириной по контенту,
   адаптивный clamp-блок снят по запросу. */
.plan-table th:last-child,
.plan-table td:last-child { width: 32px; }

/* ── Главная: блоки теплее (не белые) ── */
.fav-card {
    background: var(--bg-canvas);
    border-color: var(--border);
}
.fav-card:hover { background: var(--bg-subtle); }

.home-mockup {
    --m-card: var(--bg-canvas);
    --m-bg:   var(--bg-subtle);
    --m-bg-2: var(--bg-canvas);
    --m-line: var(--border);
}

/* ============================================================
   DARK THEME COMPONENT PATCHES · финальный слой
   ============================================================ */
[data-theme="dark"] .sidebar-nav {
    background: #19181b;
    color: var(--color-text);
    border-right: 1px solid var(--hairline);
}
[data-theme="dark"] .sidebar-nav:hover {
    background: #1e1d20;
    box-shadow: 12px 0 32px -24px rgba(0, 0, 0, 0.80);
}
[data-theme="dark"] .sidebar-section + .sidebar-section::before {
    background: var(--hairline);
}
[data-theme="dark"] .side-link {
    color: var(--color-text-muted);
}
[data-theme="dark"] .side-link:hover {
    background: rgba(226, 232, 244, 0.06);
    color: var(--color-text);
}
[data-theme="dark"] .side-link.active {
    background: linear-gradient(135deg, #20232E, #1A1C26);
    color: #F1F4FB;
    box-shadow: inset 0 0 0 1px rgba(226, 232, 244, 0.08),
                0 10px 24px -18px rgba(0, 0, 0, 0.90);
}
[data-theme="dark"] .sidebar-nav .side-ico-img {
    filter: brightness(0) invert(1) opacity(0.50) !important;
}
[data-theme="dark"] .sidebar-nav .side-link:hover .side-ico-img {
    filter: brightness(0) invert(1) opacity(0.74) !important;
}
[data-theme="dark"] .sidebar-nav .side-link.active .side-ico-img {
    filter: brightness(0) invert(1) opacity(0.92) !important;
}

[data-theme="dark"] .main-area > header {
    background: linear-gradient(180deg, #1b1a1d, #171619);
    box-shadow: 0 1px 0 rgba(226, 232, 244, 0.08);
}
[data-theme="dark"] .hdr-action-btn,
[data-theme="dark"] .notif-btn,
[data-theme="dark"] .notes-header-btn,
[data-theme="dark"] .btn-logout {
    background: rgba(226, 232, 244, 0.08);
    color: rgba(244, 247, 255, 0.88);
    border-color: rgba(226, 232, 244, 0.12);
}
[data-theme="dark"] .hdr-action-btn:hover,
[data-theme="dark"] .notif-btn:hover,
[data-theme="dark"] .notes-header-btn:hover,
[data-theme="dark"] .btn-logout:hover {
    background: rgba(226, 232, 244, 0.13);
}

[data-theme="dark"] .tab-content,
[data-theme="dark"] .roadmap-sheet,
[data-theme="dark"] .content-card,
[data-theme="dark"] .widget-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .fav-card,
[data-theme="dark"] .home-mockup,
[data-theme="dark"] .reports-card,
[data-theme="dark"] .reports-sidebar,
[data-theme="dark"] .reports-main,
[data-theme="dark"] .daily-item,
[data-theme="dark"] .comments-panel,
[data-theme="dark"] .task-drawer,
[data-theme="dark"] .task-drawer-section,
[data-theme="dark"] .notif-panel,
[data-theme="dark"] .cmdk-modal,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .cal-modal-content,
[data-theme="dark"] .kb-view-card,
[data-theme="dark"] .passport-card,
[data-theme="dark"] .docs-panel,
[data-theme="dark"] .docs-preview-topbar,
[data-theme="dark"] .doc-preview-wrap,
[data-theme="dark"] .files-card,
[data-theme="dark"] .archive-card,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .admin-panel,
[data-theme="dark"] .risk-card,
[data-theme="dark"] .risk-matrix,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .comp-screen,
[data-theme="dark"] .comp-swot-card,
[data-theme="dark"] .comp-comment-card,
[data-theme="dark"] .gantt-v2-shell,
[data-theme="dark"] .gantt-v2-header,
[data-theme="dark"] .gantt-v2-sidebar,
[data-theme="dark"] .gantt-v2-grid,
[data-theme="dark"] .wbs-tree-canvas,
[data-theme="dark"] .cal-shell,
[data-theme="dark"] .cal-panel,
[data-theme="dark"] .cal-card {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: var(--shadow-raised);
}
[data-theme="dark"] .home-mockup {
    --m-card: var(--surface);
    --m-bg: var(--bg-subtle);
    --m-bg-2: var(--surface-2);
    --m-line: var(--border);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .cal-modal-input,
[data-theme="dark"] .passport-input,
[data-theme="dark"] .passport-textarea,
[data-theme="dark"] .task-drawer-status,
[data-theme="dark"] .task-drawer-urgency {
    background: var(--surface-sunk);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sunk);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-muted);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: rgba(190, 197, 209, 0.54);
    box-shadow: var(--shadow-sunk), 0 0 0 3px rgba(156, 161, 219, 0.16);
}

[data-theme="dark"] table,
[data-theme="dark"] .plan-table,
[data-theme="dark"] .data-table {
    background: var(--color-surface);
    color: var(--color-text);
}
[data-theme="dark"] th,
[data-theme="dark"] .plan-table th {
    background: var(--bg-subtle);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
[data-theme="dark"] td,
[data-theme="dark"] .plan-table td,
[data-theme="dark"] .task-row td {
    border-color: var(--hairline);
}
[data-theme="dark"] tr:hover td,
[data-theme="dark"] .task-row:hover td {
    background: rgba(226, 232, 244, 0.045);
}
[data-theme="dark"] .phase-row td,
[data-theme="dark"] .step-row td {
    background: var(--bg-subtle) !important;
    color: var(--color-text);
}
[data-theme="dark"] .task-row[data-status="done"] td {
    background: rgba(143, 179, 148, 0.08) !important;
}

[data-theme="dark"] .kb-board {
    background: transparent;
    border-color: var(--color-border);
}
[data-theme="dark"] .kb-col {
    background: rgba(226, 232, 244, 0.035);
    border-color: rgba(226, 232, 244, 0.09);
}
[data-theme="dark"] .kb-card {
    background: var(--color-surface, #1B1F2A);
    color: var(--color-text);
    border-color: rgba(226, 232, 244, 0.10);
    box-shadow: 0 1px 0 rgba(244, 247, 255, 0.04) inset,
                0 10px 28px -22px rgba(0, 0, 0, 0.80);
}
[data-theme="dark"] .kb-card:hover {
    border-color: rgba(226, 232, 244, 0.18);
    box-shadow: var(--shadow-elevated);
}
[data-theme="dark"] .kb-col-count,
[data-theme="dark"] .kb-card-tag,
[data-theme="dark"] .badge,
[data-theme="dark"] .status-pill {
    background: rgba(226, 232, 244, 0.08);
}

[data-theme="dark"] .gantt-v2-toggle-btn,
[data-theme="dark"] .cal-view-btn,
[data-theme="dark"] .admin-tab-btn,
[data-theme="dark"] .reports-tab-btn,
[data-theme="dark"] .btn-sm,
[data-theme="dark"] .messenger-toolbar button,
[data-theme="dark"] .tabs-settings-row,
[data-theme="dark"] .plan-inline-btn {
    background: var(--surface-2);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
[data-theme="dark"] .gantt-v2-toggle-btn:hover,
[data-theme="dark"] .gantt-v2-toggle-btn.active,
[data-theme="dark"] .cal-view-btn:hover,
[data-theme="dark"] .cal-view-btn.active,
[data-theme="dark"] .admin-tab-btn:hover,
[data-theme="dark"] .admin-tab-btn.is-active,
[data-theme="dark"] .reports-tab-btn:hover,
[data-theme="dark"] .reports-tab-btn.is-active,
[data-theme="dark"] .btn-sm:hover,
[data-theme="dark"] .tabs-settings-row:hover {
    background: var(--surface-hover);
    color: var(--color-text);
}

[data-theme="dark"] .messenger-layout,
[data-theme="dark"] .messenger-sidebar,
[data-theme="dark"] .messenger-conv,
[data-theme="dark"] .messenger,
[data-theme="dark"] .messenger-conv-header,
[data-theme="dark"] .messenger-input-wrap,
[data-theme="dark"] .messenger-messages,
[data-theme="dark"] .chat-panel,
[data-theme="dark"] .chat-list,
[data-theme="dark"] .chat-room,
[data-theme="dark"] .pc-room,
[data-theme="dark"] .pc-msg {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
[data-theme="dark"] .pc-msg.is-mine,
[data-theme="dark"] .chat-bubble.is-mine {
    background: rgba(156, 161, 219, 0.18);
    color: var(--color-text-strong);
}
[data-theme="dark"] .chat-msg.theirs .chat-msg-bubble,
[data-theme="dark"] .chat-bubble:not(.is-mine) {
    background: var(--surface-2);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .passport-validation-item.is-err,
[data-theme="dark"] .fio-chip--unknown,
[data-theme="dark"] .btn-delete-file:hover {
    background: rgba(207, 133, 129, 0.13);
    color: var(--color-danger-text);
    border-color: rgba(207, 133, 129, 0.28);
}
[data-theme="dark"] .passport-validation-item.is-warn,
[data-theme="dark"] .p-high {
    background: rgba(190, 197, 209, 0.13) !important;
    color: var(--color-warning-fg, #D8DEE9) !important;
    border-color: rgba(190, 197, 209, 0.28);
}

/* ── Per-tab dark coverage: каждая основная вкладка получает тёмную основу ── */
[data-theme="dark"] .main-area > .tab-content {
    background: transparent;
    color: var(--color-text);
    box-shadow: none;
}
[data-theme="dark"] .main-area > .tab-content.active {
    background: transparent;
}
[data-theme="dark"] .main-area > .tab-content :where(
    .section,
    .toolbar,
    .panel,
    .card,
    .tile,
    .item,
    .list,
    .empty-state,
    .empty-placeholder,
    .filter-group,
    .dropdown,
    .popover,
    .menu,
    .sheet,
    .drawer,
    .sidebar,
    .preview,
    .timeline,
    .log,
    .editor,
    .canvas,
    .workspace
) {
    border-color: var(--color-border);
}
[data-theme="dark"] .main-area > .tab-content :where(
    .text-secondary-sm,
    .muted,
    .subtitle,
    .meta,
    .hint,
    .description,
    small
) {
    color: var(--color-text-muted);
}
[data-theme="dark"] .main-area > .tab-content :where(
    button:not(.side-link):not(.roadmap-subtab):not(.btn-logout),
    .btn,
    .button,
    .action-btn,
    .icon-btn
) {
    border-color: var(--color-border);
}

/* Home */
[data-theme="dark"] #tab-home :where(
    .home-card,
    .home-section,
    .home-widget,
    .hc-card,
    .hc-panel,
    .hc-task-item,
    .hc-kpi,
    .tg-list,
    .tg-list-header,
    .fav-cards-section,
    .fav-card
) {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
[data-theme="dark"] #tab-home :where(.tab, .mobile-chip) {
    background: transparent;
    color: var(--color-text-secondary);
}
[data-theme="dark"] #tab-home :where(.tab.is-active, .tab.active, .tab:hover) {
    background: var(--surface-hover);
    color: var(--color-text);
}

/* Roadmap / Plan */
[data-theme="dark"] #tab-plan :where(
    .roadmap-shell,
    .roadmap-table-wrap,
    .plan-toolbar,
    .plan-controls,
    .phase-row,
    .step-row,
    .task-row,
    .task-name-cell,
    .phase-progress-bar,
    .step-progress-bar
) {
    border-color: var(--color-border);
}
[data-theme="dark"] #tab-plan .roadmap-subtabs,
[data-theme="dark"] #tab-gantt .roadmap-subtabs,
[data-theme="dark"] #tab-kanban .roadmap-subtabs,
[data-theme="dark"] #tab-schema .roadmap-subtabs,
[data-theme="dark"] #tab-passport .roadmap-subtabs,
[data-theme="dark"] #tab-competitors .roadmap-subtabs {
    background: transparent;
    border-color: var(--color-border);
}
[data-theme="dark"] .roadmap-subtab {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
}
[data-theme="dark"] .roadmap-subtab:hover {
    background: rgba(226, 232, 244, 0.05);
    color: var(--color-text-secondary);
}
[data-theme="dark"] .roadmap-subtab.active {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    border-bottom-color: var(--color-surface);
}

/* Gantt / WBS / Diagram / Mindmap / Miro */
[data-theme="dark"] #tab-gantt :where(.gantt-v2-table, .gantt-v2-row, .gantt-v2-cell, .gantt-v2-timeline),
[data-theme="dark"] #tab-schema :where(.wbs-wrap, .wbs-node, .wbs-row, .wbs-toolbar),
[data-theme="dark"] #tab-diagram :where(.drawio-wrap, .diagram-wrap, .diagram-toolbar),
[data-theme="dark"] #tab-mindmap :where(.mindmap-wrap, .mindmap-toolbar),
[data-theme="dark"] #tab-miro :where(.miro-wrap, .miro-toolbar) {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
[data-theme="dark"] #tab-diagram iframe,
[data-theme="dark"] #tab-mindmap iframe,
[data-theme="dark"] #tab-miro iframe {
    background: var(--bg-subtle);
    border-color: var(--color-border);
}

/* Calendar */
[data-theme="dark"] #tab-calendar :where(
    .cal-root,
    .cal-main,
    .cal-sidebar,
    .cal-day,
    .cal-week,
    .cal-month,
    .cal-year,
    .cal-event,
    .cal-list,
    .cal-modal
) {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
[data-theme="dark"] #tab-calendar :where(.cal-day:hover, .cal-event:hover) {
    background: var(--surface-hover);
}

/* Risks / Summary */
[data-theme="dark"] #tab-risks :where(
    .risk-register,
    .risk-toolbar,
    .risk-row,
    .risk-panel,
    .risk-cell,
    .risk-matrix-cell
),
[data-theme="dark"] #tab-summary :where(
    .summary-root,
    .summary-panel,
    .summary-grid,
    .summary-kpi,
    .summary-list,
    .summary-row
) {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* Files / Docs / Archive docs */
[data-theme="dark"] #tab-files :where(
    .files-v2-grid,
    .files-v2-row,
    .files-v2-empty,
    .files-v2-toolbar
),
[data-theme="dark"] #tab-docs :where(
    .docs-root,
    .docs-sidebar,
    .docs-main,
    .docs-list,
    .docs-item,
    .docs-form,
    .docs-preview-panel,
    .doc-preview-scroll
),
[data-theme="dark"] #tab-docs-archive :where(
    .darch-root,
    .darch-list,
    .darch-item,
    .darch-doc-preview,
    .darch-panel
) {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
[data-theme="dark"] #tab-docs .doc-preview-wrap,
[data-theme="dark"] #tab-docs-archive .darch-doc-preview {
    background: #f7f3ec;
    color: #2f2a24;
}

/* Reports / History / Archive */
[data-theme="dark"] #tab-reports :where(
    .reports-layout,
    .reports-sidebar,
    .reports-main,
    .reports-tab-btn,
    .daily-list,
    .daily-item,
    .report-preview
),
[data-theme="dark"] #tab-history :where(
    .hist-v2-wrap,
    .hist-v2-item,
    .hist-v2-group,
    .hist-v2-card
),
[data-theme="dark"] #tab-archive :where(
    .archive-wrap,
    .archive-toolbar,
    .archive-row,
    .archive-table,
    .archive-card
) {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* Chat */
[data-theme="dark"] #tab-chat :where(
    .chat-shell,
    .chat-sidebar,
    .chat-main,
    .chat-room-item,
    .chat-message,
    .chat-input,
    .messenger-room,
    .messenger-message,
    .messenger-compose
) {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* OTK / Admin / Profile */
[data-theme="dark"] #tab-otk :where(
    .otk-root,
    .otk-panel,
    .otk-card,
    .otk-modal,
    .otk-row
),
[data-theme="dark"] #tab-admin :where(
    .admin-root,
    .admin-panel,
    .admin-card,
    .admin-table,
    .admin-row
),
[data-theme="dark"] #tab-profile :where(
    .profile-page,
    .profile-avatar-section,
    .profile-field,
    .profile-card
) {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* Passport module variables */
[data-theme="dark"] .passport-root {
    --p-ink: var(--color-text);
    --p-ink-2: var(--color-text-strong);
    --p-muted: var(--color-text-secondary);
    --p-muted-2: var(--color-text-muted);
    --p-line: var(--color-border);
    --p-line-2: var(--hairline);
    --p-bg: var(--color-bg-app);
    --p-bg-2: var(--bg-subtle);
    --p-white: var(--color-surface);
    --p-fn: var(--color-success);
    --p-tech: var(--color-primary);
    --p-vis: var(--color-danger);
    --p-scn: var(--color-warning);
    --p-fn-bg: var(--color-success-soft);
    --p-tech-bg: var(--color-primary-25);
    --p-vis-bg: var(--color-danger-soft);
    --p-scn-bg: var(--color-warning-soft);
    --p-warn: var(--color-warning);
    --p-warn-bg: var(--color-warning-soft);
    --p-warn-line: rgba(190, 197, 209, 0.28);
    --p-danger: var(--color-danger);
    --p-success: var(--color-success);
    --p-card: var(--color-surface);
    --p-accent: var(--color-accent);
    --p-accent-strong: var(--color-accent-strong);
    --p-accent-tint: var(--accent-soft);
    --p-mono: var(--font-mono);
    background: transparent;
    color: var(--p-ink);
}
[data-theme="dark"] .passport-root :where(
    .passport-empty,
    .passport-card,
    .passport-panel,
    .passport-step-card,
    .passport-rail,
    .passport-version-card,
    .passport-tree-preview-wrap,
    .passport-tree-preview
) {
    background: var(--p-white);
    color: var(--p-ink);
    border-color: var(--p-line);
}

/* Competitors module variables */
[data-theme="dark"] #tab-competitors .comp-root {
    --c-ink: var(--color-text);
    --c-ink-2: var(--color-text-strong);
    --c-muted: var(--color-text-secondary);
    --c-muted-2: var(--color-text-muted);
    --c-line: var(--color-border);
    --c-line-2: var(--hairline);
    --c-bg: var(--color-bg-app);
    --c-white: var(--color-surface);
    --c-accent: var(--color-accent);
    --c-accent-light: var(--accent-soft);
    --c-bg-2: var(--color-bg-subtle);
    --c-us: var(--color-accent);
    --c-us-bg: var(--accent-soft);
    --c-good: var(--color-success);
    --c-good-bg: var(--color-success-soft);
    --c-bad: var(--color-danger);
    --c-bad-bg: var(--color-danger-soft);
    --c-neut: var(--color-warning);
    --c-neut-bg: var(--color-warning-soft);
    --c-info: var(--color-info);
    --c-info-bg: var(--color-info-soft);
    --c-shadow-sm: var(--shadow-raised);
    background: transparent;
    color: var(--c-ink);
}
[data-theme="dark"] #tab-competitors :where(
    .comp-subtabs,
    .comp-rail-btn,
    .comp-rail-version,
    .comp-card,
    .comp-panel,
    .comp-table,
    .comp-row,
    .comp-input,
    .comp-select,
    .comp-textarea
) {
    background: var(--c-white);
    color: var(--c-ink);
    border-color: var(--c-line);
}

/* Legacy module exact-class cleanup */
[data-theme="dark"] .admin-tab-btn:hover:not(.is-active),
[data-theme="dark"] .admin-tab-btn.is-active,
[data-theme="dark"] .admin-btn-secondary,
[data-theme="dark"] .admin-input,
[data-theme="dark"] .admin-form-card,
[data-theme="dark"] .task-drawer-card,
[data-theme="dark"] .task-drawer-block,
[data-theme="dark"] .task-drawer-comment,
[data-theme="dark"] .task-drawer-file,
[data-theme="dark"] .risks-v2-btn-sort,
[data-theme="dark"] .risks-v2-card,
[data-theme="dark"] .risks-v2-table,
[data-theme="dark"] .risk-v2-status-sel,
[data-theme="dark"] .risk-v2-prob-sel,
[data-theme="dark"] .risk-v2-editable-cell input,
[data-theme="dark"] .risk-v2-del-btn,
[data-theme="dark"] .reports-tab-btn.active,
[data-theme="dark"] .btn-sm,
[data-theme="dark"] .trip-input,
[data-theme="dark"] .trip-textarea,
[data-theme="dark"] .gantt-v2-toggle-btn.active,
[data-theme="dark"] .gantt-v2-toggle-btn:hover:not(.active),
[data-theme="dark"] .cal-view-btn:hover:not(.active),
[data-theme="dark"] .cal-year-mini-day,
[data-theme="dark"] .wbs-node,
[data-theme="dark"] .tabs-settings-row:hover,
[data-theme="dark"] .tabs-settings-row .pill,
[data-theme="dark"] .dept-dropdown,
[data-theme="dark"] .dept-menu,
[data-theme="dark"] .dept-option {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .risks-v2-table thead th,
[data-theme="dark"] .reports-tabs,
[data-theme="dark"] .reports-tab-panel {
    background: var(--bg-subtle) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .risks-v2-table tbody tr:hover td,
[data-theme="dark"] .daily-item:hover,
[data-theme="dark"] .files-v2-row:hover,
[data-theme="dark"] .dept-option:hover {
    background: var(--surface-hover) !important;
}
[data-theme="dark"] .risk-v2-del-btn:hover,
[data-theme="dark"] .risk-v2-status-active,
[data-theme="dark"] .risk-v2-priority-sel.p-critical {
    background: var(--color-danger-soft) !important;
    color: var(--color-danger-text) !important;
}
[data-theme="dark"] .risk-v2-status-monitor,
[data-theme="dark"] .risk-v2-priority-sel.p-high {
    background: var(--color-warning-soft) !important;
    color: var(--color-warning-fg, #D8DEE9) !important;
}
[data-theme="dark"] .risk-v2-status-accepted,
[data-theme="dark"] .risk-v2-priority-sel.p-med {
    background: var(--color-primary-25) !important;
    color: var(--color-primary-strong) !important;
}
[data-theme="dark"] .risk-v2-status-closed,
[data-theme="dark"] .risk-v2-priority-sel.p-low {
    background: var(--color-success-soft) !important;
    color: var(--color-success) !important;
}
[data-theme="dark"] .reports-tab-btn.active {
    border-bottom-color: var(--color-surface) !important;
}
[data-theme="dark"] .btn-sm.btn-primary,
[data-theme="dark"] .admin-btn-primary,
[data-theme="dark"] .admin-btn-save {
    background: var(--color-primary) !important;
    color: var(--accent-on) !important;
    border-color: var(--color-primary) !important;
}

/* Legacy module exact-class cleanup: remaining tab surfaces */
[data-theme="dark"] .sumv2-card,
[data-theme="dark"] .sumv2-stat-card,
[data-theme="dark"] .sumv2-phase-tile,
[data-theme="dark"] .docs-panel,
[data-theme="dark"] .docs-preview-topbar,
[data-theme="dark"] .doc-field-input,
[data-theme="dark"] .doc-auto-words,
[data-theme="dark"] .doc-editable-table th,
[data-theme="dark"] .gantt-v2-card,
[data-theme="dark"] .gantt-v2-header,
[data-theme="dark"] .gantt-v2-name-head,
[data-theme="dark"] .gantt-v2-scale-btn.is-active,
[data-theme="dark"] .gantt-v2-bar-dep-handle,
[data-theme="dark"] #archiveTable td:nth-child(5),
[data-theme="dark"] .messenger,
[data-theme="dark"] .messenger-conv-header,
[data-theme="dark"] .messenger-input-wrap,
[data-theme="dark"] .messenger-toolbar button,
[data-theme="dark"] .chat-scroll-down {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .docs-preview-panel {
    background: var(--color-bg-app) !important;
}
[data-theme="dark"] .doc-preview-scroll {
    background: var(--bg-subtle) !important;
}
[data-theme="dark"] .doc-preview-wrap {
    background: #f7f3ec !important;
    color: #17120f !important;
}
[data-theme="dark"] .gantt-v2-top-row,
[data-theme="dark"] .gantt-v2-month-cell.is-weekend,
[data-theme="dark"] .messenger-messages,
[data-theme="dark"] .chat-attach-preview {
    background: var(--bg-subtle) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .messenger-sidebar,
[data-theme="dark"] .messenger-toolbar,
[data-theme="dark"] .messenger-room-item {
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .messenger-room-item:hover,
[data-theme="dark"] .messenger-room-item.active,
[data-theme="dark"] .messenger-toolbar button:hover,
[data-theme="dark"] .sumv2-phase-row:hover {
    background: var(--surface-hover) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .chat-msg.theirs .chat-msg-bubble {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    box-shadow: var(--shadow-xs);
}
[data-theme="dark"] .chat-msg.mine .chat-msg-bubble {
    background: var(--color-primary) !important;
    color: var(--accent-on) !important;
}
[data-theme="dark"] .chat-date-sep,
[data-theme="dark"] .chat-attach-item-icon {
    background: var(--color-bg-chip) !important;
    color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .chat-attach-item-name,
[data-theme="dark"] .chat-attach-options,
[data-theme="dark"] .messenger-room-preview,
[data-theme="dark"] .messenger-conv-subtitle,
[data-theme="dark"] .messenger-room-time,
[data-theme="dark"] .messenger-placeholder {
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .doc-table-input:focus,
[data-theme="dark"] .doc-add-row:hover,
[data-theme="dark"] .doc-tpl-btn.active {
    background: var(--color-primary-25) !important;
    color: var(--color-primary-strong) !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .doc-del-row:hover,
[data-theme="dark"] .fio-chip--unknown,
[data-theme="dark"] .btn-delete-file:hover {
    background: var(--color-danger-soft) !important;
    color: var(--color-danger-text) !important;
    border-color: rgba(181, 110, 110, 0.45) !important;
}
[data-theme="dark"] .status-progress,
[data-theme="dark"] .doc-fleet-select,
[data-theme="dark"] .plan-inline-btn--fav.is-active:hover,
[data-theme="dark"] .fav-card-unstar:hover,
[data-theme="dark"] .home-mockup .home-fav-unstar:hover {
    background: var(--color-warning-soft) !important;
    color: var(--color-primary-strong) !important;
    border-color: rgba(190, 197, 209, 0.34) !important;
}

/* Home dashboard dark polish */
[data-theme="dark"] #tab-home .home-mockup {
    --m-ink: #F1F4FB;
    --m-muted: #CBD2DD;
    --m-muted-2: #9CA3AF;
    --m-line: rgba(226, 232, 244, 0.10);
    --m-line-2: rgba(226, 232, 244, 0.07);
    --m-bg: #171615;
    --m-bg-2: #2A3142;
    --m-card: #1B1F2A;
    --m-accent: #BEC5D1;
    --m-accent-soft: rgba(156, 161, 219, 0.16);
    --m-danger: #D46A6A;
    --m-danger-bg: rgba(181, 110, 110, 0.16);
    --m-warn: #BEC5D1;
    --m-warn-bg: rgba(196, 154, 99, 0.16);
    --m-success: #9fc2a6;
    --m-success-bg: rgba(109, 139, 116, 0.18);
    --m-info-bg: rgba(124, 146, 166, 0.16);
    --m-shadow-sm: 0 14px 34px -28px rgba(0, 0, 0, 0.92);
}
[data-theme="dark"] #tab-home .home-mockup .center-col {
    background: #161A24;
    border-color: rgba(226, 232, 244, 0.10);
    box-shadow: 0 1px 0 rgba(244, 247, 255, 0.035) inset,
                0 18px 40px -34px rgba(0, 0, 0, 0.95);
}
[data-theme="dark"] #tab-home .home-mockup .tabs {
    background: #1b1917;
    border-color: rgba(226, 232, 244, 0.08);
    gap: 4px;
    padding: 8px 12px;
}
[data-theme="dark"] #tab-home .home-mockup .tab {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    border-bottom-color: transparent;
    margin-bottom: 0;
    color: rgba(203, 210, 221, 0.78);
    transition: background-color 170ms var(--ease), color 170ms var(--ease), border-color 170ms var(--ease);
}
[data-theme="dark"] #tab-home .home-mockup .tab:hover {
    background: rgba(226, 232, 244, 0.06);
    color: #F1F4FB;
}
[data-theme="dark"] #tab-home .home-mockup .tab.is-active {
    background: rgba(156, 161, 219, 0.16);
    border-color: rgba(156, 161, 219, 0.24);
    color: #fff8ef;
    box-shadow: inset 0 1px 0 rgba(244, 247, 255, 0.04);
}
[data-theme="dark"] #tab-home .home-mockup .tab-badge {
    background: rgba(226, 232, 244, 0.08);
    color: rgba(203, 210, 221, 0.86);
}
[data-theme="dark"] #tab-home .home-mockup .tab.is-active .tab-badge {
    background: rgba(226, 232, 244, 0.92);
    color: #1f1b18;
}
[data-theme="dark"] #tab-home .home-mockup .tab-content {
    padding: 6px 0 8px !important;
    background: #161A24;
}
[data-theme="dark"] #tab-home .home-mockup .feed-item {
    grid-template-columns: 70px 30px minmax(0, 1fr) !important;
    padding: 10px 14px !important;
    border-top-color: rgba(226, 232, 244, 0.07) !important;
    background: transparent !important;
    transition: background-color 170ms var(--ease), box-shadow 170ms var(--ease) !important;
}
[data-theme="dark"] #tab-home .home-mockup .feed-item:hover {
    background: #2A3142 !important;
    box-shadow: inset 3px 0 0 rgba(156, 161, 219, 0.56) !important;
}
[data-theme="dark"] #tab-home .home-mockup .feed-time {
    color: rgba(203, 210, 221, 0.68) !important;
}
[data-theme="dark"] #tab-home .home-mockup .feed-time.is-now {
    color: #D46A6A !important;
}
[data-theme="dark"] #tab-home .home-mockup .feed-ico {
    background: rgba(156, 161, 219, 0.10) !important;
    color: #9CA1DB !important;
    border: 1px solid rgba(156, 161, 219, 0.13);
}
[data-theme="dark"] #tab-home .home-mockup .feed-item:hover .feed-ico {
    background: rgba(156, 161, 219, 0.18) !important;
    border-color: rgba(156, 161, 219, 0.26);
    color: #BEC5D1 !important;
}
[data-theme="dark"] #tab-home .home-mockup .feed-ico.is-overdue {
    background: rgba(181, 110, 110, 0.18) !important;
    color: #D46A6A !important;
    border-color: rgba(181, 110, 110, 0.22);
}
[data-theme="dark"] #tab-home .home-mockup .feed-ico.is-done {
    background: rgba(109, 139, 116, 0.18) !important;
    color: #9fc2a6 !important;
    border-color: rgba(109, 139, 116, 0.24);
}
[data-theme="dark"] #tab-home .home-mockup .feed-ico.is-event {
    background: rgba(196, 154, 99, 0.17) !important;
    color: #BEC5D1 !important;
    border-color: rgba(196, 154, 99, 0.24);
}
[data-theme="dark"] #tab-home .home-mockup .feed-body,
[data-theme="dark"] #tab-home .home-mockup .feed-body b {
    color: #F1F4FB !important;
}
[data-theme="dark"] #tab-home .home-mockup .feed-meta {
    color: rgba(203, 210, 221, 0.62) !important;
}
[data-theme="dark"] #tab-home .home-mockup .hc-empty-state {
    color: rgba(203, 210, 221, 0.62) !important;
}

/* Gantt dark polish */
[data-theme="dark"] #tab-gantt .gantt-v2-source-bar {
    background: #171615;
    border-bottom: 1px solid rgba(226, 232, 244, 0.08);
}
[data-theme="dark"] #tab-gantt .gantt-v2-toggle,
[data-theme="dark"] #tab-gantt .gantt-v2-scale {
    background: rgba(226, 232, 244, 0.045);
    border-color: rgba(226, 232, 244, 0.10);
}
[data-theme="dark"] #tab-gantt .gantt-v2-toggle-btn,
[data-theme="dark"] #tab-gantt .gantt-v2-scale-btn {
    color: rgba(203, 210, 221, 0.78);
}
[data-theme="dark"] #tab-gantt .gantt-v2-toggle-btn:hover:not(.active),
[data-theme="dark"] #tab-gantt .gantt-v2-scale-btn:hover:not(.is-active) {
    background: rgba(226, 232, 244, 0.07);
    color: var(--color-text);
}
[data-theme="dark"] #tab-gantt .gantt-v2-toggle-btn.active,
[data-theme="dark"] #tab-gantt .gantt-v2-scale-btn.is-active {
    background: rgba(156, 161, 219, 0.16) !important;
    color: #F1F4FB !important;
    box-shadow: inset 0 0 0 1px rgba(156, 161, 219, 0.18);
}
[data-theme="dark"] #tab-gantt .gantt-v2-card,
[data-theme="dark"] #tab-gantt .gantt-v2-rows {
    background: #171715;
}
[data-theme="dark"] #tab-gantt .gantt-v2-header,
[data-theme="dark"] #tab-gantt .gantt-v2-name-head,
[data-theme="dark"] #tab-gantt .gantt-v2-top-row,
[data-theme="dark"] #tab-gantt .gantt-v2-cells-row {
    background: #1b1917 !important;
    border-color: rgba(226, 232, 244, 0.08) !important;
}
[data-theme="dark"] #tab-gantt .gantt-v2-top-cell,
[data-theme="dark"] #tab-gantt .gantt-v2-month-cell {
    border-color: rgba(226, 232, 244, 0.055) !important;
    color: rgba(203, 210, 221, 0.78) !important;
}
[data-theme="dark"] #tab-gantt .gantt-v2-top-row {
    background: #1a1816 !important;
}
[data-theme="dark"] #tab-gantt .gantt-v2-cells-row,
[data-theme="dark"] #tab-gantt .gantt-v2-month-cell {
    background: #202428 !important;
}
[data-theme="dark"] #tab-gantt .gantt-v2-month-cell.is-weekend {
    background: #24211e !important;
    color: rgba(203, 210, 221, 0.52) !important;
}
[data-theme="dark"] #tab-gantt .gantt-v2-month-cell.is-today {
    background: rgba(181, 110, 110, 0.18) !important;
    color: #F1F4FB !important;
}
[data-theme="dark"] #tab-gantt .gantt-v2-phase-row,
[data-theme="dark"] #tab-gantt .gantt-v2-phase-name {
    background: #232838 !important;
    border-color: rgba(226, 232, 244, 0.08) !important;
}
[data-theme="dark"] #tab-gantt .gantt-v2-phase-name {
    color: #F1F4FB;
}
[data-theme="dark"] #tab-gantt .gantt-v2-phase-count {
    background: rgba(226, 232, 244, 0.055);
    border-color: rgba(226, 232, 244, 0.12);
    color: rgba(203, 210, 221, 0.86);
}
[data-theme="dark"] #tab-gantt .gantt-v2-row {
    background: #171715 !important;
    border-color: rgba(226, 232, 244, 0.075) !important;
    transition: background-color 170ms var(--ease), box-shadow 170ms var(--ease);
}
[data-theme="dark"] #tab-gantt .gantt-v2-task-name {
    background: #171715 !important;
    border-color: rgba(226, 232, 244, 0.085) !important;
    color: #F1F4FB;
    transition: background-color 170ms var(--ease), color 170ms var(--ease), box-shadow 170ms var(--ease);
}
[data-theme="dark"] #tab-gantt .gantt-v2-row:hover,
[data-theme="dark"] #tab-gantt .gantt-v2-row:hover .gantt-v2-task-name,
[data-theme="dark"] #tab-gantt .gantt-v2-row:focus-within,
[data-theme="dark"] #tab-gantt .gantt-v2-row:focus-within .gantt-v2-task-name {
    background: #2A3142 !important;
}
[data-theme="dark"] #tab-gantt .gantt-v2-row:hover .gantt-v2-task-name,
[data-theme="dark"] #tab-gantt .gantt-v2-row:focus-within .gantt-v2-task-name {
    color: #fff8ef;
    box-shadow: inset 3px 0 0 rgba(156, 161, 219, 0.72);
}
[data-theme="dark"] #tab-gantt .gantt-v2-row.no-dates {
    opacity: 0.72;
}
[data-theme="dark"] #tab-gantt .gantt-v2-row.no-dates:hover {
    opacity: 1;
}
[data-theme="dark"] #tab-gantt .gantt-v2-no-date {
    background: rgba(226, 232, 244, 0.045) !important;
    border-color: rgba(226, 232, 244, 0.12) !important;
    color: rgba(203, 210, 221, 0.62) !important;
}
[data-theme="dark"] #tab-gantt .gantt-v2-grid-line,
[data-theme="dark"] #tab-gantt .gantt-v2-grid-line.is-major {
    background: rgba(226, 232, 244, 0.055) !important;
}
[data-theme="dark"] #tab-gantt .gantt-v2-weekend-bg {
    background: rgba(226, 232, 244, 0.035) !important;
    opacity: 1;
}
/* Тёмная тема: тени/градиент на cell-fill баре убраны (плоский стиль PRD);
   подсветку при наведении оставляем лёгким filter без теней. */
[data-theme="dark"] #tab-gantt .gantt-v2-row:hover .gantt-v2-bar,
[data-theme="dark"] #tab-gantt .gantt-v2-bar:hover {
    filter: brightness(1.10);
}
[data-theme="dark"] #tab-gantt .gantt-v2-avatar,
[data-theme="dark"] #tab-gantt .gantt-v2-bar-dep-handle {
    background: rgba(226, 232, 244, 0.92) !important;
    border-color: rgba(31, 27, 24, 0.22) !important;
    color: #1f1b18 !important;
}
[data-theme="dark"] #tab-gantt .gantt-v2-today-line {
    background: #d47d7d !important;
    box-shadow: 0 0 0 1px rgba(212, 125, 125, 0.22);
}
[data-theme="dark"] #tab-gantt .gantt-v2-today-line::before {
    color: #f0aaa6 !important;
}

/* Roadmap table: inline controls must stay quiet in dark mode */
[data-theme="dark"] #tab-plan .plan-table {
    background: #161A24;
    border-color: rgba(226, 232, 244, 0.10);
    box-shadow: none;
}
[data-theme="dark"] #tab-plan .plan-table th {
    background: #232838;
    color: rgba(203, 210, 221, 0.82);
    border-color: rgba(226, 232, 244, 0.08);
}
[data-theme="dark"] #tab-plan .plan-table td,
[data-theme="dark"] #tab-plan .task-row td {
    background: #161A24;
    color: var(--color-text);
    border-color: rgba(226, 232, 244, 0.075);
}
[data-theme="dark"] #tab-plan .phase-row td {
    background: #20242F !important;
    color: var(--color-text);
    border-color: rgba(226, 232, 244, 0.08);
}
[data-theme="dark"] #tab-plan .step-row td {
    background: #1B1F2A !important;
    color: var(--color-text);
    border-color: rgba(226, 232, 244, 0.075);
}
[data-theme="dark"] #tab-plan .task-row:hover td,
[data-theme="dark"] #tab-plan .step-row:hover td,
[data-theme="dark"] #tab-plan .phase-row:hover td {
    background: #2A3142 !important;
}
[data-theme="dark"] #tab-plan .task-row[data-status="done"] td {
    background: rgba(109, 139, 116, 0.075) !important;
}
[data-theme="dark"] #tab-plan .task-row[data-status="done"]:hover td {
    background: rgba(109, 139, 116, 0.115) !important;
}
[data-theme="dark"] #tab-plan .task-row[data-status="done"] .task-name-cell {
    box-shadow: inset 3px 0 0 rgba(109, 139, 116, 0.82);
}
[data-theme="dark"] #tab-plan .task-row[data-status="done"] .task-name-text {
    color: #86b891 !important;
}
[data-theme="dark"] #tab-plan .task-row[data-status="done"] .status-pill.is-done {
    background: rgba(109, 139, 116, 0.18) !important;
    color: #a8d3b1 !important;
}
[data-theme="dark"] #tab-plan .task-date-input,
[data-theme="dark"] #tab-plan .step-date-input,
[data-theme="dark"] #tab-plan .task-name-cell input,
[data-theme="dark"] #tab-plan .task-owner-cell input,
[data-theme="dark"] #tab-plan .task-row td:nth-child(4) input[data-fio-picker],
[data-theme="dark"] #tab-plan .task-note-input,
[data-theme="dark"] #tab-plan .task-note-textarea,
[data-theme="dark"] #tab-plan .task-note-cell textarea {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--color-text-secondary) !important;
    box-shadow: none !important;
}
[data-theme="dark"] #tab-plan .step-dates {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
[data-theme="dark"] #tab-plan .task-date-input::placeholder,
[data-theme="dark"] #tab-plan .step-date-input::placeholder,
[data-theme="dark"] #tab-plan .task-note-input::placeholder,
[data-theme="dark"] #tab-plan .task-note-cell textarea::placeholder {
    color: rgba(203, 210, 221, 0.45) !important;
}
[data-theme="dark"] #tab-plan .task-date-input:hover,
[data-theme="dark"] #tab-plan .step-date-input:hover,
[data-theme="dark"] #tab-plan .task-name-cell input:hover,
[data-theme="dark"] #tab-plan .task-owner-cell input:hover,
[data-theme="dark"] #tab-plan .task-row td:nth-child(4) input[data-fio-picker]:hover,
[data-theme="dark"] #tab-plan .task-note-input:hover,
[data-theme="dark"] #tab-plan .task-note-textarea:hover,
[data-theme="dark"] #tab-plan .task-note-cell textarea:hover {
    background: rgba(226, 232, 244, 0.055) !important;
    border-color: rgba(226, 232, 244, 0.10) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] #tab-plan .task-date-input:focus,
[data-theme="dark"] #tab-plan .step-date-input:focus,
[data-theme="dark"] #tab-plan .task-name-cell input:focus,
[data-theme="dark"] #tab-plan .task-owner-cell input:focus,
[data-theme="dark"] #tab-plan .task-row td:nth-child(4) input[data-fio-picker]:focus,
[data-theme="dark"] #tab-plan .task-note-input:focus,
[data-theme="dark"] #tab-plan .task-note-textarea:focus,
[data-theme="dark"] #tab-plan .task-note-cell textarea:focus {
    background: rgba(226, 232, 244, 0.075) !important;
    border-color: rgba(156, 161, 219, 0.46) !important;
    color: var(--color-text) !important;
    box-shadow: 0 0 0 3px rgba(156, 161, 219, 0.13) !important;
    outline: none !important;
}
[data-theme="dark"] #tab-plan .task-date-input::-webkit-calendar-picker-indicator {
    filter: invert(0.82) sepia(0.18) saturate(0.65) hue-rotate(345deg);
    opacity: 0.72;
}
[data-theme="dark"] #tab-plan .task-dates-sep,
[data-theme="dark"] #tab-plan .step-dates-sep,
[data-theme="dark"] #tab-plan .phase-row .toggle-icon,
[data-theme="dark"] #tab-plan .phase-row .plan-drag-handle,
[data-theme="dark"] #tab-plan .step-row .plan-drag-handle {
    color: rgba(203, 210, 221, 0.52) !important;
}
[data-theme="dark"] #tab-plan .task-row .task-name-cell::before {
    background: #161A24;
    border-color: rgba(203, 210, 221, 0.34);
}
[data-theme="dark"] #tab-plan .task-row[data-status="done"] .task-name-cell::before {
    background: var(--color-success);
    border-color: var(--color-success);
}
[data-theme="dark"] #tab-plan .phase-row .phase-progress-bar,
[data-theme="dark"] #tab-plan .step-row .step-progress-bar {
    background: rgba(226, 232, 244, 0.08);
}
[data-theme="dark"] #tab-plan .btn-inline-add,
[data-theme="dark"] #tab-plan .btn-add-phase,
[data-theme="dark"] #tab-plan .btn-toolbar-add,
[data-theme="dark"] #tab-plan .btn-del-phase,
[data-theme="dark"] #tab-plan .btn-del-step,
[data-theme="dark"] #tab-plan .btn-delete-task,
[data-theme="dark"] #tab-plan .btn-attach,
[data-theme="dark"] #tab-plan .btn-comment,
[data-theme="dark"] #tab-plan .btn-step-attach,
[data-theme="dark"] #tab-plan .btn-step-comment,
[data-theme="dark"] #tab-plan .note-btn {
    color: rgba(203, 210, 221, 0.56);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
[data-theme="dark"] #tab-plan .btn-toolbar-add {
    background: rgba(156, 161, 219, 0.16) !important;
    color: #F1F4FB !important;
    border: 1px solid rgba(156, 161, 219, 0.24) !important;
}
[data-theme="dark"] #tab-plan .btn-toolbar-add:hover {
    background: rgba(156, 161, 219, 0.24) !important;
    border-color: rgba(190, 197, 209, 0.34) !important;
}
[data-theme="dark"] #tab-plan .btn-inline-add:hover,
[data-theme="dark"] #tab-plan .btn-add-phase:hover,
[data-theme="dark"] #tab-plan .btn-attach:hover,
[data-theme="dark"] #tab-plan .btn-comment:hover,
[data-theme="dark"] #tab-plan .btn-step-attach:hover,
[data-theme="dark"] #tab-plan .btn-step-comment:hover,
[data-theme="dark"] #tab-plan .note-btn:hover {
    background: rgba(226, 232, 244, 0.08);
    color: var(--color-text);
    border-color: rgba(226, 232, 244, 0.10);
}

[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .cmdk-overlay,
[data-theme="dark"] .comments-panel-backdrop {
    background: rgba(17, 13, 10, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] ::selection {
    background: rgba(156, 161, 219, 0.28);
}
[data-theme="dark"] .roadmap-sheet ::-webkit-scrollbar-thumb,
[data-theme="dark"] .main-area ::-webkit-scrollbar-thumb {
    background: rgba(226, 232, 244, 0.18);
    border-color: var(--color-bg-app);
}

@media (prefers-reduced-motion: reduce) {
    html,
    body,
    .main-area,
    .tab-content,
    .roadmap-sheet,
    .kb-wrap,
    .messenger-root {
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════
   2026-05-30 · FIX раскладки сайдбара (batch 1)
   ────────────────────────────────────────────────────────────
   Баг: сайдбар раскрывался по hover до 232px и накладывался
   ПОВЕРХ контента (z-index:100), пряча левый ~170px страницы
   (см. «войну комментариев» в checklist_operational.css:2197+).
   Решение: постоянная читаемая ширина без hover-расширения;
   контент смещён ровно на ширину сайдбара → рассинхрона
   width↔padding больше нет, перекрытия исчезают по всем
   вкладкам (роадмап, Ганта, Канбан). Мобайл не трогаем —
   там сайдбар-drawer в mobile-nav.css (@media max-width:768px).
   ════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    .sidebar-nav,
    .sidebar-nav:hover {
        width: 232px;
        box-shadow: none;        /* убираем hover-тень раскрытия */
    }
    .main-area { padding-left: 232px; }

    /* Панель больше не сворачивается — метки видны всегда */
    .sidebar-nav .side-label,
    .sidebar-nav .sidebar-brand-label,
    .sidebar-nav .sidebar-section-title,
    .sidebar-nav .sidebar-secondary-toggle,
    .sidebar-nav .sidebar-profile-meta {
        opacity: 1 !important;
    }
}

/* «Дополнительно»: был белый текст (rgba(255,255,255,…)) на
   кремовом сайдбаре → невидим. Делаем читаемым. */
.sidebar-secondary-toggle { color: var(--color-text-secondary); }
.sidebar-secondary-toggle:hover { color: var(--text-primary); }

/* ════════════════════════════════════════════════════════════
   2026-05-30 · BATCH 3 — Apple quiet + Future Dusk
   Только визуал. Функционал/структура/тексты не тронуты.
   ════════════════════════════════════════════════════════════ */

/* ── 3a · Сайдбар: гарантируем видимость надписей на десктопе ── */
@media (min-width: 769px) {
    .sidebar-nav .side-label,
    .sidebar-nav .nav-core-label,
    .sidebar-nav .sidebar-brand-label,
    .sidebar-nav .nav-sub .side-label {
        opacity: 1 !important;
    }
    .sidebar-nav { overflow: visible; }   /* чтобы метки не обрезались */
}

/* ── 3b · Шапка: тёмно-фиолет → frosted-светлая (как fusion) ── */
.main-area > header {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    box-shadow: none;
    color: var(--color-text, #1d1d1f);
}
.main-area > header h1 { color: var(--color-text, #1d1d1f); font-weight: 600; }
.main-area > header > div:first-child span,
.main-area > header .text-secondary-sm { color: var(--text-muted, #7a7a7a); font-weight: 400; }
.main-area > header .page-help {
    color: var(--text-muted, #7a7a7a);
    border-color: var(--color-border, #e0e0e0);
    background: transparent;
}
.main-area > header #overall-progress { color: var(--accent) !important; }
.main-area > header #progressWrap .text-secondary-sm { color: var(--text-muted, #7a7a7a); }
.main-area > header .user-name { color: var(--color-text, #1d1d1f); }
.main-area > header .user-status { color: var(--text-muted, #7a7a7a); }
.main-area > header .user-avatar {
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--accent-soft);
}
.main-area > header .btn-logout {
    background: transparent; color: var(--accent);
    border: 1px solid var(--color-border, #e0e0e0);
}
.main-area > header .btn-logout:hover { background: var(--accent-soft); }
.main-area > header .notif-btn,
.main-area > header .notes-header-btn { color: var(--text-muted, #7a7a7a); background: transparent; }
.main-area > header .notif-btn:hover,
.main-area > header .notes-header-btn:hover { background: rgba(0,0,0,0.05); color: var(--color-text, #1d1d1f); }
.main-area > header .notif-btn-icon-img { filter: none; opacity: 0.6; }
.main-area > header .mobile-hamburger { color: var(--color-text, #1d1d1f); }

/* ── 3c · Канбан: Apple quiet (карточки без теней, хэйрлайн r18) ── */
.kb-board { border-radius: 18px; }
.kb-card {
    border-radius: 18px;
    padding: 16px;
    box-shadow: none !important;       /* Apple: без теней на карточках */
    border: 1px solid var(--color-border, #e0e0e0);
}
.kb-card:hover {
    box-shadow: none !important;
    transform: none;                   /* без сдвига при hover */
    border-color: #cfcfd4;
}
.kb-card.dragging {
    box-shadow: none !important;
    transform: rotate(1deg);
    border-color: var(--accent);
}
.kb-card.kb-card--roadmap { padding-left: 20px; }
.kb-col-title { font-size: 14px; font-weight: 600; }
.kb-card-title { font-size: 14px; font-weight: 600; }
.kb-col-count {
    background: transparent; border: none;
    color: var(--text-muted, #7a7a7a); font-weight: 400;
}
.kb-card-footer { border-top-color: var(--color-border, #e0e0e0); }
.kb-col-add {
    justify-content: center;
    border: 1px dashed var(--color-border, #e0e0e0);
    border-radius: 9999px;
    color: var(--text-muted, #7a7a7a);
}
.kb-col-add:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
}

/* ── 3d · Фон страницы и сайдбара на токенах темы (paper-bg/paper-fill),
   карточки остаются светлее для ритма. Значения легко подкрутить —
   всё в одном месте. (Исторически тут был «бумажный» беж — упразднён.) ── */
body,
.app-shell,
.main-area,
.tab-content,
.roadmap-sheet {
    background-color: var(--paper-bg);          /* фон страницы (токен темы) */
}
.sidebar-nav,
.sidebar-brand,
.sidebar-menu {
    background-color: var(--paper-fill) !important;  /* сайдбар — paper-fill */
}

/* ── 3e · Канбан как в Kaiten: не прижат к левому краю + воздух
   между колонками. Колонки шире и тянутся, gap крупнее, у доски
   и обёртки есть поля. ── */
.kb-wrap { padding: 12px 18px 16px; }
.kb-board {
    gap: 36px;                 /* увеличенное расстояние между колонками */
    padding: 4px 2px;
    background-color: transparent;   /* доска сливается с бумажным фоном */
    border: none;
    overflow-x: auto;          /* компактные узкие колонки; если не влезают — гор.скролл */
    justify-content: flex-start;
}
/* Узкие колонки фикс.ширины → канбан маленький/компактный, карточки квадратнее */
.kb-col {
    flex: 0 0 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}
.kb-cards { gap: 10px; }       /* воздух между карточками внутри колонки */

/* ── 3f · Главная → язык Apple: убрать градиенты (наше правило),
   успокоить аватары до одного дуск-тона, унифицировать прогресс-бары.
   Семантика статусов сохранена, но плоская и тихая. ── */

/* Аватары: один спокойный тон вместо радуги и градиентов */
.pc-room-avatar,
.announce-avatar,
.tg-head-avatar,
.tg-side-avatar {
    background-image: none !important;
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* Прогресс-бары: плоский цвет, без градиента. Норма — дуск,
   статусы — приглушённые семантические. */
.hc-roadmap-bar-fill,
.hc-bar-fill,
.hc-kpi-bar-fill,
.home-fav-fill,
.fav-card-progress-fill,
.prh-progress-bar-inner {
    background-image: none !important;
    background-color: var(--accent) !important;
}
/* Все бары — единый дуск-акцент; статус несут число и текст
   («просрочено» красным, «Готово» зелёным), а не сам бар. */

/* Прочие декоративные градиенты на Главной → плоско */
.notif-panel-head { background-image: none !important; background: var(--bg-page, #F4EEE3) !important; }
.tg-body { background-image: none !important; }

/* Активный фильтр чатов «Все» хардкодил ярко-синий (#3F8AE0) —
   второй акцент. Переводим на единый дуск. */
.tg-folder.is-active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}


/* ════════════════════════════════════════════════════════════
   2026-05-31 · prime_system FINALIZE — мягкая геометрия (дуск)
   Цвет/тема уже дуск+бумага. Здесь только радиусы: pill для
   кнопок/инпутов/чипов, 12px для карточек/листов/узлов.
   Структуру/поведение не трогаем.
   ════════════════════════════════════════════════════════════ */

/* pill: кнопки / чипы / поля / add-кнопки */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-sm, .btn-fit, .btn-expand,
.btn-add-task, .btn-add-phase, .btn-toolbar-add, .btn-confirm, .btn-cancel, .btn-save,
.chip, .kb-tag, .kb-card-tag, .kb-card-step, .kb-card-linked, .col-add, .kb-col-add,
.input, .search, input[type="text"], input[type="search"], input[type="email"] {
    border-radius: 999px !important;
}

/* 12px: карточки / листы / узлы / доски */
.card, .kb-card, .kb-board, .wnode, .flowcanvas, .roadmap-sheet,
.home-card, .sumv2-card, .risk-v2-card, .passport-card, .comp-card {
    border-radius: 12px !important;
}

/* ════════════════════════════════════════════════════════════
   2026-05-31 · FIX: navy-полоса роадмапа → бумага (была недокрашена)
   Шапка таблицы (.plan-table thead) держала тёмный --rm-navy +
   белый текст — самый заметный «старый» блок на экране.
   Переводим на фон страницы (paper-токены) + чернильные лейблы.
   ════════════════════════════════════════════════════════════ */
.plan-table thead,
.plan-table thead tr,
.plan-table th {
    background: var(--surface-2, #EDE7DA) !important;
}
.plan-table th {
    color: var(--ink-2, #5C564E) !important;
    border-bottom: 1px solid var(--color-border, #E3E7EE) !important;
}
.plan-table th .th-filter-btn { color: var(--muted, #8A8276) !important; }
.plan-table th .th-filter-btn:hover,
.plan-table th .th-filter-btn.is-active {
    background: rgba(127,116,96,0.12) !important;
    color: var(--ink, #1D1D1F) !important;
}

/* Gantt header → бумага + чернила (был navy --rm-navy + белый текст) */
.gantt-v2-header,
.gantt-v2-name-head,
.gantt-v2-top-row,
.gantt-v2-cells-row {
    background: var(--surface-2, #EDE7DA) !important;
}
.gantt-v2-name-head,
.gantt-v2-top-cell,
.gantt-v2-month-cell {
    color: var(--ink-2, #5C564E) !important;
    border-right-color: var(--color-border, #E3E7EE) !important;
}
.gantt-v2-top-row { border-bottom-color: var(--color-border, #E3E7EE) !important; }

/* Gantt: месяц-навигация → бумага; бары плоские (без синего градиента,
   без тени, без белого глянца) — проступает цвет фазы из данных. */
.gantt-v2-month-cell {
    background: var(--surface-2, #EDE7DA) !important;
    color: var(--ink-2, #5C564E) !important;
    border-right-color: var(--color-border, #E3E7EE) !important;
}
.gantt-v2-month-cell.is-weekend { background: var(--inset, #FBF8F2) !important; }
/* Бары Ганта НЕ трогаем: цвет статуса/фазы задаётся инлайн из JS (data-viz). */

/* ============================================================
   PHASE F · FIT-TO-VIEWPORT · «всё на одном экране»
   Каркас жёстко в пределах окна: страница не скроллится,
   контент модуля скроллится ЛОКАЛЬНО внутри своей области,
   а не обрезается. Хедер (chrome) зафиксирован сверху.

   Раньше .app-shell/.main-area были min-height:100vh → высокий
   модуль вырастал за окно, а body{overflow:hidden} обрезал низ
   (контент становился недоступен). Теперь main-area — flex-колонка
   на высоту окна: header flex:none, активная вкладка flex:1 со
   своим скроллом. Flex надёжнее calc(100vh-64px): если хедер
   меняет высоту на брейкпоинте, область сама пересчитывается.
   ============================================================ */
.app-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.main-area {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.main-area > header { flex: 0 0 auto; }
.main-area > .mobile-chip-bar { flex: 0 0 auto; }

/* Дорожная карта (Проект) уже свёрстана под fit (см. PHASE B,
   :has(> .roadmap-subtabs) → height:calc + overflow:hidden).
   Просто встраиваем её в flex-колонку. */
.main-area > .tab-content.active:has(> .roadmap-subtabs) {
    flex: 1 1 auto;
    min-height: 0;
}

/* Все остальные активные вкладки: заполняют остаток высоты и
   скроллятся локально, а не тянут/обрезают страницу. */
.main-area > .tab-content.active:not(:has(> .roadmap-subtabs)) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ────────────────────────────────────────────────────────────
   PHASE F · СКРЫВАЕМЫЙ САЙДБАР (десктоп)
   Десктопный сайдбар сейчас зафиксирован на 232px (см. блок
   4415 — hover-overlay убрали из-за перекрытия). Возвращаем
   скрытие, но БЕЗ overlay-бага: ширина сайдбара и padding
   контента меняются СИНХРОННО (оба → 64px), поэтому контент
   не перекрывается. Тоггл — бургер в шапке (.mobile-hamburger,
   теперь видимый и на десктопе). Состояние — класс .nav-collapsed
   на .app-shell (живёт всю сессию SPA, без localStorage).
   ──────────────────────────────────────────────────────────── */
.main-area { transition: padding-left 0.28s cubic-bezier(0.32, 0.72, 0, 1); }

@media (min-width: 769px) {
    /* бургер виден и на десктопе — перекрываем display:none из строки 504 */
    .main-area > header .mobile-hamburger {
        display: inline-flex !important;
        font-size: 20px;
        line-height: 1;
        color: var(--color-text-secondary);
    }
    .main-area > header .mobile-hamburger:hover { color: var(--text-primary); }

    /* Бургер на десктопе виден → левый кластер шапки должен быть РЯДОМ
       (row), а не column (стр. 507). Иначе бургер встаёт НАД заголовком,
       кластер вырастает до ~86px, и шапка height:64px overflow:hidden
       срезает подзаголовок. Возвращаем горизонтальную раскладку:
       [бургер | (заголовок над подзаголовком)]. */
    .main-area > header > div:first-child {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    /* свёрнутое состояние: рейка 64px, метки скрыты, контент синхронно сдвинут */
    .app-shell.nav-collapsed .sidebar-nav { width: 64px; overflow: hidden; }
    .app-shell.nav-collapsed .main-area { padding-left: 64px; }
    .app-shell.nav-collapsed .sidebar-nav .side-label,
    .app-shell.nav-collapsed .sidebar-nav .nav-core-label,
    .app-shell.nav-collapsed .sidebar-nav .nav-sub .side-label,
    .app-shell.nav-collapsed .sidebar-nav .sidebar-brand-label,
    .app-shell.nav-collapsed .sidebar-nav .sidebar-section-title,
    .app-shell.nav-collapsed .sidebar-nav .sidebar-secondary-toggle,
    .app-shell.nav-collapsed .sidebar-nav .sidebar-profile-meta {
        opacity: 0 !important;
        pointer-events: none;
    }
}


/* ════════════════════════════════════════════════════════════
   PHASE G · 2026-06-01 · Палитра PRD на прогресс-барах
   Базовое заполнение — Future Dusk (см. выше). Здесь возвращаем
   СТАТУСНЫЙ смысл состояниям (done/overdue) статусными токенами
   и переводим треки на paper-fill. Только цвет.
   ════════════════════════════════════════════════════════════ */

/* Состояния прогресса — статусной палитрой (перебивает плоский дуск) */
.hc-bar-fill.is-done,
.hc-roadmap-bar-fill.is-done,
.fav-card-progress-fill.is-done,
.home-fav-fill.is-done {
    background-color: var(--status-done) !important;
}
.hc-bar-fill.has-overdue,
.hc-roadmap-bar-fill.has-overdue {
    background-color: var(--status-overdue) !important;
}
.hc-kpi-bar-fill.is-ok      { background-color: var(--status-done) !important; }
.hc-kpi-bar-fill.is-neutral { background-color: var(--status-idle) !important; }
.hc-kpi-bar-fill.is-warn    { background-color: var(--status-overdue) !important; }

/* Треки прогресс-баров — paper-fill */
.hc-bar-track,
.hc-roadmap-bar-track,
.hc-kpi-bar-track,
.phase-progress-bar,
.step-progress-bar,
.sumv2-phase-bar-track,
.kb-wip-bar-track,
.prh-progress-bar-outer,
.fav-card-progress,
.home-fav-track {
    background-color: var(--paper-fill) !important;
}

/* Статус-точки/чипы статусов — единая муты-палитра PRD
   (todo→idle, progress→dusk, done→sage, blocked/failed→terracotta) */
.status-dot.is-todo,     .status-dot[data-status="todo"]     { background: var(--status-idle) !important; }
.status-dot.is-progress, .status-dot[data-status="progress"] { background: var(--status-progress) !important; }
.status-dot.is-done,     .status-dot[data-status="done"]     { background: var(--status-done) !important; }
.status-dot.is-blocked,  .status-dot[data-status="blocked"]  { background: var(--status-failed) !important; }

/* ── Шапка-справка проекта (Фаза 3, секция «Проект») ──────────────
   Узкая полоса над контентом проектных подвкладок. Полностью на палитре
   PRD: нейтрали темы + Future Dusk, статус-чип — оттенками --status-*. */
#projectSummaryBar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--paper-surface);
    border-bottom: 0.5px solid var(--paper-border);
}
.psb-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.psb-title-row { display: flex; align-items: center; gap: 10px; }
.psb-name {
    font-size: 15px; font-weight: 500; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
}
.psb-status {
    flex-shrink: 0;
    font-size: 11px; font-weight: 500; line-height: 1;
    padding: 4px 10px; border-radius: 999px;
    background: var(--status-idle); color: var(--status-idle-fg);
}
.psb-status[data-status="idle"]     { background: var(--status-idle);     color: var(--status-idle-fg); }
.psb-status[data-status="progress"] { background: var(--status-progress); color: var(--status-progress-fg); }
.psb-status[data-status="done"]     { background: var(--status-done);     color: var(--status-done-fg); }
.psb-status[data-status="overdue"]  { background: var(--status-overdue);  color: var(--status-overdue-fg); }
.psb-path {
    font-size: 12px; color: var(--ink-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.psb-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.psb-owner { display: flex; align-items: center; gap: 7px; }
.psb-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--dusk-tint); color: var(--dusk-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 500; flex-shrink: 0;
}
.psb-owner-name { font-size: 12px; color: var(--ink-muted); }
.psb-dates { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); }
.psb-dates-ico { flex-shrink: 0; }
.psb-progress { display: flex; align-items: center; gap: 8px; }
.psb-progress-track {
    width: 120px; height: 6px; border-radius: 999px;
    background: var(--paper-fill); overflow: hidden;
}
.psb-progress-fill { height: 100%; background: var(--dusk); border-radius: 999px; }
.psb-progress-pct {
    font-size: 12px; font-weight: 500; color: var(--dusk-deep);
    min-width: 30px; text-align: right;
}
@media (max-width: 768px) {
    #projectSummaryBar { padding: 8px 14px; gap: 10px; }
    .psb-name { max-width: 60vw; }
    .psb-progress-track { width: 80px; }
}

/* ── Дорожная карта: статус-бар проекта + селектор-бар = одна шапка ──────
   Раньше две отдельные полосы (справка о проекте сверху, селекторы снизу).
   Сводим в единую «бумажную» шапку: общий фон, без двойного шва.
   Сущности «План» больше нет — Проект = дорожная карта 1:1, поэтому
   убираем дубль-селектор группировки «Проект» (фильтр); единственный
   селектор-роадмапа переименован в «Проект» в шаблоне. */
.plan-context-bar {
    background: var(--paper-surface);
    border-bottom: 0.5px solid var(--paper-border);
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
}
#projectSelectorWrap, #projectDivider { display: none !important; }
.pcb-badge { display: inline-flex; align-items: center; }
.pcb-badge:empty { display: none; }
.pcb-summary {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 0;
}
/* Уведомление о просрочках — над полоской прогресса, только при наличии */
.pcb-overdue {
    align-self: flex-start;
    font-size: 11px; line-height: 1; font-weight: 500; color: var(--status-overdue);
}
.pcb-overdue-n { font-variant-numeric: tabular-nums; }
.pcb-sum-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* Каскад Департамент › Отдел слева, селектор проекта следует за ними;
   сводка + «⋯» уходят вправо (flex order, без перестановки DOM). */
.pcb-context { display: flex; align-items: center; gap: 6px; flex-shrink: 0; order: -2; }
/* Селектор проекта — вплотную к селектору отдела (не уезжает вправо).
   Старое правило давало ему margin-left:auto → лишний зазор; гасим.
   Вправо группу толкает ТОЛЬКО margin-left:auto у .pcb-summary. */
#planSelectorWrap { order: -1; margin-left: 0 !important; }
.pcb-summary { order: 1; }
.pcb-actions { display: flex; align-items: center; flex-shrink: 0; position: relative; order: 2; }
/* Кнопка «⋯» и выпадающее меню действий */
.pcb-more-btn {
    width: 30px; height: 30px; border-radius: var(--radius-sm, 6px);
    border: 0.5px solid var(--paper-border); background: var(--paper-surface);
    color: var(--ink-muted); font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.pcb-more-btn:hover { background: var(--paper-fill); color: var(--ink); }
.pcb-actions-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    flex-direction: column; min-width: 200px; padding: 4px; z-index: 60;
    background: var(--paper-surface); border: 0.5px solid var(--paper-border);
    border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-soft, 0 4px 16px rgba(46,42,36,.10));
}
.pcb-menu-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border: none; background: none; border-radius: 6px;
    color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.pcb-menu-item:hover { background: var(--paper-fill); }
.pcb-menu-item .emoji-ico, .pcb-menu-item .pcb-menu-ico { flex-shrink: 0; width: 16px; text-align: center; color: var(--dusk); }
.pcb-menu-item--danger { color: var(--status-overdue); }
.pcb-menu-item--danger .emoji-ico { color: var(--status-overdue); }
/* Период — чип на мягкой заливке */
.pcb-summary .psb-dates {
    background: var(--paper-fill); padding: 3px 10px; border-radius: 999px; color: var(--ink);
}
/* Хлебная крошка «›» перед селектором проекта */
#planDivider { width: auto; min-width: 0; color: var(--ink-muted); }
#planDivider::before { content: '›'; font-size: 14px; color: var(--ink-muted); }
/* Сжимаем селекторы, чтобы каскад + сводка + действия влезали в одну строку */
.plan-context-bar .dept-select-styled,
.plan-context-bar .project-select-styled { max-width: 210px; }
#planSelect { min-width: 160px !important; }
.pcb-summary .psb-progress-track { width: 90px; }
/* На узких экранах правая сводка переносится под селекторы — но это
   по-прежнему одна панель, а не две независимые строки. */
@media (max-width: 900px) {
    .pcb-summary { margin-left: 0; flex-basis: 100%; }
}

/* ── Типографика редизайна (Фаза «дорого/минимально») ────────────────
   UI — Hanken Grotesk (через --font-sans). Серифная Fraunces дозированно
   на крупных заголовках/названиях. Тонкий трекинг, табличные цифры. */
body {
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Крупные заголовки — серифный дисплейный шрифт + плотный трекинг. */
#pageHeaderTitle,
.hello, .hc-greet-title,
.prh-title,
.gantt-v2-empty,
.wf-empty,
.empty-state-title, .empty-title {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
}
/* Заголовки разделов на гротеске — тоже плотный трекинг, без 700. */
h1, h2, h3, .section-title, .card-title {
    letter-spacing: -0.018em;
}
/* Числа/метрики/даты — табличные цифры (ровные колонки). */
#overall-progress, #prhPct, #prhTasks,
.psb-progress-pct, .psb-dates,
.kpi, .kpi-num, .hc-kpi, .hc-kpi-num, .hc-stat,
.gantt-v2-day-num, .gantt-v2-top-cell, .gantt-v2-month-cell,
.task-dates-cell, .wbs-meta,
.metric, .metric-value, .stat-value,
table td, table th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ── Доступность + единые состояния (редизайн, Фаза «компоненты») ──── */
/* Видимый фокус-ринг --dusk на всех интерактивных элементах (WCAG). */
:where(a, button, input, select, textarea, [tabindex], [role="button"], [role="tab"], [contenteditable="true"]):focus-visible {
    outline: 2px solid var(--dusk);
    outline-offset: 2px;
}
/* Не показываем ринг при клике мышью, только при клавиатуре. */
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) { outline: none; }
/* Единое disabled-состояние. */
button:disabled, [aria-disabled="true"], .is-disabled {
    opacity: .55; cursor: not-allowed;
}

/* ── Адаптивная защита (без горизонтального скролла, без перекрытий) ── */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; }
/* Длинные слова/ссылки переносим, чтобы не распирали контейнер. */
.task-name-text, .side-label, .psb-name, .psb-path,
.wf-tpl-name, .notif-item, p, td, th, li {
    overflow-wrap: anywhere;
}
/* Тач-устройства: тач-таргеты ≥ 44px, без сжатия кликабельных. */
@media (hover: none) and (pointer: coarse) {
    .side-link, .nav-core-btn, .roadmap-subtab,
    .wf-btn, .wf-add, .mobile-chip,
    .btn-primary, .btn-secondary, .btn-ghost {
        min-height: 44px;
    }
}
/* Уважать prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Настройка видимости подвкладок проекта (53-subtab-settings.js) =====
   Кнопка «⋯» в конце ряда подвкладок + выпадающее меню с тогглами.
   Стиль на токенах темы; тогглы переиспользуют .tabs-toggle из enhancements.css. */
.subtab-cfg-btn {
    margin-left: 6px;
    align-self: flex-end;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: 7px 7px 0 0;
    background: var(--color-bg-app);
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.subtab-cfg-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.subtab-cfg-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.subtab-cfg-menu {
    position: absolute;
    z-index: 1000;
    min-width: 260px;
    max-width: 340px;
    padding: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}
.subtab-cfg-title {
    padding: 4px 8px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.subtab-cfg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
}
.subtab-cfg-row:hover { background: var(--color-gray-100); }
.subtab-cfg-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.subtab-cfg-row.is-locked .subtab-cfg-label { color: var(--color-text-secondary); }
.subtab-cfg-lock {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--color-text-secondary);
    background: var(--color-gray-100);
    border-radius: var(--radius-pill, 999px);
    padding: 1px 7px;
}
.subtab-cfg-menu .tabs-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

/* ===== Чипы согласующих в строке дорожной карты (07-checklist renderApproverChips) =====
   Стопка аватаров-инициалов с лёгким наложением + «+N». Токены темы. */
.approver-stack {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
}
.approver-ava {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--color-primary, var(--dusk, #4C4F76));
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 1.5px var(--color-surface, #fff);
}
.approver-ava:first-child { margin-left: 0; }
.approver-ava--more {
    background: var(--color-gray-300, #cfcfcf);
    color: var(--color-text, #181B26);
}

/* ===== Дорожная карта: переключатель видов + карточный вид (54-roadmap-views) ===== */
.roadmap-view-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin: 0 0 12px;
    background: var(--color-bg-app, #f4f4f6);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-pill, 999px);
}
.rv-seg {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #6b6b6b);
    font-size: 13px;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.rv-seg:hover { color: var(--color-text, #181B26); }
.rv-seg.is-active {
    background: var(--color-surface, #fff);
    color: var(--accent, var(--color-primary, #4C4F76));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.rv-seg:focus-visible { outline: 2px solid var(--accent, var(--color-primary, #4C4F76)); outline-offset: 2px; }


/* ===== Карточный вид дорожной карты (макет v2-B-cards), на токенах темы ===== */
.roadmap-cards { padding: 4px 0 32px; }
.rc-empty { padding: 32px; text-align: center; color: var(--color-text-secondary, #636366); }

.rc-phase {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border-strong, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.04);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.rc-phase:hover { box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06); }

.rc-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--color-border, #f0f0f2); cursor: pointer; }
.rc-num {
    display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
    background: var(--dusk-tint, #f4f2fa); color: var(--accent, var(--color-primary, #4C4F76));
    border-radius: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, monospace; flex-shrink: 0;
}
.rc-head-main { flex: 1; min-width: 0; }
.rc-title { font-size: 19px; font-weight: 600; color: var(--color-text, #1c1c1e); letter-spacing: -.015em; line-height: 1.2; }
.rc-hmeta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-secondary, #636366); margin-top: 3px; }
.rc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-secondary, #9ca3af); opacity: .6; }
.rc-pstatus { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.rc-pstatus::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rc-pstatus--done     { background: var(--status-done-soft, #dcfce7); color: var(--status-done-text, #166534); }
.rc-pstatus--progress { background: var(--status-progress-soft, #fff4e0); color: var(--status-progress-text, #92560a); }
.rc-pstatus--todo     { background: #f3f4f6; color: #4b5563; }
.rc-ring {
    --ring-color: var(--accent, var(--color-primary, #4C4F76));
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; position: relative;
    background: conic-gradient(var(--ring-color) 0 var(--p, 0%), var(--color-border-strong, #e5e7eb) var(--p, 0%) 100%);
}
.rc-ring--done { --ring-color: var(--status-done, #34c759); }
.rc-ring--progress { --ring-color: var(--status-progress, #f59e0b); }
.rc-ring--todo { --ring-color: var(--color-border-strong, #e5e7eb); }
.rc-ring::after { content: ""; position: absolute; inset: 5px; background: var(--color-surface, #fff); border-radius: 50%; }
.rc-ring span { position: relative; font-size: 11px; font-weight: 700; color: var(--color-text, #1c1c1e); font-variant-numeric: tabular-nums; }
.rc-toggle { color: var(--color-text-secondary, #9ca3af); font-size: 13px; width: 16px; text-align: center; transition: transform .2s ease; }
.rc-phase.is-collapsed .rc-toggle { transform: rotate(-90deg); }
.rc-phase.is-collapsed .rc-body { display: none; }

.rc-stage { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--color-border, #f0f0f2); background: var(--color-bg-app, #fcfcfd); }
.rc-bullet { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--color-primary, #4C4F76)); opacity: .5; flex-shrink: 0; }
.rc-stage-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--color-text, #1c1c1e); }
.rc-stage-dates { font-size: 12px; color: var(--color-text-secondary, #636366); }
.rc-stage-count { font-size: 12px; color: var(--color-text-secondary, #636366); padding: 3px 10px; background: var(--color-surface, #fff); border: 1px solid var(--color-border-strong, #e5e7eb); border-radius: 999px; font-weight: 500; font-variant-numeric: tabular-nums; }

.rc-task { display: grid; grid-template-columns: 22px 1fr 150px 150px 116px; gap: 14px; align-items: center; padding: 13px 22px; border-bottom: 1px solid var(--color-border, #f0f0f2); font-size: 13.5px; cursor: pointer; transition: background .12s ease; }
.rc-task:hover { background: var(--color-bg-app, #fafafb); }
.rc-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-border-strong, #d4d4d8); position: relative; }
.rc-check.is-done { background: var(--status-done, #34c759); border-color: var(--status-done, #34c759); }
.rc-check.is-done::after { content: ""; position: absolute; left: 6px; top: 4px; width: 6px; height: 9px; border-right: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(45deg); }
.rc-task-title { color: var(--color-text, #1c1c1e); font-weight: 500; line-height: 1.4; min-width: 0; }
.rc-task.is-done .rc-task-title { color: var(--color-text-secondary, #636366); }
.rc-task-meta { font-size: 12px; color: var(--color-text-secondary, #636366); font-weight: 400; margin-top: 2px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rc-urg.is-high { color: var(--status-failed, #ff3b30); font-weight: 600; }
.rc-mdot { color: var(--color-text-secondary, #c4c4c6); }
.rc-note { font-style: italic; }
.rc-task-dates { font-size: 12px; color: var(--color-text, #3a3a3c); font-variant-numeric: tabular-nums; }
.rc-task-owner { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text, #3a3a3c); min-width: 0; }
.rc-av { width: 22px; height: 22px; border-radius: 50%; background: var(--dusk-tint, #f4f2fa); color: var(--accent, var(--color-primary, #4C4F76)); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.rc-oname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-oname--empty { color: var(--color-text-secondary, #9ca3af); }
.rc-task .status-pill { justify-self: end; cursor: pointer; }
.rc-task .status-pill.rc-pill-btn:hover { filter: brightness(0.96); }
.rc-check { cursor: pointer; }
.rc-check:not(.is-done):hover { border-color: var(--status-done, #34c759); }
.rc-check:focus-visible { outline: 2px solid var(--accent, var(--color-primary, #4C4F76)); outline-offset: 2px; }
.rc-mono, .mono { font-family: ui-monospace, SFMono-Regular, monospace; }

.rc-compose { padding: 12px 22px; color: var(--color-text-secondary, #636366); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-top: 1px dashed var(--color-border-strong, #e5e7eb); background: var(--color-bg-app, #fcfcfd); }
.rc-compose:hover { color: var(--accent, var(--color-primary, #4C4F76)); background: var(--dusk-tint, #f4f2fa); }
.rc-plus { font-size: 15px; color: var(--accent, var(--color-primary, #4C4F76)); }

@media (max-width: 720px) {
    .rc-task { grid-template-columns: 20px 1fr; row-gap: 6px; }
    .rc-task-dates, .rc-task-owner { grid-column: 2; }
    .rc-task .status-pill { grid-column: 2; justify-self: start; }
    .rc-head { flex-wrap: wrap; gap: 10px; }
}

/* FioPicker dropdown в портале (body) — фикс «ответственные уходят за контейнер».
   Позиция/ширина задаются из JS (positionDropdown); overflow таблицы больше не режет. */
.fio-picker-dropdown.fio-picker-dropdown--portal {
    position: fixed;
    right: auto;
    z-index: 10050;
    max-height: 280px;
    overflow-y: auto;
    /* Полоса прокрутки получает свою колонку и не наезжает на текст ФИО
       (имена вроде «Бокарев П.В.» больше не обрезаются справа). */
    scrollbar-gutter: stable;
}
/* Опции в портал-дропдауне: запас справа, чтобы скролл и длинные ФИО
   не обрезались; длинное имя — в одну строку с многоточием. */
.fio-picker-dropdown.fio-picker-dropdown--portal .fio-picker-opt {
    padding-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   ГЛАВНАЯ — рескин под мокап (Future Dusk / Hanken Grotesk).
   Только палитра --m-* + карточки/KPI; разметка и данные не меняются.
   Скоуп .home-mockup, грузится последним → выигрывает каскад.
   ============================================================ */
.home-mockup {
    font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Палитра референса */
    --m-ink: #181B26;
    --m-muted: #6A7180;
    --m-line: #E3E7EE;
    --m-bg: #F8F9FB;
    --m-card: #FFFFFF;
    --m-accent: #373A67;
    --m-accent-soft: #ECECF5;
    --m-danger: #9A3324;
    --m-danger-bg: #FDE8E8;
    --m-success: #4E8A6A;
    --m-success-bg: #E8F3ED;
    --m-info-bg: #ECECF5;
    --m-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* KPI — сетка 2×2, карточка: метка сверху, иконка справа-сверху, крупное число */
.home-mockup .kpi-stack {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.home-mockup .kpi {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
    border-radius: 10px;
    box-shadow: var(--m-shadow-sm);
}
.home-mockup .kpi > span:last-child { display: flex; flex-direction: column; }
.home-mockup .kpi-label { order: -1; margin: 0 0 10px; }
.home-mockup .kpi-value { font-size: 32px; }
/* иконка — голый цветной глиф в правом верхнем углу (без плашки) */
.home-mockup .kpi-ico {
    position: absolute; top: 14px; right: 14px;
    width: auto; height: auto; border-radius: 0;
    background: transparent !important;
}
.home-mockup .kpi.is-warn .kpi-ico { color: var(--m-danger); }
.home-mockup .kpi.is-ok   .kpi-ico { color: var(--m-success); }
.home-mockup .kpi.is-info .kpi-ico { color: #6E709C; }
.home-mockup .kpi.is-soft .kpi-ico { color: var(--m-muted); }
.home-mockup .kpi.is-warn .kpi-value { color: var(--m-danger); }
.home-mockup .kpi.is-ok   .kpi-value { color: var(--m-success); }
.home-mockup .kpi:hover { transform: translateY(-1px); border-color: var(--m-line); box-shadow: 0 4px 12px rgba(0,0,0,.07); }

/* Карточки/колонки — единый мягкий стиль мокапа: белый фон, граница, 10px, soft shadow */
.home-mockup .card,
.home-mockup .center-col,
.home-mockup .tg {
    border-radius: 10px;
    box-shadow: var(--m-shadow-sm);
}

/* Статус-пилюли в ленте — палитра мокапа */
.home-mockup .status-pill.is-progress,
.home-mockup .feed-status.is-progress { background: var(--m-info-bg); color: var(--status-progress, #4E5180); }
.home-mockup .status-pill.is-overdue,
.home-mockup .feed-status.is-overdue  { background: var(--m-danger-bg); color: var(--m-danger); }
.home-mockup .status-pill.is-done,
.home-mockup .feed-status.is-done     { background: var(--m-success-bg); color: var(--m-success); }

/* Фон области «Главной» — прохладный светло-серый как в референсе (только этот таб) */
#tab-home.home-mockup,
#tab-home .home-layout.home-mockup { background: #F8F9FB; }

/* ============================================================
   ГЛАВНАЯ — точный перенос мокапа (расположение/типографика/цвет).
   Высокая специфичность #tab-home .home-mockup → перекрывает прежние правила.
   ============================================================ */
/* Раскладка: 2 колонки. Метрики(2×2) + Топ проектов + Лента — стопкой в широкой
   левой колонке; Чаты — 320px справа на всю высоту. (как в референсе) */
#tab-home .home-mockup .layout {
    grid-template-columns: minmax(0,1fr) 320px;
    grid-template-rows: auto minmax(0,1fr) auto;
    grid-template-areas: "side chat" "main chat" "top3 chat";
    gap: 8px 14px;
}
#tab-home .home-mockup .left-col   { grid-area: side; gap: 10px; max-height: none; }
#tab-home .home-mockup .center-col { grid-area: main; }
#tab-home .home-mockup .top-plans  { grid-area: top3; }   /* Топ-3 — внизу */
#tab-home .home-mockup .tg         { grid-area: chat; }

/* Метрики — широкая сетка 2×2, карточка p24, метка+иконка сверху, число 32px */
#tab-home .home-mockup .kpi-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 16px; }
#tab-home .home-mockup .kpi {
    position: relative; flex-direction: column; align-items: stretch; gap: 0;
    padding: 24px; border-radius: 10px; border: 1px solid #E3E7EE;
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
#tab-home .home-mockup .kpi > span:last-child { display: flex; flex-direction: column; }
#tab-home .home-mockup .kpi-label {
    order: -1; margin: 0 0 16px; font-size: 14px; font-weight: 500;
    text-transform: none; letter-spacing: 0; color: #6A7180;
}
#tab-home .home-mockup .kpi-value { font-size: 32px; font-weight: 500; line-height: 1.125; letter-spacing: -0.02em; color: #181B26; }
#tab-home .home-mockup .kpi-ico { position: absolute; top: 22px; right: 22px; width: auto; height: auto; background: transparent !important; border-radius: 0; }
#tab-home .home-mockup .kpi-ico svg { width: 20px; height: 20px; }
#tab-home .home-mockup .kpi.is-warn .kpi-ico, #tab-home .home-mockup .kpi.is-warn .kpi-value { color: #9A3324; }
#tab-home .home-mockup .kpi.is-ok   .kpi-ico, #tab-home .home-mockup .kpi.is-ok   .kpi-value { color: #4E8A6A; }
#tab-home .home-mockup .kpi.is-info .kpi-ico { color: #6E709C; }
#tab-home .home-mockup .kpi.is-soft .kpi-ico { color: #6A7180; }

/* Карточки/колонки — белые, граница #E3E7EE, 10px, soft shadow, p24 */
#tab-home .home-mockup .card,
#tab-home .home-mockup .center-col,
#tab-home .home-mockup .tg {
    background: #fff; border: 1px solid #E3E7EE; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
#tab-home .home-mockup .top-plans { padding: 24px; }
#tab-home .home-mockup .card-title { font-size: 20px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #373A67; }
#tab-home .home-mockup .card-head { margin-bottom: 20px; }

/* Топ проектов — строки: имя 14/500 + % справа, тонкий бар 4px */
#tab-home .home-mockup .hc-roadmap-row { gap: 6px; }
#tab-home .home-mockup .hc-roadmap-name { font-size: 14px; font-weight: 500; color: #181B26; }
#tab-home .home-mockup .hc-roadmap-bar { height: 4px; background: #EEF1F5; border-radius: 9999px; }
#tab-home .home-mockup .hc-roadmap-bar-fill { background: #4E5180; border-radius: 9999px; }
#tab-home .home-mockup .hc-roadmap-bar-fill.has-overdue { background: #9A3324; }
#tab-home .home-mockup .hc-roadmap-state { font-size: 12px; color: #6A7180; }

/* Вкладки ленты — подчёркивание активной primary */
#tab-home .home-mockup .tabs { gap: 24px; padding: 16px 24px 0; }
#tab-home .home-mockup .tab { font-size: 14px; font-weight: 500; padding-bottom: 16px; color: #6A7180; border-bottom: 2px solid transparent; }
#tab-home .home-mockup .tab.is-active { color: #373A67; border-bottom-color: #373A67; }

/* Лента событий — строки icon + текст, разделители, p24 */
#tab-home .home-mockup .feed-item { padding: 24px; gap: 16px; border-bottom: 1px solid #E3E7EE; align-items: flex-start; }
#tab-home .home-mockup .feed-body { font-size: 14px; color: #181B26; }
#tab-home .home-mockup .feed-time { font-size: 12px; color: #9AA1AE; }

/* Статус-пилюли (если есть в ленте/дедлайнах) — точные цвета мокапа */
#tab-home .home-mockup .status-pill.is-progress,#tab-home .home-mockup .feed-status.is-progress{background:#ECECF5;color:#4E5180;}
#tab-home .home-mockup .status-pill.is-overdue,#tab-home .home-mockup .feed-status.is-overdue{background:#FDE8E8;color:#9A3324;}
#tab-home .home-mockup .status-pill.is-done,#tab-home .home-mockup .feed-status.is-done{background:#E8F3ED;color:#4E8A6A;}

/* Чаты — заголовок 20/500, чипы-папки, строки */
#tab-home .home-mockup .tg-list-header { padding: 24px; border-bottom: 1px solid #E3E7EE; }
#tab-home .home-mockup .tg-list-title { font-size: 20px; font-weight: 500; color: #373A67; margin-bottom: 16px; }
#tab-home .home-mockup .tg-folder { font-size: 12px; font-weight: 500; padding: 4px 16px; border-radius: 9999px; background: #F8F9FB; border: 1px solid #E3E7EE; color: #6A7180; }
#tab-home .home-mockup .tg-folder.is-active { background: #373A67; border-color: #373A67; color: #fff; }
#tab-home .home-mockup .pc-room-item { gap: 16px; padding: 8px; border-radius: 8px; }
#tab-home .home-mockup .pc-room-item.is-active, #tab-home .home-mockup .pc-room-item:hover { background: rgba(236,236,245,.5); }
#tab-home .home-mockup .pc-room-avatar { width: 40px; height: 40px; border-radius: 9999px; }
#tab-home .home-mockup .pc-room-name { font-size: 14px; font-weight: 500; color: #181B26; }
#tab-home .home-mockup .pc-room-time { font-size: 11px; color: #6A7180; }
#tab-home .home-mockup .pc-room-preview { font-size: 14px; color: #6A7180; }

/* Hello-bar — компактная строка-приветствие (как заголовок в топбаре мокапа) */
#tab-home .home-mockup .hello-bar { margin-bottom: 4px; }
#tab-home .home-mockup .hello { font-size: 20px; font-weight: 600; color: #373A67; }

/* ============================================================
   ГЛАВНАЯ — на семантических токенах (следует теме light/dark).
   Перекрывает захардкоженные светлые hex прежних home-блоков (последний в
   исходнике). Light = светлый Stitch, dark = тёмный Stitch — через токены.
   ============================================================ */
#tab-home .home-mockup {
    --m-ink: var(--text-primary); --m-muted: var(--ink-muted); --m-line: var(--border);
    --m-bg: var(--bg-page); --m-card: var(--surface); --m-fill: var(--fill);
    --m-accent: var(--accent); --m-accent-soft: var(--accent-soft);
    --m-danger: var(--status-overdue); --m-danger-bg: var(--status-overdue-soft);
    --m-success: var(--status-done); --m-success-bg: var(--status-done-soft);
    --m-info-bg: var(--accent-tint);
}
#tab-home.home-mockup,
#tab-home .home-layout.home-mockup { background: var(--bg-page); }

#tab-home .home-mockup .kpi,
#tab-home .home-mockup .card,
#tab-home .home-mockup .center-col,
#tab-home .home-mockup .tg { background: var(--surface); border-color: var(--border); }
#tab-home .home-mockup .feed-item { border-bottom-color: var(--border); }

#tab-home .home-mockup .kpi-label,
#tab-home .home-mockup .pc-room-time,
#tab-home .home-mockup .pc-room-preview,
#tab-home .home-mockup .hc-roadmap-state,
#tab-home .home-mockup .feed-time { color: var(--ink-muted); }
#tab-home .home-mockup .kpi-value,
#tab-home .home-mockup .hc-roadmap-name,
#tab-home .home-mockup .pc-room-name,
#tab-home .home-mockup .feed-body { color: var(--text-primary); }
#tab-home .home-mockup .card-title,
#tab-home .home-mockup .tg-list-title,
#tab-home .home-mockup .hello { color: var(--accent-deep); }
#tab-home .home-mockup .tab { color: var(--ink-muted); }
#tab-home .home-mockup .tab.is-active { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }

#tab-home .home-mockup .hc-roadmap-bar { background: var(--fill); }
#tab-home .home-mockup .hc-roadmap-bar-fill { background: var(--accent); }
#tab-home .home-mockup .hc-roadmap-bar-fill.has-overdue { background: var(--status-overdue); }

#tab-home .home-mockup .tg-folder { background: var(--bg-page); border-color: var(--border); color: var(--ink-muted); }
#tab-home .home-mockup .tg-folder.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
#tab-home .home-mockup .pc-room-item.is-active,
#tab-home .home-mockup .pc-room-item:hover { background: var(--accent-soft); }

#tab-home .home-mockup .kpi.is-warn .kpi-ico,#tab-home .home-mockup .kpi.is-warn .kpi-value{color:var(--status-overdue);}
#tab-home .home-mockup .kpi.is-ok .kpi-ico,#tab-home .home-mockup .kpi.is-ok .kpi-value{color:var(--status-done);}

/* ============================================================
   STITCH батч B — Дорожная карта (таблица): шапка как в референсе.
   Light: тёмная дуск-полоса #353659 + белый, sentence-case.
   Dark: приглушённо-тёмная полоса #232838 + светло-серый.
   (Раньше был светлый #EEF1F5 с тёплым серым — leftover, не Stitch.)
   ============================================================ */
:root:not([data-theme="dark"]) { --rm-thead-bg: #353659; --rm-thead-fg: #FFFFFF; }
[data-theme="dark"] { --rm-thead-bg: #232838; --rm-thead-fg: #C7CAD6; }
.plan-table th {
    background: var(--rm-thead-bg) !important;
    color: var(--rm-thead-fg) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}
.plan-table th .th-filter-btn { color: rgba(255,255,255,0.72) !important; }
[data-theme="dark"] .plan-table th .th-filter-btn { color: rgba(199,202,214,0.72) !important; }

/* STITCH батч B — статусы в таблице дорожной карты: точка + текст БЕЗ заливки
   (как в референсе: «● Done», «● In Progress»). Цвет точки/текста = статусный.
   Скоуп .plan-table — на Главной/Канбане пилюли остаются заливными (там Stitch
   тоже заливные). */
.plan-table .status-pill {
    background: transparent !important;
    padding: 2px 2px !important;
}
.plan-table .status-pill.is-clickable:hover {
    filter: none;
    background: var(--surface-hover) !important;
    border-radius: 6px;
    padding: 2px 8px !important;
}

/* ============================================================
   ГЛАВНАЯ — приветствие в шапке + чат на всю высоту (как Stitch).
   ============================================================ */
/* приветствие переехало в топбар (#pageHeaderTitle/Subtitle через JS) */
#tab-home .home-mockup .hello-bar { display: none; }
/* чат тянется до низа левой колонки (KPI+Топ+Лента) — форсируем спан строк */
#tab-home .home-mockup .tg {
    grid-column: 2; grid-row: 1 / -1; align-self: stretch; min-height: 0;
}
#tab-home .home-mockup .tg .tg-list-view,
#tab-home .home-mockup .tg .tg-chat-view { flex: 1 1 auto; min-height: 0; }
#tab-home .home-mockup .tg .tg-rooms-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* JS-синк высоты чата (нужен в плане) ставит inline height:569px — на Главной
   перебиваем !important, чтобы чат тянулся на всю высоту левой колонки. */
#tab-home .home-mockup .tg { height: auto !important; max-height: none !important; }

/* ============================================================
   ШАПКА — правый кластер по Stitch: [кольцо прогресса] | [иконки] |
   [аватар + Выйти]. Фон шапки уже белый (light)/navy(dark) — не трогаем.
   ============================================================ */
.main-area > header h1 { color: var(--text-primary); font-size: 20px; font-weight: 700; }
.main-area > header > div:first-child span,
.main-area > header .text-secondary-sm { color: var(--ink-muted); }

.main-area > header .hdr-right,
.main-area > header > div:last-child { display: flex; align-items: center; gap: 12px; }
.hdr-right > #progressWrap { order: 1; }
.hdr-right > .hdr-divider--1 { order: 2; }
.hdr-right > .hdr-action-btn, .hdr-right > #cmdkOpenBtn, .hdr-right > #themeToggleBtn,
.hdr-right > #notesHeaderBtn, .hdr-right > #headerApprovals, .hdr-right > #headerNotifications { order: 3; }
.hdr-right > .hdr-divider--2 { order: 4; }
.hdr-right > #userInfo { order: 5; }

.hdr-divider { width: 1px; height: 24px; background: var(--border); flex: 0 0 auto; }

/* кольцо прогресса (как в Stitch) */
.main-area > header #progressWrap.hdr-ring {
    position: relative; width: 34px; height: 34px; flex: 0 0 auto; text-align: initial; padding: 0;
}
.hdr-ring-svg { width: 100%; height: 100%; display: block; }
.hdr-ring-bg { stroke: var(--fill); }
.hdr-ring-fg { stroke: var(--status-progress); transition: stroke-dasharray .45s ease; }
.main-area > header #overall-progress.hdr-ring-label {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 9.5px !important; font-weight: 600; color: var(--text-primary) !important;
    letter-spacing: -0.02em; margin: 0;
}

/* иконки-кнопки — единый стиль (36px, hover accent-tint) */
.hdr-right .hdr-action-btn, .hdr-right .notes-header-btn, .hdr-right .notif-btn, .hdr-right .appr-btn {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: 8px; cursor: pointer; padding: 0;
    color: var(--ink-muted); position: relative; transition: background .15s, color .15s; box-shadow: none;
}
.hdr-right .hdr-action-btn:hover, .hdr-right .notes-header-btn:hover,
.hdr-right .notif-btn:hover, .hdr-right .appr-btn:hover {
    background: var(--accent-tint, var(--accent-soft)); color: var(--accent);
}
.hdr-right .notif-btn-icon-img { width: 20px; height: 20px; }
.hdr-right #cmdkOpenBtn .lbl, .hdr-right #cmdkOpenBtn .kbd-hint { display: none; }

/* аватар + Выйти (де-загромождаем: без статуса/уровня в шапке) */
.main-area > header .user-info { gap: 10px; align-items: center; }
.main-area > header .user-avatar {
    width: 32px; height: 32px; border: 1px solid var(--border);
    color: var(--text-primary); background: var(--fill); font-size: 13px;
}
.main-area > header .user-name { color: var(--text-primary); font-size: 13px; font-weight: 500; }
.hdr-right .user-meta .user-status, .hdr-right #userLevelBadge { display: none !important; }
.main-area > header .btn-logout {
    display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none;
    color: var(--ink-muted); font-size: 14px; font-weight: 500; cursor: pointer; padding: 6px 4px;
    transition: color .15s; box-shadow: none;
}
.main-area > header .btn-logout:hover { color: var(--accent); background: transparent; }

/* ============================================================
   КАНБАН — карточки под Stitch: без левой акцент-полосы (статус кодируется
   колонкой, приоритет — пилюлей). Чистая карточка: рамка + мягкая тень.
   ============================================================ */
.kb-card--roadmap .kb-card-stripe { display: none !important; }
.kb-card--roadmap { padding-left: 14px; }

/* ============================================================
   СПИСОК ЗАДАЧ (расширенный, .kb-list) — статус и срочность точкой+текстом
   (как Stitch: ● In Progress / ● High), без заливки. Цвет = статусный токен.
   ============================================================ */
.kb-list-status {
    background: transparent !important; padding: 0 !important; border-radius: 0;
    display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
    color: var(--status-idle) !important;
}
.kb-list-status[data-s="idle"]     { color: var(--status-idle) !important; }
.kb-list-status[data-s="progress"] { color: var(--status-progress) !important; }
.kb-list-status[data-s="done"]     { color: var(--status-done) !important; }
.kb-list-status[data-s="failed"]   { color: var(--status-failed) !important; }
.kb-list-status::before { content:''; width:7px; height:7px; border-radius:50%; background: currentColor; flex:0 0 auto; }

.kb-adv-urg {
    background: transparent !important; padding: 0 !important; border-radius: 0;
    display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
}
.kb-adv-urg[data-u="normal"]   { color: var(--ink-muted) !important; }
.kb-adv-urg[data-u="urgent"]   { color: var(--status-failed) !important; }
.kb-adv-urg[data-u="critical"] { color: var(--status-overdue) !important; }
.kb-adv-urg::before { content:''; width:7px; height:7px; border-radius:50%; background: currentColor; flex:0 0 auto; }

/* ============================================================
   ТИПОГРАФИКА под Stitch: заголовки тоже Hanken Grotesk (не серифная Fraunces).
   В Stitch все заголовки — Hanken Grotesk 500/700. Переопределяем --font-display
   глобально → титулы страниц, заголовки карточек, док-заголовки становятся sans.
   ============================================================ */
:root { --font-display: "Hanken Grotesk", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }

/* ============================================================
   ГАНТ — бары под Stitch: ровная высота 22px по центру строки + радиус 6px
   (вместо растяжки top/bottom:5px по всей высоте строки и мелкого радиуса).
   Центрируем через top:calc(50%-11px) без transform — чтобы не конфликтовать
   с drag. Цвет бара = статус (просрочка red и т.п. — это данные).
   ============================================================ */
.gantt-v2-bar { top: calc(50% - 11px) !important; bottom: auto !important; height: 22px; border-radius: 6px; }
.gantt-v2-bar-cells { border-radius: 6px; }

/* ============================================================
   ДЕТАЛИ ЗАДАЧИ — модалку «Просмотр задачи» (#kanbanViewModal) превращаем в
   правый выезжающий drawer под Stitch (overlay затемняет, панель справа на всю
   высоту). Только этот id — другие модалки не трогаем.
   ============================================================ */
@keyframes kbDrawerSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
#kanbanViewModal.modal-overlay { justify-content: flex-end; align-items: stretch; padding: 0; }
#kanbanViewModal .kb-view-modal {
    max-width: 440px; width: 440px; height: 100vh; max-height: 100vh;
    border-radius: 0; margin: 0; overflow-y: auto;
    box-shadow: -10px 0 34px rgba(15,23,42,0.16);
    animation: kbDrawerSlideIn 0.22s ease-out;
}
/* Контент под Stitch: бокс «Статус/Приоритет/Срок», аккуратные uppercase-метки */
#kanbanViewModal .kb-view-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
#kanbanViewModal .kb-view-row {
    border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-top: 4px;
}
#kanbanViewModal .kb-view-label {
    text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px;
    color: var(--ink-muted); font-weight: 600;
}
#kanbanViewModal .kb-view-cell { gap: 6px; }

/* ============================================================
   ГАНТ — колонки Начало/Конец/Прогресс под Stitch. Расширяем СУЩЕСТВУЮЩУЮ
   левую (замороженную) name-колонку до 440px и раскладываем 4 ячейки
   [Задача | Начало | Конец | Прогресс]. Таймлайн/бары/драг/зависимости не
   трогаем — они выровнены по .gantt-v2-timeline, а не по name-колонке.
   Прогресс — 3-состояние по статусу (точного % в данных нет).
   ============================================================ */
.gantt-v2-name-head, .gantt-v2-task-name, .gantt-v2-phase-name,
.gantt-v2-card.is-stuck-left .gantt-v2-name-head,
.gantt-v2-card.is-stuck-left .gantt-v2-task-name,
.gantt-v2-card.is-stuck-left .gantt-v2-phase-name { width: 444px !important; }
.gantt-v2-name-head { display: flex; align-items: center; gap: 0; }
.gantt-v2-name-head .gv2-h-task { flex: 1 1 auto; min-width: 0; }
.gantt-v2-name-head .gv2-h-meta { flex: 0 0 54px; width: 54px; }
.gantt-v2-name-head .gv2-h-prog { flex: 0 0 90px; width: 90px; }
/* Название задачи — переносится в несколько строк (без троеточия) */
.gantt-v2-task-name .gantt-v2-task-label { flex: 1 1 auto; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
/* Имя фазы короткое — оставляем в одну строку */
.gantt-v2-phase-name .gantt-v2-phase-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ячейка имени и мета-колонки — выравниваем по верху + воздух, чтобы многострочное
   имя не липло к границам строки */
.gantt-v2-task-name { align-items: flex-start !important; padding-top: 7px !important; padding-bottom: 7px !important; }
.gantt-v2-task-name .gv2-meta, .gantt-v2-task-name .gv2-prog { align-self: flex-start; }
.gantt-v2-phase-name { display: flex; align-items: center; }
.gv2-meta { flex: 0 0 54px; width: 54px; font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; font-weight: 400; }
.gv2-prog { flex: 0 0 90px; width: 90px; display: flex; align-items: center; gap: 6px; }
.gv2-prog-track { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.gv2-prog-fill { display: block; height: 100%; border-radius: 3px; background: var(--status-progress); }
.gv2-prog-fill[data-st="done"] { background: var(--status-done); }
.gv2-prog-fill[data-st="overdue"], .gv2-prog-fill[data-st="failed"] { background: var(--status-overdue); }
.gv2-prog-num { flex: 0 0 auto; font-size: 11px; color: var(--ink-muted); min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   СРОЧНОСТЬ/ПРИОРИТЕТ — стиль Stitch: NORMAL серый-контур, HIGH(Срочно)
   красный-контур, CRITICAL(Критично) красная заливка. Было: «Обычная» =
   зелёная заливка (неверно — обычный приоритет не зелёный).
   ============================================================ */
.urgency-pill, .priority-pill {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--ink-muted) !important;
    font-weight: 600;
}
.urgency-pill.is-normal, .priority-pill.is-low, .priority-pill.is-normal {
    background: transparent !important; border-color: var(--border) !important; color: var(--ink-muted) !important;
}
.urgency-pill.is-urgent, .priority-pill.is-medium, .priority-pill.is-high {
    background: transparent !important; border-color: var(--status-failed) !important; color: var(--status-failed) !important;
}
.urgency-pill.is-critical, .priority-pill.is-critical {
    background: var(--status-failed) !important; border-color: var(--status-failed) !important; color: #fff !important;
}

/* ============================================================
   ДОР.КАРТА ТАБЛИЦА — колонка Прогресс (мини-бар + %), 3-состояние по статусу
   (как в Stitch). Колонка добавлена в конец (статус остаётся 5-й — nth-child
   не сдвигается). Этапы уже имеют свой инлайн-прогресс.
   ============================================================ */
.task-prog-td { white-space: nowrap; }
.plan-prog { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.plan-prog-track { flex: 1 1 auto; height: 6px; min-width: 34px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.plan-prog-fill { display: block; height: 100%; border-radius: 3px; background: var(--status-progress); }
.plan-prog-fill[data-st="done"] { background: var(--status-done); }
.plan-prog-num { flex: 0 0 auto; font-size: 11px; color: var(--ink-muted); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   ЧЕКЛИСТ ДОР.КАРТЫ — умещать в один экран без горизонтального скролла.
   table-layout:fixed + компактные колонки (имя гибкое), даты в две строки
   (как в Stitch — экономит ширину), длинные имена — троеточием.
   Только десктоп; на мобиле таблица остаётся со своим скроллом.
   ============================================================ */
@media (min-width: 769px) {
  .plan-table { table-layout: fixed; width: 100%; min-width: 0 !important; }
  .plan-table-wrap { overflow-x: hidden; }
  .plan-table th, .plan-table td { overflow: hidden; }
  .plan-table th:nth-child(3), .plan-table td:nth-child(3) { width: 122px; }  /* Сроки */
  .plan-table th:nth-child(4), .plan-table td:nth-child(4) { width: 124px; }  /* Ответственный */
  .plan-table th:nth-child(5), .plan-table td:nth-child(5) { width: 110px; }  /* Статус */
  .plan-table th:nth-child(6), .plan-table td:nth-child(6) { width: 96px; }   /* Срочность */
  .plan-table th:nth-child(7), .plan-table td:nth-child(7) { width: 140px; }  /* Примечание */
  .plan-table th:nth-child(8), .plan-table td:nth-child(8) { width: 100px; }  /* Прогресс */
  .plan-table th:nth-child(9), .plan-table td:nth-child(9) { width: 30px; }   /* действия */

  /* содержимое не распирает колонки */
  .plan-table .task-name-cell { white-space: nowrap; }
  .plan-table .task-name-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  .plan-table .fio-picker-compact { width: 100% !important; min-width: 0 !important; }
  .plan-table .task-note-input { width: 100%; }

  /* Сроки — в две строки (start над end), как в Stitch */
  .plan-table .task-dates-wrap { flex-direction: column; align-items: stretch; gap: 2px; }
  .plan-table .task-dates-wrap .task-dates-sep { display: none; }
  .plan-table .task-date-input { width: 100%; min-width: 0; }
}

/* Чеклист — ширины колонок через <colgroup> (авторитетно для table-layout:fixed,
   не зависит от colspan-строк). Имя (2-я колонка) — гибкое, остальные компактные.
   Десктоп. */
@media (min-width: 769px) {
  .plan-table { width: 100% !important; table-layout: fixed; }
  .plan-table .pt-col-dates    { width: 116px; }
  .plan-table .pt-col-owner    { width: 122px; }
  .plan-table .pt-col-status   { width: 108px; }
  .plan-table .pt-col-urgency  { width: 92px; }
  .plan-table .pt-col-note     { width: 132px; }
  .plan-table .pt-col-progress { width: 100px; }
  .plan-table .pt-col-actions  { width: 28px; }
}

/* Форсируем table-layout:fixed по id (бьёт любые .plan-table-правила) — иначе
   таблица растёт до контента и проматывается. */
@media (min-width: 769px) {
  #planTable { table-layout: fixed !important; width: 100% !important; max-width: 100% !important; }
}

/* Чеклист — надёжное «уместить в экран»: table-layout:auto + приём max-width:0
   на ячейке имени (она впитывает остаток ширины и клипует контент троеточием),
   остальные колонки фиксированы через colgroup. Бьёт прежние fixed-правила. */
@media (min-width: 769px) {
  #planTable { table-layout: auto !important; width: 100% !important; max-width: 100% !important; }
  #planTable .task-name-cell { max-width: 0; width: 100%; overflow: hidden; }
  #planTable .task-name-cell .task-name-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #planTable .phase-row > td, #planTable .step-row > td { overflow: hidden; }
}

/* ============================================================
   ЧЕКЛИСТ — колонка «Прогресс» убрана, «Сроки» снова в одну строку.
   Перераспределяем ширины (8 колонок), таблица по-прежнему влезает.
   ============================================================ */
@media (min-width: 769px) {
  #planTable .task-dates-wrap { flex-direction: row !important; align-items: center; gap: 6px; }
  #planTable .task-dates-wrap .task-dates-sep { display: inline !important; }
  #planTable .task-date-input { width: 84px; min-width: 0; }
  #planTable .pt-col-dates    { width: 204px; }
  #planTable .pt-col-owner    { width: 124px; }
  #planTable .pt-col-status   { width: 112px; }
  #planTable .pt-col-urgency  { width: 96px; }
  #planTable .pt-col-note     { width: 150px; }
  #planTable .pt-col-actions  { width: 30px; }
}

/* Прогресс в чеклисте не нужен (по просьбе) — скрываем rollup-бар фаз и этапов
   в таблице плана. Карточный вид (rc-*) не затрагивается. */
.plan-table .phase-progress-block,
.plan-table .step-progress-block { display: none !important; }

/* Шапка чеклиста — заголовки в одну строку (без переноса «Ответственный» и пр.) */
@media (min-width: 769px) {
  #planTable thead th { white-space: nowrap; }
  #planTable thead th .th-filter-label { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
  /* чуть шире «Ответственный» (текст+фильтр), компенсируем за счёт «Примечание» */
  #planTable .pt-col-owner { width: 140px; }
  #planTable .pt-col-note  { width: 134px; }
}

/* ============================================================
   ИСР — правая панель «Структура» (Structure List) как в Stitch:
   нумерованное древо-оглавление + холст слева.
   ============================================================ */
.wbs-body { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
#wbsTree.wbs-tree { flex: 1 1 auto; min-width: 0; }
.wbs-structure {
    flex: 0 0 300px; width: 300px; align-self: stretch;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    overflow: auto; max-height: 74vh; box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.wbs-struct-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.wbs-struct-title { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.wbs-struct-add {
    border: 1px solid var(--accent); background: var(--accent); color: var(--accent-on, #fff);
    border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.wbs-struct-add:hover { filter: brightness(1.05); }
.wbs-struct-tree { padding: 8px 6px; }
.wbs-struct-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; font-size: 13px; }
.wbs-struct-item:hover { background: var(--fill); }
.wbs-struct-root { font-weight: 600; color: var(--accent-deep); }
.wbs-struct-l2 { padding-left: 22px; }
.wbs-struct-l3 { padding-left: 40px; }
.wbs-struct-toggle { border: none; background: none; cursor: pointer; color: var(--ink-muted); width: 14px; flex: 0 0 auto; font-size: 11px; padding: 0; line-height: 1; }
.wbs-struct-num { color: var(--ink-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; font-size: 12px; }
.wbs-struct-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.wbs-struct-name:hover { color: var(--accent); }
.wbs-struct-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--status-idle); }
.wbs-struct-dot.is-progress, .wbs-struct-dot.is-review { background: var(--status-progress); }
.wbs-struct-dot.is-done { background: var(--status-done); }
.wbs-struct-dot.is-blocked { background: var(--status-failed); }
.wbs-struct-children.is-collapsed { display: none; }
.wbs-struct-muted { color: var(--ink-muted); font-size: 12px; padding: 4px 8px; }
.wbs-flash { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1100px) { .wbs-structure { display: none; } }

/* ============================================================
   ИСР — компактные карточки в стиле Stitch. Прежняя вертикальная раскладка
   (задачи списком под этапом) сохранена; уменьшены паддинги/коннекторы, задачи
   оформлены как аккуратные белые карточки.
   ============================================================ */
.wbs-node--phase > .wbs-row { padding: 8px 12px !important; }
.wbs-node--step  > .wbs-row { padding: 6px 10px !important; }
.wbs-node--task  > .wbs-row {
    padding: 5px 9px !important;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.wbs-node--phase .wbs-title { font-size: 13px; }
.wbs-node--step .wbs-title, .wbs-node--task .wbs-title { font-size: 12.5px; line-height: 1.3; }
.wbs-phase-num, .wbs-step-num, .wbs-phase-meta, .wbs-step-count { font-size: 9.5px; }
.wbs-node--phase > .wbs-children,
.wbs-node--step  > .wbs-children { padding: 6px !important; }
.wbs-l2 { gap: 5px !important; }
.wbs-node--step + .wbs-node--step { margin-top: 8px; }
.wbs-hook { height: 18px !important; }

/* ============================================================
   ИСР — белые карточки фаз и этапов (как в Stitch); цвет фазы становится
   акцентом номера. Плюс небольшое расстояние между блоками.
   ============================================================ */
.wbs-p-branch .wbs-node--phase > .wbs-row {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.08) !important;
}
.wbs-p-branch .wbs-node--phase > .wbs-row:hover {
    background: var(--surface) !important; filter: none;
    border-color: var(--border-strong, var(--border)) !important;
}
.wbs-node--phase > .wbs-row .wbs-title { color: var(--text-primary) !important; }
.wbs-node--phase .wbs-phase-num { color: var(--phase-color, var(--accent)) !important; }
.wbs-node--phase .wbs-phase-meta { color: var(--ink-muted) !important; }

/* Этап — белая карточка вместо тонированной шапки */
.wbs-node--step > .wbs-row {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.wbs-node--step > .wbs-row:hover { background: var(--surface) !important; border-color: var(--border-strong, var(--border)) !important; }
.wbs-node--step > .wbs-row .wbs-title { color: var(--text-primary) !important; }
.wbs-node--step .wbs-step-num { color: var(--phase-color, var(--accent)) !important; }

/* Небольшое расстояние между блоками */
.wbs-hook { height: 24px !important; }
.wbs-p1 { gap: 1.1em !important; }
.wbs-node--step + .wbs-node--step { margin-top: 10px !important; }
.wbs-l2 { gap: 7px !important; }

/* Подвкладки дорожной карты — убрать горизонтальный скроллбар (ползунок).
   Прокрутка остаётся (колесо/тач), переполнение ловит меню «···». */
.roadmap-subtabs { scrollbar-width: none !important; }
.roadmap-subtabs::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* ============================================================
   КАНБАН — шапка колонки как в Stitch: цветная статус-точка + UPPERCASE-метка
   + приглушённый счётчик после метки (вместо бейджа-числа слева).
   ============================================================ */
.kb-col-header-left { gap: 8px; }
.kb-col-title {
    order: 1;
    text-transform: uppercase; letter-spacing: 0.5px;
    font-size: 11px; font-weight: 600; color: var(--ink-muted);
    display: inline-flex; align-items: center; gap: 8px;
}
.kb-col-title::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--status-idle); flex: 0 0 auto;
}
.kb-col[data-status="progress"] .kb-col-title::before { background: var(--col-accent, var(--status-progress)); }
.kb-col[data-status="review"]   .kb-col-title::before { background: var(--status-progress); }
.kb-col[data-status="done"]     .kb-col-title::before { background: var(--status-done); }
.kb-col[data-status="blocked"]  .kb-col-title::before { background: var(--col-accent, var(--status-failed)); }
.kb-col-count {
    order: 2; background: transparent !important; border: none !important;
    color: var(--ink-muted); font-size: 12px; font-weight: 600;
    padding: 0 !important; min-width: 0;
}

/* ============================================================
   КАНБАН — карточки точь-в-точь как в Stitch: id серым бейджем, теги —
   нейтральные контурные пиллы, чуть просторнее, «···» виден приглушённо.
   ============================================================ */
.kb-card { border-radius: 12px !important; padding: 14px !important; }
.kb-card--roadmap { padding-left: 14px !important; }
.kb-card-id {
    background: var(--color-bg-subtle, #f1f3f7);
    color: var(--color-text-secondary, #6b7280);
    padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* Теги — нейтральные контурные пиллы (как Finance / Dev / High в Stitch) */
.kb-tag, .kb-card-tag {
    background: transparent !important;
    color: var(--color-text-secondary, #6b7280) !important;
    border: 1px solid var(--color-border, #e3e7ee) !important;
    border-radius: 6px !important;
    font-size: 11px !important; font-weight: 500 !important;
    padding: 2px 8px !important;
}
.kb-card-tag--plan {
    background: transparent !important;
    color: var(--color-text-secondary, #6b7280) !important;
    border: 1px solid var(--color-border, #e3e7ee) !important;
}
/* «···» — всегда виден приглушённо (как в Stitch), ярче на ховер */
.kb-card-menu { opacity: 0.4; }
.kb-card:hover .kb-card-menu { opacity: 1; }

/* Канбан — план-ссылка на карточке нейтральная (Stitch без ярких чипов) */
.kb-card-step, .kb-card-linked {
    color: var(--color-text-secondary, #6b7280) !important;
    background: transparent !important;
    border: 1px solid var(--color-border, #e3e7ee) !important;
    border-radius: 6px !important;
}
.kb-card-step-ico, .kb-card-linked-ico { color: var(--color-text-secondary, #6b7280) !important; }

/* ============================================================
   КАНБАН → СПИСОК (таблица) как в Stitch: ID · Задача · Статус · Ответственный ·
   Дедлайн · Приоритет · Проект · Теги · Прогресс.
   ============================================================ */
.kb-adv-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.kb-adv-table thead th, .kb-adv-table .kb-adv-th {
    text-align: left; padding: 12px 14px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-muted); border-bottom: 1px solid var(--border);
    white-space: nowrap; cursor: pointer; user-select: none; background: transparent;
}
.kb-adv-table tbody td {
    padding: 12px 14px; border-bottom: 1px solid var(--border);
    vertical-align: middle; font-size: 13px; color: var(--text-primary);
}
.kb-adv-table .kb-list-row { cursor: pointer; transition: background .12s; }
.kb-adv-table .kb-list-row:hover { background: var(--color-bg-subtle, #f5f7fa); }
.kb-adv-table .kb-adv-id { color: var(--ink-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kb-adv-table .kb-list-title { font-weight: 600; color: var(--text-primary); }
.kb-adv-table .kb-list-title.is-done { text-decoration: line-through; color: var(--ink-muted); font-weight: 500; }
/* Статус — пилл с цветной точкой */
.kb-adv-table .kb-list-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
    white-space: nowrap; background: var(--color-bg-subtle, #f1f3f7); color: var(--text-primary);
}
.kb-adv-table .kb-list-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--status-idle); flex: 0 0 auto; }
.kb-adv-table .kb-list-status[data-s="progress"]::before,
.kb-adv-table .kb-list-status[data-s="review"]::before { background: var(--status-progress); }
.kb-adv-table .kb-list-status[data-s="done"]::before { background: var(--status-done); }
.kb-adv-table .kb-list-status[data-s="blocked"] { background: var(--status-failed-soft, #fbeae6); color: var(--status-failed); }
.kb-adv-table .kb-list-status[data-s="blocked"]::before { background: var(--status-failed); }
/* Ответственный — аватар-инициалы */
.kb-adv-table .kb-list-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
}
.kb-adv-table .kb-list-avatar-more { margin-left: 4px; color: var(--ink-muted); font-size: 11px; }
/* Дедлайн */
.kb-adv-table .kb-list-due { color: var(--ink-muted); white-space: nowrap; }
.kb-adv-table .kb-list-due.is-over { color: var(--status-failed); font-weight: 600; }
/* Приоритет — цветная иконка + метка */
.kb-adv-table .kb-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.kb-adv-table .kb-prio-ico { font-weight: 700; }
.kb-adv-table .kb-prio[data-p="normal"] { color: var(--ink-muted); }
.kb-adv-table .kb-prio[data-p="urgent"] { color: var(--status-warn, #C0742A); }
.kb-adv-table .kb-prio[data-p="critical"] { color: var(--status-failed); }
/* Теги — нейтральные контурные пиллы */
.kb-adv-table .kb-list-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.kb-adv-table .kb-list-tag { display: inline-flex; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); color: var(--ink-muted); font-size: 11px; white-space: nowrap; }
/* Прогресс — бар + % */
.kb-adv-table .kb-prog-cell { min-width: 120px; }
.kb-adv-table .kb-prog { display: inline-flex; align-items: center; gap: 8px; }
.kb-adv-table .kb-prog-track { width: 64px; height: 6px; border-radius: 3px; background: var(--color-bg-subtle, #e8ebf0); overflow: hidden; }
.kb-adv-table .kb-prog-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.kb-adv-table .kb-prog-fill[data-st="done"] { background: var(--status-done); }
.kb-adv-table .kb-prog-fill[data-st="progress"] { background: var(--status-progress); }
.kb-adv-table .kb-prog-num { font-size: 12px; color: var(--ink-muted); min-width: 32px; }

/* Тулбар Канбана (план / исполнитель / группировка) — чистые контролы Stitch */
.kb-toolbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kb-title { font-weight: 600; font-size: 18px; color: var(--text-primary); }
.kb-toolbar-filter { display: inline-flex; align-items: center; gap: 6px; }
.kb-toolbar-filter-label, .kb-adv-tb-label { font-size: 12px; color: var(--ink-muted); }
.kb-toolbar-filter-sel, .kb-adv-group-sel {
    border: 1px solid var(--border); background: var(--surface); color: var(--text-primary);
    border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.kb-adv-toolbar { display: flex; align-items: center; gap: 10px; padding: 4px 2px 12px; flex-wrap: wrap; }
.kb-adv-tb-hint { color: var(--ink-muted); font-size: 12px; margin-left: auto; }

/* Канбан — пилл-табы быстрого фильтра (Все / Мои задачи / Высокий приоритет) как в Stitch */
.kb-pills { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kb-pill {
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-secondary, #6b7280);
    border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.kb-pill:hover { background: var(--color-bg-subtle, #f5f7fa); }
.kb-pill.is-active {
    background: var(--accent-soft, rgba(78,81,128,.12));
    border-color: var(--accent); color: var(--accent-deep, var(--accent)); font-weight: 600;
}
.kb-pill-add { padding: 7px 12px; color: var(--ink-muted); font-size: 16px; line-height: 1; }
.kb-toolbar-right { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }

/* ============================================================
   САЙДБАР (тёмная тема) — текст в цвет темы (дуск), а не белый/серый.
   Светлая тема уже даёт дуск-навигацию, её не трогаем.
   ============================================================ */
[data-theme="dark"] .nav-core-btn,
[data-theme="dark"] .side-link,
[data-theme="dark"] .nav-sub,
[data-theme="dark"] .sidebar-nav .side-label,
[data-theme="dark"] .sidebar-nav .nav-core-label { color: #9094D2 !important; }
[data-theme="dark"] .nav-core-btn:hover,
[data-theme="dark"] .side-link:hover,
[data-theme="dark"] .nav-core-btn.active,
[data-theme="dark"] .side-link.active,
[data-theme="dark"] .nav-sub.active,
[data-theme="dark"] .side-link.active .side-label,
[data-theme="dark"] .side-link.active .nav-core-label { color: #C2C4F2 !important; }
/* лого PRIME BPM — тоже в дуск, а не приглушённый */
[data-theme="dark"] .sidebar-logo, [data-theme="dark"] .brand-name { color: #C2C4F2 !important; }

/* ============================================================
   КАНБАН-СПИСОК — фильтр/группировка в заголовке колонки
   (Статус/Ответственный/Дедлайн/Приоритет) вместо верхней «Группировки».
   ============================================================ */
.kb-adv-table .kb-adv-th { white-space: nowrap; }
.kb-adv-table .kb-adv-th-lbl { cursor: pointer; }
.kb-col-flt {
    border: none; background: none; cursor: pointer; color: var(--ink-muted);
    font-size: 10px; padding: 1px 3px; margin-left: 5px; line-height: 1;
    vertical-align: middle; border-radius: 4px;
}
.kb-col-flt:hover { color: var(--text-primary); background: var(--color-bg-subtle, #f1f3f7); }
.kb-col-flt.is-on { color: var(--accent); }
.kb-col-menu {
    position: fixed; z-index: 9999; min-width: 200px; max-width: 240px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 28px rgba(8,10,18,.18); padding: 6px; max-height: 60vh; overflow: auto;
}
.kb-col-menu-act {
    display: block; width: 100%; text-align: left; border: none; background: none;
    padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.kb-col-menu-act:hover { background: var(--color-bg-subtle, #f5f7fa); }
.kb-col-menu-act.is-on { color: var(--accent); font-weight: 600; }
.kb-col-menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.kb-col-menu-list { display: flex; flex-direction: column; }
.kb-col-menu-item {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    border: none; background: none; padding: 7px 10px; border-radius: 6px;
    font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.kb-col-menu-item:hover { background: var(--color-bg-subtle, #f5f7fa); }
.kb-col-menu-box {
    width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
    color: var(--accent); flex: 0 0 auto;
}
.kb-col-menu-item.is-checked .kb-col-menu-box { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ============================================================
   КАНБАН-ДОСКА — карточки ближе к Stitch: крупный заголовок, больше воздуха,
   аватар в правом нижнем углу.
   ============================================================ */
.kb-card { padding: 16px !important; }
.kb-card-id-row { margin-bottom: 8px; }
.kb-card-title { font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; margin-bottom: 10px !important; color: var(--text-primary); }
.kb-card-tags { margin: 0 0 10px !important; }
/* аватар(ы) — в правый нижний угол (как в Stitch) */
.kb-card-footer { margin-top: 4px; }
.kb-card-footer-left { margin-left: auto; order: 2; }
.kb-card-footer-right { order: 1; }

/* ============================================================
   КАНБАН — approval-карточка как в Stitch: шапка-чип «Ожидает согласования»,
   подсветка карточки, кнопки Утвердить (дуск) / Против (терракота).
   ============================================================ */
.kb-card--awaiting {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent), 0 2px 12px rgba(8,10,18,.10) !important;
}
.kb-card-approval-head {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12px; font-weight: 600; color: var(--accent-deep, var(--accent));
    margin-bottom: 8px;
}
.kb-card-approval-head .kb-appr-ico { display: inline-flex; color: var(--accent); }
.kb-card-approval-head .kb-appr-to { color: var(--ink-muted); font-weight: 500; }
.kb-card-approval-actions { display: flex; gap: 8px; margin-top: 12px; }
.kb-appr-btn {
    flex: 1; border: none; border-radius: 8px; padding: 9px 10px;
    font-size: 13px; font-weight: 600; cursor: pointer; color: #fff;
    transition: filter .12s;
}
.kb-appr-yes { background: var(--accent); }
.kb-appr-no { background: var(--status-failed, #C0553B); }
.kb-appr-btn:hover { filter: brightness(1.08); }
.kb-appr-btn:disabled { opacity: .6; cursor: default; }

/* Approval-карточка не приглушена и заголовок обычного цвета (как в Stitch) */
.kb-card--awaiting { opacity: 1 !important; }
.kb-card--awaiting .kb-card-title { color: var(--text-primary) !important; }

/* Панель согласований в шапке — fixed, чтобы её не обрезал контейнер с overflow
   (позицию задаёт JS под кнопкой). Аналогично прежнему фиксу дропдауна. */
.appr-panel { position: fixed !important; }
.appr-panel { z-index: 4000 !important; }

/* ============================================================
   WORKFLOW (Диаграмма процессов) — ближе к Stitch: видимая сетка-точки,
   карточки-узлы с мягкой тенью и тонким бордером (дуск при выборе), акцентные рёбра.
   ============================================================ */
.wf-canvas-wrap {
    background-image: radial-gradient(var(--border-strong, #D5DAE3) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}
/* Узлы-задачи/подпроцессы — белые карточки с мягким бордером и тенью */
.wf-node--task .wf-node-box,
.wf-node--subprocess .wf-node-box {
    fill: var(--surface, #fff);
    stroke: var(--border, #E3E7EE);
    stroke-width: 1;
}
.wf-node { filter: drop-shadow(0 2px 6px rgba(8, 10, 18, 0.10)); }
/* Выбранный / источник связи — дуск-обводка */
.wf-node.is-selected .wf-node-box,
.wf-node.is-edge-src .wf-node-box { stroke: var(--accent, #4E5180) !important; stroke-width: 2 !important; }
/* Рёбра — акцентный дуск */
.wf-edge { stroke: var(--accent, #4E5180); }
.wf-edge:hover { stroke: var(--accent-deep, #353659); }
/* Тип-метка и заголовок узла — чуть чище */
.wf-node-type { font-size: 10px; fill: var(--ink-muted); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.wf-node-label { font-size: 13px; fill: var(--text-primary, var(--ink)); font-weight: 600; }

/* ============================================================
   ГАНТ — бары как в Stitch: светлый трек статуса + тёмная заливка прогресса,
   скруглённые, тонкая обводка. Тёплый сплошной overdue → мягкий двухтоновый.
   ============================================================ */
.gantt-v2-bar.has-status[data-status="idle"]     { --gc: var(--status-idle); }
.gantt-v2-bar.has-status[data-status="progress"] { --gc: var(--status-progress); }
.gantt-v2-bar.has-status[data-status="done"]     { --gc: var(--status-done); }
.gantt-v2-bar.has-status[data-status="failed"]   { --gc: var(--status-failed); }
.gantt-v2-bar.has-status[data-status="overdue"]  { --gc: var(--status-overdue); }
.gantt-v2-bar.has-status {
    background: color-mix(in srgb, var(--gc, var(--status-idle)) 16%, var(--surface, #fff)) !important;
    border: 1px solid color-mix(in srgb, var(--gc, var(--status-idle)) 40%, transparent) !important;
    border-radius: 6px !important;
    overflow: hidden;
}
.gantt-v2-bar-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--gantt-prog, 0%);
    background: var(--gc, var(--status-idle));
    border-radius: 6px 0 0 6px;
    z-index: 0; pointer-events: none;
}
.gantt-v2-bar.has-status .gantt-v2-bar-cells { background: transparent; }
.gantt-v2-bar.has-status .gantt-v2-bar-seg { border-color: color-mix(in srgb, var(--gc) 22%, transparent) !important; }
/* фаза-строки — лёгкая тонировка (как в Stitch) */
.gantt-v2-phase-row { background: var(--color-bg-subtle, #f5f7fa); }

/* ============================================================
   WORKFLOW — панель «Свойства блока» как Stitch «Properties»: правый дровер,
   шапка с разделителем, чип-нода, поля с лейблами, футер с кнопкой «Готово».
   ============================================================ */
#wfProps.wf-props {
    top: 12px; right: 12px; bottom: 12px;
    width: 300px; max-width: calc(100% - 24px);
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #E3E7EE) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 32px rgba(8,10,18,.12) !important;
    padding: 0 !important;
    display: flex; flex-direction: column;
}
#wfProps .wf-props-head {
    display: flex; align-items: center; gap: 6px;
    padding: 14px 16px; border-bottom: 1px solid var(--border, #E3E7EE); margin: 0;
}
#wfProps .wf-props-title { font-size: 15px; font-weight: 600; color: var(--text-primary, var(--ink)); }
#wfProps .wf-props-x { margin-left: auto; }
#wfProps .wf-props-node { display: flex; align-items: center; gap: 10px; padding: 14px 16px 4px; }
#wfProps .wf-props-node-ico {
    width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft, rgba(78,81,128,.12)); color: var(--accent, #4E5180); font-size: 13px;
}
#wfProps .wf-props-type {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: var(--accent-soft, rgba(78,81,128,.12)); color: var(--accent-deep, var(--accent));
}
#wfProps .wf-props-body { flex: 1 1 auto; overflow: auto; padding: 10px 16px 16px; }
#wfProps .wf-props-field { margin-bottom: 14px; }
#wfProps .wf-props-field > span { font-size: 12px; color: var(--ink-muted); font-weight: 500; margin-bottom: 5px; }
#wfProps .wf-props-field input,
#wfProps .wf-props-field select,
#wfProps .wf-props-field textarea {
    background: var(--surface, #fff) !important; border: 1px solid var(--border, #E3E7EE) !important;
    border-radius: 8px !important; padding: 9px 11px !important; color: var(--text-primary, var(--ink)) !important;
}
#wfProps .wf-props-foot { padding: 12px 16px; border-top: 1px solid var(--border, #E3E7EE); }
#wfProps .wf-props-done {
    width: 100%; background: var(--accent, #4E5180) !important; color: #fff !important;
    border: none !important; border-radius: 8px !important; padding: 9px !important; font-weight: 600; cursor: pointer;
}
#wfProps .wf-props-done:hover { filter: brightness(1.06); }

/* ============================================================
   КАНБАН — аватар ответственного в правый ВЕРХНИЙ угол карточки
   (раньше был снизу и добавлял строку → лишняя высота).
   ============================================================ */
.kb-card .kb-card-footer-left {
    position: absolute; top: 12px; right: 12px;
    margin: 0 !important; order: 0; z-index: 2;
}
.kb-card .kb-card-id-row { padding-right: 36px; }      /* «···» меню — левее аватара */
.kb-card .kb-card-footer { margin-top: 0; min-height: 0; }
/* если в футере остались только счётчики — они и так справа снизу; пустой футер схлопнут */
.kb-card .kb-card-footer:empty { display: none; }

/* Канбан — пилюля даты в тёмной теме: тёмно-красный/янтарный тинт вместо яркого
   тёплого розового (#fee2e2/#fecaca из home-extras.css не тема-зависимы). */
[data-theme="dark"] .kb-card-due.is-overdue {
    background: rgba(212, 106, 106, 0.16) !important;
    color: #E5A6A6 !important;
    border-color: rgba(212, 106, 106, 0.34) !important;
}
[data-theme="dark"] .kb-card-due.is-soon {
    background: rgba(201, 162, 78, 0.16) !important;
    color: #E0C58E !important;
    border-color: rgba(201, 162, 78, 0.34) !important;
}

/* ============================================================
   WORKFLOW — своё окно подтверждения (вместо браузерного confirm).
   ============================================================ */
.wf-confirm-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(8, 10, 18, 0.45);
    display: flex; align-items: center; justify-content: center;
    animation: wfConfFade .12s ease;
}
@keyframes wfConfFade { from { opacity: 0; } to { opacity: 1; } }
.wf-confirm {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #E3E7EE);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(8, 10, 18, 0.32);
    padding: 22px 22px 18px;
    width: 340px; max-width: calc(100vw - 32px);
}
.wf-confirm-msg { font-size: 15px; font-weight: 600; color: var(--text-primary, var(--ink, #181B26)); margin-bottom: 18px; line-height: 1.4; }
.wf-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.wf-confirm-cancel, .wf-confirm-ok {
    border-radius: 9px; padding: 9px 16px; font-size: 14px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; font-family: inherit;
}
.wf-confirm-cancel {
    background: var(--surface, #fff); border-color: var(--border, #E3E7EE);
    color: var(--text-primary, var(--ink, #181B26));
}
.wf-confirm-cancel:hover { background: var(--color-bg-subtle, #f5f7fa); }
.wf-confirm-ok { background: var(--status-failed, #C0553B); color: #fff; }
.wf-confirm-ok:hover { filter: brightness(1.08); }
/* Не-удаляющие подтверждения — основная (дуск) кнопка вместо красной */
.wf-confirm-ok.is-primary { background: var(--accent, #4E5180) !important; }

/* ============================================================
   ДРОВЕР ЗАДАЧИ — селекты статуса/срочности «не системные» (appearance:none +
   своя стрелка), фон по теме. Фикс белого поля в тёмной теме (заголовок/инпуты).
   ============================================================ */
.task-drawer-status, .task-drawer-urgency {
    -webkit-appearance: none; appearance: none;
    background-color: var(--surface, #fff) !important;
    color: var(--text-primary, var(--color-text, #181B26)) !important;
    border: 1px solid var(--border, var(--color-border, #E3E7EE)) !important;
    border-radius: 8px !important;
    padding: 6px 30px 6px 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239AA1AE' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
}
.task-drawer-status:focus, .task-drawer-urgency:focus {
    outline: none;
    border-color: var(--accent, var(--color-primary, #4E5180)) !important;
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(78,81,128,.16)) !important;
}
/* опции в выпадающем списке — по теме (на случай поддержки браузером) */
.task-drawer-status option, .task-drawer-urgency option {
    background: var(--surface, #fff); color: var(--text-primary, var(--color-text, #181B26));
}
/* Тёмная тема: заголовок на фокусе и инпуты — не белый фон, а поверхность темы */
.task-drawer-title:focus { background: var(--surface, #fff) !important; }
.task-drawer-input, .task-drawer-textarea { background: var(--surface, #fff) !important; }
[data-theme="dark"] .task-drawer-title:focus,
[data-theme="dark"] .task-drawer-input,
[data-theme="dark"] .task-drawer-textarea,
[data-theme="dark"] .task-drawer-status,
[data-theme="dark"] .task-drawer-urgency { background-color: var(--color-bg-subtle, #161A24) !important; }

/* Дровер задачи — пилюли «История переносов даты» в тёмной теме: приглушённый
   янтарный тинт вместо яркого тёплого #C9A24E/#FDE68A (не тема-зависимы). */
[data-theme="dark"] .task-drawer-shift-dates {
    background: rgba(201, 162, 78, 0.16) !important;
    color: #E0C58E !important;
    border-color: rgba(201, 162, 78, 0.34) !important;
}

/* Дорожная карта (Карточки) — процент внутри кольца поверх белого центра
   (::after перекрывал текст, поэтому кружок казался пустым). */
.rc-ring::after { z-index: 0; }
.rc-ring span { z-index: 1; }

/* Меню «⋯» фазы (.wbs-popover) — фон по теме, а не hardcode white
   (в тёмной теме был белый попап). Портал в body, [data-theme] на <html> действует. */
.wbs-popover { background: var(--color-surface, #fff) !important; border-color: var(--color-border, #E3E7EE) !important; }

/* ============================================================
   «Сроки» — даты ровно в столбик независимо от бейджа переноса.
   Было: .task-dates-cell text-align:center + inline-flex wrap → при появлении
   значка переноса wrap расширялся и центрированные даты съезжали влево.
   Стало: левое выравнивание — старт/конец на фикс-позициях (инпуты 86px),
   бейдж переноса трейлит справа и НЕ двигает даты.
   ============================================================ */
#tab-plan .task-dates-cell { text-align: left; }
#tab-plan .task-dates-wrap { justify-content: flex-start; }
#tab-plan .plan-table th:nth-child(3),
.plan-table th:nth-child(3) { text-align: left; }

/* ИСР — курсор «рука» для drag-to-pan по пустому месту дерева (узлы — свой DnD). */
#wbsTree { cursor: grab; }
#wbsTree.is-panning { cursor: grabbing; user-select: none; }
#wbsTree .wbs-node { cursor: default; }

/* ИСР — делаем #wbsTree горизонтальным скролл-контейнером: широкое дерево
   (много фаз/глубокая вложенность) раньше вылезало и обрезалось roadmap-sheet
   (overflow:hidden) без скроллбара. Теперь скроллится внутри + работает drag-to-pan. */
#wbsTree { width: 100% !important; box-sizing: border-box; overflow-x: auto !important; }

/* ============================================================
   WORKFLOW — галерея схем процессов (экран выбора перед редактором).
   ============================================================ */
.wf-gallery { padding: 20px 24px; height: 100%; overflow: auto; box-sizing: border-box; }
.wf-gal-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.wf-gal-title { font-size: 20px; font-weight: 700; color: var(--text-primary, var(--ink, #181B26)); }
.wf-gal-tools { margin-left: auto; display: flex; gap: 10px; }
.wf-gal-search, .wf-gal-sort {
    border: 1px solid var(--border, #E3E7EE); border-radius: 9px; padding: 8px 12px;
    background: var(--surface, #fff); color: var(--text-primary, var(--ink, #181B26)); font: inherit; font-size: 14px;
}
.wf-gal-search { min-width: 220px; }
.wf-gal-search:focus, .wf-gal-sort:focus { outline: none; border-color: var(--accent, #4E5180); box-shadow: 0 0 0 3px var(--accent-soft, rgba(78,81,128,.16)); }
.wf-gal-subtitle { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin: 26px 0 12px; }
.wf-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.wf-tile {
    position: relative; background: var(--surface, #fff); border: 1px solid var(--border, #E3E7EE);
    border-radius: 12px; padding: 16px; min-height: 134px; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 8px; font: inherit;
    box-shadow: 0 1px 2px rgba(8,10,18,.04); transition: border-color .12s, box-shadow .12s, transform .12s;
}
.wf-tile:hover, .wf-tile:focus-visible { border-color: var(--accent, #4E5180); box-shadow: 0 6px 18px rgba(8,10,18,.10); transform: translateY(-1px); outline: none; }
.wf-tile-preview { height: 56px; border-radius: 8px; background: var(--color-bg-subtle, #F4F6FA);
    display: flex; align-items: center; justify-content: center; color: var(--accent, #4E5180); }
.wf-tile-preview--tpl { font-size: 24px; }
.wf-tile-name { font-size: 15px; font-weight: 600; color: var(--text-primary, var(--ink, #181B26)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-tile-meta { font-size: 12px; color: var(--ink-muted); margin-top: auto; }
.wf-tile-menu { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: none; border-radius: 7px;
    background: transparent; color: var(--ink-muted); cursor: pointer; font-size: 17px; line-height: 1; opacity: .5; }
.wf-tile-menu:hover { background: var(--color-bg-subtle, #F4F6FA); opacity: 1; }
.wf-tile--create { align-items: center; justify-content: center; text-align: center; gap: 6px;
    border-style: dashed; color: var(--accent, #4E5180); background: var(--color-bg-subtle, #F8F9FB); }
.wf-tile--create:hover { background: var(--accent-soft, rgba(78,81,128,.08)); }
.wf-tile-plus { font-size: 30px; font-weight: 300; line-height: 1; }
.wf-tile--tpl .wf-tile-preview { background: var(--accent-soft, rgba(78,81,128,.10)); }
.wf-gal-empty { grid-column: 1 / -1; padding: 28px; text-align: center; color: var(--ink-muted); font-size: 14px; }
.wf-gal-empty--big { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; }
.wf-gal-empty-ic { font-size: 28px; color: var(--accent, #4E5180); letter-spacing: 2px; }
.wf-gal-empty-actions { display: flex; gap: 12px; }
.wf-gal-empty-actions .wf-tile { min-width: 190px; }
.wf-back { margin-right: 6px; }
.wf-gal-menu { z-index: 5000; min-width: 200px; background: var(--surface, #fff); border: 1px solid var(--border, #E3E7EE);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(8,10,18,.18); padding: 6px; display: flex; flex-direction: column; }
.wf-gal-menu-item { text-align: left; border: none; background: transparent; padding: 9px 12px; border-radius: 7px;
    font: inherit; font-size: 14px; color: var(--text-primary, var(--ink, #181B26)); cursor: pointer; }
.wf-gal-menu-item:hover { background: var(--color-bg-subtle, #F4F6FA); }
.wf-gal-menu-item--danger { color: var(--status-failed, #C0553B); }
@media (max-width: 640px) {
    .wf-gallery { padding: 14px; }
    .wf-gal-grid { grid-template-columns: 1fr; }
    .wf-gal-tools { width: 100%; }
    .wf-gal-search { flex: 1; min-width: 0; }
}

/* ============================================================
   КАНБАН — индикатор приоритета на карточке (бейдж + левая полоска).
   Раньше срочность на доске не отображалась (был только фильтр).
   ============================================================ */
.kb-card-id-row { display: flex; align-items: center; gap: 6px; }
.kb-card-id-row .kb-card-menu { margin-left: auto; }
.kb-card-prio {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.6;
}
.kb-card-prio.is-urgent { background: transparent; border: 1px solid var(--status-failed, #C0553B); color: var(--status-failed, #C0553B); }
.kb-card-prio.is-critical { background: var(--status-failed, #C0553B); border: 1px solid var(--status-failed, #C0553B); color: #fff; }
/* левая цветная полоска для срочных/критичных */
.kb-card--prio-urgent, .kb-card--prio-critical { box-shadow: inset 3px 0 0 var(--status-failed, #C0553B); }

/* ============================================================
   КАНБАН — цветная подложка колонок по статусу (тонкий тинт + верхний акцент).
   Холодно-выровнено: progress = дуск (а не тёплый амбер из KB_COLS).
   ============================================================ */
.kb-col[data-status="todo"]     { --kb-tint: var(--status-idle, #9AA1AE); }
.kb-col[data-status="progress"] { --kb-tint: var(--col-accent, var(--status-progress, #4E5180)); }
.kb-col[data-status="review"]   { --kb-tint: #5B8DEF; }
.kb-col[data-status="done"]     { --kb-tint: var(--status-done, #4E8A6A); }
.kb-col[data-status="blocked"]  { --kb-tint: var(--col-accent, #EF4444); }
/* Подложка колонки как в Stitch: заметный цветной тинт-панель со скруглением и
   верхним акцентом; карточки (белые) сидят внутри с отступом и контрастируют. */
.kb-col {
    border-top: 4px solid var(--kb-tint, #9AA1AE) !important;
    border-radius: 12px;
    background: color-mix(in srgb, var(--kb-tint, #9AA1AE) 14%, var(--surface, #fff)) !important;
    padding: 0 8px 8px !important;
}
.kb-col-header { padding: 10px 4px 8px !important; margin-bottom: 6px !important; }
.kb-col-title { font-weight: 700 !important; color: color-mix(in srgb, var(--kb-tint, #9AA1AE) 70%, var(--color-text)) !important; }
[data-theme="dark"] .kb-col {
    background: color-mix(in srgb, var(--kb-tint, #9AA1AE) 20%, var(--color-surface, #1B1F2A)) !important;
    border-color: color-mix(in srgb, var(--kb-tint, #9AA1AE) 28%, transparent) !important;
}
[data-theme="dark"] .kb-col-title { color: color-mix(in srgb, var(--kb-tint, #9AA1AE) 45%, #E8EBF5) !important; }
/* Карточки — на «бумаге», чтобы выделяться поверх тинт-подложки */
.kb-card { background: var(--surface, #fff) !important; }
[data-theme="dark"] .kb-card { background: color-mix(in srgb, var(--color-surface, #1B1F2A) 88%, #fff) !important; }

/* ============================================================
   ДОРОЖНАЯ КАРТА (Чеклист) — явная типографическая иерархия, чтобы фаза,
   этап и задача не сливались: Фаза = h1 (крупно, жирно), Этап = h2 (средне),
   Задача = h3 (обычный текст). Scoped к .plan-table — Гант/Карточки не задеты.
   ============================================================ */
/* ── ФАЗА (h2) ── */
.plan-table .phase-row td {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
    border-top: 2px solid color-mix(in srgb, var(--phase-color, #94A3B8) 55%, var(--color-border, #E5E7EB)) !important;
}
.plan-table .phase-row strong {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .15px !important;
    text-transform: none !important;
}
.plan-table .phase-row strong::before {
    width: 11px !important; height: 11px !important; margin-right: 11px !important;
}
/* ── ЭТАП (h3) ── */
.plan-table .step-row td { padding-top: 9px !important; padding-bottom: 9px !important; }
.plan-table .step-row td strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
/* ── ЗАДАЧА (h4 / обычный) ── */
.plan-table .task-name-cell .task-name-text {
    font-size: 13px;
    font-weight: 500;
}

/* ============================================================
   ГЛАВНАЯ — умещаем в один экран без вертикального скролла.
   #tab-home заполняет высоту flex-шелла и сам НЕ скроллит; контент-колонки
   (топ-планы, чат) имеют свой внутренний скролл. KPI-плитки компактнее.
   ============================================================ */
.main-area > #tab-home.tab-content.active {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
    padding: 10px 20px 8px !important;
}
#tab-home .home-mockup { flex: 1 1 auto; min-height: 0; padding-bottom: 0; }
/* Компактные KPI-плитки */
#tab-home .home-mockup .kpi-stack { gap: var(--space-1); }
#tab-home .home-mockup .kpi { padding: 7px 13px !important; gap: var(--space-2) !important; }
#tab-home .home-mockup .kpi-ico { width: 32px !important; height: 32px !important; font-size: var(--text-base) !important; }
#tab-home .home-mockup .kpi-value { font-size: var(--text-xl) !important; }
#tab-home .home-mockup .kpi-label { margin-top: 1px !important; }
#tab-home .home-mockup .hello-bar { margin-bottom: 2px !important; }

/* ============================================================
   ЧЕКЛИСТ ДОР.КАРТЫ — ФИНАЛ: всегда влезает по ширине и заполняет контейнер
   (в т.ч. при свёрнутом сайдбаре, когда области больше). Раньше table-layout:auto
   давал колонкам расти по контенту → таблица вылезала вправо / не заполнялась ровно.
   Теперь: fixed-layout + жёсткие компактные колонки (через colgroup .pt-col-*),
   имя впитывает остаток ширины, даты в две строки. Самый низкий в каскаде → бьёт
   прежние auto-правила и viewport-привязку колонки имени (44vw).
   ============================================================ */
@media (min-width: 769px) {
  #planTable { table-layout: fixed !important; width: 100% !important; max-width: 100% !important; }
  /* Колонка имени — гибкая, но с разумным максимумом: НЕ впитывает весь остаток
     (иначе между названием и «Сроки» зиял пустой провал). Остаток забирает
     «Примечание» (pt-col-note: auto) → «Сроки» стоят сразу после названия. */
  #tab-plan #planTable th:nth-child(2), #tab-plan #planTable td:nth-child(2),
  #planTable th:nth-child(2), #planTable td:nth-child(2) { width: clamp(460px, 60vw, 920px) !important; }
  /* Жёсткие компактные колонки */
  #planTable .pt-col-dates    { width: 224px !important; }
  #planTable .pt-col-owner    { width: 168px !important; }
  #planTable .pt-col-status   { width: 116px !important; }
  #planTable .pt-col-urgency  { width: 104px !important; }
  #planTable .pt-col-note     { width: auto !important; min-width: 150px !important; }
  /* Примечание забирает остаток (перебиваем inline width:180px у <th>), но не
     схлопывается ниже 150px: на узких экранах включается внутренний скролл,
     на широких — колонка просто шире. */
  #planTable th:nth-child(7), #planTable td:nth-child(7) { width: auto !important; min-width: 150px !important; }
  #planTable .pt-col-progress { width: 0 !important; }
  #planTable .pt-col-actions  { width: 30px  !important; }
  /* Сроки — компактнее (сдвиг влево): меньше паддинг + инпуты, остаётся одна строка.
     Ширины хватает на «дата — дата» + значок переноса (task-shift-slot). */
  #planTable th:nth-child(3), #planTable td:nth-child(3) { padding-left: 0.5em !important; padding-right: 0.4em !important; }
  #planTable .task-shift-slot { flex: 0 0 auto; }
  /* Ответственный — прижат к левому краю своей колонки (убираем большой
     padding-left:2.25em, из-за которого ФИО-инпут уезжал вправо к Статусу) */
  #tab-plan #planTable th:nth-child(4), #tab-plan #planTable td:nth-child(4),
  #planTable th:nth-child(4), #planTable td:nth-child(4) { padding-left: 8px !important; padding-right: 6px !important; }
  #planTable .task-row td:nth-child(4) [data-fio-picker] { width: 148px !important; max-width: 148px !important; }
  /* Отступ от Статуса */
  #planTable th:nth-child(5), #planTable td:nth-child(5) { padding-left: 16px !important; }
  /* Сроки — в ОДНУ строку: «дата — дата» */
  #planTable .task-dates-wrap { flex-direction: row !important; align-items: center; gap: 4px; flex-wrap: nowrap; }
  #planTable .task-dates-wrap .task-dates-sep { display: inline !important; }
  #planTable .task-date-input { width: 72px !important; min-width: 0; font-size: 11px !important; text-align: center; padding-left: 2px !important; padding-right: 2px !important; }
  /* Имя — клип троеточием, ячейки не распирают таблицу */
  #planTable .task-name-cell { max-width: 0; overflow: hidden; }
  #planTable .task-name-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  #planTable th, #planTable td { overflow: hidden; }
  .roadmap-sheet > .plan-table-wrap { overflow-x: hidden; }
}

/* ============================================================
   САЙДБАР — рейка 64px + раскрытие ОВЕРЛЕЕМ при наведении, без гамбургера.
   Контент всегда отступает на 64px; раскрытая панель (position:fixed, высокий
   z-index) floats поверх экранов и НЕ сдвигает контент. Бьёт прежние «always
   232» (стр.4465) и hamburger-collapse (PHASE F).
   ============================================================ */
@media (min-width: 769px) {
  /* рейка по умолчанию (в т.ч. при старом классе nav-collapsed) */
  .sidebar-nav,
  .app-shell.nav-collapsed .sidebar-nav {
    width: 64px !important;
    overflow: hidden !important;
    z-index: 200 !important;
    box-shadow: none !important;
  }
  /* раскрытие поверх контента при наведении */
  .sidebar-nav:hover {
    width: 248px !important;
    overflow: visible !important;
    box-shadow: 6px 0 24px rgba(8, 10, 18, .14) !important;
  }
  /* контент всегда на 64px — панель раскрывается оверлеем, не двигая его */
  .main-area,
  .app-shell.nav-collapsed .main-area {
    padding-left: 64px !important;
  }
  /* метки видны только в раскрытом состоянии */
  .sidebar-nav .side-label,
  .sidebar-nav .nav-core-label,
  .sidebar-nav .nav-sub .side-label,
  .sidebar-nav .sidebar-brand-label,
  .sidebar-nav .sidebar-section-title,
  .sidebar-nav .sidebar-secondary-toggle,
  .sidebar-nav .sidebar-profile-meta {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity .14s ease;
  }
  .sidebar-nav:hover .side-label,
  .sidebar-nav:hover .nav-core-label,
  .sidebar-nav:hover .nav-sub .side-label,
  .sidebar-nav:hover .sidebar-brand-label,
  .sidebar-nav:hover .sidebar-section-title,
  .sidebar-nav:hover .sidebar-secondary-toggle,
  .sidebar-nav:hover .sidebar-profile-meta {
    opacity: 1 !important;
    pointer-events: auto;
  }
  /* убираем гамбургер из шапки */
  .main-area > header .mobile-hamburger { display: none !important; }
}

/* ============================================================
   ГЛАВНАЯ — поиск в шапке (правый верхний угол), компактнее Топ-3,
   выше дашборд, чистое имя в приветствии.
   ============================================================ */
/* Поиск-пилюля */
.hdr-search {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 12px;
    background: var(--color-bg-subtle, #F1F4FB);
    border: 1px solid var(--color-border, #E3E7EE);
    border-radius: 9999px;
    color: var(--color-text-secondary);
    font: inherit; font-size: 13px; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    margin-right: 4px;
}
.hdr-search:hover { background: var(--color-surface, #fff); border-color: var(--color-primary); color: var(--color-text); }
.hdr-search-label { font-weight: 500; }
.hdr-search-kbd {
    font-size: 11px; font-weight: 600; line-height: 1;
    padding: 2px 5px; border-radius: 5px;
    background: var(--color-surface, #fff); border: 1px solid var(--color-border, #E3E7EE);
    color: var(--color-text-secondary);
}
[data-theme="dark"] .hdr-search { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .hdr-search-kbd { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
@media (max-width: 1100px) { .hdr-search-label, .hdr-search-kbd { display: none; } .hdr-search { padding: 0 9px; } }

/* Приветствие — имя чистым акцентом (без серифной «тонкости») */
#pageHeaderTitle .hc-name {
    color: var(--color-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 600 !important;
    font-size: inherit !important;
    font-family: inherit !important;
    margin-left: .3em;   /* пробел после запятой: «Доброе утро, Имя» */
}

/* Топ-3 проектов — компактнее */
#tab-home .home-mockup .top-plans { padding: 14px 16px !important; }
#tab-home .home-mockup .card-head { margin-bottom: 6px !important; }
#tab-home .hc-roadmap-row { padding: 6px 6px !important; }
#tab-home .hc-roadmap-bar { height: 5px !important; margin: 5px 0 4px !important; }
#tab-home .hc-roadmap-name { font-size: 13px !important; }
#tab-home .hc-roadmap-state { font-size: 11px !important; }

/* Дашборд выше: меньше верхний отступ + компактнее карточки */
.main-area > #tab-home.tab-content.active { padding-top: 4px !important; }
#tab-home .home-mockup .hello-bar { margin-bottom: 0 !important; }
#tab-home .home-mockup .card { padding: 14px 16px !important; }

/* ============================================================
   ИСР — отступ между этапом и его задачами (карточки сливались).
   Задачи лежат в .wbs-l2 (сосед .wbs-node--step внутри .wbs-branch),
   между ними — стебель .wbs-stem-sm. Добавляем воздух.
   ============================================================ */
.wbs-branch > .wbs-l2 { margin-top: 14px !important; }
.wbs-branch > .wbs-stem-sm { min-height: 16px !important; }

/* ============================================================
   ГЛАВНАЯ — чат-блок заканчивается на одном уровне с дашбордом + поиск чатов
   в правый угол шапки (а не во всю строку).
   ============================================================ */
/* Лента-дашборд (center-col) РАСТЯНУТА на всю среднюю строку (1fr), а не сжата
   по контенту. Список внутри заполняет карточку и скроллится при переполнении. */
#tab-home .home-mockup .center-col {
    display: flex; flex-direction: column;
    min-height: 100% !important; align-self: stretch !important; overflow: hidden;
}
#tab-home .home-mockup .center-col > .tab-content { min-height: 0; }
#tab-home .home-mockup .center-col > .tab-content.is-active {
    flex: 1 1 auto; overflow-y: auto; min-height: 0;
}
/* Поиск чатов — в правый угол шапки блока, компактный (не на всю строку) */
#tab-home .home-mockup .tg-list-header {
    display: flex !important; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: nowrap;
}
#tab-home .home-mockup .tg-list-title { flex: 0 0 auto; margin: 0; }
#tab-home .home-mockup .tg-list-search {
    flex: 0 1 auto; width: 150px; max-width: 55%;
}

/* ============================================================
   ИСР — расстояние между блоками (колонки этапов слипались: .wbs-l1 без gap).
   ============================================================ */
/* gap колонок этапов = STEP_GAP в 37-wbs.js (16px) — учтён в phaseW, без наложения */
.wbs-l1 { gap: 16px !important; }           /* колонки этапов внутри фазы */
.wbs-p1 { gap: 2.2em !important; }          /* колонки фаз (отдельные деревья — не наложатся) */
.wbs-l2 { gap: 9px !important; }            /* карточки задач в этапе */

/* Непрерывные линии-коннекторы: перекладина (.wbs-hook::before) заходит в зазор
   между ветками на полгапа с каждой стороны → соседние перекладины смыкаются и
   линия не прерывается. Обрезка у крайних веток (:first/:last-child, выше по
   специфичности) остаётся — линия не вылезает за дерево. */
.wbs-l1 > .wbs-branch   > .wbs-hook::before { left: -8px; right: -8px; }
.wbs-p1 > .wbs-p-branch > .wbs-hook::before { left: -1.1em; right: -1.1em; }

/* ============================================================
   ГЛАВНАЯ — плотнее список чатов + Топ-3 над KPI-дашбордом.
   ============================================================ */
/* Чаты — меньше расстояние между строками */
#tab-home .home-mockup .pc-room-item { padding: 4px 8px !important; gap: 10px !important; }
#tab-home .home-mockup .tg-rooms-scroll { gap: 0 !important; }
/* Порядок колонки: плитки (KPI) вверху, лента-дашборд посередине, Топ-3 — внизу
   (Топ-3 вынесен в отдельную grid-строку top3, см. .layout выше). */
#tab-home .home-mockup .left-col { display: flex; flex-direction: column; }

/* Сайдбар: «PRIME BPM» скрыта в рейке и появляется при наведении ВМЕСТЕ с пунктами
   (тот же фейд .14s), а не «первой». */
/* «PRIME BPM» появляется МЕДЛЕННЕЕ пунктов меню (длиннее + с задержкой) */
.sidebar-nav .sidebar-brand-label { opacity: 0 !important; pointer-events: none; transition: opacity .5s ease .18s !important; }
.sidebar-nav:hover .sidebar-brand-label { opacity: 1 !important; pointer-events: auto; }

/* ============================================================
   СПИСОК ЗАДАЧ (расширенный вид) — одинаковая высота строк, чтобы при
   сортировке они не «прыгали». Ячейки — одна строка с многоточием.
   ============================================================ */
.kb-adv-table .kb-list-row { height: 54px; }
.kb-adv-table .kb-list-row > td {
    height: 54px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.kb-adv-table .kb-list-row > td .kb-list-title,
.kb-adv-table .kb-list-row > td .kb-list-tags,
.kb-adv-table .kb-list-row > td .kb-list-project {
    display: inline-block; max-width: 100%;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle;
}

/* ============================================================
   Топ-3 проектов → «Все»: полный список ОТДЕЛЬНЫМ окном (модалка), а не инлайн.
   ============================================================ */
.hc-rm-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15,16,32,.45);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; animation: hcRmFade .15s ease-out;
}
@keyframes hcRmFade { from { opacity: 0 } to { opacity: 1 } }
.hc-rm-modal {
    width: 560px; max-width: 100%; max-height: 80vh;
    display: flex; flex-direction: column;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E3E7EE);
    border-radius: 14px; box-shadow: 0 20px 60px rgba(15,16,32,.25);
    overflow: hidden;
}
.hc-rm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--color-border, #E3E7EE);
}
.hc-rm-title { font-size: 16px; font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: 8px; }
.hc-rm-count { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); background: var(--color-bg-subtle); border-radius: 9999px; padding: 2px 9px; }
.hc-rm-close { background: transparent; border: 0; font-size: 18px; line-height: 1; color: var(--color-text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.hc-rm-close:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.hc-rm-body { padding: 6px 20px 16px; overflow-y: auto; min-height: 0; }
[data-theme="dark"] .hc-rm-modal { background: var(--color-surface, #1B1F2A); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .hc-rm-overlay { background: rgba(0,0,0,.55); }

/* ============================================================
   Сайдбар-рейка: иконки строго по центру (64px). В свёрнутом виде метки не
   занимают место (display:none) — иначе они сдвигали иконки. На ховере панель
   раскрыта (:hover) и метки снова видны.
   Плюс: видимый курсор в полях поиска.
   ============================================================ */
@media (min-width: 769px) {
  .sidebar-nav:not(:hover) .side-link,
  .sidebar-nav:not(:hover) .nav-core-link,
  .sidebar-nav:not(:hover) .nav-core-btn,
  .sidebar-nav:not(:hover) .nav-sub .side-link,
  .sidebar-nav:not(:hover) .sidebar-secondary-toggle {
    justify-content: center !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .sidebar-nav:not(:hover) .side-label,
  .sidebar-nav:not(:hover) .nav-core-label,
  .sidebar-nav:not(:hover) .nav-sub .side-label,
  .sidebar-nav:not(:hover) .sidebar-section-title {
    display: none !important;
  }
}
/* Курсор виден во всех полях поиска (палитра, чаты, инпуты) */
.cmdk-input, .tg-list-search, #pcSearch, .hdr-search-input,
input[type="search"], input[type="text"] {
    caret-color: var(--color-primary, #4E5180);
}

/* ============================================================
   Командная палитра (Cmd+K) — в стиле редизайна (Dusk) + видимый курсор.
   Живая разметка: .cmdk-window/.cmdk-input-row/.cmdk-item/.cmdk-item-hint.
   ============================================================ */
.cmdk-overlay { background: rgba(15,16,32,.45) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }
.cmdk-window {
    background: var(--color-surface, #fff) !important;
    border: 1px solid var(--color-border, #E3E7EE) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(15,16,32,.30), 0 4px 14px rgba(15,16,32,.12) !important;
}
/* Поле поиска — ОДИН скруглённый прямоугольник: лупа + поле(курсор) + Esc внутри одной
   рамки. Никаких отдельных рамок у инпута. */
.cmdk-input-row {
    margin: 14px 16px 6px !important;
    padding: 11px 14px !important;
    border: 1px solid var(--color-border, #E3E7EE) !important;
    border-radius: 12px !important;
    background: var(--color-surface, #fff) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cmdk-input-row:focus-within {
    border-color: var(--color-primary, #4E5180) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #4E5180) 18%, transparent) !important;
}
/* инпут внутри рамки — без собственной рамки/пилюли/тени-кольца */
.cmdk-window input.cmdk-input, .cmdk-window input.cmdk-input[type="text"] {
    caret-color: var(--color-primary, #4E5180) !important;
    font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important;
    padding-left: 2px !important;
    border: none !important; border-radius: 0 !important; overflow: visible !important;
    box-shadow: none !important; outline: none !important; background: transparent !important;
}
.cmdk-window input.cmdk-input:focus,
.cmdk-window input.cmdk-input:focus-visible {
    box-shadow: none !important; outline: none !important;
    caret-color: var(--color-primary, #4E5180) !important;
}
/* в фокусе прячем плейсхолдер — иначе мигающая каретка сливается с серым текстом «Поиск…» */
.cmdk-input:focus::placeholder { color: transparent !important; }
.cmdk-input:focus::-webkit-input-placeholder { color: transparent !important; }
.cmdk-search-ico { color: var(--color-primary, #4E5180) !important; }
.cmdk-item { padding: 9px 12px !important; border-radius: 10px !important; }
.cmdk-item.is-active {
    background: color-mix(in srgb, var(--color-primary, #4E5180) 12%, transparent) !important;
    color: var(--color-primary, #4E5180) !important;
    box-shadow: inset 3px 0 0 var(--color-primary, #4E5180);
}
.cmdk-item-hint {
    background: color-mix(in srgb, var(--color-primary, #4E5180) 9%, transparent) !important;
    color: var(--color-primary, #4E5180) !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
}
[data-theme="dark"] .cmdk-window { background: var(--color-surface, #1B1F2A) !important; border-color: rgba(255,255,255,.12) !important; }
[data-theme="dark"] .cmdk-overlay { background: rgba(0,0,0,.55) !important; }

/* ============================================================
   Дорожная карта (карточки) — цветовой индикатор фазы: левая полоса + тинт
   номера. Цвет задаётся inline (--rc-color) из 54-roadmap-views.js по палитре.
   ============================================================ */
.rc-phase { border-left: 4px solid var(--rc-color, var(--color-primary, #4E5180)) !important; }
.rc-num {
    background: color-mix(in srgb, var(--rc-color, #4E5180) 16%, transparent) !important;
    color: var(--rc-color, #4E5180) !important;
}
/* Сама фаза — цветная подложка: мягкий тинт на шапке фазы (цвет по --rc-color). */
.rc-phase .rc-head {
    background: color-mix(in srgb, var(--rc-color, #4E5180) 9%, var(--color-surface, #fff)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--rc-color, #4E5180) 16%, transparent) !important;
}
.rc-phase .rc-title { color: color-mix(in srgb, var(--rc-color, #4E5180) 55%, var(--color-text)) !important; }

/* ============================================================
   Диаграмма Ганта — легенда (расшифровка цветов баров + сегодня + крит.путь).
   ============================================================ */
.gantt-v2-legend {
    display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
    padding: 9px 16px; font-size: 12px; color: var(--color-text-secondary, #636366);
    border-bottom: 1px solid var(--color-border, #E3E7EE);
}
.gv2-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gv2-lg-sw { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto;
    background: color-mix(in srgb, var(--gc, var(--status-idle)) 16%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--gc, var(--status-idle)) 45%, transparent); }
.gv2-lg-sw[data-st="idle"]     { --gc: var(--status-idle); }
.gv2-lg-sw[data-st="progress"] { --gc: var(--status-progress); }
.gv2-lg-sw[data-st="done"]     { --gc: var(--status-done); }
.gv2-lg-sw[data-st="overdue"]  { --gc: var(--status-overdue); }
.gv2-lg-today { width: 2px; height: 14px; background: var(--color-danger); flex: 0 0 auto; }
.gv2-lg-crit  { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto;
    box-shadow: inset 0 0 0 2px var(--dusk, #4E5180); }

/* ============================================================
   Дорожная карта (Чеклист) — длительность в днях НАД чертой между датами.
   ============================================================ */
.task-dates-mid {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1; flex: 0 0 auto;
}
.task-dates-days {
    font-size: 9px; font-weight: 700; line-height: 1; margin-bottom: 1px; white-space: nowrap;
    color: var(--color-text-muted, #9AA1AE); font-variant-numeric: tabular-nums;
}
.task-dates-mid .task-dates-sep { line-height: 1; }

/* ============================================================
   Канбан — карточки компактнее + мельче шрифт (не громоздкие).
   ============================================================ */
.kb-board .kb-card { padding: 10px !important; gap: 5px !important; }
.kb-board .kb-card-title, .kb-board .kb-card-name { font-size: 12.5px !important; line-height: 1.3 !important; font-weight: 600 !important; }
.kb-board .kb-card-id { font-size: 10px !important; }
.kb-board .kb-card-tag, .kb-board .kb-tag { font-size: 9.5px !important; padding: 1px 7px !important; }
.kb-board .kb-card-prio { font-size: 9px !important; padding: 0 6px !important; }
.kb-board .kb-card .kb-card-avatar, .kb-board .kb-card [class*="avatar"] { width: 22px !important; height: 22px !important; font-size: 9px !important; }

/* ============================================================
   Чек-лист — разделительные черточки между колонками в шапке таблицы.
   ============================================================ */
#planTable thead th { border-right: 1px solid var(--color-border, #E3E7EE); }
#planTable thead th:first-child,
#planTable thead th:last-child { border-right: none; }

/* ============================================================
   Диаграмма Ганта — разделить «Начало» и «Конец» (и Прогресс) вертикальными
   черточками + отступ, чтобы колонки не слипались («НАЧАЛОКОНЕЦ»).
   ============================================================ */
.gantt-v2-name-head .gv2-h-meta,
.gantt-v2-name-head .gv2-h-prog,
.gantt-v2-task-name .gv2-meta,
.gantt-v2-task-name .gv2-prog {
    box-sizing: border-box; padding-left: 8px;
}
.gantt-v2-name-head .gv2-h-meta { flex: 0 0 60px !important; width: 60px !important; border-left: 1px solid rgba(255,255,255,.14); }
.gantt-v2-name-head .gv2-h-prog { flex: 0 0 96px !important; width: 96px !important; border-left: 1px solid rgba(255,255,255,.14); }
.gantt-v2-task-name .gv2-meta { flex: 0 0 60px !important; width: 60px !important; border-left: 1px solid var(--color-border, #E3E7EE); }
.gantt-v2-task-name .gv2-prog { flex: 0 0 96px !important; width: 96px !important; border-left: 1px solid var(--color-border, #E3E7EE); }

/* ============================================================
   БАТЧ 2026-06-11 · Пункты 2–4 рекомендаций: иерархия заголовков,
   единый язык статусов, единый чип-счётчик просрочки.
   Только визуальный слой, логика не тронута.
   ============================================================ */

/* ── П.2 · Иерархия размеров ─────────────────────────────────
   Заголовок страницы — заметная ступень над заголовками карточек
   (было 20/700 — сливался с card-title 20/500). Подзаголовок тише. */
.main-area > header h1 {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: 1.15;
}
#pageHeaderSubtitle { font-size: 13px; color: var(--ink-muted); }

/* Заголовки карточек — ступень ниже заголовка страницы: 16/600
   (цвет остаётся accent-deep из токен-блока home-mockup) */
#tab-home .home-mockup .card-title,
#tab-home .home-mockup .tg-list-title { font-size: 16px; font-weight: 600; }

/* ── П.3 · Единый язык статусов ──────────────────────────────
   Карточки/лента = мягкий тинт-чип (фон *-soft + статусный текст),
   плотные таблицы = точка+текст (override .plan-table с !important
   выше по файлу продолжает действовать). Все цвета — ТОЛЬКО от
   статусных токенов: вместо слейт/синих литералов (#64748B, info)
   и Tailwind-хексов. В dark тинты следуют за токенами автоматически. */
.status-pill.is-todo,
.status-pill.is-idle     { background: var(--status-idle-soft);     color: var(--ink-muted); }
.status-pill.is-progress { background: var(--status-progress-soft); color: var(--status-progress); }
.status-pill.is-review   { background: var(--accent-soft);          color: var(--accent); }
.status-pill.is-done     { background: var(--status-done-soft);     color: var(--status-done); }
.status-pill.is-blocked,
.status-pill.is-failed   { background: var(--status-failed-soft);   color: var(--status-failed); }
.status-pill.is-overdue  { background: var(--status-overdue-soft);  color: var(--status-overdue); }

/* Дедлайн-чип карточки канбана: light был на Tailwind-литералах
   (#fee2e2/#991b1b из home-extras.css) — переводим на токены,
   как dark-аналог выше по файлу. */
.kb-card-due.is-overdue {
    background: var(--status-overdue-soft);
    color: var(--status-overdue);
    border-color: transparent;
}

/* ── П.4 · Единый чип-счётчик просрочки ──────────────────────
   Один компонент вместо трёх стилей: «Есть просрочки: N» (тулбар
   проекта), «просрочено N» (Топ-3 на Главной). Тот же вид, что у
   .hc-today-tag: пилюля, overdue-тинт, 11/600, tabular-nums. */
.pcb-overdue,
.hc-roadmap-stats .hc-roadmap-overdue,
.hc-roadmap-state .hc-roadmap-overdue {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--status-overdue-soft);
    color: var(--status-overdue);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.hc-roadmap-stats .hc-roadmap-overdue,
.hc-roadmap-state .hc-roadmap-overdue { margin-left: 6px; }

/* Счётчик на вкладках ленты — тот же размер/ритм, остаётся нейтральным */
.home-mockup .tab-badge { font-size: 11px; padding: 2px 8px; line-height: 1.35; }

/* ============================================================
   БАТЧ 2026-06-11-b · По итогам Mobbin-разбора (Legora/Twenty):
   логин-сплит, единые пустые состояния, плотность таблиц,
   тоновые аватары чатов. Только визуальный слой.
   ============================================================ */

/* ── Логин: сплит-каркас как у Legora — слева дуск-панель с брендом,
   справа светлая форма. IDs/обработчики не тронуты. ── */
.login-overlay {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--bg-page);
    align-items: stretch;
    justify-content: stretch;
}
.login-overlay.hidden { display: none; }
.login-brand {
    background:
        radial-gradient(circle at 80% -10%, rgba(133, 137, 199, 0.25), transparent 45%),
        linear-gradient(160deg, #353659 0%, #26273F 55%, #1B1C30 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 56px;
    min-width: 0;
}
.login-brand-inner { margin: auto 0; }
.login-brand-logo {
    font-size: 46px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.login-brand-tagline {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.55;
    color: #C0C2F9;
    max-width: 38ch;
}
.login-brand-foot { font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.login-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    min-width: 0;
}
.login-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-elevated);
    padding: 40px 36px;
}
.login-box h2 { color: var(--dusk-deep); font-weight: 600; letter-spacing: -0.02em; }
.login-box .subtitle { color: var(--ink-muted); }
.login-box .field label { color: var(--ink-muted); }
.login-box .field input,
.login-box .field select {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-primary);
    padding: 10px 12px;
}
.login-box .field input:focus,
.login-box .field select:focus {
    border-color: var(--dusk);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.login-box .btn-login {
    background: var(--dusk);
    border-radius: 10px;
    transition: background 140ms var(--ease);
}
.login-box .btn-login:hover { background: var(--dusk-deep); opacity: 1; }
@media (max-width: 860px) {
    .login-overlay { grid-template-columns: 1fr; }
    .login-brand { display: none; }
}

/* ── Пустые состояния: единый ритм (иконка → титул 16/600 → саб 13 muted) ── */
.kb-list-empty,
.kb-col-empty,
.docs-archive-empty,
.pc-rooms-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--ink-muted);
    font-size: 14px;
}
.files-v2-empty-icon { font-size: 36px; color: var(--ink-muted); opacity: 0.7; }
.files-v2-empty-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.files-v2-empty-sub { font-size: 13px; color: var(--ink-muted); }

/* ── Плотность и выравнивание таблиц (по Twenty): ровная высота строк,
   цифры/даты — tabular, дедлайн и прогресс — вправо, ID — тихий ── */
.kb-adv-table { font-variant-numeric: tabular-nums; }
.kb-adv-table tbody td { height: 40px; }
.kb-adv-table td:nth-child(2) { color: var(--ink-muted); }
.kb-adv-table th:nth-child(6),
.kb-adv-table td:nth-child(6) { text-align: right; }
.kb-adv-table th:nth-child(10),
.kb-adv-table td:nth-child(10) { text-align: right; }
.plan-table { font-variant-numeric: tabular-nums; }

/* ── Аватары чатов: стабильный тон из хэша имени (8 холодных пар),
   вместо одинаковых категорийных градиентов ── */
.pc-room-avatar.pc-tone-0 { background: #ECECF5 !important; color: #4E5180 !important; }
.pc-room-avatar.pc-tone-1 { background: #E4F0EA !important; color: #3F7A5C !important; }
.pc-room-avatar.pc-tone-2 { background: #FDE8E8 !important; color: #9A3324 !important; }
.pc-room-avatar.pc-tone-3 { background: #E8EEF7 !important; color: #3E5E8E !important; }
.pc-room-avatar.pc-tone-4 { background: #F3EFF4 !important; color: #7A5E8A !important; }
.pc-room-avatar.pc-tone-5 { background: #E9F2F2 !important; color: #3E7373 !important; }
.pc-room-avatar.pc-tone-6 { background: #EEF1F5 !important; color: #5A6170 !important; }
.pc-room-avatar.pc-tone-7 { background: #EAEDF9 !important; color: #5560A8 !important; }
[data-theme="dark"] .pc-room-avatar.pc-tone-0 { background: rgba(133,137,199,0.20) !important; color: #ADB1E3 !important; }
[data-theme="dark"] .pc-room-avatar.pc-tone-1 { background: rgba(95,179,137,0.18) !important; color: #8CCBAA !important; }
[data-theme="dark"] .pc-room-avatar.pc-tone-2 { background: rgba(212,106,106,0.18) !important; color: #E39A9A !important; }
[data-theme="dark"] .pc-room-avatar.pc-tone-3 { background: rgba(110,150,200,0.18) !important; color: #9FC0E8 !important; }
[data-theme="dark"] .pc-room-avatar.pc-tone-4 { background: rgba(160,130,180,0.18) !important; color: #C5A8D6 !important; }
[data-theme="dark"] .pc-room-avatar.pc-tone-5 { background: rgba(100,170,170,0.18) !important; color: #93CCCC !important; }
[data-theme="dark"] .pc-room-avatar.pc-tone-6 { background: rgba(154,161,174,0.18) !important; color: #B7BDC9 !important; }
[data-theme="dark"] .pc-room-avatar.pc-tone-7 { background: rgba(120,130,210,0.18) !important; color: #A9B2EE !important; }

/* ============================================================
   БАТЧ 2026-06-11-c · КАНБАН по референсу пользователя:
   единая подложка доски, колонки без собственных панелей и разделены
   пунктиром, карточки одинаковой высоты с левой полоской-индикатором.
   Цвет полоски наследуется от --kb-tint колонки (.kb-col[data-status])
   → при переносе карточки в другую колонку полоска перекрашивается
   автоматически, без JS. НЕ ВЫКЛАДЫВАТЬ на прод без команды.
   ============================================================ */

/* Единая подложка доски */
.kb-board {
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 8px !important;
    gap: 36px !important;       /* больше воздуха между колонками */
}
[data-theme="dark"] .kb-board { background: var(--surface) !important; }

/* Колонки — прозрачные зоны на общей подложке, между ними пунктир */
.kb-col,
[data-theme="dark"] .kb-col {
    background: transparent !important;
    border-top: none !important;
    border-radius: 0;
    padding: 10px 14px 12px !important;
}
.kb-col + .kb-col { border-left: 1px dashed var(--border-strong, #D5DAE3) !important; }
[data-theme="dark"] .kb-col + .kb-col { border-left-color: #3A4257 !important; }

/* Заголовок колонки: цветная точка-индикатор + обычный цвет текста */
.kb-col-title,
[data-theme="dark"] .kb-col-title {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}
.kb-col-title::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--kb-tint, var(--border-strong));
    margin-right: 8px;
    vertical-align: 1px;
}

/* Подсветка колонки при перетаскивании — мягкий тинт зоны */
.kb-col.drag-over { background: color-mix(in srgb, var(--kb-tint, #9AA1AE) 8%, transparent) !important; }

/* Карточки: одинаковая высота, контент не раздувает */
.kb-card {
    min-height: 116px;
    max-height: 116px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-left: 18px !important;
}
.kb-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kb-card-footer { margin-top: auto; }

/* Левая полоска-индикатор цвета колонки */
.kb-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 10px 0 0 10px;
    background: var(--kb-tint, var(--border-strong));
}

/* Заголовок колонки — одна строка с многоточием (не переносить «К выполнению 150») */
.kb-col-header { flex-wrap: nowrap !important; min-width: 0; }
.kb-col-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Уточнение канбана по фидбеку: шире подложка, больше воздуха между
   колонками, сами колонки крупнее, текст карточек мельче — чтобы вся
   информация умещалась в фиксированную карточку. */
.kb-wrap { padding: 8px 10px 14px !important; }
#tab-kanban.tab-content { padding-left: 10px !important; padding-right: 10px !important; }
.kb-board { padding: 8px 2px !important; }
.kb-col {
    /* Тянутся и заполняют ширину доски — без центрирующих «отступов по бокам».
       Этаж min-width: на узком экране упираются в него и доска скроллится. */
    flex: 1 1 0 !important;
    min-width: 260px !important;
    max-width: 320px !important;
    padding: 10px 10px 12px !important;
}
/* Меньше зазора между колонками (был 36px — много фона). */
#tab-kanban .kb-board { gap: 14px !important; justify-content: flex-start !important; }
/* Текст карточки мельче, заголовок до 3 строк */
.kb-board .kb-card-title,
.kb-board .kb-card-name { font-size: 11.5px !important; line-height: 1.35 !important; }
.kb-card-title { -webkit-line-clamp: 3; }
.kb-board .kb-card-id { font-size: 9.5px !important; }
.kb-board .kb-card-tag,
.kb-board .kb-tag { font-size: 9px !important; }
.kb-board .kb-card-due { font-size: 10px !important; }
.kb-board .kb-card-counts,
.kb-board .kb-card-count-item { font-size: 10px !important; }
.kb-board .kb-card .kb-card-avatar,
.kb-board .kb-card [class*="avatar"] { width: 20px !important; height: 20px !important; font-size: 8.5px !important; }

/* Одинаковость карточек = единый минимум; контент не режем: карточка
   с датой/тегами может быть чуть выше (фикс-высота прятала чипы). */
.kb-card { min-height: 122px; max-height: none; padding-bottom: 8px !important; flex-shrink: 0; }

/* Канбан: страница не скроллится — высота заперта под вьюпорт,
   вертикальный скролл живёт только внутри колонок (.kb-cards). */
#tab-kanban.tab-content.active {
    height: calc(100vh - 64px);
    overflow: hidden !important;
    padding-bottom: 0 !important;
    display: flex;
    flex-direction: column;
}
#tab-kanban .kb-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#tab-kanban .kb-toolbar { flex: 0 0 auto; }
#tab-kanban .kb-board { flex: 1 1 auto; min-height: 0; }
#tab-kanban .kb-col { max-height: 100% !important; height: 100%; }

/* Заголовки колонок — на плашке с фоном в тон колонки */
.kb-col-header {
    background: color-mix(in srgb, var(--kb-tint, #9AA1AE) 10%, var(--surface, #fff));
    border-radius: 10px;
    padding: 8px 12px !important;
    margin-bottom: 10px !important;
}
[data-theme="dark"] .kb-col-header {
    background: color-mix(in srgb, var(--kb-tint, #9AA1AE) 16%, var(--surface, #1B1F2A));
}

/* Карточки-«стикеры»: строго одинаковый размер. Каждый ряд — одна строка
   с многоточием (этап/теги раньше переносились и раздували высоту),
   заголовок — максимум 2 строки, свободное место уходит перед футером. */
.kb-card {
    height: 160px;
    min-height: 160px;
    max-height: 160px;
}
.kb-card .kb-card-title { -webkit-line-clamp: 2; }
.kb-card .kb-card-tags,
.kb-card .kb-card-step,
.kb-card .kb-card-linked {
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}
.kb-card .kb-card-step > *,
.kb-card .kb-card-linked > *,
.kb-card .kb-card-tags > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
}

/* Внутрянка карточки-стикера: убираем «форму». Ряды этапа/ссылок были
   рамочными коробками (читались как инпуты), ID — серой плашкой,
   а у пустых карточек посередине висела линия (border-top пустого футера). */
.kb-board .kb-card-id {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-mono);
    color: var(--text-hint, #9AA1AE) !important;
    letter-spacing: 0.02em;
}
.kb-card .kb-card-step,
.kb-card .kb-card-linked,
.kb-card .kb-card-tag--plan {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: var(--ink-muted) !important;
}
.kb-card .kb-card-step svg,
.kb-card .kb-card-linked svg { opacity: 0.55; }
.kb-card-footer { border-top: none !important; }
/* Заголовок — главный текст стикера */
.kb-board .kb-card-title,
.kb-board .kb-card-name { font-size: 12.5px !important; font-weight: 600 !important; }

/* ============================================================
   БАТЧ 2026-06-12 · МОБИЛЬНАЯ ВЕРСИЯ (референс Linear Mobile из
   Mobbin-разбора): починка каркаса + нижний таб-бар + задачи списком.
   ============================================================ */

/* Таб-бар, мобильный сегмент статусов и переключатель вида — только на мобиле */
.mob-tabbar { display: none; }
.kb-mob-seg { display: none; }
.kb-mob-vtoggle { display: none; }

@media (max-width: 768px) {
    /* ── 1. Шапка: компактная, заголовок не обрезается ── */
    .main-area > header {
        padding: 0 12px !important;
        gap: 8px;
        min-height: 52px;
        height: 52px;
    }
    .main-area > header h1 {
        font-size: 17px !important;
        font-weight: 600 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 38vw;
    }
    #pageHeaderSubtitle, #pageHeaderIcon, .page-help { display: none !important; }
    .mobile-hamburger { display: none !important; }   /* навигация — нижним баром */
    .hdr-search-label, .hdr-search-kbd { display: none !important; }
    .hdr-search { padding: 6px !important; border: none !important; background: transparent !important; }
    .main-area > header .btn-logout { display: none !important; }  /* выход — в профиле */
    .hdr-right { gap: 6px !important; }

    /* ── 2. Нижний таб-бар вместо chip-bar ── */
    .mobile-chip-bar, #mobileChipBar { display: none !important; }
    .mob-tabbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1500;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 16px rgba(15, 19, 28, 0.06);
    }
    .mob-tab {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        background: none;
        border: none;
        padding: 4px 2px;
        border-radius: 10px;
        font-size: 10.5px;
        font-weight: 500;
        color: var(--ink-muted);
        cursor: pointer;
    }
    .mob-tab img, .mob-tab svg { width: 22px; height: 22px; opacity: 0.55; }
    /* Активный пункт — пилюля accent-tint, как в Stitch */
    .mob-tab.active {
        color: var(--dusk-deep);
        font-weight: 700;
        background: var(--accent-tint);
    }
    .mob-tab.active img, .mob-tab.active svg { opacity: 1; }
    /* контенту — место под бар */
    .main-area > .tab-content { padding-bottom: 76px !important; }

    /* ── 3. Канбан: фильтры одной прокручиваемой строкой,
            доска — вертикальный список секций-статусов ── */
    #tab-kanban.tab-content.active { height: calc(100vh - 52px - 58px); }
    #tab-kanban .kb-toolbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 8px;
        align-items: center;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    #tab-kanban .kb-toolbar::-webkit-scrollbar { display: none; }
    #tab-kanban .kb-toolbar-row { flex-wrap: nowrap !important; flex: 0 0 auto; }
    #tab-kanban .kb-toolbar select { max-width: 130px; }
    /* переключатель Доска/Список (мобайл) */
    .kb-mob-vtoggle {
        display: flex;
        gap: 4px;
        padding: 4px;
        margin: 0 8px 8px;
        background: var(--fill);
        border-radius: var(--r-pill);
        flex: 0 0 auto;
    }
    .kb-mob-vbtn {
        flex: 1 1 0;
        padding: 8px 10px;
        min-height: 40px;
        border: none;
        background: transparent;
        border-radius: var(--r-pill);
        font-size: 13px;
        font-weight: 600;
        color: var(--ink-muted);
        cursor: pointer;
    }
    .kb-mob-vbtn.is-active { background: var(--surface); color: var(--dusk-deep); box-shadow: 0 1px 2px rgba(15,23,42,.08); }

    /* доска (Stitch v1): один столбец за раз, выбор — сегментами сверху */
    #tab-kanban .kb-wrap { overflow-y: auto; }
    #tab-kanban .kb-board {
        display: block !important;
        overflow: visible !important;
        padding: 4px 8px !important;
    }
    /* сегментный выбор статуса */
    .kb-mob-seg {
        display: flex;
        flex: 0 0 auto;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 4px 8px 10px;
    }
    .kb-mob-seg::-webkit-scrollbar { display: none; }
    .kb-mob-seg-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        min-height: 36px;
        border-radius: var(--r-pill);
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--ink-muted);
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
    }
    .kb-mob-seg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--col-accent, var(--border-strong)); }
    .kb-mob-seg-n { font-variant-numeric: tabular-nums; opacity: 0.7; }
    .kb-mob-seg-btn.is-active {
        background: var(--accent-tint);
        border-color: transparent;
        color: var(--dusk-deep);
        font-weight: 700;
    }
    /* показываем только активный столбец */
    #tab-kanban .kb-board[data-mobcol] > .kb-col { display: none !important; }
    #tab-kanban .kb-board[data-mobcol="todo"]     > .kb-col[data-status="todo"],
    #tab-kanban .kb-board[data-mobcol="progress"] > .kb-col[data-status="progress"],
    #tab-kanban .kb-board[data-mobcol="review"]   > .kb-col[data-status="review"],
    #tab-kanban .kb-board[data-mobcol="done"]     > .kb-col[data-status="done"],
    #tab-kanban .kb-board[data-mobcol="blocked"]  > .kb-col[data-status="blocked"] {
        display: flex !important;
    }
    #tab-kanban .kb-col {
        width: 100%;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 2px !important;
        border-left: none !important;
        border-top: none !important;
    }
    /* заголовок столбца не нужен — статус уже в сегменте */
    #tab-kanban .kb-board[data-mobcol] .kb-col-header { display: none !important; }
    #tab-kanban .kb-cards { overflow: visible !important; max-height: none !important; }
    /* карточки: полная ширина, высота по контенту (стикер-грид — десктопный приём) */
    .kb-card { height: auto !important; min-height: 0 !important; max-height: none !important; }

    /* ── Вид «Список» задач (Stitch f457530b): таблица → карточки ──
       Десктопная широкая таблица на мобиле перестраивается в карточки:
       ID + заголовок, ниже статус + дедлайн. Лишние столбцы скрыты. */
    #tab-kanban .kb-list-wrap { overflow-x: visible !important; }
    #tab-kanban .kb-adv-table,
    #tab-kanban .kb-adv-table tbody { display: block !important; width: 100% !important; }
    #tab-kanban .kb-adv-table thead { display: none !important; }
    #tab-kanban .kb-adv-table tr.kb-list-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
        row-gap: 4px;
        height: auto !important;
        min-height: 0 !important;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 2px rgba(15,23,42,.05);
    }
    #tab-kanban .kb-adv-table tr.kb-list-row > td {
        display: none !important;
        border: none !important;
        padding: 0 !important;
        height: auto !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }
    /* строка 1: ID + заголовок | строка 2: статус + дедлайн */
    #tab-kanban .kb-adv-table tr.kb-list-row > td:nth-child(2) { display: inline-block !important; order: 1; font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
    #tab-kanban .kb-adv-table tr.kb-list-row > td.kb-list-title { display: block !important; order: 2; flex: 1 1 100%; font-size: 14px; font-weight: 600; }
    #tab-kanban .kb-adv-table tr.kb-list-row > td:nth-child(4) { display: inline-block !important; order: 3; flex: 0 0 auto; }
    #tab-kanban .kb-adv-table tr.kb-list-row > td:nth-child(6) { display: inline-block !important; order: 4; flex: 0 0 auto; font-size: 12px; }
    /* групповые заголовки списка — компактная строка */
    #tab-kanban .kb-adv-table tr:not(.kb-list-row) > td { display: block !important; padding: 10px 4px 4px !important; font-weight: 600; color: var(--ink-muted); }

    /* ── 4. Роадмап: компактная панель проекта + таблица «Чеклист»
       горизонтальным скроллом (Stitch 7630b87e: на мобиле не ломаем
       в вертикальные буквы, а скроллим внутри контейнера). ── */
    .plan-context-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 10px !important;
    }
    .plan-context-bar select { max-width: 100% !important; }
    /* сводка (прогресс/ответственный/период) и пустые блоки не должны
       резервировать высоту — панель была ~210px почти пустых */
    #pcbSummary { align-items: flex-start !important; gap: 4px !important; }
    #pcbSummary:empty, .plan-context-bar > :empty { display: none !important; }
    /* Чеклист-таблица: отменяем старый card-reflow из mobile-nav.css
       (.plan-table tbody/td → display:block ломал сетку в «вертикальные
       буквы») и рендерим настоящую таблицу с горизонтальным скроллом
       внутри контейнера. */
    #tab-plan .plan-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; border-radius: 12px; }
    #tab-plan #planTable,
    #tab-plan .plan-table {
        display: table !important;
        table-layout: auto !important;
        width: auto !important;
        /* фиксированный min-width вместо max-content: max-content
           взрывает ширину до ~1e6px из-за процентных прогресс-баров фаз */
        min-width: 720px !important;
        max-width: none !important;
        white-space: nowrap;
    }
    #tab-plan #planTable thead,
    #tab-plan .plan-table thead { display: table-header-group !important; }
    #tab-plan #planTable tbody,
    #tab-plan .plan-table tbody { display: table-row-group !important; width: auto !important; }
    #tab-plan #planTable tr,
    #tab-plan .plan-table tr,
    #tab-plan .plan-table .phase-row,
    #tab-plan .plan-table .step-row,
    #tab-plan .plan-table .task-row {
        display: table-row !important;
        margin: 0 !important;
        background: none;
        border: none;
        box-shadow: none;
    }
    #tab-plan #planTable td,
    #tab-plan #planTable th,
    #tab-plan .plan-table .phase-row td,
    #tab-plan .plan-table .step-row td,
    #tab-plan .plan-table .step-row td[colspan],
    #tab-plan .plan-table .task-row td { display: table-cell !important; white-space: nowrap; }
    #tab-plan .plan-table .plan-drag-handle { display: none !important; }
    #tab-plan #planTable .task-name-cell,
    #tab-plan .plan-table .task-name-cell { max-width: none !important; width: auto !important; white-space: nowrap; }

    /* ── 5. Карточка задачи (task-drawer) — bottom-sheet ── */
    .task-drawer {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 88vh !important;
        max-height: 88vh !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 1600 !important; /* выше таб-бара (1500), иначе бар перекрывал низ листа */
    }
    /* Bottom-sheet — модалка поверх всего: таб-бар прячем, пока drawer открыт
       (как в Stitch e38e4df4, где лист накрывает навигацию целиком). */
    body:has(.task-drawer.is-open) .mob-tabbar { display: none !important; }

    /* ── 6. Паспорт 3+1 — убираем двойные толстые паддинги (roadmap-sheet
       24+24 + passport-root 32+32 = 112px сжимали контент визарда до
       216px, заголовок «О проекте…» наезжал на поля). Визард и read-вид
       уже одноколоночные на мобиле (passport.css ≤820px). ── */
    #tab-passport { padding: 8px !important; }
    #tab-passport .roadmap-sheet { padding: 10px !important; border-radius: 0 !important; }
    #tab-passport .passport-root { padding: 12px !important; }
    #tab-passport .passport-wizard,
    #tab-passport .passport-read { max-width: 100% !important; }
    /* sticky-подзаголовок секции на узкой колонке наезжал на форму:
       у head была фиксированная height:52px + align-items:center, а
       заголовок «О проекте…» в 3 строки (105px) выпирал вниз на поле
       «Название проекта». Снимаем фикс-высоту и центрирование. */
    #tab-passport .passport-section-head {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: flex-start !important;
    }

    /* ── 7. Гант — горизонтальный скролл + липкая колонка задач уже
       работают (.gantt-v2-wrap overflow-x:auto, .gantt-v2-task-name
       sticky left:0). Чиним лишь легенду: она лежит внутри 570px
       скролл-карточки, уезжала влево при скролле и обрезалась справа.
       Закрепляем её слева и переносим по строкам в пределах вьюпорта. ── */
    #tab-gantt .gantt-v2-legend {
        position: sticky !important;
        left: 0 !important;
        width: calc(100vw - 36px) !important;
        max-width: calc(100vw - 36px) !important;
        flex-wrap: wrap !important;
        background: var(--surface, #fff);
        z-index: 2;
    }

    /* ── 8. ИСР/WBS — горизонтальная орг-схема на мобиле раздувается до
       ~7500px (десятки фаз вширь). Вместо неё показываем уже готовый
       вертикальный аутлайн #wbsStructure («Структура») — он совпадает
       со Stitch b89b06bc (вложенный аккордеон 1.0→1.1→1.1.1). Зум
       управляет только орг-схемой, поэтому на мобиле его прячем. ── */
    #tab-schema { padding: 8px !important; }
    #tab-schema .roadmap-sheet { padding: 10px !important; }
    #tab-schema .wbs-body { display: block !important; }
    #tab-schema .wbs-tree { display: none !important; }
    #tab-schema #wbsStructure,
    #tab-schema .wbs-structure { display: block !important; width: 100% !important; }
    #tab-schema .wbs-toolbar .zoom-controls { display: none !important; }
    #tab-schema .wbs-toolbar-hint { display: none !important; }

    /* ── 9. Анализ конкурентов — все 4 вида (Обзор/Конкуренты/
       Сравнительная/SWOT) уже одноколоночные, а сравнительная таблица
       скроллится с липкой колонкой «Критерий» (совпадает со Stitch
       87470f71). Чиним лишь обрезку карточек справа: толстый
       горизонтальный паддинг 32px ужимаем под мобайл. ── */
    #tab-competitors .comp-root { padding-left: 12px !important; padding-right: 12px !important; }
    #tab-competitors .comp-content-grid { padding-left: 12px !important; padding-right: 12px !important; }
    #tab-competitors .comp-subtabs { padding-left: 12px !important; padding-right: 12px !important; }

    /* ── 10. Workflow (диаграмма) — канвас панорамируемый (как в Stitch
       dbce8c4a), палитра нод/точечный фон уже совпадают. Критический
       баг: группа .wf-tools-right (undo/redo/Проверить/Сохранить, 594px,
       nowrap) выходила за тулбар, и «Сохранить» оказывалась за экраном —
       недостижима. Разрешаем перенос групп тулбара. ── */
    #tab-diagram .wf-tools-right,
    #tab-diagram .wf-tools-left { flex-wrap: wrap !important; }
    #tab-diagram .wf-toolbar { gap: 6px !important; }
}

/* Мобильный канбан: ВЕСЬ тулбар — одна горизонтальная прокручиваемая строка */
@media (max-width: 768px) {
    #tab-kanban .kb-toolbar,
    #tab-kanban .kb-toolbar-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }
    #tab-kanban .kb-toolbar { overflow-x: auto; }
    #tab-kanban .kb-toolbar-row { flex: 0 0 auto; gap: 8px; }
    #tab-kanban .kb-toolbar button,
    #tab-kanban .kb-toolbar .kb-toolbar-filter,
    #tab-kanban .kb-toolbar .chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    #tab-kanban .kb-toolbar .kb-toolbar-filter { display: inline-flex; align-items: center; gap: 4px; }
}

/* Мобильный канбан: внутренние контейнеры тулбара (kb-pills, kb-toolbar-right)
   тоже не переносятся — вся строка едет горизонтальным скроллом */
@media (max-width: 768px) {
    #tab-kanban .kb-pills,
    #tab-kanban .kb-toolbar-right {
        flex-wrap: nowrap !important;
        flex: 0 0 auto;
    }
}

/* ── Мобильная Главная: одна колонка (метрики → лента → топ-3 → чаты).
   Десктопный грид 1fr+320px на 390px схлопывал левую колонку в ноль —
   были видны только чаты. Инлайновые высоты от _hcSyncHomeHeights
   перебиваем !important. ── */
@media (max-width: 768px) {
    #tab-home .home-mockup .layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    #tab-home .home-mockup .left-col,
    #tab-home .home-mockup .center-col,
    #tab-home .home-mockup .top-plans,
    #tab-home .home-mockup .tg {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }
    #tab-home .home-mockup .center-col { max-height: 60vh !important; }
    #tab-home .home-mockup .tg { max-height: 70vh !important; }
    #tab-home .home-mockup .kpi-stack { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    #tab-home .home-mockup .kpi { padding: 14px !important; }
    #tab-home .home-mockup .kpi-value { font-size: 24px !important; }

    /* ── Задачи на мобиле: компактные СТРОКИ-список (как Linear), а не
       стикеры. Контекстные ряды и теги прячем, остаётся: id+аватар,
       заголовок одной строкой, дедлайн-чип. ── */
    #tab-kanban .kb-card {
        padding: 10px 12px 10px 16px !important;
        border-radius: 10px;
    }
    #tab-kanban .kb-card .kb-card-tags,
    #tab-kanban .kb-card .kb-card-step,
    #tab-kanban .kb-card .kb-card-linked,
    #tab-kanban .kb-card .kb-card-desc { display: none !important; }
    #tab-kanban .kb-card-title {
        -webkit-line-clamp: 1;
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }
    #tab-kanban .kb-card-id-row { margin-bottom: 2px; }
    #tab-kanban .kb-card-footer { margin-top: 4px !important; }
    #tab-kanban .kb-cards { gap: 6px !important; }
}

/* Мобильная Главная: зажать ширину всей цепочки — внешний .home-layout
   (flex-ряд) раздувался до ~800px min-content'ом детей, правые карточки
   и текст ленты уезжали за край экрана. */
@media (max-width: 768px) {
    #tab-home .home-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 10px 24px !important;
    }
    #tab-home .home-mockup .layout { width: 100% !important; }
    #tab-home .home-mockup .layout > *,
    #tab-home .home-mockup .kpi,
    #tab-home .home-mockup .feed-item,
    #tab-home .home-mockup .feed-body { min-width: 0 !important; }
    #tab-home .home-mockup .kpi-stack {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }
    #tab-home .home-mockup .feed-body { overflow-wrap: anywhere; }
}

/* ══════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ DENSITY-СЛОЙ (≤768px)
   Цель: убрать «всё слишком большое» — уплотнить крупные элементы до
   мобильного масштаба. База (тело 14px, паддинги 14–16) уже в спеке,
   поэтому трогаем только реально раздутое: KPI-карточки, serif-герои,
   избыточный вертикальный воздух. Десктоп не затронут.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* — Главная: KPI-метрики. Было: padding 16, label margin-bottom 10,
         число 32px → карточка ~96px. Стало ~64px. — */
    #tab-home .home-mockup .kpi-stack { gap: 10px !important; }
    #tab-home .home-mockup .kpi {
        padding: 11px 12px !important;
        border-radius: 12px !important;
    }
    #tab-home .home-mockup .kpi-label {
        margin: 0 0 2px !important;
        font-size: var(--text-xs) !important;
        line-height: 1.2 !important;
    }
    #tab-home .home-mockup .kpi-value {
        font-size: 22px !important;
        line-height: 1.1 !important;
    }
    #tab-home .home-mockup .kpi-ico { top: 10px !important; right: 10px !important; }

    /* — Паспорт: serif-герой «О проекте…» был 26px и доминировал.
         Ужимаем до компактного мобильного заголовка. — */
    #tab-passport .passport-section-title {
        font-size: 19px !important;
        line-height: 1.22 !important;
    }
}

/* МОБИЛЬНЫЙ DENSITY-СЛОЙ ч.2 — Канбан-карточки на доске.
   Было: 4 ряда с gap 6px + padding 10 → карточка ~82px при разрежённом
   контенте (id-row, title, пустые linked/footer). Уплотняем gap и
   паддинги, держим равный «стикерный» размер. */
@media (max-width: 768px) {
    #tab-kanban .kb-cards { gap: 8px !important; }
    #tab-kanban .kb-card {
        padding: 8px 10px 8px 14px !important;
        gap: 3px !important;
    }
    #tab-kanban .kb-card-footer:empty,
    #tab-kanban .kb-card-linked:empty { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ СКРОЛЛ ГЛАВНОЙ (≤768px)
   Каркас FIT-TO-VIEWPORT (.app-shell/.main-area height:100dvh +
   overflow:hidden) рассчитан на десктоп: модуль скроллит локально.
   На мобиле home-mockup стекается в ~1550px, а #tab-home обрезан
   overflow:hidden → нижние секции (лента, чат) недоступны =
   «Главная не полная». Делаем #tab-home единым вертикальным
   скроллером и распрямляем вложенные скролл-области.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* специфичность (1,3,0) — ровно как у десктопного FIT-правила
       .main-area > #tab-home.tab-content.active (overflow:hidden) */
    .main-area > #tab-home.tab-content.active {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: 100% !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 76px !important; /* чтобы низ не уходил под таб-бар */
    }
    #tab-home .home-mockup { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; }
    /* распрямляем колонки: натуральная высота, без вложенного скролла —
       вся высота отдаётся скроллу #tab-home */
    #tab-home .home-mockup .layout,
    #tab-home .home-mockup .left-col,
    #tab-home .home-mockup .center-col,
    #tab-home .home-mockup .top-plans,
    #tab-home .home-mockup .tg {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    #tab-home .home-mockup .center-col > .tab-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ПАНЕЛЬ ПРОЕКТА (.plan-context-bar, ≤768px)
   Общий бар над подвкладками проекта (Паспорт/Конкуренты/Карта/Гант/
   ИСР) держал фикс-высоту ~170px: селектор 28px + сводка, но дети
   сводки лишь ~44px → ~125px мёртвой белой полосы над контентом.
   Сводим к компактной строке: бар и сводка по высоте контента.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .plan-context-bar {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 6px 10px !important;
        gap: 4px !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;   /* column+wrap уводил селекторы во 2-ю колонку за экран */
        align-items: stretch !important;
    }
    /* Сводка (прогресс/период/просрочки) и действия раздували бар — на
       мобиле скрыты (видны на Главной/Дорожной карте). А вот селекторы
       контекста (Департамент/Отдел/Проект) нужны по роли — возвращаем их. */
    #pcbSummary, #pcbActions { display: none !important; }
    /* Контекст-селекторы: компактная строка с переносом, тач-таргеты ≥44px.
       Видимость каждого селектора по роли задаёт JS (inline display) —
       CSS только раскладка/размер показанных. */
    #pcbContext {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        width: 100%;
        order: 9;            /* под планом/именем проекта */
    }
    #pcbContext .dept-selector-label {
        font-size: 12px;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    #pcbContext .dept-select-styled,
    #pcbContext .project-select-styled {
        flex: 1 1 140px;
        min-width: 0;
        max-width: 100% !important;
        min-height: 44px;
        font-size: 16px;     /* ≥16px — iOS не зумит при фокусе */
    }
    #pcbContext .project-selector-wrap {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1 1 100%;      /* «Проект» — отдельной строкой */
    }
    #pcbContext .project-selector-wrap .project-select-styled { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ КАНБАН — компактнее «хром» (≤768px)
   До первой карточки было ~266px: переключатель Доска/Список (48) +
   фильтр-пилюли + счётчик + сегменты статусов (50) с копящимися
   отступами. Ужимаем высоты/зазоры — карточки поднимаются над сгиб.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #tab-kanban .kb-mob-vtoggle { margin: 0 8px 4px !important; padding: 3px !important; }
    #tab-kanban .kb-mob-vbtn { padding: 6px 10px !important; }
    #tab-kanban .kb-toolbar { margin-bottom: 6px !important; gap: 6px !important; }
    #tab-kanban .kb-mob-seg { padding: 2px 8px 6px !important; }
    #tab-kanban .kb-mob-seg-btn { padding: 5px 12px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ДОРОЖНАЯ КАРТА — переключатель плотности (Компактный/Обычный/Просторный)
   data-density на #tab-plan покрывает оба вида: Чеклист (#planTable) и
   Карточки (.rc-*). Только размеры/отступы — цвета через токены.
   ══════════════════════════════════════════════════════════════════ */
.roadmap-view-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.roadmap-density-switch {
    display: inline-flex; align-items: center; gap: 4px;
}
.roadmap-density-switch .rd-label {
    font-size: var(--text-xs); color: var(--color-text-secondary);
    margin-right: 4px;
}
.roadmap-density-switch .rd-seg {
    font: inherit; font-size: var(--text-xs); font-weight: 500;
    padding: 5px 10px; border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text-secondary);
    cursor: pointer; transition: background .14s, color .14s, border-color .14s;
    min-height: 32px;
}
.roadmap-density-switch .rd-seg:hover { border-color: var(--color-border-strong); }
.roadmap-density-switch .rd-seg.is-active {
    background: var(--accent-soft); color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ── Компактный: уплотняем строки Чеклиста и карточки ── */
#tab-plan[data-density="compact"] #planTable td { padding-top: 4px !important; padding-bottom: 4px !important; }
#tab-plan[data-density="compact"] #planTable .phase-row td { padding-top: 6px !important; padding-bottom: 6px !important; }
#tab-plan[data-density="compact"] .rc-phase { margin-bottom: 8px; }
#tab-plan[data-density="compact"] .rc-body { padding: 6px 8px; }
#tab-plan[data-density="compact"] .rc-stage { padding: 4px 8px; }
#tab-plan[data-density="compact"] .rc-task { padding: 5px 8px; gap: 8px; }
#tab-plan[data-density="compact"] .rc-task-title { font-size: var(--text-sm); }
#tab-plan[data-density="compact"] .rc-task-meta,
#tab-plan[data-density="compact"] .rc-stage-dates,
#tab-plan[data-density="compact"] .rc-hmeta { font-size: 11px; }
#tab-plan[data-density="compact"] .rc-head { padding: 8px 10px; }

/* ── Просторный: больше воздуха ── */
#tab-plan[data-density="cozy"] #planTable td { padding-top: 12px !important; padding-bottom: 12px !important; }
#tab-plan[data-density="cozy"] .rc-phase { margin-bottom: 20px; }
#tab-plan[data-density="cozy"] .rc-body { padding: 16px 18px; }
#tab-plan[data-density="cozy"] .rc-stage { padding: 12px 14px; }
#tab-plan[data-density="cozy"] .rc-task { padding: 14px 16px; gap: 14px; }
#tab-plan[data-density="cozy"] .rc-head { padding: 18px 20px; }

/* Канбан: единый размер карточек (Jira) — min-height, чтобы короткие
   карточки не выглядели «обрезанными», а ряд был ритмичным. Только на
   доске (не в списке). */
.kb-board:not(.kb-board--list) .kb-card { min-height: 92px; }

/* ── Канбан: горизонтальный скролл доски внутри окна (не обрезать колонки) ──
   tab-content (флекс-колонка) рос до ширины доски (~1600) и обрезался
   overflow:hidden у main-area → крайняя колонка уходила под правый край.
   min-width:0 по флекс-цепочке включает реальный overflow-x:auto доски. */
#tab-kanban.tab-content.active,
#tab-kanban .kb-wrap,
#tab-kanban .kb-board { min-width: 0; max-width: 100%; }
#tab-kanban .kb-board { overflow-x: auto !important; padding-right: 14px; }

/* Контент карточек не вылезает за её правый край: длинный «Проект: …» и
   шаг усекаются с тултипом, чипы не шире карточки. */
.kb-card { overflow: hidden; }
.kb-card-id-row, .kb-card-tags, .kb-card-footer { min-width: 0; max-width: 100%; }
.kb-card-linked, .kb-card-step { min-width: 0; max-width: 100%; box-sizing: border-box; }
.kb-card-linked-text, .kb-card-step-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kb-card-due, .kb-card-prio, .kb-card-tag, .kb-card-tag--plan { max-width: 100%; box-sizing: border-box; }
.kb-card-title { overflow-wrap: anywhere; }

/* ── Канбан: название задачи не должно прятаться при тег+проект+дедлайн ──
   Карточка была жёстко height:160px (max-height:160px) → при насыщенном
   контенте flex-сжимался именно заголовок (до ~9px). Делаем высоту по
   контенту (min-height сохраняем для «стикерного» вида), а заголовок —
   не сжимаемым. */
#tab-kanban .kb-card {
    height: auto !important;
    max-height: none !important;
    min-height: 132px;
}
#tab-kanban .kb-card .kb-card-title {
    flex-shrink: 0 !important;     /* заголовок держит свои до 2 строк */
}

/* ── Канбан: колонки по центру, когда влезают; при переполнении —
   от левого края (safe), чтобы крайние не обрезались и доска скроллилась. */
#tab-kanban .kb-board { justify-content: safe center; }

/* ══════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ПЛОТНОСТЬ — полный проход (≤768px). Уплотняем раздутые
   места: шапка фазы, контролы дорожной карты, крупные заголовки.
   Только размеры/отступы; десктоп и логика не задеты.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Дорожная карта — шапка фазы компактнее */
    #tab-plan .rc-head { padding: 12px 14px !important; gap: 10px !important; }
    #tab-plan .rc-title { font-size: 16px !important; }
    #tab-plan .rc-hmeta { font-size: 12px !important; margin-top: 2px !important; }
    #tab-plan .rc-ring { width: 42px !important; height: 42px !important; }
    /* Контролы дорожной карты — плотный ряд */
    #tab-plan .roadmap-view-bar { gap: 8px !important; margin-bottom: 8px !important; }
    #tab-plan .roadmap-density-switch .rd-seg { padding: 5px 9px !important; min-height: 40px; }
    #tab-plan .roadmap-density-switch .rd-label { display: none !important; } /* «Плотность:» — скрыть подпись */
    /* Селект «Фаза» и «Добавить задачу» — компактнее по высоте */
    #tab-plan .plan-add-task-btn, #tab-plan .roadmap-add-btn { min-height: 44px; }
}

/* ── Чеклист (мобайл): заголовок задачи не налезает на кружок-чекбокс.
   Кружок ::before позиционирован в em (left 3.25em + 1.15em ≈ 4.4em), а
   отступ ячейки был фиксированным 36px → текст уходил под кружок. Клиренс
   задаём в em — тогда он всегда правее кружка. ── */
@media (max-width: 768px) {
    #tab-plan #planTable .task-row .task-name-cell { padding-left: 5em !important; }
    /* Контекст-селекторы проекта (#deptSelect/#divSelect/#deptProjectSelect) —
       компактные, в один рост с #planSelect (28px). Раньше deptSelect был
       38px/15px и смотрелся «огромным». */
    #pcbContext .dept-select-styled,
    #pcbContext .project-select-styled,
    #deptSelect, #divSelect, #deptProjectSelect {
        min-height: 0 !important;
        height: 30px !important;
        padding: 4px 26px 4px 10px !important;
        font-size: 13px !important;
    }
    #pcbContext { gap: 4px !important; }
    .plan-context-bar { padding: 4px 10px !important; gap: 3px !important; }
}

/* Кнопка «Сформировать дорожную карту» в тулбаре Workflow — акцентная,
   чтобы отличаться от обычных wf-btn. Цвета из токенов. */
.wf-toolbar .wf-btn--roadmap {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
}
.wf-toolbar .wf-btn--roadmap:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

/* ── Канбан (мобайл): лист действий по карточке «Переместить в…» ──
   Открывается тапом по «…» (kbCardMenu) на ≤768px. Через токены. ── */
.kb-move-overlay {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(0,0,0,.38);
    display: flex; align-items: flex-end; justify-content: center;
}
.kb-move-sheet {
    width: 100%; max-width: 520px;
    background: var(--color-surface, #fff);
    color: var(--color-text, #1a1a2e);
    border-radius: 16px 16px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(0,0,0,.18);
    max-height: 80vh; overflow-y: auto;
}
.kb-move-grab { width: 40px; height: 4px; border-radius: 999px; background: var(--color-border-strong, #cbd0db); margin: 6px auto 10px; }
.kb-move-title { font-size: 15px; font-weight: 700; margin: 2px 4px 10px; }
.kb-move-label { font-size: 12px; color: var(--color-text-muted, #6b7280); margin: 12px 4px 6px; text-transform: uppercase; letter-spacing: .04em; }
.kb-move-open, .kb-move-opt, .kb-move-cancel {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 48px; padding: 12px 14px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px; margin-bottom: 8px;
    background: var(--color-surface-2, #f8f9fb); color: inherit;
    font-size: 15px; text-align: left; cursor: pointer;
}
.kb-move-open { justify-content: center; font-weight: 600; }
.kb-move-opt.is-current { opacity: .55; }
.kb-move-opt[disabled] { opacity: .4; cursor: default; }
.kb-move-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.kb-move-cancel { justify-content: center; background: transparent; color: var(--color-text-muted, #6b7280); margin-top: 4px; }

/* ── Гант (мобайл ≤768px): таймлайн был зажат — левая колонка пакует
   Задача+Начало+Конец+Прогресс (~444px) и съедает ширину. Прячем мета-
   подстолбцы, сужаем имя до 150px, таймлайн получает место и скроллится
   в своём контейнере (.gantt-v2-wrap уже overflow-x:auto, имя sticky).
   id-скоуп + !important — чтобы перебить !important-правила выше. ── */
@media (max-width: 768px) {
    #tab-gantt .gantt-v2-name-head .gv2-h-meta,
    #tab-gantt .gantt-v2-name-head .gv2-h-prog,
    #tab-gantt .gantt-v2-task-name .gv2-meta,
    #tab-gantt .gantt-v2-task-name .gv2-prog { display: none !important; }
    #tab-gantt .gantt-v2-name-head,
    #tab-gantt .gantt-v2-task-name {
        width: 150px !important; min-width: 150px !important;
        max-width: 150px !important; flex: 0 0 150px !important;
    }
    #tab-gantt .gantt-v2-grid-bg { left: 150px !important; }
    /* компактнее строки */
    #tab-gantt .gantt-v2-task-name { font-size: var(--text-xs) !important; }
}

/* ── Карточки дорожной карты: drag-reorder (фазы/этапы/задачи) ── */
#planCards .rc-task[draggable="true"], #planCards .rc-stage[draggable="true"] { cursor: grab; }
#planCards .rc-head[draggable="true"] { cursor: grab; }
#planCards .rc-dragging { opacity: .5; }
#planCards .rc-drag-over { outline: 2px dashed var(--color-primary, #4E5180); outline-offset: -2px; border-radius: 8px; }
#planCards .rc-drag { color: var(--ink-muted, #9aa1ae); margin-right: 4px; cursor: grab; font-size: 12px; user-select: none; }