/* VOC 口碑数据库 · 明亮通透风
   底层：深色汽车摄影轮播 + 白色渐变蒙层；卡片浮在图上（毛玻璃）
   单页：Hero → 统计 → 车型数据区（按品牌分组）→ 页脚 */

:root {
    /* ---------- 主题令牌：三种模式只切换这一组值 ---------- */
    --ink: #1a1a1a;                            /* 标题 / 强调文字 */
    --text-color: #555;                        /* 正文文字 */
    --muted: #888;
    --weak: #999;
    --card-bg: rgba(255, 255, 255, .65);       /* 卡片底色 */
    --card-strong: rgba(255, 255, 255, .78);   /* 悬浮胶囊 / 气泡底色 */
    --line: rgba(0, 0, 0, .06);
    --hover: rgba(0, 0, 0, .04);
    /* 内嵌检索范围胶囊：淡灰底 + 白色选中块 */
    --seg-bg: rgba(0, 0, 0, .05);
    --seg-active-bg: #fff;
    --seg-active-shadow: 0 1px 2px rgba(15, 23, 42, .14);
    --title-glow: 0 2px 10px rgba(255, 255, 255, .8), 0 0 24px rgba(255, 255, 255, .55);
    --mask-bg: linear-gradient(180deg,
        rgba(255, 255, 255, .34) 0%,
        rgba(255, 255, 255, .44) 45%,
        rgba(255, 255, 255, .58) 100%);
    --mask-filter: blur(5px) saturate(.9) brightness(1.05);
    --page-bg: #e9edf2;                        /* 背景图未就绪时的兜底底色 */
    --accent: #3b82f6;
    --radius: 16px;
    --ease: cubic-bezier(.2, .6, .2, 1);

    /* 左右悬浮栏共用：定位与材质单一来源，保证绝对对称 */
    --dock-inset: 24px;
    --dock-blur: 12px;
    --dock-shadow: 0 8px 22px rgba(15, 23, 42, .14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--page-bg);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    transition: background-color .28s var(--ease), color .28s var(--ease);
}

/* ---------- 底层：汽车摄影轮播 + 白色渐变蒙层 ---------- */
/* 图片加载失败/未就绪时的兜底：一层明亮冷灰渐变，保证页面依然是通透浅色 */
.bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(160deg, #e8edf4 0%, #d5dee9 55%, #c6d3e2 100%);
}
.bg-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* 褪色质感：降饱和，亮度基本保持原样 */
    filter: saturate(.82) brightness(1.02);
    opacity: 0;
    /* 只动 opacity：走合成层，不触发布局/重绘，不影响滚动 */
    transition: opacity 1.5s ease;
}
/* will-change 只给「当前 + 下一张」，避免 20 张全量提升为合成层撑爆显存 */
.bg-slide.is-active,
.bg-slide.is-next { will-change: opacity; }
.bg-slide.is-active { opacity: 1; }

/* 半透明毛玻璃 + 细腻白色渐变：底图呈"褪色/朦胧"的高级感，
   且无论底图明暗，深色文字都始终清晰 */
.bg-mask {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--mask-bg);
    backdrop-filter: var(--mask-filter);
    -webkit-backdrop-filter: var(--mask-filter);
    transition: background .28s var(--ease), backdrop-filter .28s var(--ease);
}

.page { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 24px 72px; }

/* ---------- 区块淡入（200ms） ---------- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .2s linear, transform .2s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 88px 0 32px; text-align: center; }
/* 车图偏暗处也能保证深色标题可读：一层柔和白色柔光 */
.hero::before {
    content: "";
    position: absolute;
    inset: -40px 0;
    z-index: -1;
    background: radial-gradient(58% 62% at 50% 44%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
}
.hero h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--ink);
    /* 浅色模式是白色微光（防浅色车身糊字），深色模式由 --title-glow 换成黑色阴影 */
    text-shadow: var(--title-glow);
}
.hero .sub { margin: 12px 0 0; color: var(--text-color); font-size: 15px; }

/* 搜索框：Edge 风格大胶囊，检索范围开关以内嵌灰度胶囊贴在右侧内部 */
.search-wrap { max-width: 760px; margin: 28px auto 0; }
.search-inner-wrap { position: relative; }
#kw {
    width: 100%;
    height: 52px;
    /* 右侧留出内嵌胶囊的位置：胶囊 168 宽 + 右距 6，共 174，避免文字钻到胶囊下面 */
    padding: 0 174px 0 20px;
    font-size: 16px;
    color: var(--ink);
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: 999px;
    outline: none;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
#kw::placeholder { color: var(--muted); }
#kw:focus { border-color: var(--accent); background: var(--card-strong); }

/* 检索范围 Toggle：绝对定位嵌在输入框内部右侧的浅灰胶囊 */
.search-mode {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 2px;
    height: 38px;
    padding: 3px;
    background: var(--seg-bg);
    border: 0;
    border-radius: 999px;
}
.mode-btn {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.mode-btn:hover:not(.is-active) { color: var(--ink); }
/* 选中态：白色（深色主题为半透明白）微阴影，不抢搜索框本身的视觉重量 */
.mode-btn.is-active {
    color: var(--ink);
    background: var(--seg-active-bg);
    font-weight: 600;
    box-shadow: var(--seg-active-shadow);
}
.mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 统计卡 ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 0; }
.stat {
    padding: 20px 22px;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.stat .value { font-size: 30px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .label { margin-top: 6px; font-size: 13px; color: var(--muted); }

/* ---------- 提示行 ---------- */
.action-bar { display: flex; align-items: center; gap: 12px; height: 18px; margin-bottom: 6px; }
.action-hint { margin-left: auto; font-size: 13px; color: var(--weak); font-variant-numeric: tabular-nums; }

/* ---------- 按钮 ---------- */
.btn {
    height: 40px;
    padding: 0 18px;
    font: inherit;
    font-size: 14px;
    color: var(--text-color);
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover:not(:disabled) { background: rgba(255, 255, 255, .75); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary:not(:disabled) { color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: #2f76f0; }
.btn:disabled { color: var(--weak); cursor: not-allowed; }
.btn.is-loading { color: var(--muted); pointer-events: none; }

/* ---------- 轻提示（导出成功/失败） ---------- */
.toast {
    position: fixed;
    left: 50%;
    top: 28px;
    transform: translateX(-50%);
    z-index: 60;
    max-width: 82vw;
    padding: 11px 22px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .6);
    animation: toast-in .35s var(--ease);
}
.toast[hidden] { display: none; }
.toast.is-error { background: rgba(185, 28, 28, .95); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -12px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* ---------- 异步导出进度面板（common.js 动态挂载，结构与管理页一致，这里按主题走令牌） ---------- */
.export-panel {
    position: fixed;
    right: var(--dock-inset);
    bottom: calc(var(--dock-inset) + 60px);
    z-index: 46;
    width: 380px;
    max-width: calc(100vw - 32px);
    padding: 15px 18px 14px;
    border-radius: 18px;
    background: var(--card-strong);
    backdrop-filter: blur(var(--dock-blur));
    -webkit-backdrop-filter: blur(var(--dock-blur));
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px -22px rgba(15, 23, 42, .45);
    animation: panel-up .35s var(--ease);
}
@keyframes panel-up { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.export-panel[hidden] { display: none; }
.export-panel.is-error { box-shadow: 0 24px 60px -22px rgba(15, 23, 42, .45), 0 0 0 1px rgba(220, 38, 38, .45); }
.ep-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ep-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.ep-text { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.export-panel.is-error .ep-title { color: #dc2626; }
.theme-dark .export-panel.is-error .ep-title { color: #f87171; }
.ep-bar {
    margin-top: 10px;
    height: 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    overflow: hidden;
}
.theme-dark .ep-bar { background: rgba(255, 255, 255, .14); }
.ep-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
    transition: width .6s var(--ease);
}
.ep-meta { margin: 8px 0 0; font-size: 12px; color: var(--weak); font-variant-numeric: tabular-nums; }
/* 收起按钮只在本面板里出现，避免与其它 .icon-btn 用法互相影响 */
.export-panel .icon-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    color: var(--weak);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.export-panel .icon-btn:hover { background: var(--hover); color: var(--ink); }

/* ---------- 右下角悬浮操作栏（胶囊） ---------- */
.dock {
    position: fixed;
    right: var(--dock-inset);
    bottom: var(--dock-inset);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
/* 左下角主题切换器：与右下角 .dock 共用 --dock-inset / --dock-blur / --dock-shadow，
   保证两个悬浮栏在同一条水平线上、材质完全一致 */
.dock-left {
    position: fixed;
    left: var(--dock-inset);
    bottom: var(--dock-inset);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.dock-btns { display: flex; align-items: center; gap: 8px; }
.btn-dock {
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--card-strong);
    backdrop-filter: blur(var(--dock-blur));
    -webkit-backdrop-filter: blur(var(--dock-blur));
    box-shadow: var(--dock-shadow);
}
.btn-theme { display: inline-flex; align-items: center; gap: 8px; }
/* 主题指示点：浅色空心 / 深色实心 / 极简半填充 */
.theme-ico {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background: transparent;
    transition: background .28s var(--ease);
}
.theme-dark .theme-ico { background: currentColor; }
.theme-clean .theme-ico { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.btn-dock:hover:not(:disabled) { background: #fff; }
.btn-dock:disabled {
    color: var(--weak);
    background: rgba(255, 255, 255, .5);
    border-color: rgba(0, 0, 0, .08);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
}
.btn-dock.btn-primary:not(:disabled) { box-shadow: 0 10px 26px rgba(59, 130, 246, .35); }
.btn-dock.btn-primary:not(:disabled):hover { box-shadow: 0 12px 30px rgba(59, 130, 246, .45); }
/* .dock 自身是 display:flex，hidden 属性会被它覆盖，必须显式关掉 */
.btn[hidden], .popover[hidden], .dock[hidden], .list-panel[hidden],
.extract-panel[hidden], .action-hint[hidden] { display: none; }
.btn-mini { height: 32px; padding: 0 14px; font-size: 13px; }

/* 紧凑气泡卡片：高级筛选 */
.popover {
    width: 320px;
    padding: 14px;
    background: var(--card-strong);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
    animation: pop-in .18s var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.popover input[type="text"] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: none;
    transition: border-color .18s var(--ease);
}
.popover input[type="text"]:focus { border-color: var(--accent); }
.pop-meta { margin-top: 8px; font-size: 12px; color: var(--muted); }
.pop-meta #fltCount { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.pop-error { color: #dc2626; }
.pop-scope { color: var(--weak); }
.pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ---------- 车型数据区 ---------- */
.list-panel {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.list-head {
    position: sticky;
    top: 0;
    z-index: 5;                     /* 压过吸顶的品牌分组头（.brand-head z=4） */
    display: grid;
    grid-template-columns: 1fr 92px 92px 88px;
    gap: 12px;
    padding: 12px 20px;
    /* 实色毛玻璃底：数据行从表头下穿过时不能透出来；圆角补齐面板左上/右上 */
    background: var(--card-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 12px;
    color: var(--muted);
}
.list-head span:nth-child(2), .list-head span:nth-child(3), .list-head span:nth-child(4) { text-align: center; }

/* ---------- 全库提取面板（替换车系列表） ---------- */
.extract-panel {
    padding: 56px 24px 60px;
    text-align: center;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.extract-title { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--ink); }
.extract-title b {
    margin: 0 4px;
    font-size: 26px;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.extract-sub { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.extract-sub:empty { display: none; }
.extract-actions { display: flex; justify-content: center; margin-top: 24px; }

.brand-head {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--card-strong);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .02em;
}
.brand-head .count { font-weight: 400; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- 右侧 A-Z 索引（Dock 放大） ----------
   位置：与居中的 .page 内容列镜像对称（列半宽 540 - 内边距 24 = 516，再留 26 间距 + 44 热区宽 = 586），
   窄屏被 max() 兜到 8px，永远不会跑出视口。
   隐藏态：一根 3px x 64px 的竖向渐隐细线（两端淡出，像一条轨道，绝不像按钮），
   用 --text-color 占 32% 透明度，比原来的 --ink/.16 明显一档，但仍不到抢戏。
   热区是 44px x 100vh 的透明带，鼠标进带即触发，不要求精准压线。
   悬停后细线淡出、字母淡入，鼠标上下滑动时按高斯衰减放大，只用 transform: scale 不触发重排 */
.az-index {
    position: fixed;
    right: max(8px, calc(50% - 586px));
    top: 0;
    height: 100vh;
    width: 44px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
}
.az-index::before {                 /* 隐藏态：竖向渐隐细线 */
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 96px;                       /* 64 → 96：默认态更显眼（1.5 倍） */
    margin: -48px 0 0 -1.5px;
    border-radius: 3px;
    background: linear-gradient(to bottom,
        transparent, var(--text-color) 20%, var(--text-color) 80%, transparent);
    opacity: .32;
    transition: opacity .25s var(--ease);
}
.az-index:hover::before { opacity: 0; }
.az-index[hidden] { display: none; }


.az-letters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 5px;
    border-radius: 999px;
    background: var(--card-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px -16px rgba(15, 23, 42, .4);
    opacity: 0;
    transform: scale(.94);
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    pointer-events: none;
}
.az-index:hover .az-letters { opacity: 1; transform: scale(1); pointer-events: auto; }
.az-index .az-letters:empty { display: none; }

.az-letters b {
    width: 22px;
    height: 17px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    transform: scale(1);
    transform-origin: center center;
    will-change: transform;
}
.az-letters b:hover { color: var(--ink); }

/* 触屏不显示：没有 hover 意味着永远停在隐藏态，纯占位。
   <=1199px 时 calc(50% - 586px) 被 max() 兜到 8px，热区会压到车型名/销量列上，直接隐藏 */
@media (max-width: 1199px), (hover: none) {
    .az-index { display: none; }
}


.row {
    display: grid;
    grid-template-columns: 1fr 92px 92px 88px;
    gap: 12px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    /* 只过渡绘制层属性（背景 + 左侧 inset 指示条），不碰盒模型 → 不触发重排 */
    transition: background .16s var(--ease), box-shadow .16s var(--ease);
}
.row:hover { background: var(--hover); }
.row.selected { background: rgba(59, 130, 246, .12); box-shadow: inset 2px 0 0 var(--accent); }
.row .name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row .num { text-align: center; color: var(--text-color); font-size: 13px; font-variant-numeric: tabular-nums; }
/* 当月销量：有数字才可点（蓝色下划线 + 手型），未上榜是灰色静态文案 */
.row .sales { text-align: center; color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.row .sales.clickable {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.row .sales.clickable:hover { color: var(--accent); opacity: .82; }
.row .sales.empty, .row .num .empty { color: var(--muted); }

/* ---------- 销量走势弹窗 ---------- */
.sales-mask {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .42);
}
/* display:flex 会覆盖 hidden 属性，必须显式盖回来 */
.sales-mask[hidden] { display: none; }
.sales-panel {
    width: min(560px, 100%);
    padding: 16px 18px 10px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    backdrop-filter: blur(12px);
}
.sales-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.sales-head span { font-size: 14px; font-weight: 600; color: var(--ink); }
.sales-canvas-wrap { position: relative; height: 240px; }
.sales-note { margin: 8px 0 0; min-height: 16px; font-size: 12px; color: var(--muted); }

/* ---------- 骨架屏 / 空状态 ---------- */
.skeleton { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.skeleton .bar {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .06);
    overflow: hidden;
}
.skeleton .bar + .bar { margin-top: 10px; }
.skeleton .bar.w40 { width: 40% }
.skeleton .bar.w70 { width: 70% }
.skeleton .bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    transform: translateX(-100%);
    animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { transform: translateX(100%) } }

/* ============================================================
   主题：浅色（默认）/ 深色 / 极简
   类名同时打在 <html> 与 <body> 上，所以下面统一用不带元素前缀的
   后代选择器，配合 <head> 的内联脚本避免首屏闪色。
   ============================================================ */

/* ---------- 深色模式：保留背景图轮播，遮罩转深黑 ---------- */
.theme-dark {
    --ink: #fff;
    --text-color: rgba(255, 255, 255, .82);
    --muted: rgba(255, 255, 255, .6);
    --weak: rgba(255, 255, 255, .45);
    --card-bg: rgba(17, 24, 39, .58);
    --card-strong: rgba(17, 24, 39, .75);
    --line: rgba(255, 255, 255, .12);
    --hover: rgba(255, 255, 255, .07);
    --seg-bg: rgba(255, 255, 255, .1);
    --seg-active-bg: rgba(255, 255, 255, .22);
    --seg-active-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --title-glow: 0 2px 12px rgba(0, 0, 0, .6), 0 0 28px rgba(0, 0, 0, .45);
    --mask-bg: linear-gradient(180deg,
        rgba(0, 0, 0, .55) 0%,
        rgba(0, 0, 0, .6) 55%,
        rgba(0, 0, 0, .68) 100%);
    --mask-filter: blur(5px) saturate(.9) brightness(.62);
    --page-bg: #0b1220;
    --dock-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.theme-dark .bg { background: linear-gradient(160deg, #0b1220 0%, #131c2e 55%, #0b1220 100%); }
/* Hero 柔光由白转黑，否则白字会被白色柔光吃掉 */
.theme-dark .hero::before { background: radial-gradient(58% 62% at 50% 44%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 72%); }
/* 排除 .btn-dock：悬浮胶囊要继续吃 --card-strong，不能被普通按钮底色顶掉 */
.theme-dark .btn:not(.btn-dock) { background: rgba(255, 255, 255, .08); }
.theme-dark .btn:not(.btn-dock):hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.theme-dark .btn-dock:hover:not(:disabled) { background: rgba(31, 41, 55, .92); }
.theme-dark .btn-dock:disabled { background: rgba(17, 24, 39, .5); border-color: rgba(255, 255, 255, .1); }
.theme-dark .popover input[type="text"] { background: rgba(255, 255, 255, .1); }
.theme-dark .skeleton .bar { background: rgba(255, 255, 255, .1); }
.theme-dark .skeleton .bar::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); }
.theme-dark .row.selected { background: rgba(59, 130, 246, .22); }
.theme-dark .row .sales.clickable { color: #7aa7ff; }

/* ---------- 极简模式：彻底关闭背景图与遮罩，最省流 ---------- */
.theme-clean {
    --ink: #1a1a1a;
    --text-color: #555;
    /* 极简没有底图、卡片是纯白，原来 #888/#999 在白底上只有 3.54/2.73，
       达不到 AA 4.5；加深到 6.05 / 4.83（白底）并保留 muted 深于 weak 的层级 */
    --muted: #5f6368;
    --weak: #6b7280;
    --card-bg: #fff;
    --card-strong: #fff;
    --line: rgba(0, 0, 0, .08);
    --hover: rgba(0, 0, 0, .04);
    --seg-bg: #f1f3f5;
    --seg-active-bg: #fff;
    --seg-active-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    --title-glow: none;
    --page-bg: #f9fafb;
    --dock-shadow: 0 2px 10px rgba(15, 23, 42, .1);
}
.theme-clean .bg,
.theme-clean .bg-mask,
.theme-clean .hero::before { display: none; }
/* 没有底图可透，毛玻璃失去意义 → 换成白卡 + 轻阴影 */
.theme-clean .stat,
.theme-clean .list-panel,
.theme-clean .extract-panel,
.theme-clean #kw,
.theme-clean .search-mode,
.theme-clean .popover,
.theme-clean .brand-head {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
}
.theme-clean .btn-dock { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* 白底只给普通按钮。主按钮必须排除：.theme-clean .btn 与 .btn-primary:not(:disabled)
   权重相同且位置更靠后，会把主按钮的蓝底刷成白色，而主按钮文字是 #fff → 白字白底完全隐形 */
.theme-clean .btn:not(.btn-primary) { background: #fff; }
.theme-clean .btn:not(.btn-primary):hover:not(:disabled) { background: #f9fafb; }
/* 极简下把主按钮蓝底加深到 #2563eb / #1d4ed8：白字对比度 3.68 → 5.17（hover 更深） */
.theme-clean .btn-primary:not(:disabled) { background: #2563eb; border-color: #2563eb; }
.theme-clean .btn-primary:not(:disabled):hover { background: #1d4ed8; border-color: #1d4ed8; }

/* ---------- 切换主题时胶囊自身的平滑过渡 ---------- */
.btn-dock {
    transition: background-color .28s var(--ease), color .28s var(--ease),
                box-shadow .28s var(--ease), border-color .28s var(--ease),
                transform .18s var(--ease);
}

.empty-state { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- 页脚 ---------- */
.foot { margin-top: 28px; text-align: center; font-size: 12px; color: var(--weak); }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
    /* 底部留出通栏 dock 的高度，避免最后几行被盖住 */
    .page { padding: 0 16px 104px; }
    .hero { padding: 56px 0 28px; }
    .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .stat { padding: 12px 12px; }
    .stat .value { font-size: 20px; }
    .stat .label { margin-top: 2px; font-size: 11px; }

    /* 主题切换器：挪到右上角并缩小，不再压住表格内容 */
    .dock-left {
        top: 10px;
        right: 12px;
        left: auto;
        bottom: auto;
        align-items: flex-end;
    }
    .btn-theme { height: 36px; padding: 0 12px; font-size: 13px; gap: 6px; }
    .theme-ico { width: 11px; height: 11px; border-width: 1.25px; }

    /* 悬浮操作栏：通栏贴底，带自己的底色，滚动到哪都在 */
    .dock {
        right: 0;
        bottom: 0;
        left: 0;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--line);
        background: var(--card-strong);
        backdrop-filter: blur(var(--dock-blur));
        -webkit-backdrop-filter: blur(var(--dock-blur));
        box-shadow: 0 -6px 20px rgba(15, 23, 42, .1);
    }
    .dock-btns { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
    .dock-btns .btn { flex: 1 1 auto; min-width: 0; }
    .popover { width: auto; }

    /* 窄屏仍是内嵌胶囊，只把字号与右侧留白收紧，避免挤掉可输入宽度 */
    #kw { padding-right: 157px; }
    .search-mode { right: 5px; height: 36px; }
    .mode-btn { padding: 0 11px; font-size: 12.5px; }
    .extract-panel { padding: 40px 16px 44px; }
    .extract-title { font-size: 16px; }
    .extract-title b { font-size: 22px; }
    /* 手机上导出面板通栏贴底，别压住底部操作条 */
    .export-panel { right: 12px; left: 12px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: auto; }

    /* 表格列多，窄屏压扁会挤成一团：允许横向滑动，列宽回到桌面档不再挤压 */
    .list-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .list-head, .row {
        min-width: 520px;
        grid-template-columns: 1fr 92px 92px 88px;
        gap: 8px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .row .name { font-size: 13px; }
    .action-hint { margin-left: 0; }
    /* 弹窗窄屏收一收，折线图留 200px 高避免按钮被挤出屏幕 */
    .sales-panel { padding: 14px 14px 8px; }
    .sales-canvas-wrap { height: 200px; }
    .sales-head span { font-size: 13px; }
}