/* ============================================================
   浅色模式 · light.css
   机制：<html data-theme="light"> 时覆盖设计变量与硬编码规则。
   与踩坑总结 §10.1 对应：
     - 变量与结构规则全部在本文件显式覆盖（不留暗色残影）
     - JS 内联的语义色（缺口红/琥珀/绿）在浅色底保持可读，无需改动
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
html[data-theme="light"] {
  --bg-deep: #eef1f7;
  --bg-card: #ffffff;
  --bg-elev: rgba(255, 255, 255, 0.9);

  --c-primary: #0090b8;   /* 文字安全的深青 */
  --c-accent: #d98e00;
  --c-danger: #e0245e;
  --c-success: #00a854;
  --c-mid: #0099ad;

  --t-main: #182233;
  --t-dim: #5a6478;
  --t-faint: #8a93a6;

  --border: rgba(15, 35, 70, 0.12);
  --border-strong: rgba(15, 35, 70, 0.22);
  --glass: rgba(255, 255, 255, 0.9);
}

/* ---------- 2. 画布与背景 ---------- */
html[data-theme="light"] body {
  background: var(--bg-deep);
  color: var(--t-main);
  background-image:
    repeating-linear-gradient(0deg, rgba(15, 35, 70, 0.045) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(15, 35, 70, 0.045) 0 1px, transparent 1px 48px);
}
html[data-theme="light"] .bg-glow { opacity: .10; }
html[data-theme="light"] .bg-glow-amber { opacity: .06; }

/* ---------- 3. 导航 ---------- */
html[data-theme="light"] .nav { background: rgba(244, 247, 252, .88); }
html[data-theme="light"] .nav-links a { color: var(--t-dim); }
html[data-theme="light"] .nav-links a:hover { color: var(--t-main); background: rgba(15, 35, 70, .06); text-shadow: none; }
html[data-theme="light"] .nav-links a.active { color: var(--c-primary); background: rgba(0, 144, 184, .1); }
html[data-theme="light"] .brand-text small { color: var(--t-faint); }
html[data-theme="light"] .demo-badge {
  color: #b37200; border-color: rgba(217, 142, 0, .5); background: rgba(217, 142, 0, .1);
}

/* ---------- 4. 按钮（关键：hover 原来是白字） ---------- */
html[data-theme="light"] .btn {
  background: rgba(255, 255, 255, .75);
  border-color: var(--border-strong);
  color: var(--t-main);
}
html[data-theme="light"] .btn:hover {
  border-color: rgba(0, 144, 184, .55);
  color: var(--c-primary);
  background: rgba(0, 144, 184, .08);
  box-shadow: 0 0 12px rgba(0, 144, 184, .12);
  text-shadow: none;
}
html[data-theme="light"] .btn-primary {
  background: rgba(0, 144, 184, .12);
  border-color: rgba(0, 144, 184, .55);
  color: #007597;
}
html[data-theme="light"] .btn-primary:hover {
  color: #005f80;
  background: rgba(0, 144, 184, .18);
  box-shadow: 0 0 14px rgba(0, 144, 184, .18);
}
html[data-theme="light"] .btn-accent {
  border-color: rgba(217, 142, 0, .55);
  background: rgba(217, 142, 0, .1);
  color: #a86e00;
}
html[data-theme="light"] .btn-accent:hover { color: #8a5a00; box-shadow: 0 0 14px rgba(217, 142, 0, .2); }
html[data-theme="light"] .btn-danger:hover { color: #c9184a; border-color: rgba(224, 36, 94, .6); background: rgba(224, 36, 94, .08); }
/* .btn-launch 为整块渐变+深色字，双主题通用，不覆盖 */

/* ---------- 5. 卡片 / 输入 / 选择 ---------- */
html[data-theme="light"] .stat,
html[data-theme="light"] .q-item,
html[data-theme="light"] .rtype,
html[data-theme="light"] .choice,
html[data-theme="light"] .todo-item,
html[data-theme="light"] .finding { background: rgba(255, 255, 255, .72); }
html[data-theme="light"] .choice:hover,
html[data-theme="light"] .rtype:hover { border-color: rgba(0, 144, 184, .45); }
html[data-theme="light"] .choice.active { background: rgba(0, 144, 184, .08); border-color: rgba(0, 144, 184, .65); box-shadow: 0 0 14px rgba(0, 144, 184, .12); }
html[data-theme="light"] .rtype.on { background: rgba(0, 144, 184, .07); box-shadow: 0 0 16px rgba(0, 144, 184, .12); }
html[data-theme="light"] .input,
html[data-theme="light"] .select,
html[data-theme="light"] .textarea {
  background: #fff;
  border-color: var(--border-strong);
  color: var(--t-main);
}
html[data-theme="light"] .input:focus,
html[data-theme="light"] .select:focus,
html[data-theme="light"] .textarea:focus {
  border-color: rgba(0, 144, 184, .65);
  box-shadow: 0 0 0 3px rgba(0, 144, 184, .14);
  background: #fff;
}
html[data-theme="light"] .input::placeholder,
html[data-theme="light"] .textarea::placeholder { color: #a2abbf; }
html[data-theme="light"] .select {
  /* 必须用完整简写：单独 background-image 会被上面的 background:#fff 简写
     把 repeat/position 重置为默认，箭头 SVG 平铺成条纹（实测坑） */
  background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a6478' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
}
html[data-theme="light"] .select option { background: #ffffff; color: #182233; }
html[data-theme="light"] .dropzone,
html[data-theme="light"] .new-major-card { background: rgba(0, 144, 184, .05); }
html[data-theme="light"] .dropzone:hover,
html[data-theme="light"] .new-major-card:hover { background: rgba(0, 144, 184, .09); }
html[data-theme="light"] .new-major-card small { color: var(--t-faint); }
html[data-theme="light"] .new-major-card .new-major-title { color: #0b6f8a; }

/* ---------- 6. 表格 / 矩阵（暗色表头必须翻转） ---------- */
html[data-theme="light"] .tbl th {
  background: rgba(15, 35, 70, .05);
  color: var(--t-dim);
  border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .tbl td { border-bottom: 1px solid rgba(15, 35, 70, .07); }
html[data-theme="light"] .tbl tbody tr:hover { background: rgba(0, 144, 184, .05); }
html[data-theme="light"] .matrix thead th,
html[data-theme="light"] .matrix tbody th,
html[data-theme="light"] .sim-matrix thead th,
html[data-theme="light"] .sim-matrix tbody th {
  background: #eef2f8;
  color: var(--t-dim);
}
html[data-theme="light"] .matrix th, html[data-theme="light"] .matrix td,
html[data-theme="light"] .sim-matrix td { border-color: rgba(15, 35, 70, .08); }
html[data-theme="light"] .matrix thead th .syll.ok { color: #00854a; }
html[data-theme="light"] .matrix thead th .syll.no { color: #c9184a; }
html[data-theme="light"] .cell.w03 { color: #007597; background: rgba(0, 144, 184, .14); }
html[data-theme="light"] .cell.w06 { color: #04424f; background: rgba(0, 153, 173, .4); }
html[data-theme="light"] .cell.w10 { color: #04121c; background: linear-gradient(135deg, #00c6e8, #00a8c2); }
html[data-theme="light"] .sim-cell.s1 { color: #007597; background: rgba(0, 144, 184, .14); }
html[data-theme="light"] .sim-cell.s2 { color: #04323c; background: rgba(0, 153, 173, .42); }
html[data-theme="light"] .sim-cell.s3 { color: #04121c; background: linear-gradient(135deg, #00c6e8, #00a8c2); }
html[data-theme="light"] .pager button { background: #fff; color: var(--t-dim); }
html[data-theme="light"] .pager button.cur { background: rgba(0, 144, 184, .14); color: var(--c-primary); border-color: rgba(0, 144, 184, .6); }

/* ---------- 7. 抽屉 / 弹层 / Toast ---------- */
html[data-theme="light"] .drawer {
  background: rgba(255, 255, 255, .985);
  border-left: 1px solid rgba(0, 144, 184, .4);
  box-shadow: -20px 0 50px rgba(15, 35, 70, .18);
}
html[data-theme="light"] .drawer-foot { background: rgba(240, 244, 250, .95); }
html[data-theme="light"] .drawer-mask { background: rgba(20, 30, 60, .35); backdrop-filter: blur(2px); }
html[data-theme="light"] .drawer-head { border-bottom-color: var(--border); }
html[data-theme="light"] .drawer-close { background: #fff; color: var(--t-dim); }
html[data-theme="light"] .toast {
  background: rgba(255, 255, 255, .97);
  color: var(--t-main);
  border-color: rgba(0, 144, 184, .5);
  box-shadow: 0 8px 28px rgba(15, 35, 70, .18);
}
html[data-theme="light"] .link-tip,
html[data-theme="light"] .map-pop {
  background: rgba(255, 255, 255, .98);
  border-color: rgba(0, 144, 184, .5);
  color: var(--t-main);
  box-shadow: 0 10px 30px rgba(15, 35, 70, .2);
}
html[data-theme="light"] .map-pop .reason { background: rgba(15, 35, 70, .05); color: var(--t-dim); }
html[data-theme="light"] .course-row { background: rgba(15, 35, 70, .035); border-color: var(--border); }
html[data-theme="light"] .cause-box { background: rgba(0, 153, 173, .07); border-color: rgba(0, 153, 173, .4); color: var(--t-main); }
html[data-theme="light"] .sugg { background: rgba(15, 35, 70, .035); border-color: var(--border); }
html[data-theme="light"] .gap-verdict { background: rgba(15, 35, 70, .04); border-color: var(--border); }

/* ---------- 8. 进度 / 标签 / 徽章 ---------- */
html[data-theme="light"] .progress,
html[data-theme="light"] .conf-bar { background: rgba(15, 35, 70, .1); }
html[data-theme="light"] .tag { background: rgba(15, 35, 70, .04); color: var(--t-dim); border-color: rgba(15, 35, 70, .18); }
html[data-theme="light"] .tag-cyan { color: #007597; background: rgba(0, 144, 184, .1); border-color: rgba(0, 144, 184, .4); }
html[data-theme="light"] .tag-amber { color: #a86e00; background: rgba(217, 142, 0, .1); border-color: rgba(217, 142, 0, .4); }
html[data-theme="light"] .tag-green { color: #00854a; background: rgba(0, 168, 84, .1); border-color: rgba(0, 168, 84, .4); }
html[data-theme="light"] .tag-red { color: #c9184a; background: rgba(224, 36, 94, .1); border-color: rgba(224, 36, 94, .4); }
html[data-theme="light"] .eyebrow { color: var(--c-primary); }
html[data-theme="light"] .num { text-shadow: 0 0 10px rgba(0, 144, 184, .25); }
html[data-theme="light"] .warn-bar { color: #8a5a00; background: rgba(217, 142, 0, .1); border-color: rgba(217, 142, 0, .45); }

/* ---------- 9. 全景三段式 ---------- */
html[data-theme="light"] .col-head { background: rgba(244, 247, 252, .94); }
html[data-theme="light"] .s-card {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(15, 35, 70, .14);
}
html[data-theme="light"] .s-card:hover { border-color: rgba(0, 144, 184, .55); box-shadow: 0 8px 20px rgba(15, 35, 70, .1); }
html[data-theme="light"] .s-req .num-tag {
  background: rgba(0, 144, 184, .12); color: #007597; border-color: rgba(0, 144, 184, .4);
}
html[data-theme="light"] .s-job { border-color: rgba(217, 142, 0, .35); }
html[data-theme="light"] .s-job .title { color: #c77e00; }
html[data-theme="light"] .s-job .salary { color: #b37200; }
html[data-theme="light"] .s-job .skills span { background: rgba(217, 142, 0, .1); color: #a86e00; border-color: rgba(217, 142, 0, .35); }
html[data-theme="light"] .badge-demand.strong { color: #a86e00; background: rgba(217, 142, 0, .15); border-color: rgba(217, 142, 0, .5); }
html[data-theme="light"] .badge-demand.mid { color: #a86e00; background: rgba(217, 142, 0, .08); border-color: rgba(217, 142, 0, .3); }
html[data-theme="light"] .badge-demand.none { background: rgba(15, 35, 70, .05); color: var(--t-faint); }
html[data-theme="light"] .gap-chip.severe { color: #c9184a; background: rgba(224, 36, 94, .1); border-color: rgba(224, 36, 94, .45); }
html[data-theme="light"] .gap-chip.moderate { color: #a86e00; background: rgba(217, 142, 0, .12); border-color: rgba(217, 142, 0, .45); }
html[data-theme="light"] .gap-chip.match { color: #00854a; background: rgba(0, 168, 84, .1); border-color: rgba(0, 168, 84, .4); }
html[data-theme="light"] .gap-chip.surplus,
html[data-theme="light"] .gap-chip.unmapped { color: var(--t-dim); background: rgba(15, 35, 70, .05); border-color: var(--border-strong); }
html[data-theme="light"] .ctrl-bar { background: rgba(255, 255, 255, .88); }

/* ---------- 10. 图表 ---------- */
html[data-theme="light"] .axis-line { stroke: rgba(15, 35, 70, .35); }
html[data-theme="light"] .grid-line { stroke: rgba(15, 35, 70, .08); }
html[data-theme="light"] .mark-line { stroke: rgba(15, 35, 70, .35); }
html[data-theme="light"] .axis-txt { fill: #5a6478; }
html[data-theme="light"] .gapbar-row .bar-wrap { background: rgba(15, 35, 70, .06); }
html[data-theme="light"] .gapbar-row .zero { background: rgba(15, 35, 70, .3); }
html[data-theme="light"] .gapbar-row .nm { color: rgba(10, 25, 55, .9); font-weight: 500; }
html[data-theme="light"] .gapbar-row:hover { background: rgba(0, 144, 184, .05); }
html[data-theme="light"] .heat-empty { background: rgba(15, 35, 70, .045); color: var(--t-faint); }
html[data-theme="light"] .heat-cell:hover { box-shadow: 0 0 10px rgba(217, 142, 0, .5); }
html[data-theme="light"] .legend-chips button { background: #fff; color: var(--t-dim); border-color: var(--border-strong); }
html[data-theme="light"] .legend-chips button.on { background: rgba(0, 144, 184, .1); color: var(--c-primary); }

/* ---------- 11. 公式面板保持深色（代码块风格，双主题通用） ---------- */
html[data-theme="light"] .formula { border-color: rgba(15, 35, 70, .25); }

/* ---------- 12. 静态页提示条 / 徽章 ---------- */
html[data-theme="light"] .static-strip {
  background: linear-gradient(90deg, rgba(224, 36, 94, .09), rgba(217, 142, 0, .1));
  border-bottom-color: rgba(217, 142, 0, .45);
  color: #7a3b12;
}
html[data-theme="light"] .static-strip b { color: #8c1d33; }

/* ---------- 13. 导航主题切换按钮 ---------- */
.theme-toggle { font-size: 13px; letter-spacing: .02em; }

/* 页头专业名徽标（浅色） */
html[data-theme="light"] .major-chip{background:rgba(0,144,184,.09);border-color:rgba(0,144,184,.45)}
html[data-theme="light"] .major-chip i{color:#5a6478}
html[data-theme="light"] .major-chip b{color:#006a8a}