/* =========================================================================
 * style.css — 初中化学互动实验 · 统一视觉（深色实验台风格）
 * ========================================================================= */
:root {
  --bg: #0f141a;
  --panel: #161d26;
  --panel-2: #1d2733;
  --line: #2a3340;
  --txt: #e7eef5;
  --txt-dim: #9fb0c0;
  --accent: #36c2c8;
  --accent-2: #ffb454;
  --danger: #ff5d5d;
  --ok: #57d97a;
  --bench: #20272f;
  --glass: rgba(180,220,240,0.18);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--txt);
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }

/* 顶部 */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; background: linear-gradient(180deg,#1a222c,#12181f);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 18px; margin: 0; letter-spacing: 1px; }
.topbar .sub { color: var(--txt-dim); font-size: 13px; }
.topbar .spacer { flex: 1; }
.badge { font-size: 12px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--line); color: var(--txt-dim); }
.badge.inter { color: #0c1116; background: var(--accent); border-color: var(--accent); }
.badge.demo { color: #0c1116; background: var(--accent-2); border-color: var(--accent-2); }

/* 布局 */
.layout { display: flex; min-height: calc(100vh - 58px); }
.sidebar {
  width: 290px; flex: 0 0 290px; background: var(--panel);
  border-right: 1px solid var(--line); padding: 14px 10px; overflow-y: auto;
}
.content { flex: 1; padding: 22px 26px; overflow-y: auto; }

/* 单元分组 */
.unit { margin-bottom: 8px; }
.unit > .unit-head {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; font-weight: 600; user-select: none;
}
.unit > .unit-head:hover { background: var(--panel-2); }
.unit > .unit-head .num { color: var(--accent); font-size: 13px; }
.unit > .unit-head .caret { margin-left: auto; transition: transform .2s; color: var(--txt-dim); }
.unit.open > .unit-head .caret { transform: rotate(90deg); }
.unit .exp-list { display: none; padding: 2px 6px 6px 18px; }
.unit.open .exp-list { display: block; }
.exp-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px;
  color: var(--txt); font-size: 13.5px; cursor: pointer;
}
.exp-item:hover { background: var(--panel-2); }
.exp-item.active { background: #20323b; outline: 1px solid var(--accent); }
.exp-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: 0 0 7px; }
.exp-item .dot.done { background: var(--ok); }
.exp-item .tag { margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 10px; }
.exp-item .tag.i { background: rgba(54,194,200,.18); color: var(--accent); }
.exp-item .tag.d { background: rgba(255,180,84,.18); color: var(--accent-2); }

/* 实验页内布局 */
.exp-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
@media (max-width: 980px){ .exp-wrap { grid-template-columns: 1fr; } }
.stage-card, .panel-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
}
.stage-card { position: relative; overflow: hidden; }
.stage-title { font-size: 15px; font-weight: 700; margin: 2px 4px 10px; }
.stage-svg { width: 100%; height: auto; display: block; background:
  radial-gradient(120% 100% at 50% 0%, #1b2530 0%, #0e1318 70%);
  border-radius: 10px; border: 1px solid var(--line); }
.bench { fill: #20272f; }

/* 控制面板 */
.panel-card h3 { margin: 4px 2px 10px; font-size: 14px; color: var(--accent); }
.ctrl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
button.btn {
  background: var(--panel-2); color: var(--txt); border: 1px solid var(--line);
  padding: 8px 13px; border-radius: 9px; font-size: 13.5px; cursor: pointer; transition: .15s;
}
button.btn:hover { border-color: var(--accent); color: #fff; }
button.btn.primary { background: var(--accent); color: #08161a; border-color: var(--accent); font-weight: 600; }
button.btn.warn { background: var(--accent-2); color: #2a1c00; border-color: var(--accent-2); font-weight: 600; }
button.btn:disabled { opacity: .4; cursor: not-allowed; }
.slider-row { margin: 10px 2px; }
.slider-row label { font-size: 13px; color: var(--txt-dim); display: block; margin-bottom: 5px; }
input[type=range] { width: 100%; accent-color: var(--accent); }
.note {
  background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 10px 12px; font-size: 13px; line-height: 1.65; color: var(--txt-dim); margin-top: 10px;
}
.note b { color: var(--txt); }
.record {
  background: #12201c; border: 1px solid #1f3a30; border-radius: 8px; padding: 10px 12px;
  font-size: 13px; line-height: 1.7; min-height: 48px; color: #c8e6d4; margin-top: 8px;
}
.record .ph { color: #5f8f78; }
details.box { margin-top: 12px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
details.box > summary { cursor: pointer; padding: 10px 12px; background: var(--panel-2); font-size: 13.5px; font-weight: 600; }
details.box > .body { padding: 12px; font-size: 13px; line-height: 1.7; color: var(--txt-dim); }
details.box .body b { color: var(--txt); }

/* SVG 文本类 */
.lbl { fill: var(--txt-dim); font-size: 12px; font-family: inherit; }
.tick { fill: #cfe6f0; font-size: 9px; font-family: inherit; }
.cap-lbl { fill: #fff; font-size: 13px; font-weight: 600; font-family: inherit; }
.title-svg { fill: #eaf4fa; font-size: 15px; font-weight: 700; font-family: inherit; }

/* 首页卡片 */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 16px; margin-top: 18px; }
.home-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  transition: .18s; cursor: pointer;
}
.home-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.home-card h3 { margin: 0 0 6px; font-size: 16px; }
.home-card p { margin: 0; color: var(--txt-dim); font-size: 13px; line-height: 1.6; }
.home-card .meta { margin-top: 10px; font-size: 12px; color: var(--txt-dim); }
.section-title { font-size: 20px; margin: 6px 0 4px; }
.lead { color: var(--txt-dim); font-size: 14px; line-height: 1.7; max-width: 880px; }
.back-link { display: inline-block; margin-bottom: 12px; font-size: 13px; }