/* ═══════════════════════════════════════════════════════════════
   Home Dashboard — карточки, KPI, объявления, моковый макет
   Извлечено из checklist_operational.css строки 2249–4444
   ═══════════════════════════════════════════════════════════════ */

        /* ===== HOME / ANNOUNCEMENTS BOARD ===== */
        .home-layout {
            max-width: 860px;
            margin: 0 auto;
            padding: 32px 24px;
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }

        /* ===== FAVORITE PROJECT CARDS ===== */
        .fav-cards-section { display: flex; flex-direction: column; gap: var(--space-3); }
        .fav-cards-header {
            display: flex; align-items: baseline; justify-content: space-between;
            gap: var(--space-3); flex-wrap: wrap;
        }
        .fav-cards-title {
            margin: var(--space-0); font-size: var(--text-base); font-weight: 700; color: var(--color-text);
            letter-spacing: 0.2px;
        }
        .fav-cards-hint { font-size: var(--text-xs); color: var(--color-text-secondary); }
        .fav-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: var(--space-3);
        }
        .fav-card {
            background: var(--color-surface);
            border: 1px solid var(--color-border-strong);
            border-radius: var(--radius-lg);
            padding: 12px 16px;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
            display: flex; flex-direction: column; gap: var(--space-2);
            min-height: 140px;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
        }
        .fav-card:hover {
            border-color: var(--color-primary);
            background: var(--color-bg-tint);
        }
        .fav-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
        .fav-card-title {
            font-size: var(--text-base); font-weight: 700; color: var(--color-text);
            line-height: 1.3; overflow: hidden; 
        }
        .fav-card-unstar {
            border: none; background: transparent; color: #f5b301;
            font-size: var(--text-md); line-height: 1; cursor: pointer; padding: 2px 4px;
            border-radius: var(--radius-xs); transition: background 0.15s;
        }
        .fav-card-unstar:hover { background: #fffaeb; }
        .fav-card-progress { display: flex; align-items: center; gap: var(--space-2); }
        .fav-card-progress-bar {
            flex: 1; height: 6px; background: var(--color-gray-100); border-radius: var(--radius-pill); overflow: hidden;
        }
        .fav-card-progress-fill {
            height: 100%; background: linear-gradient(90deg, var(--color-primary), #42a5f5);
            border-radius: var(--radius-pill); transition: width 0.3s;
        }
        .fav-card-progress-label {
            font-size: var(--text-xs); font-weight: 700; color: var(--color-primary); min-width: 34px; text-align: right;
        }
        .fav-card-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
        .fav-card-stat {
            font-size: var(--text-xs); color: var(--color-text-secondary); background: var(--color-gray-100);
            padding: 2px 8px; border-radius: var(--radius-pill);
        }
        .fav-card-stat--done { background: var(--color-success-50); color: var(--color-success); }
        .fav-card-stat--overdue { background: #fdecea; color: var(--color-danger-text); font-weight: 600; }
        .fav-card-foot {
            display: flex; flex-direction: column; gap: 3px;
            font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: auto;
        }
        .fav-card-deadline--empty { color: var(--color-gray-400); font-style: italic; }
        @media (max-width: 640px) {
            .fav-cards-grid { grid-template-columns: 1fr; }
        }

        /* ===== HOME mockup — 3 колонки точно по home-mockup-final-2026-05-13.html =====
           Все классы скоупированы под .home-mockup чтобы не конфликтовать с
           глобальными .tab/.card/.tag/.layout в остальной системе. */
        .home-mockup {
            --m-ink: var(--color-text, #1A1A2E);
            --m-muted: var(--color-text-secondary, #6E6E83);
            --m-muted-2: var(--color-text-muted, #9999AC);
            --m-line: var(--color-border, #E8E8EE);
            --m-line-2: var(--color-bg-chip, #F0F0F4);
            --m-bg: var(--color-bg, #F5F5F7);
            --m-bg-2: var(--color-bg-subtle, #FAFAFC);
            --m-card: var(--color-surface, #FFFFFF);
            --m-accent: var(--color-primary, #4A3D9A);
            --m-accent-soft: var(--color-primary-25, #EEEBF7);
            --m-danger: var(--color-danger, #B83553);
            --m-danger-bg: var(--color-danger-50, #FCEFEF);
            --m-warn: var(--color-warning, #D8A02B);
            --m-warn-bg: rgba(216, 160, 43, 0.14);
            --m-success: var(--color-success, #2E7D43);
            --m-success-bg: rgba(46, 125, 67, 0.12);
            --m-info-bg: rgba(74, 61, 154, 0.10);
            --m-tg-blue: #3F8AE0;
            --m-shadow-sm: 0 1px 2px rgba(15,16,32,.04);
            max-width: 1480px;
            margin: 0 auto;
            padding: 0 20px 12px;
            display: flex; flex-direction: column;
            gap: var(--space-2);
            min-height: 0;
        }
        .home-mockup .hello-bar {
            flex-shrink: 0;
            display: flex; align-items: baseline; gap: var(--space-3);
            margin: 0 0 4px;
        }
        .home-mockup .hello {
            margin: var(--space-0); font-size: var(--text-lg); font-weight: 700;
            letter-spacing: -0.018em; color: var(--m-ink);
        }
        .home-mockup .hello em { font-style: normal; color: var(--m-accent); }
        .home-mockup .hello-sub { margin: var(--space-0); font-size: var(--text-xs); color: var(--m-muted); font-weight: 500; }

        .home-mockup .layout {
            flex: 1; min-height: 0;
            display: grid;
            grid-template-columns: 270px 1fr 360px;
            gap: var(--space-2);
            align-items: stretch;
            position: relative;
            isolation: isolate;
        }
        .home-mockup .left-col,
        .home-mockup .center-col,
        .home-mockup .tg {
            position: relative;
            z-index: 0;
        }

        /* ── Левая колонка — KPI стек фиксированный + Top planов под ним ── */
        .home-mockup .left-col {
            display: flex; flex-direction: column; gap: var(--space-2);
            min-width: 0; min-height: 0;
            max-height: 100%;
        }
        .home-mockup .kpi-stack {
            flex-shrink: 0;
            display: grid; grid-template-rows: repeat(4, 1fr); gap: var(--space-2);
        }
        .home-mockup .kpi {
            background: var(--m-card);
            border: 1px solid var(--m-line);
            border-radius: var(--radius-lg);
            padding: 12px 16px;
            cursor: pointer;
            display: flex; align-items: center; gap: var(--space-3);
            font: inherit; text-align: left;
            transition: border-color .12s, transform .12s;
        }
        .home-mockup .kpi:hover { border-color: var(--m-ink); transform: translateY(-1px); }
        .home-mockup .kpi-ico {
            width: 40px; height: 40px; border-radius: var(--radius-lg);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: var(--text-lg); flex-shrink: 0;
        }
        .home-mockup .kpi.is-warn .kpi-ico { background: var(--m-danger-bg); color: var(--m-danger); }
        .home-mockup .kpi.is-info .kpi-ico { background: var(--m-info-bg); color: var(--m-accent); }
        .home-mockup .kpi.is-ok   .kpi-ico { background: var(--m-success-bg); color: var(--m-success); }
        .home-mockup .kpi.is-soft .kpi-ico { background: var(--m-bg); color: var(--m-ink); }
        .home-mockup .kpi-value { font-size: var(--text-2xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--m-ink); }
        .home-mockup .kpi-label { font-size: var(--text-xs); color: var(--m-muted); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

        .home-mockup .card {
            background: var(--m-card);
            border: 1px solid var(--m-line);
            border-radius: var(--radius-xl);
            padding: var(--space-4);
            box-shadow: var(--m-shadow-sm);
        }
        .home-mockup .card-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: var(--space-2); margin-bottom: 10px;
        }
        .home-mockup .card-title {
            font-size: var(--text-xs); font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.06em;
            color: var(--m-ink);
            display: flex; align-items: center; gap: var(--space-2);
        }
        .home-mockup .card-more {
            background: transparent; border: 0; cursor: pointer;
            color: var(--m-accent); font-size: var(--text-xs); font-weight: 500; font: inherit;
            min-height: 32px; display: inline-flex; align-items: center; padding: 4px 8px;
        }
        .home-mockup .card-more:hover { text-decoration: underline; }
        .home-mockup .top-plans {
            display: flex; flex-direction: column;
            overflow: hidden;
            min-height: 0;
            flex: 1 1 auto;
        }
        .home-mockup .top-plans-body { min-height: 0; overflow-y: auto; }

        /* ── Центральная колонка ── */
        .home-mockup .center-col {
            display: flex; flex-direction: column;
            background: var(--m-card);
            border: 1px solid var(--m-line);
            border-radius: var(--radius-xl);
            overflow: hidden;
            min-width: 0; min-height: 0;
            height: 100%;
        }
        /* Правая (чат) тоже на полную высоту */
        .home-mockup .tg { height: 100%; }
        .home-mockup .tabs {
            flex-shrink: 0;
            display: flex;
            padding: 0 16px;
            background: var(--m-card);
            border-bottom: 1px solid var(--m-line);
        }
        .home-mockup .tab {
            background: transparent; border: 0;
            padding: 12px 16px;
            font: inherit; font-size: var(--text-sm);
            color: var(--m-muted);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            display: flex; align-items: center; gap: var(--space-2);
            font-weight: 500;
            transition: color .12s, border-color .12s;
        }
        .home-mockup .tab:hover { color: var(--m-ink); }
        .home-mockup .tab.is-active { color: var(--m-ink); font-weight: 600; border-bottom-color: var(--m-ink); }
        .home-mockup .tab-badge {
            font-size: var(--text-xs);
            background: var(--m-bg); color: var(--m-muted);
            padding: 1px 8px; border-radius: var(--radius-pill);
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }
        .home-mockup .tab.is-active .tab-badge { background: var(--m-ink); color: #fff; }
        .home-mockup .tab-content {
            display: none;
            min-height: 0;
            overflow-y: auto;
            padding: 4px 0 6px !important;
            margin: 0 !important;
            max-width: none !important;
            text-align: left !important;
        }
        .home-mockup .tab-content.is-active { display: block; }
        /* Всё содержимое таба ВСЕГДА выравнено по левому краю
           (никаких центрирующих flex/grid правил) */
        .home-mockup .tab-content,
        .home-mockup .tab-content * {
            text-align: left !important;
        }
        .home-mockup .tab-content .hc-empty-state {
            text-align: left !important;
            justify-content: flex-start !important;
            align-items: flex-start !important;
            margin: 0 !important;
        }
        .home-mockup .tab-content .feed-item {
            justify-items: start !important;
            justify-content: start !important;
        }
        .home-mockup .tab-content .feed-time,
        .home-mockup .tab-content .feed-body,
        .home-mockup .tab-content .feed-meta {
            text-align: left !important;
        }
        /* Контейнеры внутри табов — без своих paddings/border, чтобы feed-item
           начинался ровно от левого края центральной колонки. */
        .home-mockup .home-feed,
        .home-mockup .hc-today-list,
        .home-mockup .hc-mentions-list {
            padding: 0 !important;
            margin: 0 !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            list-style: none !important;
        }

        /* Лента событий (таб «Все/Дедлайны/Упоминания») — feed-item как в мокапе.
           !important перебивает возможные legacy-стили из других файлов. */
        .home-mockup .home-feed,
        .home-mockup .hc-today-list,
        .home-mockup .hc-mentions-list {
            padding: 0 !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }
        .home-mockup .feed-item {
            display: grid !important;
            grid-template-columns: 70px 28px 1fr !important;
            column-gap: 10px !important;
            row-gap: 0 !important;
            padding: 8px 12px !important;
            align-items: flex-start !important;
            background: transparent !important;
            border: 0 !important;
            border-top: 1px solid var(--m-line-2) !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            margin: 0 !important;
            min-height: 0 !important;
            transition: background .12s !important;
        }
        .home-mockup .feed-item:first-of-type { border-top: 0 !important; }
        .home-mockup .feed-item:hover { background: var(--m-bg-2) !important; }
        .home-mockup .feed-time {
            font-size: var(--text-xs) !important;
            color: var(--m-muted-2) !important;
            font-weight: 500 !important;
            padding-top: 4px !important;
            line-height: 1.3 !important;
            background: transparent !important;
            border: 0 !important;
            white-space: nowrap;
        }
        .home-mockup .feed-time.is-now { color: var(--m-danger) !important; font-weight: 600 !important; }
        .home-mockup .feed-ico {
            width: 28px !important; height: 28px !important;
            border-radius: 8px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
            font-size: var(--text-sm) !important;
            background: var(--m-bg) !important;
            margin-top: 1px;
        }
        .home-mockup .feed-ico svg { width: 15px !important; height: 15px !important; }
        .home-mockup .kpi-ico svg { width: 20px; height: 20px; }
        .home-mockup .hc-empty-icon svg { width: 32px; height: 32px; opacity: 0.45; }
        .home-mockup .tab svg { display: inline-block; vertical-align: -2px; }
        .home-mockup .feed-ico.is-overdue { background: var(--m-danger-bg) !important; color: var(--m-danger) !important; }
        .home-mockup .feed-ico.is-done    { background: var(--m-success-bg) !important; color: var(--m-success) !important; }
        .home-mockup .feed-ico.is-task    { background: var(--m-info-bg) !important; color: var(--m-accent) !important; }
        .home-mockup .feed-ico.is-event   { background: var(--m-warn-bg) !important; color: #8B6209 !important; }
        .home-mockup .feed-ico.is-comment { background: var(--m-info-bg) !important; color: var(--m-accent) !important; }
        .home-mockup .feed-body {
            font-size: var(--text-base) !important; line-height: 1.45 !important;
            color: var(--m-ink) !important;
            min-width: 0;
            padding-top: 2px;
            background: transparent !important; border: 0 !important;
            white-space: normal !important;
            word-break: break-word !important;
            overflow-wrap: anywhere !important;
            overflow: visible !important;
            text-overflow: clip !important;
        }
        .home-mockup .feed-body b {
            font-weight: 600 !important;
            color: var(--m-ink) !important;
            white-space: normal !important;
            word-break: break-word !important;
            overflow-wrap: anywhere !important;
        }
        .home-mockup .feed-meta {
            font-size: var(--text-xs) !important;
            color: var(--m-muted-2) !important;
            margin-top: 3px !important;
            background: transparent !important;
            white-space: normal !important;
            word-break: break-word !important;
            overflow-wrap: anywhere !important;
        }
        .home-mockup .home-tag {
            display: inline-flex !important; align-items: center !important;
            font-size: var(--text-xs) !important; font-weight: 700 !important;
            letter-spacing: .04em !important; text-transform: uppercase !important;
            padding: 2px 7px !important;
            border-radius: 999px !important;
            margin-left: 4px !important;
            flex-shrink: 0;
            white-space: nowrap !important;
        }
        .home-mockup .home-tag.is-overdue { background: var(--m-danger-bg) !important; color: var(--m-danger) !important; }
        .home-mockup .home-tag.is-hot     { background: var(--m-warn-bg) !important; color: #8B6209 !important; }

        /* hc-empty-state — выровнен по левому краю, без центрирования */
        .home-mockup .hc-empty-state {
            padding: 14px 18px !important;
            text-align: left !important;
            display: block !important;
            color: var(--m-muted-2) !important;
            font-size: var(--text-sm);
        }
        .home-mockup .hc-empty-icon {
            font-size: var(--text-md) !important;
            margin-right: 6px !important;
            display: inline-block !important;
            opacity: 0.7;
        }
        .home-mockup .hc-empty-hint {
            font-size: var(--text-xs);
            color: var(--m-muted-2);
            margin-top: 4px;
        }
        /* Содержимое таба — всегда слева, без центрирования */
        .home-mockup .tab-content {
            text-align: left;
            align-items: flex-start;
        }
        /* Списки задач/упоминаний во вкладках без своего фона */
        .home-mockup .hc-today-list,
        .home-mockup .hc-mentions-list {
            padding: var(--space-0);
            background: transparent;
            border: none;
        }

        /* ── Календарь — точно как в home-mockup-final-2026-05-13.html ── */
        .home-mockup .tab-content.cal-tab {
            display: none;
            padding: 12px 16px 16px !important;
            overflow-y: auto !important;
        }
        .home-mockup .tab-content.cal-tab.is-active {
            display: block;
        }
        .home-mockup .cal {
            padding: 0 !important;
        }
        .home-mockup .cal-head {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 10px;
        }
        .home-mockup .cal-title {
            font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em;
            color: var(--m-ink);
        }
        .home-mockup .cal-nav { display: inline-flex; gap: var(--space-1); background: var(--m-bg); padding: 3px; border-radius: var(--radius-md); }
        .home-mockup .cal-nav button {
            background: transparent; border: 0; cursor: pointer;
            width: 28px; height: 28px; border-radius: var(--radius-sm);
            color: var(--m-muted); font-size: var(--text-base);
        }
        .home-mockup .cal-nav button:hover { background: var(--m-card); color: var(--m-ink); }
        .home-mockup .cal-nav .today-btn { width: auto; padding: 0 12px; font-size: var(--text-xs); font-weight: 600; color: var(--m-accent); }
        .home-mockup .cal-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 3px;
        }
        .home-mockup .cal-grid > .cal-dow { min-height: 0; }
        .home-mockup .cal-day > * { pointer-events: none; }
        .home-mockup .cal-day { pointer-events: auto; }
        .home-mockup .cal-dow {
            text-align: center;
            font-size: var(--text-xs); font-weight: 700;
            color: var(--m-muted-2);
            text-transform: uppercase; letter-spacing: .08em;
            padding: 4px 0;
        }
        .home-mockup .cal-day {
            min-height: 64px;
            border: 1px solid var(--m-line);
            border-radius: var(--radius-sm);
            padding: 4px 8px;
            cursor: pointer;
            display: flex; flex-direction: column; gap: 2px;
            background: var(--m-card);
            transition: border-color .12s, background .12s;
            overflow: hidden;
        }
        .home-mockup .cal-day.is-selected {
            background: var(--m-accent-soft) !important;
            border-color: var(--m-accent) !important;
            border-width: 1.5px !important;
        }
        .home-mockup .cal-day.has-events { font-weight: 500; }
        .home-mockup .cal-day:hover { border-color: var(--m-ink); }
        .home-mockup .cal-day-num {
            font-size: var(--text-sm); font-weight: 600; color: var(--m-ink);
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 2px;
        }
        .home-mockup .cal-day.is-other { background: var(--m-bg-2); }
        .home-mockup .cal-day.is-other .cal-day-num { color: var(--m-muted-2); font-weight: 400; }
        .home-mockup .cal-day.is-weekend .cal-day-num { color: var(--m-muted); }
        .home-mockup .cal-day.is-today { background: var(--m-accent-soft); border-color: var(--m-accent); }
        .home-mockup .cal-day.is-today .cal-day-num { color: var(--m-accent); font-weight: 700; }
        .home-mockup .cal-day.is-today .cal-day-num::after {
            content: ""; display: inline-block;
            width: 6px; height: 6px; border-radius: 50%; background: var(--m-accent);
        }
        .home-mockup .cal-event {
            font-size: var(--text-xs); font-weight: 500;
            padding: 2px 4px; border-radius: var(--radius-xs);
            background: var(--m-info-bg); color: var(--m-accent);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            line-height: 1.3;
        }
        .home-mockup .cal-event.is-overdue { background: var(--m-danger-bg); color: var(--m-danger); }
        .home-mockup .cal-event.is-hot     { background: var(--m-warn-bg); color: #8B6209; }
        .home-mockup .cal-event.is-ok      { background: var(--m-success-bg); color: var(--m-success); }
        .home-mockup .cal-event-more { font-size: var(--text-xs); color: var(--m-muted-2); padding: 1px 4px; font-weight: 500; }

        /* Детали выбранного дня — выезжающая снизу панель (как iOS Calendar).
           Сидит ВНЕ .cal — отдельным блоком в .tab-content.cal-tab. */
        .home-mockup .cal-details {
            display: none;
            flex-direction: column;
            min-height: 0;
            background: var(--m-bg-2);
            border-top: 1px solid var(--m-line);
        }
        .home-mockup .tab-content.cal-tab.has-selected .cal-details {
            display: flex;
            flex: 1 1 auto;
            overflow-y: auto;
        }
        .home-mockup .cal-details-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 8px 12px 8px;
            background: var(--m-bg-2);
            flex-shrink: 0;
        }
        .home-mockup .cal-details-title {
            font-size: var(--text-sm); font-weight: 600;
            color: var(--m-ink);
        }
        .home-mockup .cal-details-close {
            background: transparent; border: 0; cursor: pointer;
            width: 26px; height: 26px; border-radius: 50%;
            color: var(--m-muted); font-size: var(--text-md);
            display: inline-flex; align-items: center; justify-content: center;
        }
        .home-mockup .cal-details-close:hover { background: var(--m-bg); color: var(--m-ink); }
        /* Список событий в деталях — feed-item стиль, белые карточки на сером фоне */
        .home-mockup .cal-details .feed-item {
            background: var(--m-card) !important;
            border: 1px solid var(--m-line) !important;
            border-radius: 8px !important;
            margin: 6px 12px !important;
            padding: 10px 12px !important;
            border-top: 1px solid var(--m-line) !important;
        }
        .home-mockup .cal-details .feed-item:first-of-type { border-top: 1px solid var(--m-line) !important; }
        .home-mockup .cal-details .feed-item:hover { background: var(--m-card) !important; border-color: var(--m-accent) !important; }

        /* Узкая версия feed-item без иконки слева (для Дедлайны / Упоминания) */
        .home-mockup .feed-item.feed-item--narrow {
            grid-template-columns: 84px 1fr;
        }
        .home-mockup .feed-item.feed-item--narrow .feed-time.is-warn { color: #8B6209; font-weight: 600; }

        /* Избранное — сетка карточек */
        .home-mockup .home-fav-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: var(--space-2);
            padding: 12px 16px;
        }
        .home-mockup .home-fav-card {
            border: 1px solid var(--m-line);
            border-radius: var(--radius-lg);
            padding: var(--space-3);
            cursor: pointer;
            background: var(--m-card);
            transition: border-color .12s, box-shadow .12s, transform .12s;
            display: flex; flex-direction: column; gap: var(--space-2);
        }
        .home-mockup .home-fav-card:hover {
            border-color: var(--m-ink);
            box-shadow: 0 4px 12px rgba(15,16,32,.06);
            transform: translateY(-1px);
        }
        .home-mockup .home-fav-head {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: var(--space-2);
        }
        .home-mockup .home-fav-name {
            font-size: var(--text-base); font-weight: 600;
            color: var(--m-ink);
            flex: 1; min-width: 0;
            /* Без обрезки ключевого названия — имя плана видно целиком,
               переносится на 2-3 строки (Design Review 2026-05-15, п.5). */
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: var(--leading-snug, 1.35);
        }
        /* Скрываем нижний legacy-блок избранного на главной (он остался как
           mount для существующих fetch'ей; визуально показываем избранные
           только во вкладке «⭐ Избранное» центральной колонки). */
        .home-mockup #favCardsSection,
        #tab-home #favCardsSection {
            display: none !important;
        }

        /* Цвета совпадают с legacy fav-card в основной системе планов */
        .home-mockup .home-fav-unstar {
            background: transparent; border: 0; cursor: pointer;
            color: #f5b301;
            font-size: var(--text-md);
            padding: 2px 4px; width: 26px; height: 26px;
            line-height: 1; border-radius: var(--radius-xs);
            transition: background 0.15s;
        }
        .home-mockup .home-fav-unstar:hover { background: #fffaeb; }
        .home-mockup .home-fav-progress {
            display: flex; align-items: center; gap: var(--space-2);
        }
        .home-mockup .home-fav-bar {
            flex: 1; height: 6px;
            background: var(--color-gray-100, #F0F0F4); border-radius: var(--radius-pill);
            overflow: hidden;
        }
        .home-mockup .home-fav-fill {
            height: 100%; border-radius: var(--radius-pill);
            background: linear-gradient(90deg, var(--color-primary, #4A3D9A), #42a5f5);
            transition: width 0.3s;
        }
        .home-mockup .home-fav-pct {
            font-size: var(--text-xs); font-weight: 700;
            color: var(--color-primary, #4A3D9A);
            min-width: 34px; text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .home-mockup .home-fav-stats {
            display: flex; gap: var(--space-2); flex-wrap: wrap;
            font-size: var(--text-xs); color: var(--m-muted);
        }
        .home-mockup .home-fav-stat.is-ok { color: var(--m-success); font-weight: 500; }
        .home-mockup .home-fav-stat.is-overdue { color: var(--m-danger); font-weight: 600; }
        .home-mockup .home-fav-foot {
            display: flex; justify-content: space-between; gap: var(--space-2);
            font-size: var(--text-xs); color: var(--m-muted-2);
        }

        /* ── Telegram-чат ── */
        .home-mockup .tg {
            background: var(--m-card);
            border: 1px solid var(--m-line);
            border-radius: var(--radius-xl);
            overflow: hidden;
            display: flex; flex-direction: column;
            min-height: 0;
        }
        .home-mockup .tg-head {
            display: flex; align-items: center; gap: var(--space-2);
            padding: 8px 12px;
            background: var(--m-card);
            border-bottom: 1px solid var(--m-line);
            flex-shrink: 0;
        }
        .home-mockup .tg-head-avatar {
            width: 38px; height: 38px; border-radius: 50%;
            background: linear-gradient(135deg, #6CB5FF, #2B82D8);
            color: #fff; font-size: var(--text-base); font-weight: 600;
            display: inline-flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .home-mockup .tg-head-info { flex: 1; min-width: 0; }
        .home-mockup .tg-head-name { font-size: var(--text-base); font-weight: 600; line-height: 1.15; color: var(--m-ink); }
        .home-mockup .tg-head-status { font-size: var(--text-xs); color: var(--m-success); margin-top: 1px; }
        .home-mockup .tg-head-actions { display: flex; gap: 2px; }
        .home-mockup .tg-head-actions button {
            background: transparent; border: 0; cursor: pointer;
            width: 30px; height: 30px; border-radius: 50%;
            color: var(--m-muted); font-size: var(--text-sm);
        }
        .home-mockup .tg-head-actions button:hover { background: var(--m-bg); color: var(--m-ink); }
        .home-mockup .tg-rooms-panel {
            border-bottom: 1px solid var(--m-line);
            max-height: 260px; overflow-y: auto;
        }

        /* ── Чат планов: 2 состояния (список комнат / открытый чат) ── */
        .home-mockup .tg-list-view {
            display: flex; flex-direction: column;
            flex: 1; min-height: 0;
        }
        .home-mockup .tg-list-view[hidden],
        .home-mockup .tg-chat-view[hidden] { display: none !important; }
        .home-mockup .tg-chat-view {
            display: flex; flex-direction: column;
            flex: 1; min-height: 0;
        }
        .home-mockup .tg-list-header {
            padding: 12px 12px 8px;
            border-bottom: 1px solid var(--m-line);
        }
        .home-mockup .tg-list-title {
            font-size: var(--text-md); font-weight: 700;
            color: var(--m-ink);
            margin-bottom: 8px;
        }
        .home-mockup .tg-list-search {
            width: 100%;
            background: var(--m-bg);
            border: 1px solid transparent;
            border-radius: var(--radius-2xl);
            padding: 8px 12px;
            font: inherit; font-size: var(--text-sm);
            outline: none;
        }
        .home-mockup .tg-list-search:focus { background: var(--m-card); border-color: var(--m-line); }
        .home-mockup .tg-folders {
            display: flex; gap: var(--space-1);
            padding: var(--space-2);
            border-bottom: 1px solid var(--m-line);
            flex-shrink: 0;
            overflow-x: auto;
        }
        .home-mockup .tg-folder {
            background: transparent;
            border: 0;
            cursor: pointer;
            /* Тач-цель: вертикальный padding 10px → высота ~36px,
               в рекомендованном диапазоне 32-44px для уверенного нажатия. */
            padding: 10px 14px;
            border-radius: var(--radius-pill);
            font: inherit; font-size: var(--text-sm);
            color: var(--m-muted);
            white-space: nowrap;
            transition: background .12s, color .12s;
        }
        .home-mockup .tg-folder:hover { background: var(--m-bg); color: var(--m-ink); }
        .home-mockup .tg-folder.is-active {
            background: var(--m-tg-blue);
            color: #fff; font-weight: 600;
        }
        .home-mockup .tg-rooms-scroll {
            flex: 1; min-height: 0; overflow-y: auto;
            padding: 4px 0;
        }
        .home-mockup .tg-back-btn {
            width: 32px; height: 32px;
            border: 0; cursor: pointer;
            background: transparent;
            color: var(--m-muted);
            font-size: var(--text-2xl); line-height: 1;
            border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            margin-right: 4px;
        }
        .home-mockup .tg-back-btn:hover { background: var(--m-bg); color: var(--m-ink); }
        /* Элементы объединённого списка комнат */
        .home-mockup #pcRoomsList .pc-room-item {
            display: flex; align-items: center; gap: var(--space-2);
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid var(--m-line-2);
            transition: background .12s;
        }
        .home-mockup #pcRoomsList .pc-room-item:hover { background: var(--m-bg-2); }
        .home-mockup #pcRoomsList .pc-room-item.is-active { background: var(--m-accent-soft); }
        .home-mockup #pcRoomsList .pc-room-avatar {
            width: 40px; height: 40px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: var(--text-base); font-weight: 600; color: #fff;
            flex-shrink: 0;
            background: linear-gradient(135deg, #6CB5FF, #2B82D8);
        }
        .home-mockup #pcRoomsList .pc-room-item.is-personal .pc-room-avatar {
            background: linear-gradient(135deg, #E78B9B, #C95A77);
        }
        .home-mockup #pcRoomsList .pc-room-item.is-group .pc-room-avatar {
            background: linear-gradient(135deg, #F5C16C, #E0A23C);
        }
        .home-mockup #pcRoomsList .pc-room-item.is-plan .pc-room-avatar {
            background: linear-gradient(135deg, #8DA3F0, #5B73D6);
        }
        .home-mockup #pcRoomsList .pc-room-info { flex: 1; min-width: 0; }
        .home-mockup #pcRoomsList .pc-room-top-line {
            display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
        }
        .home-mockup #pcRoomsList .pc-room-name {
            font-size: var(--text-base); font-weight: 600; color: var(--m-ink);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            flex: 1; min-width: 0;
        }
        .home-mockup #pcRoomsList .pc-room-time {
            font-size: var(--text-xs); color: var(--m-muted-2);
            flex-shrink: 0;
        }
        .home-mockup #pcRoomsList .pc-room-bottom-line {
            display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
            margin-top: 2px;
        }
        .home-mockup #pcRoomsList .pc-room-preview {
            font-size: var(--text-sm); color: var(--m-muted);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            flex: 1; min-width: 0;
        }
        .home-mockup #pcRoomsList .pc-room-unread {
            min-width: 20px; height: 20px;
            padding: 0 8px;
            border-radius: var(--radius-pill);
            background: var(--m-tg-blue); color: #fff;
            font-size: var(--text-xs); font-weight: 600;
            display: inline-flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .home-mockup .pc-rooms-empty {
            text-align: center; color: var(--m-muted-2); font-size: var(--text-sm);
            padding: 24px 12px;
        }
        .home-mockup .tg-body {
            flex: 1; min-height: 0; overflow-y: auto;
            padding: 12px 8px;
            background:
                radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 1.5px) 0 0/22px 22px,
                linear-gradient(135deg, #DCDDE0 0%, #B7C4D7 100%);
            display: flex; flex-direction: column; gap: 2px;
        }
        .home-mockup .tg-date-sep {
            align-self: center;
            background: rgba(0,0,0,0.30); color: #fff;
            font-size: var(--text-xs); font-weight: 600;
            padding: 4px 12px; border-radius: var(--radius-pill);
            margin: 8px 0;
        }
        .home-mockup .tg-service {
            align-self: center;
            background: rgba(0,0,0,0.22); color: #fff;
            font-size: var(--text-xs);
            padding: 3px 12px; border-radius: var(--radius-pill);
            margin: 8px 0 8px;
            max-width: 80%; text-align: center;
        }
        .home-mockup .tg-msg-wrap { display: flex; gap: var(--space-2); max-width: 100%; }
        .home-mockup .tg-msg-wrap.is-out { justify-content: flex-end; }
        .home-mockup .tg-side-avatar {
            width: 30px; height: 30px; border-radius: 50%;
            flex-shrink: 0; align-self: flex-end;
            color: #fff; font-size: var(--text-xs); font-weight: 600;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .home-mockup .tg-side-avatar.c-1 { background: linear-gradient(135deg, #FFA37B, #FF8866); }
        .home-mockup .tg-side-avatar.c-2 { background: linear-gradient(135deg, #E78B9B, #C95A77); }
        .home-mockup .tg-side-avatar.c-3 { background: linear-gradient(135deg, #F5C16C, #E0A23C); }
        .home-mockup .tg-side-avatar.c-4 { background: linear-gradient(135deg, #8DA3F0, #5B73D6); }
        .home-mockup .tg-msg-wrap.no-avatar .tg-side-avatar { visibility: hidden; }
        .home-mockup .tg-msg {
            max-width: 80%;
            padding: 8px 8px 4px;
            border-radius: var(--radius-xl);
            font-size: var(--text-base); line-height: 1.38;
            position: relative;
            box-shadow: 0 1px 1.5px rgba(0,0,0,0.10);
        }
        .home-mockup .tg-msg-wrap.is-in .tg-msg {
            background: #FFFFFF; color: #1A1A2E;
            border-bottom-left-radius: 4px;
        }
        .home-mockup .tg-msg-wrap.is-out .tg-msg {
            background: #EFFDDE; color: #1A1A2E;
            border-bottom-right-radius: 4px;
        }
        .home-mockup .tg-msg-author { font-size: var(--text-sm); font-weight: 600; margin-bottom: 2px; color: var(--m-tg-blue); }
        .home-mockup .tg-msg-author.c-1 { color: #E36A4A; }
        .home-mockup .tg-msg-author.c-2 { color: #C95A77; }
        .home-mockup .tg-msg-author.c-3 { color: #B58119; }
        .home-mockup .tg-msg-author.c-4 { color: #5B73D6; }
        .home-mockup .tg-msg-text { font-size: var(--text-base); line-height: 1.4; word-wrap: break-word; }
        .home-mockup .tg-msg-text b.mention { color: var(--m-tg-blue); font-weight: 600; }
        .home-mockup .tg-msg-meta {
            float: right; margin-left: 8px; margin-top: 4px;
            display: inline-flex; align-items: center; gap: 3px;
            font-size: var(--text-xs); color: rgba(0,0,0,0.40);
        }
        .home-mockup .tg-msg-wrap.is-out .tg-msg-meta { color: rgba(31, 110, 54, 0.65); }
        .home-mockup .tg-check { font-size: var(--text-xs); line-height: 1; letter-spacing: -3px; }
        .home-mockup .tg-check.read { color: #4FAE4E; }
        .home-mockup .tg-input {
            background: var(--m-card);
            border-top: 1px solid var(--m-line);
            padding: var(--space-2);
            display: flex; align-items: center; gap: var(--space-2);
            flex-shrink: 0;
        }
        .home-mockup .tg-input .icon {
            width: 36px; height: 36px;
            border: 0; cursor: pointer; border-radius: 50%;
            background: transparent;
            color: var(--m-muted);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: var(--text-lg);
        }
        .home-mockup .tg-input .icon:hover { background: var(--m-bg); color: var(--m-ink); }
        .home-mockup .tg-input-field {
            flex: 1;
            background: var(--m-bg);
            border: 0; border-radius: var(--radius-2xl);
            padding: 8px 12px;
            font: inherit; font-size: var(--text-base);
            outline: none;
            color: var(--m-ink);
            resize: none; min-height: 36px; max-height: 120px;
        }
        .home-mockup .tg-input-field:focus { background: var(--m-card); }
        .home-mockup .tg-send {
            background: var(--m-tg-blue) !important;
            color: #fff !important;
            font-size: var(--text-base) !important;
        }
        .home-mockup .tg-send:hover { background: #2F7BD0 !important; }

        @media (max-width: 1200px) {
            .home-mockup .layout { grid-template-columns: 220px 1fr; }
            .home-mockup .tg { grid-column: 1 / -1; min-height: 420px; }
        }
        @media (max-width: 800px) {
            .home-mockup .layout { grid-template-columns: 1fr; }
            .home-mockup .kpi-stack { grid-template-rows: auto; grid-template-columns: repeat(2, 1fr); }
        }

        /* ===== Legacy HOME (--hc) — оставлено для обратной совместимости ===== */
        .home-layout.home-layout--hc {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px 12px;
            gap: var(--space-2);
        }
        /* Минимальный воздух от шапки до приветствия */
        #tab-home.tab-content { padding-top: 10px; }

        /* Greeting — Premium hero (компактная версия) */
        .hc-greet {
            display: flex; justify-content: space-between; align-items: flex-end;
            gap: var(--space-3); flex-wrap: wrap;
            margin-bottom: 0;
        }
        .hc-greet-title {
            font-size: var(--text-2xl); font-weight: 600; color: var(--color-text);
            letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 2px;
        }
        .hc-greet-title .hc-name {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
        }
        .hc-greet-sub { font-size: var(--text-base); color: var(--color-text-secondary); letter-spacing: -0.005em; }
        .hc-greet-sub b { color: var(--color-primary); font-weight: 600; }
        .hc-greet-sub .hc-danger { color: var(--color-danger); font-weight: 600; }

        /* Live pill справа от приветствия */
        .hc-live-pill {
            display: inline-flex; align-items: center; gap: var(--space-2);
            padding: 8px 12px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-pill);
            box-shadow: var(--shadow-1);
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.005em;
        }
        .hc-live-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--color-success);
            box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
            animation: hc-live-pulse 2s infinite;
        }
        @keyframes hc-live-pulse {
            0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55); }
            70% { box-shadow: 0 0 0 10px rgba(52, 199, 89, 0); }
            100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .hc-live-dot { animation: none; }
        }

        /* Favorites — 3-column grid (по образу мокапа: card + bar + stats) */
        .fav-cards-section--strip {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: var(--space-0);
        }
        /* Шапка "ИЗБРАННЫЕ ПРОЕКТЫ" скрыта — карточки идут без заголовка. */
        .fav-cards-section--strip .fav-cards-header { display: none; }
        .fav-cards-section--strip .fav-cards-title { display: none; }
        .fav-cards-grid--strip {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            grid-auto-flow: row;
            overflow-x: visible;
            gap: var(--space-3);
            padding: var(--space-0);
        }
        @media (max-width: 900px) {
            .fav-cards-grid--strip { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 600px) {
            .fav-cards-grid--strip { grid-template-columns: 1fr !important; }
        }
        .fav-cards-grid--strip .fav-card {
            flex: 0 1 auto;
            min-height: 110px;
            padding: 16px 20px;
            border-radius: var(--radius-xl);
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .fav-cards-grid--strip .fav-card:hover {
            border-color: var(--color-border-strong);
            box-shadow: var(--shadow-1);
        }
        .fav-cards-grid--strip .fav-card-head .fav-card-title {
            font-size: var(--text-md);
            font-weight: 700;
            letter-spacing: -0.01em;
        }
        .fav-cards-grid--strip .fav-card-progress {
            display: flex;
            align-items: center;
            gap: var(--space-0);
            margin-top: 6px;
        }
        .fav-cards-grid--strip .fav-card-progress-bar {
            flex: 1;
            height: 8px;
            background: var(--color-bg-subtle);
            border-radius: var(--radius-pill);
            overflow: hidden;
        }
        .fav-cards-grid--strip .fav-card-progress-fill {
            height: 100%;
            background: var(--color-primary);
            border-radius: var(--radius-pill);
        }
        .fav-cards-grid--strip .fav-card-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-2);
        }
        .fav-cards-grid--strip .fav-card-stat {
            font-size: var(--text-xs);
            padding: var(--space-0);
            background: transparent !important;
            color: var(--color-text-secondary);
            font-weight: 500;
        }
        .fav-cards-grid--strip .fav-card-stat:last-child {
            font-weight: 600;
            color: var(--color-text);
        }
        .fav-cards-grid--strip .fav-card-foot { display: none; }

        /* «+ Добавить план в избранное» — dashed placeholder-карточка */
        .fav-card--add {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1.5px dashed var(--color-border-strong) !important;
            background: transparent !important;
            color: var(--color-text-secondary);
            font-size: var(--text-base);
            font-weight: 500;
            text-align: center;
            padding: 16px 20px;
            cursor: pointer;
            transition: border-color 0.15s ease, color 0.15s ease;
        }
        .fav-card--add:hover {
            border-color: var(--color-primary) !important;
            color: var(--color-primary);
        }

        /* ===== Mid-row: KPI 2×2 grid (узкая) | Сегодня (широкая) | Риски (средняя) =====
           Все три колонки выровнены на одинаковую высоту (align-items: stretch),
           чтобы дашборд выглядел как сетка карточек, а не «зубы». */
        .hc-mid-row {
            display: grid;
            grid-template-columns: 300px minmax(0, 1.8fr) minmax(320px, 1.1fr);
            gap: var(--space-3);
            align-items: stretch;
            margin-top: 6px;
            min-height: 320px;
        }
        .hc-mid-row > .hc-card--panel { height: 100%; }
        @media (max-width: 1200px) {
            .hc-mid-row { grid-template-columns: 1fr 1fr; }
            .hc-mid-row > .hc-kpi-grid-2x2 { grid-column: 1 / -1; }
        }
        @media (max-width: 700px) {
            .hc-mid-row { grid-template-columns: 1fr; }
            .hc-mid-row > .hc-kpi-grid-2x2 { grid-column: auto; }
        }

        /* KPI 2×2 grid: плитки растянуты на 2 равные строки, чтобы сетка
           совпадала по высоте с соседними карточками «Сегодня» / «Риски». */
        .hc-kpi-grid-2x2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: var(--space-2);
            align-content: stretch;
            align-items: stretch;
        }
        .hc-kpi-grid-2x2 > .hc-kpi-tile--mini { height: 100%; }

        /* Legacy main-grid (back-compat — если где-то ещё используется) */
        .hc-main-grid {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: var(--space-3);
            align-items: start;
            margin-top: 4px;
        }
        .hc-kpi-col { display: flex; flex-direction: column; gap: var(--space-2); }
        .hc-content-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

        /* Legacy row (back-compat — на случай если где-то ещё используется) */
        .hc-kpi-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-2);
            margin-top: 4px;
        }
        .hc-kpi-tile {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-top: 3px solid var(--hc-kpi, var(--color-primary));
            border-radius: var(--radius-xl);
            padding: var(--space-3);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            box-shadow: var(--shadow-1);
            opacity: 0;
            transform: translateY(8px);
            animation: hc-kpi-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
        /* Mini-вариант для 2×2 KPI grid: большая плитка с огромным цветным
           числом сверху и маленьким uppercase label снизу. Без бокового
           акцента — цвет передаётся через само число. */
        .hc-kpi-tile--mini {
            padding: 16px 16px 12px;
            border-radius: var(--radius-xl);
            border: 1px solid var(--color-border);
            border-top: 1px solid var(--color-border);
            border-left: 1px solid var(--color-border);
            display: flex;
            flex-direction: column;
            gap: var(--space-0);
            justify-content: space-between;
            align-items: flex-start;
            box-shadow: none;
            min-height: 130px;
            background: var(--color-surface);
        }
        .hc-kpi-tile--mini[data-kind="done"] { --hc-kpi: var(--color-success); }
        .hc-kpi-tile--mini .hc-kpi-value {
            font-size: 44px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.03em;
            color: var(--color-text);
            background: none;
            -webkit-text-fill-color: currentColor;
            margin-bottom: auto;
        }
        .hc-kpi-tile--mini[data-kind="overdue"] .hc-kpi-value { color: var(--color-danger); }
        .hc-kpi-tile--mini[data-kind="week"]    .hc-kpi-value { color: var(--color-warning); }
        .hc-kpi-tile--mini[data-kind="done"]    .hc-kpi-value { color: var(--color-success); }
        .hc-kpi-tile--mini .hc-kpi-label {
            font-size: var(--text-xs);
            letter-spacing: 0.08em;
            font-weight: 600;
            color: var(--color-text-secondary);
            text-transform: uppercase;
            margin-top: 12px;
        }
        .hc-kpi-tile--mini:hover {
            transform: none;
            border-color: var(--color-border-strong);
        }
        /* Подвал плитки: мини-описание + полоска прогресса.
           Прижат к низу плитки, заполняет «воздух» под цифрой. */
        .hc-kpi-foot {
            margin-top: 8px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }
        .hc-kpi-sub {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            line-height: 1.35;
            font-weight: 500;
            letter-spacing: -0.005em;
        }
        .hc-kpi-bar {
            width: 100%;
            height: 4px;
            background: var(--color-bg-subtle, #F5F5F7);
            border-radius: var(--radius-pill);
            overflow: hidden;
        }
        .hc-kpi-bar-fill {
            height: 100%;
            width: 0%;
            border-radius: var(--radius-pill);
            transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .hc-kpi-bar-fill.is-warn    { background: var(--color-danger); }
        .hc-kpi-bar-fill.is-neutral { background: var(--color-warning); }
        .hc-kpi-bar-fill.is-ok      { background: var(--color-success); }

        /* Старый --compact (для legacy main-grid layout) */
        .hc-kpi-tile--compact {
            padding: 8px 12px 8px;
            border-radius: var(--radius-lg);
            border-top-width: 2px;
            border-left: 2px solid var(--hc-kpi, var(--color-primary));
            border-top-color: transparent;
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: auto auto;
            column-gap: var(--space-2);
            row-gap: var(--space-0);
            box-shadow: none;
        }
        .hc-kpi-tile--compact .hc-kpi-label {
            grid-column: 1; grid-row: 1;
            font-size: var(--text-xs); letter-spacing: 0.05em;
            font-weight: 600; color: var(--color-text-secondary);
            align-self: center;
        }
        .hc-kpi-tile--compact .hc-kpi-value {
            grid-column: 2; grid-row: 1 / span 2;
            font-size: var(--text-2xl); font-weight: 700; line-height: 1;
            align-self: center; justify-self: end;
        }
        .hc-kpi-tile--compact .hc-kpi-meta { grid-column: 1; grid-row: 2; margin: var(--space-0); }
        .hc-kpi-tile--compact .hc-kpi-trend { font-size: var(--text-xs); }
        .hc-kpi-tile--compact .hc-kpi-sub { display: none; }
        .hc-kpi-tile--compact:hover { transform: none; }
        .hc-kpi-tile:nth-child(1) { animation-delay: 0.05s; }
        .hc-kpi-tile:nth-child(2) { animation-delay: 0.10s; }
        .hc-kpi-tile:nth-child(3) { animation-delay: 0.15s; }
        .hc-kpi-tile:nth-child(4) { animation-delay: 0.20s; }
        @keyframes hc-kpi-in { to { opacity: 1; transform: translateY(0); } }
        .hc-kpi-tile:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-2), 0 0 0 1px var(--color-primary-50);
            border-color: var(--color-primary-50);
        }
        @media (prefers-reduced-motion: reduce) {
            .hc-kpi-tile { animation: none; opacity: 1; transform: none; }
            .hc-kpi-tile:hover { transform: none; }
        }
        .hc-kpi-tile::before { display: none; } /* убираем старую цветную полоску */

        .hc-kpi-tile[data-kind="today"] { --hc-kpi: var(--color-primary); }
        .hc-kpi-tile[data-kind="overdue"] { --hc-kpi: var(--color-danger); }
        .hc-kpi-tile[data-kind="week"] { --hc-kpi: var(--color-warning); }
        .hc-kpi-tile[data-kind="mention"] { --hc-kpi: var(--color-primary-strong); }

        /* Mockup-style KPI: убираем декоративную иконку слева, оставляем чистый
           label / value / trend. Цвет вида сохраняется через --hc-kpi для левого
           акцент-бордера в самом тайле. */
        .hc-kpi-label {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .hc-kpi-value {
            font-size: 32px;
            font-weight: 600;
            letter-spacing: -0.03em;
            color: var(--color-text);
            line-height: 1;
            font-variant-numeric: tabular-nums;
            background: linear-gradient(135deg, var(--color-text) 0%, var(--hc-kpi, var(--color-primary-strong)) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hc-kpi-sub {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            letter-spacing: -0.005em;
        }
        @media (max-width: 1024px) {
            .hc-kpi-row { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 640px) {
            .hc-kpi-row { grid-template-columns: 1fr; }
            .hc-kpi-value { font-size: 36px; }
            .hc-greet-title { font-size: 26px; }
        }

        /* Card (компактная версия) */
        .hc-card {
            background: var(--color-surface);
            border: 1px solid var(--color-border-strong);
            border-radius: var(--radius-lg);
            padding: var(--space-3);
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
            transition: border-color 0.15s, background 0.15s;
        }
        /* В hc-mid-row карточки растягиваются на всю высоту строки;
           внутреннее содержимое раскладываем колонкой, чтобы список или
           empty-state занимал освободившееся место и центрировался. */
        .hc-mid-row .hc-card--panel {
            display: flex; flex-direction: column;
        }
        .hc-mid-row .hc-card--panel .hc-today-list,
        .hc-mid-row .hc-card--panel .hc-risks-list {
            flex: 1 1 auto; min-height: 0;
            display: flex; flex-direction: column;
        }
        .hc-mid-row .hc-card--panel .hc-empty-state {
            margin: auto;
        }
        .hc-card:hover {
            border-color: var(--color-border-strong);
            background: var(--color-bg-tint);
        }
        .hc-card-head {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 4px; gap: var(--space-2);
        }
        .hc-card-title {
            font-size: var(--text-md); font-weight: 600; color: var(--color-text);
            letter-spacing: -0.012em;
            display: flex; align-items: center; gap: var(--space-2);
            min-width: 0; flex: 1 1 auto;
            white-space: normal; overflow: hidden; 
        }
        .hc-card-sub {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            font-weight: 500;
            letter-spacing: -0.005em;
            margin-left: auto;
            white-space: nowrap;
        }
        .hc-card-more { flex-shrink: 0; }
        .hc-card-more {
            font-size: var(--text-xs); color: var(--color-primary); font-weight: 600;
            cursor: pointer; background: transparent; border: none; padding: 4px 8px;
            border-radius: var(--radius-sm);
        }
        .hc-card-more:hover { background: var(--color-primary-10); }
        .hc-tab {
            font-size: var(--text-xs); color: var(--color-text-secondary);
            padding: var(--space-2); cursor: pointer; border: none; background: transparent;
            border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap;
            transition: var(--transition-fast);
        }
        .hc-tab.active {
            color: var(--color-primary); border-bottom-color: var(--color-primary);
            font-weight: 600;
        }
        .hc-tab.active .hc-tab-count {
            background: var(--color-primary-50); color: var(--color-primary);
        }
        .hc-task-item {
            display: flex; align-items: center; gap: var(--space-2);
            padding: 8px 12px; border-radius: var(--radius-md);
            border: 1px solid var(--color-border); background: var(--color-bg-faint);
            cursor: pointer; transition: var(--transition-fast);
        }
        .hc-task-item:hover { border-color: var(--color-primary); background: var(--color-primary-10); }
        .hc-task-item.is-overdue { border-color: var(--color-danger-50); background: var(--color-danger-25); }
        .hc-task-check {
            width: 16px; height: 16px; border: 2px solid var(--color-border-strong);
            border-radius: var(--radius-xs); flex-shrink: 0; position: relative;
        }
        .hc-task-item.is-overdue .hc-task-check { border-color: var(--color-danger); }
        .hc-task-check.is-done {
            background: var(--color-success); border-color: var(--color-success);
        }
        .hc-task-check.is-done::after {
            content: "✓"; position: absolute; color: #fff; font-size: var(--text-xs); font-weight: 700;
            left: 1px; top: -3px;
        }
        .hc-task-body { flex: 1; min-width: 0; }
        .hc-task-name {
            font-size: var(--text-sm); color: var(--color-text); font-weight: 500;
            overflow: hidden;  white-space: normal;
        }
        .hc-task-check.is-done + .hc-task-body .hc-task-name {
            color: var(--color-text-muted);
        }
        .hc-task-item:has(.hc-task-check.is-done) {
            opacity: 0.75;
            background: var(--color-success-25, rgba(34, 197, 94, 0.06));
        }
        .hc-task-item:has(.hc-task-check.is-done):hover { opacity: 1; }
        .hc-task-meta {
            font-size: var(--text-xs); color: var(--color-text-secondary);
            display: flex; gap: var(--space-2); margin-top: 2px; align-items: center;
        }
        .hc-plan-dot { display: inline-flex; align-items: center; gap: var(--space-1); }
        .hc-plan-dot::before {
            content: ""; width: 6px; height: 6px; border-radius: 50%;
            background: var(--dot, var(--color-primary));
        }
        .hc-task-chip {
            font-size: var(--text-xs); font-weight: 600; padding: 2px 8px;
            border-radius: var(--radius-pill); flex-shrink: 0;
        }
        .hc-task-chip--today { background: var(--color-warning-50); color: #92400E; }
        .hc-task-chip--overdue { background: var(--color-danger-50); color: var(--color-danger-text); }
        .hc-task-chip--progress { background: var(--color-primary-50); color: var(--color-primary); }
        .hc-task-chip--done { background: var(--color-success-50); color: var(--color-success); }

        /* «Сегодня нужно решить» — приоритет visual: просрочки красные,
today оранжевые { display: flex; flex-direction: column; gap: var(--space-2); }
        .hc-dl-item {
            display: flex; gap: var(--space-3); padding: var(--space-2);
            border-left: 3px solid var(--dl, var(--color-primary));
            background: var(--color-bg-subtle); border-radius: var(--radius-md);
            cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
        }
        .hc-dl-item:hover { background: var(--color-bg-chip); }
        .hc-dl-item.is-overdue {
            border-left-color: var(--color-danger);
            background: rgba(255, 59, 48, 0.06);
        }
        .hc-dl-item.is-overdue:hover { background: rgba(255, 59, 48, 0.10); }
        .hc-dl-item.is-today {
            border-left-color: var(--color-warning);
            background: rgba(255, 149, 0, 0.06);
        }
        .hc-dl-item.is-today:hover { background: rgba(255, 149, 0, 0.10); }
        .hc-dl-date {
            font-size: var(--text-xs); text-transform: uppercase; color: var(--color-text-secondary);
            font-weight: 700; min-width: 52px; line-height: 1.2;
        }
        .hc-dl-body { flex: 1; min-width: 0; }
        .hc-dl-title {
            font-size: var(--text-sm); color: var(--color-text); font-weight: 500;
            display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
        }
        .hc-dl-meta { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
        /* Tag «Просрочено / Сегодня» — мелкая капсула справа от названия */
        .hc-dl-tag {
            display: inline-flex;
            align-items: center;
            font-size: var(--text-xs);
            font-weight: 700;
            padding: 1px 8px;
            border-radius: var(--radius-pill);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            line-height: 1.4;
        }
        .hc-dl-tag.is-overdue {
            background: var(--color-danger);
            color: white;
        }
        .hc-dl-tag.is-today {
            background: var(--color-warning);
            color: white;
        }
        .hc-mention-item {
            display: flex; gap: var(--space-2); padding: var(--space-2);
            border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-fast);
        }
        .hc-mention-item:hover { background: var(--color-gray-50); }
        .hc-mention-item.is-unread { background: var(--color-primary-10); }
        .hc-mention-avatar {
            width: 30px; height: 30px; border-radius: 50%;
            background: var(--color-primary); color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-size: var(--text-xs); font-weight: 700; flex-shrink: 0;
        }
        .hc-mention-body { flex: 1; min-width: 0; }
        .hc-mention-line {
            font-size: var(--text-xs); color: var(--color-text); line-height: 1.4;
            overflow: hidden; 
        }
        .hc-mention-line b { font-weight: 600; }
        .hc-mention-line .hc-tag { color: var(--color-primary); font-weight: 600; }
        .hc-mention-time { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
        .hc-mention-dot {
            width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%;
            flex-shrink: 0; align-self: center;
        }

        /* Empty state */
        .hc-empty-state {
            text-align: center; padding: 16px 12px;
            color: var(--color-text-secondary); font-size: var(--text-sm);
            display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
            letter-spacing: -0.005em;
        }
        .hc-empty-icon { font-size: var(--text-2xl); opacity: 0.7; }
        .hc-empty-hint {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
            max-width: 280px;
            line-height: 1.5;
        }
        .hc-collapse--inline > .hc-card {
            margin: var(--space-0);
            border-radius: 0;
            border: none;
            border-top: 1px solid var(--color-bg-subtle);
            box-shadow: none;
        }
        .hc-collapse--inline > .hc-card:first-of-type { border-top: 1px solid var(--color-border); }
        
        
        
        .hc-donut .hc-donut-track { stroke: var(--color-bg-subtle); }
        .hc-donut-legend-item {
            display: grid;
            grid-template-columns: 12px 1fr auto;
            gap: var(--space-2);
            align-items: center;
            font-size: var(--text-xs);
            color: var(--color-text);
            letter-spacing: -0.005em;
        }
        .hc-donut-legend-dot {
            width: 10px; height: 10px;
            border-radius: var(--radius-xs);
            display: inline-block;
        }
        .hc-donut-legend-name { font-weight: 500; }
        .hc-donut-legend-count {
            color: var(--color-text-secondary);
            font-variant-numeric: tabular-nums;
            font-weight: 600;
        }
        .hc-bar-row {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: auto auto;
            gap: 4px 12px;
        }
        .hc-bar-name {
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--color-text);
            letter-spacing: -0.005em;
            grid-column: 1 / 2;
        }
        .hc-bar-stats {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            font-variant-numeric: tabular-nums;
            grid-column: 2 / 3;
            text-align: right;
            white-space: nowrap;
        }
        .hc-bar-stats .hc-bar-pct {
            font-weight: 700;
            color: var(--color-text);
            margin-right: 4px;
        }
        .hc-bar-track {
            grid-column: 1 / -1;
            height: 6px;
            background: var(--color-bg-subtle);
            border-radius: var(--radius-pill);
            overflow: hidden;
            position: relative;
        }
        .hc-bar-fill {
            position: absolute; left: 0; top: 0; bottom: 0;
            background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
            border-radius: var(--radius-pill);
            transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .hc-bar-fill.is-done { background: linear-gradient(90deg, var(--color-success) 0%, #1F9D4D 100%); }

        /* ── Live activity feed ── */
        .hc-live-pill--inline {
            padding: 4px 8px;
            font-size: var(--text-xs);
            color: var(--color-success);
            font-weight: 600;
            box-shadow: none;
        }
        .hc-activity-list {
            display: flex;
            flex-direction: column;
        }

        /* ===== События — ближайшие встречи и дедлайны ===== */
        .hc-events-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }
        .hc-event-row {
            display: grid;
            grid-template-columns: 56px 1fr;
            gap: var(--space-4);
            padding: 12px 16px;
            background: var(--color-bg-subtle);
            border-radius: var(--radius-lg);
            border: none;
            align-items: center;
            transition: background 0.15s ease;
        }
        .hc-event-row:hover { background: var(--color-bg-chip); }
        .hc-event-date {
            text-align: left;
            background: transparent;
            border-radius: 0;
            padding: var(--space-0);
            min-width: 0;
        }
        .hc-event-day {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--color-text);
            text-transform: none;
            letter-spacing: 0;
            line-height: 1.1;
            font-variant-numeric: tabular-nums;
        }
        .hc-event-time {
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--color-text-secondary);
            font-variant-numeric: tabular-nums;
            margin-top: 2px;
        }
        .hc-event-body { min-width: 0; }
        .hc-event-title {
            font-size: var(--text-base);
            color: var(--color-text);
            font-weight: 500;
            line-height: 1.3;
        }
        .hc-event-meta {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            margin-top: 3px;
        }
        .hc-activity-item {
            display: flex;
            gap: var(--space-3);
            align-items: flex-start;
            padding: 8px 0;
            border-bottom: 1px solid var(--color-bg-subtle);
            animation: hc-activity-in 0.3s ease-out;
        }
        .hc-activity-item:last-child { border-bottom: none; }
        @keyframes hc-activity-in {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .hc-activity-item { animation: none; }
        }
        .hc-activity-avatar {
            width: 30px; height: 30px;
            border-radius: 50%;
            flex-shrink: 0;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-xs);
            font-weight: 600;
            letter-spacing: -0.01em;
        }
        .hc-activity-body { flex: 1; min-width: 0; }
        .hc-activity-text {
            font-size: var(--text-sm);
            color: var(--color-text);
            letter-spacing: -0.005em;
            line-height: 1.45;
        }
        .hc-activity-text strong { font-weight: 600; }
        .hc-activity-text .hc-activity-tag {
            color: var(--color-primary);
            font-weight: 500;
        }
        .hc-activity-time {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            margin-top: 3px;
        }

        /* ===== KPI trend (mockup-style: компактный inline-текст без капсулы) ===== */
        .hc-kpi-meta {
            margin-top: 2px;
            display: flex;
            align-items: center;
            gap: var(--space-2);
            min-height: 0;
        }
        .hc-kpi-trend {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            font-size: var(--text-xs);
            font-weight: 500;
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.005em;
            color: var(--color-text-secondary);
        }
        .hc-kpi-trend.is-up   { color: #15803D; }
        .hc-kpi-trend.is-down { color: #C53030; }
        .hc-kpi-trend.is-flat { color: var(--color-text-secondary); }
        .hc-kpi-trend:empty { display: none; }
        /* Sparkline скрыта — тренд теперь текстом «↗ +1 vs вчера» */
        .hc-kpi-spark { display: none; }

        /* ===== Card panel (used by mid-row + bottom-row) — mockup-стиль ===== */
        .hc-card--panel {
            padding: var(--space-5);
            border-radius: var(--radius-xl);
        }
        .hc-card--panel .hc-card-head {
            margin-bottom: 14px;
            align-items: flex-start;
        }
        .hc-card--panel .hc-card-title {
            font-size: var(--text-sm);
            font-weight: 700;
            color: var(--color-text);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            display: block;
        }
        .hc-card--panel .hc-card-sub {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            display: block;
            margin-top: 2px;
        }

        /* ===== 50/50 row (план+события / риски+объявления) ===== */
        .hc-row-50-50 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-2);
            margin-top: 0;
        }
        @media (max-width: 768px) {
            .hc-row-50-50 { grid-template-columns: 1fr; }
        }
        /* ===== 60/40 row (legacy back-compat) ===== */
        .hc-row-60-40 {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: var(--space-2);
            margin-top: 0;
        }
        @media (max-width: 1024px) {
            .hc-row-60-40 { grid-template-columns: 1fr; }
        }

        /* ===== 3-col bottom ===== */
        .hc-row-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-2);
            margin-top: 0;
        }
        @media (max-width: 1024px) {
            .hc-row-3 { grid-template-columns: 1fr; }
        }

        /* ===== Roadmap progress list ===== */
        .hc-roadmap-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        /* Гармоничный стек: [имя · · · %] на одной строке, полоса во всю ширину
           под ними, состояние ниже. Тонкий разделитель между проектами. */
        .hc-roadmap-row {
            display: block;
            padding: 9px 8px;
            cursor: pointer;
            border-radius: var(--radius-md);
            border-bottom: 1px solid var(--color-border, #EAECF2);
        }
        .hc-roadmap-list .hc-roadmap-row:last-child { border-bottom: none; }
        .hc-roadmap-row:hover { background: var(--color-bg-subtle); }
        .hc-roadmap-top {
            display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
        }
        .hc-roadmap-name {
            flex: 1 1 auto; min-width: 0;
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--color-text);
            letter-spacing: -0.005em;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .hc-roadmap-top .hc-roadmap-pct { flex: 0 0 auto; }
        .hc-roadmap-bar {
            position: relative;
            height: 6px;
            margin: 7px 0 5px;
            background: var(--color-bg-subtle);
            border-radius: var(--radius-pill);
            overflow: hidden;
        }
        .hc-roadmap-bar-fill {
            position: absolute;
            left: 0; top: 0; bottom: 0;
            background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
            border-radius: var(--radius-pill);
            transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
            width: 0;
        }
        .hc-roadmap-bar-fill.is-done {
            background: linear-gradient(90deg, #34C759 0%, #1F9D4D 100%);
        }
        .hc-roadmap-bar-fill.has-overdue {
            background: linear-gradient(90deg, var(--color-warning) 0%, var(--color-danger) 100%);
        }
        /* Stats-колонка (правая, 88px) — большая % + опц. «просрочено N» под ней */
        .hc-roadmap-stats {
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            white-space: nowrap;
        }
        .hc-roadmap-stats .hc-roadmap-pct {
            font-weight: 600;
            color: var(--color-text);
            margin-right: 4px;
            font-size: var(--text-sm);
        }
        .hc-roadmap-stats .hc-roadmap-pct.is-done { color: var(--color-success); }
        /* Standalone (на случай, если pct встретится без обёртки) */
        .hc-roadmap-pct {
            font-weight: 600;
            font-size: var(--text-sm);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .hc-roadmap-pct.is-done { color: var(--color-success); }
        .hc-roadmap-stats .hc-roadmap-overdue {
            display: inline-block;
            margin-left: 6px;
            color: var(--color-danger-text);
            font-weight: 600;
        }
        /* Подпись под баром: «✓ Готово · 11 задач закрыто» / «в работе · 53 из 62». */
        .hc-roadmap-state {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            margin-top: 4px;
            line-height: 1.35;
        }
        .hc-roadmap-state.is-done  { color: var(--color-success); }
        .hc-roadmap-state.is-empty { color: var(--color-text-secondary); font-style: italic; }
        .hc-roadmap-state b { color: var(--color-text); font-weight: 600; }
        .hc-roadmap-state .hc-roadmap-overdue {
            color: var(--color-danger-text);
            font-weight: 600;
        }

        /* ===== Today timeline list ===== */
        .hc-today-list { display: flex; flex-direction: column; gap: var(--space-2); }
        .hc-today-row {
            display: flex;
            gap: var(--space-3);
            align-items: center;
            padding: var(--space-3);
            background: var(--color-bg-subtle);
            border-radius: var(--radius-lg);
            border: none;
            cursor: pointer;
            transition: background 0.15s ease;
        }
        .hc-today-row:hover { background: var(--color-bg-chip); }
        .hc-today-row:hover .hc-today-name { color: var(--color-primary); }
        .hc-today-time {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--color-text-secondary);
            font-variant-numeric: tabular-nums;
            min-width: 0;
            line-height: 1.2;
            margin-left: auto;
            flex-shrink: 0;
        }
        .hc-today-row.is-overdue .hc-today-time { color: var(--color-danger); }
        .hc-today-body { flex: 1; min-width: 0; }
        .hc-today-name {
            font-size: var(--text-base);
            color: var(--color-text);
            font-weight: 500;
            line-height: 1.35;
            transition: color 0.15s;
            overflow: hidden;
        }
        .hc-today-meta {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            margin-top: 2px;
            white-space: normal;
            overflow: hidden;
        }
        .hc-today-tag {
            display: inline-block;
            margin-left: 6px;
            font-size: var(--text-xs);
            font-weight: 600;
            padding: 1px 8px;
            border-radius: var(--radius-pill);
            background: var(--color-danger-50);
            color: var(--color-danger-text);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        /* «Горящие» — близкий дедлайн (≤ HC_TODAY_SOON_DAYS дней): мягкий
           warning-тон, чтобы отличался от красной просрочки. */
        .hc-today-tag.is-soon {
            background: var(--color-warning-50, rgba(216, 160, 43, 0.14));
            color: var(--color-warning-text, #8B6209);
        }
        .hc-today-row.is-soon .hc-today-time {
            color: var(--color-warning-text, #8B6209);
            font-weight: 600;
        }

        /* ===== Risks list ===== */
        .hc-risks-list { display: flex; flex-direction: column; gap: var(--space-2); }
        .hc-risk-row {
            display: flex;
            gap: var(--space-3);
            align-items: flex-start;
            padding: var(--space-3);
            background: var(--color-bg-subtle);
            border-radius: var(--radius-lg);
            border: none;
            transition: background 0.15s ease;
        }
        .hc-risk-row:hover { background: var(--color-bg-chip); }
        /* Простые круглые точки по приоритету (как в мокапе). */
        .hc-risk-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            margin-top: 7px;
            flex-shrink: 0;
        }
        .hc-risk-dot::after { content: ''; }
        .hc-risk-dot.is-critical { background: var(--color-danger); }
        .hc-risk-dot.is-high     { background: var(--color-primary); }
        .hc-risk-dot.is-med      { background: var(--color-accent-tint, #6366F1); }
        .hc-risk-name {
            font-size: var(--text-sm);
            color: var(--color-text);
            font-weight: 500;
            line-height: 1.35;
            overflow: hidden;
        }
        .hc-risk-meta {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            margin-top: 2px;
        }

        /* ===== Announcements compact list ===== */
        .hc-ann-list { display: flex; flex-direction: column; }
        .hc-ann-row {
            display: flex;
            gap: var(--space-2);
            align-items: flex-start;
            padding: 8px 0;
            border-bottom: 1px solid var(--color-bg-subtle);
        }
        .hc-ann-row:last-child { border-bottom: none; }
        /* Mockup-style tag-chip: текст вместо эмодзи-иконки. Цвет по типу. */
        .hc-ann-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 18px;
            padding: 0 8px;
            border-radius: var(--radius-xs);
            background: var(--color-primary-25, var(--color-primary-10));
            color: var(--color-primary);
            font-size: var(--text-xs);
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            line-height: 1;
            flex-shrink: 0;
            margin-top: 2px;
            /* Скрываем эмодзи-контент — показываем CSS-метку через ::after */
            color: transparent;
            position: relative;
        }
        .hc-ann-icon::after {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-primary);
            content: 'НОВОСТЬ';
        }
        .hc-ann-icon.is-alert {
            background: rgba(255, 59, 48, 0.10);
        }
        .hc-ann-icon.is-alert::after { content: 'ВНИМ.'; color: var(--color-danger); }
        .hc-ann-icon.is-reminder {
            background: rgba(255, 149, 0, 0.10);
        }
        .hc-ann-icon.is-reminder::after { content: 'НАПОМ.'; color: var(--color-warning); }
        .hc-ann-body { flex: 1; min-width: 0; }
        .hc-ann-title {
            font-size: var(--text-sm);
            color: var(--color-text);
            font-weight: 500;
            line-height: 1.35;
        }
        .hc-ann-snippet {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            margin-top: 2px;
            line-height: 1.45;
            overflow: hidden;
        }
        .hc-ann-time {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
            margin-top: 3px;
            font-variant-numeric: tabular-nums;
        }
        .announce-feed--compact > .announce-card { padding: 8px 12px; }
        .announce-feed--compact > .announce-card:nth-child(n+4) { display: none; }

        /* ===== SAFETY NET против horizontal overflow =====
           Grid/flex children имеют min-width: auto по умолчанию и могут
           выпирать за родителя из-за длинного контента. Явно выставляем 0. */
        .home-layout.home-layout--hc {
            width: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
        }
        .hc-row-60-40,
.hc-row-3 { width: 100%; min-width: 0; }
        .hc-row-60-40 > .hc-card,
.hc-row-3 > .hc-card { min-width: 0; }
        .hc-card {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }
        .hc-kpi-tile { min-width: 0; max-width: 100%; box-sizing: border-box; }
        .fav-cards-section.fav-cards-section--strip {
            box-sizing: border-box;
            max-width: 100%;
            overflow: hidden;
        }

        /* ===== RESPONSIVE (C-layout) ===== */

        /* Tablet: колонки в стек */
        @media (max-width: 1024px) {
            .home-layout.home-layout--hc { max-width: 860px; }
        }

        /* Tablet narrow / large phone */
        @media (max-width: 720px) {
            .home-layout.home-layout--hc {
                padding: 12px 12px 24px;
                gap: var(--space-3);
            }
            .hc-greet-title { font-size: var(--text-lg); letter-spacing: -0.1px; }
            .hc-greet-sub { font-size: var(--text-sm); line-height: 1.4; }

            /* KPI: 4 → 2x2 сетка,
тайлы поменьше */
            .hc-kpi-row { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
            .hc-kpi-tile { padding: 8px 12px; }
            .hc-kpi-label { font-size: var(--text-xs); }
            .hc-kpi-value { font-size: var(--text-xl); }
            .hc-kpi-sub { font-size: var(--text-xs); }

            /* Favorites: уже strip — просто ужимаем карточки */
            .fav-cards-section--strip { padding: var(--space-2); }
            .fav-cards-grid--strip .fav-card { flex: 0 0 180px; padding: 8px 12px; gap: var(--space-1); }
            .fav-cards-grid--strip .fav-card-head .fav-card-title { font-size: var(--text-xs); }
            .fav-cards-grid--strip .fav-card-stat { font-size: var(--text-xs); padding: 1px 4px; }

            /* Cards — тоньше рамки по бокам */
            .hc-card { padding: var(--space-3); border-radius: var(--radius-xl); }
            .hc-card-head { margin-bottom: 10px; }
            .hc-card-title { font-size: var(--text-sm); }
            .hc-card-more { font-size: var(--text-xs); padding: 8px 4px; }

            /* My Day tabs — tap targets крупнее {
                margin: -2px 0 8px;
                padding: var(--space-0);
                max-width: 100%;
                -webkit-overflow-scrolling: touch;
            }
            .hc-tab {
                padding: 8px 12px;
                font-size: var(--text-xs);
                min-height: 40px;
            }

            /* Task item — крупнее tap target,
читаемые meta */
            .hc-task-item { padding: 12px 8px; gap: var(--space-2); }
            .hc-task-check { width: 18px; height: 18px; }
            .hc-task-name { font-size: var(--text-sm); }
            .hc-task-meta {
                font-size: var(--text-xs); flex-wrap: wrap; gap: var(--space-1);
            }
            .hc-task-chip { font-size: var(--text-xs); padding: 2px 8px; }

            /* Deadlines — компактнее */
            .hc-dl-item { padding: var(--space-2); gap: var(--space-2); }
            .hc-dl-date { min-width: 42px; font-size: var(--text-xs); }
            .hc-dl-title { font-size: var(--text-xs); }
            .hc-dl-meta { font-size: var(--text-xs); }

            /* Mentions */
            .hc-mention-item { padding: var(--space-2); gap: var(--space-2); }
            .hc-mention-avatar { width: 28px; height: 28px; font-size: var(--text-xs); }
            .hc-mention-line { font-size: var(--text-xs); line-height: 1.35; }
            .hc-mention-time { font-size: var(--text-xs); }

            /* Composer — в две строки (top + chips) { flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-1); }

            /* Feed — компактные карточки */
            .announce-feed--compact .announce-card,
.announce-feed .announce-card { padding: 8px 12px; }

            /* Plan chat — sidebar в одной колонке */
            .plan-chat-block { padding: var(--space-3); }
            .plan-chat-body { grid-template-columns: 1fr; gap: var(--space-2); }
            .pc-sidebar { max-height: 260px; }
            .pc-pane { min-height: 300px; }
        }

        /* Phone */
        @media (max-width: 480px) {
            .home-layout.home-layout--hc { padding: 12px 8px 24px; gap: var(--space-2); }
            .hc-greet-title { font-size: var(--text-lg); }

            /* KPI — тайлы ещё ниже */
            .hc-kpi-row { gap: var(--space-2); }
            .hc-kpi-tile { padding: 8px 12px; }
            .hc-kpi-value { font-size: 19px; }

            /* Favorites strip — карточки 160px */
            .fav-cards-grid--strip .fav-card { flex: 0 0 160px; min-height: 0; }

            /* Cards тоньше */
            .hc-card { padding: var(--space-3); }

            /* Greeting может переноситься */
            .hc-greet { flex-direction: column; align-items: stretch; gap: var(--space-1); }

            /* Меньше My Day задач видно разом — ок,
скроллится */
            .hc-task-name { white-space: normal; line-height: 1.3; }
        }

        /* Very small phone (<360px) */
        @media (max-width: 360px) {
            .hc-kpi-row { grid-template-columns: 1fr 1fr; }
            .hc-kpi-value { font-size: var(--text-lg); }
            .hc-kpi-label { font-size: var(--text-xs); }
            .hc-tab { padding: var(--space-2); font-size: var(--text-xs); }
            .hc-task-name { font-size: var(--text-sm); }
            .fav-cards-grid--strip .fav-card { flex: 0 0 150px; }
        }