/* =============================================================================
 *  主题层 · 暗色（默认）/ 浅色（Web 5.0）
 *
 *  用法：在页面 <head> 里、各自的 <style> 之后引入
 *      <link rel="stylesheet" href="theme.css?v=20261101a">
 *  并在页面最前面（其它脚本之前）内联执行：
 *      <script>(function(){var t=localStorage.getItem('dg_theme');
 *        if(t!=='light'&&t!=='dark')t='dark'; /* 默认暗色 */
 *        document.documentElement.dataset.theme=t;})();</script>
 *
 *  变量按两套页面各自原有的命名同时覆盖（会员中心/后台一套，考试页一套），
 *  业务 CSS 不用动，切 html[data-theme] 即可整体换肤。
 * ========================================================================== */

/* ---------------- 暗色（默认，补齐新增变量） ---------------- */
:root{
  --shadow:0 8px 26px rgba(0,0,0,.38);
  --shadow-sm:0 2px 10px rgba(0,0,0,.25);
  --head-bg:rgba(11,17,28,.85);
  --body-grad:radial-gradient(1200px 600px at 70% -10%, #16243c 0%, var(--bg) 60%);
  --canvas-bg:#0b0f13;
  --wire-ctrl:#c9d5e0;
  --wire-bk:#6a7580;
  --grid-line:rgba(255,255,255,.045);
  color-scheme: dark;
}

/* ---------------- 浅色 · Web 5.0 ---------------- */
html[data-theme="light"]{
  /* 会员中心 / 管理后台 */
  --bg:#eef3fb;
  --panel:#ffffff;
  --panel2:#f5f8fd;
  --line:#e3eaf6;
  --txt:#0f172a;
  --sub:#64748b;
  --ok:#0f9d58;
  --no:#dc3545;
  --gold:#c47f00;
  --acc:#2563eb;

  /* 考试页（style.css 自己的命名） */
  --line2:#ccd8ea;
  --dim:#64748b;
  --amber:#c47f00;
  --green:#0f9d58;
  --red:#dc3545;
  --blue:#2563eb;
  --cyan:#0e8fa0;
  --purple:#7345e6;

  /* 主题层新增 */
  --shadow:0 10px 30px rgba(23,54,110,.10);
  --shadow-sm:0 2px 10px rgba(23,54,110,.06);
  --head-bg:rgba(255,255,255,.86);
  --body-grad:radial-gradient(1200px 620px at 70% -10%, #dfeaff 0%, var(--bg) 62%);
  --canvas-bg:#f7fafe;
  --wire-ctrl:#334155;
  --wire-bk:#94a3b8;
  --grid-line:rgba(23,54,110,.055);
  color-scheme: light;
}

/* =============================================================================
 *  通用组件适配（会员中心 + 管理后台共用同一套类名）
 * ========================================================================== */
html[data-theme="light"] body{ background:var(--body-grad); }

/* 顶栏：白玻璃 */
html[data-theme="light"] header{
  background:var(--head-bg);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 1px 0 rgba(23,54,110,.04);
}

/* 按钮：白底卡片感 + 柔和投影 */
html[data-theme="light"] .btn{
  background:#fff; border-color:var(--line); color:var(--txt);
  box-shadow:var(--shadow-sm);
}
/* 悬停：必须"加深"，不能变白——变白会和白色卡片/浅色页面混成一片，按钮像消失了 */
html[data-theme="light"] .btn:hover:not(:disabled){
  background:#e2ecfd; border-color:#93b4f7; color:#1d4ed8;
  box-shadow:0 4px 14px rgba(37,99,235,.18);
}
html[data-theme="light"] .btn.primary{
  background:linear-gradient(135deg,#22c55e,#0ea5a4);
  color:#fff; border:none;
  box-shadow:0 6px 18px rgba(16,185,129,.30);
}
html[data-theme="light"] .btn.primary:hover:not(:disabled){
  background:linear-gradient(135deg,#1db954,#0d9488); color:#fff; filter:none;
}
html[data-theme="light"] .btn.gold{
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  color:#422006; border:none;
  box-shadow:0 6px 18px rgba(245,158,11,.28);
}
html[data-theme="light"] .btn.gold:hover:not(:disabled){
  background:linear-gradient(135deg,#e08c05,#e6ae06); color:#422006; filter:none;
}
html[data-theme="light"] .btn.warn,
html[data-theme="light"] .btn.danger{
  background:#fff7ed; border-color:#fbd7ab; color:#b45309;
}
html[data-theme="light"] .btn.warn:hover:not(:disabled),
html[data-theme="light"] .btn.danger:hover:not(:disabled){
  background:#ffe9d6; border-color:#f0a95e; color:#92400e;
}
html[data-theme="light"] .btn.okbtn:hover:not(:disabled){
  background:#d6f5e3; border-color:#7fd6a3; color:#0b7a43;
}

/* 禁用态：暗色靠 opacity 压暗，浅色底上必须换成实心灰蓝，否则对比度不够 */
html[data-theme="light"] .btn:disabled{
  opacity:1;
  background:#e4ebf6; color:#8fa2b8; border-color:#d3dfef;
  box-shadow:none; cursor:not-allowed;
}
html[data-theme="light"] .btn.primary:disabled{
  background:#dde7f5; color:#8798ae; border:none; box-shadow:none;
}
html[data-theme="light"] .btn.gold:disabled,
html[data-theme="light"] .btn.okbtn:disabled{
  background:#e4ebf6; color:#8fa2b8; box-shadow:none;
}

/* 卡片 / 面板 */
html[data-theme="light"] .card,
html[data-theme="light"] .pbox,
html[data-theme="light"] .set-box,
html[data-theme="light"] .dcard,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .pmodal{
  box-shadow:var(--shadow-sm);
  border-color:var(--line);
}
html[data-theme="light"] .dcard[data-go]{ transition:transform .16s, box-shadow .16s; }
html[data-theme="light"] .dcard[data-go]:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(23,54,110,.13);
}

/* 输入框 */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:#fff; border-color:var(--line); color:var(--txt);
}
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea{ background:#fbfdff; }
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field select:focus,
html[data-theme="light"] .field textarea:focus{
  border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
  background:#fff;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{ color:#a3b0c2; }

/* 标签页 */
html[data-theme="light"] .tabs button{
  background:#fff; border-color:var(--line); color:var(--sub);
}
html[data-theme="light"] .tabs button.on{
  background:linear-gradient(135deg,#eff6ff,#e7f0ff);
  color:var(--acc); border-color:#bfd5ff; font-weight:700;
}

/* 徽章 */
html[data-theme="light"] .badge.vip{
  background:linear-gradient(135deg,#fff7e6,#fdeccb);
  color:#a35c00; border-color:#f3d79a;
}
html[data-theme="light"] .badge.free{
  background:#f1f5f9; color:#64748b; border-color:#e2e8f0;
}

/* 提示与错误色（原为浅红 #ff8080，浅底上要加深） */
html[data-theme="light"] .err,
html[data-theme="light"] .pmsg.no,
html[data-theme="light"] .xp-msg.no{ color:#d92d20; }
html[data-theme="light"] .xp-msg.ok{ color:#0f9d58; }
html[data-theme="light"] .pmsg.ok{ color:#0f9d58; }

/* 表格 */
html[data-theme="light"] table{ background:transparent; }
html[data-theme="light"] th{ color:var(--sub); border-bottom-color:var(--line); }
html[data-theme="light"] td{ border-bottom-color:#eef3fa; }
html[data-theme="light"] tr:hover td{ background:#f7fbff; }

/* 页脚 */
html[data-theme="light"] .site-footer{ color:#7b8aa0; }
html[data-theme="light"] .site-footer a{ color:#7b8aa0; border-bottom-color:rgba(123,138,160,.4); }
html[data-theme="light"] .site-footer a:hover{ color:var(--acc); }

/* =============================================================================
 *  考试页（style.css）适配
 * ========================================================================== */
html[data-theme="light"] .topbar{
  background:linear-gradient(180deg,#ffffff,#f7faff);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(23,54,110,.04);
}
html[data-theme="light"] .logo{
  background:linear-gradient(135deg,#fff4dd,#ffe9c2);
  border-color:#f2d79b; color:#b57400;
}
html[data-theme="light"] .stage{ background:var(--canvas-bg); }
html[data-theme="light"] .stage-panel{ background:#f9fbff; border-color:var(--line); }
html[data-theme="light"] .srow,
html[data-theme="light"] .ritem{ background:#f6f9ff; }
html[data-theme="light"] .panel-title:hover{ color:var(--acc); }
html[data-theme="light"] .panel-title .hint{ color:#94a3b8; }
html[data-theme="light"] .stage-done.ok,
html[data-theme="light"] .stage-done b.ok{ color:#0f9d58; }

/* 画布内 SVG：元件本体、名称、端子标注（原样式是给深底配的浅色，浅底必须反过来） */
html[data-theme="light"] .dev .body{ fill:#ffffff; stroke:#b8c6da; }
html[data-theme="light"] .dev.on .body{ stroke:var(--green); stroke-width:2.2; }
html[data-theme="light"] .dev.sel .body{ stroke:var(--amber); stroke-width:2; }
html[data-theme="light"] .dev .dwm{ fill:#0f172a; fill-opacity:.06; }
html[data-theme="light"] .tlabel{ fill:#475569; }
html[data-theme="light"] .tlabel.on{ fill:#0f9d58; }
html[data-theme="light"] .dname{ fill:#1e293b; }
html[data-theme="light"] .dsub{ fill:#7b8aa0; }
html[data-theme="light"] .tdot{ fill:#94a3b8; }
html[data-theme="light"] .tdot.src{ fill:#d97706; }
html[data-theme="light"] .wire.sel,
html[data-theme="light"] .wire.hover{ stroke:var(--amber); }
html[data-theme="light"] .mbtn{
  background:rgba(255,255,255,.94); border-color:var(--line2); color:var(--txt);
}
html[data-theme="light"] .mbtn:hover{
  background:#e2ecfd; border-color:#93b4f7; color:#1d4ed8;
}
html[data-theme="light"] .mbtn:active{ background:#eaf1fb; border-color:var(--amber); }
html[data-theme="light"] #verTag{ color:#a3b0c2; }
html[data-theme="light"] .drawer-mask{ background:rgba(15,23,42,.35); }

/* 选中元件右侧浮动按钮 */
html[data-theme="light"] .selbtn{ stroke:#b8c6da; fill:#ffffff; }
html[data-theme="light"] .selui-item text{ fill:#334155; }
html[data-theme="light"] .selui-item.danger .selbtn{ stroke:#ef9a9a; fill:#fff5f5; }
html[data-theme="light"] .selui-item.danger text{ fill:#d92d20; }

/* 弹窗 / 抽屉 */
html[data-theme="light"] .dialog,
html[data-theme="light"] .drawer{ background:#fff; box-shadow:var(--shadow); }
html[data-theme="light"] .mask{ background:rgba(15,23,42,.38); }

/* ---- 考试页其余深底组件：任务说明 / 元件库 / 提示条 / 选题弹窗 ---- */
html[data-theme="light"] .task .goal{ color:#334155; }
html[data-theme="light"] .task ol{ color:#475569; }
html[data-theme="light"] .rot-txt{ color:#334155; }
html[data-theme="light"] .badge{
  background:rgba(255,255,255,.95);
  border-color:var(--line2);
  color:#475569;
  box-shadow:var(--shadow-sm);
}
html[data-theme="light"] .badge:hover{ border-color:#b8c6da; color:#0f172a; }
html[data-theme="light"] .badge-x{ color:#94a3b8; background:rgba(15,23,42,.06); }
html[data-theme="light"] .badge:hover .badge-x{ color:#0f172a; background:rgba(15,23,42,.10); }
html[data-theme="light"] .tick{ box-shadow:var(--shadow-sm); }
html[data-theme="light"] .tick-clear:hover{ color:#0f172a; border-color:#b8c6da; }

/* 红色/警示态统一换成浅色可读版本 */
html[data-theme="light"] .ans-head.no{ background:#fff1f0; border-color:#f9c8c4; color:#b42318; }
html[data-theme="light"] .ans-row.no .mk{ color:#b42318; }
html[data-theme="light"] .sum.no{ background:#fff1f0; color:#b42318; border-color:#f9c8c4; }
html[data-theme="light"] .tick.alarm{
  background:#fff1f0; border-color:#f9c8c4; color:#b42318;
}
html[data-theme="light"] .tick.alarm:hover{ border-color:#e88b84; }
html[data-theme="light"] .flow-timer.urgent{
  color:#b42318; background:#fff1f0; border-color:#f9c8c4;
}
html[data-theme="light"] .expk-lock{ color:#b42318; }

/* 选题弹窗 */
html[data-theme="light"] #examPickMask{ background:rgba(15,23,42,.38); }
html[data-theme="light"] .expk-box{
  background:#fff; border-color:var(--line); box-shadow:var(--shadow);
}
html[data-theme="light"] .expk-close{
  background:#f4f7fc; color:#64748b; border-color:var(--line);
}
html[data-theme="light"] .expk-close:hover{ color:#0f172a; border-color:#b8c6da; }
html[data-theme="light"] .expk-item{
  background:#f8fafe; color:#1e293b; border-color:var(--line);
}
html[data-theme="light"] .expk-item:hover:not([disabled]){
  background:#eef4fd; border-color:#b8c6da;
}
html[data-theme="light"] .expk-item[disabled]{ color:#94a3b8; }

/* ---- auth.js 注入的用户信息框与会员弹窗（同为深底配色） ---- */
html[data-theme="light"] #dgUserbox .uinfo{ color:#64748b; }
html[data-theme="light"] #dgUserbox .uinfo b{ color:#1e293b; }
html[data-theme="light"] #dgUserbox .uinfo .vip{ color:#b45309; }
html[data-theme="light"] #dgUserbox .uinfo .exp{ color:#0f9d58; }

html[data-theme="light"] .dg-modal{
  background:#fff; border-color:var(--line); color:#1e293b;
  box-shadow:var(--shadow);
}
html[data-theme="light"] .dg-modal h3{ color:#0f172a; }
html[data-theme="light"] .dg-modal h3 .dg-x{ color:#94a3b8; }
html[data-theme="light"] .dg-modal h3 .dg-x:hover{ color:var(--amber); }
html[data-theme="light"] .dg-field label{ color:#64748b; }
html[data-theme="light"] .dg-field input{
  background:#fbfdff; border-color:var(--line); color:#0f172a;
}
html[data-theme="light"] .dg-field input:focus{ border-color:var(--amber); }
html[data-theme="light"] .dg-btn{
  background:linear-gradient(135deg,#f59e0b,#fbbf24); color:#422006;
}
html[data-theme="light"] .dg-btn.ghost{ background:#f1f5f9; color:#334155; }
html[data-theme="light"] .dg-tip{ color:#64748b; }
html[data-theme="light"] .dg-sub{ color:#64748b; }
html[data-theme="light"] .dg-green{ color:#0f9d58; }
html[data-theme="light"] .dg-gold{ color:#b45309; }
html[data-theme="light"] .dg-strong{ color:#0f172a; }
html[data-theme="light"] .dg-links{ color:#64748b; }
html[data-theme="light"] .dg-links a{ color:#b45309; }
html[data-theme="light"] .dg-err{ color:#dc2626; }

/* 开通会员：套餐卡片 */
html[data-theme="light"] .dg-plan .p{ border-color:#cbd5e1; background:#fff; }
html[data-theme="light"] .dg-plan .p.on{ border-color:#f59e0b; background:#fff7e6; }
html[data-theme="light"] .dg-plan .p .n{ color:#0f172a; }
html[data-theme="light"] .dg-plan .p .pr{ color:#b45309; }
html[data-theme="light"] .dg-plan .p .pr small{ color:#64748b; }

/* 开通会员：支付方式选择 */
html[data-theme="light"] .dg-pm .m{
  border-color:#cbd5e1; color:#475569; background:#f8fafc;
}
html[data-theme="light"] .dg-pm .m.on{
  border-color:#f3d79a; color:#b45309; background:#fff7e6;
}

/* 扫码支付区块（深底卡片 → 浅底卡片） */
html[data-theme="light"] .dg-pay{
  background:#f8fafc; border-color:#e2e8f0;
}
html[data-theme="light"] .dg-pay .amt{ color:#b45309; }
html[data-theme="light"] .dg-pay .ord{ color:#64748b; }
html[data-theme="light"] .dg-pay .ord b{ color:#0f9d58; }
html[data-theme="light"] .dg-pay .qrs figure{ color:#64748b; }
html[data-theme="light"] .dg-pay .wait{ color:#b45309; }

/* 支付成功弹窗 */
html[data-theme="light"] .dg-ok .t{ color:#0f9d58; }
html[data-theme="light"] .dg-ok .d{ color:#64748b; }

/* ---- 考试页其余深底小部件：标签、按钮、步骤条、状态块 ---- */
html[data-theme="light"] .tab:hover{
  background:#e2ecfd; color:#1d4ed8; border-color:#a9c3f0;
}
html[data-theme="light"] .tab.on:hover{
  background:#dbe8fd; color:#b45309; border-color:#e9c37a;
}
html[data-theme="light"] .tab.on{
  background:#e8f0fe; color:#b45309; border-color:#f3d79a;
  box-shadow:inset 0 -2px 0 var(--amber);
}
html[data-theme="light"] .btn.okbtn{ background:#eafaf0; border-color:#a9e5c2; color:#0f9d58; }
html[data-theme="light"] .sw{ background:#dfe7f2; }
html[data-theme="light"] .sw.on{ background:#c9f0d8; border-color:#7fd6a3; }
html[data-theme="light"] .oprow.pressed{ background:#fff7e6; border-color:#f3d79a; }
html[data-theme="light"] .oprow.trip{ background:#fff1f0; border-color:#f9c8c4; }
html[data-theme="light"] .flow-timer{
  background:#eaf2fd; border-color:#cfe0f7; color:#0e7490;
}
html[data-theme="light"] .step.cur{
  background:#eef4fd; color:#b45309; border-color:#f3d79a;
}
html[data-theme="light"] .ritem.ok{ background:#f0fbf5; border-left-color:var(--green); }
html[data-theme="light"] .ritem.no{ background:#fff6f5; border-left-color:var(--red); }
html[data-theme="light"] .sum.ok{ background:#eafaf0; color:#0f9d58; border-color:#a9e5c2; }
html[data-theme="light"] .cbtn.on{ background:#fff7e6; border-color:#f3d79a; color:#b45309; }
html[data-theme="light"] .tick{ background:rgba(255,255,255,.96); }
html[data-theme="light"] .tick.ok{ background:#f0fbf5; border-color:#a9e5c2; color:#0f9d58; }

/* =============================================================================
 *  主题切换按钮（三页统一）
 * ========================================================================== */
.theme-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:9px;font-size:13px;line-height:1;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);
  cursor:pointer;transition:.16s;white-space:nowrap;font-family:inherit;
}
.theme-toggle:hover{ border-color:var(--acc); color:var(--acc); }
.theme-toggle .ti{ font-size:14px;line-height:1; }
/* 手机/平板上顶栏空间紧张：主题按钮只留太阳/月亮图标，隐藏文字（考试页 1024px 起就压缩顶栏，这里取 900px 覆盖手机横竖屏） */
@media (max-width: 900px){
  .theme-toggle{ padding:7px 10px; }
  .theme-toggle .tl{ display:none; }
}
html[data-theme="light"] .theme-toggle{
  background:#fff; box-shadow:var(--shadow-sm);
}

/* =============================================================================
 *  浅色主题 · 悬停态总修正
 *  原样式里大量 :hover 用的是"深色主题下变亮"的值（#26313b / #1e262e / #232d36），
 *  放到浅色底上要么变成一片白（和卡片/页面同色，按钮像消失了），要么几乎看不出变化。
 *  统一规则：悬停 = 背景加深成浅蓝 + 边框转蓝 + 文字转蓝。深色主题不受影响。
 * ========================================================================== */

/* 后台标签页按钮（notes 页，非 .tab 类） */
html[data-theme="light"] .tabs button:hover{
  background:#e2ecfd; border-color:#a9c3f0; color:#1d4ed8;
}
html[data-theme="light"] .tabs button.on:hover{
  background:#dbe8fd; border-color:var(--acc); color:#1d4ed8;
}

/* 首页题库筛选标签 */
html[data-theme="light"] .etag:hover{
  background:#e2ecfd; border-color:var(--acc); color:#1d4ed8;
}
html[data-theme="light"] .etag.on:hover{ background:#d6e6ff; color:#1d4ed8; }

/* 考试页左侧元件库卡片 */
html[data-theme="light"] .pitem:hover{
  background:#e3ecfb; border-color:var(--amber);
}
html[data-theme="light"] .pitem[disabled]:hover{ background:#f4f7fc; }

/* 面板标题（可折叠） */
html[data-theme="light"] .panel-title:hover{ color:#1d4ed8; }

/* 画布上的元件徽标 / 打勾标记 / 清除按钮 */
html[data-theme="light"] .badge:hover{ border-color:#93b4f7; color:#1d4ed8; }
html[data-theme="light"] .badge:hover .badge-x{ color:#b42318; background:rgba(220,38,38,.12); }
html[data-theme="light"] .tick:hover{ border-color:#93b4f7; }
html[data-theme="light"] .tick:hover .tick-x{ color:#b42318; background:rgba(220,38,38,.12); }
html[data-theme="light"] .tick.alarm:hover{ border-color:#e88b83; }
html[data-theme="light"] .tick.ok:hover{ border-color:#6bc48d; }
html[data-theme="light"] .tick-clear:hover{ color:#1d4ed8; border-color:#93b4f7; }

/* 检查项行 / 弹窗标题栏按钮 / 关闭按钮 */
html[data-theme="light"] .check-row:hover{ border-color:#a9c3f0; }
html[data-theme="light"] .modal-head button:hover{ color:#1d4ed8; }
html[data-theme="light"] .expk-close:hover{ color:#1d4ed8; border-color:#a9c3f0; }

/* 选题弹窗列表项 */
html[data-theme="light"] .expk-item:hover:not([disabled]){
  background:#eef4fd; border-color:#a9c3f0;
}

/* 画布选中元件右侧浮动按钮（SVG） */
html[data-theme="light"] .selui-item:hover .selbtn{ stroke:#e08c05; fill:#fff7e6; }
html[data-theme="light"] .selui-item.danger:hover .selbtn{ stroke:#d92d20; fill:#ffecec; }

/* 会员弹窗按钮（auth.js 注入） */
html[data-theme="light"] .dg-btn:hover{ filter:brightness(1.06); }
html[data-theme="light"] .dg-btn.ghost:hover{
  background:#e2ecfd; color:#1d4ed8;
}

/* 后台趋势柱：浅色下变亮会消失，改成略压暗 */
html[data-theme="light"] .bar-g .bar:hover{ filter:brightness(.92); }

/* 主题切换按钮 */
html[data-theme="light"] .theme-toggle:hover{
  background:#e2ecfd; border-color:var(--acc); color:#1d4ed8;
}