/* ============================================================
   白色主题（对标大厂控制台：阿里云 / 腾讯云 / Linear 那一类）

   为什么单独一个文件而不是把 style.css 全改成变量：
   - 深色是默认主题，是你们已经验收过的视觉，不能动；
   - 深色里有大量硬编码的 rgba(255,122,92,…) 光晕、rgba(16,9,7,…) 底色，
     靠覆盖变量解决不了，必须逐条覆盖；
   - 全部规则都用 html[data-theme="light"] 前缀限定，深色下零影响。

   调色原则：
   - 页面 #f5f6f8、卡片 #fff —— 靠"面"区分层次，不靠阴影堆叠
   - 正文 #16181d / 次要 #5b636f / 弱化 #8d95a1（都过 AA 对比度）
   - 主色压深到 #e8552e：亮橙 #ff7a5c 在白底上对比度只有 2.6，看不清
   - 取消所有霓虹光晕、扫描光带、网格和光团，白底上加这些只会显脏
   ============================================================ */

html[data-theme="light"] {
  --bg-0: #f3f5f8;
  --bg-1: #ffffff;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --line: #e4e7ec;
  --line-strong: #d5d9e0;
  --accent: #d4380d;
  --accent-dim: #b32d08;
  --gold: #c2410c;
  --gold-dim: #9a330a;
  --text: #16181d;
  --text-dim: #4f5763;
  --text-mute: #6b7280;
  --ok: #0e9f6e;
  --warn: #b45309;
  --danger: #d92d20;
  --radius: 12px;
}

/* ---------- 背景：干净的白灰面，不要星云和网格 ---------- */
html[data-theme="light"] body {
  background: var(--bg-0);
}

html[data-theme="light"] body::before {
  background:
    radial-gradient(900px 480px at 12% -14%, rgba(232, 85, 46, 0.05), transparent 62%),
    radial-gradient(760px 420px at 92% 0%, rgba(217, 72, 15, 0.035), transparent 64%),
    linear-gradient(180deg, #f6f7fa 0%, #f1f3f7 100%);
}

html[data-theme="light"] body::after {
  display: none;              /* 网格线在白底上像屏幕脏了 */
}

html[data-theme="light"]::before,
html[data-theme="light"]::after {
  display: none;              /* 珊瑚光团 */
}

/* ---------- 面板：1px 边 + 极轻投影 ---------- */
html[data-theme="light"] .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 10px 28px -20px rgba(16, 24, 40, 0.18);
}

html[data-theme="light"] .card::before,
html[data-theme="light"] .card::after {
  display: none;              /* 四角括号 / 扫描光带 */
}

/* ---------- 顶栏 ---------- */
html[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
}

html[data-theme="light"] .topbar::after { display: none; }

html[data-theme="light"] .brand-mark {
  color: var(--accent);
  text-shadow: none;
  animation: none;
}

html[data-theme="light"] .brand-sub { color: #7b8496; }

html[data-theme="light"] .tab { color: var(--text-dim); }
html[data-theme="light"] .tab:hover { color: var(--text); }

html[data-theme="light"] .tab.active {
  color: var(--accent);
  text-shadow: none;
  font-weight: 600;
}

html[data-theme="light"] .tab.active::after {
  background: var(--accent);
  box-shadow: none;
  animation: none;
  border-radius: 2px 2px 0 0;
}

/* ---------- 区块头 ---------- */
html[data-theme="light"] .sec-head { border-bottom-color: #eef0f3; }

html[data-theme="light"] .sec-head h2::before {
  background: var(--accent);
  box-shadow: none;
  border-radius: 1px;
}

/* ---------- 表单 ---------- */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .input {
  background: #fff;
  border: 1px solid #dfe3e9;
  color: var(--text);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #a9b0ba; }

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  background: #fff;
  border-color: #f0a58e;
  box-shadow: 0 0 0 3px rgba(232, 85, 46, 0.12);
}

html[data-theme="light"] select option { background: #fff; color: var(--text); }

/* ---------- 按钮 ---------- */
html[data-theme="light"] .btn {
  background: #fff;
  border: 1px solid #dfe3e9;
  color: #333a45;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.02);
}

html[data-theme="light"] .btn:hover:not(:disabled) {
  background: #fafbfc;
  border-color: #c9cfd8;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

html[data-theme="light"] .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(232, 85, 46, 0.28),
              0 6px 16px -10px rgba(232, 85, 46, 0.55);
}

html[data-theme="light"] .btn.primary:hover:not(:disabled) {
  background: #bf3209;
  border-color: #bf3209;
  box-shadow: 0 2px 6px rgba(232, 85, 46, 0.3);
}

html[data-theme="light"] .btn.ghost { background: transparent; }

html[data-theme="light"] .btn.danger {
  color: var(--danger);
  border-color: #f3c6c0;
  background: #fff;
}

html[data-theme="light"] .btn.danger:hover:not(:disabled) {
  background: #fdf2f1;
  border-color: #e9a9a1;
  box-shadow: none;
}

/* ---------- 提示条 ---------- */
html[data-theme="light"] .hint-box {
  background: #fff7f3;
  border-color: #f6d9cb;
  color: #a8421f;
}

html[data-theme="light"] .hint-line { color: #6b7280; }

/* ---------- 账号 / 任务行 ---------- */
html[data-theme="light"] .acct-item {
  background: #fbfcfd;
  border-color: #eceff3;
}

html[data-theme="light"] .acct-item:hover {
  background: #fff;
  border-color: #e2e6ec;
  box-shadow: 0 2px 10px -6px rgba(16, 24, 40, 0.2);
}

/* ---------- 状态标签 ---------- */
html[data-theme="light"] .tag.ok {
  color: #0b7a55;
  background: #e9f8f1;
  border-color: #b6e6d0;
  animation: none;
  box-shadow: none;
}

html[data-theme="light"] .tag.warn {
  color: #94520a;
  background: #fdf3e3;
  border-color: #f3d8a8;
}

html[data-theme="light"] .tag.err {
  color: #b42318;
  background: #fdecea;
  border-color: #f5c6c1;
}

html[data-theme="light"] .tag.gray {
  color: #5c6472;
  background: #f3f4f6;
  border-color: #e5e7eb;
}

/* ---------- 商品卡 ---------- */
html[data-theme="light"] .item {
  background: #fff;
  border-color: #eceff3;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

html[data-theme="light"] .item:hover {
  border-color: #f4c7b4;
  box-shadow: 0 12px 26px -18px rgba(16, 24, 40, 0.3);
}

html[data-theme="light"] .item img { background: #f3f4f6; filter: none; }
html[data-theme="light"] .item:hover img { filter: none; }

html[data-theme="light"] .thumb-empty {
  background:
    repeating-linear-gradient(45deg, rgba(232, 85, 46, 0.04) 0 8px, transparent 8px 16px),
    #f3f4f6;
}

html[data-theme="light"] .item-price {
  color: var(--gold);
  text-shadow: none;
}

html[data-theme="light"] .ref-price { color: #0b7a55; }
html[data-theme="light"] .ref-price.est { color: #6b7280; }

/* ---------- 弹窗 ---------- */
html[data-theme="light"] .modal { background: rgba(17, 24, 39, 0.32); }

html[data-theme="light"] .modal-box {
  background: #fff;
  border-color: #e6e8ec;
  box-shadow:
    0 4px 12px rgba(16, 24, 40, 0.06),
    0 28px 60px -24px rgba(16, 24, 40, 0.34);
}

html[data-theme="light"] .qr {
  box-shadow: 0 6px 20px -12px rgba(16, 24, 40, 0.3);
}

/* ---------- 提示 / Toast ---------- */
html[data-theme="light"] .toast-item {
  background: #fff;
  border-color: #e6e8ec;
  color: var(--text);
  box-shadow: 0 10px 28px -14px rgba(16, 24, 40, 0.3);
}

html[data-theme="light"] .toast-item.ok {
  border-color: #b6e6d0;
  color: #0b7a55;
}

html[data-theme="light"] .toast-item.err {
  border-color: #f5c6c1;
  color: var(--danger);
}

/* ---------- 加载 ---------- */
html[data-theme="light"] .spinner {
  border-color: rgba(232, 85, 46, 0.16);
  border-top-color: var(--accent);
  box-shadow: none;
}

/* ---------- 滚动条 ---------- */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f2f5; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #d3d8e0; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #c0c7d2; }

/* ---------- 通知 ---------- */
html[data-theme="light"] .bell-icon { color: var(--accent); }
html[data-theme="light"] .bell.has-unread .bell-icon { text-shadow: none; }

html[data-theme="light"] .badge {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

html[data-theme="light"] .notif-panel {
  background: #fff;
  border-color: #e6e8ec;
  box-shadow: 0 20px 48px -22px rgba(16, 24, 40, 0.32);
}

html[data-theme="light"] .notif-item { border-bottom-color: #f0f2f5; }
html[data-theme="light"] .notif-item:hover { background: #fafbfc; }
html[data-theme="light"] .notif-item.unread { background: #fff7f3; }

html[data-theme="light"] .notif-item.unread .notif-title::before {
  background: var(--accent);
  box-shadow: none;
}

/* ---------- 分页 / 评分 ---------- */
html[data-theme="light"] .pager { border-top-color: #eef0f3; }

html[data-theme="light"] .score.high {
  color: #0b7a55; background: #e9f8f1; border-color: #b6e6d0;
}
html[data-theme="light"] .score.mid {
  color: #94520a; background: #fdf3e3; border-color: #f3d8a8;
}
html[data-theme="light"] .score.low {
  color: #5c6472; background: #f3f4f6; border-color: #e5e7eb;
}

/* ---------- 客服 ---------- */
html[data-theme="light"] .conv-item {
  background: #fbfcfd;
  border-color: #eceff3;
}

html[data-theme="light"] .conv-item:hover { border-color: #dfe3e9; }

html[data-theme="light"] .conv-item.active {
  background: #fff8f5;
  border-color: var(--accent);
  box-shadow: none;
}

html[data-theme="light"] .msg.me .msg-bubble {
  background: linear-gradient(135deg, #d94a12, var(--accent-dim));
  color: #fff;
}

html[data-theme="light"] .msg.them .msg-bubble {
  background: #f3f4f7;
  border-color: #e8eaee;
  color: var(--text);
}

html[data-theme="light"] .draft-box { border-top-color: #eef0f3; }

/* ---------- 自动化开关 ---------- */
html[data-theme="light"] .switch-row { border-bottom-color: #eef0f3; }

html[data-theme="light"] .toggle .track {
  background: #dfe3e9;
  border-color: #dfe3e9;
}

html[data-theme="light"] .toggle .knob {
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25);
}

html[data-theme="light"] .toggle input:checked + .track {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}

html[data-theme="light"] .toggle input:checked + .track .knob {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] .risk-copy b { color: var(--warn); }

/* ---------- 队列 / 多选 ---------- */
html[data-theme="light"] .queue-item {
  background: #fbfcfd;
  border-color: #eceff3;
}

html[data-theme="light"] .queue-opener {
  background: #fff6f1;
  border-left-color: var(--accent);
}

html[data-theme="light"] .pick-box {
  background: #fbfcfd;
  border-color: #e8ebef;
}

html[data-theme="light"] .pick-item { border-color: #e5e9ee; }
html[data-theme="light"] .pick-item:hover { border-color: #c9cfd8; }

html[data-theme="light"] .pick-item:has(input:checked) {
  border-color: var(--accent);
  background: #fff6f1;
  box-shadow: none;
}

/* ---------- 页脚 ---------- */
html[data-theme="light"] .card-sub { border-top-color: #eef0f3; }
html[data-theme="light"] .site-footer { border-top-color: #e8ebef; }
html[data-theme="light"] .foot-tech { color: #5f6774; }
html[data-theme="light"] .foot-tech b { color: var(--text); }
html[data-theme="light"] .foot-note { color: #5b636f; }
html[data-theme="light"] .foot-copy,
html[data-theme="light"] .foot-icp,
html[data-theme="light"] .foot-icp a { color: #68707d; }
html[data-theme="light"] .foot-icp a:hover { color: #4f5763; }

/* ---------- 登录 / 初始化页 ---------- */
html[data-theme="light"] .logo {
  color: var(--accent);
  text-shadow: none;
  animation: none;
}

html[data-theme="light"] .sub-brand { color: #8a7f7a; }

/* ---------- 主题切换按钮 ---------- */
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 760px) {
  .theme-btn { width: 30px; height: 28px; }
}

/* ---------- 排版微调 ----------
   深色主题靠字距撑"科技感"，白底上同样的字距会显得松散，
   这里收紧一点，接近大厂控制台的排版密度。 */
html[data-theme="light"] h1 { letter-spacing: 0.4px; }
html[data-theme="light"] h2 { letter-spacing: 0.3px; }
html[data-theme="light"] h3 { letter-spacing: 0.2px; }
html[data-theme="light"] .brand { letter-spacing: 0.6px; }
html[data-theme="light"] .tab { letter-spacing: 0.5px; }
html[data-theme="light"] .btn { letter-spacing: 0.3px; }

/* 价格用等宽数字，一列价格对齐得更整齐 */
html[data-theme="light"] .item-price,
html[data-theme="light"] .ref-price {
  font-variant-numeric: tabular-nums;
}

/* Logo 在浅色下不需要光晕，改成很轻的投影 */
html[data-theme="light"] .brand-logo {
  filter: none;
  box-shadow: 0 1px 2px rgba(212, 56, 13, 0.18),
              0 4px 12px -6px rgba(212, 56, 13, 0.35);
}
html[data-theme="light"] .logo-badge {
  box-shadow: 0 8px 22px -12px rgba(212, 56, 13, 0.45);
}