/* ═══════════════════════════════════════════════════════════
   中药速记 · Plain Index
   色板：浅冷灰底 + 纯白面 + 药草绿 accent + 红/青/黄三色条
   ═══════════════════════════════════════════════════════════ */

:root {
  --ground: #f5f6f8;
  --surface: #ffffff;
  --raised: #f0f1f3;
  --active: #e8e9ec;
  --border: #e2e3e6;
  --rule: #eceef0;

  --text: #1a1a1a;
  --muted: #6b6b66;
  --faint: #9a9a94;

  --accent: #2d5a3d;
  --accent-hover: #244a32;
  --accent-soft: #e8f0ea;
  --accent-border: #b8ccbf;

  --negative: #c44040;
  --negative-soft: #fbeaea;
  --positive: #2d7a4f;

  --bar-red: #d94444;
  --bar-teal: #2d9d8f;
  --bar-yellow: #e8b923;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --control-h: 34px;
  --row-h: 38px;
  --sidebar-w: 240px;
  --list-w: 240px;
}

/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-text-size-adjust: 100%; }

body {
  font-family: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei UI", system-ui, sans-serif;
  background: var(--ground);
  color: var(--text);
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* ═══════════════════════════════════════════════════════════
   3D 场景背景（仅标准模式）
   整页铺一张 Blender 渲染的逆光连翘虚焦场景，界面浮在其上做磨玻璃。
   .scene      背景层（z-index:0）
   .scene-airy 前景气流层（z-index:3）：花瓣飘落 + 蜜蜂，越过玻璃之上
   ═══════════════════════════════════════════════════════════ */
.scene,
.scene-airy { display: none; }

html { background: #e9e3d5; }
body.theme-standard { background: transparent; }

body.theme-standard .scene {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: 50% 50%;
}

/* 3D 视差层：鼠标/触摸移动时整场景做极小角度的透视旋转 */
.scene__depth {
  position: absolute;
  inset: -8%;
  backface-visibility: hidden;
  transform: rotateX(calc(var(--py, 0) * -1.6deg)) rotateY(calc(var(--px, 0) * 1.9deg))
             translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px), 0);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* 背景板：cover 铺满，缓慢呼吸式推近（40s），几乎不可察觉但有生命感 */
.scene__plate {
  position: absolute;
  inset: -3%;
  background: url('assets/lianqiao_bg_1.jpg') center / cover no-repeat;
  filter: saturate(1.26) contrast(1.08) brightness(0.94);
  translate: 0 20px;
  scale: 1.04;
  animation: scene-breathe 46s ease-in-out infinite alternate;
  will-change: translate, scale;
}

/* 右上天光：叠一层暖金光晕，让背景有"光源" */
.scene__bloom {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 62% at 82% 12%, rgba(255, 244, 214, .85) 0%, rgba(255, 232, 180, .42) 34%, rgba(255, 232, 180, 0) 68%),
    radial-gradient(60% 70% at 8% 92%, rgba(210, 220, 196, .45) 0%, rgba(210, 220, 196, 0) 60%);
  mix-blend-mode: screen;
}

/* 大色块：暖金 → 清冷草绿，隔着磨玻璃仍能读出"光的方向"（style1） */
.scene__tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 78% at 78% 10%, rgba(255, 198, 92, .55) 0%, rgba(255, 210, 120, .22) 38%, rgba(255, 210, 120, 0) 72%),
    radial-gradient(80% 90% at 20% 88%, rgba(196, 186, 132, .35) 0%, rgba(196, 186, 132, 0) 62%),
    linear-gradient(168deg, rgba(255, 236, 190, .28) 0%, rgba(255, 236, 190, 0) 46%);
  mix-blend-mode: multiply;
}

/* 暗角：把四角压下去，界面显得更亮、更浮 */
.scene__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 45%, rgba(255, 255, 255, 0) 42%, rgba(94, 84, 60, .18) 100%);
}

@keyframes scene-breathe {
  from { scale: 1.035; }
  to { scale: 1.055; }
}

/* ── 前景气流层：花瓣与蜜蜂，浮在磨玻璃之上 ─────────────── */
body.theme-standard .scene-airy {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.airy__petal {
  position: absolute;
  left: var(--x);
  top: -8%;
  width: var(--w);
  opacity: 0;
  animation: airy-fall var(--dur) linear var(--delay) infinite;
  will-change: transform, opacity;
}
.airy__petal img { display: block; width: 100%; height: auto; }

.scene__bee {
  position: absolute;
  left: 62%;
  top: 11%;
  width: 56px;
  opacity: .8;
  animation: airy-bee 21s ease-in-out infinite;
  will-change: transform;
}

@keyframes airy-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: var(--o); }
  90% { opacity: var(--o); }
  100% { transform: translate3d(var(--dx), 108vh, 0) rotate(var(--spin)); opacity: 0; }
}

@keyframes airy-bee {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  18% { transform: translate3d(-46px, 26px, 0) rotate(4deg); }
  38% { transform: translate3d(-78px, -12px, 0) rotate(-2deg); }
  58% { transform: translate3d(-30px, 44px, 0) rotate(6deg); }
  78% { transform: translate3d(24px, 12px, 0) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .scene__plate,
  .airy__petal,
  .airy__bee { animation: none; }
  .airy__petal { display: none; }
}

button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* 去掉浏览器原生表单控件外观（否则 button 会自绘灰底 + 3px 边框） */
button,
input,
select,
textarea,
.seg__btn,
.mode-toggle,
.mode-toggle__track,
.chip,
.rchip,
.h-card,
.q-opt,
.arch-head {
  -webkit-appearance: none;
  appearance: none;
}
button { border: 0; background: none; }


/* 焦点样式：去掉浏览器默认的黑色方框，统一成柔和描边（键盘可达） */
button:focus,
.mode-toggle:focus,
.seg__btn:focus,
.chip:focus,
.rchip:focus,
.h-card:focus,
.q-opt:focus,
.arch-head:focus,
input:focus,
select:focus,
textarea:focus { outline: none; }

button:focus-visible,
.mode-toggle:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.h-card:focus-visible,
.q-opt:focus-visible {
  outline: 2px solid rgba(45, 90, 61, .5);
  outline-offset: 2px;
  border-radius: inherit;
}
body.theme-standard button:focus-visible,
body.theme-standard .mode-toggle:focus-visible,
body.theme-standard .h-card:focus-visible,
body.theme-standard .q-opt:focus-visible,
body.theme-standard input:focus-visible,
body.theme-standard select:focus-visible,
body.theme-standard textarea:focus-visible,
body.theme-standard .arch-head:focus-visible {
  outline: 2px solid rgba(232, 168, 32, .55);
}

input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Tribar (三色装饰条) ─────────────────────────────────── */
.tribar {
  display: flex;
  height: 3px;
  width: 100%;
  flex-shrink: 0;
}
.tribar span { flex: 1; }
.tribar span:nth-child(1) { background: var(--bar-red); }
.tribar span:nth-child(2) { background: var(--bar-teal); }
.tribar span:nth-child(3) { background: var(--bar-yellow); }

/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 48px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.hamburger {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  margin-left: -8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 500;
}
.hamburger:hover { background: var(--raised); border-color: var(--faint); }
.hamburger__icon {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hamburger__icon span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}
.hamburger__label {
  font-size: 12px;
  color: var(--text);
}

.brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.seg {
  display: flex;
  gap: 4px;
  background: var(--raised);
  border-radius: var(--radius-md);
  padding: 3px;
}
.seg__btn {
  padding: 4px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.15s;
}
.seg__btn:hover { color: var(--text); }
.seg__btn.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.topbar__end {
  margin-left: auto;
  font-size: 12px;
  color: var(--faint);
}

/* ── Main layout ─────────────────────────────────────────── */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.view {
  display: none;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.view.on { display: flex; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar__head {
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--rule);
}
.sidebar__head h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.sidebar__body {
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.sidebar__actions .btn--primary { flex: 1; }

/* ── Fields ──────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.field select,
.field input[type="text"] {
  height: var(--control-h);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  width: 100%;
}
.field select:focus,
.field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.field input::placeholder { color: var(--faint); }
.field select:disabled { background: var(--raised); color: var(--faint); }

/* ── Chips ───────────────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chips--dense { gap: 4px; }

.chip, .rchip {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  transition: all 0.12s;
  white-space: nowrap;
}
.chip:hover, .rchip:hover { border-color: var(--faint); color: var(--text); }

.chip.on, .rchip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.chip.lv1.on, .rchip.lv1.on { background: var(--positive); border-color: var(--positive); }
.chip.lv2.on, .rchip.lv2.on { background: #b8860b; border-color: #b8860b; }
.chip.lv3.on, .rchip.lv3.on { background: var(--muted); border-color: var(--muted); }

/* ── Sliders ─────────────────────────────────────────────── */
.slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.slider-row input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}
.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.slider-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hint {
  font-size: 11px;
  color: var(--faint);
  line-height: 1.4;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  height: var(--control-h);
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn--ghost:hover { background: var(--raised); }

.btn--end {
  background: transparent;
  color: var(--negative);
  border: 1px solid var(--negative);
}
.btn--end:hover { background: var(--negative-soft); }

/* ── Content area (list + detail) ────────────────────────── */
.content-area {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: var(--ground);
}

.list-pane {
  width: var(--list-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.list-pane__head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-pane__head b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.list-pane__meta { display: none; }

.list-pane__body {
  flex: 1;
  overflow-y: auto;
}

/* ── Herb list rows ──────────────────────────────────────── */
.h-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 14px;
  height: var(--row-h);
  border: none;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  text-align: left;
  transition: background 0.1s;
}
.h-card:hover { background: var(--raised); }
.h-card.selected {
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}

.h-card .lv {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  font-weight: 500;
}
.h-card .lv.l1 { background: #e6f4ea; color: #1e7b4f; }
.h-card .lv.l2 { background: #fef6e0; color: #8a6d00; }
.h-card .lv.l3 { background: var(--raised); color: var(--muted); }

.hc-name {
  font-size: 14px;
  font-weight: 600;
  display: block;
  line-height: 1.3;
}
.hc-meta {
  font-size: 11px;
  color: var(--faint);
  display: block;
  line-height: 1.3;
}

.hc-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hc-count b {
  color: var(--muted);
  font-weight: 500;
}

.hl {
  background: #fff3cd;
  padding: 0 1px;
  border-radius: 2px;
}

.empty {
  padding: 24px 16px;
  font-size: 13px;
  color: var(--faint);
  text-align: center;
}

/* ── Detail pane ─────────────────────────────────────────── */
.detail-pane {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  background: var(--surface);
}

.detail-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 14px;
}

.det-head {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.det-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}
.det-name em {
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  color: var(--faint);
  margin-left: 8px;
}

.det-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.det-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--raised);
  color: var(--muted);
}
.badge.lv1 { background: #e6f4ea; color: #1e7b4f; }
.badge.lv2 { background: #fef6e0; color: #8a6d00; }
.badge.lv3 { background: var(--raised); color: var(--muted); }

.det-counts {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 20px;
}
.det-counts b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.det-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}

.det-sec {
  min-width: 0;
  background: var(--raised);
  padding: 14px 16px;
  border-radius: var(--radius-md);
}
.det-sec.note {
  grid-column: 1 / -1;
}

.det-sec h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.det-sec p, .det-sec div {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  white-space: pre-line;
}

.det-sec.note {
  background: var(--accent-soft);
}
.det-sec.note h3 { color: var(--accent); }

.det-none {
  font-size: 13px;
  color: var(--faint);
  font-style: normal;
}

.det-src {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--faint);
  line-height: 1.5;
}

/* ── Train view ──────────────────────────────────────────── */
.content-area--train {
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 24px;
  gap: 16px;
}

.train-head {
  display: flex;
  justify-content: flex-end;
}

.scoreboard {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
}
.scoreboard b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.q-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  display: none;
  width: 100%;
  flex: 1;
  overflow-y: auto;
}
.q-card.on { display: block; }

.q-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.q-no {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.q-type {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--raised);
  color: var(--muted);
  font-weight: 500;
}
.q-type.single { background: #e6f4ea; color: #1e7b4f; }
.q-type.multi { background: #e8f0ea; color: var(--accent); }

.q-field-tag {
  font-size: 11px;
  color: var(--faint);
}

.q-prompt {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.q-prompt .q-herb-q {
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1px dashed var(--faint);
}
.q-prompt .kw {
  background: var(--accent-soft);
  padding: 1px 4px;
  border-radius: 2px;
}

/* ── Options grid ────────────────────────────────────────── */
.q-opts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.q-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  transition: all 0.12s;
  min-height: 44px;
  cursor: pointer;
}
.q-opt:hover { border-color: var(--faint); background: var(--raised); }

.q-opt .letter {
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
}

.q-opt.sel {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.q-opt.sel .letter { color: var(--accent); }

.q-opt.right {
  border-color: var(--positive);
  background: #e6f4ea;
}
.q-opt.right .letter { color: var(--positive); }

.q-opt.missed {
  border-color: #d4a017;
  background: #fef6d8;
}
.q-opt.missed .letter { color: #a07800; }

.q-opt.wrong {
  border-color: var(--negative);
  background: var(--negative-soft);
}
.q-opt.wrong .letter { color: var(--negative); }

.q-opt.excl {
  opacity: 0.5;
  text-decoration: line-through;
}

.q-opt.locked {
  cursor: default;
}

/* Fill input */
.q-fill { margin-bottom: 20px; }
.q-fill textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
.q-fill textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Actions */
.q-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

/* Feedback */
.q-feedback {
  display: none;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.q-feedback.on { display: block; }

.fb-line {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.fb-line.ok { color: var(--positive); }
.fb-line.no { color: var(--negative); }

.fb-answer {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 12px;
}
.fb-answer b { color: var(--text); }

.fb-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.fb-score .num {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fb-score .den {
  font-size: 12px;
  color: var(--faint);
}

.fb-tags, .fb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ktag {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 3px;
}
.ktag.hit { background: #e6f4ea; color: #1e7b4f; }
.ktag.miss { background: var(--negative-soft); color: #831c1e; }

.fb-detail, .fb-dsec {
  margin-top: 12px;
}
.fb-dsec h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ── Archive ─────────────────────────────────────────────── */
.archive {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.arch-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
}
.arch-count {
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.arch-body {
  display: none;
  padding: 0 16px 16px;
  max-height: 300px;
  overflow-y: auto;
}
.archive.open .arch-body { display: block; }

.arch-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.5;
}
.arch-item:last-child { border-bottom: none; }

.arch-q {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.arch-q .no {
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.arch-q .mark {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 2px;
  font-weight: 500;
}
.arch-q .mark.ok { background: #e6f4ea; color: #1e7b4f; }
.arch-q .mark.no { background: var(--negative-soft); color: #831c1e; }
.arch-q .arch-tag {
  font-size: 10px;
  color: var(--faint);
  background: var(--raised);
  padding: 1px 5px;
  border-radius: 2px;
}

.arch-a { color: var(--muted); }
.arch-a b { color: var(--text); }
.arch-detail { margin-top: 4px; }

/* ── Overlays / Dialogs ──────────────────────────────────── */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.overlay.show { display: flex; }

.dialog {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
}
.dialog--narrow { max-width: 480px; }

.dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.dialog__head h2 {
  font-size: 16px;
  font-weight: 600;
}

.report-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.stat {
  font-size: 12px;
  color: var(--muted);
}
.stat b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat--err b { color: var(--negative); }

.report-list {
  font-size: 13px;
}
.report-empty {
  padding: 24px;
  text-align: center;
  color: var(--faint);
}
.report-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.report-item .rn {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.report-item .q {
  margin: 4px 0;
  line-height: 1.5;
}
.report-item .ans {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.report-item .ans .your { color: var(--negative); }
.report-item .ans b { color: var(--text); }

/* ── Dev panel ───────────────────────────────────────────── */
.dev-panel {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  z-index: 90;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-width: 320px;
}
.dev-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.dev-panel__head h2 { font-size: 13px; font-weight: 600; }
.dev-panel .chips { margin-bottom: 10px; }
.dev-panel select {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

/* ── Toast ───────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--text);
  color: #fff;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  opacity: 0;
  transition: all 0.2s;
  z-index: 200;
  pointer-events: none;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Footer ──────────────────────────────────────────────── */
.foot {
  padding: 12px 16px;
  font-size: 11px;
  color: var(--faint);
  text-align: center;
  border-top: 1px solid var(--rule);
  background: var(--surface);
}

/* ── Sidebar overlay mask (mobile) ───────────────────────── */
.overlay-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 80;
}
.overlay-mask.show { display: block; }

/* ═══════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════ */

/* Tablet: sidebar becomes drawer */
@media (max-width: 1024px) {
  :root {
    --sidebar-w: 260px;
  }

  .hamburger { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 85;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.1);
  }
  .sidebar.open { transform: translateX(0); }

  .content-area {
    /* list + detail still two columns on tablet */
  }

  .q-opts {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: two-column list/detail, 3 options per row */
@media (max-width: 768px) {
  :root {
    --list-w: 45vw;
  }

  .topbar {
    gap: 10px;
    padding: 0 12px;
  }
  .brand-name { font-size: 14px; }
  .seg__btn { padding: 4px 12px; font-size: 12px; }

  .content-area--train {
    padding: 12px;
  }

  .q-card {
    padding: 16px;
  }

  .detail-pane {
    padding: 16px;
  }

  .det-name { font-size: 20px; }

  .q-actions {
    flex-wrap: wrap;
  }
  .q-actions .btn {
    flex: 1;
    min-width: 80px;
  }

  .report-stats {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* Small mobile: two-column but narrower list */
@media (max-width: 480px) {
  :root {
    --list-w: 40vw;
  }

  .topbar {
    gap: 8px;
    padding: 0 10px;
  }
  .brand-name { font-size: 13px; }
  .seg__btn { padding: 3px 10px; font-size: 12px; }
  .src-text { display: none; }

  .content-area--train {
    padding: 10px;
  }

  .q-card {
    padding: 14px;
  }

  .detail-pane {
    padding: 14px;
  }

  .det-name { font-size: 18px; }

  .q-opts {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .q-actions {
    flex-wrap: wrap;
  }
  .q-actions .btn {
    flex: 1;
    min-width: 70px;
    padding: 0 8px;
    font-size: 12px;
  }

  .report-stats {
    flex-wrap: wrap;
    gap: 12px;
  }

  .hc-meta { display: none; }
  .hc-count { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   连翘 Logo (CSS placeholder, will be replaced by 3D model)
   ═══════════════════════════════════════════════════════════ */
.brand-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: lianqiao-sway 6s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes lianqiao-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo img { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   Mode Toggle (iOS-style switch)
   ═══════════════════════════════════════════════════════════ */
.mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.mode-toggle__track {
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: #e2e3e6;
  position: relative;
  transition: background 0.25s ease;
}
.mode-toggle__thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-standard .mode-toggle__track {
  background: var(--accent);
}
body.theme-standard .mode-toggle__thumb {
  transform: translateX(18px);
}
.mode-toggle__label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   Standard Mode (iOS-inspired theme)
   ═══════════════════════════════════════════════════════════ */
body.theme-standard {
  --ground: #f2f2f7;
  --surface: #ffffff;
  --raised: #e9e9ee;
  --active: #dcdce2;
  --border: #d8d8de;
  --rule: #e5e5ea;

  --text: #000000;
  --muted: #3c3c43;
  --faint: #8e8e93;

  --accent: #e8a820;
  --accent-hover: #d49a18;
  --accent-soft: #fef6e0;
  --accent-border: #f0d080;

  --negative: #ff3b30;
  --negative-soft: #ffe5e3;
  --positive: #34c759;

  --bar-red: #ff3b30;
  --bar-teal: #5ac8fa;
  --bar-yellow: #ffcc00;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

body.theme-standard .topbar {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: rgba(242, 242, 247, 0.8);
}

body.theme-standard .sidebar,
body.theme-standard .list-pane,
body.theme-standard .detail-pane {
  border: none;
}

body.theme-standard .list-pane__body .h-card {
  margin: 4px 8px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.theme-standard .list-pane__body .h-card:hover {
  background: var(--raised);
}
body.theme-standard .list-pane__body .h-card.active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

body.theme-standard .q-card,
body.theme-standard .detail-pane {
  border-radius: var(--radius-lg);
}

body.theme-standard .q-opt {
  border-radius: var(--radius-md);
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}
body.theme-standard .q-opt:not(.locked):hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
body.theme-standard .q-opt.sel {
  transform: scale(0.98);
}

body.theme-standard .btn--primary {
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

body.theme-standard .seg {
  border-radius: var(--radius-md);
}
body.theme-standard .seg__btn {
  border-radius: calc(var(--radius-md) - 2px);
}

body.theme-standard .hamburger {
  border-radius: var(--radius-md);
}

body.theme-standard .tribar span:nth-child(1) { background: var(--bar-red); }
body.theme-standard .tribar span:nth-child(2) { background: var(--bar-teal); }
body.theme-standard .tribar span:nth-child(3) { background: var(--bar-yellow); }

/* ═══════════════════════════════════════════════════════════
   iOS 磨玻璃：界面浮在 3D 场景之上
   —— 顶部栏半透明玻璃条，三栏各自成为独立玻璃卡片，
      面板之间留缝，让 3D 背景在缝隙与玻璃后透出来。
   ═══════════════════════════════════════════════════════════ */

/* 顶栏：一条轻薄的玻璃 */
body.theme-standard .topbar {
  height: 52px;
  background: rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 1px 0 rgba(120, 100, 60, .06);
}

body.theme-standard .seg {
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.theme-standard .seg__btn.on {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 4px rgba(80, 60, 20, .12);
}

body.theme-standard .mode-toggle__track {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .7);
}

/* 三栏改为浮起的玻璃卡片 */
body.theme-standard #main {
  padding: 16px 18px 12px;
  gap: 14px;
  background: transparent;
}

body.theme-standard .view {
  gap: 14px;
}

body.theme-standard .content-area {
  gap: 14px;
  background: transparent;
}

body.theme-standard .sidebar,
body.theme-standard .list-pane,
body.theme-standard .detail-pane,
body.theme-standard .q-card,
body.theme-standard .archive {
  background: rgba(255, 255, 255, .40);
  -webkit-backdrop-filter: blur(16px) saturate(200%);
  backdrop-filter: blur(16px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 22px;
  box-shadow:
    0 16px 42px rgba(58, 44, 16, .16),
    0 1px 0 rgba(255, 255, 255, .92) inset;
}

body.theme-standard .sidebar,
body.theme-standard .list-pane,
body.theme-standard .detail-pane {
  overflow: hidden auto;
}

body.theme-standard .sidebar__head,
body.theme-standard .list-pane__head {
  border-bottom: 1px solid rgba(120, 108, 80, .10);
  background: rgba(255, 255, 255, .22);
}

/* 卡片内部控件也统一成"半透明白" */
body.theme-standard select,
body.theme-standard input[type="text"],
body.theme-standard textarea {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(140, 126, 96, .18);
  border-radius: 10px;
}
body.theme-standard select:focus,
body.theme-standard input[type="text"]:focus,
body.theme-standard textarea:focus {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(232, 168, 32, .65);
  outline: 2px solid rgba(232, 168, 32, .18);
}

body.theme-standard .chip,
body.theme-standard .rchip {
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .6);
}
body.theme-standard .chip.on,
body.theme-standard .rchip.on {
  background: rgba(232, 168, 32, .92);
  border-color: rgba(232, 168, 32, .92);
  color: #fff;
}

body.theme-standard .btn--ghost {
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .7);
}

body.theme-standard .q-opt {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .7);
}
body.theme-standard .q-opt:not(.locked):hover {
  background: rgba(255, 255, 255, .78);
}

body.theme-standard .h-card {
  background: transparent;
}
body.theme-standard .h-card:hover {
  background: rgba(255, 255, 255, .55);
}

/* 页脚与三色条：贴在玻璃与背景之间，降低存在感 */
body.theme-standard .foot {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, .38);
  color: rgba(64, 56, 38, .58);
}
body.theme-standard .tribar {
  opacity: .75;
}

/* 弹窗：更强的玻璃 */
body.theme-standard .dialog {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .7);
}

/* ═══════════════════════════════════════════════════════════
   背景风格：style1（暖奶油·大花）/ style2（逆光压暗·拱枝）
   ═══════════════════════════════════════════════════════════ */
body.theme-standard.style-2 .scene__plate {
  background-image: url('assets/lianqiao_bg_2.jpg');
  filter: saturate(1.16) contrast(1.10) brightness(.98);
}
body.theme-standard.style-2 .scene__tint {
  background:
    radial-gradient(64% 76% at 78% 8%, rgba(255, 206, 110, .46) 0%, rgba(255, 214, 140, .16) 42%, rgba(255, 214, 140, 0) 76%),
    linear-gradient(160deg, rgba(60, 72, 48, 0) 40%, rgba(60, 72, 48, .18) 76%, rgba(44, 56, 36, .30) 100%);
  mix-blend-mode: multiply;
}
body.theme-standard.style-2 .sidebar,
body.theme-standard.style-2 .list-pane,
body.theme-standard.style-2 .detail-pane,
body.theme-standard.style-2 .q-card {
  background: rgba(255, 253, 246, .34);
  -webkit-backdrop-filter: blur(20px) saturate(215%);
  backdrop-filter: blur(20px) saturate(215%);
  border-color: rgba(255, 255, 255, .55);
  box-shadow:
    0 20px 50px rgba(40, 32, 12, .22),
    0 1px 0 rgba(255, 255, 255, .7) inset;
}
body.theme-standard.style-2 .topbar {
  background: rgba(255, 250, 238, .30);
}

/* 风格开关（只在标准模式下出现） */
.style-switch { display: none; }

body.theme-standard .style-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .4);
  border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.style-switch__btn {
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(70, 60, 40, .72);
  line-height: 1.4;
}
.style-switch__btn.on {
  background: rgba(255, 255, 255, .95);
  color: #3a3222;
  box-shadow: 0 1px 3px rgba(80, 60, 20, .16);
}
/* 磨玻璃细节：细滚动条、卡片内高光 */
body.theme-standard ::-webkit-scrollbar { width: 9px; height: 9px; }
body.theme-standard ::-webkit-scrollbar-track { background: transparent; }
body.theme-standard ::-webkit-scrollbar-thumb {
  background: rgba(120, 106, 76, .22);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 9px;
}
body.theme-standard ::-webkit-scrollbar-thumb:hover { background: rgba(120, 106, 76, .36); background-clip: padding-box; }


/* 暖色背景上的文字对比度：把次要文字压深一档 */
body.theme-standard { --faint: #7c7566; --muted: #45413a; }
body.theme-standard.style-2 { --faint: #6c6350; --muted: #3d382b; }
body.theme-standard .detail-placeholder { color: #6f6a5e; }
body.theme-standard.style-2 .detail-placeholder { color: #5d5546; }

/* ═══════════════════════════════════════════════════════════
   修正与增强（第二轮）
   ═══════════════════════════════════════════════════════════ */

/* 背景板视差：鼠标/陀螺仪 → --px/--py（-1..1） */

/* ① 选项判分：整块变色（原先只有字母变色，被玻璃样式覆盖了背景） */
body.theme-standard .q-opt.right {
  background: rgba(52, 199, 89, .30);
  border-color: rgba(40, 160, 80, .85);
  box-shadow: 0 0 0 1px rgba(52, 199, 89, .35) inset;
}
body.theme-standard .q-opt.right .letter { color: #0f6b32; }
body.theme-standard .q-opt.right .letter::after { content: ' ✓'; font-size: 11px; }

body.theme-standard .q-opt.wrong {
  background: rgba(240, 70, 58, .26);
  border-color: rgba(214, 48, 38, .85);
  box-shadow: 0 0 0 1px rgba(240, 70, 58, .3) inset;
}
body.theme-standard .q-opt.wrong .letter { color: #9c1c14; }
body.theme-standard .q-opt.wrong .letter::after { content: ' ✕'; font-size: 11px; }

/* 漏选：改用偏青柠的黄绿，和暖金背景拉开 */
body.theme-standard .q-opt.missed {
  background: rgba(210, 232, 74, .62);
  border: 2px dashed rgba(120, 138, 18, .95);
  box-shadow: 0 0 0 1px rgba(160, 180, 40, .25) inset;
}
body.theme-standard .q-opt.missed .letter { color: #4d5a0c; }
body.theme-standard .q-opt.missed .letter::after { content: ' ○'; font-size: 11px; }

body.theme-standard .q-opt.locked { opacity: 1; }

/* ② 训练记录展开时不要挤瘪题目卡 */
body.theme-standard .content-area--train { gap: 14px; }
body.theme-standard .q-card {
  flex: 0 0 auto;
  min-height: min(52vh, 460px);
}
body.theme-standard .archive {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  max-height: 44vh;
}
body.theme-standard .archive .arch-body {
  max-height: none;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* ③ 滑条：可见、可拖动、和玻璃协调 */
body.theme-standard ::-webkit-scrollbar { width: 7px; height: 7px; background: transparent; }
body.theme-standard ::-webkit-scrollbar-track { background: transparent; border: none; }
body.theme-standard ::-webkit-scrollbar-thumb {
  background: rgba(96, 84, 58, .26);
  border: none;
  border-radius: 7px;
}
body.theme-standard ::-webkit-scrollbar-thumb:hover { background: rgba(96, 84, 58, .46); }
body.theme-standard ::-webkit-scrollbar-corner { background: transparent; }

/* 滚动容器不要画出白色底 */
body.theme-standard .sidebar,
body.theme-standard .list-pane__body,
body.theme-standard .detail-pane,
body.theme-standard .content-area--train,
body.theme-standard .arch-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 84, 58, .28) transparent;
}

/* ④ 风格开关挪进左栏 */
.side-style { display: none; }
body.theme-standard .side-style {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(120, 108, 80, .14);
}
.side-style__label {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--faint);
}
body.theme-standard .style-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .65);
}

/* ⑤ 抽屉：打开时压过遮罩（遮罩 z80 / 抽屉 z85，均在根层叠上下文） */
@media (max-width: 1024px) {
  body.theme-standard .sidebar {
    border-radius: 0 22px 22px 0;
    background: rgba(255, 255, 255, .74);
    box-shadow: 6px 0 30px rgba(50, 40, 16, .22);
  }
}

/* ⑥ 面板内部：详情/列表的滚动容器不要吃掉玻璃圆角 */
body.theme-standard .list-pane__body { border-radius: 0 0 22px 22px; }


/* ═══════════════════════════════════════════════════════════
   第四轮：控件回归 iOS 观感
   ═══════════════════════════════════════════════════════════ */

/* ① 分段控件（检索 / 训练）：无边框、灰色胶囊底 + 白色滑块 */
body.theme-standard .seg {
  background: rgba(118, 106, 82, .14);
  border: none;
  border-radius: 11px;
  padding: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  gap: 2px;
}
body.theme-standard .seg__btn {
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: 5px 18px;
  font-weight: 500;
  color: rgba(58, 50, 34, .72);
  box-shadow: none;
}
body.theme-standard .seg__btn.on {
  background: rgba(255, 255, 255, .96);
  color: #2c2418;
  box-shadow: 0 1px 3px rgba(70, 55, 20, .18), 0 0 0 .5px rgba(0, 0, 0, .04);
}
body.theme-standard .seg__btn:hover { color: #2c2418; }

/* ② 模式开关：真·iOS 胶囊 */
body.theme-standard .mode-toggle__track {
  width: 46px;
  height: 28px;
  border-radius: 14px;
  background: rgba(118, 106, 82, .28);
  border: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
  transition: background .25s cubic-bezier(.16, 1, .3, 1);
}
body.theme-standard .mode-toggle__thumb {
  width: 24px;
  height: 24px;
  top: 2px;
  left: 2px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
body.theme-standard .mode-toggle__label {
  color: rgba(58, 50, 34, .8);
  font-weight: 500;
}

/* ③ 训练记录：分组列表头（iOS 灰色小标题 + 展开箭头） */
body.theme-standard .archive {
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(58, 44, 16, .10);
  overflow: hidden;
}
body.theme-standard .arch-head {
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #3a3222;
  background: transparent;
  position: relative;
}
body.theme-standard .arch-head::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(88, 76, 52, .55);
  border-bottom: 2px solid rgba(88, 76, 52, .55);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease;
}
body.theme-standard .archive.open .arch-head::after {
  transform: translateY(-30%) rotate(-135deg);
}
body.theme-standard .arch-count {
  margin-right: 22px;
  color: rgba(88, 76, 52, .6);
}
body.theme-standard .arch-body {
  border-top: 1px solid rgba(120, 108, 80, .14);
  padding: 6px 18px 14px;
}
body.theme-standard .arch-item {
  border-bottom: 1px solid rgba(120, 108, 80, .10);
  padding: 10px 0;
}
body.theme-standard .arch-q .mark {
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 11px;
}

/* ④ 三色条压一点存在感，避免抢黄金背景 */
body.theme-standard .tribar { opacity: .55; }

/* ⑤ 顶栏右侧文字与开关之间的呼吸 */
body.theme-standard .topbar__end { display: flex; align-items: center; gap: 12px; }


/* ═══════════════════════════════════════════════════════════
   第五轮：iOS 质感细修（焦点环 / 开关 / 选中态 / 详情卡 / 滑块）
   ═══════════════════════════════════════════════════════════ */

/* ① 焦点环：去掉浏览器默认的黑色方框，键盘操作改用金色柔和环 */
body.theme-standard button:focus,
body.theme-standard .mode-toggle:focus,
body.theme-standard .arch-head:focus,
body.theme-standard input:focus,
body.theme-standard select:focus,
body.theme-standard textarea:focus { outline: none; }

body.theme-standard button:focus-visible,
body.theme-standard .mode-toggle:focus-visible,
body.theme-standard input:focus-visible,
body.theme-standard select:focus-visible,
body.theme-standard textarea:focus-visible {
  outline: 2px solid rgba(232, 168, 32, .55);
  outline-offset: 3px;
}
body.theme-standard .arch-head:focus-visible { outline-offset: -3px; }

/* ② 模式开关：只剩 iOS 胶囊，没有外框 */
body.theme-standard .mode-toggle {
  background: transparent;
  border: none;
  padding: 2px 0;
  border-radius: 0;
  gap: 9px;
}
body.theme-standard .mode-toggle__track {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: linear-gradient(180deg, #efb532, #dfa01a);
  box-shadow: inset 0 1px 2px rgba(120, 70, 0, .18), 0 1px 2px rgba(120, 80, 0, .12);
  transition: background .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease;
}
body.theme-standard .mode-toggle__thumb {
  width: 24px;
  height: 24px;
  top: 2px;
  left: 2px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .04);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), width .18s ease;
}
body.theme-standard .mode-toggle__thumb { transform: translateX(20px); }
body.theme-standard .mode-toggle:active .mode-toggle__thumb { width: 27px; }
body.theme-standard .mode-toggle__label { color: rgba(58, 50, 34, .82); }

/* ③ 未判分的选中项：白玻璃 + 金色描边 + 轻微金色晕，不再是绿底 */
body.theme-standard .q-opt {
  background: rgba(255, 255, 255, .46);
  border: 1px solid rgba(255, 255, 255, .66);
  box-shadow: 0 1px 2px rgba(70, 55, 20, .05);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}
body.theme-standard .q-opt:hover {
  background: rgba(255, 255, 255, .70);
  border-color: rgba(255, 255, 255, .85);
}
body.theme-standard .q-opt.sel {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(214, 150, 18, .95);
  box-shadow: 0 0 0 2.5px rgba(232, 168, 32, .22), 0 2px 6px rgba(70, 55, 20, .10);
  transform: scale(.995);
}
body.theme-standard .q-opt.sel .letter { color: #b9820e; }
body.theme-standard .q-opt:active { transform: scale(.985); }

/* ④ 详情里的功效 / 适用 / 备注：玻璃分组卡 */
body.theme-standard .det-sec {
  background: rgba(255, 255, 255, .52);
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(58, 44, 16, .06), 0 1px 0 rgba(255, 255, 255, .8) inset;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
body.theme-standard .det-sec.note {
  background: rgba(255, 246, 224, .62);
  border-color: rgba(255, 233, 186, .9);
}
body.theme-standard .det-sec h3 {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(58, 50, 34, .78);
  margin-bottom: 12px;
}
body.theme-standard .det-sec.note h3 { color: #a8781a; }
body.theme-standard .det-sec p,
body.theme-standard .det-sec div { font-size: 13.5px; line-height: 1.85; color: #2c2618; }

/* ⑤ 滑块：iOS 风格（已填充部分金色，未填充灰色），带抓取反馈 */
body.theme-standard .slider-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(to right,
      #e8a820 0%, #e8a820 var(--fill, 50%),
      rgba(120, 108, 84, .22) var(--fill, 50%), rgba(120, 108, 84, .22) 100%);
  transition: filter .18s ease;
}
body.theme-standard .slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .06);
  cursor: grab;
  transition: transform .16s cubic-bezier(.16, 1, .3, 1), box-shadow .16s ease;
}
body.theme-standard .slider-row input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.15);
  cursor: grabbing;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .26);
}
body.theme-standard .slider-row input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}

/* ⑥ 按钮 / 胶囊：统一按压反馈 */
body.theme-standard .btn,
body.theme-standard .chip,
body.theme-standard .rchip,
body.theme-standard .seg__btn,
body.theme-standard .h-card {
  transition: transform .16s cubic-bezier(.16, 1, .3, 1), background .16s ease,
              box-shadow .16s ease, color .16s ease;
}
body.theme-standard .btn:active,
body.theme-standard .chip:active,
body.theme-standard .rchip:active { transform: scale(.96); }
body.theme-standard .seg__btn:active { transform: scale(.97); }
body.theme-standard .h-card:active { transform: scale(.995); }

body.theme-standard .btn--primary {
  background: linear-gradient(180deg, #f0b52e, #e09c14);
  box-shadow: 0 2px 8px rgba(200, 140, 20, .35), 0 1px 0 rgba(255, 255, 255, .45) inset;
  color: #fff;
}
body.theme-standard .btn--primary:active {
  box-shadow: 0 1px 4px rgba(200, 140, 20, .32), 0 1px 0 rgba(255, 255, 255, .3) inset;
}

/* ⑦ 训练记录容器：去掉任何硬边框，仅留极淡的内高光 */
body.theme-standard .archive {
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 12px 30px rgba(58, 44, 16, .10), 0 1px 0 rgba(255, 255, 255, .7) inset;
}
body.theme-standard .arch-head { border: none; }


/* 简洁模式：开关回到灰色 OFF 态 */
body:not(.theme-standard) .mode-toggle__track {
  background: #e2e3e6;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}
body:not(.theme-standard) .mode-toggle__thumb { transform: translateX(0); }


/* ═══════════════════════════════════════════════════════════
   第六轮：去列表圆点 + 判分态优先级
   ═══════════════════════════════════════════════════════════ */

/* ① 详情条目不要原生列表圆点 */
.det-sec ul { list-style: none; margin: 0; padding: 0; }
.det-sec li {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
body.theme-standard .det-sec ul { display: flex; flex-direction: column; gap: 2px; }
body.theme-standard .det-sec li { padding: 1px 0; }

/* ② 判分态必须压过“已选中”态（.sel 与 .right/.wrong 同权重且写在后面，
      之前选中项判对后仍是白底 —— 这里用 .locked 组合把权重抬上去） */
body.theme-standard .q-opt.right,
body.theme-standard .q-opt.right.sel,
body.theme-standard .q-opt.right.locked,
body.theme-standard .q-opt.locked.right {
  background: rgba(52, 199, 89, .30);
  border-color: rgba(40, 160, 80, .9);
  box-shadow: 0 0 0 1px rgba(52, 199, 89, .35) inset, 0 2px 8px rgba(40, 160, 80, .18);
  transform: none;
}
body.theme-standard .q-opt.right .letter,
body.theme-standard .q-opt.right.sel .letter { color: #0f6b32; }

body.theme-standard .q-opt.wrong,
body.theme-standard .q-opt.wrong.sel,
body.theme-standard .q-opt.locked.wrong {
  background: rgba(240, 70, 58, .26);
  border-color: rgba(214, 48, 38, .9);
  box-shadow: 0 0 0 1px rgba(240, 70, 58, .3) inset, 0 2px 8px rgba(200, 40, 30, .16);
  transform: none;
}
body.theme-standard .q-opt.wrong .letter,
body.theme-standard .q-opt.wrong.sel .letter { color: #9c1c14; }

body.theme-standard .q-opt.missed,
body.theme-standard .q-opt.missed.sel,
body.theme-standard .q-opt.locked.missed {
  background: rgba(210, 232, 74, .62);
  border: 2px dashed rgba(120, 138, 18, .95);
  box-shadow: 0 0 0 1px rgba(160, 180, 40, .25) inset;
  transform: none;
}
body.theme-standard .q-opt.missed .letter,
body.theme-standard .q-opt.missed.sel .letter { color: #4d5a0c; }


/* ═══════════════════════════════════════════════════════════
   列表行：单行省略，任何宽度都不挤压换行
   ═══════════════════════════════════════════════════════════ */
.h-card > span:not(.lv) { flex: 1 1 auto; min-width: 0; }
.h-card .hc-name,
.h-card .hc-meta {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* 旧版脚本（backup）才会渲染「功效N适用N备注N」，列表里不需要，详情已有 */
.h-card .hc-count { display: none !important; }


/* ═══════════════════════════════════════════════════════════
   移动端：列表 ⇄ 详情 主从切换 + 单列排版
   ═══════════════════════════════════════════════════════════ */

/* 平板/小屏：详情正文改单列，标题与徽标上下排 */
@media (max-width: 900px) {
  .det-body { grid-template-columns: 1fr; gap: 14px; }
  .det-head { flex-direction: column; gap: 10px; }
  .det-name { font-size: 21px; }
  .det-counts { gap: 12px; flex-wrap: wrap; }
  .detail-pane { padding: 16px 18px; }
}

/* 手机：列表铺满，详情整屏滑入；返回按钮浮在左上 */
@media (max-width: 560px) {
  :root { --row-h: 46px; }
  #view-search .content-area { position: relative; overflow: hidden; }
  .content-area--train {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  .q-card { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .list-pane { width: 100% !important; flex: 1 1 auto; }
  .detail-pane {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 56px 16px 20px;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
    border-radius: 0;
  }
  body.show-detail .detail-pane { transform: translateX(0); }
  body.show-detail .list-pane { visibility: hidden; }

  .det-sec { padding: 14px 16px; }
  .det-sec p, .det-sec div, body.theme-standard .det-sec p, body.theme-standard .det-sec div { font-size: 14px; }
  .q-opt { min-height: 48px; }
  .q-opts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .q-opt {
    font-size: 13px;
    padding: 9px 10px;
    min-height: 46px;
    gap: 6px;
  }
  .q-opt .letter { font-size: 12px; }
  .q-actions { flex-wrap: wrap; gap: 8px; }
}

.mobile-back {
  display: none;
  position: absolute;
  left: 14px;
  top: 12px;
  z-index: 4;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: 17px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.mobile-back span { font-size: 18px; line-height: 1; margin-top: -1px; }
body.theme-standard .mobile-back {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 4px 14px rgba(58, 44, 16, .16);
}
body.show-detail .mobile-back { display: inline-flex; }
body.show-detail .mobile-back:active { transform: scale(.96); }


/* ═══════════════════════════════════════════════════════════
   手机顶栏与横向溢出修复
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .topbar { gap: 6px; padding: 0 8px; height: 50px; }
  .topbar .brand { display: none; }
  .topbar .src-text { display: none; }
  .hamburger { padding: 6px 9px; margin-left: 0; }
  .hamburger__label { display: none; }
  .seg { min-width: 0; flex: 0 1 auto; }
  .seg__btn { padding: 5px 10px; font-size: 12px; }
  .topbar__end { gap: 8px; min-width: 0; }
  body.theme-standard .topbar__end { gap: 8px; }
  .mode-toggle { gap: 6px; }
  .mode-toggle__label { font-size: 11px; }

  #main { padding: 10px 10px 8px; gap: 10px; }
  .view { gap: 10px; }
  .content-area { gap: 10px; min-width: 0; }
  .content-area--train { padding: 10px; gap: 10px; }
  .q-card { padding: 16px 14px; }
  .train-head { padding: 0 2px; }
  .scoreboard { font-size: 12px; gap: 10px; }
  .sidebar { width: 88vw; max-width: 340px; }
  .q-opt { padding: 10px 12px; }
  .q-opt > span:last-child { word-break: break-word; }
  .q-actions .btn { flex: 1 1 auto; min-width: 96px; }
  .foot { padding: 10px 12px; font-size: 10px; }
}


/* 触屏手势：关闭双击缩放与 300ms 点击延迟，tap 立即生效 */
.q-opt, .btn, .chip, .rchip, .seg__btn, .h-card, .mode-toggle, .mobile-back,
.arch-head, .hamburger, .style-switch__btn {
  touch-action: manipulation;
}