/* ═══════════════════════════════════════════════════════════
   ScienceCalc Theme v2 — 深空实验室 · 换装层
   加载顺序：tokens.css → style.css(v0.9 布局) → 本文件(皮肤)
   手法：①旧变量重映射（style.css 的皮肤决策整体变脸）
         ②引擎 DOM 类逐个精修（玻璃/发光/mono 读数）
   逻辑零触碰：engine.js / registry.js / calcs/*.js 一行未改
   ═══════════════════════════════════════════════════════════ */

/* —— 1. 旧变量重映射（映射到 tokens.css 的深空实验室） —— */
:root{
  --bg:#0a0e18;
  --surface:#131a2a;
  --card:rgba(19,26,42,.72);
  --card-hover:rgba(26,35,58,.88);
  --muted:rgba(120,170,255,.10);
  --ink:#e8eef8;
  --ink-2:#c6d2e6;
  --muted-foreground:#8fa0bc;
  --faint:#5a6b88;
  --border:rgba(120,170,255,.14);
  --border-strong:rgba(120,170,255,.32);
  --primary:#22d3ee;
  --primary-strong:#67e0f7;
  --primary-deep:#0ea5c4;
  --primary-foreground:#06121c;
  --accent:rgba(34,211,238,.10);
  --red:#ff6b6b; --yellow:#fbbf24; --green:#3dd68c;
  --radius:14px; --radius-sm:9px;
  --shadow:0 24px 70px -20px rgba(0,0,0,.6),0 0 0 1px rgba(34,211,238,.05);
  --font-sans:"Archivo",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,'Cascadia Mono','JetBrains Mono',Consolas,monospace;
}
/* 浅色切换压住：v2 阶段强制深空（shell 不再提供切换按钮） */
[data-theme="light"]{
  --bg:#f5f7fa; --bg2:#eef1f6; --surface:rgba(255,255,255,.9); --surface-solid:#ffffff;
  --card:#ffffff; --card-hover:#f8fafc;
  --muted:rgba(20,40,80,.06); --ink:#1a2436; --ink-2:#3d4a5e; --muted-foreground:#4a5a74;
  --faint:#7d8ca3; --border:rgba(20,40,80,.12); --border-strong:rgba(20,40,80,.22);
  --primary:#0891b2; --primary-strong:#0e7490; --primary-deep:#0e7490; --primary-foreground:#ffffff;
  --accent:rgba(8,145,178,.08);
  --shadow:0 16px 50px -16px rgba(20,40,80,.18);
  --font-sans:"Archivo",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,'Cascadia Mono','JetBrains Mono',Consolas,monospace;
}

/* —— 2. 底与氛围 —— */
body{
  background:
    radial-gradient(60% 38% at 82% -8%,rgba(34,211,238,.06),transparent),
    radial-gradient(46% 40% at 0% 100%,rgba(130,143,255,.05),transparent),
    var(--bg);
  color:var(--ink);
}

/* —— 3. 卡片玻璃化 —— */
.card{background:var(--card);backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.card-t{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--acc)}

/* —— 4. 表头标题区（#calc-head） —— */
.calc-head h1, .ch-wrap h1{font-weight:600;letter-spacing:-.02em;font-size:clamp(24px,3vw,34px);line-height:1.2}
.h-ico svg{color:var(--acc)}
.formula-chip{
  font-family:var(--font-mono);color:var(--acc);
  border:1px solid rgba(34,211,238,.32);background:var(--acc-soft);
  border-radius:7px;padding:4px 12px;font-size:13px;
}
.formula-chip.big{font-size:14px;padding:6px 16px;box-shadow:var(--glow-sm)}
.disclaim{color:var(--faint)}
.disclaim summary{cursor:pointer}

/* —— 5. 输入控件 —— */
.iu input,.iu select{
  background:rgba(10,14,24,.7);
  border:1px solid var(--border);
  color:var(--ink);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.iu input:focus,.iu select:focus{
  border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft);
  outline:none;
}
.frow>label{font-size:13px;color:var(--muted-foreground)}
.fhelp{font-size:12px;color:var(--faint)}
.opt{font-style:normal;font-size:10.5px;color:var(--faint);border:1px solid var(--border);border-radius:99px;padding:1px 7px;margin-left:6px}
.iu .suffix{color:var(--dim);font-family:var(--font-mono)}

/* —— 6. 快捷预设 chips —— */
.preset-lab{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint)}
.chip.preset{background:rgba(10,14,24,.6);color:var(--muted-foreground)}
.chip.preset:hover{color:var(--ink);border-color:var(--border-strong);background:var(--acc-soft)}

/* —— 7. 结果英雄读数（L4 铭牌签名） —— */
.hero-result{
  background:rgba(10,14,24,.75);
  border:1px solid rgba(34,211,238,.25);
  box-shadow:inset 0 0 34px rgba(34,211,238,.06);
}
.hero-result::before{background:linear-gradient(90deg,var(--acc),rgba(34,211,238,.15))}
.hero-result b{
  color:var(--acc);
  font-weight:600;font-size:30px;
  text-shadow:var(--glow-text);
}
.hero-result.enter{animation:hrIn var(--t2) var(--ease),scPulse .32s ease .04s}
@keyframes scPulse{
  0%{box-shadow:inset 0 0 34px rgba(34,211,238,.06),0 0 0 rgba(34,211,238,0)}
  45%{box-shadow:inset 0 0 34px rgba(34,211,238,.10),0 0 42px rgba(34,211,238,.30)}
  100%{box-shadow:inset 0 0 34px rgba(34,211,238,.06),0 0 0 rgba(34,211,238,0)}
}
.hero-result.pulse{animation:scPulse .32s ease}
.summary b{color:var(--acc)}

/* —— 8. 结果行 / 表格 / 配方 —— */
.orow b{color:var(--ink)}
.orow.strong b{color:var(--acc);text-shadow:var(--glow-text)}
.dtable th{background:var(--surface);color:var(--muted-foreground);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em}
.recipe{background:rgba(10,14,24,.55);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px}
.recipe-t{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--acc);margin-bottom:8px}
.recipe ol{margin:0;padding-left:20px}
.recipe ol li{font-size:13.5px;color:var(--ink-2);line-height:1.75;margin:5px 0}
.recipe ol li b{color:var(--acc)}

/* —— 9. 消息条 —— */
.msg.err{background:rgba(255,107,107,.09);border:1px solid rgba(255,107,107,.32);color:var(--red)}
.msg.warn{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.30);color:var(--yellow)}

/* —— 10. 按钮 —— */
.btn{background:rgba(10,14,24,.6);border:1px solid var(--border);color:var(--muted-foreground)}
.btn:hover{color:var(--ink);border-color:var(--border-strong);background:var(--card-hover)}
.btn.primary{background:var(--acc);border-color:transparent;color:var(--primary-foreground);box-shadow:var(--glow-sm)}
.btn.primary:hover{box-shadow:var(--glow-md);translate:0 -1px}

/* —— 11. 相关工具卡 —— */
.ccard{background:var(--card);backdrop-filter:blur(10px)}
.ccard:hover{border-color:rgba(34,211,238,.4)}
.ccard .readout{color:var(--acc)}
.ccard:hover::after{background:radial-gradient(300px circle at 50% 0%,rgba(34,211,238,.10),transparent 65%)}

/* —— 12. 旧壳退场（shell.js 接管顶栏/页脚） —— */
.crumb{display:none}

/* —— 13. 布局微调：阅读宽度收敛（L1 一屏一主角） —— */
.calc-main{max-width:1080px}
@media (min-width:1025px){
  .calc-grid{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .hero-result.enter,.hero-result.pulse{animation:none}
}


/* ═══ 亮色补丁（仅 [data-theme="light"] 生效） ═══ */
[data-theme="light"] body{
  background:
    radial-gradient(60% 38% at 82% -8%,rgba(8,145,178,.04),transparent),
    radial-gradient(46% 40% at 0% 100%,rgba(90,107,255,.03),transparent),
    var(--bg);
}
[data-theme="light"] .card{background:var(--surface);backdrop-filter:blur(14px);box-shadow:var(--shadow-panel)}
[data-theme="light"] .hero-result{
  background:var(--surface);
  border-color:rgba(8,145,178,.35);
  box-shadow:inset 0 0 30px rgba(8,145,178,.05), var(--shadow-panel);
}
[data-theme="light"] .hero-result b{color:var(--acc);text-shadow:none}
[data-theme="light"] .iu input,[data-theme="light"] .iu select{
  background:var(--field);
  color:var(--ink);
  border-color:var(--line2);
}
[data-theme="light"] .iu input:focus,[data-theme="light"] .iu select:focus{
  border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft);
}
[data-theme="light"] .btn-pri{color:#ffffff}
[data-theme="light"] .formula-chip{color:var(--acc);border-color:rgba(8,145,178,.35);background:var(--acc-soft)}
[data-theme="light"] .topbar{background:rgba(245,247,250,.85)}
[data-theme="light"] .foot{border-top-color:var(--line)}
/* 输入框文字反色到位（暗主题浅字 on 深底，亮主题深字 on 白底） */
[data-theme="light"] .peek-row .k{color:var(--muted)}
[data-theme="light"] .peek-row .v{color:var(--ink)}

/* ═══ 亮色系补漏 ═══ */
[data-theme="light"] body{background:var(--bg)}
[data-theme="light"] .recipe{background:#f1f5f9;border-color:var(--line2)}
[data-theme="light"] .recipe ol li{color:var(--ink-2)}
[data-theme="light"] .recipe ol li b{color:var(--acc)}
[data-theme="light"] .msg.warn{background:rgba(251,191,36,.12);border-color:rgba(180,83,9,.3);color:#b45309}
[data-theme="light"] .msg.err{background:rgba(255,107,107,.12);border-color:rgba(185,28,28,.3);color:#b91c1c}

/* ═══ body 背景最高优先级（压过 style.css 的 body） ═══ */
html[data-theme="light"] body{background:var(--bg)!important}