/* ==========================================================================
   ProBio-DX · 益生菌制剂工艺智能诊断与决策训练课件
   统一视觉设计体系（V0.1）
   说明：所有颜色、圆角、阴影等设计令牌集中在此，便于后续统一修改。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌（Design Tokens）
   -------------------------------------------------------------------------- */
:root {
  /* 主色：深蓝（标题 / 导航） */
  --color-navy: #0e2b4f;
  --color-navy-deep: #0a2038;

  /* 科技蓝：主按钮 / 强调 */
  --color-blue: #1769c4;
  --color-blue-strong: #1057a3;
  --color-blue-soft: #e8f1fb;

  /* 青绿：正常状态 / 生物技术辅助元素 */
  --color-teal: #139b8b;
  --color-teal-strong: #0e8074;
  --color-teal-soft: #e3f5f2;

  /* 背景与卡片 */
  --color-bg: #f2f6fb;
  --color-card: #ffffff;

  /* 正文与辅助文字 */
  --color-text: #25364a;
  --color-muted: #5b6c82;

  /* 边框 */
  --color-border: #dce5f0;
  --color-border-strong: #c3d1e2;

  /* 风险状态色 */
  --risk-high: #d64545;
  --risk-high-soft: #fbe9e9;
  --risk-mid: #e08a2e;
  --risk-mid-soft: #fcf0e2;
  --risk-low: #2e9e68;
  --risk-low-soft: #e7f5ed;

  /* 字体 */
  --font-sans: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;

  /* 圆角与阴影 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-soft: 0 8px 24px rgba(14, 43, 79, 0.08);
  --shadow-hover: 0 12px 30px rgba(14, 43, 79, 0.13);

  /* 布局 */
  --sidebar-width: 256px;
}

/* --------------------------------------------------------------------------
   2. 基础重置
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

ol,
ul {
  padding-left: 0;
}

:focus-visible {
  outline: 3px solid rgba(23, 105, 196, 0.45);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. 应用整体布局：左侧固定导航 + 右侧内容区
   -------------------------------------------------------------------------- */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 40px 44px 64px;
}

/* --------------------------------------------------------------------------
   4. 左侧导航栏
   -------------------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 16px 20px;
  background: linear-gradient(180deg, var(--color-navy-deep) 0%, var(--color-navy) 100%);
  color: #eaf2fb;
}

.sidebar__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 8px 8px 6px;
  text-align: left;
  color: #ffffff;
}

.brand__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand__logo {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.brand__name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.brand__sub {
  font-size: 11.5px;
  line-height: 1.5;
  color: #c7d7ea;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav__section {
  display: block;
  padding: 4px 12px 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fb0cf;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  color: #d6e3f1;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.nav__link.is-active {
  background: linear-gradient(90deg, rgba(19, 155, 139, 0.26), rgba(23, 105, 196, 0.2));
  border-color: rgba(122, 202, 196, 0.28);
  color: #ffffff;
}

.nav__index {
  width: 20px;
  flex: 0 0 auto;
  font-size: 11px;
  color: #86a7c8;
  font-variant-numeric: tabular-nums;
}

.nav__link.is-active .nav__index {
  color: var(--color-teal-soft);
}

.sidebar__footer {
  margin-top: auto;
  padding: 14px 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__version {
  font-size: 11.5px;
  color: #9fb8d1;
  letter-spacing: 0.02em;
}

.footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #bce0d9;
  background: rgba(19, 155, 139, 0.16);
  border: 1px solid rgba(122, 202, 196, 0.28);
}

.footer__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-teal);
  box-shadow: 0 0 0 4px rgba(19, 155, 139, 0.16);
}

/* --------------------------------------------------------------------------
   5. 页面切换与通用页面标题
   -------------------------------------------------------------------------- */
.page {
  display: none;
}

.page.page--active {
  display: block;
  animation: page-in 0.28s ease;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-head {
  max-width: 1080px;
  margin: 0 0 28px;
}

.page-head__kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue);
}

.page-head__title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.25;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.page-head__desc {
  margin: 0;
  font-size: 15px;
  color: var(--color-muted);
}

.page-lead {
  max-width: 860px;
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   6. 通用组件：按钮、徽章、分区标题
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease, transform 0.18s ease;
}

.btn--primary {
  background: var(--color-blue);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(23, 105, 196, 0.24);
}

.btn--primary:hover {
  background: var(--color-blue-strong);
  transform: translateY(-1px);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
}

.btn--outline {
  background: var(--color-card);
  color: var(--color-blue);
  border-color: var(--color-border-strong);
}

.btn--outline:hover {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
}

.btn--cardlink {
  align-self: flex-start;
  padding: 0;
  font-size: 13px;
  color: var(--color-blue);
  gap: 6px;
}

.btn--cardlink:hover {
  color: var(--color-blue-strong);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge--muted {
  color: var(--color-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.badge--warning {
  color: var(--risk-mid);
  background: var(--risk-mid-soft);
}

.badge--easy {
  color: var(--risk-low);
  background: var(--risk-low-soft);
}

.badge--medium {
  color: var(--risk-mid);
  background: var(--risk-mid-soft);
}

.badge--hard {
  color: var(--risk-high);
  background: var(--risk-high-soft);
}

.badge--teal {
  color: var(--color-teal);
  background: var(--color-teal-soft);
}

.home-section {
  margin-top: 34px;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.section-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal);
}

.section-title {
  margin: 0;
  font-size: 20px;
  color: var(--color-navy);
}

.section-note {
  margin: 0;
  max-width: 430px;
  font-size: 13px;
  color: var(--color-muted);
  text-align: right;
}

/* --------------------------------------------------------------------------
   7. 首页 Hero 主视觉
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 34px 38px;
  border-radius: var(--radius-xl);
  color: #ffffff;
  background: linear-gradient(135deg, #0e2b4f 0%, #16497c 60%, #1774b5 100%);
  box-shadow: var(--shadow-soft);
}

.hero::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 155, 139, 0.35), rgba(19, 155, 139, 0));
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: center;
}

.hero__kicker {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #a8d7f4;
}

.hero__title {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.hero__subtitle {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: #bde0ff;
}

.hero__desc {
  margin: 0 0 22px;
  max-width: 560px;
  font-size: 14px;
  color: #d7e8f8;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__art {
  display: flex;
  justify-content: flex-end;
}

.hero-art {
  width: 100%;
  max-width: 360px;
  height: auto;
}

.art__glow {
  fill: var(--color-teal-soft);
  opacity: 0.55;
}

.art__link {
  fill: none;
  stroke: #7ea6cc;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  opacity: 0.8;
}

.art__node circle {
  fill: var(--color-card);
  stroke: var(--color-blue);
  stroke-width: 2.5;
}

.art__label {
  fill: #bfd6ec;
  font-size: 12px;
  font-family: inherit;
  text-anchor: middle;
}

.art__port,
.art__leg {
  fill: #c9def5;
  stroke: var(--color-blue);
  stroke-width: 2;
}

.art__dome {
  fill: #dff1ff;
  stroke: var(--color-blue);
  stroke-width: 2.5;
}

.art__body {
  fill: rgba(255, 255, 255, 0.06);
  stroke: #8fb8e0;
  stroke-width: 2.5;
}

.art__liquid {
  fill: var(--color-teal-soft);
  opacity: 0.8;
}

.art__shaft {
  fill: none;
  stroke: #bfd6ec;
  stroke-width: 3;
  stroke-linecap: round;
}

.art__microbe circle {
  fill: var(--color-teal);
}

.art__microbe .art__microbe-core {
  fill: var(--color-card);
}

.art__bubble {
  fill: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   8. 首页核心学习路径（横向流程）
   -------------------------------------------------------------------------- */
.process-flow {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 14px 4px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.process-step {
  flex: 0 0 auto;
  width: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  text-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.process-step:hover,
.process-step:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-blue);
  box-shadow: var(--shadow-hover);
}

.process-step__num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-size: 12px;
  font-weight: 700;
}

.process-step__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.process-arrow {
  flex: 0 0 24px;
  color: var(--color-border-strong);
  text-align: center;
  font-size: 14px;
  user-select: none;
}

/* 横向滚动区域的 WebKit 滚动条，保持桌面端整洁 */
.process-flow::-webkit-scrollbar,
.nav__list::-webkit-scrollbar {
  height: 6px;
}

.process-flow::-webkit-scrollbar-track,
.nav__list::-webkit-scrollbar-track {
  background: transparent;
}

.process-flow::-webkit-scrollbar-thumb,
.nav__list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-border-strong);
}

/* --------------------------------------------------------------------------
   9. 首页四个核心功能入口
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 216px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-hover);
}

.feature-card--featured {
  background: linear-gradient(160deg, #0f3158 0%, #1769c4 100%);
  color: #ffffff;
  border-color: transparent;
}

.feature-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feature-card__num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-blue);
}

.feature-card--featured .feature-card__num {
  color: #bde0ff;
}

.feature-card__mark {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--color-teal);
  background: var(--color-teal-soft);
}

.feature-card--featured .feature-card__mark {
  color: #bce0d9;
  background: rgba(19, 155, 139, 0.22);
}

.feature-card h3 {
  margin: 0;
  font-size: 17px;
  color: var(--color-navy);
}

.feature-card--featured h3 {
  color: #ffffff;
}

.feature-card p {
  flex: 1;
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
}

.feature-card--featured p {
  color: #d7e8f8;
}

.feature-card--featured .btn--cardlink {
  color: #bde0ff;
}

.feature-card--featured .btn--cardlink:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   10. 首页教学闭环
   -------------------------------------------------------------------------- */
.teaching-loop {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
}

.loop-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.loop-step__index {
  font-weight: 700;
  color: var(--color-teal);
}

.loop-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--color-border-strong);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   11. 首页学习概览
   -------------------------------------------------------------------------- */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.overview-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.overview-card__title {
  font-size: 12.5px;
  color: var(--color-muted);
}

.overview-card__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
}

.overview-card__value b {
  margin-right: 6px;
  font-size: 32px;
  color: var(--color-blue);
}

/* --------------------------------------------------------------------------
   12. 工艺知识地图
   -------------------------------------------------------------------------- */
.knowledge-map {
  max-width: 1080px;
}

.knowledge-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.knowledge-progress {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.knowledge-progress b {
  color: var(--color-blue);
  font-size: 16px;
}

.knowledge-hint {
  font-size: 12.5px;
  color: var(--color-muted);
}

.knowledge-nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 4px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.knowledge-nav::-webkit-scrollbar {
  height: 6px;
}

.knowledge-nav::-webkit-scrollbar-track {
  background: transparent;
}

.knowledge-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-border-strong);
}

.knowledge-nav-item {
  position: relative;
  flex: 0 0 auto;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  text-align: left;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.knowledge-nav-item:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.knowledge-nav-item.is-selected {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
  box-shadow: 0 0 0 3px rgba(23, 105, 196, 0.08);
}

.knowledge-nav-item__index {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-size: 12px;
  font-weight: 700;
}

.knowledge-nav-item.is-selected .knowledge-nav-item__index {
  background: var(--color-blue);
  color: #ffffff;
}

.knowledge-nav-item__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.knowledge-nav-item__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
}

.knowledge-nav-item__keyword {
  font-size: 11.5px;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knowledge-nav-item__status {
  display: none;
  position: absolute;
  top: -7px;
  right: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-teal);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
}

.knowledge-nav-item.is-visited .knowledge-nav-item__status {
  display: inline-flex;
}

.knowledge-workspace {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kw-block {
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.kw-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.kw-block__num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-size: 12px;
  font-weight: 700;
}

.kw-block__head h3 {
  margin: 0;
  font-size: 15px;
  color: var(--color-navy);
}

.kw-block__text {
  margin: 0;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.7;
}

.kw-block__hint {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--color-muted);
}

.kw-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.kw-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.kw-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.55;
}

.kw-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-teal);
}

.kw-params {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kw-param {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.kw-param__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
}

.kw-param__note {
  font-size: 12px;
  color: var(--color-muted);
}

.kw-risk-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kw-risk-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-bg);
  border-left: 3px solid var(--risk-mid);
}

.kw-risk-item__part {
  font-size: 13px;
  color: var(--color-text);
}

.kw-risk-item__part--risk {
  font-weight: 600;
  color: var(--risk-high);
}

.kw-risk-arrow {
  color: var(--color-border-strong);
  font-size: 13px;
}

.kw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kw-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 12.5px;
  font-weight: 600;
}

.kw-related-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--color-teal-soft);
  border: 1px solid rgba(19, 155, 139, 0.25);
  color: var(--color-teal-strong);
  font-size: 12.5px;
  font-weight: 600;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.kw-related-tag:hover {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: #ffffff;
}

.kw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.kw-callout {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--risk-mid-soft);
  border: 1px solid rgba(224, 138, 46, 0.25);
  color: #7c4a12;
  font-size: 13px;
  line-height: 1.6;
}

.kw-callout strong {
  color: var(--risk-mid);
}

.kw-miniflow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.kw-miniflow__step {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-size: 12.5px;
  font-weight: 600;
}

.kw-miniflow__arrow {
  color: var(--color-border-strong);
  font-size: 13px;
}

@media (max-width: 640px) {
  .knowledge-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .kw-grid-2,
  .kw-params {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   13. 工艺参数实验室
   -------------------------------------------------------------------------- */
.lab-panel {
  max-width: 820px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.panel-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--color-navy);
}

.lab-controls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 24px;
}

.lab-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lab-control label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.lab-control__value {
  font-size: 12px;
  color: var(--color-muted);
}

.lab-control input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--color-blue);
}

.lab-control input[type="range"]:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.lab-notice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-size: 13px;
}

.lab-notice p {
  margin: 0;
}

.lab-notice__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-blue);
}

/* --------------------------------------------------------------------------
   14. 智能诊断中心
   -------------------------------------------------------------------------- */
.diagnosis-panel {
  max-width: 960px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.panel-label {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--color-muted);
}

.diagnosis-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.diagnosis-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 11px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease;
}

.diagnosis-option:hover {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
}

.diagnosis-option.is-selected {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
  color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(23, 105, 196, 0.1);
}

.diagnosis-option__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.diagnosis-option.is-selected .diagnosis-option__dot {
  background: var(--color-blue);
}

.diagnosis-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.diagnosis-footer__hint {
  font-size: 12.5px;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   15. 案例挑战中心
   -------------------------------------------------------------------------- */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  max-width: 1080px;
}

.case-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.case-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.case-card__code {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-blue);
}

.case-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-navy);
}

.case-card p {
  flex: 1;
  margin: 0;
  font-size: 12.5px;
  color: var(--color-muted);
}

.case-card__status {
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 11.5px;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   16. 学习评价
   -------------------------------------------------------------------------- */
.evaluation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 940px;
}

.ability-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.ability-card__num {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--color-teal-soft);
  color: var(--color-teal);
  font-size: 13px;
  font-weight: 700;
}

.ability-card__info {
  flex: 1;
  min-width: 0;
}

.ability-card__info h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--color-navy);
}

.ability-card__info p {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-muted);
}

.ability-card__score {
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-blue);
}

/* --------------------------------------------------------------------------
   17. 学习报告
   -------------------------------------------------------------------------- */
.report-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1080px;
  margin-bottom: 18px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--risk-mid-soft);
  border: 1px solid rgba(224, 138, 46, 0.25);
  color: #8a5a1d;
  font-size: 13px;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1080px;
}

.report-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.report-card h3 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-navy);
}

.report-card__big {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-blue);
}

.report-card__meta {
  margin: 4px 0 12px;
  font-size: 12px;
  color: var(--color-muted);
}

.report-bar-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--color-muted);
}

.report-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg);
  overflow: hidden;
}

.report-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-teal), var(--color-blue));
}

/* --------------------------------------------------------------------------
   18. 使用说明
   -------------------------------------------------------------------------- */
.guide-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
  list-style: none;
  margin: 0;
}

.guide-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.guide-list__num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-weight: 700;
}

.guide-list h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--color-navy);
}

.guide-list p {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   19. 提示浮层（Toast）
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 100;
  max-width: min(90vw, 480px);
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--color-navy);
  color: #ffffff;
  font-size: 13px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
  box-shadow: 0 10px 28px rgba(10, 32, 56, 0.28);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   20. 响应式布局
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .main {
    padding: 32px 28px 56px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__art {
    justify-content: center;
  }

  .hero-art {
    max-width: 300px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .diagnosis-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .app-shell {
    display: block;
    height: auto;
    overflow: visible;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    padding: 16px;
    gap: 14px;
  }

  .sidebar__brand {
    padding: 4px;
  }

  .sidebar__nav {
    gap: 6px;
  }

  .nav__section {
    padding: 0 8px 6px;
  }

  .nav__list {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .nav__link {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }

  .sidebar__footer {
    margin-top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .main {
    overflow: visible;
    padding: 22px 18px 50px;
  }
}

@media (max-width: 640px) {
  .feature-grid,
  .overview-grid,
  .knowledge-grid,
  .lab-controls,
  .diagnosis-options,
  .evaluation-grid,
  .report-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 26px 22px;
  }

  .hero__title {
    font-size: 24px;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-note {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   21. 冻干制剂工艺与质量决策实验室（V0.3）
   -------------------------------------------------------------------------- */
.decision-lab {
  max-width: 1180px;
}

.lab-topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.lab-progress {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  padding-right: 18px;
  border-right: 1px solid var(--color-border);
}

.lab-progress__label {
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.06em;
}

.lab-progress__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.1;
}

.lab-stepper {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.lab-stepper::-webkit-scrollbar {
  height: 6px;
}

.lab-stepper::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-border-strong);
}

.lab-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.lab-step:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

.lab-step.is-active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #ffffff;
}

.lab-step.is-done:not(.is-active) {
  border-color: rgba(19, 155, 139, 0.4);
  color: var(--color-teal-strong);
}

.lab-step.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.lab-step__index {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-size: 11px;
  font-weight: 700;
}

.lab-step.is-active .lab-step__index {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.lab-step.is-done:not(.is-active) .lab-step__index {
  background: var(--color-teal-soft);
  color: var(--color-teal);
}

.lab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.lab-main {
  min-width: 0;
}

.lab-tip {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.decision-lab .lab-panel {
  max-width: none;
}

.lab-panel__intro {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--color-muted);
}

.lab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.lab-option {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.lab-option:hover {
  border-color: var(--color-border-strong);
}

.lab-option.is-selected {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.lab-option.is-correct {
  border-color: var(--risk-low);
  background: var(--risk-low-soft);
  color: var(--risk-low);
}

.lab-option.is-wrong {
  border-color: var(--risk-high);
  background: var(--risk-high-soft);
  color: var(--risk-high);
}

.design-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.design-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.design-item__label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.design-item__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-navy);
}

.design-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.lab-feedback {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 11px;
  border: 1px solid var(--color-border);
  font-size: 13px;
}

.lab-feedback.is-pass {
  background: var(--risk-low-soft);
  border-color: rgba(46, 158, 104, 0.35);
  color: var(--risk-low);
}

.lab-feedback.is-fail {
  background: var(--risk-high-soft);
  border-color: rgba(214, 69, 69, 0.32);
  color: var(--risk-high);
}

.lab-feedback.is-warn {
  background: var(--risk-mid-soft);
  border-color: rgba(224, 138, 46, 0.35);
  color: var(--risk-mid);
}

.lab-feedback__title {
  margin: 0 0 6px;
  font-weight: 700;
}

.lab-feedback__list {
  margin: 0;
  padding-left: 18px;
}

.lab-feedback__list li + li {
  margin-top: 4px;
}

.formula-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.formula-card {
  padding: 16px;
  border-radius: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.formula-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.formula-card__group {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--color-blue);
  color: #ffffff;
  font-weight: 700;
}

.formula-card__type {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-teal-strong);
}

.formula-card__name {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--color-navy);
}

.formula-card__formula {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--color-blue);
  font-weight: 600;
}

.formula-card__purpose,
.formula-card__mech {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--color-text);
  line-height: 1.5;
}

.lab-subsection {
  padding-top: 4px;
}

.lab-subsection__title {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--color-navy);
}

.lab-question {
  padding: 13px 14px;
  border-radius: 11px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  margin-bottom: 10px;
}

.lab-question__text {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.lab-question__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lab-question__explain {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--color-muted);
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}

.calc-group {
  padding: 14px;
  border-radius: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.calc-group__title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-navy);
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.calc-field__label {
  font-size: 12px;
  color: var(--color-muted);
}

.calc-field__input {
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
}

.calc-field__input:focus {
  outline: 2px solid rgba(23, 105, 196, 0.4);
  border-color: var(--color-blue);
}

.calc-advanced {
  margin: 12px 0;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: var(--color-card);
}

.calc-advanced summary {
  padding: 11px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-blue);
}

.calc-advanced__body {
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
}

.calc-advanced__result {
  margin-top: 10px;
  font-size: 13px;
}

.calc-advanced__result.is-success {
  color: var(--risk-low);
}

.calc-advanced__result.is-error {
  color: var(--risk-high);
}

.calc-advanced__hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-muted);
}

.calc-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.calc-result.is-error {
  background: var(--risk-high-soft);
  border-color: rgba(214, 69, 69, 0.32);
  color: var(--risk-high);
}

.calc-result__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.calc-result__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.calc-result__card--main {
  border-color: rgba(23, 105, 196, 0.4);
  background: var(--color-blue-soft);
}

.calc-result__label {
  font-size: 12px;
  color: var(--color-muted);
}

.calc-result__card b {
  font-size: 18px;
  color: var(--color-navy);
}

.calc-result__card--main b {
  color: var(--color-blue);
}

.calc-result__log {
  margin: 12px 0 4px;
  font-size: 12.5px;
  color: var(--color-muted);
}

.calc-result__note {
  margin: 6px 0;
  font-size: 13px;
  color: var(--color-text);
}

.calc-result__warning {
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--risk-mid-soft);
  color: var(--risk-mid);
  font-size: 12.5px;
}

.data-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--risk-mid-soft);
  color: var(--risk-mid);
  font-size: 12px;
  font-weight: 600;
}

.anomaly-list,
.scenario-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.anomaly-case,
.scenario-card {
  padding: 15px 16px;
  border-radius: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.anomaly-case__title,
.scenario-card__title {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--color-navy);
}

.anomaly-case__scenario,
.scenario-card__text {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-text);
}

.lab-case-feedback {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.5;
}

.lab-case-feedback.is-pass {
  background: var(--risk-low-soft);
  color: var(--risk-low);
}

.lab-case-feedback.is-fail {
  background: var(--risk-high-soft);
  color: var(--risk-high);
}

.lab-case-feedback.is-info {
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.decision-card {
  padding: 16px;
  border-radius: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.decision-card__title {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--color-navy);
}

.decision-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.decision-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.decision-metric span {
  font-size: 11.5px;
  color: var(--color-muted);
}

.decision-metric b {
  font-size: 13px;
  color: var(--color-text);
}

.storage-chart {
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.storage-chart__svg {
  width: 100%;
  height: auto;
}

.storage-chart__line {
  stroke: var(--color-blue);
  stroke-width: 2;
  fill: none;
}

.storage-chart__axis {
  stroke: var(--color-border-strong);
  stroke-width: 1;
}

.storage-chart__label {
  fill: var(--color-muted);
  font-size: 10px;
  font-family: inherit;
}

.lab-tip__note {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.lab-tip__title {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--color-navy);
}

.lab-tip__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-muted);
}

.mech-library {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-card);
}

.mech-library__summary {
  padding: 11px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
}

.mech-library__body {
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mech-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.mech-card__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
}

.mech-card__summary::-webkit-details-marker {
  display: none;
}

.mech-card__title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
}

.mech-card__tag {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
}

.mech-card__tag--core {
  background: var(--color-teal-soft);
  color: var(--color-teal);
}

.mech-card__tag--extend {
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.mech-card__body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 0 11px 11px;
}

.mech-card__svg {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: var(--color-blue);
}

.mech-card__svg svg {
  width: 44px;
  height: 44px;
}

.mech-card__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-muted);
}

.lab-inline-hint {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--risk-mid-soft);
  color: var(--risk-mid);
  font-size: 12.5px;
}

@media (max-width: 980px) {
  .lab-layout {
    grid-template-columns: 1fr;
  }

  .lab-tip {
    position: static;
  }
}

@media (max-width: 640px) {
  .lab-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .lab-progress {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    border-right: 0;
    padding-right: 0;
  }

  .formula-grid,
  .calc-grid,
  .calc-result__grid,
  .decision-grid,
  .decision-card__metrics {
    grid-template-columns: 1fr;
  }

  .design-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .design-options {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   22. 工艺异常智能诊断中心（V0.4）
   -------------------------------------------------------------------------- */
.diagnosis-lab {
  max-width: 1180px;
}

.diag-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.diag-empty[hidden] {
  display: none;
}

.diag-empty {
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.diag-empty__head {
  margin-bottom: 16px;
}

.diag-empty__title {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--color-navy);
}

.diag-empty__desc {
  margin: 0;
  font-size: 14px;
  color: var(--color-muted);
}

.diag-empty__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.diag-empty__card {
  padding: 14px 16px;
  border-radius: 11px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.diag-empty__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-size: 12px;
  font-weight: 700;
}

.diag-empty__card h4 {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--color-navy);
}

.diag-empty__card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-muted);
}

.diag-empty__note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--color-teal-soft);
  color: var(--color-teal-strong);
  font-size: 12.5px;
}

.diag-workspace[hidden] {
  display: none;
}

.diag-topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.diag-progress {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 18px;
  border-right: 1px solid var(--color-border);
}

.diag-progress__label {
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.06em;
}

.diag-progress b {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.1;
}

.diag-stepper {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.diag-stepper::-webkit-scrollbar {
  height: 6px;
}

.diag-stepper::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-border-strong);
}

.diag-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.diag-step:hover {
  border-color: var(--color-border-strong);
}

.diag-step.is-active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #ffffff;
}

.diag-step.is-done:not(.is-active) {
  border-color: rgba(19, 155, 139, 0.4);
  color: var(--color-teal-strong);
}

.diag-step.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.diag-step__index {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-size: 11px;
  font-weight: 700;
}

.diag-step.is-active .diag-step__index {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.diag-step.is-done:not(.is-active) .diag-step__index {
  background: var(--color-teal-soft);
  color: var(--color-teal);
}

.diag-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.diag-main {
  min-width: 0;
}

.diag-evidence,
.diag-history {
  min-width: 0;
}

.dx-panel,
.dx-report {
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.dx-panel__intro {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--color-muted);
}

.dx-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.dx-option {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.dx-option:hover {
  border-color: var(--color-border-strong);
}

.dx-option.is-selected {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.dx-option--sm {
  padding: 6px 10px;
  font-size: 12px;
}

.dx-option__priority {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-muted);
}

.dx-group {
  margin-bottom: 14px;
}

.dx-group__title {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--color-navy);
}

.dx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  margin-bottom: 7px;
}

.dx-item__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.dx-item__options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.dx-hint {
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-size: 12.5px;
}

.dx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.dx-result {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 13px;
}

.dx-result.is-pass {
  background: var(--risk-low-soft);
  border-color: rgba(46, 158, 104, 0.35);
  color: var(--risk-low);
}

.dx-result.is-problem {
  background: var(--risk-high-soft);
  border-color: rgba(214, 69, 69, 0.32);
  color: var(--risk-high);
}

.dx-result.is-missing {
  background: var(--risk-mid-soft);
  border-color: rgba(224, 138, 46, 0.35);
  color: var(--risk-mid);
}

.dx-result__title {
  margin: 0 0 4px;
  font-weight: 700;
}

.dx-report__block {
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}

.dx-report__block:first-child {
  border-top: 0;
}

.dx-report__block h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--color-navy);
}

.dx-report__block p {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.55;
}

.dx-report-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--color-text);
}

.dx-grade {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--color-border);
}

.dx-grade__tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.dx-grade-a {
  background: var(--risk-high-soft);
  border-color: rgba(214, 69, 69, 0.3);
}

.dx-grade-a .dx-grade__tag {
  background: var(--risk-high);
  color: #ffffff;
}

.dx-grade-b {
  background: var(--color-blue-soft);
  border-color: rgba(23, 105, 196, 0.3);
}

.dx-grade-b .dx-grade__tag {
  background: var(--color-navy);
  color: #ffffff;
}

.dx-grade-c {
  background: #f0f6ff;
  border-color: rgba(23, 105, 196, 0.2);
}

.dx-grade-c .dx-grade__tag {
  background: var(--color-blue);
  color: #ffffff;
}

.dx-grade-d {
  background: var(--color-bg);
  border-color: var(--color-border);
}

.dx-grade-d .dx-grade__tag {
  background: #9aa8b8;
  color: #ffffff;
}

.dx-grade__list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--color-text);
}

.dx-evidence__card,
.dx-history__card {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  margin-bottom: 14px;
}

.dx-evidence__card h4,
.dx-history__card h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--color-navy);
}

.dx-evidence__card p,
.dx-history__card p {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--color-text);
}

.dx-history-item {
  border: 1px solid var(--color-border);
  border-radius: 9px;
  margin-bottom: 8px;
  background: var(--color-bg);
}

.dx-history-item summary {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-navy);
}

.dx-history-item__body {
  padding: 0 10px 10px;
}

@media (max-width: 980px) {
  .diag-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .diag-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .diag-progress {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    border-right: 0;
    padding-right: 0;
  }

  .diag-empty__cards {
    grid-template-columns: 1fr;
  }

  .dx-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .dx-item__options {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   23. 案例挑战中心（V0.5）
   -------------------------------------------------------------------------- */
.cases-lab {
  max-width: 1180px;
}

.case-home[hidden],
.case-workspace[hidden] {
  display: none;
}

.case-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.case-overview__item {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-overview__item span {
  font-size: 12px;
  color: var(--color-muted);
}

.case-overview__item b {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
}

.case-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.case-filters__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted);
  margin-right: 2px;
}

.case-filter {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 600;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.case-filter.is-active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #ffffff;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.case-card-v5 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 16px;
  border-radius: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.case-card-v5:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-hover);
}

.case-card-v5--featured {
  grid-column: 1 / -1;
  border-color: rgba(23, 105, 196, 0.35);
}

.case-card-v5__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-level {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.case-level-1,
.case-level-2 {
  background: var(--color-teal-soft);
  color: var(--color-teal);
}

.case-level-3 {
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.case-level-4 {
  background: var(--risk-mid-soft);
  color: var(--risk-mid);
}

.case-level-5 {
  background: var(--color-navy);
  color: #ffffff;
}

.case-theme {
  font-size: 11.5px;
  color: var(--color-muted);
  font-weight: 600;
}

.case-task {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.case-card-v5__title {
  margin: 0;
  font-size: 15px;
  color: var(--color-navy);
  line-height: 1.35;
}

.case-card-v5__module {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
}

.case-card-v5__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  font-size: 11.5px;
  color: var(--color-muted);
}

.case-footnote {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--color-muted);
}

.case-stepper {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  margin-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.case-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.case-step.is-active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #ffffff;
}

.case-step.is-done:not(.is-active) {
  border-color: rgba(19, 155, 139, 0.4);
  color: var(--color-teal-strong);
}

.case-step.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.case-step__index {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-size: 10.5px;
  font-weight: 700;
}

.case-step.is-active .case-step__index {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.case-step.is-done:not(.is-active) .case-step__index {
  background: var(--color-teal-soft);
  color: var(--color-teal);
}

.case-panel {
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.case-goal,
.case-scenario {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.6;
}

.case-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
  font-size: 13px;
}

.case-table th,
.case-table td {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  text-align: left;
}

.case-table th {
  background: var(--color-blue-soft);
  color: var(--color-navy);
  font-weight: 700;
}

.case-sim-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--risk-mid-soft);
  color: var(--risk-mid);
  font-size: 12px;
  font-weight: 600;
}

.case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.case-hint {
  font-size: 12px;
  color: var(--color-muted);
}

.case-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.case-option {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.case-option:hover {
  border-color: var(--color-border-strong);
}

.case-option.is-selected {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.case-sub {
  margin-top: 6px;
}

.case-sub__label {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
}

.case-score {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-blue);
}

.case-feedback section {
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
}

.case-feedback section:first-child {
  border-top: 0;
}

.case-feedback h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--color-navy);
}

.case-feedback p {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.55;
}

.case-feedback .case-note {
  margin-left: 12px;
  font-size: 12.5px;
  color: var(--color-muted);
}

.case-feedback ul {
  margin: 0 0 6px 18px;
  padding: 0;
}

.case-feedback li {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.55;
}

.case-ability {
  display: grid;
  grid-template-columns: 90px 1fr 30px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--color-text);
}

.case-ability__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg);
  overflow: hidden;
}

.case-ability__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-teal), var(--color-blue));
}

.case-ability b {
  text-align: right;
  color: var(--color-navy);
}

@media (max-width: 980px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .case-overview,
  .case-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   24. 学习评价与学习报告（V0.6）
   -------------------------------------------------------------------------- */
.evaluation-app,
.report-app {
  max-width: 1080px;
}

.eval-note,
.eval-footnote {
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--color-teal-soft);
  color: var(--color-teal-strong);
  font-size: 12.5px;
  line-height: 1.5;
}

.eval-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.eval-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.eval-card__title {
  font-size: 12px;
  color: var(--color-muted);
}

.eval-card__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
}

.eval-card__source {
  font-size: 11px;
  color: var(--color-muted);
}

.eval-card__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-bg);
  overflow: hidden;
}

.eval-card__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-teal), var(--color-blue));
}

.eval-scores {
  display: flex;
  gap: 12px;
  margin: 8px 0 18px;
}

.eval-score {
  flex: 1;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.eval-score span {
  font-size: 12px;
  color: var(--color-muted);
}

.eval-score b {
  display: block;
  font-size: 22px;
  color: var(--color-blue);
}

.eval-section-title {
  margin: 18px 0 6px;
  font-size: 16px;
  color: var(--color-navy);
}

.eval-source {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--color-muted);
}

.eval-empty,
.eval-sample-note,
.report-empty {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 13px;
}

.eval-ability-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.ev-radar__svg {
  width: 100%;
  height: auto;
}

.ev-radar__grid {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1;
}

.ev-radar__axis {
  stroke: var(--color-border-strong);
  stroke-width: 1;
}

.ev-radar__value {
  fill: rgba(23, 105, 196, 0.18);
  stroke: var(--color-blue);
  stroke-width: 2;
}

.ev-radar__label {
  fill: var(--color-navy);
  font-size: 12px;
  font-family: inherit;
}

.ev-ability {
  margin-bottom: 12px;
}

.ev-ability__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  font-size: 13px;
  color: var(--color-text);
}

.ev-ability__head b {
  color: var(--color-navy);
}

.ev-ability__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg);
  overflow: hidden;
}

.ev-ability__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-teal), var(--color-blue));
}

.ev-ability__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--color-muted);
}

.eval-sw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.eval-sw > div {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.eval-sw span {
  font-size: 12px;
  color: var(--color-muted);
}

.eval-sw p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--color-text);
}

.eval-rec-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.6;
}

.eval-rec-note,
.report-tie-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

.eval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.report-doc {
  padding: 26px 30px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.report-head h3 {
  margin: 0 0 4px;
  font-size: 24px;
  color: var(--color-navy);
}

.report-head p {
  margin: 0 0 3px;
  font-size: 13px;
  color: var(--color-muted);
}

.report-actions {
  margin: 12px 0 16px;
}

.report-sec {
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
}

.report-sec h4 {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--color-navy);
}

.report-sec--note p {
  color: var(--color-muted);
}

.report-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.report-overview__card {
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.report-overview__card span {
  display: block;
  font-size: 11.5px;
  color: var(--color-muted);
}

.report-overview__card b {
  font-size: 18px;
  color: var(--color-navy);
}

.report-ability {
  margin-bottom: 11px;
}

.report-ability__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--color-text);
}

.report-ability__head b {
  color: var(--color-navy);
}

.report-ability__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg);
  overflow: hidden;
  margin-top: 5px;
}

.report-ability__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-teal), var(--color-blue));
}

.report-ability__meta {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--color-muted);
}

.report-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.7;
}

@media (max-width: 980px) {
  .eval-overview,
  .report-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .eval-overview,
  .eval-ability-layout,
  .eval-sw,
  .report-overview {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   25. 模块入口 / 总览状态（V0.6.1）
   -------------------------------------------------------------------------- */
.knowledge-entry,
.lab-overview {
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.knowledge-entry__title {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--color-navy);
}

.knowledge-entry__text {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--color-muted);
}

.knowledge-entry__last {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-text);
}

.lab-overview__intro,
.lab-overview__progress {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--color-text);
}

.lab-overview__progress b {
  color: var(--color-blue);
}

.lab-overview__steps {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lab-overview__steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.lab-overview__steps li.is-done {
  border-color: rgba(19, 155, 139, 0.35);
  background: var(--color-teal-soft);
}

.lab-overview__step-index {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  font-size: 12px;
  font-weight: 700;
}

.lab-overview__steps li.is-done .lab-overview__step-index {
  background: var(--color-teal);
  color: #ffffff;
}

.lab-overview__step-name {
  flex: 1;
  font-size: 13px;
  color: var(--color-text);
  font-weight: 600;
}

.lab-overview__step-state {
  font-size: 12px;
  color: var(--color-muted);
}

.lab-overview__done {
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--risk-low-soft);
  color: var(--risk-low);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

.lab-overview__resume {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--color-muted);
}

.lab-overview__warning {
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--risk-mid-soft);
  color: var(--risk-mid);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 12px;
}

.dx-resume {
  padding: 11px 12px;
  border-radius: 9px;
  background: var(--color-blue-soft);
  border: 1px solid rgba(23, 105, 196, 0.22);
  margin-bottom: 10px;
}

.dx-resume p {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--color-text);
}

.dx-history-item__hint {
  margin-left: 6px;
  font-size: 11px;
  color: var(--color-muted);
  font-weight: 400;
}

@page {
  size: A4 portrait;
  margin: 14mm;
}

@media print {
  .sidebar,
  .no-print,
  .report-actions,
  .eval-actions,
  .eval-footnote {
    display: none !important;
  }

  .app-shell {
    display: block;
    height: auto;
    overflow: visible;
  }

  .main {
    overflow: visible;
    padding: 0;
  }

  .page {
    display: none !important;
  }

  .page.page--active {
    display: block !important;
    animation: none;
  }

  .report-doc {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .report-sec {
    break-inside: avoid;
  }
}

/* 降低动效偏好：关闭过渡与动画，提升可读性与无障碍体验 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ========================================
  ProBio-DX V1.0 UI POLISH
  Stage 1: Global typography + Sidebar + Home
  Visual-only enhancement
  ======================================== */

@media screen {
  /* Global typography hierarchy */
  .page-head__title {
    font-size: clamp(34px, 2.4vw, 36px);
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: -0.02em;
  }

  .page-head__desc {
    font-size: 16px;
    line-height: 1.65;
  }

  .page-lead {
    font-size: 15px;
    line-height: 1.65;
  }

  .badge {
    font-size: 13px;
  }

  /* Sidebar */
  .sidebar {
    gap: 18px;
    background: linear-gradient(180deg, #0a2845 0%, #0d2f50 100%);
    box-shadow: 8px 0 28px rgba(8, 34, 58, 0.12);
  }

  .sidebar__brand {
    gap: 11px;
  }

  .brand__logo {
    width: 40px;
    height: 40px;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
  }

  .brand__name {
    font-size: 21px;
    font-weight: 750;
    letter-spacing: 0.1px;
  }

  .brand__sub {
    font-size: 13px;
    line-height: 1.55;
    color: #cbdced;
  }

  .nav__section {
    font-size: 12px;
    color: #9ebbd5;
  }

  .nav__link {
    position: relative;
    min-height: 47px;
    padding: 11px 12px 11px 14px;
    gap: 11px;
    border-radius: 11px;
    font-size: 16px;
    line-height: 1.35;
    color: #dce8f4;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
      box-shadow 0.18s ease, transform 0.18s ease;
  }

  .nav__link::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
    transition: background-color 0.18s ease;
  }

  .nav__link:hover {
    background: rgba(255, 255, 255, 0.095);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateX(1px);
  }

  .nav__link.is-active {
    background: linear-gradient(90deg, rgba(36, 116, 210, 0.42), rgba(24, 165, 141, 0.2));
    border-color: rgba(126, 193, 230, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 7px 18px rgba(4, 25, 45, 0.14);
  }

  .nav__link.is-active::before {
    background: #4bd0b8;
  }

  .nav__index {
    width: 21px;
    font-size: 12.5px;
    font-weight: 600;
    color: #8eacc8;
  }

  .nav__text {
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .footer__version {
    font-size: 12.5px;
    color: #abc1d7;
  }

  .footer__badge {
    font-size: 12.5px;
  }

  /* Home hero */
  .hero {
    padding: 40px 44px;
    border: 1px solid rgba(168, 215, 244, 0.18);
    background: linear-gradient(135deg, #0d2f50 0%, #164d80 62%, #1c6da7 100%);
    box-shadow: 0 16px 38px rgba(13, 47, 80, 0.16);
  }

  .hero::after {
    right: -72px;
    top: -86px;
    background: radial-gradient(circle, rgba(24, 165, 141, 0.34), rgba(24, 165, 141, 0));
  }

  .hero__inner {
    gap: 36px;
  }

  .hero__kicker {
    margin-bottom: 13px;
    font-size: 13px;
    font-weight: 700;
    color: #b5ddf7;
  }

  .hero__title {
    margin-bottom: 14px;
    font-size: clamp(34px, 2.7vw, 38px);
    line-height: 1.22;
    font-weight: 750;
    letter-spacing: -0.025em;
  }

  .hero__subtitle {
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 1.55;
    color: #c7e5fb;
  }

  .hero__desc {
    margin-bottom: 25px;
    max-width: 590px;
    font-size: 16px;
    line-height: 1.65;
    color: #deedf9;
  }

  .hero__actions {
    gap: 13px;
  }

  .hero__actions .btn {
    min-height: 48px;
    padding: 12px 22px;
    font-size: 16px;
    border-radius: 11px;
    white-space: nowrap;
  }

  .hero__actions .btn--primary {
    background: #2474d2;
    box-shadow: 0 9px 22px rgba(3, 28, 57, 0.3);
  }

  .hero__actions .btn--primary:hover {
    background: #195fb5;
    box-shadow: 0 12px 25px rgba(3, 28, 57, 0.34);
  }

  .hero__actions .btn--ghost {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.48);
  }

  .hero__actions .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
  }

  /* Home section headings */
  .home-section {
    margin-top: 38px;
  }

  .section-head {
    margin-bottom: 19px;
  }

  .section-kicker {
    margin-bottom: 5px;
    font-size: 12.5px;
  }

  .section-title {
    font-size: clamp(24px, 1.8vw, 26px);
    line-height: 1.3;
    letter-spacing: -0.015em;
  }

  .section-note {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Home learning path */
  .process-flow {
    padding-top: 16px;
    padding-bottom: 20px;
  }

  .process-step {
    width: 120px;
    gap: 9px;
    padding: 17px 10px 15px;
    border-radius: 15px;
    border-color: #dce5ef;
    box-shadow: 0 5px 16px rgba(13, 47, 80, 0.045);
  }

  .process-step:hover,
  .process-step:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13, 47, 80, 0.12);
  }

  .process-step__num {
    width: 36px;
    height: 36px;
    font-size: 13px;
    background: #e8f1fb;
    color: #2474d2;
  }

  .process-step__label {
    font-size: 14px;
    line-height: 1.45;
  }

  .process-arrow {
    color: #c7d3df;
    font-size: 13px;
  }

  /* Home feature cards */
  .feature-grid {
    gap: 18px;
  }

  .feature-card {
    min-height: 238px;
    gap: 13px;
    padding: 22px;
    border-radius: 16px;
    background: #f7fbff;
    color: #17324d;
    border-color: #b8d8f5;
    box-shadow: inset 0 4px 0 #2474d2, 0 7px 20px rgba(36, 116, 210, 0.08);
  }

  .feature-card:hover {
    transform: translateY(-2px);
    border-color: #8ebbe8;
    box-shadow: inset 0 4px 0 #2474d2, 0 13px 30px rgba(36, 116, 210, 0.13);
  }

  .feature-card--featured .feature-card__num {
    color: #2474d2;
  }

  .feature-card--featured .feature-card__mark {
    color: #0e8074;
    background: #e3f5f2;
    border: 1px solid #bfe5de;
  }

  .feature-card--featured h3 {
    color: var(--color-navy);
  }

  .feature-card--featured p {
    color: var(--color-muted);
  }

  .feature-card--featured .btn--cardlink {
    color: var(--color-blue);
  }

  .feature-card--featured .btn--cardlink:hover {
    color: var(--color-blue-strong);
  }

  .feature-card__num {
    font-size: 13px;
  }

  .feature-card__mark {
    font-size: 13px;
    padding: 4px 9px;
    color: #0e8074;
    background: #e3f5f2;
    border: 1px solid #bfe5de;
  }

  .feature-card h3 {
    font-size: 19px;
    line-height: 1.4;
    color: var(--color-navy);
  }

  .feature-card p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--color-muted);
  }

  .feature-card .btn--cardlink {
    font-size: 14px;
    color: var(--color-blue);
  }

  /* Home teaching loop */
  .teaching-loop {
    gap: 11px;
  }

  .loop-step {
    gap: 9px;
    padding: 10px 15px;
    font-size: 14.5px;
    border-color: #d8e7e4;
    box-shadow: 0 4px 14px rgba(13, 47, 80, 0.04);
  }

  .loop-step__index {
    font-size: 13px;
    color: #18a58d;
  }

  .loop-arrow {
    color: #c7d3df;
    font-size: 13px;
  }

  /* Home overview */
  .overview-grid {
    gap: 18px;
  }

  .overview-card {
    gap: 8px;
    padding: 22px 24px;
    border-radius: 16px;
    border-color: #dce5ef;
    box-shadow: 0 7px 20px rgba(13, 47, 80, 0.05);
  }

  .overview-card__title {
    font-size: 15px;
    line-height: 1.55;
  }

  .overview-card__value {
    font-size: 16px;
  }

  .overview-card__value b {
    font-size: clamp(30px, 2.3vw, 34px);
    color: #2474d2;
  }
}

@media screen and (min-width: 1181px) and (max-width: 1366px) {
  .hero {
    padding: 36px 38px;
  }

  .hero__inner {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 30px;
  }

  .hero__title {
    font-size: 34px;
  }

  .hero-art {
    max-width: 330px;
  }

  .feature-card {
    padding: 20px;
  }
}

@media screen and (max-width: 980px) {
  .nav__link {
    min-height: 45px;
  }
}

@media screen and (max-width: 640px) {
  .page-head__title {
    font-size: 30px;
  }

  .hero {
    padding: 28px 24px;
  }

  .hero__title {
    font-size: 30px;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

/* ========================================
  ProBio-DX V1.0 UI POLISH
  Stage 2: Modules 02–05
  Visual-only enhancement
  ======================================== */

@media screen {
  /* Modules 02–05: shared action hierarchy */
  #page-knowledge .btn,
  #page-parameters .btn,
  #page-diagnosis .btn,
  #page-cases .btn {
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 11px;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #page-knowledge .btn--primary,
  #page-parameters .btn--primary,
  #page-diagnosis .btn--primary,
  #page-cases .btn--primary {
    background: #2474d2;
    box-shadow: 0 7px 18px rgba(36, 116, 210, 0.2);
  }

  #page-knowledge .btn--primary:hover,
  #page-parameters .btn--primary:hover,
  #page-diagnosis .btn--primary:hover,
  #page-cases .btn--primary:hover {
    background: #195fb5;
    box-shadow: 0 10px 22px rgba(36, 116, 210, 0.24);
  }

  #page-knowledge .btn--outline,
  #page-parameters .btn--outline,
  #page-diagnosis .btn--outline,
  #page-cases .btn--outline {
    background: #ffffff;
    color: #195fb5;
    border-color: #b8d2ec;
  }

  #page-knowledge .btn--outline:hover,
  #page-parameters .btn--outline:hover,
  #page-diagnosis .btn--outline:hover,
  #page-cases .btn--outline:hover {
    background: #eef6ff;
    border-color: #2474d2;
  }

  #page-parameters [data-lab-overview-action="confirmRestart"] {
    background: #fff8ed;
    color: #a96513;
    border: 1px solid #edc98f;
    box-shadow: none;
  }

  #page-parameters [data-lab-overview-action="confirmRestart"]:hover {
    background: #fdf0dc;
    color: #8e540c;
  }

  /* Module 02: knowledge map */
  #page-knowledge .knowledge-toolbar {
    margin-bottom: 16px;
  }

  #page-knowledge .knowledge-progress {
    font-size: 14.5px;
  }

  #page-knowledge .knowledge-progress b {
    font-size: 20px;
    color: #2474d2;
  }

  #page-knowledge .knowledge-hint {
    font-size: 14px;
    line-height: 1.55;
  }

  #page-knowledge .knowledge-nav {
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 15px;
  }

  #page-knowledge .knowledge-nav-item {
    min-width: 166px;
    min-height: 70px;
    padding: 14px 15px;
    border-radius: 14px;
    border-color: #dce5ef;
    background: #ffffff;
    box-shadow: 0 5px 16px rgba(13, 47, 80, 0.045);
  }

  #page-knowledge .knowledge-nav-item:hover {
    border-color: #a9c8e8;
    box-shadow: 0 9px 22px rgba(13, 47, 80, 0.09);
  }

  #page-knowledge .knowledge-nav-item.is-selected {
    border-color: #2474d2;
    background: #eef6ff;
    box-shadow: 0 0 0 3px rgba(36, 116, 210, 0.09), 0 8px 20px rgba(36, 116, 210, 0.1);
  }

  #page-knowledge .knowledge-nav-item__index {
    width: 36px;
    height: 36px;
    font-size: 13px;
    background: #e8f1fb;
    color: #2474d2;
  }

  #page-knowledge .knowledge-nav-item__name {
    font-size: 15px;
    line-height: 1.35;
  }

  #page-knowledge .knowledge-nav-item__keyword {
    font-size: 13px;
  }

  #page-knowledge .knowledge-nav-item__status {
    padding: 3px 8px;
    font-size: 12px;
    background: #18a58d;
  }

  #page-knowledge .knowledge-entry,
  #page-knowledge .kw-block {
    border-radius: 16px;
    border-color: #dce5ef;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(13, 47, 80, 0.055);
  }

  #page-knowledge .knowledge-entry {
    padding: 22px 24px;
  }

  #page-knowledge .knowledge-entry__title {
    font-size: 20px;
    line-height: 1.35;
  }

  #page-knowledge .knowledge-entry__text {
    font-size: 15.5px;
    line-height: 1.65;
  }

  #page-knowledge .knowledge-entry__last {
    font-size: 14.5px;
    line-height: 1.55;
  }

  #page-knowledge .kw-block {
    padding: 20px 22px;
  }

  #page-knowledge .kw-block__num {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  #page-knowledge .kw-block__head h3 {
    font-size: 18px;
  }

  #page-knowledge .kw-block__text,
  #page-knowledge .kw-list li {
    font-size: 15px;
    line-height: 1.62;
  }

  #page-knowledge .kw-block__hint {
    font-size: 14px;
    line-height: 1.55;
  }

  #page-knowledge .kw-param {
    padding: 13px 14px;
    border-radius: 11px;
    background: #f7faff;
  }

  #page-knowledge .kw-param__name {
    font-size: 15px;
  }

  #page-knowledge .kw-param__note {
    font-size: 13.5px;
    line-height: 1.5;
  }

  #page-knowledge .kw-risk-item__part {
    font-size: 14px;
    line-height: 1.55;
  }

  #page-knowledge .kw-tag,
  #page-knowledge .kw-related-tag,
  #page-knowledge .kw-miniflow__step {
    font-size: 13.5px;
  }

  #page-knowledge .kw-callout {
    font-size: 14px;
    line-height: 1.62;
  }

  /* Module 03: parameter laboratory */
  #page-parameters .lab-overview,
  #page-parameters .lab-panel,
  #page-parameters .lab-tip__note,
  #page-parameters .formula-card,
  #page-parameters .lab-question,
  #page-parameters .calc-group,
  #page-parameters .calc-result,
  #page-parameters .anomaly-case,
  #page-parameters .scenario-card,
  #page-parameters .decision-card {
    border-radius: 15px;
    border-color: #dce5ef;
  }

  #page-parameters .lab-overview,
  #page-parameters .lab-panel {
    padding: 22px 24px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(13, 47, 80, 0.055);
  }

  #page-parameters .panel-head {
    margin-bottom: 16px;
  }

  #page-parameters .panel-head h3 {
    font-size: 20px;
    line-height: 1.35;
  }

  #page-parameters .lab-overview__intro,
  #page-parameters .lab-overview__progress,
  #page-parameters .lab-panel__intro {
    font-size: 15px;
    line-height: 1.6;
  }

  #page-parameters .lab-overview__progress b {
    font-size: 25px;
    color: #2474d2;
  }

  #page-parameters .lab-overview__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #page-parameters .lab-overview__steps li {
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 11px;
    background: #f7faff;
  }

  #page-parameters .lab-overview__steps li.is-done {
    border-color: #a8ddd3;
    background: #ecf9f6;
  }

  #page-parameters .lab-overview__step-index {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  #page-parameters .lab-overview__step-name {
    font-size: 15px;
  }

  #page-parameters .lab-overview__step-state,
  #page-parameters .lab-overview__resume {
    font-size: 13.5px;
  }

  #page-parameters .lab-progress__label,
  #page-parameters .diag-progress__label {
    font-size: 13px;
  }

  #page-parameters .lab-progress__value {
    font-size: 26px;
    color: #2474d2;
  }

  #page-parameters .lab-step {
    min-height: 42px;
    padding: 9px 13px;
    font-size: 14px;
    background: #f7faff;
    border-color: #dce5ef;
  }

  #page-parameters .lab-step.is-active {
    background: #2474d2;
    border-color: #2474d2;
  }

  #page-parameters .lab-step.is-done:not(.is-active) {
    background: #ecf9f6;
    border-color: #a8ddd3;
    color: #0e8074;
  }

  #page-parameters .lab-option {
    min-height: 38px;
    padding: 9px 13px;
    font-size: 15px;
    background: #ffffff;
  }

  #page-parameters .design-item__name,
  #page-parameters .lab-question__text,
  #page-parameters .calc-group__title {
    font-size: 15px;
    line-height: 1.55;
  }

  #page-parameters .formula-card__name,
  #page-parameters .lab-subsection__title,
  #page-parameters .decision-card__title,
  #page-parameters .anomaly-case__title,
  #page-parameters .scenario-card__title {
    font-size: 17px;
    line-height: 1.45;
  }

  #page-parameters .formula-card__formula,
  #page-parameters .formula-card__purpose,
  #page-parameters .formula-card__mech,
  #page-parameters .lab-question__explain,
  #page-parameters .anomaly-case__scenario,
  #page-parameters .scenario-card__text,
  #page-parameters .lab-tip__text,
  #page-parameters .mech-card__text {
    font-size: 14px;
    line-height: 1.58;
  }

  #page-parameters .calc-field__label,
  #page-parameters .calc-result__label,
  #page-parameters .decision-metric span {
    font-size: 13.5px;
  }

  #page-parameters .calc-field__input {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 15px;
  }

  #page-parameters .calc-result__card b {
    font-size: 21px;
  }

  #page-parameters .calc-result__note,
  #page-parameters .calc-result__log,
  #page-parameters .lab-feedback,
  #page-parameters .lab-case-feedback {
    font-size: 14px;
    line-height: 1.58;
  }

  #page-parameters .data-note,
  #page-parameters .badge--warning {
    background: #eaf3fd;
    color: #315f8f;
    border-color: #c5daef;
  }

  #page-parameters .data-note {
    padding: 9px 12px;
    font-size: 13.5px;
    line-height: 1.55;
    border: 1px solid #c5daef;
  }

  #page-parameters .lab-tip__title,
  #page-parameters .mech-library__summary {
    font-size: 15px;
  }

  #page-parameters .mech-card__title {
    font-size: 14px;
  }

  #page-parameters .mech-card__tag {
    font-size: 12px;
  }

  /* Module 04: diagnosis center */
  #page-diagnosis .diag-entry {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
  }

  #page-diagnosis .diagnosis-option {
    min-height: 62px;
    padding: 15px 16px;
    border-radius: 14px;
    background: #ffffff;
    border-color: #dce5ef;
    font-size: 15.5px;
    line-height: 1.45;
    box-shadow: 0 5px 16px rgba(13, 47, 80, 0.045);
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease,
      box-shadow 0.18s ease, color 0.18s ease;
  }

  #page-diagnosis .diagnosis-option:hover {
    transform: translateY(-2px);
    border-color: #9fc5eb;
    background: #f7fbff;
    box-shadow: 0 9px 22px rgba(13, 47, 80, 0.09);
  }

  #page-diagnosis .diagnosis-option.is-selected {
    border-color: #2474d2;
    background: #eef6ff;
    color: #195fb5;
    box-shadow: 0 0 0 3px rgba(36, 116, 210, 0.09);
  }

  #page-diagnosis .diagnosis-option__dot {
    width: 10px;
    height: 10px;
  }

  #page-diagnosis .diag-empty,
  #page-diagnosis .dx-panel,
  #page-diagnosis .dx-report,
  #page-diagnosis .dx-evidence__card,
  #page-diagnosis .dx-history__card {
    border-radius: 16px;
    border-color: #dce5ef;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(13, 47, 80, 0.055);
  }

  #page-diagnosis .diag-empty {
    padding: 24px 26px;
  }

  #page-diagnosis .diag-empty__title {
    font-size: 24px;
    line-height: 1.35;
  }

  #page-diagnosis .diag-empty__desc {
    font-size: 15.5px;
    line-height: 1.6;
  }

  #page-diagnosis .diag-empty__card {
    padding: 16px 18px;
    border-radius: 13px;
    background: #f7faff;
  }

  #page-diagnosis .diag-empty__card h4 {
    font-size: 17px;
  }

  #page-diagnosis .diag-empty__card p,
  #page-diagnosis .diag-empty__note {
    font-size: 14px;
    line-height: 1.58;
  }

  #page-diagnosis .diag-progress__label {
    font-size: 13px;
  }

  #page-diagnosis .diag-progress b {
    font-size: 26px;
    color: #2474d2;
  }

  #page-diagnosis .diag-step {
    min-height: 42px;
    padding: 9px 13px;
    font-size: 14px;
    background: #f7faff;
    border-color: #dce5ef;
  }

  #page-diagnosis .diag-step.is-active {
    background: #2474d2;
    border-color: #2474d2;
  }

  #page-diagnosis .diag-step.is-done:not(.is-active) {
    background: #ecf9f6;
    border-color: #a8ddd3;
    color: #0e8074;
  }

  #page-diagnosis .dx-panel,
  #page-diagnosis .dx-report {
    padding: 22px 24px;
  }

  #page-diagnosis .panel-head h3 {
    font-size: 20px;
    line-height: 1.35;
  }

  #page-diagnosis .dx-panel__intro {
    font-size: 15px;
    line-height: 1.62;
  }

  #page-diagnosis .dx-group__title {
    font-size: 17px;
    line-height: 1.45;
  }

  #page-diagnosis .dx-item {
    min-height: 50px;
    padding: 10px 12px;
    border-radius: 11px;
    background: #f7faff;
  }

  #page-diagnosis .dx-item__label {
    font-size: 15px;
    line-height: 1.5;
  }

  #page-diagnosis .dx-option {
    min-height: 39px;
    padding: 9px 13px;
    font-size: 15px;
    background: #ffffff;
    border-color: #d4dfeb;
  }

  #page-diagnosis .dx-option--sm {
    min-height: 35px;
    padding: 7px 11px;
    font-size: 14px;
    color: #526b82;
    background: #ffffff;
    border-color: #d4dfeb;
  }

  #page-diagnosis .dx-option--sm[data-dx-value="ok"].is-selected {
    color: #0e8074;
    background: #e8f7f3;
    border-color: #7fcebf;
  }

  #page-diagnosis .dx-option--sm[data-dx-value="no"].is-selected {
    color: #b54848;
    background: #fceded;
    border-color: #e2a3a3;
  }

  #page-diagnosis .dx-option--sm[data-dx-value="missing"].is-selected {
    color: #9a641c;
    background: #fff5e6;
    border-color: #e8c68f;
  }

  #page-diagnosis .dx-hint,
  #page-diagnosis .dx-result {
    font-size: 14px;
    line-height: 1.58;
  }

  #page-diagnosis .dx-report__block h4 {
    font-size: 17px;
    line-height: 1.45;
  }

  #page-diagnosis .dx-report__block p,
  #page-diagnosis .dx-report-list,
  #page-diagnosis .dx-grade__list {
    font-size: 14.5px;
    line-height: 1.6;
  }

  #page-diagnosis .dx-grade {
    padding: 12px 14px;
    border-radius: 11px;
  }

  #page-diagnosis .dx-grade__tag {
    padding: 4px 9px;
    font-size: 13px;
  }

  #page-diagnosis .dx-evidence__card h4,
  #page-diagnosis .dx-history__card h4 {
    font-size: 15px;
  }

  #page-diagnosis .dx-evidence__card p,
  #page-diagnosis .dx-history__card p,
  #page-diagnosis .dx-history-item summary,
  #page-diagnosis .dx-resume p {
    font-size: 14px;
    line-height: 1.55;
  }

  body:has(#page-diagnosis.page--active) .toast {
    padding: 13px 18px;
    border-radius: 12px;
    font-size: 14.5px;
    line-height: 1.45;
  }

  /* Module 05: case challenge */
  #page-cases .case-overview {
    gap: 14px;
    margin-bottom: 18px;
  }

  #page-cases .case-overview__item {
    min-height: 112px;
    padding: 18px 20px;
    border-radius: 16px;
    border-color: #dce5ef;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(13, 47, 80, 0.05);
  }

  #page-cases .case-overview__item span {
    font-size: 14.5px;
    line-height: 1.5;
  }

  #page-cases .case-overview__item b {
    font-size: clamp(28px, 2vw, 32px);
    line-height: 1.2;
    color: #2474d2;
  }

  #page-cases .case-overview__item:last-child b {
    font-size: 18px;
    line-height: 1.4;
  }

  #page-cases .case-filters {
    gap: 9px;
    margin-bottom: 16px;
  }

  #page-cases .case-filters__label {
    font-size: 14px;
  }

  #page-cases .case-filter {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 13.5px;
  }

  #page-cases .case-filter.is-active {
    background: #2474d2;
    border-color: #2474d2;
  }

  #page-cases .case-grid {
    gap: 16px;
  }

  #page-cases .case-card-v5 {
    min-height: 210px;
    gap: 10px;
    padding: 19px;
    border-radius: 16px;
    background: #ffffff;
    border-color: #dce5ef;
    box-shadow: 0 6px 18px rgba(13, 47, 80, 0.05);
  }

  #page-cases .case-card-v5:hover {
    transform: translateY(-2px);
    border-color: #a9c8e8;
    box-shadow: 0 12px 28px rgba(13, 47, 80, 0.11);
  }

  #page-cases .case-card-v5--featured {
    grid-column: auto;
    border-color: #dce5ef;
  }

  #page-cases .case-level {
    padding: 4px 9px;
    font-size: 12.5px;
  }

  #page-cases .case-theme {
    font-size: 13px;
  }

  #page-cases .case-task {
    padding: 3px 8px;
    font-size: 12px;
  }

  #page-cases .case-card-v5__title {
    font-size: 18px;
    line-height: 1.42;
  }

  #page-cases .case-card-v5__module {
    font-size: 15px;
    line-height: 1.58;
  }

  #page-cases .case-card-v5__meta {
    margin-top: auto;
    padding-top: 10px;
    font-size: 13.5px;
    line-height: 1.45;
  }

  #page-cases .case-footnote {
    font-size: 14px;
    line-height: 1.6;
  }

  #page-cases .case-step {
    min-height: 41px;
    padding: 9px 12px;
    font-size: 14px;
    background: #f7faff;
    border-color: #dce5ef;
  }

  #page-cases .case-step.is-active {
    background: #2474d2;
    border-color: #2474d2;
  }

  #page-cases .case-step.is-done:not(.is-active) {
    background: #ecf9f6;
    border-color: #a8ddd3;
    color: #0e8074;
  }

  #page-cases .case-panel {
    padding: 22px 24px;
    border-radius: 16px;
    border-color: #dce5ef;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(13, 47, 80, 0.055);
  }

  #page-cases .panel-head h3 {
    font-size: 20px;
    line-height: 1.4;
  }

  #page-cases .case-goal,
  #page-cases .case-scenario {
    font-size: 16px;
    line-height: 1.62;
  }

  #page-cases .case-table {
    font-size: 14px;
  }

  #page-cases .case-table th,
  #page-cases .case-table td {
    padding: 10px 12px;
  }

  #page-cases .case-sim-note {
    padding: 9px 12px;
    font-size: 13.5px;
    line-height: 1.5;
  }

  #page-cases .case-hint,
  #page-cases .case-sub__label {
    font-size: 14px;
    line-height: 1.5;
  }

  #page-cases .case-option {
    min-height: 39px;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.45;
  }

  #page-cases .case-score {
    font-size: 30px;
    color: #2474d2;
  }

  #page-cases .case-feedback h4 {
    font-size: 17px;
  }

  #page-cases .case-feedback p,
  #page-cases .case-feedback li {
    font-size: 15px;
    line-height: 1.6;
  }

  #page-cases .case-feedback .case-note,
  #page-cases .case-ability {
    font-size: 14px;
  }

  #page-cases .case-ability b {
    font-size: 16px;
  }
}

@media screen and (max-width: 1180px) {
  #page-diagnosis .diag-entry,
  #page-cases .case-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 640px) {
  #page-parameters .lab-overview__steps,
  #page-diagnosis .diag-entry,
  #page-cases .case-overview {
    grid-template-columns: 1fr;
  }

  #page-knowledge .btn,
  #page-parameters .btn,
  #page-diagnosis .btn,
  #page-cases .btn {
    white-space: normal;
  }
}

/* ========================================
  ProBio-DX V1.0 UI POLISH
  Stage 3: Modules 06–08
  Visual-only enhancement
  ======================================== */

@media screen {
  /* Module 06: learning evaluation */
  #page-evaluation .eval-note,
  #page-evaluation .eval-footnote {
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.58;
  }

  #page-evaluation .eval-overview {
    gap: 14px;
    margin: 18px 0;
  }

  #page-evaluation .eval-card {
    min-height: 136px;
    padding: 19px 20px;
    border-radius: 16px;
    background: #ffffff;
    border-color: #dce5ef;
    box-shadow: 0 7px 20px rgba(13, 47, 80, 0.05);
  }

  #page-evaluation .eval-card__title {
    font-size: 14.5px;
    line-height: 1.45;
  }

  #page-evaluation .eval-card__value {
    font-size: clamp(28px, 2vw, 32px);
    line-height: 1.2;
    color: #2474d2;
  }

  #page-evaluation .eval-card__source {
    font-size: 13.5px;
    line-height: 1.45;
  }

  #page-evaluation .eval-card__bar {
    height: 8px;
    margin-top: auto;
    background: #e8eef5;
  }

  #page-evaluation .eval-scores {
    gap: 14px;
    margin: 10px 0 22px;
  }

  #page-evaluation .eval-score {
    padding: 17px 19px;
    border-radius: 15px;
    background: #f7fbff;
    border-color: #cddff1;
    box-shadow: 0 5px 16px rgba(13, 47, 80, 0.045);
  }

  #page-evaluation .eval-score span {
    font-size: 14.5px;
  }

  #page-evaluation .eval-score b {
    margin-top: 3px;
    font-size: 32px;
    line-height: 1.2;
    color: #2474d2;
  }

  #page-evaluation .eval-section-title {
    margin: 24px 0 7px;
    font-size: 23px;
    line-height: 1.35;
    color: #0d2f50;
  }

  #page-evaluation .eval-source {
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.55;
  }

  #page-evaluation .eval-empty,
  #page-evaluation .eval-sample-note {
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14.5px;
    line-height: 1.58;
  }

  #page-evaluation .eval-ability-layout {
    gap: 22px;
    padding: 20px 22px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #dce5ef;
    box-shadow: 0 7px 20px rgba(13, 47, 80, 0.05);
  }

  #page-evaluation .eval-radar {
    width: 100%;
    max-width: 260px;
    justify-self: center;
  }

  #page-evaluation .ev-radar__label {
    font-size: 13.5px;
  }

  #page-evaluation .ev-ability {
    margin-bottom: 15px;
  }

  #page-evaluation .ev-ability__head {
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.45;
  }

  #page-evaluation .ev-ability__head b {
    font-size: 18px;
    color: #2474d2;
  }

  #page-evaluation .ev-ability__bar {
    height: 10px;
    background: #e8eef5;
  }

  #page-evaluation .ev-ability__meta {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
  }

  #page-evaluation .eval-sw {
    gap: 14px;
    margin-top: 14px;
  }

  #page-evaluation .eval-sw > div {
    padding: 16px 18px;
    border-radius: 14px;
    background: #ffffff;
    border-color: #dce5ef;
    box-shadow: 0 5px 16px rgba(13, 47, 80, 0.045);
  }

  #page-evaluation .eval-sw span {
    font-size: 14px;
  }

  #page-evaluation .eval-sw p {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.6;
  }

  #page-evaluation .eval-rec-list {
    padding: 16px 18px 16px 36px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #dce5ef;
    font-size: 15px;
    line-height: 1.65;
    box-shadow: 0 5px 16px rgba(13, 47, 80, 0.045);
  }

  #page-evaluation .eval-rec-note {
    font-size: 14px;
    line-height: 1.55;
  }

  #page-evaluation .eval-actions {
    gap: 11px;
    margin-top: 18px;
  }

  #page-evaluation .btn {
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 11px;
    font-size: 15px;
    line-height: 1.2;
  }

  #page-evaluation .btn--outline {
    background: #ffffff;
    color: #195fb5;
    border-color: #b8d2ec;
  }

  #page-evaluation .btn--outline:hover {
    background: #eef6ff;
    border-color: #2474d2;
  }

  /* Module 07: learning report, screen only */
  #page-report .report-doc {
    padding: 32px 34px;
    border-radius: 16px;
    background: #ffffff;
    border-color: #dce5ef;
    box-shadow: 0 12px 34px rgba(13, 47, 80, 0.09);
  }

  #page-report .report-head {
    padding-bottom: 17px;
    border-bottom: 1px solid #dce5ef;
  }

  #page-report .report-head h3 {
    margin-bottom: 6px;
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: #0d2f50;
  }

  #page-report .report-head p {
    font-size: 14px;
    line-height: 1.55;
  }

  #page-report .report-head p:first-of-type {
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: 600;
    color: #365b7e;
  }

  #page-report .report-actions {
    margin: 16px 0 18px;
  }

  #page-report .btn {
    min-height: 46px;
    padding: 12px 20px;
    border-radius: 11px;
    font-size: 15px;
    line-height: 1.2;
  }

  #page-report .btn--primary {
    background: #2474d2;
    box-shadow: 0 7px 18px rgba(36, 116, 210, 0.2);
  }

  #page-report .btn--primary:hover {
    background: #195fb5;
    box-shadow: 0 10px 22px rgba(36, 116, 210, 0.24);
  }

  #page-report .report-sec {
    padding: 22px 0;
    border-top-color: #dce5ef;
  }

  #page-report .report-sec h4 {
    margin-bottom: 13px;
    font-size: 23px;
    line-height: 1.35;
    color: #0d2f50;
  }

  #page-report .report-overview {
    gap: 13px;
  }

  #page-report .report-overview__card {
    min-height: 102px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #f7fbff;
    border-color: #d2e2f2;
  }

  #page-report .report-overview__card span {
    font-size: 14px;
    line-height: 1.45;
  }

  #page-report .report-overview__card b {
    display: block;
    margin-top: 6px;
    font-size: 28px;
    line-height: 1.2;
    color: #2474d2;
  }

  #page-report .report-ability {
    margin-bottom: 15px;
  }

  #page-report .report-ability__head {
    font-size: 15px;
    line-height: 1.45;
  }

  #page-report .report-ability__head b {
    font-size: 18px;
    color: #2474d2;
  }

  #page-report .report-ability__bar {
    height: 10px;
    margin-top: 7px;
    background: #e8eef5;
  }

  #page-report .report-ability__meta {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
  }

  #page-report .report-sec > p,
  #page-report .report-list {
    font-size: 15.5px;
    line-height: 1.62;
  }

  #page-report .report-list {
    padding-left: 21px;
  }

  #page-report .report-empty {
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14.5px;
    line-height: 1.58;
  }

  #page-report .report-tie-note {
    font-size: 14px;
    line-height: 1.55;
  }

  #page-report .report-sec--note {
    margin-top: 8px;
    padding: 18px;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    background: #f7faff;
  }

  #page-report .report-sec--note h4 {
    font-size: 20px;
  }

  /* Module 08: usage guide */
  #page-help .guide-list {
    max-width: 1080px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  #page-help .guide-list li {
    min-height: 116px;
    gap: 18px;
    padding: 21px 22px;
    border-radius: 16px;
    background: #ffffff;
    border-color: #dce5ef;
    box-shadow: 0 7px 20px rgba(13, 47, 80, 0.05);
  }

  #page-help .guide-list li:last-child {
    grid-column: 1 / -1;
    min-height: 104px;
  }

  #page-help .guide-list__num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e8f1fb;
    color: #2474d2;
    border: 1px solid #c9dff3;
    font-size: 15px;
  }

  #page-help .guide-list h3 {
    margin-bottom: 7px;
    font-size: 20px;
    line-height: 1.4;
    color: #0d2f50;
  }

  #page-help .guide-list p {
    font-size: 15.5px;
    line-height: 1.62;
    color: #5d7288;
  }
}

@media screen and (max-width: 700px) {
  #page-help .guide-list {
    grid-template-columns: 1fr;
  }

  #page-help .guide-list li:last-child {
    grid-column: auto;
  }

  #page-evaluation .eval-scores {
    flex-direction: column;
  }

  #page-report .report-doc {
    padding: 24px 20px;
  }
}

/* --------------------------------------------------------------------------
   About ProBio-DX · Competition Edition
   -------------------------------------------------------------------------- */
@media screen {
  .about-trigger {
    align-self: flex-start;
    color: #b9cee3;
    font-size: 11.5px;
    line-height: 1.4;
    text-decoration: underline;
    text-decoration-color: rgba(185, 206, 227, 0.5);
    text-underline-offset: 3px;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
  }

  .about-trigger:hover,
  .about-trigger:focus-visible {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.88);
  }

  .about-modal[hidden] {
    display: none;
  }

  .about-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(7, 27, 47, 0.56);
    backdrop-filter: blur(4px);
  }

  .about-modal__dialog {
    position: relative;
    width: min(520px, calc(100vw - 48px));
    padding: 32px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-card);
    box-shadow: 0 24px 64px rgba(8, 34, 59, 0.25);
  }

  .about-modal__dialog::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--color-blue), var(--color-teal));
  }

  .about-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--color-muted);
    background: var(--color-blue-soft);
    font-size: 22px;
    line-height: 1;
    transition: color 0.18s ease, background-color 0.18s ease;
  }

  .about-modal__close:hover,
  .about-modal__close:focus-visible {
    color: var(--color-navy);
    background: #dceafa;
  }

  .about-modal__title {
    margin: 0 48px 6px 0;
    color: var(--color-navy);
    font-size: 30px;
    line-height: 1.2;
  }

  .about-modal__subtitle {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.65;
  }

  .about-modal__meta {
    margin: 24px 0 0;
    padding: 18px 0;
    display: grid;
    gap: 11px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .about-modal__meta div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
  }

  .about-modal__meta dt {
    color: var(--color-muted);
    font-size: 13px;
  }

  .about-modal__meta dd {
    margin: 0;
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .about-modal__footer {
    margin-top: 18px;
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.7;
  }

  .about-modal__footer p {
    margin: 0;
  }

  .about-modal__footer p + p {
    margin-top: 8px;
  }

  .about-modal__footer span {
    color: var(--color-text);
    font-weight: 650;
  }

  @media (max-width: 980px) {
    .sidebar__footer {
      flex-wrap: wrap;
    }

    .about-trigger {
      margin-left: auto;
    }
  }

  @media (max-width: 520px) {
    .about-modal {
      padding: 16px;
    }

    .about-modal__dialog {
      width: 100%;
      padding: 28px 22px 24px;
    }

    .about-modal__title {
      font-size: 26px;
    }
  }
}

@media print {
  .about-trigger,
  .about-modal {
    display: none !important;
  }
}