/* ==========================================================================
   浅色模式（Light）
   用法：<html class="theme-x" data-theme="light">
   说明：
     - 只覆盖「暗色写死」的部分；所有走 token 的组件会随变量自动适配
     - 首屏（hero）与地图影像保持深色——它们是照片带，浅底上放深图会显得脏
     - 图片在浅底上不需要重度压暗，滤镜整体放宽
   ========================================================================== */

.theme-x[data-theme="light"] {
  /* 底色与面板 */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f3;
  --surface-dark: #ffffff;

  /* 文字色阶（按 #f4f5f7 底反推，最暗一档仍 ≥4.5:1） */
  --ink-900: #0d0f12; --ink-800: #23272d; --ink-700: #41464e;
  --ink-600: #5a6069; --ink-500: #6d737c; --ink-400: #7d838c;
  --ink-300: #a2a8b0;

  /* 描边 */
  --line: rgba(15, 20, 28, .13);
  --line-2: rgba(15, 20, 28, .075);
  --line-strong: rgba(15, 20, 28, .22);
  --line-dark: rgba(15, 20, 28, .13);
  --line-dark-2: rgba(15, 20, 28, .075);
  --ice-25: #f9fafb; --ice-50: #f4f5f7;

  /* 品牌色：文字用的琥珀要压深，按钮底仍用亮琥珀 + 深字 */
  --blue-700: #8f4a08; --blue-600: #a85a0c; --blue-500: #bf6d14;
  --blue-400: #c9761d; --blue-300: #e08f2a; --blue-200: #f6d7ac;
  --accent-grad: linear-gradient(90deg, #f0a83f 0%, #dc8626 100%);
  --accent-ink: #1a1206;

  /* 状态色 */
  --ok: #1f7a45; --warn: #8a5a0b; --danger: #b32d2d; --info: #a85a0c;
  --ok-bg: rgba(31, 122, 69, .09);
  --warn-bg: rgba(138, 90, 11, .10);
  --danger-bg: rgba(179, 45, 45, .09);
  --info-bg: rgba(168, 90, 12, .09);

  --risk-low: #2f8f52; --risk-mid: #b98016; --risk-high: #b32d2d;

  /* 页脚 / 代码 / 地图 */
  --footer-bg: #eef0f3;
  --code-bg: #f6f7f9;
  --map-bg: #e7eaee;
  --shadow-1: 0 1px 2px rgba(15, 20, 28, .05);
  --shadow-2: 0 10px 26px rgba(15, 20, 28, .10);
  --shadow-3: 0 22px 48px rgba(15, 20, 28, .16);

  --tb-bg: #ffffff; --tb-line: rgba(15, 20, 28, .10);
}

/* ---------------------------------------------------------------- 顶栏 */
.theme-x[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--line);
}
.theme-x[data-theme="light"] .navpanel {
  background: #fff; border-color: var(--line);
  box-shadow: 0 20px 44px rgba(15, 20, 28, .14);
}
.theme-x[data-theme="light"] .navpanel a:hover,
.theme-x[data-theme="light"] .nav .navbtn:hover,
.theme-x[data-theme="light"] .nav > a:hover { background: rgba(15, 20, 28, .05); }
.theme-x[data-theme="light"] .acct-menu {
  background: #fff; box-shadow: 0 18px 40px rgba(15, 20, 28, .14);
}
.theme-x[data-theme="light"] .acct > button:hover,
.theme-x[data-theme="light"] .iconbtn:hover { background: rgba(15, 20, 28, .05); }
.theme-x[data-theme="light"] .asearch { background: var(--surface-2); }

/* ---------------------------------------------------------------- 按钮 */
.theme-x[data-theme="light"] .btn-ghost { background: #fff; }
.theme-x[data-theme="light"] .btn-ghost:hover { background: var(--surface-2); }
.theme-x[data-theme="light"] .btn-light { background: #0d0f12; color: #fff; }

/* ---------------------------------------------------------------- 卡片 */
.theme-x[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(15, 20, 28, .05); }
.theme-x[data-theme="light"] .pcard { box-shadow: 0 1px 2px rgba(15, 20, 28, .05); }
.theme-x[data-theme="light"] .pcard:hover { box-shadow: var(--shadow-2); }
.theme-x[data-theme="light"] .pcard-img .kind { background: rgba(255, 255, 255, .86); color: #2b3038; }
.theme-x[data-theme="light"] .pcard.is-locked { background: #fafbfc; }

/* ---------------------------------------------------------------- 表格 */
.theme-x[data-theme="light"] .tbl th {
  background: #f7f8fa; color: var(--ink-600); border-bottom-color: var(--line);
}
.theme-x[data-theme="light"] .tbl tbody tr:hover { background: #f7f8fa; }
.theme-x[data-theme="light"] .tbl tbody tr.is-highlight { background: rgba(168, 90, 12, .06); }
.theme-x[data-theme="light"] .tbl tbody tr.is-highlight:hover { background: rgba(168, 90, 12, .10); }

/* ------------------------------------------------------------ 标签页 */
.theme-x[data-theme="light"] .tabs { border-bottom-color: var(--line); }
.theme-x[data-theme="light"] .tabs button.active { border-bottom-color: var(--blue-600); }
.theme-x[data-theme="light"] .seg { background: #eceff3; }
.theme-x[data-theme="light"] .seg button.active {
  background: #fff; color: var(--blue-600); box-shadow: 0 1px 2px rgba(15, 20, 28, .08);
}

/* ---------------------------------------------------------------- 徽标 */
.theme-x[data-theme="light"] .badge-blue {
  background: rgba(168, 90, 12, .09); border-color: rgba(168, 90, 12, .26); color: #a85a0c;
}
.theme-x[data-theme="light"] .badge-ok {
  background: rgba(31, 122, 69, .09); border-color: rgba(31, 122, 69, .24); color: #1f7a45;
}
.theme-x[data-theme="light"] .badge-warn {
  background: rgba(138, 90, 11, .10); border-color: rgba(138, 90, 11, .24); color: #8a5a0b;
}
.theme-x[data-theme="light"] .badge-danger {
  background: rgba(179, 45, 45, .09); border-color: rgba(179, 45, 45, .24); color: #b32d2d;
}
.theme-x[data-theme="light"] .badge-gray {
  background: #f0f2f5; border-color: var(--line); color: var(--ink-600);
}
.theme-x[data-theme="light"] .badge-dark {
  background: rgba(15, 20, 28, .07); color: var(--ink-700); border-color: var(--line);
}

/* ---------------------------------------------------------------- 提示 */
.theme-x[data-theme="light"] .notice-plain {
  background: #f7f8fa; border-color: var(--line); color: var(--ink-600);
}
.theme-x[data-theme="light"] .notice-warn {
  background: rgba(138, 90, 11, .07); border-color: rgba(138, 90, 11, .22); color: #7a4f0a;
}
.theme-x[data-theme="light"] .notice-info {
  background: rgba(168, 90, 12, .07); border-color: rgba(168, 90, 12, .20); color: #8f4a08;
}
.theme-x[data-theme="light"] .notice-ok {
  background: rgba(31, 122, 69, .07); border-color: rgba(31, 122, 69, .20); color: #1c6b3d;
}
.theme-x[data-theme="light"] .notice-danger {
  background: rgba(179, 45, 45, .07); border-color: rgba(179, 45, 45, .22); color: #9c2828;
}
.theme-x[data-theme="light"] .disclaimer {
  background: rgba(138, 90, 11, .07); border-color: rgba(138, 90, 11, .22); color: #7a4f0a;
}

/* ------------------------------------------------------------ 风险胶囊 */
.theme-x[data-theme="light"] .riskpill.high { background: rgba(179, 45, 45, .10); color: #b32d2d; }
.theme-x[data-theme="light"] .riskpill.medium { background: rgba(138, 90, 11, .10); color: #8a5a0b; }
.theme-x[data-theme="light"] .riskpill.low { background: rgba(31, 122, 69, .10); color: #1f7a45; }

/* ---------------------------------------------------------- 表单/输入 */
.theme-x[data-theme="light"] .input,
.theme-x[data-theme="light"] .ap-input { background: #fff; }
.theme-x[data-theme="light"] .fsearch,
.theme-x[data-theme="light"] .finput { background: var(--surface-2); }
.theme-x[data-theme="light"] .fcheck input { background: #fff; }
.theme-x[data-theme="light"] .fcheck input:checked { background: var(--blue-400); border-color: var(--blue-400); }
.theme-x[data-theme="light"] .fcheck input:checked::after { border-color: #fff; }
.theme-x[data-theme="light"] .vtoggle button { background: var(--surface-2); }

/* ------------------------------------------------------------ 侧栏/导航 */
.theme-x[data-theme="light"] .sidenav a:hover { background: #f2f4f7; }
.theme-x[data-theme="light"] .sidenav a.active { background: rgba(168, 90, 12, .09); }
.theme-x[data-theme="light"] .sidenav a .cnt,
.theme-x[data-theme="light"] .sidenav .ep-m { background: #f0f2f5; color: var(--ink-500); }
.theme-x[data-theme="light"] .cside nav a:hover { background: #f2f4f7; }
.theme-x[data-theme="light"] .cside nav a.active { background: rgba(168, 90, 12, .09); }

/* ---------------------------------------------------------------- 页脚 */
.theme-x[data-theme="light"] .footer,
.theme-x[data-theme="light"] .footer-slim { background: var(--footer-bg); }
.theme-x[data-theme="light"] .footer h5 { color: var(--ink-700); }
.theme-x[data-theme="light"] .footer a,
.theme-x[data-theme="light"] .footer .f-brand p,
.theme-x[data-theme="light"] .footer .f-trust,
.theme-x[data-theme="light"] .footer .f-bot { color: var(--ink-600); }
.theme-x[data-theme="light"] .footer .f-brand .brand-name { color: var(--ink-900); }
.theme-x[data-theme="light"] .footer .f-brand .contacts b { color: var(--ink-900); }
.theme-x[data-theme="light"] .fl-todo { color: var(--ink-400); }

/* ------------------------------------------------------ 演示控制条/水印 */
.theme-x[data-theme="light"] .demobar {
  background: rgba(255, 255, 255, .96); color: var(--ink-700);
  border-color: var(--line); box-shadow: 0 10px 26px rgba(15, 20, 28, .14);
}
.theme-x[data-theme="light"] .demobar a { color: var(--ink-700); }
.theme-x[data-theme="light"] .demobar .db-label { color: var(--ink-500); }
.theme-x[data-theme="light"] .demobar a.on { color: #fff; }
.theme-x[data-theme="light"] .mark-demo {
  background: rgba(255, 255, 255, .92); color: var(--ink-600); border-color: var(--line);
}

/* ------------------------------------------------------------ 代码块 */
.theme-x[data-theme="light"] .codeblk {
  background: #f6f7f9; border-color: var(--line); color: #2b3138;
}
.theme-x[data-theme="light"] .codeblk .k { color: #a85a0c; }
.theme-x[data-theme="light"] .codeblk .s { color: #1f7a45; }
.theme-x[data-theme="light"] .codeblk .n { color: #8a5a0b; }
.theme-x[data-theme="light"] .codeblk .cm { color: #6d737c; }
.theme-x[data-theme="light"] .codeblk .hl { background: rgba(168, 90, 12, .12); color: #7a4208; }

/* ---------------------------------------------------------------- 图表 */
.theme-x[data-theme="light"] .chart .grid-l { stroke: rgba(15, 20, 28, .10); }
.theme-x[data-theme="light"] .chart .bar { fill: #d8dade; }
.theme-x[data-theme="light"] .chart .bar:hover { fill: var(--blue-400); }

/* --------------------------------------------------- 抽屉/弹窗/其它块 */
.theme-x[data-theme="light"] .drawer { background: #fff; box-shadow: -16px 0 48px rgba(15, 20, 28, .14); }
.theme-x[data-theme="light"] .x-btn:hover { background: #f2f4f7; }
.theme-x[data-theme="light"] .reason { background: var(--surface-2); }
.theme-x[data-theme="light"] .gate { background: #fff; }
.theme-x[data-theme="light"] .gate .gi { background: rgba(168, 90, 12, .09); }
.theme-x[data-theme="light"] .step { background: #fff; }
.theme-x[data-theme="light"] .step:hover { background: var(--surface-2); }
.theme-x[data-theme="light"] .step.is-todo { background: #fafbfc; }
.theme-x[data-theme="light"] .step .sn { background: #eef0f3; }
.theme-x[data-theme="light"] .faq { background: #fff; }
.theme-x[data-theme="light"] .appcard { background: #fff; }
.theme-x[data-theme="light"] .appcard .ah .ai { background: rgba(168, 90, 12, .09); }
.theme-x[data-theme="light"] .appcard .ly { background: var(--surface-2); }
.theme-x[data-theme="light"] .est-out { background: var(--surface-2); }
.theme-x[data-theme="light"] .splitrow input[type=range] { background: #dfe3e8; }
.theme-x[data-theme="light"] .splitrow input[type=range]::-webkit-slider-thumb {
  background: #fff; border-color: var(--blue-400);
}
.theme-x[data-theme="light"] .specitem { background: #fff; }
.theme-x[data-theme="light"] .recency thead th { background: var(--surface-2); }
.theme-x[data-theme="light"] .parcel { stroke: rgba(15, 20, 28, .30); }
.theme-x[data-theme="light"] .mapwrap .mapnote,
.theme-x[data-theme="light"] .maptool .badge-dark {
  background: rgba(255, 255, 255, .88); color: var(--ink-700); border-color: var(--line);
}
.theme-x[data-theme="light"] .tl-dot { background: #fff; }
.theme-x[data-theme="light"] .tl-node.done .tl-dot { background: var(--blue-400); border-color: var(--blue-400); }
.theme-x[data-theme="light"] .todo .ti { color: #8a5a0b; }
.theme-x[data-theme="light"] .todo .ti.ok { color: #1f7a45; }
.theme-x[data-theme="light"] .ribbon { background: var(--blue-400); color: #fff; }
.theme-x[data-theme="light"] .btn[disabled],
.theme-x[data-theme="light"] .btn.is-disabled {
  background: #eceff2; color: var(--ink-400); border-color: var(--line);
}

/* 滚动条 */
.theme-x[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(15, 20, 28, .18); border-color: var(--bg);
}
.theme-x[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }

/* --------------------------------------------------- 图片：浅底放宽压暗 */
.theme-x[data-theme="light"] .fit { filter: saturate(.86) brightness(.94) contrast(1.02); }
.theme-x[data-theme="light"] .mapwrap img.basemap { filter: saturate(.78) brightness(.88) contrast(1.02); }
.theme-x[data-theme="light"] .mapwrap svg.overlay { filter: saturate(.9) brightness(.98); }
.theme-x[data-theme="light"] .legend-swatch { filter: none; }
.theme-x[data-theme="light"] .pcard2 .p2-img img { filter: saturate(.86) brightness(.95); }
.theme-x[data-theme="light"] .xcard .x-art img { filter: saturate(.86) brightness(.95); }
.theme-x[data-theme="light"] .dpanel .dp-img img { filter: saturate(.86) brightness(.95); }
.theme-x[data-theme="light"] .catbanner .cb-bg img { opacity: .30; filter: saturate(.8) brightness(1.02); }
.theme-x[data-theme="light"] .hero2 .h2-art { opacity: .9; }
.theme-x[data-theme="light"] .mapwrap::after { display: none; }

/* 首屏与地图保留深色：它们是照片带，浅底上放深图会显脏 */
.theme-x[data-theme="light"] .hero2 { --hero-bg: #0b0b0d; }

/* ------------------------------------------------------- 目录横幅
   横幅底是深色影像带，浅色模式下文字必须保持浅色，否则深字压深底看不见 */
.theme-x[data-theme="light"] .catbanner h1 { color: #f4f5f6; }
.theme-x[data-theme="light"] .catbanner .cb-lead { color: #c3c7cd; }
.theme-x[data-theme="light"] .catbanner .eyebrow { color: #f0a03c; }
.theme-x[data-theme="light"] .catbanner .cb-feats { border-top-color: rgba(255, 255, 255, .14); }
.theme-x[data-theme="light"] .catbanner .cb-feats .feat { border-left-color: rgba(255, 255, 255, .14); }
.theme-x[data-theme="light"] .catbanner .cb-feats .fi { color: #cfd4da; }
.theme-x[data-theme="light"] .catbanner .cb-feats b { color: #e6e8ea; }
.theme-x[data-theme="light"] .catbanner .cb-feats span { color: #a5aab1; }