/* ============================================================
 * home-light.css — 全站内容区「浅色 · 彩色」主题
 * ------------------------------------------------------------
 * 作用域：#main-content（主内容区），侧边栏 .sidebar（栏目）保持暗金不动。
 * 经 nginx sub_filter 在 </head> 前注入（晚于 index.php 内联 <style>）。
 * 关键：index.php 暗色规则用 html:not([data-wsc-theme="light"]) .card 等
 * 高特异性 + !important 选择器，故本文件统一用 #main-content(ID) 作用域
 * 提高特异性反压，否则覆盖不生效。
 * ============================================================ */

/* ---------- 1. 主内容区浅色底 ---------- */
.main-content {
  background: linear-gradient(180deg, #f6f8fc 0%, #eef2f9 45%, #f3f6fb 100%) !important;
}
#page-content { background: transparent !important; color: #1a1a1a; }

/* ---------- 2. 内容区 CSS 变量覆盖（三类变量体系统一浅色） ---------- */
#main-content {
  --deep-bg: #faf9f7;
  --card-bg: #ffffff;
  --card-hover: #f4f3f0;
  --text: #1a1a1a;
  --text-secondary: #4a4a4a;
  --border: #e5e2da;
  --gold: #b8912e;
  --gold-light: #d4a574;
  --gold-glow: rgba(184, 145, 46, 0.12);

  --bg-primary: #faf9f7;
  --bg-secondary: #f4f3f0;
  --bg-card: #ffffff;
  --bg-card-hover: #f4f3f0;
  --bg-elevated: #f4f3f0;
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-tertiary: #8b8b8b;
  --border: #e5e2da;
  --border-light: #eeebe4;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.10);
  --shadow-gold: 0 4px 24px rgba(154, 114, 52, 0.10);

  --wsc-bg: #faf9f7;
  --wsc-panel: #ffffff;
  --wsc-panel2: #f4f3f0;
  --wsc-border: #e5e2da;
  --wsc-text: #1a1a1a;
  --wsc-text2: #4a4a4a;

  color: #1a1a1a;
}

/* ---------- 3. 覆盖暗色主题 !important 规则（#main-content 高特异性反压） ---------- */
#main-content .card,
#main-content .stat-card,
#main-content .holding-card,
#main-content .product-card {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e5e2da !important;
  color: #1a1a1a !important;
}
#main-content .card:hover,
#main-content .stat-card:hover,
#main-content .holding-card:hover,
#main-content .product-card:hover {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(184, 145, 46, 0.4) !important;
}
#main-content .stat-value { color: #b8912e !important; text-shadow: none !important; }
#main-content .stat-label { color: #4a4a4a !important; }
#main-content .form-input,
#main-content input[type="text"],
#main-content input[type="password"],
#main-content input[type="email"],
#main-content input[type="number"],
#main-content textarea,
#main-content select {
  background: #ffffff !important;
  border: 1px solid #e5e2da !important;
  color: #1a1a1a !important;
}
#main-content th { color: #b8912e !important; }
#main-content td { color: #1a1a1a; }
#main-content tr:hover td { background: rgba(184, 145, 46, 0.04) !important; }
#main-content .tab.active { color: #1a1a1a !important; }
#main-content .page-header h2 { color: #1a1a1a !important; }
#main-content .page-header p { color: #4a4a4a !important; }
#main-content .modal h3 { color: #1a1a1a !important; }
#main-content a:hover { color: #b8912e !important; }
#main-content .breadcrumb a { color: #4a4a4a; }
#main-content .badge { color: #fff; }

/* ---------- 4. 首页专属精修 ---------- */
#dashboard-root .card,
#dashboard-root .stat-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.07);
  color: #0f172a;
}
#dashboard-root .stat-value { text-shadow: none !important; }
#dashboard-root .wsc-hcard {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, border-color .28s ease;
}
#dashboard-root .wsc-hcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
}
#dashboard-root .wsc-hero:hover { transform: none !important; box-shadow: none !important; }

/* ---------- 5. Hero 标题：浅色底上改用深金渐变（提升可读性） ---------- */
#page-content h1 {
  background: linear-gradient(135deg, #9a7234, #b8912e 50%, #9a7234) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
#dashboard-root h1 {
  background: linear-gradient(135deg, #f97316 0%, #ec4899 30%, #8b5cf6 60%, #3b82f6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* ---------- 6. 高级感精修（全站浅色质感） ---------- */
/* 卡片：多层柔和阴影营造悬浮层次 */
#main-content .card,
#main-content .stat-card,
#main-content .holding-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05) !important;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, border-color .25s ease !important;
}
#main-content .card:hover,
#main-content .stat-card:hover,
#main-content .holding-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .05), 0 12px 32px rgba(15, 23, 42, .10) !important;
  border-color: rgba(184, 145, 46, .35) !important;
}
/* 商品卡图片区 hover 微缩放 */
#main-content .product-card { overflow: hidden; }
#main-content .product-card .product-img { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
#main-content .product-card:hover .product-img { transform: scale(1.05); }
/* 按钮精致化 */
#main-content .btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, filter .2s ease !important;
}
#main-content .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15, 23, 42, .12); }
#main-content .btn:active { transform: scale(.97) translateY(0); }
/* 表格精致化 */
#main-content table { border-radius: 12px; overflow: hidden; }
#main-content th { font-weight: 600; letter-spacing: .5px; }
/* 页头金色分隔线 */
#main-content .page-header { border-bottom: 1px solid rgba(184, 145, 46, .18) !important; }
/* 输入框聚焦金色光环 */
#main-content .form-input:focus,
#main-content input:focus,
#main-content textarea:focus,
#main-content select:focus {
  border-color: rgba(184, 145, 46, .5) !important;
  box-shadow: 0 0 0 3px rgba(184, 145, 46, .10) !important;
  outline: none;
}

/* ---------- 7. 移动端响应式（覆盖首页内联 grid + 全站触控优化） ---------- */
@media (max-width: 768px) {
  /* Hero 缩放 */
  #dashboard-root .wsc-hero { padding: 40px 18px !important; border-radius: 20px !important; }
  #dashboard-root .wsc-hero-title { font-size: 40px !important; letter-spacing: 2px !important; line-height: 1.15 !important; }
  #dashboard-root .wsc-hero-sub { font-size: 15px !important; line-height: 1.7 !important; }
  #dashboard-root .wsc-hero-stats { gap: 18px !important; margin-bottom: 24px !important; }
  #dashboard-root .wsc-hero-stats > div > div:first-child { font-size: 26px !important; }
  #dashboard-root .wsc-hero-cta { flex-direction: column !important; align-items: stretch !important; }
  #dashboard-root .wsc-hero-cta .btn { width: 100% !important; padding: 13px !important; font-size: 15px !important; }

  /* 核心指标 4→2 列 */
  #dashboard-root .wsc-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  #dashboard-root .wsc-stats-grid .stat-value { font-size: 24px !important; }

  /* 14 宫格 4 列紧凑 */
  #dashboard-root .wsc-core-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  #dashboard-root .wsc-core-grid > div { padding: 12px 4px 10px !important; border-radius: 12px !important; }
  #dashboard-root .wsc-core-grid > div > div { width: 40px !important; height: 40px !important; border-radius: 10px !important; }
  #dashboard-root .wsc-core-grid > div > div:last-child { font-size: 11px !important; }

  /* 双栏 → 单列 */
  #dashboard-root .wsc-dual-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* 精选臻品 2 列 */
  #dashboard-root .wsc-featured-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* 公告 → 单列 */
  #dashboard-root .wsc-news-grid { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* 会员权益 2 列 */
  #dashboard-root .wsc-benefits-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* 平台保障 2 列 */
  #dashboard-root .wsc-guarantee-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* 平台真实数据 2 列 */
  #dashboard-root .wsc-wscgrid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* WChat 横幅 */
  #dashboard-root .wsc-hcard[onclick*="group-chat"] { padding: 20px 16px !important; }

  /* 全站：主内容呼吸感 + 卡片圆角 */
  #main-content .page-header h2 { font-size: 20px !important; }
  #main-content .product-card { border-radius: 12px; }
  /* 触控目标 ≥44px */
  #main-content .btn { min-height: 44px; }
}

@media (max-width: 480px) {
  #dashboard-root .wsc-hero-title { font-size: 32px !important; }
  #dashboard-root .wsc-hero-sub { font-size: 14px !important; }
  /* 14 宫格 3 列舒展 */
  #dashboard-root .wsc-core-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  #dashboard-root .wsc-core-grid > div > div { width: 44px !important; height: 44px !important; }
  /* 核心指标数字更小 */
  #dashboard-root .wsc-stats-grid .stat-value { font-size: 22px !important; }
  #dashboard-root .wsc-stats-grid .stat-label { font-size: 11px !important; }
  /* 商品卡统一 2 列（修复 index.php 380px 断点把商品压成 1 列的断层，375px 主流 iPhone 保持 2 列） */
  #main-content .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}