/* ============================================
   直播数据 · shadcn 2025 风格设计系统
   - sidebar 独立背景色 (light=muted, dark=深色)
   - 主区域冷灰画布 + 白色卡片 + 细边框/轻阴影
   - 微灰 border + 冷灰 muted 面, 不是死白
   - 字体: system font + Geist fallback
   - 全部走 CSS 变量, 暗色模式自动切换
   ============================================ */

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Geist", sans-serif;
    background: var(--background);
    color: var(--foreground);
    font-size: 14px;
    line-height: 1.5;
    transition: background-color 0.2s, color 0.2s;
    font-variant-numeric: tabular-nums;
}
button { font-family: inherit; cursor: pointer; }

/* ===== Design Tokens (shadcn 2025 风格) ===== */
:root {
    /* 主区域背景: 低饱和冷灰画布, 避免纯白发空 */
    --background: oklch(0.973 0.006 247);
    --foreground: oklch(0.145 0 0);

    /* 卡片: 轻微高于画布, 靠边框和柔和阴影形成层次 */
    --card: oklch(0.995 0.002 247);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(0.998 0.001 247);
    --popover-foreground: oklch(0.145 0 0);

    /* Sidebar 独立颜色 */
    --sidebar: oklch(0.962 0.008 247);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-border: oklch(0.895 0.01 247);
    --sidebar-accent: oklch(0.935 0.012 247);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-ring: oklch(0.708 0 0);

    /* 主区域交互色 */
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.948 0.008 247);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.945 0.008 247);
    --muted-foreground: oklch(0.47 0.012 247);
    --accent: oklch(0.93 0.012 247);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);

    --border: oklch(0.885 0.01 247);
    --input: oklch(0.885 0.01 247);
    --ring: oklch(0.708 0 0);

    /* 状态色 */
    --success: oklch(0.7 0.17 162);
    --warning: oklch(0.75 0.18 70);
    --info: oklch(0.65 0.20 220);

    /* shadcn 2025 chart 调色板 (5 色 + 扩展) */
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --chart-6: oklch(0.65 0.20 200);
    --chart-7: oklch(0.70 0.15 130);
    --chart-8: oklch(0.60 0.20 350);

    /* 尺寸 */
    --sidebar-w: 280px;
    --sidebar-w-collapsed: 60px;
    --topbar-h: 60px;
    --radius: 0.625rem;  /* shadcn 2025 默认 */
    --radius-sm: calc(var(--radius) * 0.6);
    --radius-md: calc(var(--radius) * 0.8);
    --radius-lg: var(--radius);
    --shadow-sm: 0 1px 2px 0 oklch(0.145 0 0 / 0.05);
    --shadow-md: 0 10px 24px -18px oklch(0.145 0 0 / 0.28), 0 1px 2px oklch(0.145 0 0 / 0.05);
    --shadow-card: 0 12px 32px -24px oklch(0.145 0 0 / 0.34), 0 1px 2px oklch(0.145 0 0 / 0.06);
}

[data-theme="dark"] {
    /* 主区域: 近黑 (oklch 0.145) */
    --background: oklch(0.155 0.006 247);
    --foreground: oklch(0.985 0 0);

    /* 卡片: 比主背景略亮, 保持 dashboard 层次 */
    --card: oklch(0.19 0.008 247);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0.008 247);
    --popover-foreground: oklch(0.985 0 0);

    /* Sidebar: 暗模式用更深的色, 跟主区域形成层次 */
    --sidebar: oklch(0.175 0.008 247);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 9%);
    --sidebar-accent: oklch(0.245 0.01 247);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-ring: oklch(0.556 0 0);

    /* 主区域交互色 (暗模式翻转) */
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.245 0.01 247);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.245 0.01 247);
    --muted-foreground: oklch(0.72 0.012 247);
    --accent: oklch(0.275 0.012 247);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);

    /* Border 暗色模式: 微亮 */
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --shadow-card: 0 12px 32px -24px oklch(0 0 0 / 0.65), 0 1px 2px oklch(0 0 0 / 0.35);
}

/* ===== 侧边栏 (shadcn 2025: 独立背景色) ===== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--sidebar) 86%, var(--card)) 0%, var(--sidebar) 100%);
    color: var(--sidebar-foreground);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: width 0.2s, transform 0.2s;
}
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar .logo-text,
body.sidebar-collapsed .sidebar .nav-section > *:not(.nav-section-header),
body.sidebar-collapsed .sidebar .status-info,
body.sidebar-collapsed .sidebar .sidebar-footer { display: none; }
body.sidebar-collapsed .sidebar .nav-section-header { justify-content: center; padding: 8px; }
body.sidebar-collapsed .sidebar .nav-section-header i { margin: 0; }

.sidebar-header {
    height: var(--topbar-h);
    padding: 0 18px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--sidebar-border);
}
.logo { display: flex; align-items: center; gap: 11px; min-width: 0; }
.logo-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary), oklch(0.36 0.07 247));
    color: var(--primary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 18px -12px oklch(0.145 0 0 / 0.5);
}
.logo-mark i { width: 18px; height: 18px; }
.logo-text { min-width: 0; }
.logo-title { font-size: 15px; font-weight: 600; color: var(--foreground); }
.logo-sub { font-size: 11px; color: var(--muted-foreground); }

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px 10px 12px;
    display: flex;
    flex-direction: column;
    /* 3 大板块紧凑排列: 状态卡 → 线索流转 → 直播运营 → 门店对比 */
    gap: 6px;
}

/* ===== Sidebar 3 大板块 (线索流转 可折叠 / 直播运营 / 门店对比) ===== */
/* 3 大板块直接子元素紧凑: 状态卡 → 线索流转 (含子项) → 直播运营 → 门店对比, 紧贴在 sidebar-content 顶部 */
/* footer 始终贴 sidebar 底部, 空白只出现在 3 大板块下方 (不会撑开 3 大板块间距) */
.sidebar-content > .status-card { margin-bottom: 8px; }
.sidebar-content > .sidebar-section { margin-bottom: 8px; }
.sidebar-content > .sidebar-section-link--top { margin: 0 0 8px 0; }

/* 3 个板块的 button 共用一套尺寸, 保证 UI 一致 (2026-08-11: 合并 toggle 进 button 后) */
/* 2026-08-11 v3: 颜色更浅 (L 0.86) + 玻璃感更强 (blur 24, alpha 0.42) + 4 色停强渐变 (蓝→紫→品红→粉) */
.sidebar-section-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    width: 100%;
    padding: 9px 12px;
    /* 4 色停强渐变 (浅天蓝 → 浅紫 → 紫粉 → 浅粉, 色域更宽) */
    background: linear-gradient(
        135deg,
        oklch(0.86 0.18 260 / 0.42) 0%,
        oklch(0.83 0.22 290 / 0.42) 33%,
        oklch(0.81 0.24 320 / 0.42) 66%,
        oklch(0.79 0.22 345 / 0.42) 100%
    );
    /* 玻璃感: 模糊 + 饱和度增强 (让 sidebar 浅色背景明显透出) */
    backdrop-filter: blur(24px) saturate(220%);
    -webkit-backdrop-filter: blur(24px) saturate(220%);
    border: 1px solid oklch(1 0 0 / 0.55);
    color: oklch(0.28 0.10 290);  /* 深蓝紫文字 */
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-md);
    /* 3D 凸起: 顶部高光 (强) + 底部暗边 + 彩色软投影 (蓝紫调) */
    box-shadow:
        inset 0 1px 0 oklch(1 0 0 / 0.70),         /* 顶部高光 (强, 玻璃感) */
        inset 0 -1px 0 oklch(0 0 0 / 0.08),         /* 底部暗边 (轻) */
        0 6px 18px -4px oklch(0.50 0.25 290 / 0.40), /* 彩色软投影 (蓝紫调) */
        0 1px 2px oklch(0.20 0 0 / 0.06);            /* 近阴影 */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    position: relative;
}
.sidebar-section-link > i { width: 17px; height: 17px; flex-shrink: 0; color: oklch(0.32 0.12 285); }
.sidebar-section-link .section-label { flex: 1; color: oklch(0.28 0.10 290); }
.sidebar-section-link:hover {
    background: linear-gradient(
        135deg,
        oklch(0.88 0.20 258 / 0.58) 0%,
        oklch(0.85 0.24 288 / 0.58) 33%,
        oklch(0.83 0.26 318 / 0.58) 66%,
        oklch(0.81 0.24 343 / 0.58) 100%
    );
    box-shadow:
        inset 0 1px 0 oklch(1 0 0 / 0.78),
        inset 0 -1px 0 oklch(0 0 0 / 0.12),
        0 10px 24px -6px oklch(0.48 0.26 290 / 0.50),
        0 2px 4px oklch(0.20 0 0 / 0.10);
    transform: translateY(-1px);
}
/* 直播运营 / 门店对比 跟线索流转 button 一样的尺寸 + 样式 (统一) */
.sidebar-section-link--top {
    margin: 0;
    /* padding / min-height / width 都从 .sidebar-section-link 继承 */
}
/* 当前 page 高亮: 保持浅色 + 渐变更鲜明 (alpha 0.82) + 蓝色外环 + 强彩色投影 */
.sidebar-section-link.active {
    background: linear-gradient(
        135deg,
        oklch(0.84 0.24 258 / 0.82) 0%,
        oklch(0.80 0.28 288 / 0.82) 33%,
        oklch(0.76 0.30 318 / 0.82) 66%,
        oklch(0.72 0.28 343 / 0.82) 100%
    );
    box-shadow:
        inset 0 1px 0 oklch(1 0 0 / 0.75),
        inset 0 -1px 0 oklch(0 0 0 / 0.18),
        inset 0 0 0 1px oklch(1 0 0 / 0.50),
        0 8px 28px -4px oklch(0.45 0.32 290 / 0.60),
        0 0 0 2px oklch(0.55 0.30 280 / 0.60);
    font-weight: 600;
    color: oklch(0.20 0.10 290);
}
.sidebar-section-link.active::before { display: none; }
.sidebar-section-link.active > i { color: oklch(0.22 0.10 290); }
/* 折叠/展开 chevron 区域 (嵌在 button 内部) */
.section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    color: oklch(0.32 0.10 290 / 0.75);
    transition-property: background-color, color;
    transition-duration: 150ms;
    cursor: pointer;
}
.section-toggle:hover {
    background: oklch(1 0 0 / 0.35);
    color: oklch(0.22 0.10 290);
}
.section-toggle i {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    color: oklch(0.32 0.10 290 / 0.75);
}
/* collapsed 状态: chevron 旋转 180, content 隐藏 */
.sidebar-section[data-expanded="false"] .section-chevron {
    transform: rotate(-90deg);
}
.sidebar-section[data-expanded="false"] .sidebar-section-content {
    display: none;
}

/* 状态卡 (用 sidebar-accent 跟 sidebar 同色微差异) */
.status-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    background: color-mix(in oklch, var(--sidebar-accent) 58%, transparent);
    border-radius: var(--radius-md);
    border: 1px solid var(--sidebar-border);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.28);
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted-foreground);
    flex-shrink: 0;
}
.status-dot.ok { background: var(--success); box-shadow: 0 0 0 3px oklch(0.7 0.17 162 / 0.15); }
.status-dot.loading { background: var(--info); animation: pulse 1.5s infinite; }
.status-dot.error { background: var(--destructive); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.status-info { min-width: 0; flex: 1; }
.status-label { font-size: 12px; font-weight: 600; color: var(--sidebar-foreground); }
.status-meta { font-size: 11px; color: var(--muted-foreground); }

/* nav section */
.sidebar-section-content {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 8px 0 7px 0;
}
.nav-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 2px 12px 2px;
    border-bottom: 1px solid color-mix(in oklch, var(--sidebar-border) 72%, transparent);
}
.nav-section:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.nav-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 22px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-foreground);
    letter-spacing: 0;
    padding: 0 2px;
}
.nav-section-header i { width: 15px; height: 15px; }
.nav-section-header span { flex: 1; }
.btn-link {
    background: none;
    border: none;
    font-size: 11px;
    color: var(--muted-foreground);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    min-height: 24px;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    transition-property: background-color, color;
    transition-duration: 150ms;
    cursor: pointer;
}
.btn-link:hover { color: var(--sidebar-foreground); background: var(--sidebar-accent); }

/* 月份 chips (sidebar 内用 sidebar-accent) */
.chip-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chip {
    min-height: 30px;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--sidebar-border);
    background: transparent;  /* 跟 sidebar 同色 */
    color: var(--sidebar-foreground);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 150ms;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.chip:hover { background: color-mix(in oklch, var(--sidebar-accent) 72%, var(--card)); }
.chip.active {
    background: var(--sidebar-primary);
    color: var(--sidebar-primary-foreground);
    border-color: var(--sidebar-primary);
    box-shadow: 0 1px 2px oklch(0.145 0 0 / 0.08);
}
.chip-count { font-size: 10px; opacity: 0.68; }

/* 店端列表 (scrollable) */
.store-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 2px;
}
.store-item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    transition-property: background-color, color;
    transition-duration: 150ms;
}
.store-item:hover { background: color-mix(in oklch, var(--sidebar-accent) 72%, var(--card)); }
.store-item:has(input:checked) {
    background: color-mix(in oklch, var(--sidebar-accent) 64%, transparent);
    color: var(--sidebar-accent-foreground);
}
.store-item input { margin: 0; cursor: pointer; }
.store-item .store-name {
    min-width: 0;
    color: var(--sidebar-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.store-item .store-count {
    min-width: 36px;
    text-align: right;
    font-size: 11px;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

/* 自定义 checkbox */
.store-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    accent-color: var(--primary);
}

/* 分析模块 (module list) - sidebar 右侧勾选区 */
.module-list { display: flex; flex-direction: column; gap: 3px; }
.module-item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    transition-property: background-color, color;
    transition-duration: 150ms;
    user-select: none;
}
.module-item:hover { background: color-mix(in oklch, var(--sidebar-accent) 72%, var(--card)); }
.module-item:has(input:checked) {
    background: color-mix(in oklch, var(--sidebar-accent) 58%, transparent);
}
.module-item input { margin: 0; cursor: pointer; width: 15px; height: 15px; accent-color: var(--primary); }
.module-item .module-name {
    min-width: 0;
    color: var(--sidebar-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.sidebar-collapsed .module-list { display: none; }

/* 模块隐藏 */
.module-section[hidden] { display: none !important; }

/* 联系状态 KPI 行 (5 个并排) */
.cs-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.cs-kpi {
    padding: 10px 12px;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    border-left: 3px solid var(--border);
}
.cs-kpi-label { font-size: 11px; color: var(--muted-foreground); margin-bottom: 4px; }
.cs-kpi-value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--card-foreground); }
.cs-state-intent { border-left-color: oklch(0.70 0.22 258); }      /* 蓝 */
.cs-state-no-intent { border-left-color: oklch(0.65 0.25 290); }   /* 紫 */
.cs-state-unknown { border-left-color: oklch(0.65 0.25 320); }      /* 紫粉 */
.cs-state-no-contact { border-left-color: oklch(0.70 0.20 345); }   /* 粉 */

/* 状态/比例 badge (rate-intent / rate-bad 等) */
.rate-intent { color: oklch(0.55 0.17 162); font-weight: 600; }
.rate-no-intent { color: oklch(0.60 0.18 70); font-weight: 600; }
.rate-unknown { color: oklch(0.55 0.20 200); font-weight: 600; }
.rate-no-contact { color: oklch(0.55 0.22 16); font-weight: 600; }
.rate-ok { color: var(--success); font-weight: 600; }
.rate-warn { color: var(--warning); font-weight: 600; }
.rate-bad { color: var(--destructive); font-weight: 600; }
[data-theme="dark"] .rate-intent { color: oklch(0.78 0.17 162); }
[data-theme="dark"] .rate-no-intent { color: oklch(0.82 0.18 70); }
[data-theme="dark"] .rate-unknown { color: oklch(0.78 0.20 200); }
[data-theme="dark"] .rate-no-contact { color: oklch(0.78 0.22 16); }

/* 主播线索明细 tfoot "未复核" 行 (2026-08-10 user 红框要求, v2 改青色跟 rate-unknown 一致) */
/* 2026-08-10: .anchor-pending-tfoot 已删 (user 要求), 类不再使用 */

/* sidebar footer: 始终贴底 (用 margin-top: auto 在 sidebar-content 之外撑开) */
.sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--sidebar-border);
    margin-top: auto;
    background: color-mix(in oklch, var(--sidebar) 88%, var(--card));
}
.sidebar-footer .btn { width: 100%; justify-content: center; min-height: 38px; }

/* ===== Topbar ===== */
.topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    height: var(--topbar-h);
    background: color-mix(in oklch, var(--background) 82%, var(--card));
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 40;
    transition: left 0.2s;
}
/* shadcn 2025: topbar 底部加彩色渐变 accent line, 让顶部有视觉锚点 */
.topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--chart-1) 0%,
        var(--chart-2) 25%,
        var(--chart-3) 50%,
        var(--chart-4) 75%,
        var(--chart-5) 100%);
    opacity: 0.6;
}
body.sidebar-collapsed .topbar { left: var(--sidebar-w-collapsed); }

.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.page-title { font-size: 17px; font-weight: 600; color: var(--foreground); }
.page-sub { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }

.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition-property: background-color, color, transform;
    transition-duration: 150ms;
}
.btn-icon:hover { background: var(--accent); color: var(--foreground); }
.btn-icon:active { transform: scale(0.96); }
.btn-icon i { width: 16px; height: 16px; }

/* 按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    min-height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 500;
    transition-property: background-color, border-color, color, box-shadow, transform, opacity;
    transition-duration: 150ms;
    background: transparent;
    color: var(--foreground);
}
.btn i { width: 14px; height: 14px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-outline { border-color: var(--border); background: var(--card); }
.btn-outline:hover { background: var(--accent); box-shadow: var(--shadow-sm); }
.btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.btn-primary:hover { opacity: 0.9; }
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* filter pill */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}
.filter-pill i { width: 12px; height: 12px; }

/* ===== Main ===== */
.main {
    margin-left: var(--sidebar-w);
    margin-top: var(--topbar-h);
    min-height: calc(100vh - var(--topbar-h));
    transition: margin-left 0.2s;
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--background) 85%, var(--card)) 0, var(--background) 260px);
}
body.sidebar-collapsed .main { margin-left: var(--sidebar-w-collapsed); }

.main-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ===== Card (shadcn-style) ===== */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.card:hover {
    border-color: color-mix(in oklch, var(--border) 68%, var(--ring));
}
.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.card-title { font-size: 16px; font-weight: 600; color: var(--card-foreground); text-wrap: balance; }
.card-description { font-size: 13px; color: var(--muted-foreground); margin-top: 2px; text-wrap: pretty; }
.card-icon { width: 16px; height: 16px; color: var(--muted-foreground); }
.card-footer { font-size: 12px; color: var(--muted-foreground); }

/* ===== KPI Grid ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}
.kpi-card { padding: 16px; min-width: 0; }
.kpi-value { font-size: 26px; font-weight: 600; color: var(--card-foreground); font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi-value-sm { font-size: 22px; }

/* shadcn 2025: KPI icon 用 chart palette 颜色微底, 增加视觉层次 */
/* 2026-08-11: 1-4 卡对齐 sidebar 3D 玻璃感 GRADIENT_4 (蓝/紫/紫粉/粉) */
.kpi-card .card-icon {
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 6px;
    background: oklch(0.70 0.22 258 / 0.1);
    color: oklch(0.55 0.22 258);
}
.kpi-card:nth-child(2) .card-icon { background: oklch(0.65 0.25 290 / 0.1); color: oklch(0.50 0.25 290); }
.kpi-card:nth-child(3) .card-icon { background: oklch(0.65 0.25 320 / 0.1); color: oklch(0.50 0.25 320); }
.kpi-card:nth-child(4) .card-icon { background: oklch(0.70 0.20 345 / 0.1); color: oklch(0.55 0.20 345); }
.kpi-card:nth-child(5) .card-icon { background: oklch(0.627 0.265 303.9 / 0.1); color: var(--chart-4); }
.kpi-card:nth-child(6) .card-icon { background: oklch(0.65 0.20 200 / 0.1); color: var(--chart-6); }
.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--destructive); }

/* ===== Chart Grid ===== */
.chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    /* 2026-08-12 user 拍板: 2 卡片等高 (stretch), 日维度趋势 card 加到跟消耗进度 card 一样大, chart 容器自适应填满 card */
}
.chart-card {
    padding: 16px 20px 20px;
    display: flex;  /* 2026-08-12: 让 .chart 用 flex: 1 填满 card 剩余高度 */
    flex-direction: column;
}
/* 2026-08-12: 只给日维度趋势 chart-card 加 min-height, 防止 store-cost card API 加载前高度小, 加载后被拉高触发 ECharts resize "跳"
   用 :has() 精确选"含 #trend-daily 的 chart-card", 不影响其他 chart-card (联系状态/转化漏斗/Top 排行榜) */
.chart-card:has(#trend-daily) {
    min-height: 600px;
}
.chart-card .card-header {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;  /* header 不缩, 让 chart 区域拿全部剩余空间 */
}
.chart-card .card-header {
    padding-left: 4px;
}
/* shadcn 2025: 图表卡左侧 3px 彩色 accent, 让卡片有视觉锚点 */
.chart-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    background: var(--chart-1);
    border-radius: 0 2px 2px 0;
}
.chart-grid > .chart-card:nth-child(1)::before { background: var(--chart-1); }
.chart-grid > .chart-card:nth-child(2)::before { background: var(--chart-3); }
.chart-grid > .chart-card:nth-child(3)::before { background: var(--chart-2); }
.chart-grid > .chart-card:nth-child(4)::before { background: var(--chart-4); }
/* 2026-08-10: 转化漏斗是核心图, 满宽显示. 月度趋势删了, 漏斗吸收展示 */
.chart-grid > .chart-card-wide {
    grid-column: 1 / -1;
}
.chart-card-wide .chart { height: 380px; }
.chart {
    width: 100%;
    height: 320px;  /* 2026-08-12 撤回 flex: 1: 全局 flex 让 inline height (e.g. #review-progress-chart 360px) 被 flex 算法覆盖, 实际渲染 min-height 320px, 跟 inline 不一致 → ECharts resize 触发"闪烁". 改回固定 320px */
    min-height: 320px;
}
/* 2026-08-12: 只给日维度趋势 chart 加 flex: 1, 跟消耗进度 card 等高 (跟之前 .chart flex: 1 等价, 但只影响 #trend-daily) */
#trend-daily {
    flex: 1;
    height: auto;
    min-height: 600px;
}
.chart-tall { height: 400px; }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 2px; background: var(--muted); border-radius: 6px; padding: 2px; }
.tab {
    padding: 4px 10px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 500;
    transition-property: background-color, color, box-shadow;
    transition-duration: 150ms;
}
.tab:hover { color: var(--foreground); }
.tab-active { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }

/* ===== Table ===== */
.table-wrapper { overflow-x: auto; }
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;  /* 固定列宽, 防止内容漂移 */
}
.data-table thead th {
    text-align: center;  /* 表头居中 */
    padding: 12px;
    font-weight: 600;
    font-size: 12px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklch, var(--muted) 82%, var(--card));
    border-right: 1px solid var(--border);
    white-space: nowrap;
}
.data-table thead th:last-child { border-right: none; }
.data-table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
    text-align: center;  /* 内容居中 */
    border-right: 1px solid var(--border);
    word-break: break-word;
}
.data-table tbody td:last-child { border-right: none; }
.data-table tbody tr:hover { background: color-mix(in oklch, var(--accent) 68%, transparent); }
.data-table .num { text-align: center; font-variant-numeric: tabular-nums; font-family: "SF Mono", Consolas, monospace; }
.data-table tr.anomaly { background: rgba(239, 68, 68, 0.05); }
.data-table td.anomaly-cell { color: var(--destructive); font-weight: 600; }
[data-theme="dark"] .data-table tr.anomaly { background: rgba(239, 68, 68, 0.1); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ===== Completeness ===== */
.completeness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.completeness-cell {
    padding: 10px 12px;
    background: var(--muted);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.completeness-name { font-size: 12px; color: var(--muted-foreground); margin-bottom: 4px; }
.completeness-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.completeness-bar-fill { height: 100%; }
.grow-bar-fill {
    transform-origin: left center;
    animation: grow-bar 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
/* 2026-08-11: 字段完整性 3 段对齐 sidebar 3D 玻璃感 GRADIENT_4
   - bad (>5% 漏填): 粉 345 (警示最强, 替代原 --destructive 红)
   - warn (1-5%): 紫粉 320 (替代原 --warning 黄)
   - ok (<1%): 蓝 258 (替代原 --success 绿, OK 状态) */
.completeness-bar-fill.bad { background: oklch(0.70 0.20 345); }
.completeness-bar-fill.warn { background: oklch(0.65 0.25 320); }
.completeness-bar-fill.ok { background: oklch(0.70 0.22 258); }
.completeness-pct { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.completeness-pct.bad { color: oklch(0.55 0.20 345); }
.completeness-pct.warn { color: oklch(0.50 0.25 320); }
.completeness-pct.ok { color: oklch(0.50 0.22 258); }

/* ===== Toast ===== */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    padding: 10px 16px;
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-size: 13px;
    min-width: 240px;
    animation: toast-in 0.2s ease-out;
}
.toast.error { border-left: 3px solid var(--destructive); }
.toast.success { border-left: 3px solid var(--success); }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== Skeleton ===== */
.skeleton {
    background: linear-gradient(90deg, var(--muted) 0%, var(--accent) 50%, var(--muted) 100%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
    border-radius: 6px;
}
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Daily Summary (日线索详情) ===== */
.daily-summary {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 12px 16px;
    background: var(--muted);
    border-radius: var(--radius);
    margin-bottom: 4px;
}
.daily-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.daily-summary-label {
    font-size: 11px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.daily-summary-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
#daily-anchor-table {
    min-height: var(--daily-anchor-table-min-h, 247px);
}

/* ===== Date Picker (shadcn-style) ===== */
.range-picker {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--card) 88%, var(--muted));
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.42), var(--shadow-sm);
}
.range-picker-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
}
.range-picker-main > i {
    width: 15px;
    height: 15px;
    color: var(--muted-foreground);
}
.range-picker label {
    display: grid;
    gap: 1px;
}
.range-picker label span {
    font-size: 10px;
    line-height: 1;
    color: var(--muted-foreground);
}
.range-picker input {
    width: 112px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    color: var(--foreground);
    outline: none;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.range-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
}
.range-presets {
    display: flex;
    align-items: center;
    gap: 4px;
}
.range-presets button {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 500;
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 150ms;
}
.range-presets button:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}
.range-presets button.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 1px 2px oklch(0.145 0 0 / 0.08);
}
.range-calendar-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 640px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: 0 22px 70px -36px oklch(0.145 0 0 / 0.55), 0 8px 24px -18px oklch(0.145 0 0 / 0.25);
    z-index: 90;
}
.range-calendar-head,
.range-calendar-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.range-calendar-title {
    font-size: 14px;
    font-weight: 600;
}
.range-calendar-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}
.range-calendar-actions {
    display: flex;
    gap: 6px;
}
.range-calendar-actions button,
.range-calendar-foot button {
    min-width: 34px;
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--foreground);
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 150ms;
}
.range-calendar-actions button:hover,
.range-calendar-foot button:hover {
    background: var(--accent);
    border-color: var(--ring);
}
.range-calendar-actions i {
    width: 15px;
    height: 15px;
}
.range-calendar-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.calendar-month {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--card) 88%, var(--muted));
}
.calendar-month-title {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}
.calendar-weekdays span {
    height: 22px;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 11px;
    line-height: 22px;
}
.calendar-day {
    position: relative;
    min-width: 0;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--foreground);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 150ms;
}
.calendar-day:hover {
    background: var(--accent);
}
.calendar-day.outside {
    color: transparent;
    pointer-events: none;
}
.calendar-day.today {
    border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border));
}
.calendar-day.in-range {
    background: color-mix(in oklch, var(--chart-1) 12%, transparent);
    color: var(--foreground);
}
.calendar-day.range-start,
.calendar-day.range-end {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 1px 2px oklch(0.145 0 0 / 0.08);
}
.range-calendar-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.range-calendar-foot span {
    font-size: 12px;
    color: var(--muted-foreground);
}
.range-calendar-foot button {
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
}
.date-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    transition: border-color 0.15s;
}
.date-picker:hover { border-color: var(--ring); }
.date-picker input[type="date"] {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--foreground);
    outline: none;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.date-picker input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}
.date-picker-label {
    font-size: 12px;
    color: var(--muted-foreground);
    font-weight: 500;
}

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .chart-grid { grid-template-columns: 1fr; }
    .range-picker { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 768px) {
    :root { --sidebar-w: 240px; }
    body:not(.sidebar-collapsed) .sidebar { transform: translateX(0); }
    .sidebar { transform: translateX(-100%); }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .topbar { left: 0; }
    .main { margin-left: 0; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .kpi-grid { grid-template-columns: 1fr; }
}

/* ===== 门店对比页面 (2026-08-10) ===== */

/* sidebar 内的"门店对比"按钮 (在分析模块下面) */
.nav-page-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--card-foreground);
    font-size: 13px;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.nav-page-link:hover {
    background: var(--accent);
    border-color: var(--ring);
}
.nav-page-link.active {
    background: var(--accent);
    border-color: var(--chart-1);
    color: var(--chart-1);
    font-weight: 500;
}
.nav-page-link i { width: 16px; height: 16px; flex-shrink: 0; }
.nav-page-link > span:nth-child(2) { flex: 1; }
.nav-page-hint {
    font-size: 10px;
    color: var(--muted-foreground);
    margin-left: auto;
}

/* 页面 header */
.comparison-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.comparison-month-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--card-foreground);
}

/* 左右对比 grid */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.comparison-col {
    min-width: 0;  /* 防止 grid item 内 table/donut 撑破 */
}
.comparison-col-header {
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
}
.comparison-store-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--card-foreground);
}
.comparison-store-sub {
    font-size: 11px;
    color: var(--muted-foreground);
    margin-top: 2px;
}

/* KPI 紧凑版 (每个店 6 个 KPI 用 3 列 × 2 行) */
.kpi-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.kpi-grid-compact .kpi-card {
    padding: 10px 12px;
}
.kpi-grid-compact .kpi-value {
    font-size: 18px;
    margin-top: 2px;
}
.kpi-grid-compact .card-description {
    font-size: 11px;
}
/* 2026-08-11: 6 KPI accent 对齐 sidebar 3D 玻璃感 GRADIENT_4 (6 循环)
   - c1 蓝 (总线索)
   - c2 紫 (有效线索)
   - c3 紫粉 (有效率)
   - c4 粉 (消耗)
   - c5 蓝 (CPL, 数学上跟总线索相关, 同色)
   - c6 紫 (CPQL, 数学上跟有效线索相关, 同色) */
.kpi-c1 { border-top: 2px solid oklch(0.70 0.22 258); }
.kpi-c2 { border-top: 2px solid oklch(0.65 0.25 290); }
.kpi-c3 { border-top: 2px solid oklch(0.65 0.25 320); }
.kpi-c4 { border-top: 2px solid oklch(0.70 0.20 345); }
.kpi-c5 { border-top: 2px solid oklch(0.70 0.22 258); }
.kpi-c6 { border-top: 2px solid oklch(0.65 0.25 290); }

/* ===== 消耗进度 widget (2026-08-11) ===== */
/* 渐变色: 蓝(260) → 紫(305) → 粉(335), 跟 sidebar 3D 玻璃感 button 同一色系 */
.spend-progress-wrap {
    padding: 4px 4px 8px;  /* 2026-08-12 立刻回滚: 不能动整体缩小, 会拉短同行 .chart-grid 内的日维度趋势 */
    display: flex;
    flex-direction: column;
    gap: 16px;  /* 2026-08-12 立刻回滚 */
}
.spend-progress-empty {
    color: var(--muted-foreground);
    padding: 24px 0;
    text-align: center;
    font-size: 13px;
}

/* 2026-08-17 加: 月目标行 (可点击编辑预算) */
.spend-progress-target-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 12px;
    background: var(--muted);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.spend-progress-target-row .target-label {
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 500;
}
.spend-progress-target-row .target-amount {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
    transition: color 0.15s, background 0.15s;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: default;
}
.spend-progress-target-row .target-amount.is-editable {
    cursor: pointer;
}
.spend-progress-target-row .target-amount.is-editable:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.spend-progress-target-row .target-amount.is-editable:active {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.spend-progress-target-row .target-amount.is-locked {
    color: var(--muted-foreground);
    cursor: not-allowed;
}
.spend-progress-target-row .edit-hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--muted-foreground);
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.spend-progress-target-row .target-amount.is-editable:hover .edit-hint {
    opacity: 0.8;
}
.spend-target-input {
    width: 160px;
    padding: 4px 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    background: var(--background);
    border: 1.5px solid var(--primary);
    border-radius: 4px;
    outline: none;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}
.spend-target-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
/* 总进度: 顶部 1 个大进度条 */
.spend-progress-total {
    display: flex;
    flex-direction: column;
    gap: 6px;  /* 2026-08-12 立刻回滚 */
}
.spend-progress-total-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;  /* 2026-08-12 立刻回滚 */
    color: var(--muted-foreground);
}
.spend-progress-total-label .total-amount {
    font-size: 18px;  /* 2026-08-12 立刻回滚 */
    font-weight: 700;
    color: var(--card-foreground);
    font-variant-numeric: tabular-nums;
}
.spend-progress-total-label .total-pct {
    font-size: 14px;  /* 2026-08-12 立刻回滚 */
    font-weight: 600;
    color: oklch(0.55 0.20 295);
    font-variant-numeric: tabular-nums;
}
.spend-progress-bar {
    height: 16px;
    background: color-mix(in oklch, var(--muted) 70%, var(--card));
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.spend-progress-bar-fill {
    height: 100%;
    /* 4 色停强渐变, 跟 sidebar button 同款 */
    background: linear-gradient(90deg,
        oklch(0.72 0.18 260) 0%,
        oklch(0.68 0.22 290) 33%,
        oklch(0.65 0.24 320) 66%,
        oklch(0.62 0.22 345) 100%
    );
    border-radius: 999px;
    box-shadow: 0 0 12px oklch(0.55 0.22 295 / 0.30);
}
.smooth-spend-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: width;
}
.spend-progress-bar .smooth-spend-fill {
    background: linear-gradient(90deg,
        oklch(0.72 0.18 260) 0%,
        oklch(0.68 0.22 290) 33%,
        oklch(0.65 0.24 320) 66%,
        oklch(0.62 0.22 345) 100%
    );
    box-shadow: 0 0 12px oklch(0.55 0.22 295 / 0.30);
}
.spend-progress-store-bar .smooth-spend-fill {
    background: linear-gradient(90deg,
        oklch(0.78 0.16 260) 0%,
        oklch(0.74 0.20 290) 50%,
        oklch(0.70 0.22 330) 100%
    );
}
/* 各店进度条列表 */
.spend-progress-stores {
    display: flex;
    flex-direction: column;
    gap: 10px;  /* 2026-08-12 立刻回滚 */
}
/* KPI 行: 剩余预算 / 日均 / 预计月底 (3 列) */
.spend-progress-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px 0;  /* 2026-08-12 立刻回滚 */
    border-top: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
}
.spend-progress-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px;
}
.spend-progress-kpi .kpi-label {
    font-size: 11.5px;  /* 2026-08-12 立刻回滚 */
    color: var(--muted-foreground);
}
.spend-progress-kpi .kpi-value {
    font-size: 15px;  /* 2026-08-12 立刻回滚 */
    font-weight: 600;
    color: var(--card-foreground);
    font-variant-numeric: tabular-nums;
}
.spend-progress-kpi .kpi-sub {
    font-size: 11px;  /* 2026-08-12 立刻回滚 */
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}
/* 各店 TOP 账号小行 */
.spend-progress-store-top {
    font-size: 11px;  /* 2026-08-12 立刻回滚 */
    color: var(--muted-foreground);
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;  /* 2026-08-12 立刻回滚 */
    line-height: 1.5;  /* 2026-08-12 立刻回滚 */
}
.spend-progress-store-top .top-account {
    color: oklch(0.50 0.15 290);
    font-variant-numeric: tabular-nums;
}
.spend-progress-store {
    display: flex;
    flex-direction: column;
    gap: 4px;  /* 2026-08-12 立刻回滚 */
}
/* 2026-08-12 新加: 各店 V27 / V23 mini 进度条 (横排 2 列) */
.spend-progress-store-families {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-top: 2px;
}
.store-family-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.store-family-mini-name {
    font-size: 11px;  /* 2026-08-12 跟 TOP 账号统一字号, 不缩小 */
    color: var(--muted-foreground);
    font-weight: 500;
}
.store-family-mini-amount {
    font-size: 11px;  /* 2026-08-12 跟 TOP 账号统一字号 */
    color: var(--card-foreground);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.store-family-mini-bar {
    height: 6px;  /* 比主进度条细, 不抢眼, 但仍能看到占比 */
    background: color-mix(in oklch, var(--muted) 70%, var(--card));
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.store-family-mini-bar-fill {
    height: 100%;
    border-radius: 999px;
}
.spend-progress-store-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12.5px;  /* 2026-08-12 立刻回滚 */
    color: var(--muted-foreground);
}
.spend-progress-store-label .store-name {
    color: var(--card-foreground);
    font-weight: 500;
}
.spend-progress-store-label .store-amount {
    font-variant-numeric: tabular-nums;
    color: var(--card-foreground);
}
.spend-progress-store-bar {
    height: 10px;
    background: color-mix(in oklch, var(--muted) 70%, var(--card));
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.spend-progress-store-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,
        oklch(0.78 0.16 260) 0%,
        oklch(0.74 0.20 290) 50%,
        oklch(0.70 0.22 330) 100%
    );
    border-radius: 999px;
}

/* ===== 账号消耗占比 section (2026-08-12, user 截图需求) ===== */
/* 4 色停强对齐 sidebar 3D 玻璃感 GRADIENT_4 (蓝/紫/紫粉/粉) */
.spend-progress-accounts-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
}
.spend-progress-section-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    font-weight: 600;
    color: var(--card-foreground);
    letter-spacing: 0.02em;
}
.spend-progress-section-title .section-total {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}
.spend-progress-accounts {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.spend-progress-account {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.spend-progress-account-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--muted-foreground);
    gap: 8px;
}
.spend-progress-account-label .account-name {
    color: var(--card-foreground);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.spend-progress-account-label .account-amount {
    font-variant-numeric: tabular-nums;
    color: var(--card-foreground);
    white-space: nowrap;
}
.spend-progress-account-bar {
    height: 10px;  /* 2026-08-12: 跟店进度条统一粗细 (user 截图红框), 上面总消耗 16px 不动 */
    background: color-mix(in oklch, var(--muted) 70%, var(--card));
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.spend-progress-account-bar-fill {
    height: 100%;
    border-radius: 999px;
}
/* 4 色变量, 跟 sidebar 3D 玻璃感 GRADIENT_4 蓝/紫/紫粉/粉 一致 */
:root {
    --spend-account-c0: oklch(0.72 0.18 260);  /* 蓝 */
    --spend-account-c1: oklch(0.68 0.22 290);  /* 紫 */
    --spend-account-c2: oklch(0.65 0.24 320);  /* 紫粉 */
    --spend-account-c3: oklch(0.62 0.22 345);  /* 粉 */
}

@keyframes grow-bar {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (max-width: 1200px) {
    .comparison-grid { grid-template-columns: 1fr; }
    .kpi-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .comparison-groups { grid-template-columns: 1fr; }
}

/* ===== 周期数据对比 group 配置器 (2026-08-11 重构) ===== */
.comparison-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.comparison-group-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    transition: border-color 0.2s;
}
.comparison-group-card[data-group="A"] {
    border-left: 3px solid oklch(0.70 0.22 258);  /* A=蓝 */
}
.comparison-group-card[data-group="B"] {
    border-left: 3px solid oklch(0.65 0.25 320);  /* B=紫粉 */
}
.group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.group-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}
.group-badge-a { background: oklch(0.70 0.22 258); }  /* A=蓝 */
.group-badge-b { background: oklch(0.65 0.25 320); }  /* B=紫粉 */
.group-name-input {
    flex: 1;
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--card-foreground);
    border-radius: 4px;
    transition: border-color 0.15s, background 0.15s;
}
.group-name-input:hover { border-color: var(--border); }
.group-name-input:focus {
    outline: none;
    border-color: oklch(0.70 0.22 258);
    background: var(--muted);
}
.group-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.group-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--muted-foreground);
}
.group-row > label {
    flex-shrink: 0;
    width: 56px;
    font-weight: 500;
}
.group-row input[type="date"] {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--card-foreground);
    background: var(--background);
    font-family: inherit;
}
.group-sep {
    color: var(--muted-foreground);
    user-select: none;
}
.group-preset {
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--card-foreground);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
}
.group-preset:hover { background: var(--muted); }
.group-virtual-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--card-foreground);
    cursor: pointer;
    user-select: none;
}
.group-stores-list,
.group-anchors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    max-height: 90px;
    overflow-y: auto;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--background);
    flex: 1;
    min-width: 200px;
}
.group-store-item,
.group-anchor-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--card-foreground);
    cursor: pointer;
    user-select: none;
}
.group-store-item input,
.group-anchor-item input {
    margin: 0;
    cursor: pointer;
}
.group-store-item input:disabled + span {
    color: var(--muted-foreground);
    text-decoration: line-through;
}
/* 2026-08-11: 账号列表 3 列 grid, 12 项 (铁佛 9 + 雨泉 3) 整齐排开, 跟 store/anchor 列表共存 */
.group-accounts-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 10px;
    max-height: 120px;
    overflow-y: auto;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--background);
    flex: 1;
    min-width: 200px;
}
.group-account-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--card-foreground);
    cursor: pointer;
    user-select: none;
}
.group-account-item input { margin: 0; cursor: pointer; }
.comparison-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.btn-primary {
    border: none;
    background: oklch(0.70 0.22 258);
    color: #fff;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
}
.btn-primary:hover { background: oklch(0.65 0.22 258); }
.btn-primary:active { transform: scale(0.98); }
.comparison-result-summary {
    font-size: 12px;
    color: var(--muted-foreground);
}