/* ===== 波2 · 做题页 ===== */
/* 做题页（#practice 模式选择 / 做题主界面 / 交卷结束区）视觉升级。
   覆盖 style.css 旧样式，不改动原文件；设计令牌见 style.css :root 与 redesign.css 波1补充（--primary-light-2 等）。
   硬约束：.q-body pre 及其子规则为教学动画系统代码样式，本文件绝不覆盖。
   暗色：style.css 的 @media (prefers-color-scheme: dark) 规则保持原状；本文件仅在浅色模式
   （prefers-color-scheme: light）下使用明色十六进制（spec 指定值），暗色下这些规则不生效。 */

/* ── 模式选择页（练习 / 考试） ── */
.mode-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
@media (max-width: 767px) {
  .mode-select { grid-template-columns: 1fr; }
}
.mode-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}
.mode-card:hover, .mode-card.selected {
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12);
  transform: translateY(-2px);
}
.mode-card .mode-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-size: 1.6rem;
  background: var(--primary-light-2);
  border-radius: 12px;
}
.mode-card .mode-title { font-weight: 600; }
.mode-card .mode-desc { color: var(--text-secondary); }

/* ── 做题主界面 ── */

/* 题号导航卡片 */
.question-nav {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.q-nav-btn { border-radius: 10px; }

/* 题干区白卡（.q-body pre 代码块样式是教学系统硬约束，不改） */
.question-content {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.question-content .q-body {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 20px 0;
}

/* 选项：全宽卡片（选中/判题态的明色值仅浅色模式生效，暗色走 style.css 令牌规则） */
.choices-list .choice-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  background: var(--card-bg);
}
.choices-list .choice-item:hover {
  background: var(--primary-light-2);
  border-color: var(--primary);
}
.choices-list .choice-item.selected {
  background: var(--primary-light-2);
  border: 2px solid var(--primary);
  border-left-width: 4px;
}
@media (prefers-color-scheme: light) {
  .choices-list .choice-item.correct {
    background: #ecfdf5;
    border-color: #22c55e;
    color: #22c55e;
  }
  .choices-list .choice-item.wrong {
    background: #fef2f2;
    border-color: #ef4444;
    color: #ef4444;
  }
  .choice-item.correct .choice-letter { color: #22c55e; }
  .choice-item.wrong .choice-letter { color: #ef4444; }
  .choice-item.correct .choice-radio { border-color: #22c55e; background: #22c55e; }
  .choice-item.wrong .choice-radio { border-color: #ef4444; background: #ef4444; }
}

/* 判题反馈条（practice.js 内联样式已移除，改由 .fb-bar 类接管；图标经 ::before 追加，不改 DOM） */
.fb-bar {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  font-size: var(--text-sm);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
@media (prefers-color-scheme: light) {
  .fb-bar.fb-correct { background: #ecfdf5; color: #22c55e; border: 1px solid #bbf7d0; }
  .fb-bar.fb-wrong { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
}
.fb-bar.fb-correct::before { content: ''; display: inline-block; width: 1em; height: 1em; background-color: #22c55e; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center / contain; }
.fb-bar.fb-wrong::before { content: ''; display: inline-block; width: 1em; height: 1em; background-color: #ef4444; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain; }

/* 暗色下保持对错色编码（令牌值；不加新令牌） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {

      .fb-bar.fb-correct { background: var(--success-light); color: var(--success); }
      .fb-bar.fb-wrong { background: var(--danger-light); color: var(--danger); }
  }
}
:root[data-theme="dark"] {

    .fb-bar.fb-correct { background: var(--success-light); color: var(--success); }
    .fb-bar.fb-wrong { background: var(--danger-light); color: var(--danger); }
}


/* 计时器：等宽数字 + 柔和底色（不足 5 分钟转红逻辑保留 style.css .timer.warning） */
.timer {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--text-sm);
  background: var(--bg-alt);
  padding: 3px 12px;
  border-radius: 999px;
}
.timer.warning { color: var(--danger); background: var(--danger-light); }

/* ── 结束 / 提交区 ── */
.exam-result-banner {
  background: var(--primary-light-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
}

/* ===== 波2 · 结果页 ===== */
/* 结果页（#result/:sessionId）视觉升级：大分数卡、逐题列表行式布局、题号徽章、状态胶囊、AI 解析区卡片化。
   覆盖 style.css 旧样式（.result-summary / .result-item / .status），不改 DOM 结构与逻辑。
   对错态的明色十六进制仅浅色模式（prefers-color-scheme: light）生效；暗色走 --success/--danger 令牌
   （style.css 暗色块已深色重定义）。 */

/* ── 大分数卡：白卡 + 令牌主色大分数 ── */
.result-summary {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.result-summary h2 { color: var(--text); margin-bottom: 4px; }
.result-summary .big-score {
  color: var(--primary);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.result-summary .big-score.fail { color: var(--danger); }
.result-summary p { color: var(--text-secondary); font-size: 0.95rem; }
.result-summary p strong { color: var(--text); }
.result-summary .coach-line { color: var(--text-secondary); font-size: var(--text-sm); }

/* 逐题卡片容器：纳入 12px 圆角 + 边框（.result-item 仅结果页使用，:has 精确限定） */
.card:has(.result-item) {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ── 逐题列表：行式布局 + 题号徽章 + 状态胶囊 ── */
.result-item { gap: 10px; }
.result-item > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.result-item .rn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-right: 0; /* 覆盖 style.css 的 margin-right:10px，间距交给 flex gap */
  white-space: nowrap;
}
.result-item .status {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* 对错态明色（浅色模式） */
@media (prefers-color-scheme: light) {
  .result-item > div:first-child:has(> .status.correct) .rn { background: #22c55e; color: #fff; }
  .result-item > div:first-child:has(> .status.wrong) .rn { background: #ef4444; color: #fff; }
  .result-item .status.correct { background: #ecfdf5; color: #22c55e; border: 1px solid #bbf7d0; }
  .result-item .status.wrong { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
}

/* 暗色对错态（令牌，样式同做题页方案） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {

      .result-item > div:first-child:has(> .status.correct) .rn { background: var(--success); color: #fff; }
      .result-item > div:first-child:has(> .status.wrong) .rn { background: var(--danger); color: #fff; }
      .result-item .status.correct { background: var(--success-light); color: var(--success); }
      .result-item .status.wrong { background: var(--danger-light); color: var(--danger); }
  }
}
:root[data-theme="dark"] {

    .result-item > div:first-child:has(> .status.correct) .rn { background: var(--success); color: #fff; }
    .result-item > div:first-child:has(> .status.wrong) .rn { background: var(--danger); color: #fff; }
    .result-item .status.correct { background: var(--success-light); color: var(--success); }
    .result-item .status.wrong { background: var(--danger-light); color: var(--danger); }
}


/* ── AI 解析区：容器卡片化（内容结构与按钮不变，.ai-expl-btn 沿用 .btn-outline） ── */
.result-ai-expl {
  margin: 2px 14px 14px;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.result-ai-expl .ai-expl-wrap { margin-top: 0; } /* 容器已带 padding，去掉 .ai-expl-wrap 自带上边距 */

/* ── 底部操作按钮（返回首页等）间距 ── */
.text-center.mt-12 { margin-top: 20px; }

/* ===== 波2 · 学习页 ===== */
/* 学习页（#learn）改为分段页：顶部 tab bar（知识树 / 题解动画），页内切换不改 hash 路由。
   树/详情双栏（.learn-layout 左树右详情 flex）为 style.css 既有布局，原样保留，仅包进
   #learn-panel-tree。.seg-tabs / .seg-tab / .seg-panel 为通用分段样式，学情分段页 T5 复用
   （tab 按钮 data-tab  面板 data-tab 同名匹配）。全令牌实现，暗色自动生效。 */

/* ── 白卡容器 ── */
.learn-shell {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

/* ── 通用分段 tab bar（学情分段页 T5 复用） ── */
.seg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.seg-tab {
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg-tab:hover {
  background: var(--bg);
  color: var(--text);
}
.seg-tab.active {
  background: var(--primary-light-2);
  color: var(--primary);
  font-weight: 600;
}

/* 面板：默认显示；隐藏用 display:none（切换由 learn.js 委托处理） */
.seg-panel { display: block; }

/* 从考纲考点跳转进入知识点详情时，详情页顶部显示「返回考纲」按钮 */
.kp-back-syllabus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.kp-back-syllabus:hover { background: var(--primary-light-2); border-color: var(--primary); }
.kp-back-syllabus .icon-tile { width: 16px; height: 16px; display: inline-flex; align-items: center; }

/* ── 学习页内双栏高度：壳内固定视口高度（nav 56px + shell padding 40px + tab bar 约 90px） ── */
.learn-shell .learn-layout {
  height: calc(100vh - 190px);
  min-height: 480px;
}
@media (max-width: 767px) {
  .learn-shell { padding: 12px; }
  .learn-shell .learn-layout { height: auto; min-height: 70vh; }
}

/* ── 解析付费墙：免费试看遮罩 + 双 CTA（解析锁定处共用）──────────────────
   与 practice.js 内的 SOL_PREVIEW_STYLE 同一套规则，提到全局供
   kp-practice / learn / daily-practice 复用，避免每个组件各写一份。 */
.sol-preview-wrap{position:relative;max-height:88px;overflow:hidden;border-radius:10px;background:#f8fafc;padding:12px 14px}
.sol-preview{color:#475569;font-size:0.92rem;line-height:1.7}
.sol-mask{position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(to bottom,rgba(248,250,252,0),#f8fafc 92%)}
.sol-upsell{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.sol-btn{border:none;border-radius:10px;padding:11px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.sol-btn-primary{background:var(--brand,#4f6ef7);color:#fff}
.sol-btn-primary:hover{filter:brightness(1.05)}
.sol-btn-ghost{background:#eef2f7;color:#475569}
.sol-plans-link{text-align:center;font-size:12px;color:var(--brand,#4f6ef7);text-decoration:none;margin-top:2px}
.sol-badge{background:#eef2ff;color:#4f6ef7}

/* ── 学习内容门禁：讲解为会员专属（普通用户在知识点详情页看到的替代正文）── */
.kp-learning-locked{padding:22px 20px;border:1px dashed #dbe3ef;border-radius:12px;background:#fbfcfe;margin-top:14px}
.kp-learning-locked .lck-title{font-size:1.02rem;font-weight:700;color:var(--text,#1e293b);margin-bottom:8px}
.kp-learning-locked .lck-desc{margin:0 0 14px;color:#64748b;font-size:.9rem;line-height:1.75}
.kp-learning-locked .lck-actions{display:flex;gap:10px;flex-wrap:wrap}
.kp-learning-locked .lck-heads{margin:0 0 14px;padding-left:18px;color:#64748b;font-size:.86rem;line-height:1.9;columns:2;column-gap:24px}
@media (max-width:640px){.kp-learning-locked .lck-heads{columns:1}}