/* =========================================================
   小艺考 AI 评测 · 清新高端主题
   调色：米白宣纸底 + 青瓷玉色（jade）+ 香槟金（champagne）
   ========================================================= */

:root {
  --paper: #f5f2ea;            /* 宣纸底 */
  --paper-soft: #faf7f0;
  --surface: #ffffff;
  --surface-2: #fbfaf5;

  --ink-900: #1c2028;
  --ink-700: #2f3542;
  --ink-500: #5a6170;
  --ink-400: #8a8f9a;
  --ink-300: #aab0bb;

  --line: rgba(28, 32, 44, 0.08);
  --line-strong: rgba(28, 32, 44, 0.14);

  --jade-900: #1f4a3e;
  --jade-700: #2f6e5e;         /* primary 主色 */
  --jade-500: #4f8c7f;
  --jade-300: #8fb8ac;
  --jade-50:  #eaf2ee;
  --jade-rgb: 47, 110, 94;     /* 供 rgba() 统一使用，按模式切换 */
  --paper-tint: var(--paper);  /* 页面底色（按模式切换） */

  --gold-700: #a57a3c;         /* 深香槟金 */
  --gold-500: #c9a560;         /* 香槟金 */
  --gold-300: #e4cb8c;
  --gold-50:  #f7efdc;

  --terracotta: #b16a55;       /* 提示 / 警示 */
  --terracotta-soft: rgba(177, 106, 85, 0.08);

  --sage: #6a9a83;             /* 通过绿 */
  --sage-soft: rgba(106, 154, 131, 0.1);

  --shadow-soft: 0 1px 2px rgba(28, 32, 44, 0.04), 0 8px 24px -12px rgba(28, 32, 44, 0.1);
  --shadow-lift: 0 1px 2px rgba(28, 32, 44, 0.05), 0 24px 60px -28px rgba(var(--jade-rgb), 0.28);

  /* Loading 骨骼/关节配色（按模式切换） */
  --skel-bone: var(--jade-700);
  --skel-joint-primary: var(--gold-700);
  --skel-joint-secondary: var(--gold-500);
  --skel-joint-glow-rgb: 201, 165, 96;
  --skel-accent-rgb: 201, 165, 96;          /* 进度条 / 扫描线右段暖色 */
}

/* ========== Base ========== */
html, body {
  background-color: var(--paper-tint);
  color: var(--ink-900);
  font-feature-settings: 'palt';
  transition: background-color 0.35s ease;
}

/* 文字细节 */
::selection { background: rgba(201, 165, 96, 0.25); color: var(--ink-900); }

/* ========== Ambient background ========== */
.grid-overlay {
  background-image:
    linear-gradient(to right, rgba(28, 32, 44, 0.6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 32, 44, 0.6) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 25%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 25%, black 0%, transparent 70%);
}

/* Page transitions */
.page {
  animation: fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========== Top nav ========== */
.app-header {
  background: rgba(245, 242, 234, 0.75);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
}

.brand-mark {
  background: linear-gradient(135deg, var(--jade-700), var(--gold-500));
  box-shadow: 0 10px 28px -14px rgba(var(--jade-rgb), 0.55);
}

/* Mode toggle */
.mode-switch {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.mode-btn {
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1;
}
.mode-btn .mode-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: rgba(28, 32, 44, 0.22);
}
/* 两档按钮都用「当前模式的 jade-*」做选中态，所以切到院校版时
   这个按钮自动变成深海蓝；切回考生版自动回到青瓷玉色。 */
.mode-btn[aria-pressed='true'] {
  background: linear-gradient(135deg, var(--jade-700), var(--jade-500));
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(var(--jade-rgb), 0.55);
}
.mode-btn[aria-pressed='true'] .mode-dot { background: #ffffff; }

/* 分析进行时锁定模式切换：避免半路换主题导致状态不一致 */
body.is-loading .mode-switch {
  opacity: 0.5;
  pointer-events: none;
  filter: saturate(0.85);
}

/* Hero 模式提示卡（主页） */
.mode-hero-card {
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-soft);
}
.mode-hero-card .mhc-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.mode-hero-card .mhc-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.mode-hero-card .mhc-tag.c {
  color: var(--jade-700);
  border: 1px solid rgba(var(--jade-rgb), 0.35);
  background: rgba(var(--jade-rgb), 0.08);
}
.mode-hero-card .mhc-tag.b {
  color: var(--gold-700);
  border: 1px solid rgba(165, 122, 60, 0.4);
  background: rgba(201, 165, 96, 0.12);
}
.mode-hero-card .mhc-sep {
  width: 1px; height: 12px; background: var(--line-strong);
}
.mode-hero-card .mhc-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink-900);
}
.mode-hero-card .mhc-desc {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ink-500);
}
.mode-hero-card .mhc-desc p + p {
  margin-top: 0.4rem;
}

/* 院校版：隐藏第二、三层 */
body.mode-institution .student-only {
  display: none !important;
}

/* =========================================================
   模式主题切换
   - 考生版（student）        : jade-green（默认值即为考生版主色）
   - 院校版（institution）    : navy / ink-blue —— 彻底切换主色板
     做法：重定义 --jade-* 系列变量 & --jade-rgb & 底色 tint
     一次性让所有原先用 jade 的位置同步换成深海蓝
   ========================================================= */

body.mode-student {
  /* 考生版带一丝暖米白，让两档在白底下也能区分 */
  --paper-tint: #f5f2ea;
}

body.mode-institution {
  /* 深海墨蓝调色盘 */
  --jade-900: #0f2744;
  --jade-700: #1f3f68;   /* 主色 —— 深海蓝 */
  --jade-500: #4a6d99;
  --jade-300: #8da9ca;
  --jade-50:  #e7eef6;
  --jade-rgb: 31, 63, 104;

  /* 页面底色换成冷调灰白，整体秒变"院校后台" */
  --paper-tint: #eef2f6;
  --paper-soft: #f3f6fa;
  --surface: #ffffff;
  --surface-2: #f7f9fc;

  /* 院校版的高亮"金色"保留，但柔化，让蓝色做主角 */
  --gold-50:  #f7efdc;

  /* 加载页骨骼/关节也整体换冷调，与考生版形成对照 */
  --skel-bone: var(--jade-700);
  --skel-joint-primary: var(--jade-700);
  --skel-joint-secondary: var(--jade-500);
  --skel-joint-glow-rgb: var(--jade-rgb);
  --skel-accent-rgb: var(--jade-rgb);

  /* 院校版的「已完成」勾选也换冷蓝，避免和「进行中」蓝出现绿色断层 */
  --check-done-rgb: var(--jade-rgb);
  --check-done-color: var(--jade-700);
}

/* 顶部玻璃态 header 在院校版也跟着换冷调 */
body.mode-institution .app-header {
  background: rgba(238, 242, 246, 0.8);
}

/* 院校版 hero chip / 模式卡 / stat-tile 强调数字也跟随主色 */
body.mode-institution .hero-chip {
  border-color: rgba(var(--jade-rgb), 0.35);
  background: rgba(var(--jade-rgb), 0.08);
  color: var(--jade-700);
}
body.mode-institution .hero-chip .dot { background: var(--jade-700); }
body.mode-institution .stat-tile .sv.jade { color: var(--jade-700); }
body.mode-institution .stat-tile .sv.gold { color: var(--jade-700); }

/* 院校版 hero 渐变标题：jade → 深蓝过渡，更冷更"公"的观感 */
body.mode-institution .hero-gradient-text {
  background: linear-gradient(120deg, var(--jade-900) 0%, var(--jade-700) 55%, var(--jade-500) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 院校版 hero 模式卡背景换冷色 */
body.mode-institution .mode-hero-card {
  background: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%);
  border-color: rgba(var(--jade-rgb), 0.22);
}

/* 院校版 mode-tag.c（"院校视角"徽章）描边也走主色 */
body.mode-institution .mode-tag.c,
body.mode-institution .mhc-tag.c {
  color: var(--jade-700);
  border-color: rgba(var(--jade-rgb), 0.35);
  background: rgba(var(--jade-rgb), 0.08);
}

/* 考生版时顶部切换按钮的未选中态显示一抹 jade 暗示 */
body.mode-student .mode-btn[data-mode='student'] .mode-dot { background: var(--jade-700); }
body.mode-institution .mode-btn[data-mode='institution'] .mode-dot { background: var(--jade-700); }

/* ========== Hero (upload page) ========== */
.hero-chip {
  border: 1px solid rgba(165, 122, 60, 0.28);
  background: rgba(201, 165, 96, 0.1);
  color: var(--gold-700);
}
.hero-chip .dot { background: var(--gold-500); }

.hero-gradient-text {
  background: linear-gradient(120deg, var(--jade-700) 0%, var(--gold-500) 60%, var(--terracotta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-tile {
  border-radius: 0.9rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.stat-tile:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.stat-tile .sv {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.stat-tile .sv.jade { color: var(--jade-700); }
.stat-tile .sv.gold { color: var(--gold-700); }
.stat-tile .sv.ink  { color: var(--ink-900); }
.stat-tile .sl { font-size: 0.72rem; color: var(--ink-500); margin-top: 0.15rem; letter-spacing: 0.02em; }

/* ========== Upload card ========== */
.upload-card {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%);
  box-shadow: var(--shadow-lift);
  padding: 2rem;
}
.upload-card::before {
  /* 细线装饰 —— 营造「印章卡片」感 */
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: calc(1.25rem - 6px);
  border: 1px solid rgba(201, 165, 96, 0.18);
  pointer-events: none;
}

#drop-zone {
  border: 1.5px dashed rgba(var(--jade-rgb), 0.3);
  background: rgba(var(--jade-rgb), 0.02);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
#drop-zone:hover,
#drop-zone.dragover {
  border-color: rgba(var(--jade-rgb), 0.55);
  background-color: rgba(var(--jade-rgb), 0.05);
}

.upload-icon-wrap {
  background: linear-gradient(135deg, rgba(var(--jade-rgb), 0.12), rgba(201, 165, 96, 0.15));
  border: 1px solid rgba(28, 32, 44, 0.06);
}
/* 上传图标：跟随主色（考生版青瓷绿 / 院校版深海蓝），别用 Tailwind 写死 */
.upload-icon { color: var(--jade-700); }

/* Ambient 背景柔光团 + 加载页脉冲点也走 CSS 变量，自动随模式切换 */
.ambient-blob { background-color: rgba(var(--jade-rgb), 0.22); }
.loading-tag-dot { background-color: var(--jade-700); }

.form-input, .form-select {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  color: var(--ink-900);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus, .form-select:focus {
  border-color: var(--jade-700);
  box-shadow: 0 0 0 3px rgba(var(--jade-rgb), 0.12);
}
.form-label { font-size: 0.72rem; font-weight: 500; color: var(--ink-500); }

/* ========== Buttons ========== */
.primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 0.75rem;
  padding: 0.65rem 1.15rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, var(--jade-700), var(--jade-500));
  box-shadow: 0 10px 28px -14px rgba(var(--jade-rgb), 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.primary-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -16px rgba(var(--jade-rgb), 0.6);
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 0.75rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-700);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ghost-btn:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
}

.cta-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 0.85rem;
  padding: 0.85rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, var(--jade-700) 0%, var(--jade-500) 45%, var(--gold-500) 115%);
  box-shadow: 0 16px 36px -16px rgba(var(--jade-rgb), 0.6);
  transition: filter 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.cta-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.cta-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

/* ========== Module cards (upload page 底部 3 卡) ========== */
.module-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.35rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.module-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 10px 32px -18px rgba(28, 32, 44, 0.2);
}
.module-card .m-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-900);
}
.module-card .m-desc {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--ink-500);
}
.module-icon {
  display: inline-flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--line);
}
.module-icon.jade   { background: linear-gradient(145deg, rgba(var(--jade-rgb), 0.18), rgba(var(--jade-rgb), 0.02)); color: var(--jade-700); }
.module-icon.gold   { background: linear-gradient(145deg, rgba(201, 165, 96, 0.22), rgba(201, 165, 96, 0.02)); color: var(--gold-700); }
.module-icon.terra  { background: linear-gradient(145deg, rgba(177, 106, 85, 0.2), rgba(177, 106, 85, 0.02)); color: var(--terracotta); }

/* ========== Loading skeleton ========== */
.loading-shell {
  border-radius: 1.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
#skeleton-stage {
  position: relative;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--jade-rgb), 0.08), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, var(--paper-tint) 100%);
  border: 1px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
}

/* ----- Live preview (后端写出的 live_preview.jpg) ----- */
/* 默认隐藏；前端首次成功加载后通过 .has-preview 把它淡入、把 SVG 舞者淡出 */
#skeleton-stage .live-preview {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
  border-radius: 0.65rem;
  background: #0c0d11;          /* 还没有图时仍保持暗底，过渡更柔和 */
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  z-index: 1;
  display: none;                 /* 没收到 progress 之前不参与布局 */
}
#skeleton-stage.has-preview .live-preview {
  display: block;
  opacity: 1;
  transform: scale(1);
}
/* SVG 舞者：作为占位骨架，预览图就位后淡出 */
#skeleton-stage .dancer-svg {
  transition: opacity 0.6s ease;
}
#skeleton-stage.has-preview .dancer-svg {
  opacity: 0;
}
/* 预览生效时也把扫描线压暗，避免和真实姿态视频抢视觉重心 */
#skeleton-stage.has-preview .scan-line { opacity: 0.35; }

/* ----- Dancer figure (arabesque) ----- */
.dancer-figure {
  /* 整体细微呼吸 / 飘动 */
  transform-origin: 200px 250px;
  transform-box: view-box;
  animation: dancer-float 5.6s ease-in-out infinite;
}
@keyframes dancer-float {
  0%, 100% { transform: translateY(0)    rotate(-1.4deg); }
  50%      { transform: translateY(-8px) rotate(0.8deg); }
}

.dancer-figure .joint {
  animation: joint-pulse 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.dancer-figure .joint-primary   { fill: var(--skel-joint-primary); }
.dancer-figure .joint-secondary { fill: var(--skel-joint-secondary); }
.dancer-figure .joint-head {
  fill: none;
  stroke: var(--skel-joint-secondary);
}
.dancer-figure .joint:nth-of-type(odd) { animation-delay: -0.6s; }
.dancer-figure .joint:nth-of-type(3n)  { animation-delay: -1.3s; }
@keyframes joint-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(0.85);
    filter: drop-shadow(0 0 3px rgba(var(--skel-joint-glow-rgb), 0.2));
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
    filter: drop-shadow(0 0 10px rgba(var(--skel-joint-glow-rgb), 0.8));
  }
}

.dancer-figure .bone {
  stroke: var(--skel-bone);
  stroke-width: 3;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  opacity: 0.85;
  animation: bone-draw 6s ease-in-out infinite;
}
.dancer-figure .bone-spine     { stroke-width: 3.4; animation-delay: -0.0s; }
.dancer-figure .bone-shoulders { stroke-width: 2.4; animation-delay: -0.6s; opacity: 0.75; }
.dancer-figure .bone-arm       { stroke-width: 2.6; animation-delay: -1.2s; opacity: 0.9;  }
.dancer-figure .bone-arm + .bone-arm { animation-delay: -2.0s; }
.dancer-figure .bone-hip       { stroke-width: 2.2; animation-delay: -2.6s; opacity: 0.7;  }
.dancer-figure .bone-leg       { stroke-width: 3.4; animation-delay: -3.2s; }
.dancer-figure .bone-leg + .bone-leg { animation-delay: -3.8s; }
@keyframes bone-draw {
  0%   { stroke-dashoffset: 360; opacity: 0.25; }
  40%  { stroke-dashoffset: 0;   opacity: 0.95; }
  70%  { opacity: 0.95; }
  100% { stroke-dashoffset: -360; opacity: 0.25; }
}

/* 飘动绶带：艺术装饰，慢速漂移 */
.dancer-figure .dancer-ribbon {
  fill: none;
  stroke: var(--skel-joint-secondary);
  stroke-width: 1.4;
  opacity: 0.55;
  stroke-dasharray: 4 7;
  animation: ribbon-drift 7.5s linear infinite;
}
@keyframes ribbon-drift {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -110; }
}

.scan-line {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.scan-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--jade-rgb), 0.45) 30%,
    rgba(var(--skel-accent-rgb), 0.85) 50%,
    rgba(var(--jade-rgb), 0.45) 70%,
    transparent 100%
  );
  box-shadow: 0 0 14px rgba(var(--skel-accent-rgb), 0.4);
  animation: scan 3.2s ease-in-out infinite;
}
@keyframes scan {
  0%, 100% { top: 8%;  opacity: 0.9; }
  50%      { top: 92%; opacity: 0.65; }
}

/* Loading 状态文案标识 */
.loading-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--jade-700);
  border: 1px solid rgba(var(--jade-rgb), 0.28);
  background: rgba(var(--jade-rgb), 0.08);
}

/* Progress bar */
.progress-track {
  height: 6px;
  border-radius: 9999px;
  background: rgba(28, 32, 44, 0.06);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--jade-700), var(--jade-500), rgb(var(--skel-accent-rgb)));
  /* 宽度由 JS 用 RAF 缓动到目标，不用 CSS transition；
     否则两条动画曲线会打架，进度突然增大时反而像「闪过去」。 */
  will-change: width;
}

/* Checklist */
.check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.95rem;
  border-radius: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: all 0.4s ease;
  color: var(--ink-500);
}
.check-item.active {
  background: rgba(var(--jade-rgb), 0.06);
  border-color: rgba(var(--jade-rgb), 0.35);
  color: var(--ink-900);
}
.check-item.done {
  background: rgba(var(--check-done-rgb, 106, 154, 131), 0.08);
  border-color: rgba(var(--check-done-rgb, 106, 154, 131), 0.35);
  color: var(--ink-700);
}
.check-dot {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 1.3rem;
  width: 1.3rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  background: rgba(28, 32, 44, 0.04);
  border: 1px solid var(--line);
  color: var(--ink-500);
}
.check-item.active .check-dot {
  background: rgba(var(--jade-rgb), 0.15);
  border-color: rgba(var(--jade-rgb), 0.5);
  color: var(--jade-700);
}
.check-item.done .check-dot {
  background: rgba(var(--check-done-rgb, 106, 154, 131), 0.18);
  border-color: rgba(var(--check-done-rgb, 106, 154, 131), 0.5);
  color: var(--check-done-color, var(--sage));
}

/* ========== Report ========== */
.report-layer {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 768px) {
  .report-layer { padding: 2.25rem; }
}
.report-layer-header {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}
.layer-index {
  flex-shrink: 0;
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(var(--jade-rgb), 0.14), rgba(201, 165, 96, 0.18));
  border: 1px solid var(--line);
  font-family: 'Noto Serif SC', serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--jade-700);
}
.report-tag {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--ink-400);
}
.report-title { color: var(--ink-900); }
.report-sub   { color: var(--ink-500); }

/* Mode tag (top of report) */
.mode-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
}
.mode-tag.c {
  color: var(--jade-700);
  border: 1px solid rgba(var(--jade-rgb), 0.3);
  background: rgba(var(--jade-rgb), 0.06);
}
.mode-tag.b {
  color: var(--gold-700);
  border: 1px solid rgba(165, 122, 60, 0.35);
  background: rgba(201, 165, 96, 0.1);
}

/* Metric card (通用) */
.metric-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1rem 1.15rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.metric-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

/* Pass banner variants */
.banner-pass {
  background: linear-gradient(90deg, rgba(106, 154, 131, 0.14), rgba(106, 154, 131, 0.02));
  border-color: rgba(106, 154, 131, 0.4) !important;
}
.banner-fail {
  background: linear-gradient(90deg, rgba(177, 106, 85, 0.14), rgba(177, 106, 85, 0.02));
  border-color: rgba(177, 106, 85, 0.38) !important;
}
.pass-title { color: var(--ink-900); }
.pass-sub   { color: var(--ink-500); }
.pass-score-label { color: var(--ink-400); }
.pass-score-val   { color: var(--ink-900); }

/* Dim breakdown */
.dim-item {
  border-radius: 0.9rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.9rem 1rem;
  transition: border-color 0.2s ease;
}
.dim-item:hover { border-color: var(--line-strong); }
.dim-item .dim-label {
  font-size: 0.7rem;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}
.dim-item .dim-value {
  margin-top: 0.3rem;
  font-family: 'Noto Serif SC', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink-900);
}
.dim-item .dim-bar {
  margin-top: 0.55rem;
  height: 3px;
  border-radius: 9999px;
  background: rgba(28, 32, 44, 0.06);
  overflow: hidden;
}
.dim-item .dim-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--jade-700), var(--gold-500));
}

/* Grade card */
.grade-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #faf7f0 100%);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}
.grade-letter {
  font-family: 'Noto Serif SC', serif;
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--jade-700);
  text-shadow: 0 6px 20px rgba(201, 165, 96, 0.25);
}
.grade-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-900);
}
.grade-desc { color: var(--ink-500); }
.grade-bullet {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 9999px;
  margin-right: 0.45rem;
  vertical-align: middle;
}
.grade-bullet.s { background: var(--gold-500); }
.grade-bullet.a { background: var(--jade-700); }
.grade-bullet.b { background: var(--jade-300); }
.grade-score-bar {
  height: 4px;
  border-radius: 9999px;
  background: rgba(28, 32, 44, 0.06);
  overflow: hidden;
}
.grade-score-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--jade-700), var(--gold-500));
}

/* Radar container */
.radar-card {
  border-radius: 1.25rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}
.radar-svg {
  display: block;
  margin: 0 auto;
  max-width: 22rem;
  overflow: visible;
  filter: drop-shadow(0 8px 20px rgba(var(--jade-rgb), 0.1));
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 500;
  border: 1px solid;
}
.chip-good { color: var(--sage);        border-color: rgba(106, 154, 131, 0.4); background: rgba(106, 154, 131, 0.08); }
.chip-mid  { color: var(--gold-700);    border-color: rgba(201, 165, 96, 0.4);  background: rgba(201, 165, 96, 0.1); }
.chip-bad  { color: var(--terracotta);  border-color: rgba(177, 106, 85, 0.4);  background: rgba(177, 106, 85, 0.08); }

/* ========== Layer 01 Section Headings ========== */
.section-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-left: 3px solid var(--jade-700);
  padding-left: 0.9rem;
}
.section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0 0.4rem;
  border-radius: 0.55rem;
  background: linear-gradient(135deg, rgba(var(--jade-rgb), 0.15), rgba(201, 165, 96, 0.22));
  border: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--jade-700);
  font-weight: 700;
}
.sub-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: 0.03em;
}
.sub-title-aux {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  margin-top: 0.2rem;
}

/* 比例审计 · 与软开度卡片同款，右侧展示数值 */
.flex-card .fc-value {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.flex-card .fc-value-unit {
  font-size: 0.78rem;
  color: var(--ink-500);
  font-weight: 500;
  margin-left: 0.15rem;
}

/* Metric mini */
.metric-mini {
  border-radius: 0.9rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.9rem 1.05rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.metric-mini:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.metric-mini .ml { font-size: 0.72rem; color: var(--ink-500); letter-spacing: 0.02em; }
.metric-mini .mv {
  margin-top: 0.35rem;
  font-family: 'Noto Serif SC', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.metric-mini .mu {
  margin-left: 0.2rem;
  font-size: 0.78rem;
  color: var(--ink-500);
  font-weight: 500;
}

/* Flex card (软开度) */
.flex-card {
  border-radius: 1.1rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.flex-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 8px 24px -16px rgba(28, 32, 44, 0.18);
}
.flex-card .fc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.flex-card .fc-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink-900);
}
.flex-card .fc-time {
  font-size: 0.72rem;
  color: var(--ink-400);
}
.flex-card .fc-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}
.flex-card .fc-metric { font-size: 0.88rem; }
.flex-card .fc-metric .lbl { color: var(--ink-500); margin-right: 0.4rem; }
.flex-card .fc-metric .val {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  color: var(--ink-900);
}
.flex-card .fc-note {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--ink-500);
  border-top: 1px dashed var(--line-strong);
  padding-top: 0.65rem;
}
.flex-card .fc-note::before {
  content: '专业注释：';
  color: var(--gold-700);
  font-weight: 600;
}

/* Jump block (动态动作) */
.jump-block {
  border-radius: 1.2rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-soft);
}
.jump-block .jb-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
}
.jump-block .jb-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-900);
}
.jump-block .jb-tag {
  display: inline-flex;
  padding: 0.12rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.66rem;
  background: rgba(var(--jade-rgb), 0.08);
  color: var(--jade-700);
  border: 1px solid rgba(var(--jade-rgb), 0.3);
  letter-spacing: 0.05em;
}
.jump-block .jb-section { margin-top: 1rem; }
.jump-block .jb-section-title {
  font-size: 0.78rem;
  color: var(--gold-700);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}
.jump-block .jb-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.jump-block .jb-cell {
  border-radius: 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 0.65rem 0.85rem;
}
.jump-block .jb-cell .l { font-size: 0.72rem; color: var(--ink-500); }
.jump-block .jb-cell .v {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.05rem;
  color: var(--ink-900);
  margin-top: 0.18rem;
  font-weight: 700;
}
.jump-block .jb-cell .v .u { font-size: 0.75rem; color: var(--ink-500); margin-left: 0.2rem; font-weight: 500; }
.jump-block .jb-record { margin-top: 0.55rem; }
.jump-block .jb-record > .l {
  font-size: 0.72rem;
  color: var(--ink-500);
  margin-bottom: 0.35rem;
}
.jump-block .jb-record .peaks-row { margin-top: 0; }
.jump-block .jb-record-empty {
  font-size: 0.85rem;
  color: var(--ink-500);
  padding: 0.1rem 0 0.15rem;
}
.jump-block .peaks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.jump-block .peak-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  background: rgba(201, 165, 96, 0.1);
  border: 1px solid rgba(201, 165, 96, 0.32);
  font-size: 0.75rem;
}
.jump-block .peak-chip .pc-i { color: var(--ink-500); }
.jump-block .peak-chip .pc-v { color: var(--gold-700); font-weight: 700; }
.jump-block .jb-note {
  margin-top: 0.65rem;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--ink-500);
}
.jump-block .jb-note::before {
  content: '专业注释：';
  color: var(--gold-700);
  font-weight: 600;
}

/* View toggle */
.view-switch {
  border: 1px solid var(--line);
  background: var(--surface);
}
.view-btn { color: var(--ink-500); }
.view-btn[aria-pressed='true'] {
  background: linear-gradient(135deg, var(--jade-700), var(--jade-500));
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(var(--jade-rgb), 0.5);
}

/* ========== Doc Template View ========== */
.doc-page {
  background: #fdfbf5;
  color: #1c1917;
  border-radius: 1.15rem;
  border: 1px solid rgba(201, 165, 96, 0.22);
  box-shadow: 0 30px 80px -40px rgba(28, 32, 44, 0.25);
  padding: 3.5rem 3.2rem;
  font-family: 'Noto Serif SC', serif;
  line-height: 1.8;
  position: relative;
}
.doc-page::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: calc(1.15rem - 10px);
  border: 1px solid rgba(201, 165, 96, 0.18);
  pointer-events: none;
}
@media (max-width: 640px) {
  .doc-page { padding: 1.8rem 1.5rem; }
}
.doc-body h2 {
  font-size: 1.18rem;
  font-weight: 800;
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
  color: #18181b;
  border-bottom: 1px solid #e7e2d3;
  padding-bottom: 0.4rem;
  letter-spacing: 0.03em;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 {
  font-size: 0.98rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  color: #292524;
}
.doc-body p, .doc-body li {
  font-size: 0.92rem;
  color: #292524;
}
.doc-body ul {
  list-style: none;
  padding-left: 1.1rem;
  margin: 0;
}
.doc-body li {
  padding: 0.18rem 0;
  display: flex;
  gap: 0.4rem;
}
.doc-body li::before {
  content: '·';
  color: #a57a3c;
  font-weight: 800;
}
.doc-body .doc-data {
  font-weight: 700;
  color: #a57a3c;                     /* 香槟金数据高亮 */
}
.doc-body .doc-action {
  font-weight: 700;
  color: #18181b;
}
.doc-body .doc-note {
  font-size: 0.85rem;
  color: #57534e;
  font-style: italic;
  margin-top: 0.25rem;
}
.doc-body .doc-note::before {
  content: '专业注释：';
  color: #a57a3c;
  font-style: normal;
  font-weight: 600;
}
.doc-body .doc-divider {
  height: 1px;
  background: #e7e2d3;
  margin: 1.4rem 0;
}

/* Print: Layer 1 走 doc 视图；Layer 2 / 3 在考生版时一并导出 */
@media print {
  body { background: #ffffff !important; }
  .app-header, footer, nav, .ghost-btn, .primary-btn, .cta-btn, #page-upload, #page-loading,
  #pass-banner, #report-source-row, .view-btn,
  .pointer-events-none.fixed { display: none !important; }
  #layer1-cards { display: none !important; }
  #layer1-doc { display: block !important; }
  .doc-page { box-shadow: none; border: none; padding: 0; }
  .doc-page::before { display: none; }
  .report-layer { background: transparent; border: none; padding: 0 0 1.5rem; box-shadow: none; page-break-inside: avoid; }
  body.mode-institution .student-only { display: none !important; }
}

/* ========== Layer 3 · AI 评估正文排版 ========== */
.prose-invert h4 {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-900);
  margin-top: 1.2rem;
  margin-bottom: 0.4rem;
  border-left: 2px solid var(--gold-500);
  padding-left: 0.6rem;
}
.prose-invert p { color: var(--ink-700); }
.prose-invert ul {
  list-style: disc;
  padding-left: 1.3rem;
  color: var(--ink-700);
}
.prose-invert li { margin-top: 0.3rem; }
.prose-invert strong {
  color: var(--jade-700);
  font-weight: 700;
}

/* Layer 3 标签徽饰 */
.llm-badge {
  background: linear-gradient(135deg, rgba(var(--jade-rgb), 0.15), rgba(201, 165, 96, 0.22));
  border: 1px solid var(--line);
  color: var(--gold-700);
}