/* ==========================================================================
   启动闪屏 + 门户补充样式
   ========================================================================== */

#app[data-page] { min-height: 100vh; }

.boot-splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background: var(--bg-app);
  z-index: 2000;
}
.boot-logo {
  /* 启动闪屏的品牌标识：服务端内联的矢量 LOGO，高度由这里的 CSS 决定
     （SVG 上的 width/height 属性优先级低于 CSS 规则）。 */
  display: flex; align-items: center; justify-content: center;
  height: 56px;
  animation: pop-in var(--dur-slow) var(--ease-out) both;
}
.boot-logo svg { height: 56px; width: auto; display: block; }
.boot-spinner {
  width: 24px; height: 24px;
  border: 2.5px solid var(--border-default);
  border-top-color: var(--brand-600);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.boot-text { font-size: var(--fs-sm); color: var(--text-tertiary); }

/* 加载完成后淡出（由 JS 移除节点，此处兜底） */
.boot-splash.is-done { animation: fade-in var(--dur-base) reverse both; }

/* ==========================================================================
   门户首页补充
   ========================================================================== */

/* 快速入口 */
.quick-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.quick-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base), border-color var(--dur-base);
  cursor: pointer;
}
.quick-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-300);
  color: inherit;
}
.quick-icon {
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-600);
}
.quick-card h3 { font-size: var(--fs-md); margin-bottom: 2px; }
.quick-card p { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }

/* 考试列表卡 */
.exam-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.exam-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-base), border-color var(--dur-base);
}
.exam-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); }
.exam-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.exam-card-title { font-weight: 600; font-size: var(--fs-md); line-height: 1.35; }
.exam-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.exam-meta-item { display: flex; align-items: center; gap: 5px; }

/* 考生中心：可入场 / 已在场的醒目提示条 */
.exam-notice {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
}
.exam-notice-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--brand-100);
  color: var(--brand-600);
}

/* 门户头部导航品牌位（LOGO + 站名） */
.portal-nav .portal-nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}
.portal-nav .portal-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--fs-md);
  white-space: nowrap;
}
/* 导航链接靠右；品牌在左 */
.portal-nav .portal-nav-links { margin-left: auto; }
.portal-nav .portal-nav-links a.is-active { font-weight: 600; }

/* ==========================================================================
   门户页布局补全（2026-09-16）

   以下容器在 portal.js 里已被使用，但此前没有任何样式规则命中，于是退化成
   block，产生两处可见缺陷：
     · .portal-nav-inner / .portal-nav-brand —— 导航内容纵向堆叠，溢出 64px
       高的导航条并压住 hero 区；
     · .portal-stats-inner —— 未参与栅格，4 张统计卡挤成一列；
     · .portal-footer-inner / .portal-footer-brand —— 页脚两栏与品牌行不并排。
   属既有缺陷（静态检查与文本断言都抓不到），本次一并补齐。
   复查脚本：temp/domtest/css_coverage_audit.mjs
   ========================================================================== */

/* 统计区：外层降级为居中容器，真正的四列栅格交给内层 */
.portal-stats {
  display: block;
  max-width: 1140px;
  margin: var(--sp-8) auto 0;
  padding: var(--sp-6);
}
.portal-stats-inner {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* 页脚：品牌信息在左、联系方式在右 */
.portal-footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  max-width: 1140px;
  margin: 0 auto;
  text-align: left;
}
.portal-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-weight: 600;
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  .portal-footer-inner { flex-direction: column; text-align: center; }
  .portal-footer-brand { justify-content: center; }
}

/* 帮助文档块 */
.portal-section-inner { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
.help-block { text-align: left; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.help-list { margin: 0; padding-left: var(--sp-5); }
.help-list li { margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); }
.help-list li:last-child { margin-bottom: 0; }

/* .muted 在全局没有定义，这里只作用于门户页，避免波及其他端的既有观感 */
.portal .muted, .portal-footer .muted { color: var(--text-tertiary); }

/* ==========================================================================
   成绩英雄榜
   ========================================================================== */

.hero-board { overflow: hidden; }
.hero-board-head,
.hero-board-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 120px 90px;
  align-items: center;
  gap: var(--sp-3);
}
.hero-board-head {
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: .04em;
}
.hero-board-head .hero-board-score-col,
.hero-board-row .hero-score { text-align: right; }
.hero-board-row {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--dur-fast);
}
.hero-board-row:last-child { border-bottom: 0; }
.hero-board-row:hover { background: var(--bg-sunken); }

.hero-rank {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-tertiary);
}
.hero-grade {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-name { font-weight: 600; }
.hero-score {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
}

/* 前三名奖牌配色 */
.hero-board-row.is-top { background: var(--brand-50); }
.hero-board-row.is-top:hover { background: var(--brand-100); }
.hero-board-row.is-top .hero-rank { color: var(--warning-600); }
.hero-board-row.is-top .hero-score { color: var(--warning-600); }
.hero-board-row.is-top-1 .hero-rank { color: var(--warning-500); }
.hero-board-row.is-top-1 .hero-name { color: var(--warning-700); }

@media (max-width: 640px) {
  .hero-board-head,
  .hero-board-row { grid-template-columns: 56px minmax(0, 1fr) 70px; }
  .hero-board-head span:nth-child(3),
  .hero-board-row .hero-grade { display: none; }
}

/* ==========================================================================
   考试答题界面
   ========================================================================== */

.exam-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 768px) { .exam-layout { grid-template-columns: minmax(0, 1fr); } }

.exam-timer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.exam-timer.is-urgent {
  color: var(--danger-600);
  border-color: var(--danger-500);
  background: var(--danger-50);
  animation: pulse-soft 1.4s var(--ease-in-out) infinite;
}

/* 题目卡 */
.question-card { padding: var(--sp-6); }
.question-index {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.question-no {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-600);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.question-stem {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-5);
  white-space: pre-wrap;
  word-break: break-word;
}
.question-pic {
  max-width: 100%;
  max-height: 300px;
  margin-bottom: var(--sp-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

/* 选项 */
.option-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.option-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-fast);
  user-select: none;
}
.option-item:hover { border-color: var(--brand-400); background: var(--brand-50); }
.option-item.is-selected {
  border-color: var(--brand-600);
  background: var(--brand-50);
  box-shadow: 0 0 0 1px var(--brand-600) inset;
}
.option-item.is-correct {
  border-color: var(--success-500);
  background: var(--success-50);
}
.option-item.is-wrong {
  border-color: var(--danger-500);
  background: var(--danger-50);
}
.option-key {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  font-weight: 700;
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  background: var(--bg-surface);
}
.option-item.is-selected .option-key { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.option-item.is-correct .option-key { background: var(--success-500); border-color: var(--success-500); color: #fff; }
.option-item.is-wrong .option-key { background: var(--danger-500); border-color: var(--danger-500); color: #fff; }
.option-text { flex: 1; padding-top: 2px; line-height: var(--lh-normal); word-break: break-word; }

/* 题目搜索（学习检索）：正确选项用绿色字体高亮 + 参考答案。
   .option-item.is-correct 已有绿色边框/底色/键位，这里补足「绿色字体」。
   仅作用于 .quiz-search，避免波开门户/错题本等其他端既有观感。 */
.quiz-search .option-item.is-correct .option-text { color: var(--success-600); font-weight: 600; }
.quiz-search .search-tip { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-secondary); }
.quiz-search .answer-line { display: flex; gap: var(--sp-2); align-items: baseline; }
.quiz-search .answer-line-label { color: var(--text-secondary); }
.quiz-search .answer-line-text { color: var(--success-600); font-weight: 600; }
.quiz-search .answer-key { color: var(--success-600); font-weight: 600; }

/* B1 防作弊：浮水印遮罩（仅启用防作弊的正式考试挂载）。
   平铺考生标识，极低不透明度 + pointer-events:none，不挡操作，仅作威慑。 */
.exam-watermark {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--sp-6) var(--sp-10);
  padding: var(--sp-10);
  overflow: hidden;
  transform: rotate(-16deg) scale(1.18);
  transform-origin: center;
  opacity: 0.06;
  user-select: none;
}
.exam-watermark-item {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  letter-spacing: 0.06em;
}

/* 填空题 */
.blank-input {
  border: 0;
  border-bottom: 2px solid var(--brand-500);
  border-radius: 0;
  background: transparent;
  padding: 2px var(--sp-2);
  margin: 0 4px;
  min-width: 120px;
  text-align: center;
  font-weight: 600;
  color: var(--brand-700);
}
.blank-input:focus { outline: none; border-bottom-color: var(--brand-700); }

/* 答题卡侧栏 */
.answer-sheet {
  position: sticky;
  top: calc(60px + var(--sp-6));
}
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: var(--sp-2);
}
.sheet-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: all var(--dur-fast);
}
.sheet-cell:hover { border-color: var(--brand-500); color: var(--brand-600); }
.sheet-cell.is-answered { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.sheet-cell.is-current { box-shadow: 0 0 0 2px var(--brand-400); border-color: var(--brand-600); }
.sheet-cell.is-flagged { background: var(--warning-500); border-color: var(--warning-500); color: #fff; }
.sheet-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.sheet-legend span { display: flex; align-items: center; gap: 5px; }
.sheet-legend i {
  width: 12px; height: 12px;
  border-radius: 3px;
  border: 1.5px solid var(--border-default);
  display: inline-block;
}
.sheet-legend i.f-answered { background: var(--brand-600); border-color: var(--brand-600); }
.sheet-legend i.f-current { box-shadow: 0 0 0 2px var(--brand-400); border-color: var(--brand-600); }
.sheet-legend i.f-flagged { background: var(--warning-500); border-color: var(--warning-500); }

/* 作答结果 */
.result-hero {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
}
.result-score {
  font-size: clamp(48px, 12vw, 84px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.result-score.is-pass {
  background: linear-gradient(120deg, var(--success-500), #06b6d4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.result-score.is-fail {
  background: linear-gradient(120deg, var(--danger-500), var(--warning-500));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.result-label { font-size: var(--fs-lg); color: var(--text-secondary); margin-top: var(--sp-3); }

/* 练习模式解析块 */
.explain-block {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius-sm);
}
.explain-block .explain-title {
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}