/* ============================================================================
   TopDome 全站主题系统 theme.css
   约定：
   - 语义令牌统一为 --td-*；各页面既有变量组（app.css :root / --cs-*）在此挂钩
   - html[data-theme="dark"] 为默认（收敛后的暗色调色板：橙为主色，青/绿/红为语义辅色）
   - html[data-theme="light"] 为 Codex 风纯白主题：白底、高对比、蓝色唯一强调色（苹果蓝 #0071e3）
   - 3D 工作台视口随主题换装（白主题出图，见末尾区块）；子系统拓扑图等发光区仍可用 --td-canvas 深底
   - 覆盖页面内联硬编码样式时，选择器一律加 html[data-theme=...] 前缀提升优先级
   - 字体：MiSans 字族（Regular 400 / Medium 500 / Demibold 600），回退到系统字体栈
   ========================================================================== */

/* ---- MiSans 字族声明（子集化版本，按 unicode range 分割为多个 woff2 文件） ---- */
@import url('../fonts/MiSans-Regular.css');
@import url('../fonts/MiSans-Medium.css');
@import url('../fonts/MiSans-Demibold.css');

:root,
html[data-theme="dark"] {
    font-family: 'MiSans', -apple-system, BlinkMacSystemFont, "SF Pro Text", 
                 "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    /* ---- 品牌与语义色（全站收敛为：橙 / 青 / 绿 / 红 / 琥珀 5 色 + 中性灰阶） ---- */
    --td-primary: #ff9933;
    --td-primary-hover: #ffb066;
    --td-primary-text: #ff9933;
    --td-primary-soft: rgba(255, 153, 51, 0.12);
    --td-primary-border: rgba(255, 153, 51, 0.5);
    --td-info: #66ccff;
    --td-info-soft: rgba(102, 204, 255, 0.12);
    --td-info-border: rgba(102, 204, 255, 0.45);
    --td-success: #0bd318;
    --td-success-soft: rgba(11, 211, 24, 0.12);
    --td-danger: #ff3b30;
    --td-danger-soft: rgba(255, 59, 48, 0.12);
    --td-warn: #fbbf24;
    --td-warn-soft: rgba(251, 191, 36, 0.14);

    /* ---- 中性灰阶（底 / 面板 / 卡片 / 输入 / 悬停） ---- */
    --td-bg: #050508;
    --td-bg-panel: rgba(20, 22, 28, 0.95);
    --td-bg-card: rgba(30, 32, 40, 0.95);
    --td-bg-input: rgba(0, 0, 0, 0.4);
    --td-bg-hover: rgba(255, 255, 255, 0.08);
    --td-node-bg: #15161f;
    --td-node-border: #2b2c44;

    /* ---- 文字（对比度提升：正文 0.92 / 次要 0.75 / 弱化 0.55） ---- */
    --td-text: rgba(255, 255, 255, 0.92);
    --td-text-2: rgba(255, 255, 255, 0.75);
    --td-text-3: rgba(255, 255, 255, 0.55);

    /* ---- 边框 / 阴影 / 画布 ---- */
    --td-border: rgba(255, 255, 255, 0.16);
    --td-border-soft: rgba(255, 255, 255, 0.09);
    --td-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.3);
    --td-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --td-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
    --td-canvas: #050508;

    /* ---- 子系统拓扑画布（React Flow）与边标签取色 ---- */
    --td-flow-bg: #0a0a0f;
    --td-flow-dots: #1a1b28;
    --td-edge-label: #94a3b8;
    --td-edge-label-bg: #0a0a0f;
    /* 配电拓扑线色语义令牌 [2026-08-31 减色]：主供链橙 / 设备灰·靛，相别三 hue 仅用于回路线 */
    --pwr-c-grid: #ff9933;            /* 市电进线链（power 节点边框+标题、e-grid 边、图例） */
    --pwr-c-cab:  #5d5d5d;            /* 总柜/分箱中性灰框 */
    --pwr-c-end:  #818cf8;            /* 显示屏设备靛蓝 */
    /* 主回路 SVG 主题令牌（svgFor 经 var() 引用，暗/白两档即时换肤） */
    --pwr-svg-text:  #e2e8f0;   --pwr-svg-dim:  #94a3b8;
    --pwr-svg-in:    #ff9933;   /* 主供链（进线 / QF0 / 支路主线） */
    --pwr-svg-pe:    #4ade80;   /* PE 接地安全绿 */
    --pwr-svg-bus:   #aab2c5;   /* 母排中性银灰（减色，避开 L1 琥珀撞车） */
    --pwr-svg-ctl:   #818cf8;   /* SPD / PLC 控制族 */
    --pwr-svg-panel: #15161f;   --pwr-svg-brd:  #2b2c44;
    --pwr-phase-1:   #fbbf24;   --pwr-phase-2:  #4ade80;   --pwr-phase-3:  #66ccff;
    --pwr-fail:      #f87171;

    /* ---- 设计宪法：字号阶 / 圆角阶 / 动效 / 层级（主题无关，两主题共享） ----
       字号阶：全站正文与标题只允许使用以下档位
       动效：过渡时长 0.15s / 0.25s，缓动只用 --td-ease / --td-ease-out；
             禁止弹跳曲线与无限循环动画（加载指示、在线状态点除外）
       层级：顶栏 100 / 下拉 200 / 遮罩 300 / 弹窗 400 / toast 500 */
    --td-font-xs: 12px;
    --td-font-sm: 13px;
    --td-font-md: 14px;
    --td-font-lg: 16px;
    --td-font-xl: 20px;
    --td-font-2xl: 28px;
    --td-font-3xl: 40px;

    --td-radius-sm: 6px;
    --td-radius-md: 8px;
    --td-radius-lg: 12px;
    --td-radius-xl: 16px;
    --td-radius-pill: 9999px;

    --td-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --td-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --td-dur-fast: 0.15s;
    --td-dur: 0.25s;

    --td-z-header: 100;
    --td-z-dropdown: 200;
    --td-z-overlay: 300;
    --td-z-modal: 400;
    --td-z-toast: 500;

    /* ---- app.css 变量组挂钩 ---- */
    --bg-dark: var(--td-bg);
    --panel-bg: var(--td-bg-panel);
    --border-color: var(--td-border);
    --text-primary: var(--td-text);
    --text-secondary: var(--td-text-2);
    --accent-color: var(--td-success);

    /* ---- 子系统页 --cs-* 变量组挂钩（控制/配电/结构共用） ---- */
    --cs-bg: var(--td-bg);
    --cs-panel: var(--td-bg-panel);
    --cs-border: var(--td-border-soft);
    --cs-text: var(--td-text);
    --cs-text-dim: var(--td-text-3);
    --cs-orange: var(--td-primary);
    --cs-cyan: var(--td-info);
    --cs-green: var(--td-success);
    --cs-red: var(--td-danger);
    --cs-amber: var(--td-warn);
    --cs-purple: #a78bfa;
    --cs-indigo: #818cf8;
}

/* ============================================================================
   纯白主题（Codex 风：白底 / 深字 / 细灰边 / 苹果蓝唯一强调色 #0071e3）
   ========================================================================== */
html[data-theme="light"] {
    /* 亮色主题品牌色：苹果官网蓝 #0071e3（白底对比度 4.6:1，达 WCAG AA） */
    --td-primary: #0071e3;
    --td-primary-hover: #0077ED;
    --td-primary-text: #000000;          /* 文字用稍深蓝色保对比度 */
    --td-primary-soft: rgba(0, 113, 227, 0.08);
    --td-primary-border: rgba(0, 113, 227, 0.4);
    --td-info: #01070a;                  /* 仅限数据可视化语义（拓扑信号线等），禁止用于 UI 交互层 */
    --td-info-soft: rgba(0, 114, 181, 0.1);
    --td-info-border: rgba(0, 114, 181, 0.45);
    --td-success: #0a8f14;
    --td-success-soft: rgba(10, 143, 20, 0.12);
    --td-danger: #d92d20;
    --td-danger-soft: rgba(217, 45, 32, 0.1);
    --td-warn: #b45309;
    --td-warn-soft: rgba(180, 83, 9, 0.12);

    /* 苹果级中性色阶：#1d1d1f 正文 / #48484c 次要 / #6e6e73 弱化；底 #f5f5f7；发丝边 #d2d2d7 */
    --td-bg: #ffffff;
    --td-bg-panel: #f5f5f7;
    --td-bg-card: #ffffff;
    --td-bg-input: #f5f5f7;
    --td-bg-hover: rgba(0, 0, 0, 0.06);
    --td-node-bg: #ffffff;
    --td-node-border: #d2d2d7;

    --td-text: #1d1d1f;
    --td-text-2: #010101;
    --td-text-3: #000000;

    --td-border: #d2d2d7;
    --td-border-soft: #e8e8ed;
    --td-shadow-sm: 0 2px 8px rgba(15, 15, 25, 0.06);
    --td-shadow: 0 6px 24px rgba(15, 15, 25, 0.1);
    --td-shadow-lg: 0 16px 40px rgba(15, 15, 25, 0.14);
    --td-canvas: #0f1015;                /* 可视化画布恒深底 */

    /* 子系统拓扑画布（React Flow）：白底 + 深色元素（[亮色主题深度改造]） */
    --td-flow-bg: #ffffff;
    --td-flow-dots: #d2d2d7;
    --td-edge-label: #48484c;
    --td-edge-label-bg: #ffffff;
    /* 配电拓扑线色 [2026-08-31] 白主题 = 黑色线条（用户口径：高对比、可辨识） */
    --pwr-c-grid: #1d1d1f;
    --pwr-c-cab:  #1d1d1f;
    --pwr-c-end:  #1d1d1f;            /* 屏边框同黑；标题留深靛见 L481 */
    /* 主回路 SVG 白档：全线近黑 + 文字三级灰阶（dim 用 Apple 弱化灰，非纯黑） */
    --pwr-svg-text:  #1d1d1f;   --pwr-svg-dim:  #6e6e73;
    --pwr-svg-in:    #1d1d1f;
    --pwr-svg-pe:    #1d1d1f;
    --pwr-svg-bus:   #1d1d1f;
    --pwr-svg-ctl:   #1d1d1f;
    --pwr-svg-panel: #f5f5f7;   --pwr-svg-brd:  #1d1d1f;
    --pwr-phase-1:   #1d1d1f;   --pwr-phase-2:  #1d1d1f;   --pwr-phase-3:  #1d1d1f;
    --pwr-fail:      #d92d20;

    --bg-dark: var(--td-bg);
    --panel-bg: var(--td-bg-panel);
    --border-color: var(--td-border);
    --text-primary: var(--td-text);
    --text-secondary: var(--td-text-2);
    --accent-color: var(--td-success);

    --cs-bg: var(--td-bg);
    --cs-panel: var(--td-bg-panel);
    --cs-border: var(--td-border-soft);
    --cs-text: var(--td-text);
    --cs-text-dim: var(--td-text-3);
    --cs-orange: var(--td-primary-text);
    --cs-cyan: var(--td-info);
    --cs-green: var(--td-success);
    --cs-red: var(--td-danger);
    --cs-amber: var(--td-warn);
    --cs-purple: #7c3aed;
    --cs-indigo: #4f46e5;
}

/* ============================================================================
   通用组件适配（覆盖各页面硬编码深色样式，html[data-theme] 前缀保优先级）
   ========================================================================== */

/* ---- 基础（仅作用于带共用顶栏的工作台页面；营销/分享页保留自身设计稿背景） ---- */
html[data-theme="light"] body:has(.app-header) { background: var(--td-bg); color: var(--td-text); }
html[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); }

/* ---- 顶栏（shared_header） ---- */
html[data-theme="light"] .app-header {
    background: #ffffff; border-bottom: 1px solid var(--td-border-soft);
    box-shadow: 0 1px 8px rgba(15, 15, 25, 0.06);
}
html[data-theme="light"] .brand-logo,
html[data-theme="light"] .brand-tag { color: #1a1a1a; }
html[data-theme="light"] .brand-tag { color: var(--td-primary-text); }
html[data-theme="light"] .top-nav-matrix .matrix-item { color: var(--td-text-2); }
html[data-theme="light"] .top-nav-matrix .matrix-item:hover { color: #1a1a1a; background: var(--td-bg-hover); }
html[data-theme="light"] .top-nav-matrix .matrix-item.active { color: var(--td-primary-text); }
html[data-theme="light"] .avatar-svg,
html[data-theme="light"] .app-user-zone svg { color: var(--td-text-2); }

/* ---- 顶栏下拉面板（用户面板；[项目树重构] hub 弹层条款已废） ---- */
html[data-theme="light"] .user-account-panel,
html[data-theme="light"] .annotation-dropdown {
    background: #ffffff; border: 1px solid var(--td-border-soft);
    box-shadow: var(--td-shadow); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-theme="light"] .user-menu-item { color: var(--td-text-2); border-color: var(--td-border-soft); }
html[data-theme="light"] .user-menu-item:hover { background: var(--td-bg-hover); color: #1a1a1a; }
html[data-theme="light"] .user-email { color: #1a1a1a; }
html[data-theme="light"] .stat-box { background: var(--td-bg-panel); border-color: var(--td-border-soft); }
html[data-theme="light"] .stat-label { color: var(--td-text-3); text-shadow: none; }
html[data-theme="light"] .stat-value { color: #1a1a1a; text-shadow: none; }
html[data-theme="light"] .panel-logout-btn { color: var(--td-danger); border-color: rgba(217, 45, 32, 0.4); background: var(--td-danger-soft); }

/* ---- 工作台左面板（app.css；[项目树重构] 右栏已删） ---- */
html[data-theme="light"] .panel-left {
    background: var(--td-bg-panel); backdrop-filter: none; -webkit-backdrop-filter: none;
    border-color: var(--td-border-soft);
}
html[data-theme="light"] .panel-title { color: var(--td-text-2); }
html[data-theme="light"] .placeholder-title { color: var(--td-text-2); border-bottom-color: var(--td-border-soft); }
html[data-theme="light"] .control-group label { color: var(--td-text-2); }
html[data-theme="light"] .input-container { background: var(--td-bg-input); border-color: var(--td-border); }
html[data-theme="light"] .input-container:focus-within { border-color: #1a1a1a; }
html[data-theme="light"] .input-container input { color: var(--td-text); }
html[data-theme="light"] .spin-controls { background: rgba(0, 0, 0, 0.05); }
html[data-theme="light"] .spin-btn { color: var(--td-text-2); }
html[data-theme="light"] .spin-btn:hover { background: rgba(0, 0, 0, 0.1); color: #1a1a1a; }
html[data-theme="light"] .slider-wrapper input[type="range"] { background: rgba(0, 0, 0, 0.15); }
html[data-theme="light"] .slider-value,
html[data-theme="light"] .slider-wrapper .slider-value { color: var(--td-text-2); }

/* ---- 统计卡片 / BOM 表 ---- */
html[data-theme="light"] .stat-card {
    background: #ffffff; border: 1px solid var(--td-border-soft);
    box-shadow: 0 2px 8px rgba(15, 15, 25, 0.05);
}
html[data-theme="light"] .stat-card:hover { background: #ffffff; }
html[data-theme="light"] .stat-val { color: #1a1a1a; text-shadow: none; }
html[data-theme="light"] .stat-val span { color: var(--td-text-3); }
html[data-theme="light"] .bom-header { color: var(--td-text-2); border-bottom-color: var(--td-border-soft); }
html[data-theme="light"] .bom-row { color: #3a3a42; background: rgba(0, 0, 0, 0.02); }
html[data-theme="light"] .bom-row:hover,
html[data-theme="light"] .bom-row.hovered { background: rgba(0, 0, 0, 0.05); border-color: var(--td-border); color: var(--td-text); }
html[data-theme="light"] .bom-row.active { background: var(--td-primary-soft) !important; border-color: var(--td-primary-border); color: var(--td-primary-text) !important; }

/* ---- 屏幕卡片缩略图（[项目树重构] 长廊已删，白底上线条取深色） ---- */
html[data-theme="light"] .module-svg polygon { fill: rgba(0, 0, 0, 0.04); stroke: var(--td-text-3); }
html[data-theme="light"] .module-svg text { fill: #1a1a1a; }
html[data-theme="light"] .module-qty { color: var(--td-text-2); }
/* [视窗控件重排] 视图条无底色：白主题下只调文字色，选中态仍用标志色 */
html[data-theme="light"] .btn-view { color: var(--td-text-2); text-shadow: none; }
html[data-theme="light"] .btn-view:hover { color: #1a1a1a; }
html[data-theme="light"] .btn-view.active { color: var(--td-primary-text, #e07c00); }
html[data-theme="light"] .divider { background: var(--td-border-soft); }

/* ---- 弹窗 / 遮罩 / 通用按钮 ---- */
html[data-theme="light"] .modal-content,
html[data-theme="light"] .modal-box { background: #ffffff; border: 1px solid var(--td-border-soft); box-shadow: var(--td-shadow); color: var(--td-text); }
html[data-theme="light"] select { background: var(--td-bg-input); color: var(--td-text); border-color: var(--td-border); }

/* ---- 控制系统拓扑画布（renderer.js 注入样式之后的覆盖） ---- */
html[data-theme="light"] .topo-flow .react-flow { background: #ffffff !important; }
/* 只改点阵圆点色；禁用 * 通配，否则会把 pattern 容器 rect 的 url() 填充涂成实色灰底 */
html[data-theme="light"] .topo-flow .react-flow__background circle { fill: var(--td-flow-dots) !important; }
html[data-theme="light"] .pwr-flow .react-flow { background: #ffffff !important; }
html[data-theme="light"] .pwr-flow .react-flow__background circle { fill: var(--td-flow-dots) !important; }
html[data-theme="light"] .topo-node { background: var(--td-node-bg); border-color: var(--td-node-border); color: var(--td-text); box-shadow: 0 3px 10px rgba(15, 15, 25, 0.08); }
html[data-theme="light"] .topo-node-header { background: rgba(0, 0, 0, 0.03); border-bottom-color: var(--td-node-border); }
html[data-theme="light"] .topo-node-detail,
html[data-theme="light"] .topo-ctrl-detail,
html[data-theme="light"] .topo-src-detail { color: var(--td-text-3); }
html[data-theme="light"] .topo-node-signal { border-color: var(--td-info); }
html[data-theme="light"] .topo-node-signal .topo-node-title,
html[data-theme="light"] .topo-src-name,
html[data-theme="light"] .topo-src-row-num,
html[data-theme="light"] .topo-port-name { color: var(--td-info); }
html[data-theme="light"] .topo-node-controller { border-color: var(--td-primary-text); }
html[data-theme="light"] .topo-ctrl-name { color: var(--td-primary-text); }
html[data-theme="light"] .topo-node-fiber { border-color: var(--td-warn); }
html[data-theme="light"] .topo-node-fiber .topo-node-title,
html[data-theme="light"] .topo-port-num { color: var(--td-warn); }
html[data-theme="light"] .topo-panel { background: rgba(0, 114, 181, 0.04); border-color: rgba(0, 114, 181, 0.5); }
html[data-theme="light"] .topo-panel-header { color: var(--td-info); border-bottom-color: rgba(0, 114, 181, 0.25); }
html[data-theme="light"] .topo-panel-header .sub { color: var(--td-text-3); }
html[data-theme="light"] .topo-card { background: rgba(0, 114, 181, 0.08); border-color: var(--td-info); color: #1a1a1a; }
html[data-theme="light"] .topo-card.first { background: var(--td-primary-soft); border-color: var(--td-primary-text); }
html[data-theme="light"] .topo-card-grid { color: var(--td-text-3); }
html[data-theme="light"] .topo-m,
html[data-theme="light"] .topo-card-ph,
html[data-theme="light"] .topo-flow .react-flow__handle { background: #ffffff; border-color: var(--td-info); }
html[data-theme="light"] .topo-usage-bar { background: var(--td-border-soft); }
html[data-theme="light"] .topo-usage-text,
html[data-theme="light"] .topo-ctrl-util,
html[data-theme="light"] .topo-src-util { color: var(--td-text-3); }
html[data-theme="light"] .topo-chip { color: var(--td-text-2); background: rgba(0, 0, 0, 0.04); border-color: var(--td-border-soft); }
html[data-theme="light"] .topo-mini-label,
html[data-theme="light"] .topo-section-label { color: var(--td-text-3); }
html[data-theme="light"] .topo-legend { background: rgba(255, 255, 255, 0.95); border-color: var(--td-border-soft); }
html[data-theme="light"] .topo-legend-title { color: var(--td-text-2); border-bottom-color: var(--td-border-soft); }
html[data-theme="light"] .topo-legend-row { color: var(--td-text-2); }
html[data-theme="light"] .topo-legend-toggle { background: #ffffff; border-color: var(--td-border-soft); color: var(--td-text-3); }
html[data-theme="light"] .topo-flow .react-flow__controls-button { background: #ffffff; border-bottom-color: var(--td-border-soft); fill: var(--td-text-3); }
html[data-theme="light"] .topo-flow .react-flow__controls-button:hover { fill: var(--td-primary-text); background: var(--td-bg-hover); }

/* ---- [白主题出图] 工作台视口已改为随主题换装（见文件末尾白主题区块），
   原「画布恒深底」条款废止；子系统拓扑图等仍可用 --td-canvas 令牌 ---- */

/* ============================================================================
   营销首页（index.html）亮色适配：Hero 大图区恒深色，其余区块跟随主题
   ========================================================================== */
html[data-theme="light"] body:has(.hero) { background: #ffffff; color: var(--td-text); }

/* ---- 顶栏 ---- */
html[data-theme="light"] body:has(.hero) header { background: rgba(255, 255, 255, 0.98); border-bottom-color: var(--td-border-soft); }
html[data-theme="light"] body:has(.hero) .nav-links a { color: var(--td-text-2); }
html[data-theme="light"] body:has(.hero) .nav-links a:hover { color: var(--td-primary-text); }
html[data-theme="light"] body:has(.hero) .brand-name { color: #1a1a1a; }
html[data-theme="light"] body:has(.hero) .login-icon-btn { background: rgba(0, 0, 0, 0.05); border-color: var(--td-border-soft); color: var(--td-text-2); }
html[data-theme="light"] body:has(.hero) .login-icon-btn:hover { color: var(--td-primary-text); border-color: var(--td-primary-border); background: var(--td-primary-soft); }

/* ---- 功能区 ---- */
html[data-theme="light"] body:has(.hero) .section-title,
html[data-theme="light"] body:has(.hero) .f-title { color: #1a1a1a; }
html[data-theme="light"] body:has(.hero) .f-tag { color: var(--td-primary-text); }
html[data-theme="light"] body:has(.hero) .f-desc { color: var(--td-text-3); }
html[data-theme="light"] body:has(.hero) .f-list li { color: var(--td-text-2); }
html[data-theme="light"] body:has(.hero) .f-list li::before { color: var(--td-primary-text); }
html[data-theme="light"] body:has(.hero) .feature-img { border-color: var(--td-border-soft); box-shadow: var(--td-shadow); }
html[data-theme="light"] body:has(.hero) .feature-img:hover { border-color: var(--td-border); }

/* ---- 版本矩阵 ---- */
html[data-theme="light"] body:has(.hero) .matrix-container { background: #f7f7f8; border-color: var(--td-border-soft); }
html[data-theme="light"] body:has(.hero) .m-section-title { background: rgba(0, 0, 0, 0.03); border-top-color: rgba(0, 0, 0, 0.04); color: var(--td-text-3); }
html[data-theme="light"] body:has(.hero) .m-cell { border-bottom-color: rgba(0, 0, 0, 0.05); }
html[data-theme="light"] body:has(.hero) .m-label { color: var(--td-text-2); }
html[data-theme="light"] body:has(.hero) .m-name { color: #1a1a1a; }
html[data-theme="light"] body:has(.hero) .m-price { color: var(--td-text-3); }
html[data-theme="light"] body:has(.hero) .m-btn { background: rgba(0, 0, 0, 0.04); color: var(--td-text-2); border-color: var(--td-border-soft); }
html[data-theme="light"] body:has(.hero) .m-btn-std { background: rgba(0, 0, 0, 0.04); color: var(--td-text-2); border-color: var(--td-border); }
html[data-theme="light"] body:has(.hero) .m-btn-pro { background: var(--td-primary); color: #fff; }
html[data-theme="light"] body:has(.hero) .pro-tag { background: rgba(0, 0, 0, 0.06); color: var(--td-text-3); }
html[data-theme="light"] body:has(.hero) .matrix-container .m-col-plan:hover { background: #ffffff; box-shadow: var(--td-shadow); }
html[data-theme="light"] body:has(.hero) .m-col-plan:hover .m-name { color: var(--td-primary-text); }
html[data-theme="light"] body:has(.hero) .m-col-plan:hover .m-price { color: #1a1a1a; }

/* ---- FAQ 与页脚 ---- */
html[data-theme="light"] body:has(.hero) .faq-item { border-bottom-color: var(--td-border-soft); }
html[data-theme="light"] body:has(.hero) .faq-q { color: #1a1a1a; }
html[data-theme="light"] body:has(.hero) .faq-q::after { color: var(--td-primary-text); }
html[data-theme="light"] body:has(.hero) .faq-a { color: var(--td-text-3); }
html[data-theme="light"] body:has(.hero) footer { border-top-color: var(--td-border-soft); color: var(--td-text-3); }
html[data-theme="light"] body:has(.hero) footer a { color: var(--td-text-2); }

/* ---- 登录弹窗亮色化 ---- */
html[data-theme="light"] body:has(.hero) .auth-modal { background: #ffffff; border-color: var(--td-border-soft); box-shadow: var(--td-shadow-lg); }
html[data-theme="light"] body:has(.hero) .auth-title { color: #1a1a1a; }
html[data-theme="light"] body:has(.hero) .auth-subtitle { color: var(--td-text-3); }
html[data-theme="light"] body:has(.hero) .auth-input { background: var(--td-bg-input); border-color: var(--td-border); color: var(--td-text); }
html[data-theme="light"] body:has(.hero) .auth-input::placeholder { color: var(--td-text-3); }
html[data-theme="light"] body:has(.hero) .auth-input:focus { background: #ffffff; }
html[data-theme="light"] body:has(.hero) .auth-btn.btn-secondary { background: rgba(0, 0, 0, 0.04); border-color: var(--td-border); color: var(--td-text-2); }
html[data-theme="light"] body:has(.hero) .auth-btn.btn-primary { color: #fff; }
html[data-theme="light"] body:has(.hero) .auth-footer { color: var(--td-text-3); }

/* Hero 大图区恒深色：区内令牌回退为亮橙，避免白底深橙误伤深底场景 */
html[data-theme="light"] body:has(.hero) .hero {
    --td-primary: #ff9933;
    --td-primary-hover: #ffb066;
    --td-primary-text: #ff9933;
    --primary: #ff9933;
}

/* ============================================================
   [白主题出图] 设计工作台视口：纯白背景 + 深色元素（scene-theme.js 同步 3D 取色）
   豁免：像素检视器 / BOM 全屏模态等近景发光可视化区保留深底（设计决策）
   ============================================================ */
html[data-theme="light"] .viewport-container { background-color: var(--td-bg); }
/* 拼缝雷达：mini 卡片与展开浮层改浅底（绘制色由 sceneTheme().ui 同步取深） */
html[data-theme="light"] #seam-chart-hud { background: rgba(255, 255, 255, 0.92); border-color: var(--td-border-soft); }
html[data-theme="light"] #seam-chart-hud.hud-mini { background: rgba(0, 0, 0, 0.04); border: 1px solid var(--td-border-soft); }
html[data-theme="light"] #seam-chart-hud .radar-expanded-header { border-bottom-color: var(--td-border-soft); }
html[data-theme="light"] #seam-chart-hud .pixel-title { color: var(--td-text); }
/* 2D 放样：缩略图与大图画布改浅底（内联样式需 !important 提权） */
html[data-theme="light"] #uv-map-hud { background: rgba(0, 0, 0, 0.04); border-color: var(--td-border-soft); }
html[data-theme="light"] #uvDetailCanvas { background: var(--td-bg) !important; }
/* 视窗视图条与操作提示：白底下的可读性（[视窗控件重排] 无底色） */
html[data-theme="light"] .btn-view { color: var(--td-text-3); }
html[data-theme="light"] .btn-view:hover { color: #1a1a1a; }
html[data-theme="light"] .btn-view.active { color: var(--td-primary-text, #e07c00); }
html[data-theme="light"] .canvas-hint { background: rgba(255, 255, 255, 0.7); color: var(--td-text-3); text-shadow: none; }
html[data-theme="light"] .canvas-hint-btn { background: rgba(255, 255, 255, 0.8); border-color: var(--td-border); color: var(--td-text-3); }

/* ============================================================
   [亮色主题深度改造] 子系统页白底画布：纯白背景 + 深色拓扑元素
   覆盖：control-system / power-distribution / install-structure
   ============================================================ */
html[data-theme="light"] .cs-canvas-wrap { background: #ffffff; }
html[data-theme="light"] .cs-canvas-placeholder .hint { color: var(--td-text-3); }

/* ============================================================
   [亮色主题深度改造] 子系统页共用组件（.cs-*）：白底可读性
   覆盖：control-system / power-distribution / install-structure 三页内联暗色硬编码
   ============================================================ */
/* [四页一致] 子系统左面板白主题底色与屏幕阵列工作台同灰（--td-bg-panel #f5f5f7）；
   滚动条尺寸与 .panel-left 同（5px/圆角），颜色由上方全局 ::-webkit-scrollbar 亮色规则接管 */
html[data-theme="light"] .cs-panel { background: var(--td-bg-panel); scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.04); }
html[data-theme="light"] .cs-panel::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); }

html[data-theme="light"] .cs-section-title { color: var(--td-text-2); }
html[data-theme="light"] .cs-section-title::after { color: var(--td-text-3); }
html[data-theme="light"] .cs-section-title:hover { background: var(--td-bg-hover); }

html[data-theme="light"] .cs-select,
html[data-theme="light"] .cs-input { background: var(--td-bg-input); border-color: var(--td-border); color: var(--td-text); }
html[data-theme="light"] .cs-select:hover,
html[data-theme="light"] .cs-input:hover { background-color: #ececef; border-color: var(--td-border); }
html[data-theme="light"] .cs-select option { background: #ffffff; color: var(--td-text); }

html[data-theme="light"] .cs-badge { background: rgba(0, 0, 0, 0.04); border-color: var(--td-border-soft); color: var(--td-text-2); }

html[data-theme="light"] .cs-table thead th { background: rgba(0, 0, 0, 0.03); color: var(--td-text-3); }
html[data-theme="light"] .cs-table tbody td { color: var(--td-text-2); border-bottom-color: var(--td-border-soft); }
html[data-theme="light"] .cs-table-msg { color: var(--td-text-3); }

html[data-theme="light"] .cs-card { background: #ffffff; border-color: var(--td-border-soft); box-shadow: var(--td-shadow-sm); }
html[data-theme="light"] .cs-card h4 { color: var(--td-text); }
html[data-theme="light"] .cs-stat-label { color: var(--td-text-3); }
html[data-theme="light"] .cs-alloc-table th,
html[data-theme="light"] .cs-bom-table th { color: var(--td-text-3); }
html[data-theme="light"] .cs-alloc-table td,
html[data-theme="light"] .cs-bom-table td { color: var(--td-text-2); border-bottom-color: var(--td-border-soft); }

/* 配电档位卡片（power-distribution） */
html[data-theme="light"] .pd-card { background: rgba(0, 0, 0, 0.02); }
html[data-theme="light"] .pd-card-row { color: var(--td-text-3); }

/* 画布占位与门闩按钮 */
html[data-theme="light"] .cs-canvas-placeholder { color: var(--td-text-3); }
html[data-theme="light"] .panel-toggle-btn-left {
    background: #ffffff; border-color: var(--td-border);
    color: var(--td-text-3); box-shadow: var(--td-shadow-sm);
}
html[data-theme="light"] .panel-toggle-btn-left:hover { background: var(--td-bg-panel); color: var(--td-primary-text); }
html[data-theme="light"] .panel-toggle-btn-left.is-flipped { color: var(--td-text-2); }
html[data-theme="light"] .panel-toggle-btn-left.is-flipped:hover { background: var(--td-bg-panel); color: var(--td-primary-text); }

/* iOS 拨动开关（control-system） */
html[data-theme="light"] .cs-switch { color: var(--td-text-2); }
html[data-theme="light"] .cs-switch .track { background: rgba(0, 0, 0, 0.12); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .cs-switch:hover .track { background: rgba(0, 0, 0, 0.18); }

/* ============================================================
   [亮色主题深度改造] 配电拓扑（.pwr-*）：白底 + 深色节点/线色
   ============================================================ */
html[data-theme="light"] .pwr-node { background: #ffffff; border-color: var(--td-node-border); color: var(--td-text); box-shadow: 0 3px 10px rgba(15, 15, 25, 0.08); }
html[data-theme="light"] .pwr-node-hd { background: rgba(0, 0, 0, 0.03); border-bottom-color: var(--td-node-border); }
html[data-theme="light"] .pwr-node-body { color: var(--td-text-3); }
html[data-theme="light"] .pwr-power { border-color: var(--pwr-c-grid); }
html[data-theme="light"] .pwr-power .pwr-node-title { color: var(--pwr-c-grid); }
html[data-theme="light"] .pwr-cabinet { border-color: var(--td-primary-text); }
html[data-theme="light"] .pwr-cabinet .pwr-node-title { color: var(--td-primary-text); }
html[data-theme="light"] .pwr-subbox { border-color: var(--pwr-c-cab); }
html[data-theme="light"] .pwr-subbox .pwr-node-title { color: var(--pwr-c-cab); }
html[data-theme="light"] .pwr-screen { border-color: var(--pwr-c-end); background: rgba(79, 70, 229, 0.05); }
html[data-theme="light"] .pwr-screen .pwr-node-title { color: #4338ca; }   /* [2026-08-31] 屏=设备，白主题标题留深靛辨识 */
html[data-theme="light"] .pwr-control { border-color: var(--td-primary-text); background:#fff; }
html[data-theme="light"] .pwr-control .pwr-node-title { color: #3730a3; }   /* 控制族设备：与屏同深靛语言 */
html[data-theme="light"] .pwr-screen-row { color: var(--td-text-3); }
html[data-theme="light"] .pwr-screen-row b { color: var(--td-text); }
html[data-theme="light"] .pwr-kw { color: var(--td-primary-text); }
html[data-theme="light"] .pwr-flow .react-flow__handle { background: #ffffff; }
html[data-theme="light"] .pwr-flow .react-flow__controls { box-shadow: var(--td-shadow-sm); }
html[data-theme="light"] .pwr-flow .react-flow__controls-button { background: #ffffff; border-bottom-color: var(--td-border-soft); fill: var(--td-text-3); }
html[data-theme="light"] .pwr-flow .react-flow__controls-button:hover { fill: var(--td-primary-text); background: var(--td-bg-hover); }
html[data-theme="light"] .pwr-legend { background: rgba(255, 255, 255, 0.95); border-color: var(--td-border-soft); color: var(--td-text-2); }
html[data-theme="light"] .pwr-legend-title { color: var(--td-text-2); }

/* [2026-08-31 减色/黑线] 白色主题配电补充修正（局部作用域，不动全局令牌） */
html[data-theme="light"] .pwr-node-body { color: #55555c; }        /* 修：var(--td-text-3) 纯黑过死 */
html[data-theme="light"] .pwr-screen-row { color: #55555c; }
html[data-theme="light"] .pwr-screen-row b { color: #1d1d1f; }
html[data-theme="light"] .pwr-node-svg { border-top-color: rgba(0, 0, 0, 0.14); }   /* 暗色虚线发丝在白底不可见 */
html[data-theme="light"] .pwr-scr-foot { border-top-color: rgba(0, 0, 0, 0.12); }
html[data-theme="light"] .ps-t { fill: #3730a3; }                  /* 屏阵列单元文字：淡靛底上保对比 */
html[data-theme="light"] .pwr-node.failed { border-color: #d92d20 !important; box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.18); }
html[data-theme="light"] .pwr-node.failed .pwr-node-title { color: #d92d20; }