/* ==========================================================================
   绿石 NLS 检测台 · 本地模拟 —— 设计系统「静水临床」
   零外部依赖：无字体/图标/CDN，图标由 index.html 内联 SVG 提供。
   组织：令牌 → 基础 → 布局 → 组件（卡片/按钮/表单/chip/徽章）→
         历史卡 → 空态插画 → 骨架屏 → 过渡态 → toast → 工具类 → 打印 →
         报告页（S4：头卡/指纹卡、排行横条、器官网格、疾病倾向、页脚、操作条）
         → 18 报告页 V1.1/V1.2 追加结构 → 19 AI 综合分析卡（V1.8-C）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌（全部变量集中在 :root，S4 报告页复用同一套）
   -------------------------------------------------------------------------- */
:root {
  /* —— 色彩 —— */
  --c-bg: #F6F8F7;            /* 页面底：浅暖灰绿 */
  --c-surface: #FFFFFF;       /* 卡片面 */
  --c-surface-sunken: #F0F4F2; /* 沉降面（分段控件底、悬浮态） */
  --c-border: #E4EAE7;        /* 卡片边 */
  --c-border-strong: #C9D6CF; /* 控件边（输入/分段） */
  --c-primary: #0E5E52;       /* 主色：青墨 */
  --c-primary-hover: #0B4E44;
  --c-primary-active: #09423A;
  --c-accent: #14A08B;        /* 强调 */
  --c-accent-soft: rgba(20, 160, 139, 0.12);
  --c-ring: rgba(20, 160, 139, 0.35);   /* focus 光环 */
  --c-text: #17211D;          /* 正文 */
  --c-text-2: #5C6B65;        /* 次级文字 */
  --c-text-3: #7E8C86;        /* 三级文字（占位/装饰性） */
  --c-danger: #D64545;        /* 错误（边框/图形，规格色） */
  --c-danger-ink: #C13D3D;    /* 错误行内文字（加深保证 ≥4.5:1） */
  --c-danger-soft: rgba(214, 69, 69, 0.10);
  --c-ink-panel: #1E2B26;     /* toast 深墨面板 */
  /* 六档色（与引擎 PointLevel 一致，L1..L6） */
  --level-1: #2E9E5B;
  --level-2: #E8B931;
  --level-3: #3E7BC4;
  --level-4: #D64545;
  --level-5: #5B4FBF;
  --level-6: #8E4FA8;
  /* AI 风险级别徽章墨色（V1.8-C）：对应六档色系加深到正文对比 ≥4.5:1
     的文字色（推导口径同 --c-danger-ink；红档与 --c-danger 同值同源
     = --level-4 系，黄/蓝为新推导，仅供徽章文字使用） */
  --risk-high-ink: var(--c-danger-ink);  /* 较高=红系 */
  --risk-mid-ink: #8C6D10;               /* 中等=黄系（--level-2 加深） */
  --risk-watch-ink: #2D5C99;             /* 关注=蓝系（--level-3 加深） */

  /* —— 圆角 —— */
  --r-card: 14px;
  --r-ctrl: 10px;   /* 输入/按钮/分段 */
  --r-chip: 999px;
  --r-sm: 6px;

  /* —— 阴影 —— */
  --shadow-1: 0 1px 3px rgba(16, 42, 34, 0.06);
  --shadow-2: 0 6px 20px rgba(16, 42, 34, 0.12);

  /* —— 间距（4px 基） —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* —— 字号 —— */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;

  /* —— 字体 —— */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
    "Courier New", monospace;

  /* —— 布局 —— */
  --topbar-h: 56px;
  --side-w: 320px;

  /* —— 动效 —— */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: 1.6;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

/* 数字统一 tabular（报告数值/seed/时间对齐） */
.tnum,
input[type="number"],
input[type="date"],
.mono {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

::selection {
  background: rgba(20, 160, 139, 0.24);
}

/* 统一 focus-visible 可达性光环（键盘可见焦点） */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

input:focus-visible + .seg-text {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. 布局：顶栏 + 双栏主区（≥1024 双栏；<1024 单栏居中，含 <768 手机预演）
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--topbar-h);
  padding: 0 var(--sp-5);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.topbar-brand .brand-mark {
  flex: none;
}

.topbar-brand .brand-sub {
  color: var(--c-text-2);
  font-size: var(--fs-13);
  font-weight: 400;
  white-space: nowrap;
}

.topbar-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.layout {
  display: block;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-8);
}

.layout-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

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

@media (min-width: 1024px) {
  .layout {
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    gap: var(--sp-5);
    max-width: 1200px;
    align-items: start;
  }

  .layout-main {
    position: sticky;
    top: calc(var(--topbar-h) + var(--sp-5));
    min-height: calc(100vh - var(--topbar-h) - var(--sp-8) - var(--sp-5));
  }
}

/* 手机（<768px）：顶栏收纳，消除 375px 视口横向溢出。
   引擎版本串（如 emerald-delphi-compatible-engine-1.6.0）远超手机宽度，
   整枚 chip 隐藏（版本仍见报告页脚），数据核 hash chip 保留以示数据就位；
   品牌副标一并收起，保持顶栏单行 56px 不换行（toast 定位不受影响）。 */
@media (max-width: 767.98px) {
  .topbar {
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
  }

  .topbar-brand .brand-sub {
    display: none;
  }

  .topbar-meta #chip-engine {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   4. 卡片
   -------------------------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  padding: var(--sp-5);
}

.card-title {
  font-size: var(--fs-16);
  color: var(--c-text);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.card-head-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   5. 按钮
   -------------------------------------------------------------------------- */
.btn {
  position: relative; /* 供 loading 旋转环绝对居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-ctrl);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
}

.btn-primary {
  background: var(--c-primary);
  color: #fff;
}

.btn-primary:not(:disabled):hover {
  background: var(--c-primary-hover);
}

.btn-primary:not(:disabled):active {
  background: var(--c-primary-active);
  transform: translateY(1px);
}

.btn-ghost {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-border-strong);
}

.btn-ghost:not(:disabled):hover {
  background: var(--c-surface-sunken);
}

.btn-ghost:not(:disabled):active {
  background: var(--c-border);
  transform: translateY(1px);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 5px var(--sp-3);
  font-size: var(--fs-13);
  border-radius: var(--r-sm);
}

.btn-icon {
  padding: 6px;
  border-radius: var(--r-sm);
}

.btn.is-loading {
  pointer-events: none;
}

.btn.is-loading .btn-label {
  visibility: hidden;
}

/* 旋转加载环：隐藏文字，环在按钮内绝对居中 */
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn-ghost.is-loading::after {
  border-color: rgba(14, 94, 82, 0.25);
  border-top-color: var(--c-primary);
}

/* 内联加载（V1.1 T4 全量扫描）：文字保留、旋转环改排文字右侧，
   覆盖默认「藏字只留环」——长耗时任务需要文字给出范围与预期 */
.btn.is-loading.is-loading-inline .btn-label {
  visibility: visible;
}

.btn.is-loading.is-loading-inline::after {
  position: static;
  flex: none;
  margin-left: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   6. 表单：字段 / 输入 / 分段控件 / 复选 / 日期
   -------------------------------------------------------------------------- */
.form-card fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.form-card legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-card .btn-block {
  margin-top: var(--sp-5);
}

/* 全量范围提示（V1.1 T4）：按钮旁的耗时预告，仅选「全量」时出现 */
.form-card .scope-hint {
  margin: var(--sp-4) 0 calc(-1 * var(--sp-2));
  color: var(--c-primary);
  text-align: center;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.label {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--c-text-2);
}

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.input {
  width: 100%;
  height: 38px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-ctrl);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.input::placeholder {
  color: var(--c-text-3);
}

.input:hover:not(:disabled) {
  border-color: var(--c-primary);
}

.input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-ring);
}

.input:disabled {
  background: var(--c-surface-sunken);
  color: var(--c-text-3);
  cursor: not-allowed;
}

.input.is-invalid {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
}

.input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.18);
}

/* 数字输入：去原生步进钮，mono 展示 */
.input-mono {
  font-family: var(--font-mono);
  appearance: textfield;
  -moz-appearance: textfield;
}

.input-mono::-webkit-outer-spin-button,
.input-mono::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 日期输入：浅色日历面板 + 可点指示器 */
input[type="date"] {
  color-scheme: light;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* 锚点 chip 快捷填入后的呼吸高亮 */
.input.flash {
  animation: input-flash 0.9s var(--ease);
}

@keyframes input-flash {
  0%,
  100% {
    box-shadow: none;
  }
  30% {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-ring);
  }
}

/* 错误行内红字 / 提示灰字 */
.error-text {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--c-danger-ink);
  font-size: var(--fs-12);
  line-height: 1.5;
}

.error-text::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-danger);
}

.hint-text {
  color: var(--c-text-2);
  font-size: var(--fs-12);
  line-height: 1.5;
}

/* 分段控件（radio 实现：原生 input 保留可聚焦，视觉隐藏）。
   flex-wrap（V1.7）：血型五项在极窄屏放不下时整组换行，不再无限压缩；
   性别/范围两组恒单行（2×44px 阈值远低于任何实际卡宽）。 */
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-ctrl);
  background: var(--c-surface-sunken);
}

.seg {
  flex: 1 1 44px;
  min-width: 44px;
}

.seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.seg-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--c-text-2);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.seg:hover .seg-text {
  color: var(--c-text);
}

.seg input:checked + .seg-text {
  background: var(--c-surface);
  color: var(--c-primary);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}

.seg input:disabled + .seg-text {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 「随机」开关：原生 checkbox 走 accent-color（可访问、零 JS 样式同步） */
.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--c-text-2);
  cursor: pointer;
  user-select: none;
}

.check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--c-accent);
  cursor: pointer;
}

.check input:disabled {
  cursor: not-allowed;
}

/* 独占一行的复选（V1.1 T4 全量病理开关）：主文语气 */
.check-lg {
  font-size: var(--fs-14);
  color: var(--c-text);
}

/* 种子行：输入 + 锚点 chip */
.seed-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.seed-row .input {
  flex: 1;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   7. chip 与徽章
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-chip);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

/* 顶栏元信息 chip（引擎版本 / 数据核 SHA） */
.chip-meta {
  min-height: 26px;
}

.chip-meta .chip-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--level-1);
  transition: background-color var(--dur) var(--ease);
}

.chip-meta.is-offline .chip-dot {
  background: var(--c-danger);
}

.chip-meta.is-offline {
  color: var(--c-danger-ink);
  border-color: rgba(214, 69, 69, 0.4);
}

/* 可点击动作 chip（锚点） */
.chip-action {
  flex: none;
  border: 1px solid transparent;
  background: var(--c-accent-soft);
  color: var(--c-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-12);
  font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.chip-action:not(:disabled):hover {
  background: rgba(20, 160, 139, 0.22);
}

.chip-action:not(:disabled):active {
  transform: translateY(1px);
}

.chip-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* nq 徽章：六档色底白字（S4 报告页使用，样式在本阶段就位） */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-sm);
  color: #fff;
  font-size: var(--fs-12);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. 六档色工具类（文字色 / 底色，供 S3/S4 模板复用）
   -------------------------------------------------------------------------- */
.text-l1 { color: var(--level-1); }
.text-l2 { color: var(--level-2); }
.text-l3 { color: var(--level-3); }
.text-l4 { color: var(--level-4); }
.text-l5 { color: var(--level-5); }
.text-l6 { color: var(--level-6); }

.bg-l1 { background-color: var(--level-1); }
.bg-l2 { background-color: var(--level-2); }
.bg-l3 { background-color: var(--level-3); }
.bg-l4 { background-color: var(--level-4); }
.bg-l5 { background-color: var(--level-5); }
.bg-l6 { background-color: var(--level-6); }

.badge-l1 { background-color: var(--level-1); }
.badge-l2 { background-color: var(--level-2); }
.badge-l3 { background-color: var(--level-3); }
.badge-l4 { background-color: var(--level-4); }
.badge-l5 { background-color: var(--level-5); }
.badge-l6 { background-color: var(--level-6); }

/* --------------------------------------------------------------------------
   9. 历史记录卡
   -------------------------------------------------------------------------- */
.history-count {
  color: var(--c-text-3);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 calc(var(--sp-1) * -1);
}

.history-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--sp-2) var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.history-item:hover {
  background: var(--c-surface-sunken);
}

.history-item:active {
  background: var(--c-border);
}

.history-item:disabled {
  cursor: wait;
  opacity: 0.6;
}

.history-item .hi-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 0;
}

.history-item .hi-name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--c-text);
}

.history-item .hi-name .mono {
  flex: none;
  color: var(--c-text-2);
  font-size: var(--fs-11);
}

.history-item .hi-time {
  color: var(--c-text-3);
  font-size: var(--fs-11);
  font-variant-numeric: tabular-nums;
}

/* 范围标记（V1.1 T4）：演示为三级文字，全量用主色加粗突出 */
.hi-scope {
  color: var(--c-text-3);
}

.hi-scope.is-full {
  color: var(--c-primary);
  font-weight: 600;
}

.history-empty {
  padding: var(--sp-4) 0;
  color: var(--c-text-3);
  font-size: var(--fs-13);
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. 结果区：空态插画（纯 CSS 六档色同心圆环）+ 三步引导
   -------------------------------------------------------------------------- */
.pane-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
}

/* 同心圆环：六档色各占一环，由外(L1)向内(L6)收拢，中心墨点 */
.empty-art {
  position: relative;
  width: 168px;
  height: 168px;
  animation: art-breathe 5s ease-in-out infinite;
}

.empty-art .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.empty-art .ring-1 { border: 2px solid rgba(46, 158, 91, 0.55); }
.empty-art .ring-2 { inset: 14px; border: 3px solid rgba(232, 185, 49, 0.7); }
.empty-art .ring-3 { inset: 28px; border: 3px solid rgba(62, 123, 196, 0.7); }
.empty-art .ring-4 { inset: 42px; border: 3px solid rgba(214, 69, 69, 0.7); }
.empty-art .ring-5 { inset: 56px; border: 3px solid rgba(91, 79, 191, 0.7); }
.empty-art .ring-6 { inset: 70px; border: 3px solid rgba(142, 79, 168, 0.7); }
.empty-art .ring-core {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 6px var(--c-accent-soft);
}

@keyframes art-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

.empty-title {
  font-size: var(--fs-18);
}

.empty-sub {
  max-width: 360px;
  color: var(--c-text-2);
  font-size: var(--fs-13);
}

.empty-steps {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  text-align: left;
}

.empty-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 128px;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-ctrl);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.empty-step .step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: var(--fs-12);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.empty-step b {
  font-size: var(--fs-13);
}

.empty-step span {
  color: var(--c-text-2);
  font-size: var(--fs-12);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   11. 骨架屏（报告渲染前；S4 复用同一样式族）
   -------------------------------------------------------------------------- */
.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, #edf1ee 25%, #e2e9e5 45%, #edf1ee 65%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.pane-loading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.loading-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--c-text-2);
  font-size: var(--fs-13);
}

.loading-note::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--c-border-strong);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* 报告骨架（结构预演：头卡 → 键值条 → 横条组 → 器官卡网格） */
.report-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.sk-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 56px;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}

.sk-head .skeleton:last-child {
  margin-left: auto;
}

.sk-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}

.sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.sk-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  height: 150px;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}

/* --------------------------------------------------------------------------
   12. 报告容器与键值清单（S3 过渡卡已由 S4 report.js 完整渲染取代；
       .kv-list 仍被 S4 复现指纹卡复用）
   -------------------------------------------------------------------------- */
.report-root {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* 键值清单：复现指纹等 */
.kv-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin: 0;
}

.kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-ctrl);
  background: var(--c-surface-sunken);
}

.kv dt {
  color: var(--c-text-2);
  font-size: var(--fs-12);
}

.kv dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text);
  font-size: var(--fs-14);
  font-weight: 600;
}

/* 错误态容器（报告载入失败等） */
.pane-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
}

.pane-error .err-icon {
  color: var(--c-danger);
}

.pane-error h2 {
  font-size: var(--fs-16);
}

.pane-error p {
  max-width: 380px;
  color: var(--c-text-2);
  font-size: var(--fs-13);
}

/* --------------------------------------------------------------------------
   13. toast（右上滑入，3s 自动消退）
   -------------------------------------------------------------------------- */
.toast-host {
  position: fixed;
  top: calc(var(--topbar-h) + var(--sp-3));
  right: var(--sp-4);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(360px, calc(100vw - var(--sp-6)));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-ctrl);
  background: var(--c-ink-panel);
  color: #F2F6F4;
  font-size: var(--fs-13);
  line-height: 1.5;
  box-shadow: var(--shadow-2);
  animation: toast-in var(--dur) var(--ease);
}

.toast.is-leaving {
  animation: toast-out 0.25s var(--ease) forwards;
}

.toast-error { border-left-color: var(--level-4); }
.toast-success { border-left-color: var(--level-1); }

@keyframes toast-in {
  from {
    transform: translateX(16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-out {
  to {
    transform: translateX(16px);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   14. 工具类
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   15. 打印：隐藏左栏与顶栏元信息（操作条），纸面只留结果
   -------------------------------------------------------------------------- */
@media print {
  .no-print,
  .topbar-meta,
  .layout-side,
  .toast-host,
  .rp-toolbar,
  .rp-more-wrap {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .topbar {
    position: static;
    border-bottom: none;
  }

  .layout {
    display: block;
    max-width: none;
    padding: 0;
  }

  .card {
    box-shadow: none;
    break-inside: avoid;
  }

  /* 全量病理表：纸面放开滚动裁剪（已渲染多少行打多少行）；
     病名按钮按纯文本呈现（内容必须留在纸面上） */
  .rp-fp-wrap {
    overflow: visible;
    max-height: none;
  }

  .rp-fp-name {
    color: inherit;
    text-decoration: none;
  }

  /* AI 综合分析卡（V1.8-C）：pending 骨架屏不打到纸上，只留说明行；
     已 ready 的 AI 卡片随报告整体照印 */
  .rp-ai .skeleton {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   16. 动效偏好：减少动画
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   17. 报告页（S4）：复用 1-14 的令牌与组件，追加报告专属结构。
       生成侧见 assets/report.js（renderReport）。
   -------------------------------------------------------------------------- */
.rp {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* —— 17.1 头部两卡：受检档案 + 复现指纹 —— */
.rp-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 880px) {
  .rp-head {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: stretch;
  }
}

.rp-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.rp-name {
  font-size: var(--fs-22);
  letter-spacing: 0.01em;
}

.rp-idchip {
  color: var(--c-text-2);
  font-size: var(--fs-11);
}

.rp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin: var(--sp-3) 0 0;
}

.rp-meta-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.rp-meta-item dt {
  color: var(--c-text-2);
  font-size: var(--fs-12);
}

.rp-meta-item dd {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 500;
}

.rp-meta-item dd b {
  font-size: var(--fs-16);
  font-weight: 600;
}

/* 年龄旁的档位键 chip（age_record_key） */
.rp-agechip {
  padding: 1px 8px;
  border-color: transparent;
  background: var(--c-accent-soft);
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}

/* 指纹卡窄栏：键值单列纵排 */
.rp-card-fp .kv-list {
  grid-template-columns: 1fr;
}

.rp-fp-note {
  margin-top: var(--sp-3);
  color: var(--c-text-3);
  font-size: var(--fs-11);
  line-height: 1.6;
  word-break: break-all;
}

/* —— 17.2 区块标题附属说明 —— */
.rp-sub {
  color: var(--c-text-3);
  font-size: var(--fs-12);
  white-space: nowrap;
}

/* —— 17.3 系统排行横条图（attention 0-100，首名主色其余浅色） —— */
.rp-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rp-bar-row {
  display: grid;
  grid-template-columns: 18px 7em minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--sp-2);
}

.rp-bar-rank {
  color: var(--c-text-3);
  font-size: var(--fs-12);
  text-align: right;
}

.rp-bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-13);
  font-weight: 500;
}

.rp-bar-row.is-top .rp-bar-name {
  color: var(--c-primary);
  font-weight: 600;
}

.rp-bar-track {
  height: 14px;
  border-radius: var(--r-chip);
  background: var(--c-surface-sunken);
  overflow: hidden;
}

.rp-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #b9d9d1; /* 浅色（其余名次） */
  transition: width var(--dur) var(--ease);
}

.rp-bar-row.is-top .rp-bar-fill {
  background: var(--c-primary); /* 首名主色 */
}

.rp-bar-val {
  text-align: right;
  font-weight: 600;
  font-size: var(--fs-13);
}

/* —— 17.4 器官卡网格 —— */
.rp-organs .rp-sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.rp-sec-title {
  font-size: var(--fs-16);
}

.rp-organ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.rp-organ {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.rp-organ:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.rp-organ-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

.rp-organ-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.rp-organ-name {
  font-size: var(--fs-16);
}

/* 系统 / 来源器官 tag */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-chip);
  background: var(--c-surface-sunken);
  color: var(--c-text-2);
  font-size: var(--fs-11);
  line-height: 1.7;
  white-space: nowrap;
}

/* 出现次数徽章 ×N（V1.5，UL-031）：挂 .tag 基样之上的轻量强调——
   match_count = 同名条目贡献器官合计，名称后随行（倾向列表 /
   病理全量表 / 扩展分节表三处共用；旧报告无 match_count 键不渲染） */
.match-count {
  background: rgba(14, 94, 82, 0.10);
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}

.rp-organ-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* NSPIN 大数字 */
.rp-nspin {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.rp-nspin-val {
  font-size: var(--fs-22);
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.1;
}

.rp-nspin-label {
  color: var(--c-text-3);
  font-size: var(--fs-11);
  letter-spacing: 0.08em;
}

/* 2×9 积分图热力条（N/S 两行；格子颜色由 report.js 内联插值） */
.rp-heat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}

.rp-heat-row {
  display: grid;
  grid-template-columns: 12px repeat(9, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}

.rp-heat-tag {
  color: var(--c-text-3);
  font-size: var(--fs-11);
  font-weight: 600;
  text-align: center;
}

.rp-cell {
  display: block;
  height: 15px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(16, 42, 34, 0.05);
}

/* 1-6 档位直方 mini-bar */
.rp-hist-bars {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 38px;
}

.rp-hist-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}

.rp-hist-bar {
  display: block;
  width: 100%;
  border-radius: 2px 2px 0 0;
  background: var(--c-border-strong);
}

.rp-hist-lab {
  text-align: center;
  color: var(--c-text-3);
  font-size: 10px;
  line-height: 1;
}

/* 点位明细（<details> 展开克制无动效） */
.rp-points summary {
  cursor: pointer;
  color: var(--c-primary);
  font-size: var(--fs-12);
  font-weight: 600;
  user-select: none;
}

.rp-points summary:hover {
  color: var(--c-primary-hover);
}

.rp-points[open] summary {
  margin-bottom: var(--sp-2);
}

.rp-pts {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-12);
}

.rp-pts th {
  padding: 3px 6px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-3);
  font-weight: 500;
  text-align: right;
}

.rp-pts td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--c-border);
  text-align: right;
}

.rp-pts th:first-child,
.rp-pts td:first-child {
  text-align: left;
}

.rp-pts tr:last-child td {
  border-bottom: none;
}

.rp-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--c-border-strong);
}

/* —— 17.5 疾病倾向卡 —— */
.rp-dis-list {
  display: flex;
  flex-direction: column;
}

.rp-dis {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
}

.rp-dis:first-child {
  padding-top: 0;
}

.rp-dis:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rp-dis-rank {
  flex: none;
  background: var(--c-primary);
}

.rp-dis-main {
  flex: 1;
  min-width: 0;
}

.rp-dis-line {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: 0;
}

.rp-dis-name {
  font-size: var(--fs-14);
}

.rp-dis-reason {
  margin: 3px 0 0;
  color: var(--c-text-2);
  font-size: var(--fs-12);
  line-height: 1.6;
}

.rp-dis-disp {
  flex: none;
  font-size: var(--fs-13);
  font-weight: 600;
}

/* —— 17.6 页脚（沉降面区分正文卡） —— */
.rp-footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--c-surface-sunken);
}

.rp-disclaimer {
  color: var(--c-text-2);
  font-size: var(--fs-12);
  line-height: 1.7;
}

.rp-foot-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  color: var(--c-text-3);
  font-size: var(--fs-11);
}

/* —— 17.7 操作条 —— */
.rp-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.rp-actions-msg {
  color: var(--c-text-2);
  font-size: var(--fs-12);
}

.rp-actions-msg.is-error {
  color: var(--c-danger-ink);
}

/* —— 17.8 空态 / 错误态 —— */
.rp-empty {
  padding: var(--sp-2) 0;
  color: var(--c-text-3);
  font-size: var(--fs-13);
  text-align: center;
}

.rp-error p {
  max-width: 380px;
}

/* --------------------------------------------------------------------------
   18. 报告页 V1.1 T4：scope 徽章 / 器官工具条 / 显示更多 /
       全量病理表 / 惰性点位。DEMO 路径不经过这些类。
   -------------------------------------------------------------------------- */

/* —— 18.1 报告头 scope 徽章（demo 默认 chip；FULL 用强调底） —— */
.rp-scopechip {
  font-weight: 600;
}

.rp-scopechip.is-full {
  border-color: transparent;
  background: var(--c-accent-soft);
  color: var(--c-primary);
}

/* —— 18.2 器官明细工具条：搜索（防抖 300ms）+ 系统下拉 + 结果计数 —— */
.rp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-ctrl);
  background: var(--c-surface-sunken);
}

.rp-toolbar-field {
  min-width: 0;
}

.rp-toolbar-search {
  flex: 1 1 150px;
}

.rp-toolbar-field .input {
  height: 34px;
}

.rp-toolbar-count {
  flex: none;
  margin-left: auto;
  color: var(--c-text-2);
  font-size: var(--fs-12);
}

@media (max-width: 767.98px) {
  .rp-toolbar-count {
    margin-left: 0;
    width: 100%;
  }
}

/* —— 18.3 「显示更多」按钮（器官网格 / 全量病理表共用） —— */
.rp-more-wrap {
  display: flex;
  justify-content: center;
  margin: var(--sp-4) 0 0;
}

/* —— 18.4 全量病理表：粘性表头 + 行内展开贡献器官 —— */
.rp-dis-head-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.rp-fp-wrap {
  overflow: auto;
  max-height: 560px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}

.rp-fp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}

.rp-fp-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 12px;
  border-bottom: 1px solid var(--c-border-strong);
  background: var(--c-surface-sunken);
  color: var(--c-text-2);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.rp-fp-table th:nth-child(2) {
  text-align: left;
}

.rp-fp-table td {
  padding: 5px 12px;
  border-bottom: 1px solid var(--c-border);
  text-align: right;
  white-space: nowrap;
}

.rp-fp-table td:nth-child(2) {
  text-align: left;
  white-space: normal;
  min-width: 8em;
}

.rp-fp-row {
  transition: background-color var(--dur-fast) var(--ease);
}

.rp-fp-row:hover {
  background: var(--c-surface-sunken);
}

.rp-fp-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-primary);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.rp-fp-name:hover {
  color: var(--c-primary-hover);
  text-decoration: underline;
}

.rp-fp-name:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.rp-fp-latin {
  margin-left: 6px;
  color: var(--c-text-3);
  font-size: var(--fs-11);
}

.rp-fp-disp {
  font-weight: 600;
}

.rp-fp-detail > td {
  background: var(--c-surface-sunken);
}

.rp-fp-organs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--sp-3);
}

.rp-fp-organ {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rp-fp-organ-disp {
  color: var(--c-text-2);
  font-size: var(--fs-11);
}

.rp-fp-organ-more {
  width: 100%;
  color: var(--c-text-3);
  font-size: var(--fs-12);
}

/* —— 18.5 扩展匹配分节（V1.2 U2）：疾病倾向之后的三类目独立匹配卡 —— */
.rp-ext {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* 分节卡 <details>：summary 即卡头（flex 布局会吸收原生三角，改自备提示词） */
.rp-ext-item {
  padding: var(--sp-4) var(--sp-5);
}

.rp-ext-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
}

.rp-ext-summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.rp-ext-item[open] > .rp-ext-summary {
  margin-bottom: var(--sp-3);
}

.rp-ext-title {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--c-text);
  min-width: 0;
}

.rp-ext-count {
  flex: none;
  color: var(--c-text-2);
  font-size: var(--fs-11);
}

.rp-ext-cue {
  margin-left: auto;
  flex: none;
  color: var(--c-text-3);
  font-size: var(--fs-12);
}

/* 类目色点：六档色体系内取色（微生物=蓝 --level-3 / 过敏原=黄
   --level-2 / 生化=绿 --level-1）；未知类目退 .rp-dot 默认灰 */
.rp-ext-dot {
  flex: none;
  width: 10px;
  height: 10px;
}

.rp-ext-dot.cat-8 {
  background: var(--level-3);
}

.rp-ext-dot.cat-22 {
  background: var(--level-2);
}

.rp-ext-dot.cat-6 {
  background: var(--level-1);
}

/* 卡体：切换条（显示全部 N 条 + 副标）与 top 列表 / 全表视图 */
.rp-ext-togglebar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.rp-ext-empty {
  margin: 0;
}

/* 无关联类目脚注（读 extended_sections_meta 生成） */
.rp-ext-note {
  margin: 0;
  padding: 0 2px;
  color: var(--c-text-3);
  font-size: var(--fs-12);
}

/* V1.3 部位功能性代偿分节色点：主色青墨 */
.cat-9 { background: var(--primary, #0E5E52); }

/* --------------------------------------------------------------------------
   19. AI 综合分析卡（V1.8-C）：疾病倾向之后、扩展分节之前。
       生成侧见 assets/report.js 区块 5；四态 = pending 骨架屏 /
       ready 徽章+理由+证据+建议 / unavailable 灰提示 / failed+重试。
   -------------------------------------------------------------------------- */

/* 卡体：状态渲染器整体替换 .rp-ai-body 内容 */
.rp-ai-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* —— 19.1 pending：骨架屏 + 说明行（.loading-note 自带旋转环） —— */
.rp-ai-pending {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.rp-ai-note {
  margin-top: var(--sp-1);
}

/* —— 19.2 unavailable / 不支持：沉降面灰提示 —— */
.rp-ai-off {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-ctrl);
  background: var(--c-surface-sunken);
  color: var(--c-text-2);
  font-size: var(--fs-13);
  line-height: 1.7;
}

/* —— 19.3 not_run（生成按钮）与 failed / 超时（错误 + 重试） —— */
.rp-ai-idle,
.rp-ai-failed {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.rp-ai-idle .rp-ai-note {
  flex: 1 1 240px;
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-13);
}

.rp-ai-err {
  flex: 1 1 240px;
  color: var(--c-danger-ink);
  font-size: var(--fs-13);
  line-height: 1.7;
}

/* —— 19.4 ready：徽章行 + 综合理由 + 证据/建议列表 + 小字 + 免责 —— */
.rp-ai-verdict {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.rp-ai-badges {
  display: flex;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  flex-wrap: wrap;
}

.rp-ai-badge-label {
  color: var(--c-text-3);
  font-size: var(--fs-12);
}

/* 风险最高系统徽章：九大系统色系=主色青墨族（与排行首名同源，
   复用 chip 基样 + accent-soft 底 + 主色点） */
.rp-ai-sys {
  border-color: transparent;
  background: var(--c-accent-soft);
  color: var(--c-primary);
  font-weight: 600;
}

.rp-ai-sys-dot {
  background: var(--c-primary);
}

/* 风险级别三档徽章：六档色令牌取色（较高=红 --level-4 / 中等=黄
   --level-2 / 关注=蓝 --level-3）；色点走原令牌，文字走加深墨色
   （--risk-*-ink，白字在黄/蓝档对比不足），底为同族浅染 */
.rp-ai-level {
  --lv: var(--level-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-chip);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-12);
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}

.rp-ai-level-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lv);
}

.rp-ai-level.is-high {
  color: var(--risk-high-ink);
  border-color: rgba(214, 69, 69, 0.45);
  background: var(--c-danger-soft);
  --lv: var(--level-4);
}

.rp-ai-level.is-mid {
  color: var(--risk-mid-ink);
  border-color: rgba(232, 185, 49, 0.55);
  background: rgba(232, 185, 49, 0.13);
  --lv: var(--level-2);
}

.rp-ai-level.is-watch {
  color: var(--risk-watch-ink);
  border-color: rgba(62, 123, 196, 0.45);
  background: rgba(62, 123, 196, 0.10);
  --lv: var(--level-3);
}

.rp-ai-conf b {
  font-weight: 700;
}

.rp-ai-h {
  font-size: var(--fs-13);
  color: var(--c-text-2);
}

.rp-ai-rationale {
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--c-text);
}

.rp-ai-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.rp-ai-list li {
  position: relative;
  padding-left: 15px;
  font-size: var(--fs-13);
  line-height: 1.7;
}

.rp-ai-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-border-strong);
}

.rp-ai-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sp-2);
  color: var(--c-text-3);
  font-size: var(--fs-11);
}

.rp-ai-foot {
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--c-border);
  color: var(--c-text-3);
  font-size: var(--fs-11);
}

/* ---------- 19a. 可能存在的症状（V1.10，UL-037：AI 卡内常驻小区块） ----------
   引擎确定性候选（risk_evidence.symptom_candidates，≤12 条）浅色 chip 常驻
   展示——不依赖 AI 状态（.rp-ai-body 的状态渲染不触碰本区块）；AI 结果含
   possible_symptoms 时命中项 .is-ai-pick 加粗描边高亮。 */
.rp-sym {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--c-border);
}

.rp-sym-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-1);
}

.rp-sym-chip {
  background: var(--c-surface-sunken);
  cursor: default; /* 候选非交互件（展示语义），悬停仅出来源提示 */
}

.rp-sym-chip.is-ai-pick {
  font-weight: 700;
  color: var(--c-primary);
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

.rp-sym-ai {
  margin: var(--sp-2) 0 0;
  color: var(--c-text-2);
  font-size: var(--fs-11);
}

.rp-sym-ai[hidden] { display: none; }

.rp-sym-note {
  margin: var(--sp-1) 0 0;
  color: var(--c-text-3);
  font-size: var(--fs-11);
}