/* ── Меню «Файл» в toolbar Дорожной карты ─────────────────────── */
        .file-menu-wrap { position: relative; display: inline-block; }
        .file-menu-btn { display: inline-flex; align-items: center; gap: 4px; }
        .file-menu-ico { font-size: var(--text-base, 14px); }
        .file-menu-caret {
            font-size: 10px;
            color: var(--color-gray-400, #9ca3af);
            transition: transform 0.15s ease;
        }
        .file-menu-btn[aria-expanded="true"] .file-menu-caret { transform: rotate(180deg); }
        .file-menu {
            /* position:fixed, чтобы выйти из stacking-контекста .toolbar/.tab-content
               — иначе sticky-шапка таблицы плана (.plan-table th) перекрывает
               меню при любом z-index. Координаты top/left выставляются в JS
               из getBoundingClientRect() кнопки «Файл». */
            position: fixed;
            min-width: 200px;
            background: var(--color-surface, #fff);
            border: 1px solid var(--color-border, #e5e7eb);
            border-radius: var(--radius-md, 8px);
            box-shadow: var(--shadow-2, 0 4px 16px rgba(8, 10, 18,0.12));
            padding: 4px;
            z-index: 1100;
        }
        .file-menu button {
            display: flex; align-items: center; gap: 8px;
            width: 100%;
            padding: 8px 12px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm, 6px);
            font-size: var(--text-sm, 13px);
            font-family: inherit;
            color: var(--color-text, #111827);
            cursor: pointer;
            text-align: left;
            transition: background 0.12s;
        }
        .file-menu button:hover { background: var(--color-gray-100, #f5f5f7); }
        .file-menu-item-ico {
            display: inline-flex; align-items: center; justify-content: center;
            width: 18px; color: var(--color-gray-500, #636366);
        }

        /* ── FioPicker: chip-based multi-select для поля «Ответственный» ──
           Подключается к любому <input type="text" data-fio-picker>.
           Подменяет ввод на чипы + поиск по /api/users — никаких
           «свободных» написаний, только строгий выбор из реальных юзеров. */
        .fio-picker {
            position: relative;
            display: block;
            width: 100%;
            min-height: 24px;
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            cursor: default;
        }
        /* Без рамки: визуально остаются только чипы + «+». Лёгкая подсветка
           при наличии поиска (focus-within) — тонкое кольцо, без коробки. */
        .fio-picker:focus-within { background: transparent; }
        .fio-picker--compact { min-height: 22px; }
        /* В табличных ячейках picker узкий (~160px) — dropdown должен быть шире,
           чтобы длинные ФИО читались целиком. */
        .fio-picker--compact .fio-picker-dropdown { min-width: 260px; right: auto; }
        .fio-picker-hidden-input { display: none !important; }
        /* Чипы — в столбик когда их несколько, «+» всегда сбоку (top-right
           через position: absolute). Padding-right у chips-контейнера
           оставляет место под кнопку. */
        .fio-picker-chips {
            display: flex; flex-direction: column; align-items: flex-start;
            gap: 4px;
            padding-right: 26px;
            min-width: 0;
        }
        .fio-chip {
            display: inline-flex; align-items: center; gap: 4px;
            background: var(--color-bg-subtle);
            color: var(--color-text-secondary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-pill, 999px);
            padding: 2px 4px 2px 10px;
            font-size: var(--text-xs, 12px);
            font-weight: 500;
            line-height: 1.4;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
        }
        .fio-chip-label {
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }
        /* Внешние исполнители (подрядчики, контрагенты — не из списка
           users компании). Нейтральный серый, чтобы отличать от штатных,
           но без «ошибочного» красного. */
        .fio-chip--external {
            background: var(--color-gray-100, #f5f5f7);
            color: var(--color-gray-700, #3a3a3c);
            border-color: var(--color-gray-300, #d1d5db);
        }
        /* Старое имя класса, для обратной совместимости. */
        .fio-chip--unknown { background: #fff5f5; color: #b91c1c; border-color: #fecaca; }
        /* Опция в выпадашке: «+ Добавить «X» — внешний» */
        .fio-picker-opt--external {
            border-top: 1px solid var(--color-border, #e5e7eb);
            margin-top: 4px;
            padding-top: 8px;
            color: var(--color-gray-700, #3a3a3c);
            font-size: var(--text-xs, 12px);
        }
        .fio-picker-opt-add {
            display: inline-flex; align-items: center; justify-content: center;
            width: 16px; height: 16px;
            background: #EEEDF6;
            color: #7B789A;
            border-radius: 50%;
            font-weight: 600;
            margin-right: 4px;
        }
        .fio-picker-opt-hint {
            color: var(--color-gray-400, #9ca3af);
            font-size: var(--text-xs, 12px);
            margin-left: 4px;
        }
        .fio-chip-x {
            display: inline-flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            width: 16px; height: 16px;
            background: transparent; border: none;
            color: currentColor; opacity: 0.6;
            cursor: pointer; padding: 0;
            border-radius: 50%;
            font-size: 14px; line-height: 1;
        }
        .fio-chip-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
        .fio-picker-search {
            flex: 1; min-width: 110px;
            border: none; outline: none;
            background: transparent;
            padding: 4px 6px;
            font-size: var(--text-sm, 13px);
            font-family: inherit;
            color: var(--color-text, #111827);
        }
        .fio-picker-search::placeholder {
            color: var(--color-gray-400, #9ca3af);
            font-size: var(--text-xs, 12px);
        }
        /* Кнопка «+» — компактная, появляется когда поиск скрыт.
           Сжимает занимаемое место в 5-10 раз против всегда-видимой
           поисковой строки. */
        .fio-picker-add {
            position: absolute; top: 0; right: 0;
            display: inline-flex; align-items: center; justify-content: center;
            width: 22px; height: 22px;
            background: transparent;
            border: 1px dashed var(--color-border-strong, #d1d5db);
            border-radius: 50%;
            color: var(--color-gray-400, #9ca3af);
            font-size: 14px; line-height: 1;
            cursor: pointer; padding: 0;
            transition: border-color 0.12s, color 0.12s, background 0.12s;
        }
        .fio-picker-add:hover {
            border-color: var(--color-primary, #3E3C59);
            color: var(--color-primary, #3E3C59);
            background: var(--color-primary-25, #f4f2fa);
            border-style: solid;
        }
        .fio-picker:focus-within .fio-picker-add { display: none; }
        .fio-picker-dropdown {
            position: absolute; top: calc(100% + 4px); left: 0; right: 0;
            background: var(--color-surface, #fff);
            border: 1px solid var(--color-border, #d1d5db);
            border-radius: var(--radius-md, 8px);
            box-shadow: var(--shadow-2, 0 4px 16px rgba(8, 10, 18,0.12));
            z-index: 1000;
            max-height: 240px; overflow-y: auto;
            padding: 4px;
        }
        .fio-picker-opt {
            padding: 6px 10px;
            border-radius: var(--radius-sm, 6px);
            font-size: var(--text-sm, 13px);
            color: var(--color-text, #111827);
            cursor: pointer;
            line-height: 1.4;
        }
        .fio-picker-opt:hover {
            background: var(--color-gray-100, #f5f5f7);
        }
        .fio-picker-empty {
            padding: 12px 10px;
            font-size: var(--text-xs, 12px);
            color: var(--color-gray-400, #9ca3af);
            text-align: center;
        }

        /* App-bar превратили в hero: большой заголовок страницы слева,
компактный правый блок (уведомления, прогресс, юзер). Стиль ближе
           к Apple Settings / App Store header'у — много воздуха, тонкий
           divider, frosted blur. */
        header {
            min-height: 56px;
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(6px) saturate(140%);
            -webkit-backdrop-filter: blur(6px) saturate(140%);
            border-bottom: 1px solid var(--color-border);
            color: var(--color-text);
            padding: 8px 32px;
            display: flex; align-items: center; justify-content: space-between;
            gap: var(--space-4);
            position: sticky; top: 0; z-index: 20;
            box-shadow: none;
        }
        header h1 {
            font-size: var(--text-md);
            font-weight: 600;
            letter-spacing: -0.015em;
            color: var(--color-text);
            line-height: 1.2;
        }
        header > div:first-child span {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            margin-top: 1px;
            display: block;
            letter-spacing: -0.005em;
            line-height: 1.3;
        }
        @media (max-width: 768px) {
            header { min-height: 52px; padding: 8px 16px; }
            header h1 { font-size: var(--text-base); }
            header > div:first-child span { font-size: var(--text-xs); }
        }
        .header-notifications { position: relative; }
        .notif-btn {
            width: auto;
            height: auto;
            padding: var(--space-0);
            border: none;
            border-radius: 0;
            background: transparent;
            color: var(--color-nav-bg);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: none;
            transition: transform 0.15s ease, opacity 0.15s ease;
        }
        /* Header-кнопка «Мои заметки» — рядом с уведомлениями */
        .notes-header-btn {
            position: relative;
            width: 32px; height: 32px;
            border: none;
            background: transparent;
            color: var(--color-nav-bg);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            transition: background 0.15s, transform 0.15s;
        }
        .notes-header-btn:hover {
            background: var(--color-bg-subtle);
            transform: translateY(-1px);
        }
        .notes-header-btn svg { display: block; }
        .notes-header-badge {
            position: absolute;
            top: -2px; right: -4px;
            min-width: 16px; height: 16px;
            padding: 0 4px;
            border-radius: var(--radius-pill);
            background: var(--color-primary);
            color: #fff;
            font-size: var(--text-xs);
            font-weight: 700;
            display: inline-flex;
            align-items: center; justify-content: center;
            line-height: 1;
        }
        .notif-btn:hover,
.notif-btn.open {
            transform: translateY(-1px);
            opacity: 0.9;
        }
        .notif-btn-icon-img {
            width: 31px;
            height: 31px;
            display: block;
            object-fit: contain;
        }
        .notif-badge {
            position: absolute;
            top: -5px;
            right: -8px;
            min-width: 18px;
            padding: 1px 4px;
            border-radius: var(--radius-pill);
            background: var(--color-danger);
            color: var(--color-surface);
            font-size: var(--text-xs);
            font-weight: 700;
            text-align: center;
            box-shadow: 0 2px 6px rgba(229,57,53,0.35);
        }
        .notif-panel {
            position: absolute;
            top: 54px;
            right: 0;
            width: min(380px, 100vw - 16px);
            max-height: 520px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-2xl);
            box-shadow: 0 18px 40px rgba(8, 10, 18,0.16);
            overflow: hidden;
            display: none;
            flex-direction: column;
        }
        .notif-panel.open { display: flex; }
        .notif-panel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-3);
            padding: 16px 16px 12px;
            border-bottom: 1px solid #eef2f7;
            background: linear-gradient(180deg, #fbfcff 0%, var(--color-bg-tint) 100%);
        }
        .notif-panel-title {
            font-size: var(--text-base);
            font-weight: 700;
            color: var(--color-text);
        }
        .notif-panel-subtitle {
            margin-top: 2px;
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
        }
        .notif-panel-read-btn {
            border: 1px solid #dbe2ea;
            background: var(--color-surface);
            color: #334155;
            border-radius: var(--radius-pill);
            padding: 8px 12px;
            font-size: var(--text-xs);
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }
        .notif-panel-read-btn:hover {
            background: var(--color-bg-tint);
            border-color: #cbd5e1;
        }
        .notif-list {
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            max-height: 450px;
            background: var(--color-surface);
        }
        .notif-empty {
            padding: 32px 20px;
            color: var(--color-gray-400);
            font-size: var(--text-sm);
            text-align: center;
        }
        .notif-item {
            padding: var(--space-4);
            border-bottom: 1px solid var(--color-bg-subtle);
            background: var(--color-surface);
        }
        .notif-item.unread {
            background: #f8fbff;
        }
        .notif-item:last-child {
            border-bottom: none;
        }
        .notif-item.is-clickable { cursor: pointer; transition: background 0.15s; }
        .notif-item.is-clickable:hover { background: var(--color-primary-25); }
        .notif-item.is-clickable.unread:hover { background: #e8f1fc; }
        .notif-item-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-3);
        }
        .notif-item-title {
            font-size: var(--text-base);
            font-weight: 700;
            color: var(--color-text);
        }
        .notif-item-time {
            flex-shrink: 0;
            font-size: var(--text-xs);
            color: var(--color-text-muted);
            padding-top: 2px;
        }
        .notif-item-text {
            margin-top: 7px;
            font-size: var(--text-sm);
            line-height: 1.45;
            color: var(--color-text-strong);
            white-space: pre-line;
        }
        .notif-item-meta {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
        }
        .notif-chip {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            border-radius: var(--radius-pill);
            padding: 4px 8px;
            font-size: var(--text-xs);
            font-weight: 600;
            background: #eef2ff;
            color: #3949ab;
        }
        .notif-chip.is-muted {
            background: var(--color-bg-subtle);
            color: var(--color-text-secondary);
        }
        .notif-chip.is-success {
            background: var(--color-success-50);
            color: var(--color-success);
        }
        .notif-chip.is-danger {
            background: #fdecec;
            color: var(--color-danger-text);
        }
        .notif-actions {
            display: flex;
            gap: var(--space-2);
            margin-top: 12px;
        }
        .notif-action-btn {
            border: none;
            border-radius: var(--radius-lg);
            padding: 8px 12px;
            font-size: var(--text-xs);
            font-weight: 700;
            cursor: pointer;
            transition: opacity 0.15s ease, transform 0.15s ease;
            /* iOS: без этого тап иногда перехватывается как зум/скролл и
               onclick не срабатывает. manipulation отключает 300ms-delay
               и жесты зума для элемента, оставляя только pan. */
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(62, 60, 89, 0.2);
            user-select: none;
        }
        .notif-action-btn:active { transform: translateY(1px); }
        .notif-action-btn:hover {
            opacity: 0.92;
            transform: translateY(-1px);
        }
        .notif-action-btn.accept {
            background: #1f7a4d;
            color: var(--color-surface);
        }
        .notif-action-btn.decline {
            background: #fff1f2;
            color: var(--color-danger-text);
            border: 1px solid #fecdd3;
        }
        .notif-action-btn:disabled {
            opacity: 0.6;
            cursor: default;
            transform: none;
        }

        .toolbar {
            background: var(--color-surface); padding: 12px 32px;
            display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
            border-bottom: 1px solid #e0e0e0; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .toolbar button {
            padding: 8px 16px; border: none; border-radius: var(--radius-sm); cursor: pointer;
            font-size: var(--text-sm); font-weight: 500; transition: all 0.2s;
        }
        .btn-expand { background: #e8f4fd; color: var(--color-primary); }
        .btn-collapse { background: #fce4ec; color: var(--color-danger-text); }
        .btn-expand:hover { background: var(--color-primary); color: white; }
        .btn-collapse:hover { background: var(--color-danger-text); color: white; }
        .btn-add-phase {
            background: var(--color-primary); color: white; border: none; border-radius: var(--radius-sm);
            padding: 8px 12px; font-size: var(--text-sm); font-weight: 500; cursor: pointer;
            transition: all 0.2s; box-shadow: none;
        }
        .btn-add-phase:hover { background: var(--color-primary-hover); box-shadow: 0 1px 3px rgba(62, 60, 89, 0.20); }
        .btn-inline-add {
            background: none; border: 1px dashed rgba(255,255,255,0.4); color: rgba(255,255,255,0.7);
            border-radius: var(--radius-xs); padding: 2px 8px; font-size: var(--text-xs); cursor: pointer;
            margin-left: 10px; transition: all 0.2s;
        }
        .btn-inline-add:hover { border-color: white; color: white; background: rgba(255,255,255,0.15); }
        /* «+ задача» рендерится на светлой строке этапа — самое частое
           действие пользователя, должно быть заметным. Раньше: dashed-bordered
           бледно-серая кнопка #888, фактически невидимая. Теперь: solid-bordered
           в фирменных токенах, при hover — заливка primary-50 для явного фидбека. */
        .btn-inline-add-step {
            background: var(--color-surface, #fff);
            border: 1px solid var(--color-border-strong, #cbd5e1);
            color: var(--color-primary, #4A3D9A);
            border-radius: var(--radius-sm);
            padding: 3px 8px;
            font-size: var(--text-xs);
            font-weight: 500;
            cursor: pointer;
            margin-left: 10px;
            transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
        }
        .btn-inline-add-step:hover {
            background: var(--color-primary-50, #f0eefa);
            border-color: var(--color-primary, #4A3D9A);
            color: var(--color-primary-hover, #3a2f80);
        }
        .btn-inline-add-step:focus-visible {
            outline: 2px solid var(--color-primary, #4A3D9A);
            outline-offset: 2px;
        }
        .btn-del-phase,
.btn-del-step {
            background: none; border: none; color: rgba(255,100,100,0.6); cursor: pointer;
            font-size: var(--text-base); padding: 0 4px; margin-left: 6px; transition: color 0.2s;
        }
        .btn-del-phase:hover { color: #ff5252; }
        .btn-del-step { color: #ccc; }
        .btn-del-step:hover { color: #f44336; }

        .filter-group { display: flex; gap: var(--space-2); align-items: center; margin-left: auto; }
        .filter-group label { font-size: var(--text-sm); color: #666; }
        select {
            padding: 8px 12px; border: 1px solid #ddd; border-radius: var(--radius-sm);
            font-size: var(--text-sm); background: var(--color-surface); cursor: pointer;
            outline: none; color: #333;
        }
        select:focus { border-color: var(--color-primary); }

        .tabs {
            display: flex; background: var(--color-surface);
            border-bottom: 2px solid #e0e0e0; padding: 0 32px;
        }
        .tab {
            padding: 12px 20px; cursor: pointer; font-size: var(--text-base); font-weight: 500;
            border-bottom: 3px solid transparent; color: #666; transition: all 0.2s;
            margin-bottom: -2px;
        }
        .tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
        .tab:hover:not(.active) { color: var(--color-primary); background: #f5f8ff; }

        /* Apple-style: контент ограничен по ширине и центрирован — на широких
           экранах не разлетается до краёв,
читается как страница Settings.app
           или Apple Store. 1600px — компромисс между «strict 1400» и full-width:
           на 1920-мониторе остаётся ~160px воздуха с каждой стороны,
на 1440
           ограничение не активируется,
на 4K страница не теряется в ширине. */
        .tab-content {
            display: none;
            max-width: 1600px;
            margin: 0 auto;
            padding: 24px 32px;
        }
        .tab-content.active {
            display: block;
            /* Появление: opacity + лёгкий вертикальный slide-in (6px).
               Длительность 0.5s, мягкая «exponential-out» кривая —
               содержимое появляется и одновременно «всплывает». Глаз
               считывает это как естественное появление. Transform на
               внешнем контейнере не ломает getBoundingClientRect:
               относительные позиции потомков сохраняются. */
            animation: tab-content-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        @keyframes tab-content-in {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        /* В моушн-чувствительных пользователей анимацию не запускаем —
           возвращаем мгновенный показ. */
        @media (prefers-reduced-motion: reduce) {
            .tab-content.active,
            .tab-content.active > * { animation: none; }
        }

        #tab-mindmap.tab-content { padding: var(--space-0); overflow: hidden; }
        #tab-mindmap .schema-v2-wrap { padding: 8px 16px; gap: var(--space-2); height: calc(100vh - 70px); box-sizing: border-box; }
        #tab-mindmap .schema-v2-frame-wrap { flex: 1; min-height: 0; }
        #mindmapContainer { width: 100%; height: 100%; }

        /* ─── Подвкладки «Дорожной карты» в стиле бумажного блокнота ─────
           Закладки наверху, лист снизу. Бежевая «бумажная» рамка
           (#E8E4D5), без цветных акцентов. Активная закладка чуть
           выше, непрозрачная, нижней границей сливается с листом.
           Неактивные приглушены до 0.7, при hover поднимаются до 0.9. */
        .roadmap-subtabs {
            display: flex;
            align-items: flex-end;
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0 0 0 4px;
            gap: 2px;
            margin: 4px 0 0;
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: visible;
            flex-wrap: nowrap;
            scrollbar-width: thin;
            position: relative;
        }
        .roadmap-subtabs::-webkit-scrollbar { height: 6px; }
        .roadmap-subtabs::-webkit-scrollbar-thumb {
            background: var(--color-border-strong, #cbd5e1);
            border-radius: var(--radius-xs);
        }
        /* Неактивная закладка: gray-100 фон + gray-500 текст, без
           жирной обводки. На hover — на ступень темнее (gray-200). */
        .roadmap-subtab {
            padding: 8px 16px;
            border: none;
            border-radius: 8px 8px 0 0;
            background: var(--color-gray-100);
            color: var(--color-text-secondary);
            cursor: pointer;
            font-size: var(--text-sm);
            font-weight: 400;
            font-family: inherit;
            white-space: nowrap;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
            transition: all 200ms ease;
        }
        .roadmap-subtab:hover:not(.active) {
            background: var(--color-gray-200);
        }
        /* Активная закладка: белая (= цвет листа), text gray-900,
           font-weight 500. Чуть выше неактивных за счёт паддинга.
           margin-bottom: -2px + z-index: 3 + box-shadow белой 2px-полоской
           вниз гарантированно перекрывают любую субпиксельную линию между
           закладкой и листом — выглядят как один кусок. */
        .roadmap-subtab.active {
            padding: 10px 16px;
            background: var(--color-surface);
            color: var(--color-text);
            font-weight: 500;
            margin-bottom: -2px;
            z-index: 3;
            box-shadow: 0 2px 0 0 var(--color-surface);
        }
        .roadmap-subtab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

        /* Лист — единый контейнер .roadmap-sheet, в который JS
           (ensureRoadmapSheets в 07-checklist.js) оборачивает всё
           содержимое подвкладки после nav.roadmap-subtabs. Белый
           фон (surface), нейтральная серая 1px-рамка из системы
           (--color-border = gray-200) по бокам и снизу. Верхней
           границы нет — никакой линии между закладками и листом.
           Скругление: top-left = 0, top-right + низ = 8px.
           height = calc(100vh - 160px) задаёт ОДНОЗНАЧНУЮ высоту
           для всех подвкладок: расстояние от низа листа до низа
           страницы одинаковое на всех вкладках. Контент внутри
           при перерасчёте скроллится через свои overflow-блоки. */
        .roadmap-sheet {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-top: none;
            border-radius: 0 8px 8px 8px;
            position: relative;
            z-index: 1;
            height: calc(100vh - 110px);
            overflow: hidden;
            /* flex-column нужен, чтобы прямые дети (wbs-wrap / kb-wrap /
               gantt-v2-source-bar + gantt-v2-wrap) могли занимать всю
               оставшуюся высоту через flex: 1. Без этого внутри получались
               пустые поля внизу листа. */
            display: flex;
            flex-direction: column;
        }
        .roadmap-sheet > .wbs-wrap,
        .roadmap-sheet > .kb-wrap,
        .roadmap-sheet > .gantt-v2-wrap,
        .roadmap-sheet > .comp-root,
        .roadmap-sheet > .plan-table-wrap {
            flex: 1;
            min-height: 0;
        }

        /* Внутренние тулбары уже на белом листе — лишние «карточки»
           (border + box-shadow + background) только дублируют визуал
           листа и порождают разделительную линию между тулбаром и
           контентом. Снимаем оформление, оставляем только паддинги. */
        .roadmap-sheet .wbs-toolbar,
        .roadmap-sheet .kb-toolbar,
        .roadmap-sheet > .toolbar,
        .roadmap-sheet .gantt-v2-source-bar {
            border: none;
            background: transparent;
            box-shadow: none;
            border-radius: 0;
        }

        /* Содержимое каждой подвкладки должно быть вплотную к закладкам
           — без пустых полей сверху. Срезаем верхние паддинги/маржины у
           прямых детей листа и у первых тулбаров. */
        .roadmap-sheet > * { margin-top: 0; }
        .roadmap-sheet .wbs-wrap,
        .roadmap-sheet .kb-wrap,
        .roadmap-sheet .gantt-v2-wrap,
        .roadmap-sheet .comp-root,
        .roadmap-sheet .plan-table-wrap { padding-top: 0; margin-top: 0; }
        .roadmap-sheet .kb-toolbar,
        .roadmap-sheet > .toolbar,
        .roadmap-sheet .gantt-v2-source-bar { padding-top: 0; margin-top: 0; }

        /* Тулбары всех подвкладок внутри листа — компактные кнопки,
           без лишнего воздуха сверху/снизу. На остальных вкладках
           (вне роадмап-листа) кнопки прежнего размера. */
        .roadmap-sheet .wbs-toolbar,
        .roadmap-sheet .gantt-v2-source-bar,
        .roadmap-sheet .kb-toolbar,
        .roadmap-sheet > .toolbar {
            padding: 8px 24px;
            margin-top: 0;
            margin-bottom: 0;
            gap: 6px;
        }
        .roadmap-sheet .wbs-toolbar > button,
        .roadmap-sheet .wbs-toolbar .btn-primary,
        .roadmap-sheet .wbs-toolbar .btn-secondary,
        .roadmap-sheet .wbs-toolbar .zoom-btn,
        .roadmap-sheet .gantt-v2-source-bar > button,
        .roadmap-sheet .gantt-v2-source-bar .gantt-v2-scale-btn,
        .roadmap-sheet .gantt-v2-source-bar .zoom-btn,
        .roadmap-sheet > .toolbar > button,
        .roadmap-sheet > .toolbar .btn-primary,
        .roadmap-sheet > .toolbar .btn-secondary,
        .roadmap-sheet > .toolbar .btn-expand,
        .roadmap-sheet > .toolbar .btn-collapse,
        .roadmap-sheet .kb-toolbar > button,
        .roadmap-sheet .kb-toolbar .btn-primary {
            padding: 4px 10px;
            font-size: var(--text-xs);
            height: auto;
            min-height: 0;
            line-height: 1.4;
        }
        /* Фильтр «Исполнитель» (и «План») в Канбане — компактный select. */
        .roadmap-sheet .kb-toolbar-filter { gap: 4px; }
        .roadmap-sheet .kb-toolbar-filter-label {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
        }
        .roadmap-sheet .kb-toolbar-filter-sel {
            padding: 3px 22px 3px 8px;
            font-size: var(--text-xs);
            height: auto;
            min-height: 0;
            line-height: 1.4;
            border-radius: var(--radius-sm, 6px);
        }

        /* Подвкладки во всех табах — без bottom-margin, иначе между
           активной закладкой и контентом просвечивает body-фон. */
        #tab-plan .roadmap-subtabs,
        #tab-kanban .roadmap-subtabs,
        #tab-passport .roadmap-subtabs,
        #tab-competitors .roadmap-subtabs { margin: 0; }

        /* Паспорт проекта рендерится JS-ом в пустой div без своих
           внутренних паддингов — добавляем воздух внутри листа,
           чтобы контент не лип к верху и низу. */
        #tab-passport .roadmap-sheet {
            padding: 16px 24px 24px;
        }

        /* Гант: скролл диаграммы — внутри блока .gantt-v2-wrap, а не
           всей страницы. Высота согласована с ИСР и Канбаном. Боковые
           паддинги обнуляем — карта диаграммы прижимается к рамке листа,
           без зазоров по бокам. */
        .roadmap-sheet .gantt-v2-wrap {
            height: calc(100vh - 270px);
            min-height: 320px;
            overflow-x: auto;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding-left: 0;
            padding-right: 0;
        }
        /* Шапка с месяцами/неделями/днями — sticky внутри блока скролла.
           JS-овый translateY от _ganttUpdateStickyHeader был рассчитан
           под scroll окна; теперь scroll-контекст — сам .gantt-v2-wrap,
           поэтому работает CSS-sticky и translateY надо обнулить, чтобы
           не дёргать sticky. */
        .roadmap-sheet .gantt-v2-wrap .gantt-v2-header {
            position: sticky;
            top: 0;
            z-index: 10;
            transform: none !important;
        }
        /* Снимаем тонкую рамку и тень с карты Ганта внутри листа —
           сам лист уже даёт визуальную «карточку». */
        .roadmap-sheet .gantt-v2-card {
            border: none;
            box-shadow: none;
            border-radius: 0;
        }
        /* При горизонтальном скролле sticky-колонка имени задачи должна
           иметь непрозрачный фон, иначе уезжающие справа бары задачи
           просвечивают сквозь неё. overflow: hidden — клипает текст,
           если он шире колонки, чтобы он не вылезал поверх таймлайна. */
        .roadmap-sheet .gantt-v2-task-name {
            background: var(--color-surface);
            overflow: hidden;
        }
        .roadmap-sheet .gantt-v2-row:hover .gantt-v2-task-name {
            background: #fafbff;
        }
        /* Правая граница sticky-колонки — чёткая 1px-линия в цвет border.
           Без неё видно «просвет» между колонкой и таймлайном из-за
           субпиксельного рендера. */
        .roadmap-sheet .gantt-v2-task-name {
            border-right: 1px solid var(--color-border);
        }
        /* Задачи без дат: убираем opacity:0.55 со всей строки, текст в
           sticky-колонке остаётся полностью читаемым в основном цвете —
           никакого ощущения «просвечивания» через бары. */
        .roadmap-sheet .gantt-v2-row.no-dates,
        .roadmap-sheet .gantt-v2-row.no-dates:hover {
            opacity: 1;
        }
        .roadmap-sheet .gantt-v2-row.no-dates .gantt-v2-task-name {
            color: var(--color-text);
        }

        /* Карточка этапа: исходный --color-bg-faint фон (как в эталоне),
           равномерная серая обводка по 4 сторонам, мягкая нейтральная
           тень. Без фиолетовой полоски слева и без purple-тени.
           Шапка этапа — всегда с фиолетовым тинтом из дизайн-системы
           (--color-primary-25), и при hover тоже остаётся фиолетовой. */
        .roadmap-sheet .wbs-node--step > .wbs-row,
        .roadmap-sheet .wbs-node--step > .wbs-row:hover {
            background: var(--color-primary-25);
        }
        .roadmap-sheet .wbs-node--step {
            border-left: 1px solid var(--color-border);
            box-shadow: 0 1px 2px rgba(8, 10, 18,0.04);
        }
        .roadmap-sheet .wbs-node--step:hover {
            border-color: var(--color-border);
            border-left-color: var(--color-border);
            box-shadow: 0 1px 2px rgba(8, 10, 18,0.04);
        }

        /* Задача — статическая карточка: белый фон, тонкая серая обводка,
           скругление. Без hover-смены фона/обводки/тени — карточка
           всегда выглядит одинаково. Курсор grab/grabbing сохраняется
           для drag-and-drop (перемещение задач между этапами и фазами). */
        .roadmap-sheet .wbs-node--task > .wbs-row {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md, 8px);
            cursor: grab;
        }
        .roadmap-sheet .wbs-node--task > .wbs-row:hover {
            background: var(--color-surface);
            border-color: var(--color-border);
        }
        .roadmap-sheet .wbs-node--task > .wbs-row:active {
            cursor: grabbing;
        }

        /* Mirror-фаза (.is-mirror) по умолчанию красится фиолетовым
           градиентом + purple-50 рамкой. Внутри листа делаем её просто
           белой карточкой с серой границей, как у обычной фазы. */
        .roadmap-sheet .wbs-node--phase.is-mirror {
            background: var(--color-surface);
            border-color: var(--color-border);
        }
        .roadmap-sheet .wbs-node--phase.is-mirror > .wbs-row {
            border-bottom-color: var(--color-border);
        }



        @media (max-width: 640px) {
            .roadmap-subtabs { width: 100%; padding-left: 0; }
            .roadmap-subtab { font-size: var(--text-xs); padding: 6px 12px; }
            .roadmap-subtab.active { padding: 10px 12px; }
        }
        /* На вкладке «ИСР» (#tab-schema) держим подвкладки вплотную к
           содержимому — без bottom-margin, чтобы не было зазора body-фона
           между активной закладкой и листом, как на Ганте. */
        #tab-schema .roadmap-subtabs { margin: 0; }
        /* Сайдбарный «Канбан» (standalone) — без переключателя подвкладок
           «Дорожной карты»: класс is-standalone выставляется в showTabSidebar
           когда юзер пришёл через сайдбар,
а не через подвкладку роадмапа. */
        #tab-kanban.is-standalone .roadmap-subtabs { display: none; }

        /* PLAN TABLE */
        /* Скругление было 10px и в сочетании с overflow-x: auto «срезало»
           уголки цветной шапки фазы. Делаем без скругления — шапка видна
           целиком от края до края. Тень оставляем для отделения от фона. */
        .plan-table-wrap { border-radius: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow-x: auto; -webkit-overflow-scrolling: touch; }
        /* Воздух под последней фазой/этапом,
чтобы только что
           добавленные строки не упирались в нижний край таблицы. */
        .plan-table-wrap { padding-bottom: 96px; }
        #tab-plan { padding-top: 10px; padding-bottom: 32px; }
        /* Любая tab-content, содержащая подвкладки роадмапы (.roadmap-subtabs),
           получает тот же компактный верхний паддинг, что и #tab-plan —
           иначе на Ганте/ИСР/Канбане/Паспорте/Конкурентах между шапкой
           приложения и полоской подвкладок оставался дефолтный 26px. */
        .tab-content:has(> .roadmap-subtabs) { padding-top: 10px; }
        @media (min-width: 769px) {
            /* min-width включаем только на десктопе и планшете в table-mode.
               На ≤768px таблица рендерится как карточки (display: block) и
               жёсткий 820px ломает вёрстку. */
            .plan-table { min-width: 820px; }
        }
        .plan-table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
        .plan-table th {
            background: var(--color-primary);
            color: white; padding: 8px 12px;
            text-align: left; font-size: var(--text-xs); font-weight: 600;
            letter-spacing: 0.6px; text-transform: uppercase;
            position: sticky; top: 0; z-index: 10;
        }
        /* Кнопка фильтра в шапке плана — на тёмном фоне видна белым,
override базовых стилей .th-filter-btn (там цвет на светлый фон). */
        .plan-table th .th-filter-btn {
            color: rgba(255, 255, 255, 0.75);
            opacity: 1;
        }
        .plan-table th .th-filter-btn:hover {
            background: rgba(255, 255, 255, 0.18);
            color: #ffffff;
        }
        .plan-table th .th-filter-btn.is-active {
            background: rgba(255, 255, 255, 0.22);
            color: #ffffff;
        }
        .plan-table th .th-filter-btn.is-active::after {
            background: #ffffff;
        }
        .plan-table th .th-filter-btn:focus-visible {
            outline-color: rgba(255, 255, 255, 0.7);
        }
        .plan-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; font-size: var(--text-sm); vertical-align: middle; }

        /* PHASE ROW */
        .phase-row td {
            background: linear-gradient(90deg, var(--color-nav-bg), #16213e);
            color: white; font-weight: 700; font-size: var(--text-sm);
            cursor: pointer; user-select: none;
            padding: var(--space-3);
            /* Длинные слитные строки переносятся, чтобы не растягивать столбец. */
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: normal;
        }
        .phase-row td:first-child { border-radius: 4px 0 0 4px; }
        .phase-row:hover td { background: var(--color-bg-subtle, #F0F4FF); }

        /* STEP ROW — светло-серый,
2px stripe фазы слева на первой ячейке */
        .step-row td {
            background: var(--color-primary-10);
            font-weight: 600; font-size: var(--text-xs);
            cursor: pointer; color: var(--color-nav-bg);
            padding: 8px 12px;
            /* Чёткая верхняя граница — разделяет соседние этапы и отбивает
               этап от строк задач предыдущего этапа. */
            border-top: 1px solid color-mix(in srgb, var(--phase-color, #94A3B8) 35%, var(--color-border, #E5E7EB));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: normal;
        }
        .step-row:hover td { background: #eef2ff; }

        /* TASK ROW — белый */
        .task-row td { background: var(--color-surface); }
        .task-row:hover td { background: #fafbff; }
        .task-row.hidden { display: none; }
        .step-row.hidden { display: none; }

        .toggle-icon { margin-right: 8px; transition: transform 0.2s; display: inline-flex; align-items: center; }
        .toggle-icon svg { display: block; }
        .collapsed .toggle-icon { transform: rotate(-90deg); }
        .plan-drag-handle { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 6px; color: rgba(255,255,255,0.7); }
        .plan-drag-handle svg { display: block; }
        .step-row .plan-drag-handle,
.task-row .plan-drag-handle { color: var(--color-text-muted); }
        .btn-inline-add svg,
.btn-inline-add-step svg,
.btn-del-phase svg,
.btn-del-step svg {
            display: inline-block; vertical-align: -2px;
        }

        /* STATUS BADGE — общий pill-компонент.
           Использование: <span class="status-badge status-{state}">…</span>
           где state ∈ todo / progress / done / blocked. */
        .status-badge {
            display: inline-block; padding: 3px 8px; border-radius: var(--radius-3xl);
            font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
            white-space: nowrap;
        }
        .status-todo { background: #f5f5f5; color: #757575; border: 1px solid #e0e0e0; }
        .status-progress { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
        .status-done { background: var(--color-success-50); color: var(--color-success); border: 1px solid #a5d6a7; }
        .status-blocked { background: #fce4ec; color: var(--color-danger-text); border: 1px solid #f48fb1; }

        /* STATUS PILL — flat-минимализм: только цветной текст, без border,
           без заливки, без тени. Цвет статуса несёт только сам текст.
           Стиль идентичен .urgency-pill — оба компонента смотрятся как
           один pattern. */
        .status-pill {
            display: inline-flex; align-items: center;
            padding: 3px 8px;
            border-radius: var(--radius-pill, 999px);
            font-size: var(--text-xs);
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none;
            white-space: nowrap;
            border: none;
            background: transparent;
            color: var(--color-text-secondary, #636366);
            font-family: inherit;
            line-height: 1.4;
        }
        .status-pill.is-clickable {
            cursor: pointer;
            transition: background 0.12s ease;
        }
        .status-pill.is-clickable:hover {
            background: var(--color-bg-subtle, #f5f5f7);
        }
        .status-pill.is-clickable:focus-visible {
            outline: 2px solid var(--color-primary, #3E3C59);
            outline-offset: 1px;
        }
        /* Цвет статуса несёт ТОЛЬКО текст — никаких border / background. */
        .status-pill.is-todo     { color: var(--color-text-secondary, #636366); }
        .status-pill.is-progress { color: var(--color-info, #2563eb); }
        .status-pill.is-done     { color: #1F6E36; }
        .status-pill.is-blocked  { color: var(--color-danger, #ff3b30); }

        /* Status select в строке задачи (Linear-стиль): без рамки,
прозрачный фон,
цветной текст по data-status строки. На hover —
           лёгкая подсветка,
чтобы пользователь видел,
что элемент кликабельный. */
        .task-row td:nth-child(5) { white-space: nowrap; }
        .task-row td:nth-child(5) select {
            appearance: none;
            -webkit-appearance: none;
            border: 1px solid transparent;
            background: transparent;
            font-weight: 500;
            padding: 3px 22px 3px 8px;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .task-row td:nth-child(5) select:hover {
            background: var(--color-bg-subtle);
            border-color: var(--color-border);
        }
        .task-row td:nth-child(5) select:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 2px var(--color-primary-25);
        }
        /* Цветовая семантика по data-status строки */
        .task-row[data-status="todo"]     td:nth-child(5) select { color: var(--color-text-muted); }
        .task-row[data-status="progress"] td:nth-child(5) select { color: var(--color-info, #2563EB); }
        .task-row[data-status="done"]     td:nth-child(5) select { color: #15803D; }
        .task-row[data-status="blocked"]  td:nth-child(5) select { color: #B91C1C; }

        /* DATE SHIFT SUBROW */
        /* Risk flag — значок открытого риска прямо в названии задачи. Связь
           реестра рисков с роадмапом: при наличии рисков (status ∉ {Закрыт,
           Принят}) у задачи появляется треугольник со счётчиком. Цвет
           определяется максимальным приоритетом рисков задачи. */
        .task-name-cell .task-name-text { vertical-align: middle; }
        .task-risk-flag {
            display: inline-flex; align-items: center; gap: 3px;
            margin-left: 8px;
            padding: 2px 4px;
            border-radius: var(--radius-sm);
            background: var(--color-warning-50);
            border: 1px solid #fde68a;
            color: #92400E;
            font-size: var(--text-xs);
            font-weight: 600;
            cursor: pointer;
            vertical-align: middle;
            line-height: 1;
            transition: background 0.15s, border-color 0.15s, transform 0.15s;
        }
        .task-risk-flag svg { display: block; }
        .task-risk-flag:hover { transform: scale(1.06); }
        .task-risk-flag-cnt { font-size: var(--text-xs); line-height: 1; }
        .task-risk-flag.risk-prio-critical {
            background: var(--color-danger-50);
            border-color: #fecaca;
            color: var(--color-danger-700);
        }
        .task-risk-flag.risk-prio-high {
            background: #fff7ed;
            border-color: #fdba74;
            color: #9A3412;
        }
        .task-risk-flag.risk-prio-low {
            background: var(--color-bg-subtle);
            border-color: var(--color-border);
            color: var(--color-text-secondary);
        }

        /* Колонка «Сроки» — два date-инпута в одной ячейке через диапазон.
           Контент центрируется по горизонтали,
чтобы попадать под заголовок
           «Сроки» в шапке таблицы. */
        .task-dates-cell { white-space: nowrap; text-align: center; }
        .task-dates-wrap {
            display: inline-flex; align-items: center; gap: var(--space-1);
            justify-content: center;
        }
        .task-date-input {
            border: 1px solid #ddd; border-radius: var(--radius-xs);
            padding: 3px 4px; font-size: var(--text-xs);
            width: 92px; min-width: 0;
            font-family: inherit;
        }
        .task-date-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-25); }
        .task-dates-sep {
            color: var(--color-text-muted);
            font-size: var(--text-xs);
        }
        /* Заголовок «Сроки» (3-я колонка) — выравниваем по центру так же,
как контент. Остальные заголовки оставляем по левому краю. */
        .plan-table th:nth-child(3) { text-align: center; }
        /* Колонка «Задача / Этап» — auto-width; даём ей разумный потолок,
           чтобы длинные названия переносились в несколько строк, а не
           растягивали таблицу за границу экрана. */
        .plan-table td:nth-child(2) {
            max-width: 480px;
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: normal;
        }
        /* Date-shift chip — маленькая иконка рядом с date input. Появляется
           только если у задачи был перенос. */
        .task-shift-slot { display: inline-flex; align-items: center; }
        .task-shift-chip {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 22px; height: 22px;
            padding: 0 4px;
            border-radius: var(--radius-pill);
            background: var(--color-bg-subtle);
            border: 1px solid var(--color-border);
            color: var(--color-text-secondary);
            cursor: pointer;
            gap: 3px;
            transition: background 0.15s, border-color 0.15s, transform 0.15s, color 0.15s;
        }
        .task-shift-chip svg { display: block; }
        .task-shift-chip:hover { background: var(--color-warning-50); border-color: #fde68a; color: #92400e; transform: scale(1.08); }
        .task-shift-chip.has-reason {
            background: var(--color-warning-50);
            border-color: #fde68a;
            color: #92400e;
        }
        .task-shift-chip-cnt {
            font-size: var(--text-xs);
            font-weight: 700;
            line-height: 1;
            min-width: 12px;
            text-align: center;
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.01em;
        }
        .shift-pop-icon { display: inline-flex; align-items: center; color: #92400e; }

        /* Popover с причиной последнего переноса */
        .shift-popover {
            position: absolute;
            width: min(320px, calc(100vw - 24px));
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            box-shadow: 0 12px 32px rgba(8, 10, 18,0.14);
            padding: var(--space-3);
            z-index: 200;
            font-size: var(--text-sm);
        }
        .shift-pop-head {
            display: flex; align-items: center; gap: var(--space-2);
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--color-border);
        }
        .shift-pop-icon { font-size: var(--text-base); }
        .shift-pop-dates { font-weight: 600; color: #92400e; }
        .shift-pop-ts { color: var(--color-text-muted); font-size: var(--text-xs); margin-left: auto; }
        .shift-pop-label {
            display: block;
            font-size: var(--text-xs); font-weight: 500;
            color: var(--color-text-secondary);
            margin-bottom: 4px;
            text-transform: uppercase; letter-spacing: 0.4px;
        }
        .shift-pop-reason {
            width: 100%;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            padding: var(--space-2);
            font-size: var(--text-sm);
            font-family: inherit;
            resize: vertical;
            min-height: 60px;
            background: var(--color-surface);
            color: var(--color-text);
        }
        .shift-pop-reason:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-25); }
        .shift-pop-foot {
            display: flex; align-items: center; justify-content: space-between;
            margin-top: 8px;
            font-size: var(--text-xs);
        }
        .shift-pop-history {
            background: none; border: none; padding: var(--space-0);
            color: var(--color-primary); cursor: pointer;
            font-size: var(--text-xs); font-weight: 500;
        }
        .shift-pop-history:hover { text-decoration: underline; }
        .shift-pop-status { color: var(--color-text-secondary); font-size: var(--text-xs); }

        /* Drawer со всей историей переносов */
        .shift-drawer {
            position: fixed;
            top: 0; right: 0; bottom: 0;
            width: min(440px, 100vw);
            max-width: 100vw;
            background: var(--color-surface);
            border-left: 1px solid var(--color-border-strong);
            box-shadow: -12px 0 32px rgba(8, 10, 18,0.10);
            z-index: 250;
            display: flex; flex-direction: column;
            transform: translateX(100%);
            transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
        }
        .shift-drawer.is-open { transform: translateX(0); }
        .shift-drawer-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid var(--color-border);
        }
        .shift-drawer-head h3 {
            font-size: var(--text-md); font-weight: 600;
            color: var(--color-text);
            margin: var(--space-0);
        }
        .shift-drawer-close {
            background: none; border: none;
            font-size: var(--text-lg); cursor: pointer;
            color: var(--color-text-secondary);
            width: 28px; height: 28px;
            border-radius: var(--radius-sm);
        }
        .shift-drawer-close:hover { background: var(--color-bg-subtle); color: var(--color-text); }
        .shift-drawer-sub {
            padding: 8px 16px 12px;
            color: var(--color-text-secondary);
            font-size: var(--text-sm);
            border-bottom: 1px solid var(--color-border);
        }
        .shift-drawer-list {
            flex: 1;
            overflow-y: auto;
            padding: 12px 16px;
            display: flex; flex-direction: column; gap: var(--space-3);
        }
        .shift-drawer-empty {
            text-align: center;
            color: var(--color-text-muted);
            padding: 32px 0;
            font-size: var(--text-sm);
        }
        .shift-item {
            background: var(--color-bg-faint);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: 8px 12px;
        }
        .shift-item-top {
            display: flex; align-items: center; gap: var(--space-2);
            margin-bottom: 4px;
        }
        .shift-item-field {
            font-size: var(--text-xs); font-weight: 500;
            color: var(--color-text-secondary);
            text-transform: uppercase; letter-spacing: 0.4px;
        }
        .shift-item-dates {
            font-weight: 600;
            color: #92400e;
            background: var(--color-warning-50);
            padding: 2px 8px;
            border-radius: var(--radius-pill);
            font-size: var(--text-xs);
            border: 1px solid #fde68a;
        }
        .shift-item-meta {
            display: flex; align-items: center; gap: var(--space-2);
            font-size: var(--text-xs);
            color: var(--color-text-muted);
            margin-bottom: 6px;
        }
        .shift-item-fio { font-weight: 500; color: var(--color-text-secondary); }
        .shift-item-ts { color: var(--color-text-muted); }
        .shift-item-reason {
            font-size: var(--text-sm);
            color: var(--color-text);
            line-height: 1.5;
        }
        .shift-item-reason.is-empty {
            color: var(--color-text-muted);
            font-style: italic;
        }

        /* URGENCY PILL — flat в обычном состоянии. Рамка появляется
           ТОЛЬКО при наведении: подсказывает, что pill кликабельный,
           без визуального шума на статичной таблице. */
        .urgency-pill {
            display: inline-flex; align-items: center;
            padding: 2px 8px;
            border-radius: var(--radius-pill, 999px);
            font-size: var(--text-xs);
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none;
            white-space: nowrap;
            border: 1px solid transparent;
            background: transparent;
            color: var(--color-text-secondary, #636366);
            font-family: inherit;
            line-height: 1.4;
        }
        .urgency-pill.is-clickable {
            cursor: pointer;
            transition: background 0.12s ease, border-color 0.12s ease;
        }
        .urgency-pill.is-clickable:hover {
            border-color: currentColor;
            background: var(--color-bg-subtle, #f5f5f7);
        }
        .urgency-pill.is-clickable:focus-visible {
            outline: 2px solid var(--color-primary, #3E3C59);
            outline-offset: 1px;
        }
        /* `currentColor` подхватывает цвет варианта — border окрашивается
           автоматически, без отдельных правил. */
        .urgency-pill.is-normal   { color: var(--color-gray-400, #9CA3AF); }
        .urgency-pill.is-urgent   { color: var(--color-warning, #FF9500); }
        .urgency-pill.is-critical { color: var(--color-danger, #FF3B30); }

        /* PROGRESS BAR */
        .progress-wrap { display: flex; align-items: center; gap: var(--space-2); min-width: 120px; }

        /* PHASE / STEP — визуальный ритм без давления:
           — phase-row: плотная цветная шапка (цвет фазы, не градиент)
             с белым текстом — как заголовок секции
           — step-row: светло-серая подшапка с тонкой цветной полосой слева
           — task-row: белые,
с 3px полосой слева в цвет фазы */
        /* Phase header в стиле Linear/Notion: спокойный серый фон,
цветной круглый маркер слева от названия + 3px stripe в цвет фазы.
           Контрастно к строкам задач,
читабельно,
не «кричит». */
        .phase-row td {
            background: var(--color-bg-subtle);
            color: var(--color-text);
            font-weight: 600;
            font-size: var(--text-xs);
            padding: var(--space-3);
            border: none;
            border-top: 1px solid var(--color-border, #E5E7EB);
            box-shadow: inset 5px 0 0 var(--phase-color, #94A3B8);
        }
        .phase-row td .toggle-icon,
.phase-row td .plan-drag-handle { color: var(--color-text-secondary); }
        /* Иерархию фазы держим весом + uppercase, а не размером —
           чтобы вкладка не «прыгала» по плотности при переключении
           между Дорожной картой и Гантом. */
        .phase-row strong {
            color: var(--color-text);
            font-weight: 700;
            font-size: var(--text-xs);
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }
        .phase-row strong::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--phase-color, #94A3B8);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--phase-color, #94A3B8) 22%, transparent);
            margin-right: 10px;
            vertical-align: 1px;
        }
        .phase-row .phase-progress {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            font-weight: 500;
            white-space: nowrap;
        }
        /* Прогресс по фазе — горизонтальный бар + текст «X / Y · NN%».
           Float:right,
чтобы блок прижимался к правому краю строки фазы
           перед кнопками управления. */
        .phase-row .phase-progress-block {
            float: right;
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            margin-left: 12px;
        }
        .phase-progress-bar {
            display: inline-block;
            width: 140px;
            height: 6px;
            background: rgba(0, 0, 0, 0.10);
            border-radius: var(--radius-xs);
            overflow: hidden;
            vertical-align: middle;
        }
        .phase-progress-fill {
            display: block;
            height: 100%;
            background: var(--phase-color, var(--color-primary));
            border-radius: var(--radius-xs);
            transition: width 0.4s ease;
        }
        /* Прогресс по этапу — компактнее,
тот же паттерн. */
        .step-row .step-progress-block {
            float: right;
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            margin-left: 12px;
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            white-space: nowrap;
        }
        .step-progress-bar {
            display: inline-block;
            width: 100px;
            height: 4px;
            background: rgba(0, 0, 0, 0.10);
            border-radius: 2px;
            overflow: hidden;
            vertical-align: middle;
        }
        .step-progress-fill {
            display: block;
            height: 100%;
            background: var(--phase-color, var(--color-primary));
            opacity: 0.7;
            border-radius: 2px;
            transition: width 0.4s ease;
        }
        .step-progress {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            white-space: nowrap;
        }
        .phase-row .btn-inline-add,
.phase-row .btn-del-phase {
            background: var(--color-bg-subtle);
            color: var(--color-text-strong);
            border: 1px solid var(--color-border);
        }
        .phase-row .btn-inline-add:hover {
            background: var(--color-primary-25);
            border-color: var(--color-primary-50);
            color: var(--color-primary);
        }
        .phase-row .btn-del-phase:hover {
            background: var(--color-danger-25);
            border-color: var(--color-danger-50);
            color: var(--color-danger);
        }
        .step-row td {
            background: var(--color-bg-faint);
        }

        /* Критичные задачи — спокойная подсветка строки и красное жирное
           название задачи. Никаких плашек-text перед именем,
чтобы они
           не реfлоу-или строку при появлении (это вызывало «прыжки»
           ширин колонок и моргание чипа переноса). */
        .task-row[data-urgency="critical"] td { background: #FEF2F2; }
        .task-row[data-urgency="critical"] .task-name-cell {
            color: #991B1B;
            font-weight: 600;
        }
        /* Выполненная задача: едва заметная зелёная заливка строки.
           Hover не меняет цвет — глаз отдыхает на закрытых задачах. */
        .task-row[data-status="done"] td { background: #F2F9F5; }
        .task-row[data-status="done"]:hover td { background: #F2F9F5; }
        .task-row[data-status="done"][data-urgency="critical"] td { background: #F2F9F5; }
        .task-row[data-status="done"] .task-name-cell {
            color: #1F6E36;
            font-weight: 500;
        }
        /* Чекбокс выполненной задачи — в цвет фона строки. Получается
           ощущение «галочка растворилась», сама строка несёт сигнал
           закрытости (зелёный фон + цвет имени). */
        .task-row[data-status="done"] td:first-child input[type=checkbox] {
            accent-color: #F2F9F5;
        }
        /* Hover на статус/срочность в выполненной строке — оставляем
           тот же фон что и у строки, чтобы pill не «вспыхивал» серым на
           зелёном фоне. */
        .task-row[data-status="done"] .status-pill.is-clickable:hover,
        .task-row[data-status="done"] .urgency-pill.is-clickable:hover {
            background: #F2F9F5;
        }

        /* CHECKBOX — плавно растёт от 13px (360px экран) до 20px (1200px+) */
        input[type=checkbox] {
            width: clamp(13px, 1vw + 9px, 20px);
            height: clamp(13px, 1vw + 9px, 20px);
            cursor: pointer;
            accent-color: var(--color-primary);
        }
        .btn-delete-file {
            padding: 3px 8px; border: 1px solid #e0e0e0; border-radius: var(--radius-xs);
            background: var(--color-surface); color: #aaa; font-size: var(--text-xs); cursor: pointer; transition: all 0.2s;
        }
        .btn-delete-file:hover { border-color: var(--color-danger); color: var(--color-danger); background: #fff5f5; }

        /* ATTACH FILE BUTTON in task row — SVG-иконка скрепка */
        .btn-attach {
            width: 22px; height: 22px; border: none; border-radius: var(--radius-xs);
            background: transparent; color: var(--color-text-secondary); cursor: pointer;
            transition: all 0.15s; flex-shrink: 0; padding: var(--space-0); line-height: 1;
            display: inline-flex; align-items: center; justify-content: center;
            opacity: 0.6;
        }
        .btn-attach svg,
.btn-comment svg,
.kb-card-action svg,
.kb-card-menu svg { display: block; }
        .btn-comment {
            display: inline-flex; align-items: center; gap: 3px;
        }
        .btn-attach:hover { opacity: 1; background: var(--color-gray-100); }
        .btn-attach.has-files { opacity: 1; }
        .btn-attach:hover .btn-attach-ico,
.btn-attach.has-files .btn-attach-ico { opacity: 1; }
        .btn-attach-count {
            font-size: var(--text-xs);
            font-weight: 600;
            line-height: 1;
        }

        /* FILES MODAL */
        .files-modal-list { max-height: 220px; overflow-y: auto; margin: 12px 0; border: 1px solid #eee; border-radius: var(--radius-md); }
        .files-modal-item {
            display: flex; align-items: center; gap: var(--space-2); padding: 8px 12px;
            border-bottom: 1px solid #f5f5f5; font-size: var(--text-sm);
        }
        .files-modal-item:last-child { border-bottom: none; }
        .files-modal-item .fname { flex: 1; color: var(--color-primary); text-decoration: none; }
        .files-modal-item .fname:hover { text-decoration: underline; }
        .files-modal-item .fmeta { font-size: var(--text-xs); color: #aaa; white-space: nowrap; }
        .files-modal-empty { padding: var(--space-5); text-align: center; color: #bbb; font-size: var(--text-sm); }
        .upload-area {
            border: 2px dashed #ddd; border-radius: var(--radius-md); padding: var(--space-4);
            text-align: center; cursor: pointer; transition: all 0.2s; margin-top: 12px;
            color: #999; font-size: var(--text-sm);
        }
        .upload-area:hover,
.upload-area.drag-over { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-20); }
        .upload-progress { display: none; margin-top: 8px; font-size: var(--text-sm); color: var(--color-primary); }
        /* SCHEMA TAB V2 */
        .schema-v2-wrap { padding: 20px 32px 32px; display: flex; flex-direction: column; gap: var(--space-4); }
        .schema-v2-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: var(--space-2);
        }
        .schema-v2-toolbar-left { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
        .schema-v2-btn-save {
            display: inline-flex; align-items: center; gap: var(--space-2);
            background: var(--color-primary); color: white;
            border: none; border-radius: var(--radius-lg);
            padding: 8px 16px; font-size: var(--text-sm); font-weight: 600;
            cursor: pointer; transition: background 0.15s;
        }
        .schema-v2-btn-save:hover { background: var(--color-primary-hover); }
        .schema-v2-btn-convert {
            display: inline-flex; align-items: center; gap: var(--space-2);
            background: #f3e8ff; color: #6b21a8;
            border: none; border-radius: var(--radius-lg);
            padding: 8px 16px; font-size: var(--text-sm); font-weight: 600;
            cursor: pointer; transition: background 0.15s, color 0.15s;
        }
        .schema-v2-btn-convert:hover { background: #6b21a8; color: white; }
        .schema-v2-zoom-wrap {
            display: flex; align-items: center; gap: var(--space-2);
            background: var(--color-gray-100); border: 1px solid var(--color-border);
            border-radius: var(--radius-lg); padding: 0 12px; height: 38px;
        }
        .schema-v2-zoom-label { font-size: var(--text-xs); color: var(--color-gray-400); white-space: nowrap; }
        .schema-v2-zoom-sel {
            border: none; background: transparent;
            font-size: var(--text-sm); font-weight: 500; color: var(--color-text-strong);
            cursor: pointer; outline: none;
        }
        .schema-v2-status { font-size: var(--text-xs); color: var(--color-gray-400); }
        .schema-v2-frame-wrap {
            border-radius: var(--radius-2xl);
            overflow: hidden;
            border: 1px solid var(--color-border);
            box-shadow: 0 2px 12px rgba(0,0,0,0.07);
        }
        .schema-v2-frame { width: 100%; height: 72vh; border: none; display: block; }
        /* Convert modal */
        .task-convert-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 260px; overflow-y: auto; margin: 12px 0; padding: var(--space-2); background: var(--color-primary-10); border-radius: var(--radius-md); border: 1px solid #e8eaf6; }
        .task-convert-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); padding: 4px 2px; }
        .task-convert-item input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
        .task-convert-empty { text-align: center; color: #aaa; padding: var(--space-5); font-size: var(--text-sm); }
        .convert-select-all { font-size: var(--text-xs); color: var(--color-primary); cursor: pointer; text-decoration: underline; margin-left: auto; }

        /* TASK NAME CELL — без агрессивного word-break чтобы не ломать
           слова посимвольно в столбик при узкой ширине колонки. */
        .task-name-cell {
            cursor: default;
            overflow-wrap: break-word;
            white-space: normal;
            min-width: clamp(180px, 22vw, 360px);
        }
        .task-name-cell:hover { background: #f0f7ff; }
        .task-name-text { display: inline; }

        /* DELETE BUTTON */
        .btn-delete-task {
            width: 22px; height: 22px; border-radius: var(--radius-xs); border: none;
            background: transparent; color: var(--color-gray-400); font-size: var(--text-md); line-height: 1;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            padding: var(--space-0); transition: all 0.15s; flex-shrink: 0; opacity: 0.6;
        }
        .btn-delete-task:hover {
            opacity: 1; color: var(--color-danger); background: var(--color-danger-25);
        }

        /* Bulk-выделение задач (Cmd/Ctrl + клик по строке). */
        .task-row.is-selected td {
            background: var(--color-primary-25) !important;
            box-shadow: inset 3px 0 0 var(--color-primary);
        }
        .bulk-toolbar {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: var(--space-3);
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
            padding: 8px 16px;
            box-shadow: 0 8px 24px rgba(8, 10, 18,0.14);
            z-index: 250;
            font-size: var(--text-sm);
        }
        .bulk-toolbar-count { color: var(--color-text); }
        .bulk-toolbar-count strong { color: var(--color-primary); font-weight: 700; }
        .bulk-toolbar-divider {
            width: 1px; height: 18px; background: var(--color-border);
        }
        .bulk-toolbar-btn {
            background: var(--color-primary);
            color: #fff;
            border: none;
            border-radius: var(--radius-md);
            padding: 8px 12px;
            font-size: var(--text-xs);
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.15s;
        }
        .bulk-toolbar-btn:hover { background: var(--color-primary-dark); }
        .bulk-toolbar-btn-danger {
            background: var(--color-danger);
        }
        .bulk-toolbar-btn-danger:hover { background: var(--color-danger-700); }
        .bulk-toolbar-btn-ghost {
            background: transparent;
            color: var(--color-text-secondary);
            border: 1px solid var(--color-border);
        }
        .bulk-toolbar-btn-ghost:hover {
            background: var(--color-bg-subtle);
            color: var(--color-text);
        }

        /* Inline-создание задачи в этапе. Появляется на месте,
без модалки; Enter сохраняет и сразу открывает следующий ввод. */
        .inline-add-row td.inline-add-cell {
            background: var(--color-primary-10);
            padding: 8px 12px 8px 50px;
            border-bottom: 1px solid var(--color-primary-50);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        .inline-add-input {
            flex: 1;
            padding: var(--space-2);
            font-size: var(--text-sm);
            font-family: inherit;
            border: 1.5px solid var(--color-primary);
            border-radius: var(--radius-sm);
            outline: none;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 0 0 3px var(--color-primary-25);
        }
        .inline-add-input:disabled {
            background: var(--color-bg-subtle);
            color: var(--color-text-muted);
        }
        .inline-add-hint {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            white-space: nowrap;
        }

        /* Drag-хэндлы ⠿ — спрятаны по умолчанию,
появляются на hover
           строки фазы/этапа. Уменьшает визуальный шум на ~30 значков
           на средний план. Drag по-прежнему работает: маркер виден когда
           нужен,
drag-логика на самой строке. */
        .phase-row .plan-drag-handle,
.step-row .plan-drag-handle {
            opacity: 0;
            transition: opacity 0.15s ease;
        }
        .phase-row:hover .plan-drag-handle { opacity: 0.85; }
        .step-row:hover .plan-drag-handle { opacity: 0.7; }
        @media (hover: none) {
            .phase-row .plan-drag-handle,
.step-row .plan-drag-handle { opacity: 0.5; }
        }

        /* ───── Hover-actions в строке задачи ─────
           Иконки 📎 файлы / 💬 комментарии / заметка / удалить — спрятаны
           по умолчанию,
показываются только при наведении на строку. Это
           убирает «шум» из таблицы (на 100 задачах × 4 иконки = 400 элементов
           меньше). Иконки с активным состоянием (has-files / has-comments)
           показываются всегда — чтобы было видно «у этой задачи есть файл».
           Touch-устройства всё показывают (нет hover) — фоллбек ниже. */
        .task-row .btn-attach,
.task-row .btn-comment,
.task-row .note-btn,
.task-row .btn-delete-task {
            opacity: 0;
            transition: opacity 0.15s ease, color 0.15s, background 0.15s;
        }
        .task-row:hover .btn-attach,
.task-row:hover .btn-comment,
.task-row:hover .note-btn,
.task-row:hover .btn-delete-task,
.task-row:focus-within .btn-attach,
.task-row:focus-within .btn-comment,
.task-row:focus-within .note-btn,
.task-row:focus-within .btn-delete-task {
            opacity: 0.7;
        }
        /* Иконки с активным состоянием — всегда видны (показывают, что
           у задачи есть файлы / комментарии / заметка) */
        .task-row .btn-attach.has-files,
.task-row .btn-comment.has-comments,
.task-row .note-btn.has-note {
            opacity: 0.85;
        }
        /* На выполненных задачах файлик показываем всегда,
чтобы было сразу
           видно,
к какой работе прикреплены результаты. */
        .task-row[data-status="done"] .btn-attach {
            opacity: 0.85;
        }
        /* Hover на саму иконку — полная яркость */
        .task-row .btn-attach:hover,
.task-row .btn-comment:hover,
.task-row .note-btn:hover,
.task-row .btn-delete-task:hover {
            opacity: 1 !important;
        }
        /* На touch-устройствах нет hover — показываем иконки как раньше */
        @media (hover: none) {
            .task-row .btn-attach,
.task-row .btn-comment,
.task-row .note-btn,
.task-row .btn-delete-task {
                opacity: 0.6;
            }
        }
        .risks-table tr.dragging { opacity: 0.35; }
        .risks-table tr.drag-over-top td { border-top: 2px solid var(--color-primary); }
        .risk-select { border: 1px solid #ddd; border-radius: var(--radius-xs); padding: 4px 8px; font-size: var(--text-xs); background: var(--color-surface); cursor: pointer; font-family: inherit; }
        .risk-select:focus { border-color: var(--color-primary); outline: none; }
        .priority-select.p-critical { background: #b71c1c; color: white; }
        .priority-select.p-high { background: #e65100; color: white; }
        .priority-select.p-med { background: #f9a825; color: white; }
        .priority-select.p-low { background: #558b2f; color: white; }
        .modal-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
        .risk-p-move { transition: background 0.4s; outline: 2px solid var(--color-primary); outline-offset: -2px; }
        .p-critical { background: #b71c1c; color: white; }
        .p-high { background: #e65100; color: white; }
        .p-med { background: #f9a825; color: white; }
        .p-low { background: #558b2f; color: white; }
        .gantt-source-btn.active { background: var(--color-primary); color: white; }
        .gantt-source-btn:hover:not(.active) { background: #c5cae9; }
        .summary-card .num { font-size: 28px; font-weight: 700; }
        .summary-card .lbl { font-size: var(--text-xs); color: #777; text-transform: uppercase; letter-spacing: 0.5px; }

        .scrollable { max-height: calc(100vh - 280px); overflow-y: auto; }

        /* Модальное окно — Apple-style: scrim с blur,
мягкий
           shadow-стек,
чуть больший радиус,
строгая типографика. */
        .modal-overlay {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(28, 28, 30, 0.40);
            backdrop-filter: blur(8px) saturate(140%);
            -webkit-backdrop-filter: blur(8px) saturate(140%);
            z-index: 1000;
            align-items: center; justify-content: center;
        }
        .modal-overlay.active { display: flex; animation: modal-overlay-in 0.18s ease-out; }
        @keyframes modal-overlay-in { from { opacity: 0; } to { opacity: 1; } }
        .modal {
            background: var(--color-surface);
            border-radius: var(--radius-2xl);
            padding: 24px 32px;
            box-shadow: 0 18px 50px rgba(8, 10, 18,0.18), 0 4px 14px rgba(8, 10, 18,0.08);
            border: 1px solid var(--color-border);
            min-width: 400px; max-width: 500px;
            animation: modal-window-in 0.22s ease-out;
        }
        @keyframes modal-window-in {
            from { opacity: 0; transform: translateY(8px) scale(0.98); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .modal-convert { min-width: 500px; max-width: 640px; }
        .modal-wide { min-width: 460px; max-width: 580px; }
        .modal h3 {
            margin-bottom: 18px;
            color: var(--color-text);
            font-size: var(--text-lg);
            font-weight: 600;
            letter-spacing: -0.01em;
        }
        .modal label {
            display: block;
            font-size: var(--text-xs);
            font-weight: 500;
            color: var(--color-text-secondary);
            margin-bottom: 6px;
            margin-top: 14px;
            letter-spacing: 0.01em;
        }
        .modal select,
.modal input[type=text] {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--color-border-strong);
            border-radius: var(--radius-md);
            font-size: var(--text-base);
            font-family: inherit;
            color: var(--color-text);
            background: var(--color-surface);
            outline: none;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .modal select:focus,
.modal input[type=text]:focus {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-25);
        }
        .modal-buttons { display: flex; gap: var(--space-2); margin-top: 22px; justify-content: flex-end; }
        .modal-buttons button {
            padding: 8px 16px; border: none; border-radius: var(--radius-md); font-size: var(--text-sm);
            font-weight: 600; cursor: pointer; font-family: inherit;
            transition: background 0.15s ease, color 0.15s ease, transform 50ms ease;
        }
        .modal-buttons button:active { transform: translateY(1px); }
        /* Primary CTA — главное действие. Один цвет на весь интерфейс,
чистый primary без декоративных эффектов (минималистичный
           вариант, как у Linear / Notion). */
        .btn-toolbar-add {
            background: var(--color-primary);
            color: #fff;
            box-shadow: none;
        }
        .btn-toolbar-add:hover {
            background: var(--color-primary-hover);
            box-shadow: 0 1px 3px rgba(62, 60, 89, 0.20);
        }
        .btn-add-task { background: var(--color-primary); color: white; }
        .btn-add-task:hover { background: var(--color-primary-dark); }
        /* Apple-style secondary button: лёгкий нейтральный фон,
ноль
           «коробчатости»,
hover слегка темнее. */
        .btn-cancel {
            background: var(--color-bg-subtle);
            color: var(--color-text);
            border: 1px solid transparent;
        }
        .btn-cancel:hover {
            background: var(--color-gray-200);
        }
        /* Confirm-кнопка наследует primary-стиль (Future Dusk).
           Оставлена тут,
чтобы перебить наследие модальных стилей. */
        .btn-confirm {
            background: var(--color-primary);
            color: #fff;
        }
        .btn-confirm:hover {
            background: var(--color-primary-hover);
            box-shadow: var(--shadow-primary);
        }

        /* LOGIN SCREEN */
        .login-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, var(--color-nav-bg) 0%, #16213e 50%, #0f3460 100%);
            z-index: 2000; display: flex; align-items: center; justify-content: center;
        }
        .login-overlay.hidden { display: none; }
        .login-box {
            background: var(--color-surface); border-radius: var(--radius-2xl); padding: 40px 32px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3); min-width: 380px; max-width: 440px;
            text-align: center;
        }
        .login-box h2 {
            color: var(--color-nav-bg); margin-bottom: 6px; font-size: var(--text-2xl);
        }
        .login-box .subtitle {
            color: #888; font-size: var(--text-sm); margin-bottom: 28px;
        }
        .login-box .field { text-align: left; margin-bottom: 16px; }
        .login-box .login-hint {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            margin-top: 6px;
            line-height: 1.4;
        }
        .login-box .field label {
            display: block; font-size: var(--text-sm); color: #555; margin-bottom: 5px; font-weight: 500;
        }
        .login-box .field input,
.login-box .field select {
            width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: var(--radius-md);
            font-size: var(--text-base); outline: none; transition: border-color 0.2s;
        }
        .login-box .field input:focus,
.login-box .field select:focus {
            border-color: var(--color-primary);
        }
        .login-box .error-msg {
            color: var(--color-danger-text); font-size: var(--text-sm); margin-bottom: 12px; min-height: 20px;
        }
        .login-box .btn-login {
            width: 100%; padding: var(--space-3); border: none; border-radius: var(--radius-md);
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: white;
            font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: opacity 0.2s;
        }
        .login-box .btn-login:hover { opacity: 0.9; }
        .login-box .btn-login:disabled { opacity: 0.5; cursor: not-allowed; }

        /* USER INFO в хедере */
        .user-info {
            display: flex; align-items: center; gap: var(--space-3);
        }
        .user-info .user-name {
            font-size: var(--text-sm); font-weight: 500; color: var(--color-text-strong);
        }
        /* Статус из личного кабинета — мелким серым шрифтом под именем. */
        .user-info .user-status {
            font-size: var(--text-xs);
            font-weight: 400;
            color: var(--color-text-secondary, #6b7280);
            line-height: 1.2;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .user-info .user-status:empty { display: none; }
        .user-info .user-avatar {
            width: 30px; height: 30px; border-radius: 50%;
            background: linear-gradient(135deg,var(--color-primary),var(--color-primary-500)); display: flex;
            align-items: center; justify-content: center;
            font-size: var(--text-xs); font-weight: 700; color: white; cursor: pointer;
            flex-shrink: 0;
        }
        .btn-logout {
            padding: 8px 12px; border: 1px solid var(--color-border-strong);
            border-radius: var(--radius-sm); background: var(--color-gray-100); color: var(--color-text-strong);
            font-size: var(--text-xs); cursor: pointer; transition: all 0.2s; min-height: 32px;
        }
        .btn-logout:hover { background: var(--color-border); color: var(--color-text); }

        /* ADD RISK MODAL */


        /* ===== SIDEBAR NAV ===== */
        .app-shell { min-height: 100vh; }

        .sidebar-nav {
            width: 72px;
            background: var(--bg-canvas);
            color: var(--color-text);
            position: fixed;
            left: 0; top: 0; bottom: 0;
            display: flex;
            flex-direction: column;
            transition: width 0.32s cubic-bezier(0.32, 0.72, 0, 0) 0s;
            overflow: hidden;
            z-index: 50;
        }
        /* Небольшая задержка перед раскрытием — чтобы случайное касание
           курсором не открывало панель мгновенно. На закрытие задержки нет
           (срабатывает базовый delay 0s). */
        .sidebar-nav:hover { width: 246px; transition-delay: 0.18s; }

        .sidebar-brand {
            min-height: 72px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            font-size: var(--text-md);
            font-weight: 700;
            white-space: nowrap;
            gap: var(--space-3);
        }
        .sidebar-brand-icon {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .sidebar-brand-icon-img {
            width: 30px;
            height: 30px;
            display: block;
            object-fit: contain;
        }
        .sidebar-brand-label {
            opacity: 0; transition: opacity 0.15s ease; white-space: nowrap;
        }
        .sidebar-nav:hover .sidebar-brand-label { opacity: 1; }

        .sidebar-menu {
            flex: 1;
            padding: 12px 8px;
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            overflow-y: auto;
            scrollbar-width: none;
        }
        .sidebar-menu::-webkit-scrollbar { display: none; }

        .side-link {
            width: 100%;
            border: none;
            background: transparent;
            color: rgba(255,255,255,0.75);
            display: flex;
            align-items: center;
            gap: var(--space-3);
            border-radius: var(--radius-xl);
            padding: 8px 12px;
            cursor: pointer;
            text-align: left;
            transition: background 0.2s ease, color 0.2s ease;
            font-size: var(--text-base);
            font-family: inherit;
        }
        .side-link:hover { background: rgba(255,255,255,0.1); color: var(--color-surface); }
        .side-link.active {
            background: rgba(255,255,255,0.15); color: var(--color-surface);
            position: relative;
        }
        .side-link.active::before {
            content: '';
            position: absolute;
            left: 0; top: 8px; bottom: 8px;
            width: 3px;
            background: var(--color-accent-tint);
            border-radius: 0 3px 3px 0;
        }

        .side-ico {
            min-width: 36px;
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .side-ico-img {
            width: 30px;
            height: 30px;
            display: block;
            object-fit: contain;
        }
        /* Иконка страницы — балансируем с большим H1 в hero-хедере */
        #pageHeaderIcon {
            width: 32px;
            height: 32px;
            transition: transform 0.25s ease;
        }
        .page-header-icon-img {
            width: 32px;
            height: 32px;
            display: block;
            object-fit: contain;
        }
        @media (max-width: 768px) {
            #pageHeaderIcon,
.page-header-icon-img { width: 28px; height: 28px; }
        }
        .side-label {
            opacity: 0; white-space: nowrap;
            transition: opacity 0.15s ease;
        }
        .sidebar-nav:hover .side-label { opacity: 1; }
        .sidebar-nav:hover .sidebar-profile-meta { opacity: 1; }

        .main-area {
            /* Overlay-sidebar: контент на всю ширину, sidebar накладывается
               сверху. См. design-2026.css → .sidebar-nav z-index:100. */
            padding-left: 0;
            min-height: 100vh;
            min-width: 0;
        }
        /* Раньше тут стояло transition-delay: 0.18s — за эти 180ms
           сайдбар уже расширялся до 246px, а padding-left контента
           ещё не сдвигался, что визуально перекрывало первую колонку
           Канбана и левый столбец Ганта. Убрано: оба блока теперь
           анимируются синхронно, без «overlap window». */
        /* При hover сайдбара расширяем отступ контента, чтобы
           меню не накладывалось на страницу. Тайминг совпадает с
           .sidebar-nav { transition: width 0.25s ease } — оба блока
           двигаются синхронно. На мобиле сайдбар — drawer (transform),
           поэтому правило ограничено десктопным брейкпоинтом.
           :focus-within не используем намеренно: после клика по пункту
           сайдбара браузер оставляет фокус на кнопке .side-link, и при
           наличии этого селектора .main-area продолжала держать
           padding-left:246px, тогда как сам .sidebar-nav уже свернулся
           обратно к 72px (у него focus-within-правила нет). Получался
           визуальный «провал» — header сдвинут вправо, как будто меню
           развёрнуто, хотя оно уже узкое. */
        /* В overlay-режиме main-area не сдвигается при hover sidebar —
           sidebar просто накладывается поверх. */

        /* ===== TABS now hidden - replaced by sidebar ===== */
        .tabs { display: none; }

        /* Override снят — глобальное правило выше задаёт щедрые
           отступы и max-width для Apple-стиля. Здесь оставляем только
           видимость активной вкладки. */
        .tab-content.active { display: block; }

        /* ===== Toolbar restyle ===== */
        .toolbar {
            background: rgba(255,255,255,0.96);
            backdrop-filter: blur(8px);
            padding: 8px 32px;
            display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
            border-bottom: 1px solid var(--color-border);
            box-shadow: none;
        }

        /* ===== Table containers restyle ===== */
        .plan-table-wrap {
            border-radius: var(--radius-2xl);
        }


/* [extracted to assets/css/] — был блок строк 2249–4444 */
/* [extracted to assets/css/] — был блок строк 4445–4680 */
/* [extracted to assets/css/] — был блок строк 4681–4927 */
/* [extracted to assets/css/] — был блок строк 4928–5086 */
/* [extracted to assets/css/] — был блок строк 5087–5149 */
/* [extracted to assets/css/] — был блок строк 5150–5760 */
/* [extracted to assets/css/] — был блок строк 5761–5950 */
/* [extracted to assets/css/] — был блок строк 5951–6643 */
/* [extracted to assets/css/] — был блок строк 6644–6893 */
/* [extracted to assets/css/] — был блок строк 6894–7393 */
/* [extracted to assets/css/] — был блок строк 7394–7844 */
/* [extracted to assets/css/] — был блок строк 7845–8037 */
/* [extracted to assets/css/] — был блок строк 8038–8374 */
/* [extracted to assets/css/] — был блок строк 8375–8553 */
/* [extracted to assets/css/] — был блок строк 8554–8728 */
/* [extracted to assets/css/] — был блок строк 8729–9455 */

/* ── Drag & Drop для плана (фазы / этапы / задачи) ─────── */
.plan-drag-handle {
    display: inline-block;
    cursor: grab;
    color: #ccc;
    font-size: var(--text-sm);
    margin-right: 5px;
    user-select: none;
    vertical-align: middle;
    transition: color 0.15s;
}
.plan-drag-handle:hover { color: #888; }
.plan-drag-handle:active { cursor: grabbing; }

/* design-2026.css использует .task-name-cell::before для кружка-чекбокса —
   старый hover-drag-handle через тот же псевдоэлемент удалён во избежание конфликта. */
#planBody tr.task-row .task-name-cell { position: relative; }

#planBody tr.plan-dragging { opacity: 0.35; }
#planBody tr.plan-drag-over td { border-top: 2px solid var(--color-primary); }

/* ── Конструктор полей (Этап 2) ── */
#fieldsAdminModal .field-def-row:last-child { border-bottom: none; }
#fieldsAdminModal .field-def-row:hover { background: var(--color-bg-tint); }
#fieldsAdminModal .plan-inline-btn { font-size: var(--text-base); padding: 4px 8px; }
#fieldEditor input[type="text"],
#fieldEditor select,
#fieldEditor textarea {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    box-sizing: border-box;
    margin-top: 4px;
    margin-bottom: 10px;
    font-family: inherit;
}
#fieldEditor textarea { resize: vertical; }
#fieldEditor label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-strong);
    display: block;
    margin-top: 6px;
}
#fieldEditor input[disabled] { background: var(--color-gray-100); color: var(--color-text-secondary); cursor: not-allowed; }
#fieldEditor select[disabled] { background: var(--color-gray-100); color: var(--color-text-secondary); cursor: not-allowed; }

/* ── Force Change Password Modal (первый вход) ── */
.fcp-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(26,26,46,0.92) 0%, rgba(15,52,96,0.92) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    overflow-y: auto;
    animation: fcpFadeIn 0.25s ease-out;
}
.fcp-overlay.active { display: flex; }

@keyframes fcpFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fcpSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fcp-card {
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: 0 24px 70px rgba(0,0,0,0.35);
    width: 100%;
    max-width: 440px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    animation: fcpSlideUp 0.3s ease-out;
    box-sizing: border-box;
    margin: auto;
}

.fcp-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-surface);
    margin: 0 auto 16px;
    box-shadow: 0 8px 20px rgba(62, 60, 89,0.35);
}

.fcp-title {
    margin: 0 0 8px;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-nav-bg);
    text-align: center;
}

.fcp-subtitle {
    margin: 0 0 24px;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.5;
}

.fcp-field {
    margin-bottom: 16px;
}

.fcp-field label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-strong);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.fcp-input-wrap {
    position: relative;
}

.fcp-input-wrap input {
    width: 100%;
    padding: 12px 44px 12px 12px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    font-family: inherit;
}
/* Email-инпут — без правого паддинга под «глаз» (его тут нет) */
.fcp-input-wrap input[type=email] {
    padding-right: 14px;
}

.fcp-input-wrap input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(62, 60, 89,0.12);
}

.fcp-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    font-size: var(--text-md);
    opacity: 0.55;
    transition: opacity 0.15s;
}
.fcp-eye:hover { opacity: 1; }

.fcp-hint {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: 6px;
    line-height: 1.4;
}
.fcp-requirements {
    list-style: none;
    margin: 8px 0 0;
    padding: var(--space-0);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.fcp-requirements li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    transition: color 0.2s;
}
.fcp-requirements li .fcp-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
    flex-shrink: 0;
    transition: all 0.2s;
    position: relative;
}
.fcp-requirements li.ok {
    color: #059669;
}
.fcp-requirements li.ok .fcp-dot {
    background: var(--color-success-500);
    border-color: var(--color-success-500);
}
.fcp-requirements li.ok .fcp-dot::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.fcp-match-hint {
    font-size: var(--text-xs);
    margin-top: 6px;
    min-height: 16px;
    transition: color 0.15s;
}
.fcp-match-hint.ok { color: #059669; }
.fcp-match-hint.nomatch { color: var(--color-danger-600); }

.fcp-error {
    color: var(--color-danger-600);
    font-size: var(--text-sm);
    min-height: 18px;
    margin: 4px 0 8px;
    text-align: center;
}

.fcp-submit {
    width: 100%;
    padding: var(--space-3);
    border: none;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-surface);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    box-shadow: 0 6px 16px rgba(62, 60, 89,0.25);
}
.fcp-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(62, 60, 89,0.35);
}
.fcp-submit:active:not(:disabled) { transform: translateY(0); }
.fcp-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.fcp-skip {
    width: 100%;
    margin-top: 10px;
    padding: var(--space-2);
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.15s, color 0.15s;
}
.fcp-skip:hover {
    background: var(--color-gray-100);
    color: var(--color-nav-bg);
}

@media (max-width: 480px) {
    .fcp-card { padding: 28px 16px 20px; border-radius: var(--radius-xl); }
    .fcp-title { font-size: 19px; }
    .fcp-overlay { padding: var(--space-3); align-items: flex-start; }
}
@media (max-height: 700px) {
    .fcp-overlay { align-items: flex-start; padding: var(--space-3); }
    .fcp-card { padding: 20px 24px; }
    .fcp-icon { width: 48px; height: 48px; margin-bottom: 10px; }
    .fcp-title { font-size: var(--text-lg); margin-bottom: 4px; }
    .fcp-subtitle { margin-bottom: 16px; font-size: var(--text-xs); }
    .fcp-field { margin-bottom: 10px; }
    .fcp-input-wrap input { padding: 9px 40px 9px 10px; font-size: var(--text-sm); }
}

/* ── Упоминания в комментариях ── */
.comment-mention {
    background: var(--color-primary-50);
    color: var(--color-primary-strong);
    padding: 1px 8px;
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-size: var(--text-xs);
    white-space: nowrap;
}
.comment-mention--me {
    background: var(--color-warning-50);
    color: #b45309;
}

/* Popup автокомплита @упоминаний */
.mention-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 44px;
    right: 12px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(8, 10, 18,0.15);
    z-index: 1500;
    padding: var(--space-1);
}
.mention-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.1s;
}
.mention-item:hover,
.mention-item--active {
    background: var(--color-primary-25);
}
.mention-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    color: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mention-name {
    font-size: var(--text-sm);
    color: var(--color-text);
    font-weight: 500;
}

/* Кликабельность task-name-cell — открывает Task Drawer */
.task-name-cell { cursor: pointer; transition: color 0.15s; }
.task-name-cell:hover .task-name-text { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-primary-50); }


/* [extracted to assets/css/] — был блок строк 6308–8314 */

/* [extracted to assets/css/] — был блок строк 8316–8594 */
/* [extracted to assets/css/] — был блок строк 8595–9067 */
/* [extracted to assets/css/] — был блок строк 9068–9240 */
/* ═══════════════════════════════════════════════════════════════
   ROADMAP DESIGN TRANSFER — перенос визуального стиля из макета
   дорожной карты: пилюли со статусами, срочность, Гантт.
   ─────────────────────────────────────────────────────────────
   Секция идёт последней → побеждает в каскаде без !important.
   ═══════════════════════════════════════════════════════════════ */

/* ── Статусные пилюли: точка-индикатор + цветной фон ─────────── */
.status-pill {
    gap: 5px;
    padding: 3px 10px;
    font-weight: 600;
    font-size: 11.5px;
}
.status-pill::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-pill.is-todo {
    background: rgba(100,116,139,.09);
    color: #636366;
}
.status-pill.is-todo::before { background: #94A3B8; }

.status-pill.is-progress {
    background: rgba(37,99,235,.10);
    color: #2563EB;
}
.status-pill.is-progress::before { background: #2563EB; }

.status-pill.is-done {
    background: rgba(22,163,74,.12);
    color: #16A34A;
}
.status-pill.is-done::before { background: #16A34A; }

.status-pill.is-blocked {
    background: rgba(220,38,38,.10);
    color: #DC2626;
}
.status-pill.is-blocked::before { background: #DC2626; }

/* ── Срочность: цветной фон + чуть более яркий текст ─────────── */
.urgency-pill {
    padding: 3px 10px;
    font-weight: 600;
    font-size: 11.5px;
}
.urgency-pill.is-normal {
    background: rgba(100,116,139,.08);
    color: #636366;
}
.urgency-pill.is-urgent {
    background: rgba(217,119,6,.10);
    color: #D97706;
}
.urgency-pill.is-critical {
    background: rgba(220,38,38,.10);
    color: #DC2626;
}

/* ── Гантт: тёмная шапка в стиле дорожной карты ─────────────── */
.gantt-v2-header {
    background: #1E2A3A;
    border-bottom-color: rgba(255,255,255,.08);
    border-radius: 10px 10px 0 0;
}
.gantt-v2-header.is-stuck { box-shadow: 0 4px 14px rgba(0,0,0,.25); }

.gantt-v2-name-head {
    background: #1E2A3A;
    color: rgba(255,255,255,.60);
    border-right-color: rgba(255,255,255,.08);
}
.gantt-v2-card.is-stuck-left .gantt-v2-name-head {
    background: #1E2A3A;
    box-shadow: 6px 0 8px -6px rgba(0,0,0,.35);
}

.gantt-v2-top-row {
    background: #243447;
    border-bottom-color: rgba(255,255,255,.08);
}
.gantt-v2-top-cell {
    color: rgba(255,255,255,.55);
    border-right-color: rgba(255,255,255,.06);
}

.gantt-v2-month-cell {
    background: #1E2A3A;
    color: rgba(255,255,255,.80);
    border-right-color: rgba(255,255,255,.06);
}
.gantt-v2-month-cell.is-today {
    background: rgba(37,99,235,.30);
    color: #fff;
}
.gantt-v2-month-cell.is-weekend {
    background: rgba(0,0,0,.15);
}
.gantt-v2-card[data-scale="week"] .gantt-v2-month-cell,
.gantt-v2-card[data-scale="day"]  .gantt-v2-month-cell {
    background: #1E2A3A;
}
.gantt-v2-card[data-scale="week"] .gantt-v2-month-cell.is-today,
.gantt-v2-card[data-scale="day"]  .gantt-v2-month-cell.is-today {
    background: rgba(37,99,235,.30);
}
.gantt-v2-card[data-scale="week"] .gantt-v2-month-cell.is-weekend,
.gantt-v2-card[data-scale="day"]  .gantt-v2-month-cell.is-weekend {
    background: rgba(0,0,0,.18);
}

/* ── Гантт: линия «Сегодня» — красная, как в макете ─────────── */
.gantt-v2-today-line {
    background: #EF4444;
    box-shadow: 0 0 0 1px rgba(255,255,255,.50);
}
.gantt-v2-today-line::before {
    background: #EF4444;
    box-shadow: 0 1px 3px rgba(239,68,68,.40);
}

/* ── Гантт: строка фазы — чёткий разделитель ────────────────── */
.gantt-v2-phase-row {
    border-top: 5px solid var(--color-bg-app, #F5F5F7);
    border-bottom: none;
}
.gantt-v2-phase-name {
    background: #EEF2FF;
    border-right-color: #C7D2FE;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: #3730A3;
}
.gantt-v2-phase-dot {
    width: 10px; height: 10px;
}
.gantt-v2-phase-count {
    background: rgba(55,48,163,.12);
    color: #3730A3;
}
.gantt-v2-card.is-stuck-left .gantt-v2-phase-name {
    background: #EEF2FF;
    box-shadow: 6px 0 8px -6px rgba(55,48,163,.20);
}

/* Гантт: бары и фаза-бар теперь полностью описаны в assets/css/gantt.css
   (cell-fill + статусная палитра PRD). Старые градиентные !important-правила
   (acid green/blue/red) удалены — они перекрывали --status-* палитру. */

/* ── Таблица плана: карточка (без border-radius — он режет углы шапки) ── */
.plan-table-wrap {
    border-radius: 0;
    border: 1px solid var(--color-border, #E2E8F0);
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}

/* ── Статусные пилюли: hover сохраняет цветной фон ──────────── */
.status-pill.is-clickable.is-todo:hover     { background: rgba(100,116,139,.16); }
.status-pill.is-clickable.is-progress:hover { background: rgba(37,99,235,.18); }
.status-pill.is-clickable.is-done:hover     { background: rgba(22,163,74,.20); }
.status-pill.is-clickable.is-blocked:hover  { background: rgba(220,38,38,.18); }

/* ── Таблица плана: строки задач — hover-подсветка ───────────── */
.task-row:hover td { background: #F8FAFC; }

/* ═══════════════════════════════════════════════════════════════
   PLAN ROADMAP HEADER — шапка с названием проекта и прогрессом
   (дизайн из макета Image #3: хлебные крошки + Inter 800 заголовок
   + большой процент справа)
   ═══════════════════════════════════════════════════════════════ */
.plan-roadmap-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: clamp(12px, 1.8vw, 22px) clamp(14px, 2.2vw, 28px);
    background: var(--color-surface, #fff);
    border-bottom: 1px solid var(--color-border, #E2E8F0);
    gap: clamp(12px, 1.5vw, 24px);
    flex-wrap: wrap;
}
.prh-left {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex: 1 1 0;
}
.prh-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: clamp(10px, 0.9vw, 11.5px);
    color: var(--color-text-secondary);
    margin-bottom: clamp(4px, 0.6vw, 8px);
    flex-wrap: wrap;
}
.prh-breadcrumbs .prh-sep  { opacity: .45; }
.prh-breadcrumbs .prh-current { font-weight: 500; }

/* Заголовок проекта — Inter 800 с тугим letter-spacing, как в макете */
.prh-title {
    font-family: 'Inter', var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 800;
    color: var(--color-text, #1E293B);
    letter-spacing: -1px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.prh-meta {
    font-size: clamp(11px, 0.9vw, 12px);
    color: var(--color-text-secondary);
    margin-top: 4px;
}

/* Правая часть: большой процент */
.prh-right {
    text-align: right;
    flex-shrink: 0;
}
.prh-progress-label {
    font-size: clamp(9px, 0.75vw, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}
.prh-progress-pct {
    font-family: 'Inter', var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 900;
    color: var(--color-text, #1E293B);
    line-height: 1;
    letter-spacing: -2.5px;
}
.prh-progress-tasks {
    font-size: clamp(10px, 0.85vw, 12px);
    color: var(--color-text-secondary);
    margin-top: 4px;
}
.prh-progress-bar-outer {
    width: clamp(80px, 10vw, 160px);
    height: 5px;
    background: var(--color-border, #E2E8F0);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 10px;
    margin-left: auto;
}
.prh-progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #34D399, #16A34A);
    border-radius: 99px;
    transition: width .4s ease;
}

@media (max-width: 600px) {
    .plan-roadmap-header { flex-direction: column; gap: 10px; }
    .prh-right { text-align: left; }
    .prh-progress-bar-outer { margin-left: 0; }
}

/* ── Дорожная карта: шире, но с дыханием слева/справа ───────────
   Было 32px с каждой стороны (от .tab-content) — таблица казалась
   зажатой. Теперь 16px: блок шире, но checkbox и контент не упираются
   в самый край контейнера. max-width снимаем, чтобы таблица занимала
   всю доступную ширину на широких экранах. */
#tab-plan {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}