/* ==========================================================================
   车之驿名车汇 — 白底主题（覆盖层）
   加载顺序必须在 style.css 之后；移除本文件即回到深色主题。
   只改「页面级」的底色/面板/边框，照片上的文字阴影与暗色蒙版保持原样，
   照片区的文字强制保持浅色，避免白底变量把照片上的字变黑。
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-2: #f7f8fa;
  --bg-3: #eef1f5;
  --panel: rgba(15, 20, 30, .028);
  --panel-2: rgba(15, 20, 30, .05);
  --line: rgba(15, 20, 30, .10);
  --line-2: rgba(15, 20, 30, .18);
  --text: #14161c;
  --text-2: #3a4048;
  --muted: #6d7684;
  --gold: #9a7430;          /* 白底上要压深才够对比 */
  --gold-2: #7d5c20;
  --gold-3: #c2a05c;
  --gold-dim: rgba(154, 116, 48, .12);
  --shadow: 0 16px 40px rgba(16, 22, 40, .10);
}

/* 顶部两团氛围光在白底上要收得很淡，否则发脏 */
body::before {
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(216, 181, 106, .16), transparent 60%),
    radial-gradient(900px 500px at 5% 8%, rgba(90, 120, 200, .07), transparent 60%);
}

/* ---------- 顶部导航 / 页脚 ---------- */
.topbar { background: rgba(255, 255, 255, .86); border-bottom-color: var(--line); }

/* ---------- 表单 / 输入 ---------- */
.input, select.input, textarea.input { background: rgba(15, 20, 30, .035); }
.searchbox .search-clear { background: rgba(15, 20, 30, .08); }
.chk { background: rgba(15, 20, 30, .03); }
.chk input { background: rgba(15, 20, 30, .06); }

/* ---------- 筛选栏 / 状态胶囊 ---------- */
.st-pill { background: rgba(15, 20, 30, .03); }
.st-pill.st-off { background: rgba(15, 20, 30, .02); border-color: rgba(15, 20, 30, .14); }
.filterbar { border-color: var(--line); }
.btn.off { background: rgba(15, 20, 30, .05); }

/* ---------- 卡片 / 面板 ---------- */
.card { background: linear-gradient(180deg, #ffffff, var(--bg-2)); }
.panel { background: linear-gradient(180deg, var(--panel), rgba(255, 255, 255, 0)); }
.kpi, .login-card, .ys-item { background: rgba(15, 20, 30, .03); }
.nav-sec { background: rgba(15, 20, 30, .035); }
.nav-list li { background: rgba(15, 20, 30, .03); }
.nav-list li:hover { background: rgba(15, 20, 30, .055); }
.nav-list li em { background: rgba(15, 20, 30, .055); }
.art-bg::after { background: rgba(15, 20, 30, .035); }
.uc-av { background: rgba(15, 20, 30, .06); }
.switch .slider { background: rgba(15, 20, 30, .12); }
.trim-detail .td-lead { border-bottom-color: rgba(15, 20, 30, .14); }
.color-dot { border-color: rgba(15, 20, 30, .18); }
.color-chip { border-color: rgba(15, 20, 30, .22); background: rgba(0, 0, 0, .04); }

/* ---------- 表格 ---------- */
table.data th { background: rgba(15, 20, 30, .035); }
table.data tbody tr:hover, table.cmp tbody tr:hover td { background: rgba(15, 20, 30, .022); }
.cmp-eq td.off { color: rgba(15, 20, 30, .28); }
.cmp-eq .off-legend { color: rgba(15, 20, 30, .38); }

/* ---------- 相册缩略图 ---------- */
.hero-thumb { border-color: rgba(15, 20, 30, .14); }
.hero-thumbs::-webkit-scrollbar-track { background: rgba(15, 20, 30, .05); }

/* ==========================================================================
   照片区：底色是深色照片，文字必须保持浅色（不能跟着白底主题变黑）
   ========================================================================== */
.hero h1, .hero p.lead, .hero-stats .v, .hero-stats .k, .hero .btn.ghost { color: #fff; }
.hero .eyebrow { color: #f2e2b4; }
.hero-stats .v { color: var(--gold-2); }
.hero-car .cap h1, .hero-car .cap .eyebrow { color: #fff; }
.hero-car .cap .eyebrow { color: var(--gold-2); }
.card-art .brandname, .card-art .price, .card-art .price small { color: #fff; }
.hero-car .photo-note, .hero-car .sold-flag, .card-art .card-fav, .card-art .yearbadge, .card-art .badge { color: #f4f6fa; }

/* 白底上的金色标题/数字，压深一点保证可读 */
.sec-title, .price-now, .kpi .v { color: var(--text); }

/* ---------- 客服浮窗（chat.css 里是写死的深色渐变） ---------- */
.lx-panel { background: linear-gradient(180deg, #ffffff, #f6f7fa); }
.lx-head { border-bottom-color: var(--line); }

/* ==========================================================================
   门头（首屏 hero）：深色大图 → 浅香槟渐变
   纯白太平，改用「米白/香槟 → 白」的斜向渐变，右上角透一点金色柔光；
   蒙版用同色系渐变压过车图，接缝不突兀；车图（收藏轮播）仍保留在右侧。
   ========================================================================== */
:root {
  --hero-1: #f6f0e3;   /* 浅香槟（左） */
  --hero-2: #faf6ee;   /* 米白（中） */
  --hero-3: #ffffff;   /* 白（右） */
}
.hero {
  background:
    radial-gradient(820px 460px at 6% 4%, rgba(216, 181, 106, .20), transparent 62%),
    radial-gradient(620px 380px at 62% 96%, rgba(216, 181, 106, .10), transparent 66%),
    linear-gradient(120deg, var(--hero-1) 0%, var(--hero-2) 46%, var(--hero-3) 100%);
}
/* 注意：原样式是 `.hero .hero-shade` / `.hero .hero-art`（两个类），
   这里必须用同样的选择器才压得住，写成单类会被原样式覆盖 */
.hero .hero-art { opacity: .10; }
.hero .hero-art .art-bg { background: none !important; }   /* 内联的深色渐变 */
.hero .hero-shade {
  background: linear-gradient(90deg,
    rgba(246, 240, 227, 1) 0%, rgba(246, 240, 227, .97) 38%,
    rgba(250, 246, 238, .93) 56%, rgba(252, 250, 246, .58) 80%, rgba(255, 255, 255, .16) 100%);
}
.hero .eyebrow { color: var(--gold); }
.hero h1 { color: #14161c; text-shadow: none; }
.hero h1 em { color: var(--gold); }
.hero p.lead { color: #4a5057; text-shadow: none; }
.hero-stats .v { color: #14161c; text-shadow: none; }
.hero-stats .k { color: #6d7684; text-shadow: none; }
.hero .btn.ghost { color: #14161c; border-color: rgba(15, 20, 30, .18); background: rgba(255, 255, 255, .72); }
/* 文案区收窄，避免压到右侧车图 */
@media (min-width: 980px) {
  .hero-inner > *:not([data-user-chip]) { max-width: 640px; }
}
@media (max-width: 979px) {
  /* 窄屏车图会跟文字打架，直接淡出，只留浅色底文案 */
  .hero .hero-photo-lg { opacity: .14; }
  .hero .hero-shade { background: rgba(250, 246, 238, .92); }
}

/* ==========================================================================
   搜索/筛选栏 & 弹窗：原先是写死的深色十六进制，白底主题下必须一起改
   ========================================================================== */
.filterbar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(16, 22, 40, .07);
}
.searchbox .search-ico:hover { background: rgba(154, 116, 48, .10); }
.modal { background: #ffffff; border-color: var(--line); }
.modal-head { background: #ffffff; }
.modal-foot { background: #fafbfc; }

/* 下拉选项 / 表格头 / 骨架屏 / 滚动条 —— 同样有写死的深色 */
select.input option { background: #ffffff; color: var(--text); }
table.cmp thead th { background: rgba(15, 20, 30, .045); }
.sk { background: linear-gradient(90deg, #eef1f5, #f7f8fa, #eef1f5) !important; }
::-webkit-scrollbar-track { background: #f1f3f6; }
::-webkit-scrollbar-thumb { background: #c9cfd8; }