/* ================================================================
   考试急 PWA — Components v4.0 「排版 Editorial」
   ----------------------------------------------------------------
   核心变化（相对 v3.0）：
   1. 卡片 → 列表行：透明底 + 上下 1px 线，不再用色块与阴影分层
   2. 按钮 → 黑底白字 + 填充扫过动效（::before scaleX）
   3. 标签 → 去掉色块背景，改为小号大字距的文字标签
   4. 上传区 → 通栏 2px 黑框（无圆角），hover/按下时黑色从左扫过
   5. 选项 → 排版行（左竖条 + 分隔线），替代边框卡片
   6. 弹窗 → 唯一允许"浮起"的元素（直角白卡 + 细线 + 柔和大阴影）
   ----------------------------------------------------------------
   ⚠️ 所有类名保持与 v3.0 一致，避免破坏各页面 JS 的 class 引用
   ================================================================ */

/* ================================================================
   一、页头 / 栏目标签
   ================================================================ */

/* 栏目名 — 小号 + 大字距（杂志语言） */
.sec-label,
.slabel {
  display: block;
  padding: 0 var(--gutter) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--ink-3);
}

/* 区块头 — 带强调线 */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-lg) var(--gutter) var(--space-sm);
  border-bottom: 1px solid var(--ink);
  margin-bottom: 0;
}
.sec-head .nm {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--ink-3);
}
.sec-head .ct {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* ================================================================
   二、卡片 → 列表行（去卡片化）
   保留 .card 类名，但视觉改为"排版行"：无背景、无圆角、上下细线
   ================================================================ */

.card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-md) var(--gutter);
  margin: 0;                      /* 边距由 padding 承担，线要通栏 */
  position: relative;
  transition: background var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}
.card:last-of-type { border-bottom: 1px solid var(--line); }

.card-clickable { cursor: pointer; }
.card-clickable:active { background: var(--bg-sub); }

@media (hover: hover) and (pointer: fine) {
  .card-clickable:hover { background: var(--bg-sub); transform: translateX(4px); }
  .card-clickable:hover .card-title { color: var(--ink); }
}

/* 行内标题 */
.card-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-subtitle {
  font-size: var(--text-sm);
  color: var(--ink-3);
  margin-top: var(--space-2xs);
  letter-spacing: 0.03em;
}
.card-meta {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  flex-wrap: wrap;
  align-items: center;
}

/* ================================================================
   三、按钮
   语言：黑底白字（主）+ 白底黑框（次），填充从左扫过
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  min-height: 46px;                     /* 触控友好 */
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* 填充扫过载体 */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  transition: transform var(--duration-fast) var(--ease-default),
              color var(--duration-normal) var(--ease-default);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease-default);
  z-index: -1;
}
.btn > * { position: relative; z-index: 1; }
.btn span { transition: color var(--duration-normal) var(--ease-default); }

/* 主按钮：黑底白字，hover 反向扫过（白底黑字） */
.btn-primary {
  background: var(--ink);
  color: var(--ink-inv);
  border-color: var(--ink);
}
.btn-primary::before { background: var(--bg); }

/* 次按钮：白底黑框，hover/按下黑底白字 */
.btn-outline { background: var(--bg); color: var(--ink); border-color: var(--ink); }

/* 按下：仅下沉 1px（克制） */
.btn:active { transform: translateY(1px); }
.btn:active::before { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); }
  .btn-primary:hover { color: var(--ink); }
  .btn-outline:hover { color: var(--ink-inv); }
  .btn:hover { transform: translateY(-1px); }
}

/* 强调动作（错题重做等）：黑底白字
   —— 与主按钮同族，不使用信号橙，避免次要动作抢走橙色的注意力
   （信号橙在 v4 中只保留给"关键数据 / 当前进度 / 必须注意"的语义） */
.btn-warn {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-inv);
}
.btn-warn::before { background: var(--bg); }
.btn-warn:active { color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .btn-warn:hover { color: var(--ink); }
}

/* 成功 */
.btn-success {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--ink-inv);
}
.btn-success::before { background: #186139; }

/* 危险 */
.btn-danger {
  background: var(--bg);
  border-color: var(--err);
  color: var(--err);
}
.btn-danger::before { background: var(--err); }
.btn-danger:active { color: var(--ink-inv); }

/* 尺寸 */
.btn-block {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
}
.btn-lg {
  width: 100%;
  min-height: 54px;
  padding: var(--space-md);
  font-size: var(--text-md);
}

/* 禁用 */
.btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  pointer-events: none;
}

/* ================================================================
   四、标签 / 徽章
   去掉色块，改为"小号 + 大字距 + 细下划线"的文字标签
   ================================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0 0 2px;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.6;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* 语义标签：改用"文字色 + 下划线色"，不用背景色块 */
.tag-amber,
.tag-blue   { color: var(--accent); border-bottom-color: var(--accent-line); }
.tag-ok,
.tag-green  { color: var(--ok); border-bottom-color: var(--ok-line); }
.tag-warn,
.tag-orange { color: var(--warn); border-bottom-color: rgba(168,118,31,.35); }
.tag-err,
.tag-red    { color: var(--err); border-bottom-color: var(--err-line); }
.tag-slate  { color: var(--ink-2); border-bottom-color: var(--line); }

/* 徽章：保持胶囊（用于计数） */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  background: var(--ink);
  color: var(--ink-inv);
}

/* ================================================================
   五、输入框 — 下划线式（排版语言）
   ================================================================ */

.input,
.quiz-input {
  width: 100%;
  padding: var(--space-sm) 2px;
  border: none;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: transparent;
  color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-default);
}
.input:focus,
.quiz-input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.input::placeholder,
.quiz-input::placeholder { color: var(--ink-3); }
.quiz-input:disabled { opacity: 0.5; }

/* ================================================================
   六、上传区 — 通栏 2px 黑框 + 填充扫过
   ================================================================ */

.upload-zone {
  margin: var(--space-lg) var(--gutter);
  padding: var(--space-xl) var(--space-lg);
  border: 2px solid var(--ink);
  border-radius: var(--radius-none);
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  transition: color var(--duration-normal) var(--ease-default);
}
.upload-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-default);
  z-index: -1;
}
.upload-zone > * { position: relative; z-index: 1; }

.upload-zone .upload-icon {
  display: block;
  margin: 0 auto var(--space-md);
  transition: stroke var(--duration-normal) var(--ease-default);
}
.upload-zone .upload-title {
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-xs);
  transition: color var(--duration-normal);
}
.upload-zone .upload-hint {
  font-size: var(--text-sm);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  transition: color var(--duration-normal);
}

/* 按下 / hover：黑色扫过，文字反白 */
.upload-zone:active::before { transform: scaleX(1); }
.upload-zone:active .upload-title { color: var(--ink-inv); }
.upload-zone:active .upload-hint  { color: rgba(255,255,255,.6); }
.upload-zone:active .upload-icon  { stroke: var(--ink-inv); }

@media (hover: hover) and (pointer: fine) {
  .upload-zone:hover::before { transform: scaleX(1); }
  .upload-zone:hover .upload-title { color: var(--ink-inv); }
  .upload-zone:hover .upload-hint  { color: rgba(255,255,255,.6); }
  .upload-zone:hover .upload-icon  { stroke: var(--ink-inv); }
}

/* ================================================================
   七、Tab 切换条 — 下划线指示 + 大字距
   ================================================================ */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 52px;
  z-index: 50;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-item {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}
.tab-item.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.tab-spacer { flex: 1; border-bottom: 2px solid transparent; }

/* ================================================================
   八、Toast
   ================================================================ */

.toast {
  position: fixed;
  top: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--ink-inv);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  z-index: 999;
  max-width: 90%;
  text-align: center;
  animation: toastIn var(--duration-normal) var(--ease-default);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ================================================================
   九、弹窗 — 唯一允许"浮起"的元素
   ================================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-md);
  animation: overlayIn var(--duration-fast) var(--ease-default);
}
@keyframes overlayIn { from { opacity: 0; } }

.modal-card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  max-width: 400px;
  width: 100%;
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-lg);
  animation: modalIn var(--duration-normal) var(--ease-default);
}
@keyframes modalIn {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

.modal-title {
  text-align: left;
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-xs);
}
.modal-desc {
  text-align: left;
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-lg);
}

/* 题型选择项 — 排版行 */
.qtype-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  transition: color var(--duration-fast), padding-left var(--duration-fast) var(--ease-default);
}
.qtype-option:active { color: var(--accent); padding-left: var(--space-xs); }
.qtype-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
}

/* ================================================================
   十、Loading / Skeleton
   ================================================================ */

/* 加载：细线旋环（不再是粗壮圆圈） */
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: var(--space-xl) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 骨架屏：微光从左扫过 */
.skeleton {
  background: var(--bg-sub);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.skeleton-card {
  height: 72px;
  margin: 0 var(--gutter) var(--space-sm);
  border-radius: var(--radius-sm);
}
.skeleton-line {
  height: 14px;
  margin: var(--space-xs) 0;
  width: 60%;
}
.skeleton-line.short { width: 35%; }

/* ================================================================
   十一、题目 / 答题
   ================================================================ */

/* 题干区 — 无限框，靠上下线分隔 */
.question-card {
  background: transparent;
  margin: 0;
  border-radius: 0;
  padding: var(--space-lg) var(--gutter) var(--space-md);
  border: none;
}
.question-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  margin-bottom: 0;
  color: var(--ink);
}

/* 进度条 — 细线 + 电流头 */
.question-progress {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--gutter);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-3);
}
.question-progress-bar {
  flex: 1;
  height: 2px;
  background: var(--bg-sunk);
  border-radius: 0;
  overflow: hidden;
}
.question-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 0;
  box-shadow: 6px 0 8px rgba(232, 84, 30, 0.35);   /* 电流拖尾 */
  transition: width var(--duration-normal) var(--ease-default);
}

/* 选项 — 排版行：左竖条 + 下划线（不再是边框卡片） */
.option-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--gutter);
  margin-bottom: 0;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: transparent;
  transition: padding-left var(--duration-fast) var(--ease-default),
              color var(--duration-fast);
}
.option-item:last-of-type { border-bottom: 1px solid var(--line); }

/* 左侧竖条（用伪元素，避免 DOM 改动） */
.option-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--duration-fast) var(--ease-default);
}

.option-letter {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: none;
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: var(--weight-normal);
  font-size: var(--text-base);
  flex-shrink: 0;
  color: var(--ink-3);
  transition: color var(--duration-fast);
}

/* 选中态 */
.option-item.selected { padding-left: calc(var(--gutter) + 8px); }
.option-item.selected::before { transform: scaleY(1); }
.option-item.selected .option-letter { color: var(--accent); }
.option-item.selected { color: var(--ink); font-weight: var(--weight-bold); }

/* 正确 */
.option-item.correct { padding-left: calc(var(--gutter) + 8px); }
.option-item.correct::before { background: var(--ok); transform: scaleY(1); }
.option-item.correct .option-letter { color: var(--ok); }
.option-item.correct { color: var(--ok); font-weight: var(--weight-bold); }

/* 错误 */
.option-item.wrong .option-letter { color: var(--err); }
.option-item.wrong { color: var(--err); font-weight: var(--weight-bold); }
.option-item.wrong { position: relative; }
.option-item.wrong::after {
  content: '';
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 58%;
  height: 1.5px;
  background: var(--err);
  transform-origin: left center;
  animation: strikeLine var(--duration-normal) var(--ease-default) both;
}
@keyframes strikeLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 答案揭晓区 — 浅灰通栏批注块 */
.answer-reveal {
  margin: var(--space-lg) var(--gutter) 0;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  background: var(--bg-sub);
  border-radius: 0;
  border-left: 3px solid var(--ok);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
  animation: revealIn var(--duration-slow) var(--ease-default);
}
.answer-reveal.wrong-answer { border-left-color: var(--err); }
@keyframes revealIn {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* 判断题按钮 */
.tf-btn {
  flex: 1;
  padding: var(--space-sm);
  text-align: center;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.tf-btn.selected {
  background: var(--ink);
  color: var(--ink-inv);
  border-color: var(--ink);
}

/* ================================================================
   十二、答题卡
   ================================================================ */

.answer-sheet {
  background: var(--bg-sub);
  border-radius: 0;
  padding: var(--space-md) var(--gutter);
  margin: 0 0 var(--space-sm);
  border: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  animation: sheetIn var(--duration-normal) var(--ease-default);
}
@keyframes sheetIn {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

.answer-sheet-header {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-sm);
  text-align: center;
  color: var(--ink-3);
}
.answer-dots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
}

/* 答题卡数字 — 方形直角（排版感） */
.answer-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-none);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  border: 1px solid var(--line);
}
.answer-dot.dot-current {
  border-color: var(--ink);
  border-width: 1.5px;
  color: var(--ink);
  font-weight: var(--weight-bold);
}
.answer-dot.dot-correct {
  background: var(--ok);
  color: var(--ink-inv);
  border-color: var(--ok);
}
.answer-dot.dot-wrong {
  background: var(--err);
  color: var(--ink-inv);
  border-color: var(--err);
}

/* ================================================================
   十三、环形结果 / 掌握度
   保留环形（用户习惯），改为"墨色轨道 + 橙色进度 + 衬线数字"
   ================================================================ */

.result-ring {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  margin: var(--space-md) auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(
    var(--accent) calc(var(--pct) * 1%),
    var(--bg-sunk) 0
  );
  animation: ringIn var(--duration-reveal) var(--ease-default);
}
@keyframes ringIn {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.result-ring::after {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--bg);
}
.result-ring-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.mastery-ring-wrap { display: inline-flex; align-items: center; justify-content: center; position: relative; }
.mastery-ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(var(--ink) calc(var(--pct) * 1%), var(--bg-sunk) 0);
}
.mastery-ring::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--bg);
}
.mastery-ring-text {
  position: absolute;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--ink-2);
}
.mastery-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-3);
}

/* ================================================================
   十四、知识点 / 记忆卡 / 讲解卡 — 全部"去卡片化"
   语言：栏目标签 + 内容 + 分隔线
   ================================================================ */

.keypoint-item {
  padding: var(--space-md) var(--gutter);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.keypoint-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-md);
  bottom: var(--space-md);
  width: 2px;
  background: var(--line);
}
.keypoint-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  margin-bottom: var(--space-xs);
}
.keypoint-content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}
.keypoint-children { padding-left: var(--space-md); border-left: 1px solid var(--line); margin-top: var(--space-xs); }

/* 记忆卡 */
.mnemonic-card {
  padding: var(--space-md) var(--gutter);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.mnemonic-type {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--accent);
  margin-bottom: var(--space-xs);
}
.mnemonic-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-xs);
}
.mnemonic-content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}

/* 讲解卡 */
.explain-card {
  padding: var(--space-md) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.explain-kp {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--ink-3);
  margin-bottom: var(--space-xs);
}
.explain-simple {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.explain-analogy {
  margin-top: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 2px solid var(--accent);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}

/* ================================================================
   十五、AI 对话
   ================================================================ */

.chat-area {
  padding: var(--space-md) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.chat-msg {
  max-width: 86%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  animation: msgIn var(--duration-normal) var(--ease-default);
}
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }

.chat-msg.ai {
  align-self: flex-start;
  background: var(--bg-sub);
  color: var(--ink);
  border-left: 2px solid var(--ink);
  border-radius: 0;
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--ink-inv);
}

.chat-input-wrap {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--bg);
  align-items: center;
}
.chat-input {
  flex: 1;
  padding: var(--space-sm) 0;
  border: none;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}
.chat-input:focus { outline: none; border-bottom-color: var(--ink); }
.chat-input::placeholder { color: var(--ink-3); }

.chat-send {
  min-width: 46px;
  min-height: 46px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--ink-inv);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-default);
}
.chat-send:active { transform: translateY(1px); }

/* 追问页 — 知识点抬头 */
.chat-kp {
  padding: var(--space-md) var(--gutter);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-2);
}

/* 思考中 — 轻微呼吸 */
.chat-thinking {
  color: var(--ink-3);
  animation: thinkPulse 1.4s ease-in-out infinite;
}
@keyframes thinkPulse { 50% { opacity: 0.45; } }

/* ================================================================
   十六、通用工具类
   ================================================================ */

.divider {
  height: 1px;
  background: var(--line);
  margin: var(--space-md) var(--gutter);
}
.divider-strong { height: 1px; background: var(--ink); }

/* 重要性星级 — SVG 星，未点亮为灰色低透明 */
.stars {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.star {
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
  opacity: 0.28;
  line-height: 0;
}
.star.on { opacity: 1; color: var(--accent); }

/* ================================================================
   十七、浮层（PWA 引导 / 版本更新）
   与模态框同级 —— 本方案中仅这两类元素允许"浮起"
   ================================================================ */

.float-layer {
  position: fixed;
  bottom: 20px;
  left: var(--space-md);
  right: var(--space-md);
  z-index: 999;
  max-width: 480px;
  margin: 0 auto;
  animation: floatIn var(--duration-normal) var(--ease-default);
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.float-card {
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  text-align: center;
}
.float-icon {
  display: flex;
  justify-content: center;
  color: var(--ink-3);
  margin-bottom: var(--space-xs);
}
.float-title {
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-2xs);
}
.float-desc {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
}

/* 版本更新横幅 — 黑底直角，替代原青紫霓虹渐变 */
.update-banner {
  position: fixed;
  bottom: 80px;
  left: var(--space-md);
  right: var(--space-md);
  z-index: 999;
  max-width: 480px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--ink-inv);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  box-shadow: var(--shadow-lg);
  animation: floatIn var(--duration-normal) var(--ease-default);
}
.ub-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
}
.ub-btn {
  background: transparent;
  color: var(--ink-inv);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-default);
}
.ub-btn:active { background: rgba(255, 255, 255, 0.16); }
@media (hover: hover) and (pointer: fine) {
  .ub-btn:hover { background: rgba(255, 255, 255, 0.16); }
}