/* 夜 macOS Vibrancy 令牌:深灰三层次(#1c1c1e→#2c2c2e→#3a3a3c) + 系统毛玻璃 + 克制 + 蓝强调 + 衬线标题 */
:root {
  /* 字体:标题系统衬线(Georgia/宋体),正文无衬线;无外链(离线可用) */
  --font-display: Georgia, "Songti SC", "STSong", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* Type Scale(两主题共用数值) */
  --fs-2xl: 40px; --fs-xl: 28px; --fs-lg: 22px; --fs-bs: 16px; --fs-sm: 13px; --fs-xs: 12px;
  --lh-base: 1.5;
  --bg: #1c1c1e;                    /* 最深层 */
  --card: #2c2c2e;                  /* 中层面板(卡片实色,非玻璃) */
  --card-solid: #2c2c2e;
  --border: rgba(255, 255, 255, 0.08);  /* 1px 边框 white/8 */
  --text: rgba(255, 255, 255, 0.95);
  --text2: rgba(255, 255, 255, 0.7);
  --accent: #0a84ff;                /* macOS 蓝:强调/链接,仅文本高亮不作背景 */
  --accent-rgb: 10, 132, 255;
  --good: #30d158;
  --good-rgb: 48, 209, 88;
  --bad: #ff453a;
  --bad-rgb: 255, 69, 58;
  --warn: #ff9f0a;
  --bar: rgba(255, 255, 255, 0.08);
  --btn-text: rgba(255, 255, 255, 0.9);
  --btn-sec-bg: rgba(255, 255, 255, 0.06);
  --glass-blur: blur(20px);          /* 系统级毛玻璃,无 saturate 增强 */
  --glass-blur-hero: blur(20px);
  /* 极简阴影:深度靠层次不靠投影(macOS 禁大阴影/发光) */
  --shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.3);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  /* 配色(语义呼应):按钮面用 #3a3a3c(macOS 禁亮色作背景),进度/强调文本用蓝 */
  --c-start: #3a3a3c;     /* 开始训练/判题/下一步:按钮面 */
  --c-progress: #0a84ff;  /* 进度/看板数字:macOS 蓝文本 */
  /* Sea Hero 首页字色(昼夜共用亮背景,仅字色区分):夜=黑 */
  --portal-ink: #000000;
  --portal-dim: rgba(0, 0, 0, 0.55);
}
/* 日 Natural Organic 令牌:暖奶油底 + 大地色(石棕/鼠尾草绿/陶土) + 衬线标题 + 有机圆角 */
body.light {
  /* 字体:标题衬线 + 正文无衬线(有机规范 serif 标题/sans 正文) */
  --font-display: Georgia, "Songti SC", "STSong", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --bg: #faf6f1;                    /* 暖奶油 */
  --card: #fdfbf7;                  /* 暖白卡片 */
  --card-solid: #fdfbf7;
  --border: #d6c7b5;                /* 暖陶土浅边(禁纯黑) */
  --text: #5c4033;                  /* 石棕:标题/正文主 */
  --text2: #6a5d4f;                 /* 暖灰(加深保 AA≥4.5) */
  --accent: #7b8f67;                /* 深鼠尾草绿:强调(加深保大字号 AA≥3) */
  --accent-rgb: 123, 143, 103;
  --good: #5f8d80;                  /* 深青绿:对(保 AA) */
  --good-rgb: 95, 141, 128;
  --bad: #c0563b;                   /* 陶土红:错(保 AA) */
  --bad-rgb: 192, 86, 59;
  --warn: #8a6430;                  /* 深赭:警告(保 AA) */
  --bar: #e9e0d4;                   /* 浅米:轨道 */
  --btn-text: #faf6f1;              /* 按钮文字:奶油 */
  --btn-sec-bg: #e9e0d4;            /* 次级按钮底 */
  --glass-blur: none;               /* 有机禁玻璃 */
  --glass-blur-hero: none;
  --shadow-glass: 0 8px 24px rgba(92, 64, 51, 0.08);  /* 有机柔和投影 */
  --ease-spring: ease-in-out;       /* 有机缓动(生长节奏) */
  --c-start: #5f7352;               /* 开始训练:深鼠尾草(奶油字保 AA) */
  --c-progress: #8a6430;            /* 进度:深赭文本(保 AA) */
  --portal-ink: #1f7a4d;            /* Sea Hero 首页:日=深绿字(亮底保对比) */
  --portal-dim: rgba(31, 122, 77, 0.65);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 全局焦点环(A2:键盘用户可见焦点位置) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.light :focus-visible { outline-color: #5c4033; }  /* 日模式石棕焦点环 */
html, body { margin: 0; padding: 0; }
body {
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-bs);
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  /* 流动渐变背景(动态):两层径向渐变缓慢漂移 */
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
  transition: color .3s ease;
}
/* 装饰性背景已移除(macOS Vibrancy 克制原则:纯色底,无光井/星点/流星/WebGL 魔环) */

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  min-height: 100dvh;
}
/* 首页:Sea Hero 全屏居中宽列(设计 V4:背景/标题/CTA 三要素移植自 Sea) */
body.home main {
  max-width: 64rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

.theme-bar {
  position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); z-index: 50;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  background: rgba(28, 28, 30, 0.8);   /* macOS Vibrancy:半透明深灰 + 系统级 blur,模拟 NSVisualEffectView */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 999px;
}
/* 主题栏(日夜切换+返回门户)仅首页出现;做题卡/反馈视图隐藏 */
body:not(.home) .theme-bar { display: none; }
.theme-btn {
  width: 40px; height: 40px; border: none; padding: 0;
  background: transparent; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text2);
  transition: background .2s var(--ease-spring), color .2s, transform .12s;
}
.theme-btn .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn:active { transform: scale(.9); }
.theme-bar .portal-back { margin-right: 6px; }  /* 返回门户钮与主题钮视觉分隔(平台规范 §4.5) */
.theme-btn.active {
  background: var(--bar);  /* 选中加深:实色填充 + 主前景色 */
  color: var(--text);
}
body.light .theme-btn { color: #5c4033; }  /* 日模式图标石棕,保 WCAG 4.5:1 */

/* 卡片(macOS:实色中层面板 #2c2c2e + 1px 边框 + 中等圆角,深度靠层次不靠玻璃) */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;              /* rounded-xl */
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-glass);
  transition: border-color .2s var(--ease-spring), background .2s;
}

h1 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; margin: 8px 0 14px; text-align: center; letter-spacing: -.02em; }
h2 { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; margin: 4px 0 10px; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
body.light h1, body.light h2 { font-weight: 600; letter-spacing: -.02em; }  /* 有机:衬线标题,字距收紧 */
body.light h2 { letter-spacing: 0; text-transform: none; }

/* 标题即 logo:逐字波形(轻柔款 A)。
   JS 把 .wave-title 文本逐字包成 span,每个 span 递增 delay 形成"波浪传递"。
   文字用纯色保证与背景对比(透明渐变文字会与背景径向渐变融色不可视)。 */
.wave-title {
  margin: 8px 0 22px;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--text);               /* macOS:纯白/95,无发光 */
  text-shadow: none;
}
/* 入场动画:标题整体淡入上移(stagger 首位,数据行/CTA 的入场在文末 Sea Hero 块) */
body.home .wave-title {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeInUp .45s var(--ease-spring) .08s forwards;
}
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* 按钮 */
.btn {
  display: block; width: 100%; padding: 14px 16px; margin: 8px 0;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--btn-sec-bg); color: var(--text);
  font-size: var(--fs-bs); font-weight: 500; cursor: pointer;
  transition: opacity .15s, transform .12s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--border); }
.btn:active { opacity: .8; transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--c-start); color: var(--btn-text); border-color: rgba(255, 255, 255, 0.1); }
.btn.primary:hover { filter: brightness(1.08); background: var(--c-start); }
.btn.primary:disabled { opacity: .55; }
/* 首页配色按钮 */
/* 「开始训练」:macOS 按钮面 #3a3a3c,无呼吸动画(克制) */
.btn[data-act="start"] {
  background: var(--c-start);
  color: var(--btn-text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  animation: none;
}
.btn[data-act="start"]:hover { filter: brightness(1.1); }

.muted { color: var(--text2); font-size: var(--fs-sm); }
.row { display: flex; gap: 8px; }
.row .btn { margin: 8px 0 0; }

/* 4 格进度条(纯视觉,设计 §7.3):缩为 2/5 宽,与 80% 居中题卡左边对齐 */
.qbar {
  display: flex; gap: 6px; margin-bottom: 14px;
  width: 40%; align-self: center;  /* 与题卡同水平框(80% 居中),左边对齐题卡左边 */
}
.qbar .cell {
  flex: 1; height: 8px; border-radius: 4px; background: var(--bar);
  transition: background .25s, opacity .25s;
}
.qbar .cell.done { background: rgba(255, 255, 255, 0.5); box-shadow: none; }
.qbar .cell.cur { background: var(--accent); opacity: 1; animation: none; }
/* (curPulse / btnPulse 已移除:macOS 禁装饰性动画) */

/* 题干:14px(介于选项 fs-sm 13 与 fs-bs 16 之间),行高 1.5 保日模式粗体多行长文可读 */
#q-stem { font-family: var(--font-display); font-size: 14px; font-weight: 500; line-height: var(--lh-base); letter-spacing: -.01em; }
body.light #q-stem { font-weight: 600; }

/* 选项 */
.opt {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; margin: 6px 0; border: 1px solid var(--border);
  border-radius: 12px; min-height: 48px; cursor: pointer;
  background: #1c1c1e;               /* macOS 输入/选项底(比卡片 #2c2c2e 深一层) */
  transition: border-color .15s, background .15s, transform .12s;
}
.opt:hover { border-color: rgba(255, 255, 255, 0.2); }
.opt:active { transform: scale(.99); }
.opt .lbl {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-sm); font-weight: 600; color: var(--text2);
  transition: background .15s, color .15s, border-color .15s;
}
.opt.selected .lbl { background: var(--accent); color: #fff; border-color: var(--accent); }
.opt.selected { border-color: var(--accent); background: rgba(10, 132, 255, 0.12); }
.opt.correct { border-color: var(--good); background: rgba(48, 209, 88, 0.12); }
.opt.correct .lbl { background: var(--good); color: #1c1c1e; border-color: var(--good); }
.opt.wrong { border-color: var(--bad); background: rgba(255, 69, 58, 0.12); }
.opt.wrong .lbl { background: var(--bad); color: #1c1c1e; border-color: var(--bad); }
.opt.locked { pointer-events: none; }
.opt .body { flex: 1; word-break: break-word; padding-top: 2px; font-size: var(--fs-sm); line-height: 1.4; }

/* 判题结果 */
.verdict { padding: 10px 4px; border-radius: 8px; flex-direction: column; background: transparent; }  /* 透明:解析内容直接落玻璃面,避免与横条两个不透明深色块在玻璃卡上叠加重叠 */
.verdict.pinned { position: sticky; top: 0; max-height: calc(100dvh - 78px - env(safe-area-inset-bottom, 0px)); }  /* 横条被推到顶后:钉顶 + .v-body 独立滚动 */
.verdict > div { font-size: var(--fs-sm); line-height: 1.4; }  /* 标题(✓/✗) + 正确答案行 */
.verdict.ok { color: var(--good); }
.verdict.bad { color: var(--bad); }
/* 对错栏(.v-head 钉顶):大字结果 + 正解胶囊 + 顶部状态色条。满宽贴边 + 不透明底遮盖上滚解析 */
.verdict .v-head {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  margin: 0 -18px 8px;              /* 横向抵消 .verdict(4px)+.card(14px) padding 满宽贴边 */
  padding: 10px 14px;
  background: var(--card-solid);
  border-radius: 0;
  border-top: 2px solid var(--good);  /* 顶部状态色条(对=绿),.bad 覆盖为红;无发光 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);  /* macOS 最小分离阴影 */
}
.verdict.bad .v-head { border-top-color: var(--bad); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.verdict .v-head .v-res { font-weight: 700; font-size: var(--fs-lg); line-height: 1; text-shadow: none; }
.verdict .v-head .v-ans { margin-right: auto; font-size: var(--fs-sm); padding: 3px 12px; border-radius: 999px; background: rgba(var(--good-rgb), .16); border: 1px solid rgba(var(--good-rgb), .5); color: var(--good); }  /* 正解胶囊 */
.verdict.bad .v-head .v-ans { background: rgba(var(--bad-rgb), .16); border-color: rgba(var(--bad-rgb), .5); color: var(--bad); }
.verdict .v-head .v-timer { color: var(--text2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; opacity: .8; }  /* 读秒 */
.verdict .v-body { flex: 1; overflow-y: auto; min-height: 0; }  /* 解析独立滚动:横条钉 verdict 顶,首行在顶不被遮,后面溢出下滑查看 */
#q-next { flex-shrink: 0; }  /* 下一步固定 verdict 底部,不随解析滚动 */
/* 阶段A 读秒横条(无对错):accent 状态色条,读秒居中;无呼吸发光 */
.verdict.reading .v-head { border-top-color: var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); justify-content: center; animation: none; }
.verdict.reading .v-head .v-timer { opacity: 1; font-size: var(--fs-sm); color: var(--accent); }
/* 日模式 Minimalist Bold:顶 6px 硬色块 + 大字 900 + 黑底反白硬胶囊,0 圆角零阴影零发光 */
body.light .verdict .v-head { background: var(--card-solid); box-shadow: none; border: 1px solid var(--border); border-top: 3px solid var(--good); border-radius: 12px 12px 0 0; }
body.light .verdict.bad .v-head { border-top-color: var(--bad); }
body.light .verdict .v-head .v-res { text-shadow: none; }
body.light .verdict.reading .v-head { border-top-color: var(--accent); animation: none; box-shadow: none; }
body.light .verdict.reading .v-head .v-timer { color: var(--accent); }
.verdict .reason { color: var(--text); margin: 4px 0; font-size: var(--fs-xs); line-height: 1.3; }

/* 结构化解析(答错题 verdict + retry 浮层共用):一句话 + 考点/思路/逐选项/易混淆/延伸 */
.brief { color: var(--text); margin: 4px 0; font-size: var(--fs-sm); line-height: 1.4; }
.verdict .brief { font-size: var(--fs-sm); line-height: 1.4; }  /* 覆盖 .verdict>div 的 fs-sm */
.analysis { margin: 6px 0 2px; }
.an-sec { margin: 6px 0; font-size: var(--fs-xs); line-height: 1.3; }
.an-lbl { display: inline-block; min-width: 3em; color: var(--text2); font-weight: 600; }
.an-txt { color: var(--text); }
.an-opt { margin: 2px 0 2px 1em; color: var(--text); }

/* 三选项浮层(设计 §7.4) */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 16px;
  animation: overlayIn .2s ease;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.overlay .panel {
  background: var(--card);          /* macOS:实色面板 */
  border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; width: 100%; max-width: 360px;
  box-shadow: var(--shadow-glass);
  animation: panelIn .25s var(--ease-spring);
}
@keyframes panelIn { from { opacity: 0; transform: scale(.92) translateY(8px); } to { opacity: 1; transform: none; } }
.overlay h3 { margin: 0 0 12px; text-align: center; }
.overlay .btn { margin: 6px 0; }

/* 反馈视图 */
.fitem {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.fitem .stem { flex: 1; color: var(--text); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fitem .tag { color: var(--warn); font-size: var(--fs-xs); cursor: pointer; }
.fitem .btn { width: auto; margin: 0; padding: 4px 10px; }  /* 列表内行内按钮(重新答题/标记/取消标记) */

/* 本轮题目:行可点击展开完整题面(题干/选项/你的答案/对错,见 app.js toggleQview) */
.fitem-q { cursor: pointer; border-radius: 8px; }
.fitem-q:hover { background: var(--btn-sec-bg); }
.qmark { margin-right: 6px; font-weight: 700; }
.qmark.ok { color: var(--good); }
.qmark.bad { color: var(--bad); }
.qmark.none { color: var(--text2); }
.qview { padding: 10px 2px 14px; border-bottom: 1px solid var(--border); }
.qview[hidden] { display: none; }
.qv-meta { font-size: var(--fs-xs); color: var(--text2); margin-bottom: 8px; }
.qv-meta .ok { color: var(--good); font-weight: 600; }
.qv-meta .bad { color: var(--bad); font-weight: 600; }
.qv-stem { font-family: var(--font-display); font-size: 14px; font-weight: 500; line-height: 1.5; margin-bottom: 8px; white-space: pre-wrap; }  /* 与答题视图题干同规格 */
.qv-opt { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; padding-left: 4px; }

.view { display: none; }
.view.active { display: block; animation: viewIn .25s var(--ease-spring); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 答题视图:进度条+题卡包在同一 80% 居中框内,左边天然对齐(本项要求) */
#view-quiz.active {
  /* 减去 main 上下 padding(顶16+底20)与底部安全区:使 main 恰为 100dvh、整页不滚动。
     题卡已自带卡内滚动(max-height+overflow-y:auto),整页滚动属冗余需去除。
     36px=main 纵向 padding 之和(不含 safe);日/夜通用(无主题选择器);移动端仅改横向 padding 故常量不变。
     不变式:qbar(22)+卡max(100dvh-78-safe)=100dvh-56-safe < 本值(100dvh-36-safe),frame 装得下、不反向撑高。 */
  min-height: calc(100vh - 36px - env(safe-area-inset-bottom, 0px));
  min-height: calc(100dvh - 36px - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#view-quiz .quiz-frame { width: 80%; margin: 0 auto; }  /* 80% 居中框 */
#view-quiz .quiz-frame > .qbar { flex-shrink: 0; width: 50%; }  /* 进度条占框 50%(=原 2/5),与题卡左边对齐 */
#view-quiz .card { width: 100%; text-align: justify; padding: 14px; }  /* 题干缩至14px后,框内留白同比收紧16->14(间距随密度);日/夜通用 */
/* 解析后:题卡随解析自然变长,但以"屏幕高度"为上限--顶到天花板即停,溢出内容在卡内下拉滚动;
   进度条在上、题卡在下,二者合计不超屏,故进度条始终可见(无需 sticky);
   [下一步]随内容排在末尾,滚到内容底即见。解析前内容短于上限,卡片自适应高度、不滚动。 */
#view-quiz .card {
  max-height: calc(100dvh - 78px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  scrollbar-width: thin;                                       /* Firefox:细滚动条 */
  scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.04);  /* Firefox:细滑块+微轨道 */
  scrollbar-gutter: stable;                     /* 预留滚动条位,避免解析后出现/消失时内容横向跳动 */
  overscroll-behavior: contain;                 /* 卡内滚到边界不牵连外层页面/下拉刷新 */
}
/* macOS:white/15 细滑块,无光晕 */
#view-quiz .card::-webkit-scrollbar { width: 10px; }
#view-quiz .card::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 8px; }
#view-quiz .card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  box-shadow: none;
  transition: background .2s var(--ease-spring);
}
#view-quiz .card::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 触屏(移动端):隐藏常驻滚动条 + 取消 gutter 占位,回归触屏滑动惯例。桌面保留上方自定义滚动条。
   ① 触屏滑动是本能交互,无需常驻条做"可滚"提示;② 自定义 ::-webkit-scrollbar 会令 webkit 从
   系统 overlay 切到 classic 常驻条(占布局、常驻),违背移动端 overlay 惯例;③ 自定义香槟滑块在
   iOS Safari 本就不生效(系统 overlay 取代),iOS 群体看不到、Android 反成常驻桌面条,两端皆失;
   ④ scrollbar-gutter:stable 仅服务桌面 classic 条,移动端 overlay 不占空间、无跳动,stable 反致
   卡内内容区不对称变窄。故触屏统一隐藏,桌面(hover+fine)不动。 */
@media (hover: none) and (pointer: coarse) {
  #view-quiz .card {
    scrollbar-width: none;        /* Firefox:不渲染滚动条 */
    scrollbar-gutter: auto;       /* 取消永久预留,回收右侧 10px */
  }
  #view-quiz .card::-webkit-scrollbar { display: none; }  /* Chrome/Safari/Android:不渲染 */
}

/* 判题/下一步/跳过:收窄 + 居中(三态一致,disabled 不变窄) */
#q-judge, #q-next, #q-skip {
  width: auto;
  min-width: 140px;
  max-width: 60%;
  padding: 10px 40px;
  margin: 14px auto 6px;
  white-space: nowrap;
  font-size: 14px;  /* 跟题干归并(16->14),双主题安全 */
}
/* 判题/下一步:macOS 按钮面 #3a3a3c,无呼吸动画 */
#q-judge, #q-next {
  background: var(--c-start);
  color: var(--btn-text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  animation: none;
}
#q-judge:hover:not(:disabled), #q-next:hover:not(:disabled) { filter: brightness(1.1); }
/* 判题处理中:防重复点击(顺序锁兜底);读秒已由 verdict 横条 .v-timer 承担,按钮不再作顶栏 */
#q-judge.is-loading {
  opacity: 1;            /* loading ≠ disabled:保持满色 */
  animation: none;       /* 停 idle 呼吸 */
  pointer-events: none;  /* 防重复点击 */
  cursor: progress;
}
/* 新题流式期:判题按钮灰禁用(对应 is-loading 的 pointer-events 模式,不掺 disabled 属性) */
#q-judge.is-streaming {
  opacity: .5;
  animation: none;
  pointer-events: none;
  cursor: progress;
}

@media (min-width: 768px) {
  .opt:hover { border-color: var(--accent); }
  .btn:hover:not(:disabled) { filter: brightness(1.06); }
}

/* 移动端窄屏:题卡框放宽填充 + main padding 收窄(桌面不变) */
@media (max-width: 480px) {
  main { padding-left: 12px; padding-right: 12px; }
  #view-quiz .quiz-frame { width: 98%; }  /* 80% → 98%,窄屏填充 */
  #view-quiz .quiz-frame > .qbar { width: 60%; }  /* 进度条同比放宽,保持与题卡左边对齐 */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* (胶片颗粒 .grain 已移除:macOS 克制,无装饰纹理) */

/* ============================================================
   日模式 Natural Organic 覆盖块
   大地暖色 / 有机 blob 圆角 / 柔和投影 / 慢节奏缓动 / 无玻璃 / 无纯黑
   ============================================================ */
/* 主题栏:实色暖白,无毛玻璃(有机禁玻璃);主题钮保持胶囊 */
body.light .theme-bar { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
body.light .theme-btn { border-radius: 999px; }

/* 卡片/面板:暖白 + 暖陶土 1px 边 + 有机不规则 blob 圆角 + 柔和投影 */
body.light .card,
body.light .overlay .panel {
  background: var(--card);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: 28px 20px 30px 22px;   /* 有机 blob 不规则圆角 */
  box-shadow: var(--shadow-glass);
}

/* 滚动条:暖陶土细条,无光晕 */
body.light #view-quiz .card { scrollbar-color: #c9b394 transparent; }
body.light #view-quiz .card::-webkit-scrollbar-track { background: transparent; }
body.light #view-quiz .card::-webkit-scrollbar-thumb {
  background: #c9b394;
  border: none;
  border-radius: 8px;
  box-shadow: none;
}

/* 按钮:暖白底 + 暖陶土边,有机圆角;主 CTA=深鼠尾草/深青绿(奶油字,保 AA) */
body.light .btn {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  transition: background .5s ease-in-out, color .5s ease-in-out, border-color .5s ease-in-out;  /* 有机慢缓动 */
}
body.light .btn:hover:not(:disabled) { background: #e9e0d4; color: var(--text); filter: none; }
body.light .btn:active { transform: scale(.98); opacity: 1; }
body.light .btn.primary,
body.light .btn[data-act="start"],
body.light #q-judge,
body.light #q-next {
  background: var(--c-start); color: var(--btn-text); border-color: var(--c-start);
  animation: none;
}
body.light .btn.primary:hover,
body.light .btn[data-act="start"]:hover,
body.light #q-judge:hover:not(:disabled),
body.light #q-next:hover:not(:disabled) {
  background: var(--c-start); color: var(--btn-text); filter: brightness(1.06); border-color: var(--c-start);
}

/* 选项:暖白底 + 暖陶土 1px 边,有机圆角;标签用深色填充保小字号 AA */
body.light .opt {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: none;
}
body.light .opt:hover { border-color: #8b9d77; background: #f5efe3; color: var(--text); }
body.light .opt:hover .lbl { color: var(--text); border-color: #8b9d77; }
body.light .opt .lbl { border: 1px solid var(--border); border-radius: 50%; color: var(--text); }
body.light .opt.selected { border-color: var(--accent); background: #f5efe3; color: var(--text); }
body.light .opt.selected .lbl { background: #5f7352; color: #faf6f1; border-color: #5f7352; }
body.light .opt.correct { border-color: var(--good); background: #f2f6f1; }
body.light .opt.correct .lbl { background: #4a7266; color: #faf6f1; border-color: #4a7266; }
body.light .opt.wrong { border-color: var(--bad); background: #f8efe8; }
body.light .opt.wrong .lbl { background: #b3482f; color: #faf6f1; border-color: #b3482f; }

/* qbar:有机圆格 */
body.light .qbar .cell { border-radius: 999px; background: var(--bar); }
body.light .qbar .cell.done { background: var(--good); box-shadow: none; }
body.light .qbar .cell.cur { background: var(--accent); opacity: 1; animation: none; }

/* 首页入场:有机节奏(保持 fadeInUp 淡入上移),不强制 animation:none */
body.light.home .wave-title {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ============================================================
   重新答题浮层(LLM 双维复核) 夜模式
   ============================================================ */
.overlay .panel.rv-panel {
  max-width: 420px;
  max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.rv-sec { margin: 12px 0; padding-top: 10px; border-top: 1px solid var(--border); }
.rv-sec-title { font-size: var(--fs-xs); color: var(--text2); font-weight: 700; letter-spacing: .05em; margin-bottom: 6px; }
.rv-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.6;
}
.rv-badge.ok { background: rgba(var(--good-rgb), .16); border: 1px solid rgba(var(--good-rgb), .5); color: var(--good); }
.rv-badge.bad { background: rgba(var(--bad-rgb), .16); border: 1px solid rgba(var(--bad-rgb), .5); color: var(--bad); }
.rv-badge.field { background: var(--btn-sec-bg); border: 1px solid var(--border); color: var(--text2); }
.rv-issue { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: var(--btn-sec-bg); border: 1px solid var(--border); font-size: var(--fs-xs); line-height: 1.4; }
.rv-issue-problem { display: block; margin: 5px 0 3px; color: var(--text); }
.rv-issue-fix { display: block; color: var(--accent); font-size: var(--fs-xs); }
.rv-feedback {
  margin: 6px 0 4px; padding: 8px 10px;
  border-radius: 0 8px 8px 0;
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), .08);
  color: var(--text); font-size: var(--fs-sm); line-height: 1.5;
}
.overlay .rv-panel .btn { margin: 8px 0 0; }
.overlay .rv-panel .btn.primary { margin-top: 10px; }

/* 日模式 Minimalist Flat 覆盖(黑硬边 / 纯色 pill / 圆角归零) */
body.light .rv-sec { border-top-color: #0A0A0A; }
body.light .rv-sec-title { color: #6B7280; }
body.light .rv-badge { border-radius: 0; border-width: 2px; }
body.light .rv-badge.ok { background: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; }
body.light .rv-badge.bad { background: #FF3366; border-color: #FF3366; color: #FFFFFF; }
body.light .rv-badge.field { background: #FFFFFF; border-color: #0A0A0A; color: #0A0A0A; }
body.light .rv-issue { background: #FFFFFF; border: 1px solid #0A0A0A; border-radius: 0; }
body.light .rv-issue-fix { color: #FF3366; }
body.light .rv-feedback { background: #FFFFFF; border-left: 3px solid #FF3366; border-radius: 0; }

/* ============================================================
   Sea Hero 首页(设计 V4:Sea 元素移植)
   「同一片海」:hero.jpg 昼夜共用亮背景(白纱 20% 并入 background 单层);
   昼夜只靠字色区分(令牌 --portal-ink/--portal-dim):夜=黑字,日=深绿字;
   CTA 用 Sea 双色 #e1fcad/#122023 互为镜像相位。仅首页;答题/反馈视图维持原令牌。
   ============================================================ */

/* 全屏海浪背景层:垫底(z-index:-1)不遮内容;白纱与照片合成单层(免额外全屏合成层) */
.portal-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
              #000000 url("assets/hero.jpg") center / cover no-repeat;
}
/* 移动端换 1024px 变体(56KB),省 240KB 关键路径传输 */
@media (max-width: 768px) {
  .portal-bg {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
                      url("assets/hero-1024.jpg");
  }
}

/* 大标题:clamp 随视口等比(3~6rem);宽屏一行,窄屏在空格处自然折为
   CLOUD / COMPUTING 两行(text-wrap:balance 保证两行等宽,不出现孤词长尾) */
body.home .wave-title {
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--portal-ink);
}

/* 三行数据:小标签(12px 宽字距) + 衬线大数字(1.375rem),标签退后数字站前 */
.portal-data {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin: 1.25rem 0 3rem;
}
.portal-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .9em;
  margin: 0;
}
/* 昼夜字色走令牌;切主题 0.5s 过渡(与 CTA hover 同节奏) */
body.home .wave-title,
.portal-line .pl,
.portal-line .pv { transition: color .5s ease-in-out; }
.portal-line .pl {
  font-size: var(--fs-xs);
  font-weight: 300;
  letter-spacing: .3em;
  color: var(--portal-dim);
}
.portal-line .pv {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--portal-ink);
  font-variant-numeric: tabular-nums;
}

/* 首页入场:标题逐字 fadeInUp 已有,三行数据错峰淡入(.3/.45/.6s),CTA 收尾(.75s) */
body.home .portal-line,
body.home .cta {
  opacity: 0;
  animation: fadeInUp .45s var(--ease-spring) forwards;
}
body.home .portal-line:nth-child(1) { animation-delay: .3s; }
body.home .portal-line:nth-child(2) { animation-delay: .45s; }
body.home .portal-line:nth-child(3) { animation-delay: .6s; }
body.home .cta { animation-delay: .75s; }
/* 日模式沿用原"禁入场动画"约定 */
body.light.home .portal-line,
body.light.home .cta { opacity: 1; transform: none; animation: none; }
/* 减少动画:入场元素基线 opacity:0,forwards 终态被禁后必须显式恢复可见
   (置于文末保证晚于各入场规则生效;否则暗色模式+reduced-motion 下首页整体不可见) */
@media (prefers-reduced-motion: reduce) {
  body.home .wave-title, body.home .portal-line, body.home .cta { opacity: 1; transform: none; }
}

/* ============================================================
   Sea 荧光绿胶囊 CTA(label 圆角条 + 圆形图标位,结构移植自 Sea.css)
   夜:#e1fcad 底黑字,hover 反色 #122023/#e1fcad(Sea 原味);
   日:默认即反色态(#122023 底 #e1fcad 字),hover 反回 -- 与夜互为镜像。
   双箭头错位位移(±2.5rem,500ms ease-in-out)两主题同机制。
   ============================================================ */
.cta {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
}
/* 共享底色/过渡(两子元素同底同字色,hover/主题覆盖同样成组) */
.cta-label,
.cta-icon {
  background-color: #e1fcad;
  color: #000000;
  transition: background-color .5s ease-in-out, color .5s ease-in-out;
}
.cta-label {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.cta-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.375rem;
  overflow: hidden;
  border-radius: 9999px;
}
.cta:hover .cta-label,
.cta:hover .cta-icon { background-color: #122023; color: #e1fcad; }
/* 日模式:默认即反色态,hover 反回(与夜互为镜像) */
body.light .cta-label,
body.light .cta-icon { background-color: #122023; color: #e1fcad; }
body.light .cta:hover .cta-label,
body.light .cta:hover .cta-icon { background-color: #e1fcad; color: #122023; }

/* 两枚同形箭头,初始一左一右错位;hover 时反向位移,轮换入场(Sea 原样) */
.cta-icon-svg {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform .5s ease-in-out;
}
.cta-icon-svg--a { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cta:hover .cta-icon-svg--a { transform: translate(calc(-50% + 2.5rem), -50%); }
.cta-icon-svg--b { left: 50%; top: 50%; transform: translate(calc(-50% - 2.5rem), -50%); }
.cta:hover .cta-icon-svg--b { transform: translate(-50%, -50%); }
/* ============================================================
   ArticleCard · 首页变体(云端首页专用)
   替换原 Sea Hero 全屏布局;复用远端主题令牌;0 新增文字
   ============================================================ */

/* 容器:全屏透明,继承 body.home main 的 64rem 居中 */
.article-card--portal {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 16px 16px 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  /* 入场动画延用 body.home 的 fadeInUp */
  opacity: 0;
  transform: translateY(14px);
  animation: fadeInUp .45s var(--ease-spring) .08s forwards;
}

/* cover 区:抽象渐变 + 几何细线(纯装饰,0 文字) */
.article-card__cover {
  position: relative;
  width: 100%;
  max-width: 36rem;
  height: 96px;
  margin: 8px 0 4px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.08) 0%, transparent 100%);
  border: 1px solid var(--border);
}

/* 几何细线:伪元素画 3 条斜线 */
.article-card__cover-deco {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(115deg, transparent 49.5%, rgba(10, 132, 255, 0.4) 49.8%, rgba(10, 132, 255, 0.4) 50.2%, transparent 50.5%),
    linear-gradient(115deg, transparent 64%, rgba(10, 132, 255, 0.35) 64.3%, rgba(10, 132, 255, 0.35) 64.7%, transparent 65%),
    linear-gradient(115deg, transparent 78%, rgba(10, 132, 255, 0.3) 78.3%, rgba(10, 132, 255, 0.3) 78.7%, transparent 79%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.9;
}

/* 日模式:暖渐变 + 加粗几何线 */
body.light .article-card__cover {
  background: linear-gradient(180deg, rgba(123, 143, 103, 0.12) 0%, transparent 100%);
  border-radius: 28px 20px 30px 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-glass);
}

body.light .article-card__cover-deco {
  background-image:
    linear-gradient(115deg, transparent 49.4%, rgba(123, 143, 103, 0.55) 49.8%, rgba(123, 143, 103, 0.55) 50.2%, transparent 50.6%),
    linear-gradient(115deg, transparent 63.9%, rgba(123, 143, 103, 0.5) 64.3%, rgba(123, 143, 103, 0.5) 64.7%, transparent 65.1%),
    linear-gradient(115deg, transparent 77.9%, rgba(123, 143, 103, 0.45) 78.3%, rgba(123, 143, 103, 0.45) 78.7%, transparent 79.1%);
}

/* 内容区:大字标题 + 数据 */
.article-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

/* 大字标题:复用 .wave-title 的逐字波形 + fadeInUp,字色用 --portal-ink(亮背景上区分昼夜) */
.article-card__hero-title.wave-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--portal-ink);
  text-shadow: none;
}

/* 三行 portal-data:宽度收紧,横向居中,字色用 --portal-dim */
.article-card--portal .portal-data {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 24rem;
  margin: 0;
  text-align: center;
}

.article-card--portal .portal-line {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 14px;
  margin: 0;
}

.article-card--portal .pl {
  color: var(--portal-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.light .article-card--portal .pl {
  letter-spacing: 0;
  text-transform: none;
}

.article-card--portal .pv {
  color: var(--portal-ink);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* CTA 容器:宽度收紧 */
.article-card__cta-wrap {
  margin: 8px 0 0;
  width: 100%;
  max-width: 22rem;
}

/* CTA 直接复用 .cta 原样式(荧光绿胶囊 + 双箭头错位) */
.article-card__cta.cta {
  width: 100%;
}