/* ========== Public filing footer ========== */
.site-footer {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 14px 20px 18px;
    color: var(--text-muted, var(--txt-muted));
    font-size: 0.72rem;
    line-height: 1.45;
    text-align: center;
}
.site-footer__brand { color: inherit; }
.site-filing {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: var(--text-secondary, var(--txt-secondary));
    font-size: 0.76rem;
    line-height: 1.5;
    text-align: center;
}
.site-filing__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.site-filing__link:hover,
.site-filing__link:focus-visible {
    color: var(--brand-primary, #c41e1e);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-filing__police-icon {
    display: block;
    width: 18px;
    height: 20px;
    flex: 0 0 18px;
    object-fit: contain;
}
.site-filing__divider { color: var(--border-strong, #c9cdd4); }
@media (max-width: 575.98px) {
    .site-footer { padding-inline: 14px; }
    .site-filing__divider { display: none; }
}

/* ==========================================
   IBD CRM - Executive Premium 2026 v6.0
   主题系统：照搬 Plane 三层架构
   第1层：基础色阶 → 第2层：语义变量 → 第3层：组件引用
   支持浅色/深色/自定义三种模式
   ========================================== */

/* ========== 第1层：基础色阶（浅色模式）- 全部使用硬编码色值 ========== */
:root {
    /* Neutral 灰阶（从亮到暗）- 硬编码值，无循环 */
    --neutral-white: #ffffff;
    --neutral-100: #f8f9fc;
    --neutral-200: #f1f3f8;
    --neutral-300: #e2e5eb;
    --neutral-400: #c9cdd4;
    --neutral-500: #8a91a0;
    --neutral-600: #6b7280;
    --neutral-700: #4b5563;
    --neutral-800: #374151;
    --neutral-900: #1e293b;
    --neutral-1000: #111827;
    --neutral-1100: #0f172a;
    --neutral-1200: #0a0d14;
    --neutral-black: #050508;

    /* Brand 红色阶 - 硬编码值 */
    --brand-100: #fef2f2;
    --brand-200: #fee2e2;
    --brand-300: #fecaca;
    --brand-400: #fca5a5;
    --brand-500: #ef4444;
    --brand-600: #dc2626;
    --brand-700: #c41e1e;
    --brand-800: #b91c1c;
    --brand-900: #991b1b;
    --brand-1000: #7f1d1d;
    --brand-1100: #6b1818;
    --brand-1200: #571414;
    --brand-default: #c41e1e;

    /* 语义色 - 硬编码值 */
    --green-500: #22c55e;
    --green-700: #15803d;
    --amber-500: #f59e0b;
    --amber-700: #b45309;
    --red-500: #ef4444;
    --red-700: #b91c1c;
    --blue-500: #3b82f6;
    --blue-700: #1d4ed8;
    --accent-gold: #d4a017;

    /* ========== 第2层：语义变量（浅色模式）- 引用第1层 ========== */
    --bg-canvas: var(--neutral-200);
    --bg-surface-1: var(--neutral-white);
    --bg-surface-2: var(--neutral-100);
    --bg-input: var(--neutral-100);
    --bg-hover: var(--neutral-200);

    --txt-primary: var(--neutral-1100);
    --txt-secondary: var(--neutral-700);
    --txt-tertiary: var(--neutral-600);
    --txt-muted: var(--neutral-500);
    --txt-on-color: var(--neutral-white);
    --txt-accent: var(--brand-default);

    --border-subtle: var(--neutral-300);
    --border-strong: var(--neutral-400);
    --border-light: var(--neutral-200);

    --brand-primary: var(--brand-default);
    --brand-hover: var(--brand-900);
    --brand-soft: var(--brand-100);

    --success: var(--green-700);
    --success-soft: #ecfdf5;
    --warning: var(--amber-700);
    --warning-soft: #fffbeb;
    --danger: var(--red-700);
    --danger-soft: var(--brand-soft);
    --info: var(--blue-700);
    --info-soft: #eff6ff;

    /* Shadows - 使用 rgba 确保跨浏览器兼容 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 28px -4px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 16px 48px -8px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* Layout */
    --sidebar-w: 264px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* 兼容旧变量名 → 指向新语义变量 */
    --sidebar-bg: var(--bg-surface-1);
    --sidebar-hover: var(--bg-hover);
    --sidebar-active: var(--brand-soft);
    --sidebar-text: var(--txt-secondary);
    --sidebar-text-active: var(--brand-primary);
    --sidebar-border: var(--border-subtle);
    --main-bg: var(--bg-canvas);
    --surface: var(--bg-surface-1);
    --surface-hover: var(--bg-hover);
    --surface-raised: var(--bg-surface-1);
    --border: var(--border-subtle);
    --text-primary: var(--txt-primary);
    --text-secondary: var(--txt-secondary);
    --text-muted: var(--txt-muted);
    --primary: var(--brand-primary);
    --primary-soft: var(--brand-soft);
    --primary-hover: var(--brand-hover);
    --primary-subtle: var(--brand-200);
    --primary-dark: var(--brand-1000);
    --primary-rgb: 196, 30, 30;
    --accent-gold: #d4a017;
    --accent-gold-soft: var(--warning-soft);
    --shadow-glow: 0 0 24px rgba(196, 30, 30, 0.15);
    --shadow-inner-soft: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --radius-2xl: 24px;
}

/* ========== 第1层覆盖：深色模式（基础色阶反转） ========== */
[data-theme="dark"] {
    --neutral-white: #2d2d4a;
    --neutral-100: #1e1e36;
    --neutral-200: #181830;
    --neutral-300: #252544;
    --neutral-400: #2d2d4a;
    --neutral-500: #6b7280;
    --neutral-600: #7a8090;
    --neutral-700: #a0a8b8;
    --neutral-800: #c0c0d0;
    --neutral-900: #d0d0dc;
    --neutral-1000: #e0e0e8;
    --neutral-1100: #181830;
    --neutral-1200: #181830;
    --neutral-black: #0a0a18;

    --brand-100: #2a1a1a;
    --brand-200: #3a2020;
    --brand-300: #4a2828;
    --brand-400: #6a3838;
    --brand-500: #8a4848;
    --brand-default: #ff4444;
    --brand-600: #ff5555;
    --brand-700: #ff6666;
    --brand-800: #ff7777;
    --brand-900: #ff8888;
    --brand-1000: #ff9999;
    --brand-1100: #ffaaaa;
    --brand-1200: #ffbbbb;

    --green-700: #34d399;
    --amber-700: #fbbf24;
    --red-500: #ef4444;
    --red-700: #ff4444;
    --blue-700: #60a5fa;

    /* 语义变量在深色模式下的调整 */
    --bg-canvas: var(--neutral-black);
    --bg-surface-1: var(--neutral-100);
    --bg-surface-2: var(--neutral-200);
    --bg-input: var(--neutral-300);
    --bg-hover: var(--neutral-300);

    --txt-primary: var(--neutral-900);
    --txt-secondary: var(--neutral-700);
    --txt-tertiary: var(--neutral-600);
    --txt-muted: var(--neutral-500);

    --border-subtle: var(--neutral-300);
    --border-strong: var(--neutral-400);

    --brand-primary: var(--brand-default);
    --brand-hover: var(--brand-800);
    --brand-soft: var(--brand-100);

    --success: var(--green-700);
    --danger: var(--red-700);

    --txt-on-color: var(--neutral-1200);
    --success-soft: #052e1a;
    --warning-soft: #2a2000;
    --danger-soft: #2a1010;
    --info-soft: #0a1a2a;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 8px 28px -4px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 16px 48px -8px rgba(0, 0, 0, 0.40);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-glow: 0 0 24px rgba(255, 68, 68, 0.15);

    /* 暗色模式下的辅助语义色 */
    --teal: #2dd4bf;
    --gold: #fbbf24;
    --blue: #60a5fa;
    --surface-line: rgba(255, 255, 255, 0.08);
}

/* ========== 自定义模式：品牌色和背景色由 JS 注入 ========== */
[data-theme="custom"] {
    /* --brand-default 和 --bg-canvas 由 <html style="--brand-default:#xxx;--bg-canvas:#xxx"> 注入 */
    /* 明暗基底决定文字/边框用浅色还是深色体系 */
}
[data-theme="custom"][data-palette="dark"] {
    --neutral-white: #2d2d4a;
    --neutral-100: #1e1e36;
    --neutral-200: #181830;
    --neutral-300: #252544;
    --neutral-400: #2d2d4a;
    --neutral-500: #6b7280;
    --neutral-600: #7a8090;
    --neutral-700: #a0a8b8;
    --neutral-1100: #181830;
    --neutral-1200: #181830;
    --neutral-black: #0a0a18;
    
    --txt-primary: var(--neutral-900);
    --txt-secondary: var(--neutral-700);
    --txt-muted: var(--neutral-500);
    --border-subtle: var(--neutral-300);
    --border-strong: var(--neutral-400);
    
    --txt-on-color: var(--neutral-1200);

    --teal: #2dd4bf;
    --gold: #fbbf24;
    --blue: #60a5fa;
    --surface-line: rgba(255, 255, 255, 0.08);
}

/* ========== PostHog 风格：暖奶油画布 + 黄橙主色 ========== */
/* data-theme 保持 light，通过 data-style="posthog" 覆盖语义变量 */
[data-style="posthog"] {
    /* 基础色阶 — PostHog 色板 */
    --neutral-white: #ffffff;          /* surface-card */
    --neutral-100: #fcfcfa;            /* surface-doc */
    --neutral-200: #eeefe9;            /* canvas — 暖奶油 */
    --neutral-300: #e5e7e0;            /* surface-soft */
    --neutral-400: #dcdfd2;            /* hairline-soft */
    --neutral-500: #6c6e63;            /* mute */
    --neutral-600: #9b9c92;            /* ash */
    --neutral-700: #4d4f46;            /* body — 橄榄灰墨 */
    --neutral-800: #33342d;            /* charcoal */
    --neutral-900: #23251d;            /* ink — 深橄榄炭 */
    --neutral-1000: #23251d;
    --neutral-1100: #23251d;
    --neutral-1200: #23251d;
    --neutral-black: #23251d;          /* surface-dark */

    /* Brand 色阶 — PostHog 黄橙 */
    --brand-100: #fef3e0;
    --brand-200: #fde8c4;
    --brand-300: #fbd89e;
    --brand-400: #f9c566;
    --brand-500: #f7a501;              /* primary */
    --brand-600: #dd9001;              /* primary-pressed */
    --brand-700: #f7a501;
    --brand-800: #dd9001;
    --brand-900: #b17816;              /* primary-active */
    --brand-1000: #b17816;
    --brand-1100: #8a5e10;
    --brand-1200: #6d4a0c;
    --brand-default: #f7a501;

    /* 语义色 */
    --green-500: #2c8c66;
    --green-700: #2c8c66;              /* accent-green */
    --amber-500: #f7a501;
    --amber-700: #b17816;
    --red-500: #cd4239;                /* accent-red */
    --red-700: #cd4239;
    --blue-500: #2c84e0;               /* accent-blue */
    --blue-700: #1d4ed8;               /* link-blue */
    --accent-gold: #f7a501;

    /* 第2层：语义变量 */
    --bg-canvas: var(--neutral-200);
    --bg-surface-1: var(--neutral-white);
    --bg-surface-2: var(--neutral-300);
    --bg-input: var(--neutral-white);
    --bg-hover: var(--neutral-300);

    --txt-primary: var(--neutral-900);
    --txt-secondary: var(--neutral-700);
    --txt-tertiary: var(--neutral-500);
    --txt-muted: var(--neutral-600);
    --txt-on-color: var(--neutral-900);     /* 深色文字在黄色按钮上 */
    --txt-accent: var(--brand-default);

    --border-subtle: #bfc1b7;               /* hairline */
    --border-strong: #dcdfd2;
    --border-light: #dcdfd2;                /* hairline-soft */

    --brand-primary: var(--brand-default);
    --brand-hover: var(--brand-600);
    --brand-soft: #fef3e0;

    --success: var(--green-700);
    --success-soft: #d9eddf;
    --warning: var(--amber-700);
    --warning-soft: #fef3e0;
    --danger: var(--red-700);
    --danger-soft: #f7d6d3;
    --info: var(--blue-700);
    --info-soft: #dceaf6;

    /* 阴影 — PostHog 无投影，使用极淡的边框感 */
    --shadow-xs: 0 1px 2px rgba(35, 37, 29, 0.03);
    --shadow-sm: 0 1px 2px rgba(35, 37, 29, 0.04);
    --shadow-md: 0 2px 8px -2px rgba(35, 37, 29, 0.06);
    --shadow-lg: 0 4px 16px -4px rgba(35, 37, 29, 0.08);
    --shadow-xl: 0 8px 32px -8px rgba(35, 37, 29, 0.10);
    --shadow-card: 0 1px 2px rgba(35, 37, 29, 0.04);
    --shadow-glow: 0 0 24px rgba(247, 165, 1, 0.12);
    --shadow-inner-soft: inset 0 1px 2px rgba(35, 37, 29, 0.04);

    /* 圆角 — PostHog 用 6px */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;

    /* 辅助语义色 */
    --teal: #1078a3;                        /* link-teal */
    --gold: #f7a501;
    --blue: #2c84e0;
    --surface-line: #bfc1b7;

    /* 兼容旧变量 */
    --primary-rgb: 247, 165, 1;
    --primary-subtle: #fef3e0;
    --primary-dark: #b17816;
    --accent-gold-soft: #fef3e0;
    --sidebar-active: #fef3e0;
}

/* PostHog 风格下的字体优化 */
[data-style="posthog"] body {
    font-family: 'IBM Plex Sans', 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    letter-spacing: -0.003em;
}

/* PostHog 风格下的卡片：白色底 + 细橄榄边框 + 无投影 */
[data-style="posthog"] .card,
[data-style="posthog"] .card-premium {
    background: var(--neutral-white);
    border: 1px solid #bfc1b7;
    box-shadow: none;
}

[data-style="posthog"] .sidebar {
    background: var(--neutral-200);
    border-right: 1px solid #bfc1b7;
}

[data-style="posthog"] .topbar {
    background: var(--neutral-200);
    border-bottom: 1px solid #bfc1b7;
}

/* PostHog 风格下的主按钮：黄橙底 + 深橄榄文字 */
[data-style="posthog"] .btn-primary {
    background: #f7a501;
    border-color: #f7a501;
    color: #23251d;
    font-weight: 700;
}
[data-style="posthog"] .btn-primary:hover,
[data-style="posthog"] .btn-primary:focus {
    background: #dd9001;
    border-color: #dd9001;
    color: #23251d;
}
[data-style="posthog"] .btn-outline-primary {
    color: #23251d;
    border-color: #bfc1b7;
    background: transparent;
}
[data-style="posthog"] .btn-outline-primary:hover,
[data-style="posthog"] .btn-outline-primary:focus {
    background: #e5e7e0;
    border-color: #bfc1b7;
    color: #23251d;
}

/* PostHog 风格下的 pill-tab 激活态翻转 */
[data-style="posthog"] .ops-pill.active {
    background: #23251d;
    color: #ffffff;
}

/* PostHog 风格下的表头 */
[data-style="posthog"] .table > :not(caption) > * > * {
    border-color: #dcdfd2;
}

/* ========== Reset & Base ========== */
*, *::before, *::after { box-sizing: border-box; }
body {
    background: var(--main-bg);
    font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.5;
}
a { color: var(--primary); transition: color 0.2s var(--ease-out); }
a:hover { color: var(--primary-hover); }
::selection { background: var(--primary-subtle); color: var(--primary); }

/* ========== App Layout ========== */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* ========== Sidebar - 白色高级风格 ========== */
.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s var(--ease-out);
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--sidebar-border);
    box-shadow: 2px 0 8px rgba(196,30,30, 0.08);
}

/* Sidebar brand - 红金高级 */
.sidebar-brand {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 6px;
}
.sidebar-user-top {
    display: flex; align-items: center; gap: 10px; width: 100%;
}
.sidebar-profile-link {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
    margin: -4px; padding: 4px; border-radius: var(--radius-sm);
    color: inherit; text-decoration: none;
    transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.sidebar-profile-link:hover {
    color: inherit; background: var(--sidebar-hover);
}
.sidebar-profile-link:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}
.sidebar-profile-hint {
    margin-left: 5px; color: var(--brand-primary); white-space: nowrap;
}
.sidebar-brand-icon {
    width: 42px; height: 42px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-primary), var(--danger));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: var(--txt-on-color); flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(196,30,30, 0.08), 0 0 20px rgba(196,30,30, 0.08);
    position: relative;
}
.sidebar-brand-icon::after {
    content: ''; position: absolute; inset: -2px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand-primary), var(--warning), var(--brand-primary));
    opacity: 0; z-index: -1; filter: blur(8px);
    transition: opacity 0.3s;
}
.sidebar-brand:hover .sidebar-brand-icon::after { opacity: 0.5; }
.sidebar-brand-text {
    color: var(--text-primary); font-weight: 700; font-size: 0.95rem;
    line-height: 1.3; letter-spacing: -0.02em;
}
.sidebar-brand-text small {
    display: block; color: var(--text-muted);
    font-weight: 400; font-size: 0.7rem;
    margin-top: 3px; letter-spacing: 0.04em; text-transform: uppercase;
}

/* Sidebar nav */
.sidebar-nav { flex: 1; padding: 8px 10px 16px; }
.sidebar-section {
    font-size: 0.65rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 20px 14px 8px;
}
.sidebar-group {
    margin: 0 0 10px;
}
.sidebar-group-trigger {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out),
                border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.sidebar-group-trigger:hover {
    color: var(--sidebar-text-active);
    background: var(--bg-surface-1);
    border-color: var(--border-strong);
}
.sidebar-group-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.sidebar-group-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    color: var(--text-muted);
    background: var(--bg-surface-1);
    transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.sidebar-group-trigger:hover .sidebar-group-icon,
.sidebar-group.has-active .sidebar-group-icon {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: var(--primary-soft);
}
.sidebar-group.has-active .sidebar-group-trigger {
    color: var(--text-primary);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
}
.sidebar-group-label {
    flex: 1;
    min-width: 0;
}
.sidebar-group.is-open .sidebar-group-icon {
    transform: scale(1.04);
}
.sidebar-group-chevron {
    color: var(--text-muted);
    font-size: 0.72rem;
    transition: transform 0.25s var(--ease-out), color 0.2s var(--ease-out);
}
.sidebar-group.is-open .sidebar-group-chevron {
    transform: rotate(180deg);
}
.sidebar-group-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.28s var(--ease-out), opacity 0.2s var(--ease-out);
}
.sidebar-group-content-inner {
    min-height: 0;
    overflow: hidden;
    margin-left: 21px;
    padding: 0 0 0 12px;
    border-left: 1px solid transparent;
    transition: padding 0.28s var(--ease-out), border-color 0.16s var(--ease-out);
}
.sidebar-group.is-open .sidebar-group-content {
    grid-template-rows: 1fr;
    opacity: 1;
}
.sidebar-group.is-open .sidebar-group-content-inner {
    padding-top: 6px;
    padding-bottom: 2px;
    border-left-color: var(--border-subtle);
}
.sidebar-group .sidebar-link {
    min-height: 38px;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 450;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out),
                color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.sidebar-group.is-open .sidebar-link {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--sidebar-item-index, 0) * 0.025s);
}
.sidebar-group.is-open .sidebar-link:hover {
    transform: translateX(2px);
}
.sidebar-group .sidebar-link > i {
    width: 18px;
    font-size: 0.96rem;
}
.sidebar-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.86rem; font-weight: 450;
    transition: all 0.25s var(--ease-out);
    margin-bottom: 2px; position: relative;
}
.sidebar-link i {
    font-size: 1.05rem; width: 20px; text-align: center;
    flex-shrink: 0; transition: color 0.25s var(--ease-out);
}
.sidebar-link:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
    transform: translateX(2px);
}
.sidebar-link.active {
    background: var(--sidebar-active);
    color: var(--primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--primary-soft);
}
.sidebar-link.active i { color: var(--primary); }
.sidebar-link.active::before {
    content: ''; position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px;
    background: var(--primary);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 12px rgba(196,30,30, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-group-content,
    .sidebar-group-chevron,
    .sidebar-group-icon,
    .sidebar-group-content-inner,
    .sidebar-group .sidebar-link {
        transition: none;
    }
}

/* Sidebar footer */
.sidebar-footer {
    padding: 16px 18px;
    border-top: 1px solid var(--sidebar-border);
    margin-top: auto;
}
.sidebar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}
.sidebar-user:hover { background: var(--sidebar-hover); }
.sidebar-avatar {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--brand-primary));
    display: flex; align-items: center; justify-content: center;
    color: var(--txt-on-color); font-weight: 600; font-size: 0.82rem; flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
    color: var(--text-primary); font-size: 0.82rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-role { color: var(--text-muted); font-size: 0.68rem; }
.sidebar-logout {
    color: var(--text-muted); font-size: 1rem;
    padding: 6px; border-radius: 8px;
    transition: all 0.2s var(--ease-out);
    cursor: pointer; text-decoration: none; opacity: 0.6;
}
.sidebar-logout:hover {
    color: var(--danger);
    background: rgba(220,38,38,0.06);
    opacity: 1; transform: scale(1.05);
}

/* ========== Main Content ========== */
.main-content {
    margin-left: var(--sidebar-w);
    flex: 1; min-width: 0; min-height: 100vh;
    display: flex; flex-direction: column;
}

/* ========== Topbar - 毛玻璃高级顶栏 ========== */
.topbar {
    height: 64px;
    background: rgba(255,255,250, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 32px;
    position: sticky; top: 0; z-index: 100;
    width: 100%;
    max-width: 100%;
    gap: 16px;
}
.topbar-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* 中间搜索框 */
.topbar-search-center {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-canvas, var(--bg-canvas));
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 10px;
    padding: 7px 14px;
    flex: 1; max-width: 560px; margin: 0 auto;
    cursor: pointer; transition: all 0.15s;
}
.topbar-search-center:hover { border-color: var(--primary, var(--brand-primary)); background: var(--bg-surface-1); }
.topbar-search-icon { color: var(--text-muted, var(--txt-muted)); font-size: 0.85rem; }
.topbar-search-input {
    flex: 1; border: none; outline: none;
    background: transparent; cursor: pointer;
    font-size: 0.82rem; color: var(--text-secondary, var(--txt-secondary));
}
.topbar-search-input::placeholder { color: var(--text-muted, var(--txt-muted)); }
.topbar-search-kbd {
    font-size: 0.62rem; color: var(--text-muted, var(--txt-muted));
    background: rgba(196,30,30, 0.08); padding: 2px 6px; border-radius: 4px;
}
.topbar-title {
    font-weight: 600; font-size: 1.02rem;
    color: var(--text-primary); letter-spacing: -0.01em;
    min-width: 0;
}
.topbar-actions {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
}
.mobile-menu-btn {
    display: none; background: none; border: none;
    font-size: 1.3rem; color: var(--text-secondary);
    padding: 6px 10px; cursor: pointer;
    border-radius: 8px; transition: background 0.2s;
}
.mobile-menu-btn:hover { background: var(--surface); }

/* ========== Page Content ========== */
.page-content {
    flex: 1; padding: 28px 32px;
    animation: pageEnter 0.5s var(--ease-out);
    min-width: 0;
    max-width: 100%;
}
.flash-message-region {
    flex: 0 0 auto;
}

/* ========== Cards - 高级白卡 ========== */
.card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    background: var(--surface);
    overflow: hidden;
    transition: all 0.3s var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-sm); }
.card-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border-light);
    padding: 16px 22px;
}
.card-header h6 {
    font-weight: 600; color: var(--text-primary);
    font-size: 0.88rem;
    display: flex; align-items: center; gap: 8px;
    letter-spacing: -0.01em;
}
.card-body { padding: 22px; }

/* Premium Card - 红色金线 */
.card-premium {
    border: 1px solid rgba(196,30,30, 0.08);
    background: linear-gradient(135deg, rgba(255,255,250, 0.08), rgba(255,250,250,0.95));
    backdrop-filter: blur(10px);
    position: relative;
}
.card-premium::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--brand-primary), var(--accent-gold));
    opacity: 0;
    transition: opacity 0.4s;
}
.card-premium:hover::before { opacity: 1; }
.card-premium:hover {
    border-color: rgba(196,30,30, 0.08);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(196,30,30, 0.08);
}

/* ========== Stat Cards - 数据统计卡 ========== */
.stat-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    transition: all 0.35s var(--ease-out);
    position: relative; overflow: hidden;
}
.stat-card::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    opacity: 0; transition: opacity 0.3s;
}
.stat-card::after {
    content: ''; position: absolute;
    top: -40px; right: -40px;
    width: 100px; height: 100px; border-radius: 50%;
    opacity: 0.03; transition: transform 0.5s var(--ease-out);
}
.stat-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover::after { transform: scale(1.3); }
.stat-card .stat-label {
    color: var(--text-secondary); font-size: 0.75rem;
    font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 8px;
}
.stat-card .stat-value {
    font-size: 1.85rem; font-weight: 700; line-height: 1.1;
    color: var(--text-primary); letter-spacing: -0.03em;
    transition: transform 0.3s var(--ease-spring);
}
.stat-card:hover .stat-value { transform: scale(1.03); }
.stat-card .stat-sub { font-size: 0.73rem; color: var(--text-muted); margin-top: 6px; }
.stat-card .stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    transition: transform 0.3s var(--ease-spring);
}
.stat-card:hover .stat-icon { transform: scale(1.1) rotate(-3deg); }

/* Stat card body layout */
.stat-card-body {
    display: flex; align-items: center; gap: 16px;
    padding: 20px;
}
.stat-card-info { flex: 1; min-width: 0; }
.stat-card-label {
    color: var(--text-muted); font-size: 0.72rem;
    font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 4px;
}
.stat-card-value {
    font-size: 1.6rem; font-weight: 700;
    color: var(--text-primary); letter-spacing: -0.02em;
}

/* Stat card color variants - 红金商务 */
.stat-card-indigo .stat-icon { background: linear-gradient(135deg, var(--brand-200), #FECACA); color: var(--brand-primary); }
.stat-card-indigo::before { background: linear-gradient(90deg, var(--brand-primary), var(--danger)); }
.stat-card-indigo::after { background: rgba(196,30,30, 0.08); }
.stat-card-indigo .stat-value { color: var(--brand-primary); }

.stat-card-emerald .stat-icon { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); color: var(--success); }
.stat-card-emerald::before { background: linear-gradient(90deg, var(--success), var(--success)); }
.stat-card-emerald::after { background: rgba(5, 150, 105, 0.05); }
.stat-card-emerald .stat-value { color: var(--success); }

.stat-card-amber .stat-icon { background: linear-gradient(135deg, var(--warning-soft), var(--warning-soft)); color: var(--warning); }
.stat-card-amber::before { background: linear-gradient(90deg, var(--warning), var(--warning)); }
.stat-card-amber::after { background: rgba(217, 119, 6, 0.05); }
.stat-card-amber .stat-value { color: var(--warning); }

.stat-card-violet .stat-icon { background: linear-gradient(135deg, var(--brand-soft), #FFE4E6); color: var(--brand-hover); }
.stat-card-violet::before { background: linear-gradient(90deg, var(--brand-hover), var(--brand-primary)); }
.stat-card-violet::after { background: rgba(153, 27, 27, 0.05); }
.stat-card-violet .stat-value { color: var(--brand-hover); }

.stat-card-cyan .stat-icon { background: linear-gradient(135deg, #E0F2FE, #BAE6FD); color: var(--info); }
.stat-card-cyan::before { background: linear-gradient(90deg, var(--info), var(--info)); }
.stat-card-cyan::after { background: rgba(3, 105, 161, 0.05); }
.stat-card-cyan .stat-value { color: var(--info); }

.stat-card-rose .stat-icon { background: linear-gradient(135deg, #FFF1F2, #FFE4E8); color: var(--danger); }
.stat-card-rose::before { background: linear-gradient(90deg, var(--danger), var(--danger)); }
.stat-card-rose::after { background: rgba(190, 18, 60, 0.05); }
.stat-card-rose .stat-value { color: var(--danger); }

/* ========== Tables ========== */
.table { font-size: 0.86rem; color: var(--text-primary); margin-bottom: 0; }
.table th {
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
    background: var(--bg-surface-2) !important;
    border-bottom: 1px solid var(--border);
    padding: 11px 18px; white-space: nowrap;
}
.table td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.table-hover tbody tr { transition: all 0.2s var(--ease-out); }
.table-hover tbody tr:hover {
    background: rgba(196,30,30, 0.08);
    box-shadow: inset 3px 0 0 var(--brand-primary), 0 0 0 -3px rgba(196,30,30, 0.08);
}

/* ========== Badges ========== */
.badge {
    font-weight: 500; font-size: 0.7rem;
    padding: 0.3em 0.65em; border-radius: 6px;
    letter-spacing: 0.01em;
    transition: transform 0.2s var(--ease-spring);
}
.badge:hover { transform: scale(1.05); }

/* Theme-aware status badges. Use soft backgrounds with explicit foreground
   colors so labels remain readable in light, dark, and custom themes. */
.status-badge {
    border: 1px solid transparent;
    color: var(--txt-secondary);
    background: var(--bg-surface-2);
    font-weight: 700;
}

.status-stage-pending,
.status-priority-medium,
.status-task-priority-high {
    color: #92400e;
    background: #fff7ed;
    border-color: #fed7aa;
}
.status-stage-tracking,
.status-priority-high,
.status-task-blocked,
.status-task-priority-urgent {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}
.status-stage-converted {
    color: #854d0e;
    background: #fefce8;
    border-color: #fde68a;
}
.status-stage-closed,
.status-task-done {
    color: #166534;
    background: #ecfdf5;
    border-color: #bbf7d0;
}
.status-stage-lost,
.status-priority-low,
.status-task-todo,
.status-task-priority-low {
    color: #374151;
    background: #f3f4f6;
    border-color: #d1d5db;
}
.status-task-doing,
.status-task-priority-medium {
    color: #7f1d1d;
    background: #fff1f2;
    border-color: #fecdd3;
}
.status-task-review {
    color: #075985;
    background: #eff6ff;
    border-color: #bfdbfe;
}

[data-theme="dark"] .status-badge,
[data-theme="custom"][data-palette="dark"] .status-badge {
    color: var(--txt-secondary);
    background: var(--bg-surface-2);
    border-color: var(--border-subtle);
}
[data-theme="dark"] .status-stage-pending,
[data-theme="dark"] .status-priority-medium,
[data-theme="dark"] .status-task-priority-high,
[data-theme="custom"][data-palette="dark"] .status-stage-pending,
[data-theme="custom"][data-palette="dark"] .status-priority-medium,
[data-theme="custom"][data-palette="dark"] .status-task-priority-high {
    color: #fbbf24;
    background: #2a2000;
    border-color: #854d0e;
}
[data-theme="dark"] .status-stage-tracking,
[data-theme="dark"] .status-priority-high,
[data-theme="dark"] .status-task-blocked,
[data-theme="dark"] .status-task-priority-urgent,
[data-theme="custom"][data-palette="dark"] .status-stage-tracking,
[data-theme="custom"][data-palette="dark"] .status-priority-high,
[data-theme="custom"][data-palette="dark"] .status-task-blocked,
[data-theme="custom"][data-palette="dark"] .status-task-priority-urgent {
    color: #fca5a5;
    background: #2a1010;
    border-color: #7f1d1d;
}
[data-theme="dark"] .status-stage-converted,
[data-theme="custom"][data-palette="dark"] .status-stage-converted {
    color: #fde68a;
    background: #292200;
    border-color: #854d0e;
}
[data-theme="dark"] .status-stage-closed,
[data-theme="dark"] .status-task-done,
[data-theme="custom"][data-palette="dark"] .status-stage-closed,
[data-theme="custom"][data-palette="dark"] .status-task-done {
    color: #86efac;
    background: #052e1a;
    border-color: #166534;
}
[data-theme="dark"] .status-stage-lost,
[data-theme="dark"] .status-priority-low,
[data-theme="dark"] .status-task-todo,
[data-theme="dark"] .status-task-priority-low,
[data-theme="custom"][data-palette="dark"] .status-stage-lost,
[data-theme="custom"][data-palette="dark"] .status-priority-low,
[data-theme="custom"][data-palette="dark"] .status-task-todo,
[data-theme="custom"][data-palette="dark"] .status-task-priority-low {
    color: #d1d5db;
    background: #1f2937;
    border-color: #4b5563;
}
[data-theme="dark"] .status-task-doing,
[data-theme="dark"] .status-task-priority-medium,
[data-theme="custom"][data-palette="dark"] .status-task-doing,
[data-theme="custom"][data-palette="dark"] .status-task-priority-medium {
    color: #fda4af;
    background: #2a1018;
    border-color: #881337;
}
[data-theme="dark"] .status-task-review,
[data-theme="custom"][data-palette="dark"] .status-task-review {
    color: #93c5fd;
    background: #0a1a2a;
    border-color: #1d4ed8;
}

/* Gradient badges */
.badge-gradient-primary {
    background: linear-gradient(135deg, var(--primary), var(--brand-primary));
    color: var(--txt-on-color); border: none;
}
.badge-gradient-success {
    background: linear-gradient(135deg, var(--success), var(--success));
    color: var(--txt-on-color); border: none;
}
.badge-gradient-warning {
    background: linear-gradient(135deg, var(--warning), var(--warning));
    color: var(--txt-on-color); border: none;
}
.badge-gradient-danger {
    background: linear-gradient(135deg, var(--danger), var(--danger));
    color: var(--txt-on-color); border: none;
}

/* Pill badges */
.badge-pill-soft {
    padding: 4px 12px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px;
}

/* ========== Buttons - 红色商务 ========== */
.btn {
    font-weight: 500; font-size: 0.86rem;
    border-radius: var(--radius-sm);
    transition: all 0.25s var(--ease-out);
    padding: 8px 18px;
    position: relative; overflow: hidden;
}
.btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,250, 0.08) 50%, transparent 70%);
    transform: translateX(-100%); transition: transform 0.5s;
}
.btn:hover::after { transform: translateX(100%); }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--brand-primary));
    border-color: transparent; color: var(--txt-on-color);
    box-shadow: 0 2px 8px rgba(196,30,30, 0.08);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary));
    border-color: transparent; color: var(--txt-on-color);
    box-shadow: 0 6px 20px rgba(196,30,30, 0.08);
    transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

.btn-success {
    background: linear-gradient(135deg, var(--success), var(--success));
    border-color: transparent; color: var(--txt-on-color);
    box-shadow: 0 2px 8px rgba(5,150,105,0.20);
}
.btn-success:hover {
    background: linear-gradient(135deg, var(--success), #065F46);
    border-color: transparent; color: var(--txt-on-color);
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), var(--brand-hover));
    border-color: transparent; color: var(--txt-on-color);
    box-shadow: 0 2px 8px rgba(220,38,38,0.20);
}
.btn-danger:hover {
    background: linear-gradient(135deg, var(--brand-hover), var(--brand-hover));
    border-color: transparent; color: var(--txt-on-color);
    transform: translateY(-2px);
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning), var(--warning));
    border-color: transparent; color: var(--txt-on-color);
    box-shadow: 0 2px 8px rgba(217,119,6,0.20);
}
.btn-warning:hover {
    background: linear-gradient(135deg, var(--warning), var(--warning));
    border-color: transparent; color: var(--txt-on-color);
    transform: translateY(-2px);
}

.btn-outline-primary {
    color: var(--primary); border-color: var(--primary-subtle);
    background: var(--primary-soft);
}
.btn-outline-primary:hover {
    background: var(--primary); border-color: var(--primary);
    color: var(--txt-on-color); box-shadow: 0 4px 12px rgba(196,30,30, 0.08);
    transform: translateY(-1px);
}
.btn-outline-secondary {
    color: var(--text-secondary); border-color: var(--border);
    background: var(--surface);
}
.btn-outline-secondary:hover {
    background: var(--main-bg); border-color: var(--border-strong);
    color: var(--text-primary); transform: translateY(-1px);
}
.btn-outline-success { color: var(--success); border-color: rgba(5,150,105,0.3); }
.btn-outline-success:hover {
    background: var(--success); border-color: var(--success);
    color: var(--txt-on-color); transform: translateY(-1px);
}
.btn-sm { font-size: 0.8rem; padding: 5px 14px; }
.btn-lg { padding: 12px 28px; font-size: 0.92rem; }

/* Premium button */
.btn-premium {
    background: linear-gradient(135deg, var(--primary), var(--brand-primary));
    border: none; color: var(--txt-on-color);
    box-shadow: 0 2px 8px rgba(196,30,30, 0.08);
    font-weight: 600;
}
.btn-premium:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary));
    color: var(--txt-on-color); box-shadow: 0 6px 20px rgba(196,30,30, 0.08);
    transform: translateY(-2px);
}

/* Icon buttons */
.btn-icon {
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.25s var(--ease-out);
}
.btn-icon:hover { transform: translateY(-1px); }

/* ========== Forms ========== */
.form-control, .form-select {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px; font-size: 0.88rem;
    transition: all 0.25s var(--ease-out);
    color: var(--text-primary);
    background: var(--surface);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(196,30,30, 0.08), 0 0 16px rgba(196,30,30, 0.08);
    outline: none;
}
.form-control:hover, .form-select:hover { border-color: var(--border-strong); }
.form-label {
    font-size: 0.8rem; font-weight: 500;
    color: var(--text-secondary); margin-bottom: 5px;
}
.input-group-text {
    background: var(--main-bg);
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}

/* Form floating labels enhancement */
.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: var(--radius-md);
}
.form-floating > label {
    color: var(--text-muted);
    transition: all 0.2s;
}

/* ========== Rank Badges ========== */
.rank-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    font-weight: 700; font-size: 0.78rem;
    transition: transform 0.2s var(--ease-spring);
}
.rank-badge:hover { transform: scale(1.15) rotate(-5deg); }
.rank-1 { background: linear-gradient(135deg, var(--warning-soft), var(--warning-soft)); color: var(--warning); box-shadow: 0 2px 8px rgba(251,191,36,0.3); }
.rank-2 { background: linear-gradient(135deg, #F3F4F6, var(--border-subtle)); color: var(--txt-secondary); box-shadow: 0 2px 8px rgba(156,163,175,0.2); }
.rank-3 { background: linear-gradient(135deg, #FED7AA, #FDBA74); color: #9A3412; box-shadow: 0 2px 8px rgba(251,146,60,0.2); }
.rank-other { background: var(--main-bg); color: var(--text-muted); }

.ranking-score-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.ranking-score-card {
    min-height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.ranking-score-card.has-risk {
    border-left: 3px solid var(--danger);
}

.ranking-score-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ranking-score-top span {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-score-top strong {
    min-width: 42px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--success-soft);
    color: var(--teal);
    font-size: 0.98rem;
    font-weight: 900;
}

.ranking-score-card.has-risk .ranking-score-top strong {
    background: var(--brand-soft);
    color: var(--danger);
}

.ranking-score-bars {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-canvas);
    overflow: hidden;
}

.ranking-score-bars span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--teal));
}

.ranking-score-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.ranking-score-metrics span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 800;
    text-align: center;
}

/* ========== Funnel ========== */
.funnel-progress {
    background-color: var(--main-bg);
    border-radius: 10px; overflow: hidden;
}
.funnel-progress .progress-bar {
    transition: width 1s var(--ease-out);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 600; font-size: 0.82rem;
    position: relative; overflow: hidden;
}
.funnel-progress .progress-bar::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,250, 0.08), transparent);
    animation: progressShine 2s ease-in-out infinite;
}
.progress-bar-indigo { background: linear-gradient(90deg, var(--primary), var(--brand-primary)) !important; }
.progress-bar-cyan { background: linear-gradient(90deg, var(--info), var(--info)) !important; }
.progress-bar-emerald { background: linear-gradient(90deg, var(--success), var(--success)) !important; }

.funnel-insight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.funnel-stage-card {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
    text-decoration: none;
}

.funnel-stage-card:hover {
    border-color: rgba(196,30,30, 0.08);
    background: var(--brand-soft);
    color: var(--text-primary);
}

.funnel-stage-card.is-risk {
    border-left: 3px solid var(--danger);
}

.funnel-stage-top,
.funnel-stage-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.funnel-stage-top span {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 900;
}

.funnel-stage-top strong {
    min-width: 34px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--success-soft);
    color: var(--teal);
    font-size: 0.82rem;
    font-weight: 900;
}

.funnel-stage-card.is-risk .funnel-stage-top strong {
    background: var(--brand-soft);
    color: var(--danger);
}

.funnel-stage-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.funnel-stage-metrics span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
}

.funnel-stage-foot span {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.funnel-stage-foot em {
    color: var(--primary);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 900;
}

/* ========== Timeline ========== */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
    content: ''; position: absolute;
    left: 8px; top: 4px; bottom: 4px; width: 2px;
    background: linear-gradient(to bottom, var(--primary-subtle), var(--border));
    border-radius: 1px;
}
.timeline-item {
    position: relative; margin-bottom: 20px;
    animation: fadeUp 0.4s var(--ease-out) backwards;
}
.timeline-item:nth-child(1) { animation-delay: 0.05s; }
.timeline-item:nth-child(2) { animation-delay: 0.1s; }
.timeline-item:nth-child(3) { animation-delay: 0.15s; }
.timeline-item:nth-child(4) { animation-delay: 0.2s; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-marker {
    position: absolute; left: -24px; top: 6px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--primary); border: 3px solid var(--surface);
    box-shadow: 0 0 0 2px var(--primary-subtle);
    transition: transform 0.2s var(--ease-spring);
}
.timeline-item:hover .timeline-marker { transform: scale(1.3); }
.timeline-content {
    background: var(--main-bg); border-radius: var(--radius-sm);
    padding: 14px 16px; border: 1px solid var(--border-light);
    transition: all 0.25s var(--ease-out);
}
.timeline-content:hover {
    background: var(--surface);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

/* ========== Card Hover ========== */
.card-hover {
    transition: all 0.35s var(--ease-out);
    cursor: pointer;
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* ========== Alerts ========== */
.alert {
    border: none; border-radius: var(--radius-sm);
    font-size: 0.84rem; padding: 12px 16px;
    animation: fadeUp 0.3s var(--ease-out);
}
.alert-danger { background: var(--danger-soft); color: var(--danger); border-left: 3px solid var(--danger); }
.alert-success { background: var(--success-soft); color: var(--success); border-left: 3px solid var(--success); }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-left: 3px solid var(--warning); }
.alert-info { background: var(--info-soft); color: var(--primary-hover); border-left: 3px solid var(--primary); }

/* ========== Pagination ========== */
.pagination .page-link {
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 0 2px; font-size: 0.82rem;
    transition: all 0.25s var(--ease-out);
}
.pagination .page-link:hover {
    background: var(--primary-soft);
    border-color: var(--primary-subtle);
    color: var(--primary);
    transform: translateY(-1px);
}
.pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--txt-on-color);
    box-shadow: 0 2px 8px rgba(196,30,30, 0.08);
}

/* ========== Breadcrumb ========== */
.breadcrumb { font-size: 0.82rem; }
.breadcrumb-item a { color: var(--text-muted); transition: color 0.2s; }
.breadcrumb-item a:hover { color: var(--primary); }
.breadcrumb-item.active { color: var(--primary); }

/* ========== List Group ========== */
.list-group-item {
    border: none; border-bottom: 1px solid var(--border-light);
    padding: 13px 18px;
    transition: all 0.2s var(--ease-out);
}
.list-group-item:hover {
    background: var(--surface-hover);
    transform: translateX(2px);
}
.list-group-item:last-child { border-bottom: none; }

/* ========== Pre ========== */
pre {
    background: var(--main-bg) !important;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.88rem;
}

/* ========== Report Content ========== */
.report-content {
    line-height: 1.9; font-size: 0.93rem;
    color: var(--text-primary);
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D4D4DE; border-radius: 3px; transition: background 0.2s; }
::-webkit-scrollbar-thumb:hover { background: #BCBCC8; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2d2d4a; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3d3d5a; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0a0a18; }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(196,30,30, 0.08); border-radius: 2px; }

/* ========== Animations ========== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(196,30,30, 0.08); }
    50% { box-shadow: 0 0 20px rgba(196,30,30, 0.08); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes breathe {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes borderGlow {
    0%, 100% { border-color: rgba(196,30,30, 0.08); }
    50% { border-color: rgba(196,30,30, 0.08); }
}
@keyframes animFadeUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Stagger animations for cards */
.stagger-1 { animation: fadeUp 0.45s var(--ease-out) 0.05s backwards; }
.stagger-2 { animation: fadeUp 0.45s var(--ease-out) 0.1s backwards; }
.stagger-3 { animation: fadeUp 0.45s var(--ease-out) 0.15s backwards; }
.stagger-4 { animation: fadeUp 0.45s var(--ease-out) 0.2s backwards; }
.stagger-5 { animation: fadeUp 0.45s var(--ease-out) 0.25s backwards; }
.stagger-6 { animation: fadeUp 0.45s var(--ease-out) 0.3s backwards; }
.anim-fade-up { animation: animFadeUp 0.5s var(--ease-out) backwards; }

/* ========== Page Header ========== */
.page-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 26px; flex-wrap: wrap; gap: 12px;
}
.page-header h4 {
    font-weight: 700; font-size: 1.2rem; color: var(--text-primary);
    display: flex; align-items: center; gap: 10px;
    margin: 0; letter-spacing: -0.02em;
}
.page-header h4 i { color: var(--primary); }

/* ========== Utility Classes ========== */
.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--brand-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.glow-primary { animation: pulse-glow 2s ease-in-out infinite; }
.hover-lift { transition: all 0.3s var(--ease-out); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ========== Empty States ========== */
.empty-state {
    text-align: center; padding: 48px 24px;
    color: var(--text-muted);
}
.empty-state i {
    font-size: 3rem; opacity: 0.3;
    display: block; margin-bottom: 16px;
}
.empty-state p { font-size: 0.9rem; }

/* Premium empty state */
.empty-state-premium {
    text-align: center; padding: 60px 30px;
    animation: fadeScale 0.5s var(--ease-out);
}
.empty-state-premium .empty-icon {
    width: 80px; height: 80px;
    border-radius: var(--radius-xl);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2rem; margin-bottom: 20px;
    position: relative;
}
.empty-state-premium .empty-icon::after {
    content: ''; position: absolute; inset: -4px;
    border-radius: 24px;
    border: 2px dashed var(--border);
    animation: breathe 3s ease-in-out infinite;
}
.empty-state-premium h5 {
    font-size: 1rem; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 8px;
}
.empty-state-premium p {
    font-size: 0.85rem; color: var(--text-muted);
    max-width: 300px; margin: 0 auto;
}

/* ========== Data Ticker ========== */
.data-ticker {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 600;
}
.data-ticker.up { background: var(--success-soft); color: var(--success); }
.data-ticker.down { background: var(--danger-soft); color: var(--danger); }

/* ========== Section Title ========== */
.section-title {
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted); margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
}
.section-title::after {
    content: ''; flex: 1; height: 1px;
    background: var(--border-light);
}

/* ========== Premium Section Divider ========== */
.section-divider {
    display: flex; align-items: center; gap: 16px;
    margin: 32px 0 24px;
}
.section-divider::before,
.section-divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.section-divider span {
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted);
    background: var(--main-bg);
    padding: 0 16px; white-space: nowrap;
}

/* ========== Avatar Component ========== */
.avatar {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.85rem;
    color: var(--txt-on-color); flex-shrink: 0;
    position: relative;
}
.avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 8px; }
.avatar-lg { width: 52px; height: 52px; font-size: 1.1rem; border-radius: 14px; }
.avatar-xl { width: 72px; height: 72px; font-size: 1.5rem; border-radius: 18px; }

/* Avatar with status indicator */
.avatar-status {
    position: absolute; bottom: -1px; right: -1px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--surface);
}
.avatar-status.online { background: var(--success); }
.avatar-status.offline { background: var(--text-muted); }
.avatar-status.busy { background: var(--danger); }

/* Avatar color presets - 红色主调 */
.avatar-indigo { background: linear-gradient(135deg, var(--primary), var(--brand-primary)); }
.avatar-cyan { background: linear-gradient(135deg, var(--info), var(--info)); }
.avatar-emerald { background: linear-gradient(135deg, var(--success), var(--success)); }
.avatar-violet { background: linear-gradient(135deg, var(--brand-hover), var(--primary)); }
.avatar-rose { background: linear-gradient(135deg, var(--danger), var(--danger)); }
.avatar-amber { background: linear-gradient(135deg, var(--warning), var(--warning)); }

/* ========== Modal Enhancement ========== */
.modal-content {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: fadeScale 0.3s var(--ease-out);
}
.modal-header {
    border-bottom: 1px solid var(--border-light);
    padding: 18px 24px;
}
.modal-title {
    font-weight: 600; font-size: 1rem;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 10px;
}
.modal-body { padding: 24px; }
.modal-footer {
    border-top: 1px solid var(--border-light);
    padding: 16px 24px;
}
.modal-backdrop.show { opacity: 0.6; backdrop-filter: blur(4px); }

/* ========== Quick Actions Bar ========== */
.quick-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 24px;
}
.quick-action-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 0.84rem; font-weight: 500;
    cursor: pointer; text-decoration: none;
    transition: all 0.25s var(--ease-out);
    box-shadow: var(--shadow-xs);
}
.quick-action-btn i { font-size: 1rem; }
.quick-action-btn:hover {
    border-color: var(--primary-subtle);
    color: var(--primary);
    background: var(--primary-soft);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* ========== KPI Metric Row ========== */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.kpi-item {
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border-light);
    transition: all 0.3s var(--ease-out);
    position: relative; overflow: hidden;
}
.kpi-item::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--brand-primary));
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s var(--ease-out);
}
.kpi-item:hover::after { transform: scaleX(1); }
.kpi-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.kpi-label {
    font-size: 0.72rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin-bottom: 6px;
}
.kpi-value {
    font-size: 1.5rem; font-weight: 700;
    color: var(--text-primary); letter-spacing: -0.02em;
}
.kpi-trend {
    font-size: 0.72rem; font-weight: 600;
    margin-top: 4px;
}

/* ========== Tabs Enhancement ========== */
.nav-tabs {
    border-bottom: 1px solid var(--border-light);
    gap: 4px;
}
.nav-tabs .nav-link {
    border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: 0.84rem; font-weight: 500;
    color: var(--text-muted); padding: 10px 20px;
    transition: all 0.25s var(--ease-out);
    position: relative;
}
.nav-tabs .nav-link:hover {
    color: var(--primary);
    background: var(--primary-soft);
}
.nav-tabs .nav-link.active {
    color: var(--primary); font-weight: 600;
    background: var(--surface);
}
.nav-tabs .nav-link.active::after {
    content: ''; position: absolute;
    bottom: -1px; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--brand-primary));
    border-radius: 2px 2px 0 0;
}

/* ========== Switch/Toggle ========== */
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* ========== Tag / Chip ========== */
.tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 6px;
    font-size: 0.72rem; font-weight: 500;
    transition: all 0.2s var(--ease-out);
}
.tag:hover { transform: scale(1.05); }
.tag-primary { background: var(--primary-soft); color: var(--primary); }
.tag-success { background: var(--success-soft); color: var(--success); }
.tag-warning { background: var(--warning-soft); color: var(--warning); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }
.tag-muted { background: var(--main-bg); color: var(--text-muted); }

/* ========== Tooltip Enhancement ========== */
.tooltip-inner {
    background: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 0.78rem;
    box-shadow: var(--shadow-md);
}

/* ========== Settings Page ========== */
.settings-section {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 28px;
    margin-bottom: 20px;
    transition: all 0.3s var(--ease-out);
}
.settings-section:hover {
    box-shadow: var(--shadow-sm);
}
.settings-section-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}
.settings-section-header .settings-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.settings-section-header h6 {
    margin: 0; font-size: 0.95rem; font-weight: 600;
    color: var(--text-primary);
}
.settings-section-header p {
    margin: 2px 0 0; font-size: 0.78rem;
    color: var(--text-muted);
}
.settings-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
    gap: 16px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label {
    flex: 1;
}
.settings-row-label h6 {
    margin: 0; font-size: 0.86rem; font-weight: 500;
    color: var(--text-primary);
}
.settings-row-label p {
    margin: 2px 0 0; font-size: 0.76rem;
    color: var(--text-muted);
}

/* ========== 主题设置区块 ========== */
.theme-mode-cards {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.theme-mode-card {
    flex: 1;
    min-width: 140px;
    max-width: 200px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 14px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
    text-align: center;
}
.theme-mode-card:hover {
    border-color: var(--brand-300);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.theme-mode-card.active {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.theme-mode-preview {
    height: 64px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    margin-bottom: 10px;
    border: 1px solid var(--border-subtle);
}
.theme-preview-light .tp-sidebar { width: 28%; background: #ffffff; border-right: 1px solid #e2e5eb; }
.theme-preview-light .tp-main { flex: 1; background: #f1f3f8; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.theme-preview-light .tp-bar { height: 8px; background: #c41e1e; border-radius: 2px; width: 60%; }
.theme-preview-light .tp-card { height: 12px; background: #ffffff; border-radius: 2px; flex: 1; border: 1px solid #e2e5eb; }

.theme-preview-dark .tp-sidebar { width: 28%; background: #1e1e36; border-right: 1px solid #252544; }
.theme-preview-dark .tp-main { flex: 1; background: #0a0a18; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.theme-preview-dark .tp-bar { height: 8px; background: #ff4444; border-radius: 2px; width: 60%; }
.theme-preview-dark .tp-card { height: 12px; background: #181830; border-radius: 2px; flex: 1; border: 1px solid #252544; }

.theme-preview-custom .tp-sidebar { width: 28%; background: var(--brand-100, #fef2f2); border-right: 1px solid var(--brand-200, #fee2e2); }
.theme-preview-custom .tp-main { flex: 1; background: var(--bg-canvas, #f1f3f8); padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.theme-preview-custom .tp-bar { height: 8px; background: var(--brand-primary, #c41e1e); border-radius: 2px; width: 60%; }
.theme-preview-custom .tp-card { height: 12px; background: var(--bg-surface-1, #ffffff); border-radius: 2px; flex: 1; border: 1px solid var(--border-subtle, #e2e5eb); }

/* 默认风格预览（浅色） */
.theme-preview-default .tp-sidebar { width: 28%; background: #ffffff; border-right: 1px solid #e2e5eb; }
.theme-preview-default .tp-main { flex: 1; background: #f1f3f8; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.theme-preview-default .tp-bar { height: 8px; background: #c41e1e; border-radius: 2px; width: 60%; }
.theme-preview-default .tp-card { height: 12px; background: #ffffff; border-radius: 2px; flex: 1; border: 1px solid #e2e5eb; }

/* Linear风格预览 */
.theme-preview-linear .tp-sidebar { width: 28%; background: #0f1011; border-right: 1px solid #23252a; }
.theme-preview-linear .tp-main { flex: 1; background: #010102; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.theme-preview-linear .tp-bar { height: 8px; background: #5e6ad2; border-radius: 2px; width: 60%; }
.theme-preview-linear .tp-card { height: 12px; background: #0f1011; border-radius: 2px; flex: 1; border: 1px solid #23252a; }

/* PostHog风格预览 — 暖奶油画布 + 黄橙主色 */
.theme-preview-posthog .tp-sidebar { width: 28%; background: #eeefe9; border-right: 1px solid #bfc1b7; }
.theme-preview-posthog .tp-main { flex: 1; background: #eeefe9; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.theme-preview-posthog .tp-bar { height: 8px; background: #f7a501; border-radius: 2px; width: 60%; }
.theme-preview-posthog .tp-card { height: 12px; background: #ffffff; border-radius: 2px; flex: 1; border: 1px solid #bfc1b7; }

.theme-mode-label {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 0.84rem; font-weight: 500; color: var(--txt-secondary);
}
.theme-mode-card.active .theme-mode-label {
    color: var(--brand-primary);
}

/* 明暗基底切换 */
.theme-palette-toggle {
    display: flex; gap: 6px;
    background: var(--bg-input);
    padding: 4px;
    border-radius: var(--radius-sm);
}
.theme-palette-btn {
    padding: 7px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--txt-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; gap: 5px;
}
.theme-palette-btn:hover { color: var(--txt-primary); }
.theme-palette-btn.active {
    background: var(--bg-surface-1);
    color: var(--brand-primary);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
}

/* 色卡网格 */
.theme-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.theme-color-swatch {
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--border-light);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    position: relative;
}
.theme-color-swatch:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-md);
}
.theme-color-swatch i {
    color: #fff;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.2s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.theme-color-swatch.active {
    border-color: var(--txt-primary);
    box-shadow: 0 0 0 2px var(--bg-surface-1), 0 0 0 4px var(--brand-primary);
}
.theme-color-swatch.active i { opacity: 1; }

[data-theme="dark"] .theme-palette-btn.active {
    background: var(--bg-surface-2);
}
[data-theme="dark"] .theme-color-swatch.active {
    box-shadow: 0 0 0 2px var(--bg-surface-1), 0 0 0 4px var(--brand-primary);
}

/* ========== Report Hub Cards - 红色主题 ========== */
.report-command-snapshot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 16px;
}

.report-command-main,
.report-command-score,
.report-command-panel {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

.report-command-main {
    padding: 24px;
}

.report-command-main h1 {
    margin: 0 0 7px;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 900;
}

.report-command-main p {
    margin: 0;
    max-width: 860px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.6;
}

.report-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.report-command-score {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    border-top: 4px solid var(--primary);
}

.report-command-score.level-ready {
    border-top-color: var(--success);
}

.report-command-score.level-watch {
    border-top-color: var(--warning);
}

.report-command-score.level-critical {
    border-top-color: var(--danger);
}

.report-command-score span,
.report-command-score em {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
}

.report-command-score strong {
    margin: 8px 0 2px;
    color: var(--primary);
    font-size: 3rem;
    line-height: 1;
}

.report-command-score.level-ready strong {
    color: var(--success);
}

.report-command-score.level-watch strong {
    color: var(--warning);
}

.report-command-score.level-critical strong {
    color: var(--danger);
}

.report-command-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.report-command-panel {
    padding: 18px;
}

.report-command-list {
    display: grid;
    gap: 8px;
}

.report-command-item {
    display: block;
    padding: 11px;
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg-surface-2);
    color: var(--text-primary);
    text-decoration: none;
}

.report-command-item.level-critical {
    border-left-color: var(--danger);
}

.report-command-item.level-watch {
    border-left-color: var(--warning);
}

.report-command-item.level-ready {
    border-left-color: var(--success);
}

.report-command-item strong,
.report-command-item span {
    display: block;
}

.report-command-item strong {
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 900;
}

.report-command-item span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.report-hub-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 0;
    overflow: hidden;
    transition: all 0.4s var(--ease-out);
    position: relative;
    text-decoration: none;
    display: block;
}
.report-hub-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}
.report-hub-card .card-visual {
    height: 140px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.report-hub-card .card-visual::before {
    content: ''; position: absolute; inset: 0;
    opacity: 0.08;
    background-image:
        radial-gradient(circle at 20% 50%, currentColor 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, currentColor 1px, transparent 1px),
        radial-gradient(circle at 50% 80%, currentColor 1px, transparent 1px);
    background-size: 40px 40px;
}
.report-hub-card .card-visual .card-icon {
    width: 64px; height: 64px;
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    color: var(--txt-on-color);
    box-shadow: 0 8px 24px rgba(196,30,30, 0.08);
    z-index: 1;
    transition: transform 0.4s var(--ease-spring);
}
.report-hub-card:hover .card-visual .card-icon {
    transform: scale(1.1) rotate(-5deg);
}
.report-hub-card .card-info {
    padding: 20px 24px;
}
.report-hub-card .card-info h6 {
    font-weight: 600; font-size: 1rem;
    color: var(--text-primary); margin-bottom: 6px;
}
.report-hub-card .card-info p {
    font-size: 0.82rem; color: var(--text-muted);
    margin-bottom: 12px; line-height: 1.5;
}
.report-hub-card .card-info .card-meta {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.72rem; color: var(--text-muted);
}

/* Report hub card color variants - 红色系 */
.report-hub-card.primary .card-visual { background: linear-gradient(135deg, var(--primary), var(--brand-primary)); }
.report-hub-card.primary .card-visual .card-icon { background: rgba(255,255,250, 0.08); }
.report-hub-card.primary:hover { box-shadow: var(--shadow-xl), 0 0 40px rgba(196,30,30, 0.08); }

.report-hub-card.violet .card-visual { background: linear-gradient(135deg, var(--brand-hover), var(--primary)); }
.report-hub-card.violet .card-visual .card-icon { background: rgba(255,255,250, 0.08); }
.report-hub-card.violet:hover { box-shadow: var(--shadow-xl), 0 0 40px rgba(153, 27, 27, 0.10); }

.report-hub-card.amber .card-visual { background: linear-gradient(135deg, var(--warning), var(--warning)); }
.report-hub-card.amber .card-visual .card-icon { background: rgba(255,255,250, 0.08); }
.report-hub-card.amber:hover { box-shadow: var(--shadow-xl), 0 0 40px rgba(217,119,6,0.10); }

.report-hub-card.emerald .card-visual { background: linear-gradient(135deg, var(--success), var(--success)); }
.report-hub-card.emerald .card-visual .card-icon { background: rgba(255,255,250, 0.08); }
.report-hub-card.emerald:hover { box-shadow: var(--shadow-xl), 0 0 40px rgba(5,150,105,0.10); }

.report-hub-card.rose .card-visual { background: linear-gradient(135deg, var(--danger), var(--danger)); }
.report-hub-card.rose .card-visual .card-icon { background: rgba(255,255,250, 0.08); }
.report-hub-card.rose:hover { box-shadow: var(--shadow-xl), 0 0 40px rgba(225,29,72,0.10); }

.report-hub-card.cyan .card-visual { background: linear-gradient(135deg, var(--info), var(--info)); }
.report-hub-card.cyan .card-visual .card-icon { background: rgba(255,255,250, 0.08); }
.report-hub-card.cyan:hover { box-shadow: var(--shadow-xl), 0 0 40px rgba(8,145,178,0.10); }

/* ========== Info Banner ========== */
.info-banner {
    padding: 18px 24px;
    border-radius: var(--radius-md);
    border-left: 4px solid;
    display: flex; align-items: flex-start; gap: 14px;
    animation: fadeUp 0.4s var(--ease-out);
    margin-bottom: 24px;
}
.info-banner i { font-size: 1.2rem; margin-top: 2px; flex-shrink: 0; }
.info-banner h6 { font-size: 0.88rem; font-weight: 600; margin-bottom: 4px; }
.info-banner p { font-size: 0.82rem; margin: 0; line-height: 1.6; }
.info-banner-primary {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}
.info-banner-warning {
    background: var(--warning-soft);
    border-color: var(--warning);
    color: var(--warning);
}

/* ========== Gradient Text Variants - 红色系 ========== */
.text-gradient-primary {
    background: linear-gradient(135deg, var(--primary), var(--brand-primary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-emerald {
    background: linear-gradient(135deg, var(--success), var(--success));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-amber {
    background: linear-gradient(135deg, var(--warning), var(--warning));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-rose {
    background: linear-gradient(135deg, var(--danger), var(--danger));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== Skeleton Loading ========== */
.skeleton {
    background: linear-gradient(90deg, var(--main-bg) 25%, var(--border-light) 50%, var(--main-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton-text { height: 14px; margin-bottom: 8px; width: 80%; }
.skeleton-text:last-child { width: 60%; }
.skeleton-title { height: 24px; margin-bottom: 12px; width: 50%; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 10px; }
.skeleton-card { height: 160px; border-radius: var(--radius-md); }

/* ========== Activity Feed ========== */
.activity-item {
    display: flex; gap: 14px; padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
    transition: all 0.2s var(--ease-out);
}
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: var(--surface-hover); padding-left: 8px; border-radius: var(--radius-sm); }
.activity-dot {
    width: 8px; height: 8px; border-radius: 50%;
    margin-top: 6px; flex-shrink: 0;
}
.activity-content { flex: 1; }
.activity-content .activity-text {
    font-size: 0.84rem; color: var(--text-primary); line-height: 1.5;
}
.activity-content .activity-text strong { font-weight: 600; }
.activity-content .activity-time {
    font-size: 0.72rem; color: var(--text-muted); margin-top: 4px;
}

/* ========== Notification Badge ========== */
.notification-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger);
    position: absolute; top: -2px; right: -2px;
    border: 2px solid var(--surface);
    animation: breathe 2s ease-in-out infinite;
}
.notification-count {
    min-width: 18px; height: 18px;
    border-radius: 9px; font-size: 0.65rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--txt-on-color); padding: 0 5px;
}
.notification-count.danger { background: var(--danger); }
.notification-count.warning { background: var(--warning); }
.notification-count.primary { background: var(--primary); }

/* ========== Dropdown Enhancement ========== */
.dropdown-menu {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    animation: fadeUp 0.2s var(--ease-out);
    z-index: 1050;
}
.dropdown-item {
    border-radius: var(--radius-sm);
    font-size: 0.84rem; padding: 8px 14px;
    color: var(--text-secondary);
    transition: all 0.15s var(--ease-out);
}
.dropdown-item:hover {
    background: var(--primary-soft);
    color: var(--primary);
}
.dropdown-item i { width: 18px; text-align: center; margin-right: 8px; }
.dropdown-divider { border-color: var(--border-light); margin: 4px 0; }

/* ========== Progress Bar Premium ========== */
.progress {
    height: 6px; border-radius: 3px;
    background: var(--main-bg);
    overflow: hidden;
}
.progress-bar-animated {
    animation: progressShine 2s ease-in-out infinite;
}

/* ========== Toast / Notification ========== */
.toast-container { z-index: 2000; }
.toast {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.toast-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border-light);
    font-size: 0.84rem; font-weight: 500;
}

/* ========== AI Panel ========== */
.ai-panel {
    border: 1px solid rgba(196,30,30, 0.08);
    background: linear-gradient(135deg, rgba(255,255,250, 0.08), rgba(255,250,250,0.95));
}
.ai-panel::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--brand-primary), var(--accent-gold));
}

/* ========== Responsive ========== */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: none; }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(196,30,30, 0.08);
    }
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .main-content {
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    .mobile-menu-btn { display: block; }
    .sidebar-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(196,30,30, 0.08); z-index: 999;
        backdrop-filter: blur(4px);
    }
    .sidebar-overlay.show { display: block; }
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .report-command-snapshot,
    .report-command-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {
    .page-content { padding: 18px 16px; }
    .topbar { padding: 0 16px; }
    .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-actions { flex-shrink: 1; overflow: hidden; }
    .stat-card .stat-value { font-size: 1.4rem; }
    .stat-card .stat-icon { width: 40px; height: 40px; font-size: 1rem; }
    .kpi-row { grid-template-columns: 1fr; }
    .settings-row { flex-direction: column; align-items: flex-start; }
    .report-hub-card .card-visual { height: 100px; }
    .report-command-main,
    .report-command-score,
    .report-command-panel {
        padding: 16px;
    }
}

/* ========== Print ========== */
@media print {
    .sidebar, .topbar, .mobile-menu-btn, .sidebar-overlay { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .card { box-shadow: none; border: 1px solid #ddd; }
    body { background: var(--bg-surface-1); }
}

/* ==========================================
   Executive OS Upgrade - 2026
   ========================================== */
body * {
    letter-spacing: 0 !important;
}

:root {
    --surface-line: rgba(196,30,30, 0.08);
    --ink-soft: var(--txt-muted);
    --teal: #0F766E;
    --blue: #1D4ED8;
    --gold: #A16207;
    --panel-radius: 8px;
}

.card,
.stat-card,
.modal-content,
.dropdown-menu,
.report-hub-card,
.settings-section,
.kpi-item,
.quick-action-btn {
    border-radius: var(--panel-radius) !important;
}

.sidebar {
    background: linear-gradient(180deg, var(--bg-surface-1) 0%, var(--bg-surface-2) 100%);
}

.sidebar-brand {
    padding: 24px 20px 18px;
    background: var(--bg-surface-1);
}

.sidebar-brand-icon,
.sidebar-avatar,
.avatar,
.stat-card .stat-icon,
.stat-card-icon {
    border-radius: 8px !important;
}

.executive-nav .sidebar-link {
    min-height: 42px;
    justify-content: flex-start;
}

.executive-nav .sidebar-link span {
    flex: 1;
    min-width: 0;
}

.executive-nav .sidebar-link em {
    font-style: normal;
    font-size: 0.66rem;
    color: var(--primary);
    background: var(--primary-soft);
    padding: 2px 7px;
    border-radius: 999px;
}

.executive-topbar {
    min-height: 68px;
    height: auto;
}

.topbar-subtitle {
    color: var(--text-muted);
    font-size: 0.72rem;
    margin-top: 2px;
}

.topbar-quick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.module-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: stretch;
    padding: 24px;
    margin-bottom: 18px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, var(--bg-surface-1), var(--bg-surface-2)),
        linear-gradient(135deg, var(--brand-soft), var(--success-soft));
    box-shadow: var(--shadow-card);
}

.module-eyebrow {
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.module-title {
    margin: 0;
    font-size: 1.38rem;
    font-weight: 800;
    color: var(--text-primary);
}

.module-copy {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin: 8px 0 0;
    max-width: 720px;
}

.module-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.module-side {
    min-width: 230px;
    border-left: 1px solid var(--surface-line);
    padding-left: 22px;
    display: grid;
    align-content: center;
    gap: 10px;
}

.module-side-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.module-side-row strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.pill-rack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ops-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid var(--surface-line);
    background: var(--bg-surface-1);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.ops-pill i {
    color: var(--primary);
}

.ops-pill.active,
.ops-pill:hover {
    color: var(--primary);
    border-color: rgba(196,30,30, 0.08);
    background: var(--primary-soft);
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.module-card {
    padding: 16px;
    min-height: 118px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.module-card .module-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: var(--primary-soft);
    color: var(--primary);
}

.module-card h6 {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 800;
}

.module-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.module-card.teal .module-card-icon {
    background: var(--success-soft);
    color: var(--teal);
}

.module-card.blue .module-card-icon {
    background: var(--info-soft);
    color: var(--blue);
}

.module-card.gold .module-card-icon {
    background: var(--warning-soft);
    color: var(--gold);
}

.deal-table .deal-name {
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
}

.deal-table .deal-meta {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.deal-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-light);
}

.deal-tag.teal {
    color: var(--teal);
    background: var(--success-soft);
}

.deal-tag.gold {
    color: var(--gold);
    background: var(--warning-soft);
}

.deal-health-cell {
    display: inline-grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 142px;
}

.deal-health-score {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--success-soft);
    color: var(--teal);
    font-size: 0.86rem;
    font-weight: 900;
}

.deal-health-cell strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.76rem;
    line-height: 1.2;
}

.deal-health-cell small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

.deal-health-cell.risk-medium .deal-health-score {
    background: var(--warning-soft);
    color: var(--gold);
}

.deal-health-cell.risk-high .deal-health-score {
    background: var(--brand-soft);
    color: var(--danger);
}

.admin-console-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    margin-bottom: 18px;
}

.control-panel {
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.control-panel-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.control-panel-title {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 800;
}

.control-panel-body {
    padding: 18px;
}

.command-radar-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 16px;
}

.command-radar-panel,
.critical-deal-panel {
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.command-radar-panel {
    padding: 18px;
}

.radar-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.radar-metric {
    min-height: 86px;
    padding: 14px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-2);
}

.radar-metric span {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 850;
}

.radar-metric strong {
    display: block;
    margin-top: 8px;
    color: var(--text-primary);
    font-size: 1.55rem;
    line-height: 1;
}

.radar-metric.red strong {
    color: var(--danger);
}

.radar-metric.amber strong {
    color: var(--gold);
}

.radar-metric.teal strong {
    color: var(--teal);
}

.critical-deal-panel {
    overflow: hidden;
}

.critical-deal-panel .control-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.critical-deal-panel .control-panel-title i {
    color: var(--primary);
}

.critical-deal-list {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.critical-deal-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--teal);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
}

.critical-deal-item:hover {
    border-color: rgba(196,30,30, 0.08);
    color: var(--primary);
    background: var(--brand-soft);
}

.critical-deal-item.risk-medium {
    border-left-color: var(--gold);
}

.critical-deal-item.risk-high {
    border-left-color: var(--danger);
}

.critical-score {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--success-soft);
    color: var(--teal);
    font-size: 0.86rem;
    font-weight: 900;
}

.risk-medium .critical-score {
    background: var(--warning-soft);
    color: var(--gold);
}

.risk-high .critical-score {
    background: var(--brand-soft);
    color: var(--danger);
}

.critical-deal-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.84rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.critical-deal-item small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.critical-stage {
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 850;
    white-space: nowrap;
}

.governance-list {
    display: grid;
    gap: 10px;
}

.governance-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-2);
    text-decoration: none;
}

.governance-item strong {
    color: var(--text-primary);
    font-size: 0.86rem;
}

.governance-item span {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
    margin-top: 2px;
}

.governance-item i {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .module-hero,
    .admin-console-grid,
    .command-radar-grid {
        grid-template-columns: 1fr;
    }

    .module-side {
        border-left: 0;
        border-top: 1px solid var(--surface-line);
        padding-left: 0;
        padding-top: 16px;
    }

    .module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .module-hero {
        padding: 18px;
    }

    .module-grid {
        grid-template-columns: 1fr;
    }

    .radar-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topbar-quick span {
        display: none;
    }
}

/* Team AI Operating System */
.team-hero {
    background:
        linear-gradient(135deg, rgba(255,255,250, 0.08), rgba(248,250,252,0.98)),
        linear-gradient(90deg, rgba(196,30,30, 0.08), rgba(5,150,105,0.08));
}

.team-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 16px;
    margin-bottom: 18px;
}

.ai-command-panel .control-panel-title,
.monday-brief-panel .control-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ai-command-panel .control-panel-title i {
    color: var(--primary);
}

.monday-brief-panel .control-panel-title i {
    color: var(--teal);
}

.ops-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.ops-chip.ready {
    background: var(--success-soft);
    color: var(--success);
    border-color: rgba(16,185,129,0.18);
}

.ops-chip.blocked {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: rgba(239,68,68,0.18);
}

.command-textarea {
    min-height: 176px;
    resize: vertical;
    border-radius: 8px;
    line-height: 1.65;
}

.dispatch-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.dispatch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.dispatch-result,
.brief-text {
    width: 100%;
    min-height: 108px;
    max-height: 260px;
    overflow: auto;
    margin: 12px 0 0;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.65;
    white-space: pre-wrap;
}

.brief-text {
    min-height: 216px;
}

.brief-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.brief-metrics span {
    padding: 10px;
    border-radius: 8px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    font-size: 0.76rem;
    text-align: center;
}

.brief-metrics strong {
    display: block;
    color: var(--text-primary);
    font-size: 1rem;
}

.team-stat {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.team-stat > span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
    flex: 0 0 auto;
}

.team-stat.teal > span {
    background: var(--success-soft);
    color: var(--teal);
}

.team-stat.gold > span {
    background: var(--warning-soft);
    color: var(--gold);
}

.team-stat.red > span {
    background: var(--brand-soft);
    color: var(--danger);
}

.team-stat small {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.team-stat strong {
    display: block;
    margin-top: 2px;
    color: var(--text-primary);
    font-size: 1.55rem;
    line-height: 1;
}

.execution-lens {
    display: grid;
    grid-template-columns: minmax(240px, 0.78fr) minmax(360px, 1.22fr) minmax(280px, 0.9fr);
    gap: 12px;
    margin-bottom: 18px;
}

.execution-index-panel,
.focus-queue-panel,
.owner-load-panel {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.execution-index-panel {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.execution-index-ring {
    width: 96px;
    height: 96px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--success-soft);
    color: var(--teal);
}

.execution-index-ring.level-watch {
    background: var(--warning-soft);
    color: var(--gold);
}

.execution-index-ring.level-critical {
    background: var(--brand-soft);
    color: var(--danger);
}

.execution-index-ring strong {
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 900;
}

.execution-index-ring span {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 900;
}

.execution-index-facts {
    display: grid;
    gap: 8px;
}

.execution-index-facts span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
}

.execution-index-facts i {
    color: var(--primary);
}

.compact-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.compact-panel-head span {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 900;
}

.compact-panel-head a {
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 850;
    text-decoration: none;
}

.focus-task-list,
.owner-load-list {
    display: grid;
    gap: 8px;
}

.focus-task-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 9px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-1);
    color: var(--text-primary);
    text-decoration: none;
}

.focus-task-row:hover {
    border-color: rgba(196,30,30, 0.08);
    background: var(--brand-soft);
    color: var(--text-primary);
}

.focus-task-row > strong {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-canvas);
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 900;
}

.focus-task-row.level-critical > strong,
.attention-chip.level-critical {
    background: var(--brand-soft);
    color: var(--danger);
}

.focus-task-row.level-watch > strong,
.attention-chip.level-watch {
    background: var(--warning-soft);
    color: var(--gold);
}

.focus-task-row.level-normal > strong,
.attention-chip.level-normal {
    background: var(--success-soft);
    color: var(--teal);
}

.focus-task-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-task-meta {
    display: block;
    min-width: 0;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-task-next,
.focus-task-context {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-task-next i {
    flex: 0 0 auto;
    color: var(--primary);
}

.focus-task-context {
    width: fit-content;
    max-width: 100%;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--bg-surface-2);
    color: var(--text-muted);
}

.focus-task-context.state-linked {
    background: var(--success-soft);
    color: var(--teal);
}

.focus-task-context.state-missing {
    background: var(--warning-soft);
    color: var(--gold);
}

.focus-task-context i {
    flex: 0 0 auto;
}

.owner-load-row {
    position: relative;
    display: block;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-1);
    overflow: hidden;
    color: var(--text-primary);
    text-decoration: none;
}

.owner-load-row:hover {
    border-color: rgba(196,30,30, 0.08);
    color: var(--text-primary);
}

.owner-load-row > div {
    position: relative;
    z-index: 1;
}

.owner-load-row strong,
.owner-load-row small,
.owner-load-row em {
    display: block;
}

.owner-load-row strong {
    font-size: 0.8rem;
    font-weight: 900;
}

.owner-load-row small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 750;
}

.owner-load-row em {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1.35;
}

.owner-load-row > span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    max-width: 100%;
    background: rgba(5, 150, 105, 0.08);
}

.owner-load-row.load-warm > span {
    background: rgba(184, 134, 11, 0.12);
}

.owner-load-row.load-hot > span {
    background: rgba(220, 38, 38, 0.10);
}

.focus-empty {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-light);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.execution-protocol-panel {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.execution-protocol-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.execution-protocol-step {
    min-width: 0;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-top: 4px solid var(--teal);
    border-radius: 8px;
    background: var(--bg-surface-1);
    color: var(--text-primary);
    text-decoration: none;
}

.execution-protocol-step.level-watch {
    border-top-color: var(--gold);
}

.execution-protocol-step.level-critical {
    border-top-color: var(--danger);
}

.execution-protocol-step:hover {
    border-color: rgba(196,30,30, 0.08);
    background: var(--brand-soft);
    color: var(--text-primary);
}

.execution-protocol-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.execution-protocol-top span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 950;
}

.execution-protocol-top i {
    color: var(--primary);
}

.execution-protocol-top strong {
    flex: 0 0 auto;
    min-width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--success-soft);
    color: var(--teal);
    font-size: 0.92rem;
    font-weight: 950;
}

.execution-protocol-step.level-watch .execution-protocol-top strong {
    background: var(--warning-soft);
    color: var(--gold);
}

.execution-protocol-step.level-critical .execution-protocol-top strong {
    background: var(--brand-soft);
    color: var(--danger);
}

.execution-protocol-metric {
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    overflow: hidden;
    font-size: 0.68rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.execution-protocol-step p,
.execution-protocol-step small {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.48;
}

.execution-protocol-step small {
    margin-top: auto;
    color: var(--text-primary);
    font-weight: 850;
}

.task-quality-gate-panel {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(196,30,30, 0.08);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--bg-surface-1) 0%, #FFF7F7 100%);
    box-shadow: var(--shadow-card);
}

.task-quality-layout {
    display: grid;
    grid-template-columns: 210px minmax(320px, 1fr) minmax(300px, 0.8fr);
    gap: 12px;
    align-items: stretch;
}

.task-quality-score {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    border: 1px solid rgba(196,30,30, 0.08);
    border-radius: 8px;
    background: var(--bg-surface-1);
}

.task-quality-score strong {
    color: var(--primary);
    font-size: 2rem;
    font-weight: 950;
    line-height: 1;
}

.task-quality-gate-panel.level-ready .task-quality-score strong {
    color: var(--teal);
}

.task-quality-gate-panel.level-watch .task-quality-score strong {
    color: var(--gold);
}

.task-quality-score span {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 950;
}

.task-quality-score small {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.5;
}

.task-quality-score a {
    margin-top: auto;
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 900;
    text-decoration: none;
}

.task-quality-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.task-quality-check {
    min-width: 0;
    min-height: 98px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--danger);
    border-radius: 8px;
    background: var(--bg-surface-1);
    color: var(--text-primary);
    text-decoration: none;
}

.task-quality-check.state-ready {
    border-left-color: var(--teal);
}

.task-quality-check:hover {
    border-color: rgba(196,30,30, 0.08);
    background: var(--brand-soft);
    color: var(--text-primary);
}

.task-quality-check strong {
    color: var(--danger);
    font-size: 1rem;
    font-weight: 950;
}

.task-quality-check.state-ready strong {
    color: var(--teal);
}

.task-quality-check span {
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 900;
}

.task-quality-check small {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1.45;
}

.task-quality-weak-list {
    display: grid;
    gap: 8px;
}

.task-quality-weak-item {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--gold);
    border-radius: 8px;
    background: var(--bg-surface-1);
    color: var(--text-primary);
    text-decoration: none;
}

.task-quality-weak-item.level-critical {
    border-left-color: var(--danger);
}

.task-quality-weak-item:hover {
    border-color: rgba(196,30,30, 0.08);
    background: var(--brand-soft);
    color: var(--text-primary);
}

.task-quality-weak-item small,
.task-quality-weak-item span {
    color: var(--text-secondary);
    overflow: hidden;
    font-size: 0.68rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-quality-weak-item strong {
    color: var(--text-primary);
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 950;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-lane-panel {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.command-lane-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.command-lane-card {
    min-width: 0;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: var(--bg-surface-1);
    color: var(--text-primary);
    text-decoration: none;
}

.command-lane-card.level-watch {
    border-left-color: var(--gold);
}

.command-lane-card.level-critical {
    border-left-color: var(--danger);
}

.command-lane-card:hover {
    border-color: rgba(196,30,30, 0.08);
    border-left-color: var(--primary);
    background: var(--brand-soft);
    color: var(--text-primary);
}

.command-lane-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.command-lane-top span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 900;
}

.command-lane-top i {
    color: var(--primary);
}

.command-lane-top strong {
    flex: 0 0 auto;
    min-width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 950;
}

.command-lane-card.level-critical .command-lane-top strong {
    background: var(--brand-soft);
    color: var(--danger);
}

.command-lane-card.level-watch .command-lane-top strong {
    background: var(--warning-soft);
    color: var(--gold);
}

.command-lane-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.45;
}

.ops-pulse-panel {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(460px, 1.35fr);
    gap: 12px;
    margin-bottom: 18px;
}

.daily-brief-panel,
.queue-health-panel {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.daily-brief-panel {
    border-left: 4px solid var(--teal);
}

.daily-brief-panel.level-watch {
    border-left-color: var(--gold);
}

.daily-brief-panel.level-critical {
    border-left-color: var(--danger);
}

.compact-panel-head em {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 900;
}

.daily-brief-list {
    counter-reset: brief-step;
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.daily-brief-list li {
    counter-increment: brief-step;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.55;
}

.daily-brief-list li::before {
    content: counter(brief-step);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 900;
}

.queue-health-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
}

.queue-health-metric {
    min-width: 0;
    padding: 12px;
    border-right: 1px solid var(--border-light);
    background: var(--bg-surface-1);
    color: var(--text-primary);
    text-decoration: none;
}

.queue-health-metric:last-child {
    border-right: 0;
}

.queue-health-metric:hover {
    background: var(--brand-soft);
    color: var(--text-primary);
}

.queue-health-metric small,
.queue-health-metric strong,
.queue-health-metric span {
    display: block;
    min-width: 0;
}

.queue-health-metric small {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 850;
}

.queue-health-metric strong {
    margin-top: 5px;
    color: var(--text-primary);
    font-size: 1.15rem;
    line-height: 1;
    font-weight: 950;
}

.queue-health-metric span {
    margin-top: 6px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-recommendation-panel {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.ops-recommendation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.ops-recommendation-card {
    min-height: 94px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-1);
    color: var(--text-primary);
    text-decoration: none;
}

.ops-recommendation-card:hover {
    border-color: rgba(196,30,30, 0.08);
    background: var(--brand-soft);
    color: var(--text-primary);
}

.ops-recommendation-card > i {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-canvas);
    color: var(--text-secondary);
}

.ops-recommendation-card.level-critical > i {
    background: var(--brand-soft);
    color: var(--danger);
}

.ops-recommendation-card.level-watch > i {
    background: var(--warning-soft);
    color: var(--gold);
}

.ops-recommendation-card.level-normal > i {
    background: var(--success-soft);
    color: var(--teal);
}

.ops-recommendation-card strong,
.ops-recommendation-card span {
    display: block;
    min-width: 0;
}

.ops-recommendation-card strong {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 900;
}

.ops-recommendation-card span {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.45;
}

.section-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 12px;
}

.section-title {
    margin: 2px 0 0;
    font-size: 1.08rem;
    font-weight: 850;
    color: var(--text-primary);
}

.okr-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.okr-create-panel {
    padding: 16px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.okr-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.okr-card,
.empty-okr-state {
    min-height: 186px;
    padding: 16px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.okr-card-top,
.okr-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.okr-card-top strong {
    color: var(--primary);
    font-size: 0.92rem;
}

.okr-card h6 {
    margin: 12px 0 6px;
    color: var(--text-primary);
    font-size: 0.94rem;
    font-weight: 850;
    line-height: 1.45;
}

.okr-card p {
    min-height: 42px;
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.55;
}

.okr-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-canvas);
    margin-bottom: 12px;
}

.okr-progress .progress-bar {
    background: linear-gradient(90deg, var(--primary), var(--teal));
}

.empty-okr-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    gap: 6px;
}

.empty-okr-state i {
    font-size: 1.6rem;
    color: var(--primary);
}

.empty-okr-state strong {
    color: var(--text-primary);
}

.quick-task-panel {
    margin: 8px 0 16px;
}

.quick-task-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) 120px 126px 112px 128px minmax(130px, 0.8fr) minmax(130px, 0.8fr) 42px;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.quick-task-form .btn {
    width: 42px;
    padding-left: 0;
    padding-right: 0;
}

.dispatch-preset-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.dispatch-preset-strip button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-1);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 850;
}

.dispatch-preset-strip button:hover {
    border-color: rgba(196,30,30, 0.08);
    background: var(--primary-soft);
    color: var(--primary);
}

.dispatch-preset-strip i {
    color: var(--primary);
}

.task-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(200px, 1fr));
    gap: 12px;
    align-items: start;
    min-width: 0;
}

.task-column {
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-2);
    overflow: hidden;
}

.task-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-surface-1);
}

.task-column-header span {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 850;
}

.task-column-header strong {
    min-width: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-canvas);
    color: var(--text-secondary);
    font-size: 0.74rem;
    text-align: center;
}

.task-card-list {
    display: grid;
    gap: 10px;
    padding: 10px;
    min-width: 0;
}

.task-card {
    min-width: 0;
    max-width: 100%;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: 0 8px 20px rgba(196,30,30, 0.08);
}

.task-card.overdue {
    border-left-color: var(--danger);
    background: var(--brand-soft);
}

.task-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    margin-bottom: 7px;
}

.task-card-badges {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.task-type,
.task-priority,
.task-attention-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 22px;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.68rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-attention-badge {
    min-width: 28px;
    background: var(--bg-canvas);
    color: var(--text-secondary);
}

.task-attention-badge.level-critical {
    background: var(--brand-soft);
    color: var(--danger);
}

.task-attention-badge.level-watch {
    background: var(--warning-soft);
    color: var(--gold);
}

.task-attention-badge.level-normal {
    background: var(--success-soft);
    color: var(--teal);
}

.task-type {
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

.task-priority {
    background: var(--info-soft);
    color: var(--blue);
}

.priority-urgent,
.priority-high {
    background: var(--brand-soft);
    color: var(--danger);
}

.priority-low {
    background: var(--bg-canvas);
    color: var(--text-muted);
}

.task-card h6 {
    margin: 0 0 6px;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.38;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.task-signal-line {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin: 0 0 7px;
    padding: 5px 7px;
    border-radius: 7px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-signal-line i {
    color: var(--primary);
    flex: 0 0 auto;
}

.task-signal-line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 7px;
}

.task-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-meta i {
    color: var(--primary);
    flex: 0 0 auto;
}

.task-context-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 7px;
}

.task-linked-opportunity,
.task-linked-objective {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    width: fit-content;
    color: var(--teal);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-linked-objective {
    color: var(--gold);
}

.task-actions {
    display: flex;
    gap: 6px;
    padding-top: 7px;
    border-top: 1px solid var(--border-light);
}

.task-actions button {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    border-radius: 7px;
    background: var(--bg-surface-1);
    color: var(--text-secondary);
}

.task-actions button:hover {
    border-color: rgba(196,30,30, 0.08);
    color: var(--primary);
    background: var(--primary-soft);
}

.task-actions-readonly {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.task-column-more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px dashed rgba(196,30,30, 0.08);
    border-radius: 8px;
    color: var(--primary);
    background: var(--bg-surface-1);
    font-size: 0.74rem;
    font-weight: 800;
    text-decoration: none;
}

.task-column-more:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.task-empty {
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-light);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.76rem;
    background: var(--bg-surface-1);
}

.follow-up-task-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.follow-up-task-toggle input {
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
}

.action-bridge-card {
    border-top: 3px solid var(--primary);
}

.stage-gap-strip,
.stage-ready-strip,
.auto-follow-up-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
}

.stage-gap-strip {
    background: var(--warning-soft);
    color: var(--text-secondary);
}

.stage-gap-strip strong {
    color: var(--warning);
    white-space: nowrap;
}

.stage-ready-strip {
    background: var(--success-soft);
    color: var(--success);
}

.auto-follow-up-note {
    margin-top: 0;
    background: var(--primary-soft);
    color: var(--text-secondary);
}

.manual-follow-up-panel {
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-surface-2);
}

.manual-follow-up-panel summary {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.opportunity-record-tabs {
    gap: 4px;
    border-bottom-color: var(--border-light);
}

.opportunity-record-tabs .nav-link {
    min-height: 38px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.opportunity-record-tabs .nav-link.active {
    color: var(--primary);
    background: var(--bg-surface-1);
    border-color: var(--border-light) var(--border-light) var(--bg-surface-1);
}

.opportunity-record-content {
    padding-top: 16px;
}

.compact-record-list {
    display: grid;
    gap: 8px;
}

.compact-record-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-decoration: none;
}

.compact-record-row:hover {
    border-color: var(--border-strong);
    color: var(--primary);
}

.compact-record-row > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.compact-record-row strong {
    font-size: 0.8rem;
}

.compact-record-row small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.compact-record-row em {
    color: var(--warning);
    font-size: 0.72rem;
    font-style: normal;
}

.compact-action-card {
    position: sticky;
    top: 76px;
}

.opportunity-stage-meta {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.opportunity-stage-meta span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.opportunity-stage-meta i {
    color: var(--primary);
}

.compact-attention {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    font-size: 0.74rem;
}

.compact-attention strong {
    color: var(--warning);
}

.compact-attention span {
    color: var(--text-secondary);
}

@media (max-width: 991.98px) {
    .compact-action-card {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .stage-gap-strip,
    .stage-ready-strip,
    .auto-follow-up-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .stage-gap-strip strong {
        white-space: normal;
    }

    .opportunity-record-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .opportunity-record-tabs .nav-link {
        white-space: nowrap;
    }
}

.opportunity-health-card {
    border-top: 3px solid var(--teal);
}

.opportunity-health-card.risk-medium {
    border-top-color: var(--gold);
}

.opportunity-health-card.risk-high {
    border-top-color: var(--danger);
}

.health-level {
    border-radius: 999px;
    padding: 4px 9px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 850;
}

.opportunity-health-card.risk-high .health-level {
    background: var(--brand-soft);
    color: var(--danger);
}

.opportunity-health-card.risk-medium .health-level {
    background: var(--warning-soft);
    color: var(--gold);
}

.health-score-line {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.health-score-line strong {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--success-soft);
    color: var(--teal);
    font-size: 1.35rem;
    font-weight: 900;
}

.opportunity-health-card.risk-medium .health-score-line strong {
    background: var(--warning-soft);
    color: var(--gold);
}

.opportunity-health-card.risk-high .health-score-line strong {
    background: var(--brand-soft);
    color: var(--danger);
}

.health-score-line span {
    display: block;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 850;
}

.health-score-line small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.health-signal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.health-signal-list span {
    border-radius: 999px;
    padding: 5px 8px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    font-size: 0.72rem;
    font-weight: 800;
}

.health-primary-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 850;
}

.action-plan-box {
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--brand-soft);
}

.action-plan-label {
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 850;
    margin-bottom: 6px;
}

.action-plan-text {
    color: var(--text-primary);
    font-size: 0.86rem;
    line-height: 1.55;
    font-weight: 700;
}

.action-plan-meta,
.action-plan-empty {
    color: var(--text-muted);
    font-size: 0.74rem;
    margin-top: 8px;
}

.linked-task-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
}

.linked-task-summary strong {
    color: var(--primary);
    font-size: 1rem;
}

.linked-task-list {
    display: grid;
    gap: 6px;
}

.linked-task-item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-1);
    color: var(--text-primary);
    text-decoration: none;
}

.linked-task-item:hover {
    border-color: rgba(196,30,30, 0.08);
    color: var(--primary);
}

.linked-task-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--text-muted);
}

.linked-task-dot.status-doing { background: var(--teal); }
.linked-task-dot.status-review { background: var(--gold); }
.linked-task-dot.status-blocked { background: var(--danger); }
.linked-task-dot.status-done { background: var(--txt-muted); }

.linked-task-title {
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.linked-task-owner {
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.stage-protocol-card {
    border-top: 3px solid var(--primary);
}

.stage-protocol-card.level-ready {
    border-top-color: var(--teal);
}

.stage-protocol-card.level-watch {
    border-top-color: var(--gold);
}

.stage-protocol-card.level-blocked {
    border-top-color: var(--danger);
}

.stage-protocol-level {
    border-radius: 999px;
    padding: 4px 9px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 850;
}

.stage-protocol-card.level-ready .stage-protocol-level {
    background: var(--success-soft);
    color: var(--teal);
}

.stage-protocol-card.level-watch .stage-protocol-level {
    background: var(--warning-soft);
    color: var(--gold);
}

.stage-protocol-card.level-blocked .stage-protocol-level {
    background: var(--brand-soft);
    color: var(--danger);
}

.stage-protocol-score {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.stage-protocol-score strong {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 900;
}

.stage-protocol-card.level-ready .stage-protocol-score strong {
    background: var(--success-soft);
    color: var(--teal);
}

.stage-protocol-card.level-watch .stage-protocol-score strong {
    background: var(--warning-soft);
    color: var(--gold);
}

.stage-protocol-card.level-blocked .stage-protocol-score strong {
    background: var(--brand-soft);
    color: var(--danger);
}

.stage-protocol-score span {
    display: block;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 850;
}

.stage-protocol-score small {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.stage-protocol-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 12px;
}

.stage-protocol-metrics div {
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-2);
    text-align: center;
}

.stage-protocol-metrics span {
    display: block;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.stage-protocol-metrics strong {
    display: block;
    margin-top: 2px;
    color: var(--text-primary);
    font-size: 0.94rem;
    font-weight: 900;
}

.stage-protocol-checklist {
    display: grid;
    gap: 7px;
}

.stage-check-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-1);
    color: var(--text-primary);
    text-decoration: none;
}

.stage-check-item:hover {
    border-color: rgba(196,30,30, 0.08);
    color: var(--text-primary);
    background: var(--brand-soft);
}

.stage-check-item > i {
    margin-top: 1px;
    color: var(--teal);
}

.stage-check-item.state-warning > i {
    color: var(--gold);
}

.stage-check-item.state-blocker > i {
    color: var(--danger);
}

.stage-check-item strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 850;
}

.stage-check-item small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.stage-next-actions {
    display: grid;
    gap: 7px;
    margin-top: 12px;
}

.stage-next-action {
    display: block;
    padding: 10px;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
    text-decoration: none;
}

.stage-next-action.level-ready {
    background: var(--success-soft);
    color: var(--teal);
}

.stage-next-action.level-watch {
    background: var(--warning-soft);
    color: var(--gold);
}

.stage-next-action.level-critical {
    background: var(--brand-soft);
    color: var(--danger);
}

.stage-next-action strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 900;
}

.stage-next-action span {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1.45;
}

.stage-advance-form {
    margin-top: 12px;
}

.stage-force-form {
    margin-top: 8px;
}

.stage-force-form .btn {
    border-color: rgba(100,116,139,0.22);
    color: var(--text-secondary);
    font-size: 0.73rem;
    font-weight: 850;
}

.stage-advance-disabled {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg-surface-2);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.task-list-shell {
    display: grid;
    gap: 12px;
}

.task-list-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.task-summary-item {
    min-height: 78px;
    padding: 13px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
    text-decoration: none;
}

.task-summary-item span {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 850;
}

.task-summary-item strong {
    display: block;
    margin-top: 8px;
    color: var(--text-primary);
    font-size: 1.42rem;
    line-height: 1;
}

.task-summary-item.teal strong { color: var(--teal); }
.task-summary-item.red strong { color: var(--danger); }
.task-summary-item.amber strong { color: var(--gold); }
.task-summary-item.muted strong { color: var(--text-secondary); }
.task-summary-item.violet strong { color: #7C3AED; }

.task-summary-item:hover {
    border-color: rgba(196,30,30, 0.08);
    background: var(--brand-soft);
}

.task-list-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
}

.task-list-filters input[name="keyword"] {
    grid-column: span 2;
}

.task-list-meta {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.task-list-table {
    border: 1px solid var(--surface-line);
    border-radius: 8px;
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.task-list-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 118px 92px 112px 98px 86px 156px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.task-list-row:last-child {
    border-bottom: 0;
}

.task-list-head {
    background: var(--bg-surface-2);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
}

.task-list-row.is-overdue {
    background: var(--brand-soft);
}

.task-list-title {
    color: var(--text-primary);
    font-weight: 850;
    line-height: 1.4;
}

.task-list-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.task-list-sub a {
    color: var(--teal);
    text-decoration: none;
}

.task-status-chip {
    justify-self: start;
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--bg-canvas);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 850;
}

.task-status-chip.status-doing {
    background: var(--success-soft);
    color: var(--teal);
}

.task-status-chip.status-review {
    background: var(--warning-soft);
    color: var(--gold);
}

.task-status-chip.status-blocked {
    background: var(--brand-soft);
    color: var(--danger);
}

.attention-chip {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--bg-canvas);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 850;
    white-space: nowrap;
}

.attention-chip strong {
    font-size: 0.78rem;
}

.task-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.task-list-actions button {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    border-radius: 7px;
    background: var(--bg-surface-1);
    color: var(--text-secondary);
}

.task-list-actions button:hover {
    border-color: rgba(196,30,30, 0.08);
    color: var(--primary);
    background: var(--primary-soft);
}

.readonly-action {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.task-list-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 160px;
    color: var(--text-muted);
    font-weight: 800;
}

.pagination-wrap {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

@media (max-width: 1399.98px) {
    .execution-lens {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .command-lane-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .execution-protocol-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .task-quality-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .task-quality-weak-list {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-pulse-panel {
        grid-template-columns: 1fr;
    }

    .owner-load-panel {
        grid-column: 1 / -1;
    }

    .task-board {
        grid-template-columns: repeat(3, minmax(220px, 1fr));
    }

    .okr-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-task-form {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .task-list-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .team-command-grid,
    .okr-layout,
    .execution-lens,
    .ops-pulse-panel {
        grid-template-columns: 1fr;
    }

    .owner-load-panel {
        grid-column: auto;
    }

    .task-board {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .quick-task-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-task-form .btn {
        width: 100%;
    }

    .task-list-row {
        grid-template-columns: minmax(220px, 1fr) 100px 90px;
    }

    .task-list-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .funnel-insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ranking-score-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-recommendation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .command-lane-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .execution-protocol-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-quality-layout {
        grid-template-columns: 1fr;
    }

    .task-quality-weak-list {
        grid-column: auto;
    }

    .queue-health-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .queue-health-metric:nth-child(2) {
        border-right: 0;
    }

    .queue-health-metric:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border-light);
    }

    .task-list-row > span:nth-of-type(3),
    .task-list-row > span:nth-of-type(4),
    .task-list-row > span:nth-of-type(5),
    .task-list-actions {
        display: none;
    }
}

@media (max-width: 767px) {
    .execution-index-panel {
        grid-template-columns: 1fr;
    }

    .execution-index-ring {
        width: 100%;
        height: 82px;
        border-radius: 12px;
    }

    .dispatch-options,
    .brief-metrics,
    .okr-card-grid,
    .quick-task-form,
    .task-board {
        grid-template-columns: 1fr;
    }

    .task-list-filters {
        grid-template-columns: 1fr;
    }

    .task-list-filters input[name="keyword"] {
        grid-column: auto;
    }

    .task-list-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .funnel-insight-grid {
        grid-template-columns: 1fr;
    }

    .ranking-score-grid {
        grid-template-columns: 1fr;
    }

    .ops-recommendation-grid {
        grid-template-columns: 1fr;
    }

    .command-lane-grid {
        grid-template-columns: 1fr;
    }

    .execution-protocol-grid {
        grid-template-columns: 1fr;
    }

    .task-quality-checks,
    .task-quality-weak-list {
        grid-template-columns: 1fr;
    }

    .queue-health-strip {
        grid-template-columns: 1fr;
    }

    .queue-health-metric,
    .queue-health-metric:nth-child(2) {
        border-right: 0;
    }

    .queue-health-metric:nth-child(-n + 3) {
        border-bottom: 1px solid var(--border-light);
    }

    .task-list-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .task-list-head {
        display: none;
    }

    .task-list-row > span:nth-of-type(3),
    .task-list-row > span:nth-of-type(4),
    .task-list-row > span:nth-of-type(5),
    .task-list-actions {
        display: flex;
    }
}

/* Unified operating cockpit */
.operating-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.operating-hero-main,
.operating-score-panel,
.operating-panel,
.scenario-lane,
.wechat-ops-hero,
.wechat-ops-panel,
.wechat-lifecycle-item,
.wechat-step-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.operating-hero-main {
    padding: 28px;
}

.operating-score-panel {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 190px;
    border-top: 4px solid var(--primary);
}

.operating-score-panel span,
.operating-score-panel small {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.78rem;
}

.operating-score-panel strong {
    margin: 8px 0 2px;
    color: var(--text-primary);
    font-size: 4rem;
    line-height: 1;
    letter-spacing: 0;
}

.operating-score-panel em {
    font-style: normal;
    color: var(--primary);
    font-weight: 800;
}

.operating-score-panel.level-critical {
    border-top-color: var(--danger);
}

.operating-score-panel.level-critical em {
    color: var(--danger);
}

.operating-score-panel.level-watch {
    border-top-color: var(--warning);
}

.operating-score-panel.level-watch em {
    color: var(--warning);
}

.scenario-lane-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.scenario-lane {
    padding: 16px;
    color: var(--text-primary);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    border-left: 4px solid var(--border-strong);
}

.scenario-lane:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.scenario-lane.level-critical {
    border-left-color: var(--danger);
}

.scenario-lane.level-watch {
    border-left-color: var(--warning);
}

.scenario-lane.level-normal {
    border-left-color: var(--success);
}

.scenario-lane > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.scenario-lane span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 800;
}

.scenario-lane strong {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 1.5rem;
    line-height: 1;
}

.scenario-lane p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.55;
}

.operating-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.operating-panel {
    padding: 18px;
    min-width: 0;
}

.readiness-list,
.today-flow-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.readiness-item,
.today-flow-item {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}

.readiness-item:last-child,
.today-flow-item:last-child {
    border-bottom: none;
}

.readiness-item i,
.today-flow-item i {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
}

.readiness-item.state-ready i {
    background: var(--success-soft);
    color: var(--success);
}

.readiness-item.state-todo i {
    background: var(--danger-soft);
    color: var(--danger);
}

.readiness-item strong,
.today-flow-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.88rem;
    margin-bottom: 2px;
}

.readiness-item span,
.today-flow-item span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.today-flow-item {
    color: inherit;
    text-decoration: none;
}

.operating-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.operating-metric {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    background: var(--bg-surface-2);
}

.operating-metric small,
.operating-metric span {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.operating-metric strong {
    display: block;
    margin: 4px 0;
    color: var(--primary);
    font-size: 1.8rem;
    line-height: 1;
}

.operating-metric.danger strong {
    color: var(--danger);
}

.radar-metric {
    color: inherit;
    text-decoration: none;
}

/* WeCom operating setup */
.settings-workspace {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
    align-items: flex-start;
}

.min-width-0 {
    min-width: 0;
}

.settings-nav-panel {
    position: sticky;
    top: 88px;
}

.wechat-ops-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 18px;
    align-items: stretch;
    padding: 24px;
    margin-bottom: 16px;
}

.wechat-ops-title h1 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 1.55rem;
    font-weight: 900;
}

.wechat-ops-title p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 820px;
}

.wechat-score-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    border-radius: 8px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-light);
}

.wechat-score-card span,
.wechat-score-card small {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.76rem;
}

.wechat-score-card strong {
    margin: 6px 0;
    color: var(--primary);
    font-size: 3rem;
    line-height: 1;
}

.wechat-score-card em {
    color: var(--text-primary);
    font-style: normal;
    font-weight: 800;
}

.wechat-lifecycle-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.wechat-lifecycle-item {
    padding: 13px;
    border-top: 3px solid var(--border-strong);
}

.wechat-lifecycle-item.state-ready {
    border-top-color: var(--success);
}

.wechat-lifecycle-item.state-todo {
    border-top-color: var(--warning);
}

.wechat-lifecycle-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.86rem;
    margin-bottom: 5px;
}

.wechat-lifecycle-item span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.45;
}

.wechat-ops-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 16px;
}

.wechat-ops-panel {
    padding: 18px;
    margin-bottom: 16px;
}

.wechat-status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.wechat-status-metric {
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-light);
}

.wechat-status-metric small,
.wechat-status-metric span {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.wechat-status-metric strong {
    display: block;
    color: var(--primary);
    font-size: 1.4rem;
    line-height: 1.1;
    margin: 4px 0;
}

.wechat-preflight-panel {
    display: grid;
    gap: 12px;
}

.wechat-preflight-score {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-light);
}

.wechat-preflight-score strong {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 1.35rem;
    font-weight: 900;
}

.wechat-preflight-score.state-ready strong {
    background: var(--success-soft);
    color: var(--success);
}

.wechat-preflight-score span {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 900;
}

.wechat-preflight-checks {
    display: grid;
    gap: 8px;
}

.wechat-preflight-check {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-1);
}

.wechat-preflight-check i {
    margin-top: 1px;
    color: var(--success);
}

.wechat-preflight-check.state-critical i {
    color: var(--danger);
}

.wechat-preflight-check.state-warning i {
    color: var(--warning);
}

.wechat-preflight-check strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 850;
}

.wechat-preflight-check span {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.45;
    word-break: break-word;
}

.wechat-preflight-next {
    padding: 10px;
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--danger);
}

.wechat-preflight-next.ready {
    background: var(--success-soft);
    color: var(--success);
}

.wechat-preflight-next strong,
.wechat-preflight-next span {
    display: block;
}

.wechat-preflight-next strong {
    font-size: 0.8rem;
    font-weight: 900;
}

.wechat-preflight-next span {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.45;
}

.wechat-chat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wechat-chat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface-2);
}

.wechat-chat-row strong,
.wechat-chat-row span {
    display: block;
}

.wechat-chat-row span {
    color: var(--text-muted);
    font-size: 0.75rem;
    word-break: break-all;
}

.wechat-step-list {
    display: grid;
    gap: 10px;
}

.wechat-step-card {
    padding: 13px;
}

.wechat-step-card strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.86rem;
    margin-bottom: 4px;
}

.wechat-step-card span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
}

.wechat-message-list {
    display: grid;
    gap: 9px;
}

.wechat-message-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg-surface-2);
}

.wechat-message-row.state-parsed {
    border-left-color: var(--success);
}

.wechat-message-row.state-failed {
    border-left-color: var(--danger);
}

.wechat-message-row.state-skipped,
.wechat-message-row.state-ignored {
    border-left-color: var(--warning);
}

.wechat-message-row.state-pending {
    border-left-color: var(--primary);
}

.wechat-message-main {
    min-width: 0;
}

.wechat-message-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.wechat-message-state {
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--bg-canvas);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 900;
}

.wechat-message-row.state-parsed .wechat-message-state {
    background: var(--success-soft);
    color: var(--success);
}

.wechat-message-row.state-failed .wechat-message-state {
    background: var(--danger-soft);
    color: var(--danger);
}

.wechat-message-row.state-skipped .wechat-message-state,
.wechat-message-row.state-ignored .wechat-message-state {
    background: var(--warning-soft);
    color: var(--warning);
}

.wechat-message-content {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.42;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wechat-message-detail {
    margin-top: 5px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wechat-message-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.config-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.config-form-grid .span-2 {
    grid-column: 1 / -1;
}

@media (max-width: 1280px) {
    .scenario-lane-grid,
    .wechat-lifecycle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operating-grid,
    .wechat-ops-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .operating-hero,
    .wechat-ops-hero,
    .settings-workspace {
        grid-template-columns: 1fr;
    }

    .settings-nav-panel {
        position: static;
    }

    .wechat-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wechat-message-row {
        grid-template-columns: 1fr;
    }

    .wechat-message-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .scenario-lane-grid,
    .wechat-lifecycle-grid,
    .operating-metric-grid,
    .config-form-grid,
    .wechat-status-strip {
        grid-template-columns: 1fr;
    }

    .operating-hero-main,
    .wechat-ops-hero {
        padding: 18px;
    }
}

/* ==========================================
   暗色模式全局覆盖
   覆盖 Bootstrap 默认白色背景和深色文字
   ========================================== */
[data-theme="dark"] {
    /* Bootstrap 基础元素 */
    color-scheme: dark;
}

[data-theme="dark"] body {
    background: var(--bg-canvas);
    color: var(--txt-primary);
}

/* Bootstrap 卡片 */
[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-footer {
    background-color: var(--txt-on-color);
    color: var(--txt-primary);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .card-header {
    border-bottom-color: var(--border-subtle);
}
[data-theme="dark"] .card-footer {
    border-top-color: var(--border-subtle);
}

/* Bootstrap 表单控件 */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--bg-input);
    color: var(--txt-primary);
    border-color: var(--border-strong);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--txt-muted);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-input);
    color: var(--txt-primary);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(255, 68, 68, 0.15);
}

[data-theme="dark"] .input-group-text {
    background-color: var(--bg-surface-2);
    color: var(--txt-secondary);
    border-color: var(--border-strong);
}

/* Bootstrap 模态框 */
[data-theme="dark"] .modal-content {
    background-color: var(--txt-on-color);
    color: var(--txt-primary);
    border-color: var(--border-subtle);
}
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-subtle);
}
[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-subtle);
}

/* Bootstrap 表格 */
[data-theme="dark"] .table {
    color: var(--txt-primary);
    border-color: var(--border-subtle);
}
[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--txt-primary);
    border-bottom-color: var(--border-subtle);
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bg-surface-2);
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--bg-hover);
}
[data-theme="dark"] .table-dark {
    background-color: var(--bg-surface-2);
    color: var(--txt-primary);
}

/* Bootstrap 下拉菜单 */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--txt-on-color);
    border-color: var(--border-subtle);
}
[data-theme="dark"] .dropdown-item {
    color: var(--txt-secondary);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-hover);
    color: var(--txt-primary);
}
[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-subtle);
}
[data-theme="dark"] .dropdown-header {
    color: var(--txt-muted);
}

/* Bootstrap 徽章 */
[data-theme="dark"] .badge {
    color: var(--txt-on-color);
}

/* Bootstrap 列表组 */
[data-theme="dark"] .list-group-item {
    background-color: var(--txt-on-color);
    color: var(--txt-primary);
    border-color: var(--border-subtle);
}
[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--bg-hover);
    color: var(--txt-primary);
}

/* Bootstrap 警告框 */
[data-theme="dark"] .alert {
    border-color: var(--border-subtle);
}

/* Bootstrap 导航 */
[data-theme="dark"] .nav-link {
    color: var(--txt-secondary);
}
[data-theme="dark"] .nav-link:hover {
    color: var(--txt-primary);
}

/* Bootstrap 分页 */
[data-theme="dark"] .page-link {
    background-color: var(--txt-on-color);
    color: var(--txt-secondary);
    border-color: var(--border-subtle);
}
[data-theme="dark"] .page-link:hover {
    background-color: var(--bg-hover);
    color: var(--txt-primary);
}
[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--brand-primary);
    color: var(--txt-on-color);
    border-color: var(--brand-primary);
}
[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-surface-2);
    color: var(--txt-muted);
}

/* Bootstrap 关闭按钮 */
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Bootstrap 手风琴 */
[data-theme="dark"] .accordion-item {
    background-color: var(--txt-on-color);
    border-color: var(--border-subtle);
}
[data-theme="dark"] .accordion-button {
    background-color: var(--txt-on-color);
    color: var(--txt-primary);
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--brand-soft);
    color: var(--brand-primary);
}
[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

/* Bootstrap 标签页 */
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--txt-secondary);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--txt-on-color);
    color: var(--txt-primary);
    border-color: var(--border-subtle) var(--border-subtle) var(--bg-surface-1);
}

/* Bootstrap 进度条 */
[data-theme="dark"] .progress {
    background-color: var(--bg-surface-2);
}

/* Bootstrap 面包屑 */
[data-theme="dark"] .breadcrumb-item {
    color: var(--txt-secondary);
}
[data-theme="dark"] .breadcrumb-item.active {
    color: var(--txt-primary);
}

/* 通用文本元素 */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--txt-primary);
}

[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] div,
[data-theme="dark"] li, [data-theme="dark"] td, [data-theme="dark"] th {
    color: inherit;
}

[data-theme="dark"] small, [data-theme="dark"] .text-muted {
    color: var(--txt-muted) !important;
}

[data-theme="dark"] a {
    color: var(--brand-primary);
}

/* placeholder 颜色 */
[data-theme="dark"] ::placeholder {
    color: var(--txt-muted);
    opacity: 0.7;
}

/* 滚动条 */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-canvas);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--txt-muted);
}

/* text-bg-* Bootstrap 类 */
[data-theme="dark"] .text-bg-primary { background-color: var(--brand-primary) !important; color: var(--txt-on-color) !important; }
[data-theme="dark"] .text-bg-success { background-color: var(--success) !important; color: var(--txt-on-color) !important; }
[data-theme="dark"] .text-bg-warning { background-color: var(--warning) !important; color: var(--txt-on-color) !important; }
[data-theme="dark"] .text-bg-danger { background-color: var(--danger) !important; color: var(--txt-on-color) !important; }
[data-theme="dark"] .text-bg-info { background-color: var(--info) !important; color: var(--txt-on-color) !important; }
[data-theme="dark"] .text-bg-secondary { background-color: var(--bg-surface-2) !important; color: var(--txt-secondary) !important; }

/* bg-* Bootstrap 类 */
[data-theme="dark"] .bg-light { background-color: var(--bg-surface-2) !important; }
[data-theme="dark"] .bg-white { background-color: var(--txt-on-color) !important; }
[data-theme="dark"] .bg-dark { background-color: var(--bg-surface-2) !important; }

/* text-* Bootstrap 类 */
[data-theme="dark"] .text-dark { color: var(--txt-primary) !important; }
[data-theme="dark"] .text-secondary { color: var(--txt-secondary) !important; }
[data-theme="dark"] .text-primary { color: var(--brand-primary) !important; }

/* hr 分割线 */
[data-theme="dark"] hr {
    border-color: var(--border-subtle);
    opacity: 0.5;
}

/* border 类 */
[data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start, [data-theme="dark"] .border-end {
    border-color: var(--border-subtle) !important;
}

/* CMDK 命令面板暗色模式 */
[data-theme="dark"] #cmdk-modal {
    background: var(--bg-surface-1) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] #cmdk-input {
    color: var(--txt-primary) !important;
}
[data-theme="dark"] #cmdk-input::placeholder {
    color: var(--txt-muted) !important;
}

/* 自定义模式（暗色基底）也需要覆盖 Bootstrap */
[data-theme="custom"][data-palette="dark"] {
    color-scheme: dark;
}
[data-theme="custom"][data-palette="dark"] .card,
[data-theme="custom"][data-palette="dark"] .card-header,
[data-theme="custom"][data-palette="dark"] .card-body,
[data-theme="custom"][data-palette="dark"] .form-control,
[data-theme="custom"][data-palette="dark"] .form-select,
[data-theme="custom"][data-palette="dark"] .modal-content,
[data-theme="custom"][data-palette="dark"] .dropdown-menu,
[data-theme="custom"][data-palette="dark"] .list-group-item,
[data-theme="custom"][data-palette="dark"] .page-link,
[data-theme="custom"][data-palette="dark"] .accordion-item,
[data-theme="custom"][data-palette="dark"] .accordion-button {
    background-color: var(--txt-on-color);
    color: var(--txt-primary);
    border-color: var(--border-subtle);
}

[data-theme="custom"][data-palette="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--txt-primary);
    border-bottom-color: var(--border-subtle);
}

[data-theme="custom"][data-palette="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bg-surface-2);
}

[data-theme="custom"][data-palette="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="custom"][data-palette="dark"] body {
    background: var(--bg-canvas);
    color: var(--txt-primary);
}

[data-theme="custom"][data-palette="dark"] .bg-light { background-color: var(--bg-surface-2) !important; }
[data-theme="custom"][data-palette="dark"] .bg-white { background-color: var(--txt-on-color) !important; }
[data-theme="custom"][data-palette="dark"] .text-dark { color: var(--txt-primary) !important; }
[data-theme="custom"][data-palette="dark"] ::placeholder { color: var(--txt-muted); }
[data-theme="custom"][data-palette="dark"] #cmdk-modal { background: var(--bg-surface-1) !important; }
[data-theme="custom"][data-palette="dark"] #cmdk-input { color: var(--txt-primary) !important; }

/* 自定义模式（浅色基底）- 确保背景跟随 */
[data-theme="custom"]:not([data-palette="dark"]) body {
    background: var(--bg-canvas, var(--neutral-200));
    color: var(--txt-primary, var(--neutral-1100));
}

/* ==========================================
   Linear 风格主题
   近纯黑画布 + 薰衣草蓝点缀 + 发丝边框
   通过覆盖基础色阶实现，组件层自动跟随
   ========================================== */

/* Linear 浅色模式（暗画布+亮文字，与Linear官网一致） */
[data-style="linear"] {
    /* Neutral — 反转：浅色文字+暗色背景 */
    --neutral-white: #ffffff;
    --neutral-100: #f7f8f8;
    --neutral-200: #f0f1f3;
    --neutral-300: #e0e1e6;
    --neutral-400: #c5c7ce;
    --neutral-500: #8a8f98;
    --neutral-600: #62666d;
    --neutral-700: #4a4d54;
    --neutral-800: #34343a;
    --neutral-900: #23252a;
    --neutral-1000: #18191a;
    --neutral-1100: #141516;
    --neutral-1200: #0f1011;
    --neutral-black: #010102;

    /* Brand — 薰衣草蓝 */
    --brand-100: #ebedf5;
    --brand-200: #d8daf0;
    --brand-300: #b8bce8;
    --brand-400: #9499e0;
    --brand-500: #7a7fad;
    --brand-600: #5e6ad2;
    --brand-700: #5e6ad2;
    --brand-800: #5e6ad2;
    --brand-900: #4a54b0;
    --brand-1000: #3d4590;
    --brand-1100: #2e3570;
    --brand-1200: #1f2550;
    --brand-default: #5e6ad2;

    /* 语义色 */
    --green-500: #27a644;
    --green-700: #27a644;
    --amber-500: #e8a33d;
    --amber-700: #c4882e;
    --red-500: #e5484d;
    --red-700: #e5484d;
    --blue-500: #5e6ad2;
    --blue-700: #4a54b0;

    /* 语义变量 */
    --bg-canvas: var(--neutral-black);
    --bg-surface-1: var(--neutral-1200);
    --bg-surface-2: var(--neutral-1000);
    --bg-input: var(--neutral-900);
    --bg-hover: var(--neutral-900);

    --txt-primary: var(--neutral-100);
    --txt-secondary: var(--neutral-500);
    --txt-tertiary: var(--neutral-600);
    --txt-muted: var(--neutral-600);
    --txt-on-color: #ffffff;
    --txt-accent: var(--brand-default);

    --border-subtle: var(--neutral-900);
    --border-strong: var(--neutral-800);
    --border-light: var(--neutral-1000);

    --brand-primary: var(--brand-default);
    --brand-hover: #828fff;
    --brand-soft: #ebedf5;

    --success: var(--green-700);
    --success-soft: rgba(39, 166, 68, 0.1);
    --warning: var(--amber-700);
    --warning-soft: rgba(232, 163, 61, 0.1);
    --danger: var(--red-700);
    --danger-soft: rgba(229, 72, 77, 0.1);
    --info: var(--blue-700);
    --info-soft: rgba(94, 106, 210, 0.1);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 28px -4px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 16px 48px -8px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 24px rgba(94, 106, 210, 0.15);

    --teal: #27a644;
    --gold: #e8a33d;
    --surface-line: var(--neutral-900);
    --primary-rgb: 94, 106, 210;
}

/* Linear + dark 主题模式（已经是暗色画布，只需微调） */
[data-style="linear"][data-theme="dark"] {
    --bg-canvas: var(--neutral-black);
    --bg-surface-1: var(--neutral-1200);
    --bg-surface-2: var(--neutral-1000);
    --txt-primary: #f7f8f8;
    --txt-secondary: #d0d6e0;
    --txt-muted: #8a8f98;
}

/* Linear 风格的 Bootstrap 组件覆盖 */
[data-style="linear"] .card,
[data-style="linear"] .card-header,
[data-style="linear"] .card-body,
[data-style="linear"] .modal-content,
[data-style="linear"] .dropdown-menu,
[data-style="linear"] .list-group-item,
[data-style="linear"] .form-control,
[data-style="linear"] .form-select {
    background-color: var(--bg-surface-1);
    color: var(--txt-primary);
    border-color: var(--border-subtle);
}

[data-style="linear"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--txt-primary);
    border-bottom-color: var(--border-subtle);
}
[data-style="linear"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bg-surface-2);
}
[data-style="linear"] .table-hover > tbody > tr:hover > * {
    background-color: var(--bg-hover);
}

[data-style="linear"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-style="linear"] .bg-light { background-color: var(--bg-surface-2) !important; }
[data-style="linear"] .bg-white { background-color: var(--bg-surface-1) !important; }
[data-style="linear"] .text-dark { color: var(--txt-primary) !important; }
[data-style="linear"] ::placeholder { color: var(--txt-muted); opacity: 0.6; }
[data-style="linear"] ::-webkit-scrollbar-thumb { background: var(--border-strong); }
[data-style="linear"] ::-webkit-scrollbar-track { background: var(--bg-canvas); }

/* Linear 风格的 sidebar 适配 */
[data-style="linear"] .sidebar {
    background: var(--bg-surface-1);
    border-right: 1px solid var(--border-subtle);
}
[data-style="linear"] .sidebar-link { color: var(--txt-secondary); }
[data-style="linear"] .sidebar-link.active { color: var(--brand-primary); background: var(--bg-surface-2); }
[data-style="linear"] .sidebar-link:hover { background: var(--bg-surface-2); }

/* Linear 风格的 topbar */
[data-style="linear"] .topbar { background: var(--bg-canvas); border-bottom: 1px solid var(--border-subtle); }
[data-style="linear"] .topbar-title { color: var(--txt-primary); }
[data-style="linear"] .topbar-subtitle { color: var(--txt-muted); }

/* Linear 风格的 module-hero */
[data-style="linear"] .module-hero {
    background: var(--bg-surface-1);
    border-color: var(--border-subtle);
}

/* Linear 风格的 page-content */
[data-style="linear"] .page-content { background: var(--bg-canvas); }
[data-style="linear"] .main-content { background: var(--bg-canvas); }

/* Linear focus ring */
[data-style="linear"] .form-control:focus,
[data-style="linear"] .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.25);
}

/* ==========================================
   动效组件 — 改写自 React Bits
   1. CountUp: 数字从0滚动到目标值
   2. FadeInList: 列表项依次淡入
   ========================================== */

/* CountUp — 数字滚动 */
.count-up {
    font-variant-numeric: tabular-nums;
}

/* FadeInList — 列表项依次淡入 */
.fade-in-list > * {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
}
.fade-in-list.in-view > * {
    animation: fadeInItem 0.5s var(--ease-out) forwards;
    animation-delay: calc(var(--fi, 0) * 0.08s);
}
@keyframes fadeInItem {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* 尊重用户偏好：减少动画 */
@media (prefers-reduced-motion: reduce) {
    .fade-in-list > * { opacity: 1; transform: none; animation: none; }
    .count-up { font-variant-numeric: tabular-nums; }
    .scroll-reveal { opacity: 1 !important; transform: none !important; }
    .tilt-card { transform: none !important; }
    .star-border-inner { animation: none !important; }
}

/* ==========================================
   3. Counter — 数字翻牌器（CountUp 进阶版）
   给元素加 class="counter-flip" + data-count="目标值"
   与 count-up 区别：带垂直滚动转盘效果
   ========================================== */

.counter-flip {
    display: inline-flex;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.counter-flip-digit {
    display: inline-block;
    position: relative;
    width: 0.62em;
    height: 1em;
    overflow: hidden;
    vertical-align: top;
}
.counter-flip-track {
    display: flex;
    flex-direction: column;
    transition: transform 1.2s var(--ease-out);
}
.counter-flip-track > span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    width: 0.62em;
}
.counter-flip-separator {
    display: inline-flex;
    align-items: center;
    height: 1em;
    padding: 0 0.02em;
}

/* ==========================================
   6. TiltedCard — 卡片随鼠标 3D 倾斜
   给卡片加 class="tilt-card" 即可
   可选 data-tilt-max="8"（最大倾斜角度）
   ========================================== */

.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    will-change: transform;
}
.tilt-card-content {
    transform: translateZ(30px);
    transition: transform 0.15s ease-out;
}
.tilt-card-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    background: radial-gradient(
        circle at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, 0.12) 0%,
        transparent 60%
    );
}
.tilt-card:hover .tilt-card-glare {
    opacity: 1;
}

/* ==========================================
   7. Magnet — 元素被鼠标吸引
   给元素加 class="magnet" 即可
   可选 data-magnet-strength="0.3"（0~1，越大吸引越强）
   ========================================== */

.magnet {
    transition: transform 0.2s var(--ease-out);
    will-change: transform;
}

/* ==========================================
   8. StarBorder — 星星沿边框流转
   给元素外面包 class="star-border" 容器即可
   ========================================== */

.star-border {
    position: relative;
    display: inline-flex;
    border-radius: var(--radius-sm, 8px);
    padding: 1.5px;
    overflow: hidden;
    background: var(--border-subtle, #e2e5eb);
}
.star-border-inner {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 100%;
    border-radius: calc(var(--radius-sm, 8px) - 1.5px);
    background: var(--bg-surface-1, #ffffff);
}
.star-border::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    background: radial-gradient(circle, var(--brand-primary, #c41e1e) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(2px);
    animation: starBorderMove 3s linear infinite;
}
@keyframes starBorderMove {
    0%   { top: 50%; left: -20px; }
    25%  { top: -10px; left: 50%; }
    50%  { top: 50%; left: calc(100% + 20px); }
    75%  { top: calc(100% + 10px); left: 50%; }
    100% { top: 50%; left: -20px; }
}

/* ==========================================
   动效组件全局：尊重 reduce-motion（已在上方合并）
   ========================================== */
/* Runtime environment identity */
.environment-banner {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10050;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm, 12px);
    padding: 6px 16px;
    color: var(--txt-primary);
    background: var(--warning-soft);
    border-bottom: 1px solid var(--warning);
    box-shadow: var(--shadow-sm);
    font-size: 0.78rem;
    line-height: 1.35;
}

.environment-banner__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xxs, 4px);
    color: var(--warning);
    font-weight: 800;
}

.environment-banner__meta {
    color: var(--txt-secondary);
    font-weight: 500;
}

body.testing-environment {
    padding-top: 34px;
}

.testing-environment .app-layout {
    min-height: calc(100vh - 34px);
}

.testing-environment .sidebar {
    top: 34px;
}

@media (max-width: 575.98px) {
    .environment-banner {
        justify-content: flex-start;
        gap: var(--space-xs, 8px);
        padding-inline: 12px;
        font-size: 0.72rem;
    }

    .environment-banner__meta {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}