/* ==========================================================================
   扇贝考研 App 真实 design tokens
   来源：git.17bdc.com / tp/frontend/aio-next
         apps/exam-mentor/app/globals.css + tailwind.config.js
   ========================================================================== */

/* ---------- Web fonts (扇贝线上 CDN) ---------- */
@font-face {
  font-family: 'AlibabaPuHuiTiR';
  src:
    url(https://assets.baydn.com/fonts/AlibabaPuHuiTi-3-55-Regular-subset.woff2) format('woff2'),
    url(https://assets.baydn.com/fonts/AlibabaPuHuiTi-3-55-Regular-subset.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'AlibabaPuHuiTiB';
  src:
    url(https://assets.baydn.com/fonts/AlibabaPuHuiTi-3-85-Bold-subset.woff2) format('woff2'),
    url(https://assets.baydn.com/fonts/AlibabaPuHuiTi-3-85-Bold-subset.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'AlibabaPuHuiTiH';
  src:
    url(https://assets.baydn.com/fonts/AlibabaPuHuiTi-3-105-Heavy-subset.woff2) format('woff2'),
    url(https://assets.baydn.com/fonts/AlibabaPuHuiTi-3-105-Heavy-subset.woff) format('woff');
  font-display: swap;
}

:root {
  /* ===== Page / Surface 层级 ===== */
  --color-page-primary: #fff;
  --color-page-secondary: #f9fafc;
  --color-page-brand: #e5f6f7;
  --color-page-vip: #fff4e5;

  --color-surf-lowest: #fff;
  --color-surf-low: #fff;
  --color-surf-high: #f9fafc;
  --color-surf-highest: #eeeef1;
  --color-surf-hint: rgba(51, 51, 51, 0.85);
  --color-surf-transparent: rgba(255, 255, 255, 0.6);

  /* ===== Stroke ===== */
  --color-stroke-neutral-light: rgba(125, 125, 125, 0.2);
  --color-stroke-neutral-bold: rgba(125, 125, 125, 0.1);
  --color-stroke-brand: #21bab5;

  /* ===== CTA ===== */
  --color-cta-primary: #21bab5;         /* 品牌青绿 · 主 CTA */
  --color-cta-primary-hover: #1ca39f;
  --color-cta-secondary: rgba(0, 23, 29, 0.03);
  --color-cta-secondary-active: rgba(33, 186, 181, 0.1);
  --color-cta-tertiary: #fff;
  --color-cta-vip: #ffcf95;

  /* ===== Text ===== */
  --color-text-title: rgba(0, 23, 29, 0.9);
  --color-text-primary: rgba(0, 23, 29, 0.9);
  --color-text-secondary: rgba(0, 23, 29, 0.6);
  --color-text-tertiary: rgba(0, 23, 29, 0.4);
  --color-text-minimum: rgba(0, 23, 29, 0.25);
  --color-text-vip-primary: #7c4f20;
  --color-text-vip-secondary: #d78829;
  --color-text-brand: #21bab5;
  --color-text-tips: #ff7b2b;
  --color-text-inverse-cta: #fff;
  --color-text-inverse-title: #fff;
  --color-text-inverse-primary: rgba(248, 250, 251, 0.9);
  --color-text-inverse-secondary: rgba(248, 250, 251, 0.7);

  /* ===== 板块识别色（数学真题宝 & UGC 刷题助手） ===== */
  --color-plate-math: #796dec;          /* 真题宝紫 · 数学板块 banner / icon */
  --color-plate-math-soft: #efecfe;
  --color-plate-ugc: #5b67e8;           /* UGC 刷题助手 · 板块辅色 */

  /* ===== 状态色 ===== */
  --color-success: #21bab5;
  --color-success-container: rgba(33, 186, 181, 0.1);
  --color-error: #ff7373;
  --color-error-container: rgba(255, 115, 115, 0.1);
  --color-notification: #ff5939;
  --color-selected: #ffc652;
  --color-selected-container: rgba(255, 198, 82, 0.1);
  --color-tips: #ff8b44;
  --color-tips-container: #fff9e6;
  --color-link: #3a90ff;
  --color-vip-container: #fff5e6;
  --color-overlay: #f4fbfb;

  /* ===== 圆角 / 阴影 ===== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 0 0 rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 23, 29, 0.06), 0 1px 2px rgba(0, 23, 29, 0.04);
  --shadow-card: 0 2px 8px rgba(0, 23, 29, 0.04);

  /* ===== 字体 ===== */
  --font-sans: 'AlibabaPuHuiTiR', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
  --font-bold: 'AlibabaPuHuiTiB', 'AlibabaPuHuiTiR', -apple-system, 'PingFang SC', sans-serif;
  --font-heavy: 'AlibabaPuHuiTiH', 'AlibabaPuHuiTiB', -apple-system, 'PingFang SC', sans-serif;
  --font-num: 'DINAlternate', 'Roboto', 'SF Pro Display', -apple-system, sans-serif;
  --font-mono: 'Roboto', 'SF Mono', ui-monospace, monospace;

  /* ===== 布局宽度上限 ===== */
  --max-text-width: 840px;
  --max-list-width: 720px;
  --max-image-width: 440px;
  --max-popup-width: 540px;
}

/* ==========================================================================
   夜间模式（opt-in）
   用法：在 <html> 或 <body> 上加 data-theme="dark"
         <html lang="zh-CN" data-theme="dark">
   只覆盖中性色（背景 / 文字 / 描边 / 浮层），品牌色与状态色保持一致
   ========================================================================== */

:root[data-theme="dark"],
[data-theme="dark"] {
  /* Page / Surface */
  --color-page-primary: #14161e;
  --color-page-secondary: #1d1f29;
  --color-page-brand: rgba(33, 186, 181, 0.14);
  --color-page-vip: rgba(255, 207, 149, 0.14);

  --color-surf-lowest: #1d1f29;
  --color-surf-low: #2a2c39;
  --color-surf-high: rgba(255, 255, 255, 0.04);
  --color-surf-highest: rgba(255, 255, 255, 0.08);
  --color-surf-hint: rgba(255, 255, 255, 0.85);
  --color-surf-transparent: rgba(20, 22, 30, 0.6);

  /* Stroke */
  --color-stroke-neutral-light: rgba(255, 255, 255, 0.12);
  --color-stroke-neutral-bold: rgba(255, 255, 255, 0.06);

  /* CTA · 二级按钮在深色下需要上调亮度 */
  --color-cta-secondary: rgba(255, 255, 255, 0.06);
  --color-cta-secondary-active: rgba(33, 186, 181, 0.18);
  --color-cta-tertiary: #2a2c39;

  /* Text */
  --color-text-title: rgba(255, 255, 255, 0.95);
  --color-text-primary: rgba(255, 255, 255, 0.9);
  --color-text-secondary: rgba(255, 255, 255, 0.65);
  --color-text-tertiary: rgba(255, 255, 255, 0.45);
  --color-text-minimum: rgba(255, 255, 255, 0.3);
  --color-text-inverse-cta: #fff;
  --color-text-inverse-title: rgba(0, 23, 29, 0.9);
  --color-text-inverse-primary: rgba(0, 23, 29, 0.9);
  --color-text-inverse-secondary: rgba(0, 23, 29, 0.7);

  /* 状态容器在深色下需要降透明度 */
  --color-success-container: rgba(33, 186, 181, 0.18);
  --color-error-container: rgba(255, 115, 115, 0.18);
  --color-tips-container: rgba(255, 139, 68, 0.14);
  --color-selected-container: rgba(255, 198, 82, 0.14);
  --color-vip-container: rgba(255, 207, 149, 0.14);
  --color-overlay: #2a2c39;

  /* 阴影：深色下基本无效，重置为更深 */
  --shadow-xs: 0 1px 0 0 rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--color-page-primary);
  color: var(--color-text-title);
  font-size: 14px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

button { font-family: inherit; cursor: pointer; border: none; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ==========================================================================
   Stage（展示用）+ Phone frame
   ========================================================================== */

.stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(circle at 30% 20%, #eef0f7 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, #e4e8f1 0%, transparent 60%),
    #e8eaf1;
}

.phone {
  width: 390px;
  height: 844px;
  background: var(--color-page-primary);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 30px 70px -10px rgba(0, 0, 0, 0.15),
    0 10px 30px -5px rgba(0, 0, 0, 0.08),
    0 0 0 8px #d4d7dd,
    0 0 0 9px #bfc3cc;
}
.phone::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 34px;
  background: #1a1a1c;
  border-radius: 20px;
  z-index: 10;
}

.status-bar {
  height: 54px;
  padding: 22px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-title);
}

.nav {
  height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav .title {
  font-family: var(--font-bold);
  font-size: 16px;
  color: var(--color-text-title);
  letter-spacing: -0.01em;
}

.scroll {
  height: calc(100% - 54px - 44px);
  overflow-y: auto;
  padding: 4px 16px 24px;
  scrollbar-width: none;
  background: var(--color-page-primary);
}
.scroll::-webkit-scrollbar { display: none; }

/* ==========================================================================
   基础组件
   ========================================================================== */

/* --- Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-bold);
  font-size: 15px;
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
  user-select: none;
}
.btn-primary {
  background: var(--color-cta-primary);
  color: var(--color-text-inverse-cta);
}
.btn-primary:hover, .btn-primary:active {
  background: var(--color-cta-primary-hover);
}
.btn-secondary {
  background: var(--color-cta-secondary);
  color: var(--color-text-title);
}
.btn-secondary:hover {
  background: var(--color-cta-secondary-active);
}
.btn-outline {
  background: var(--color-page-primary);
  border: 1px solid var(--color-stroke-neutral-light);
  color: var(--color-text-title);
}
.btn-outline:hover { background: var(--color-surf-high); }
.btn-ghost { background: transparent; color: var(--color-text-title); }
.btn-ghost:hover { background: var(--color-cta-secondary); }
.btn-lg { height: 48px; font-size: 16px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-icon { width: 36px; padding: 0; }
.btn-block { width: 100%; }

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-bold);
}
.badge-brand {
  background: var(--color-success-container);
  color: var(--color-text-brand);
}
.badge-error {
  background: var(--color-error-container);
  color: var(--color-error);
}
.badge-tips {
  background: var(--color-tips-container);
  color: var(--color-tips);
}
.badge-selected {
  background: var(--color-selected-container);
  color: var(--color-text-tips);
}
.badge-plate {
  background: var(--color-plate-math-soft);
  color: var(--color-plate-math);
}
.badge-new {
  background: var(--color-notification);
  color: #fff;
  font-size: 9px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
}

/* --- Card --- */
.card {
  background: var(--color-surf-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* --- Separator --- */
.separator {
  height: 1px;
  background: var(--color-stroke-neutral-light);
}

/* --- Icon stroke default --- */
.icon {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Muted / subtle text utility --- */
.muted { color: var(--color-text-secondary); }
.tertiary { color: var(--color-text-tertiary); }
.num { font-family: var(--font-num); letter-spacing: -0.01em; }
.bold { font-family: var(--font-bold); font-weight: 600; }
.heavy { font-family: var(--font-heavy); font-weight: 700; }

/* ==========================================================================
   Info Popover：点 ⓘ 图标展开规则提示
   用法：<span class="info-tip" tabindex="0">
           <span class="info-ico">ⓘ</span>
           <span class="info-pop">...规则内容...</span>
         </span>
   注：根类已从 .info 改为 .info-tip，避免与 book-card / file-card 等容器
       中作为子块名的 .info 类冲突
   ========================================================================== */

.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  vertical-align: middle;
}
.info-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-family: var(--font-num);
  font-weight: 700;
  color: inherit;                 /* 背景用父色 */
  opacity: 0.85;
  transition: opacity .15s ease, transform .15s ease;
  margin-left: 5px;
  position: relative;
}
.info-ico::after {
  content: 'i';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;                    /* 字符用白色反白 */
  font-family: "Times New Roman", var(--font-num), serif;
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}
.info-ico { font-size: 0; }      /* 隐藏原始的 'i' 文本占位 */
.info-tip:hover .info-ico,
.info-tip:focus .info-ico,
.info-tip.show .info-ico {
  opacity: 1;
  transform: scale(1.05);
}

.info-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-width: 260px;
  padding: 10px 12px;
  background: #1f2937;
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.6;
  font-weight: 400;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 100;
  white-space: normal;
  text-align: left;
}
.info-pop::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 12px;
  width: 10px; height: 10px;
  background: #1f2937;
  transform: rotate(45deg);
  border-radius: 1px;
}
.info-tip:hover .info-pop,
.info-tip:focus .info-pop,
.info-tip.show .info-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.info-pop b {
  display: block;
  color: #fff;
  font-family: var(--font-bold);
  margin-bottom: 4px;
  font-size: 12px;
}
.info-pop .row {
  display: flex;
  gap: 6px;
  padding: 1px 0;
  color: rgba(255,255,255,0.85);
}
.info-pop .row::before {
  content: '·';
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}
.info-pop .row b.n {
  display: inline;
  color: #ffe68a;
  font-family: var(--font-num);
  font-weight: 600;
  margin: 0;
}
.info-pop .pop-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 10px -2px;
}
.info-pop b.pop-sub {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-bold);
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 11px;
}

/* ==========================================================================
   通用组件（draft04 起）
   组件化原则：内容（文本/数据）/ 样式（class）/ 功能（DOM 结构）三层分开
   微调时只需要改：
   - 文案 → HTML 文本节点
   - 视觉细节 → 这里的 class 或在页面 <style> 内 override
   - 排版结构 → 页面 HTML
   ========================================================================== */

/* --- Page 容器：scroll 区底色 --- */
.scroll.bg-page-primary { background: var(--color-page-primary); }
.scroll.bg-page-secondary { background: var(--color-page-secondary); }

/* --- Section · 通用卡片块 --- */
.section {
  background: var(--color-surf-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  overflow: hidden;
}
.section.bordered {
  box-shadow: none;
  border: 1px solid var(--color-stroke-neutral-bold);
}
.section-pad { padding: 14px; }
.section-pad-lg { padding: 18px 20px; }

/* --- Page Hero · 通用结果/欢迎页头 --- */
.page-hero {
  padding: 36px 0 22px;
  text-align: center;
}
.page-hero .ico-wrap {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.page-hero .ico-wrap.is-error { background: var(--color-error-container); color: var(--color-error); }
.page-hero .ico-wrap.is-success { background: var(--color-success-container); color: var(--color-cta-primary); }
.page-hero .ico-wrap.is-tips { background: var(--color-tips-container); color: var(--color-tips); }
.page-hero .ico-wrap svg {
  width: 26px; height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-hero .h {
  font-family: var(--font-heavy);
  font-size: 19px;
  color: var(--color-text-title);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.page-hero .desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  padding: 0 24px;
}

/* --- File card · 通用文件展示卡 --- */
.file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--color-surf-lowest);
  border: 1px solid var(--color-stroke-neutral-bold);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.file-card .ico {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-surf-high);
  color: var(--color-text-secondary);
}
.file-card .ico.is-error { background: var(--color-error-container); color: var(--color-error); }
.file-card .ico.is-success { background: var(--color-success-container); color: var(--color-cta-primary); }
.file-card .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.file-card .info { flex: 1; min-width: 0; }
.file-card .name {
  font-family: var(--font-bold);
  font-size: 14px;
  color: var(--color-text-title);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-card .meta { font-size: 12px; color: var(--color-text-secondary); }

/* --- Reason line · 失败原因独立行 --- */
.reason-line {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--color-error-container);
  border: 1px solid rgba(255, 115, 115, 0.25);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-error);
  line-height: 1.6;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.reason-line.is-tips {
  background: var(--color-tips-container);
  border-color: rgba(255,123,43,0.25);
  color: #7a5a1f;
}
.reason-line svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Causes list · 可能的原因列表 --- */
.causes {
  margin-bottom: 22px;
  padding: 14px 16px;
  background: var(--color-surf-lowest);
  border: 1px solid var(--color-stroke-neutral-bold);
  border-radius: var(--radius-md);
}
.causes .hd {
  font-family: var(--font-bold);
  font-size: 13px;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.causes ul { font-size: 13px; }
.causes li {
  padding: 4px 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.causes li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  margin-top: 9px;
  flex-shrink: 0;
}

/* --- Action group · 按钮纵向组 --- */
.actions { display: flex; flex-direction: column; gap: 10px; }
.actions-h { display: flex; gap: 10px; }
.actions-h .btn { flex: 1; }
.footer-link {
  text-align: center;
  font-size: 13px;
  padding: 14px;
  color: var(--color-text-tertiary);
}
.footer-link a { color: var(--color-text-brand); font-family: var(--font-bold); }

/* --- Book card · 教辅卡片（封面+书名+状态） --- */
.book-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.book-cover {
  width: 56px; height: 72px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-bold);
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  text-align: center;
  padding: 4px;
}
.book-cover.cv-ugc { background: var(--color-plate-ugc); }
.book-cover.cv-math { background: var(--color-plate-math); }
.book-cover.cv-660 { background: linear-gradient(160deg, #4caf85, #2d8c66); }
.book-cover.cv-1800 { background: linear-gradient(160deg, #d97a4f, #b85a30); }
.book-cover.cv-bj { background: linear-gradient(160deg, #6b8af0, #4a6fd1); }
.book-cover.cv-zy { background: linear-gradient(160deg, #c95cad, #9c3e87); }
.book-cover.cv-ph { background: linear-gradient(160deg, #5fa3d9, #3e7fb5); }
.book-card .info { flex: 1; min-width: 0; }
.book-card .b-name {
  font-family: var(--font-bold);
  font-size: 15px;
  color: var(--color-text-title);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.book-card .b-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.book-card .b-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--color-text-tertiary);
}
.book-card .arrow {
  width: 18px; height: 18px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* --- List item · 通用列表项（章节、错题等） --- */
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-stroke-neutral-bold);
  background: var(--color-surf-lowest);
}
.list-row:last-child { border-bottom: none; }
.list-row .body { flex: 1; min-width: 0; }
.list-row .name {
  font-family: var(--font-bold);
  font-size: 15px;
  color: var(--color-text-title);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.list-row .meta {
  font-size: 11.5px;
  color: var(--color-text-secondary);
}
.list-row .meta .num {
  font-family: var(--font-num);
  color: var(--color-text-primary);
  font-weight: 600;
}

/* --- Progress mini bar --- */
.progress-mini {
  height: 3px;
  width: 80px;
  background: var(--color-surf-highest);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.progress-mini .fill {
  height: 100%;
  background: var(--color-cta-primary);
  border-radius: 2px;
}

/* --- Toast banner · 顶部提示条 --- */
.toast-banner {
  margin: 0 14px 12px;
  padding: 10px 12px;
  background: var(--color-tips-container);
  border: 1px solid rgba(255,123,43,0.2);
  border-radius: 8px;
  font-size: 12.5px;
  color: #7a5a1f;
  line-height: 1.55;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.toast-banner .ico {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,123,43,0.25);
  color: var(--color-tips);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
  font-family: var(--font-bold);
}
.toast-banner b {
  display: block;
  color: var(--color-text-title);
  margin-bottom: 1px;
  font-family: var(--font-bold);
}

/* --- Placeholder card · 占位卡（题/解析未通过等） --- */
.placeholder-card {
  padding: 36px 22px 28px;
  background: var(--color-surf-lowest);
  border: 1px dashed var(--color-stroke-neutral-light);
  border-radius: 14px;
  text-align: center;
  margin-bottom: 14px;
}
.placeholder-card .ico {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-tips-container);
  color: var(--color-tips);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.placeholder-card .ico svg {
  width: 24px; height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.placeholder-card .h {
  font-family: var(--font-heavy);
  font-size: 16px;
  color: var(--color-text-title);
  margin-bottom: 6px;
}
.placeholder-card .desc {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  padding: 0 4px;
}

/* --- Step list · 加工中节点列表 --- */
.steps-list { padding: 18px 20px; }
.steps-list .step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
}
.steps-list .step .dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-surf-highest);
  color: var(--color-text-tertiary);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.steps-list .step.done .dot {
  background: var(--color-cta-primary);
  color: #fff;
}
.steps-list .step.done .dot::before {
  content: '✓';
  font-size: 12px;
}
.steps-list .step.done .dot { font-size: 0; }
.steps-list .step.current .dot {
  background: #fff;
  border: 2px solid var(--color-cta-primary);
  color: var(--color-cta-primary);
  position: relative;
  font-size: 0;
}
.steps-list .step.current .dot::after {
  content: '';
  width: 8px; height: 8px;
  background: var(--color-cta-primary);
  border-radius: 50%;
  animation: step-pulse 1.4s ease-in-out infinite;
}
@keyframes step-pulse {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
.steps-list .step .lab { flex: 1; color: var(--color-text-primary); }
.steps-list .step.done .lab { font-family: var(--font-bold); }
.steps-list .step.pending .lab { color: var(--color-text-tertiary); }
.steps-list .step.current .lab { font-family: var(--font-bold); color: var(--color-cta-primary); }

/* --- Bottom sheet · 底部弹层（题目导航等） --- */
.bottom-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--color-page-primary);
  border-radius: 18px 18px 0 0;
  padding: 14px 0 18px;
  z-index: 10;
  max-height: 78%;
  overflow-y: auto;
  scrollbar-width: none;
  box-shadow: 0 -8px 24px rgba(0, 23, 29, 0.08);
}
.bottom-sheet::-webkit-scrollbar { display: none; }
.bottom-sheet .grip {
  width: 36px; height: 4px;
  background: var(--color-stroke-neutral-light);
  border-radius: 2px;
  margin: 0 auto 14px;
}
.sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 30, 0.45);
  z-index: 5;
}

/* --- Math formula 通用样式（题干、解析里的公式） --- */
.formula {
  font-family: 'Cambria Math', 'Latin Modern Math', 'Times New Roman', serif;
  font-size: 17px;
  color: var(--color-text-title);
}
.formula em { font-style: italic; }
.formula sub { font-size: 12px; vertical-align: sub; }
.formula sup { font-size: 12px; vertical-align: super; }

/* ==========================================================================
   申诉按钮 · 统一三态（appeal-btn-uni）
   用在：04 章节标题 / 06 题卡 / 12 题目占位 / 13 解析占位
   ----------------------------------------------------------------------------
   <span class="appeal-btn-uni is-pending">申诉</span>
   <span class="appeal-btn-uni is-processing">申诉处理中</span>
   <span class="appeal-btn-uni is-rejected">申诉不通过</span>

   .size-sm  内联小尺寸（章节列表、题卡右侧）
   .size-md  占位卡内中等尺寸（12 / 13 中央卡）
   ========================================================================== */
.appeal-btn-uni {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-bold);
  border-radius: var(--radius-pill);
  transition: opacity .15s, background-color .15s, color .15s, border-color .15s;
  user-select: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}
.appeal-btn-uni svg {
  width: 12px; height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}
/* sizes */
.appeal-btn-uni.size-sm { height: 26px; padding: 0 10px; font-size: 12px; }
.appeal-btn-uni.size-md { height: 34px; padding: 0 16px; font-size: 13px; }
.appeal-btn-uni.size-sm svg { width: 11px; height: 11px; }
.appeal-btn-uni.size-md svg { width: 13px; height: 13px; }

/* 状态 A · 未申诉（红色描边主按钮，醒目可点） */
.appeal-btn-uni.is-pending {
  color: var(--color-error);
  background: var(--color-error-container);
  border-color: rgba(255, 115, 115, 0.35);
}
.appeal-btn-uni.is-pending:hover,
.appeal-btn-uni.is-pending:active {
  background: rgba(255, 115, 115, 0.18);
}

/* 状态 B · 申诉处理中（灰色，不可点） */
.appeal-btn-uni.is-processing {
  color: var(--color-text-tertiary);
  background: var(--color-surf-high);
  border-color: var(--color-stroke-neutral-bold);
  cursor: not-allowed;
}

/* 状态 C-2 · 申诉不通过（灰色 + 划线感，不可点） */
.appeal-btn-uni.is-rejected {
  color: var(--color-text-tertiary);
  background: var(--color-surf-high);
  border-color: var(--color-stroke-neutral-bold);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--color-text-minimum);
}

/* 「申诉时长 24h」hint，附在按钮下方 */
.appeal-hint {
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-family: var(--font-sans);
  margin-top: 6px;
  text-align: center;
  line-height: 1.5;
}

/* --- 「仅你可见」标签 --- */
.tag-private {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-plate-math-soft);
  color: var(--color-plate-math);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-family: var(--font-bold);
}