/* ==========================================================================
   客户背景分析智能体 —— 设计系统 + 静态壳样式
   ==========================================================================

   这套令牌来自 `ui-ux-pro-max` 的 `--design-system` 输出（查询关键词：
   "internal enterprise tool report review dashboard professional restrained
   content-first"），命中的是 Minimalism & Swiss Style（干净、留白、网格化，
   面向 enterprise apps / dashboards / professional tools），配色是它给的
   "Navy professional + paid green" 组合：
     primary #1E3A5F / secondary #2563EB / accent #059669 /
     background #F8FAFC / foreground #0F172A / border #E4E7EB / danger #DC2626

   取舍（跟工具原始建议不同的地方，写清楚为什么）：
   1. 工具给的字体是 Fira Code（标题）+ Fira Sans（正文）——两个都是纯拉丁字体，
      不带中文字形。这个界面的核心内容是七八百到一千多字的中文长文报告，
      标题/正文字体选错，中文字符会整段回退到系统默认字体，跟"选了字体"没有
      任何视觉差异，等于白引入一次网络字体请求（还多一次外部依赖、多一次
      FOIT/FOUC 风险）。所以标题和正文统一用系统中文字体栈
      （PingFang SC / Microsoft YaHei / 系统 sans-serif），不引入 Google Fonts。
   2. 风险评级（低/中/高）和状态（已定稿/待复核/分析中）不在工具给的调色板里，
      是按"语义色不能只靠颜色本身表达"的规则另外配的：低风险=成功绿，
      中风险=警示橙，高风险=危险红，都各自留了浅底色，配图标/文字用，不单独
      靠颜色区分（Task 2~4 拼 DOM 时记得带上文字，不要只留一个色块）。
   3. 明确按用户要求砍掉的：渐变背景、毛玻璃（backdrop-filter）、花哨动效。
      过渡时长统一克制在 150~200ms，只用于状态切换的视觉确认，不做装饰性动画；
      所有动画包在 prefers-reduced-motion 判断里。
   4. 不做深色模式——内部工具，一套主题维护面已经够了，未来真要加再补
      `[data-theme="dark"]` 覆盖层，现在没有任何地方引用它。

   结构（自上而下）：
     1. 设计令牌 (:root)
     2. Reset
     3. 基础排版
     4. 布局壳（顶栏 / 容器 / 两栏栅格）
     5. 按钮
     6. 表单（输入/选择/文本域/单选组）
     7. 卡片
     8. 标签 / 状态徽标（含风险等级、定稿状态）
     9. 提示条（分析中的"不要关闭或刷新"这类横幅）
     10. 骨架屏（加载态）
     11. Toast
     12. 空状态 / 分页（历史列表用）
     13. Markdown 长文正文排版
     14. 工具类
     15. 响应式总控
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. 设计令牌
   ------------------------------------------------------------------------- */
:root {
  /* 色板：来自 ui-ux-pro-max design-system 输出，见文件头注释 */
  --color-primary: #1E3A5F;
  --color-primary-hover: #16293F;
  --color-primary-soft: #E7EDF4;
  --color-secondary: #2563EB;
  --color-secondary-soft: #EAF1FE;
  --color-accent: #059669;
  --color-accent-soft: #E4F5EE;

  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F1F3F5;

  --color-fg: #0F172A;
  --color-fg-muted: #475569;
  --color-fg-subtle: #64748B;
  --color-fg-on-primary: #FFFFFF;
  --color-fg-disabled: #94A3B8;

  --color-border: #E4E7EB;
  --color-border-strong: #CBD3DC;

  /* 语义色：状态/风险专用，各带一个浅底色，永远搭文字/图标一起用，不单独用色块传达信息 */
  --color-success: #059669;
  --color-success-soft: #E4F5EE;
  --color-success-strong: #04724E;
  --color-warning: #B45309;
  --color-warning-soft: #FDF1DF;
  --color-warning-strong: #92400E;
  --color-danger: #DC2626;
  --color-danger-soft: #FCE9E9;
  --color-danger-strong: #A61B1B;
  --color-neutral: #52606D;
  --color-neutral-soft: #EEF1F4;

  --color-ring: #1E3A5F;
  --color-scrim: rgba(15, 23, 42, 0.45);

  /* 字体：中文正文/标题共用一套系统字体栈，理由见文件头注释第 1 条 */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* 字号层级：14px 基线是工位电脑上密度和可读性的折中；正文报告单独提到 16px，
     见 .md-body，长文阅读优先于信息密度。
     【改成 rem】用户在浏览器里调大默认字号时，px 写死的字号不会跟着走。
     这是长文报告界面，用户把字号调大是常见需求，保持 rem 令牌让用户偏好生效。
     间距、圆角、边框宽度保持 px，不跟字号缩放（否则大字号下布局散架）。*/
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75; /* 中文长文正文行高下限，见任务简报 */

  /* 间距刻度：4px 基准 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 圆角：克制，不做大圆角卡片 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* 阴影：只用来区分层级（卡片/浮层），不做装饰性投影 */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);

  /* 过渡：短、克制，只用于状态确认 */
  --transition-fast: 120ms ease-out;
  --transition-base: 180ms ease-out;

  /* 断点参考值（媒体查询里硬写，这里留作文档用） */
  --breakpoint-tablet: 768px;

  --container-max: 960px;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

a { color: var(--color-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* 键盘可达性：所有可交互元素统一焦点环，别用 outline:none 关掉它 */
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* -------------------------------------------------------------------------
   3. 基础排版
   ------------------------------------------------------------------------- */
.h1 { font-size: var(--text-3xl); font-weight: 700; line-height: var(--leading-tight); }
.h2 { font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-tight); }
.h3 { font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-tight); }
.h4 { font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-tight); }

.text-muted { color: var(--color-fg-muted); }
.text-subtle { color: var(--color-fg-subtle); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

/* -------------------------------------------------------------------------
   4. 布局壳
   ------------------------------------------------------------------------- */
#app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.topbar-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-fg);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

/* ≥768px 可用的两栏栅格：左侧主内容、右侧辅助信息（比如报告 + 复核表单）。
   <768px 自动收成单栏，栏与栏之间靠 DOM 顺序决定先后，别用 order 反着来，
   不然键盘/读屏顺序会和视觉顺序对不上。 */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .grid-2col {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* -------------------------------------------------------------------------
   5. 按钮
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn:active { background: var(--color-surface-sunken); }

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-fg-on-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-fg-on-primary); }

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

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-fg-muted);
}
.btn-ghost:hover { background: var(--color-surface-sunken); color: var(--color-fg); border-color: transparent; }

.btn-danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger-soft); }

.btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn-lg { height: 48px; padding: 0 var(--space-5); font-size: var(--text-md); }
.btn-block { width: 100%; }

.btn[disabled],
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 提交中：按钮本身带一个简单的环形转圈，靠 .btn 内部放一个 .spinner 元素，
   不做额外的骨架屏——按钮级别的等待用 spinner，整屏/整卡片级别用第 10 节的骨架屏 */
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0.85;
  animation: spin 700ms linear infinite;
}

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

/* -------------------------------------------------------------------------
   6. 表单
   ------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.field-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-fg);
}

.field-label .required {
  color: var(--color-danger);
  margin-right: 2px;
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}

.field-error {
  font-size: var(--text-xs);
  color: var(--color-danger);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 40px; /* 移动端触控目标，别小于 44px 的可点范围时靠 padding 补足 */
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  font-size: var(--text-md); /* 16px：移动端 Safari 小于 16px 的输入框会自动放大页面 */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input::placeholder,
.textarea::placeholder { color: var(--color-fg-disabled); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--color-fg-subtle); }

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.textarea { min-height: 96px; resize: vertical; line-height: var(--leading-normal); }

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--color-danger-soft); }

.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--color-surface-sunken);
  color: var(--color-fg-disabled);
  cursor: not-allowed;
}

/* 单选组：用于"分析类型：一般/深度"这类少量互斥选项，按钮式，不用原生 radio 外观 */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.radio-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-fg);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.radio-chip:hover { border-color: var(--color-primary); }

.radio-chip.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 500;
}

/* 折叠区：深度分析的四个选填项默认收起，展开时不做位移动画（避免下方内容跳动过快），
   只做透明度渐显 */
.disclosure-body {
  display: none;
  padding-top: var(--space-3);
}
.disclosure.is-open .disclosure-body { display: block; }

/* -------------------------------------------------------------------------
   7. 卡片
   ------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.card-title { font-size: var(--text-md); font-weight: 600; }

.card-body { padding: var(--space-5); }

.card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.card-list { display: flex; flex-direction: column; gap: var(--space-3); }

/* 历史列表一行：点击整行进详情，触控区域按整行算，不是只有标题可点 */
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.list-row:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.list-row-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.list-row-title { font-size: var(--text-base); font-weight: 500; color: var(--color-fg); }
.list-row-meta { font-size: var(--text-xs); color: var(--color-fg-subtle); }
.list-row-side { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* -------------------------------------------------------------------------
   8. 标签 / 状态徽标
   ------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-neutral { background: var(--color-neutral-soft); color: var(--color-neutral); }
.badge-success { background: var(--color-success-soft); color: var(--color-success-strong); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger-strong); }
.badge-info { background: var(--color-secondary-soft); color: var(--color-secondary); }

/* 语义别名：直接对应业务状态命名，Task 2~4 拼类名时不用反查"哪个颜色对应哪个状态" */
.badge-finalized { background: var(--color-success-soft); color: var(--color-success-strong); } /* 已定稿 */
.badge-pending { background: var(--color-warning-soft); color: var(--color-warning-strong); }   /* 待复核 */
.badge-risk-low { background: var(--color-success-soft); color: var(--color-success-strong); }
.badge-risk-medium { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.badge-risk-high { background: var(--color-danger-soft); color: var(--color-danger-strong); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  color: var(--color-fg-muted);
  font-size: var(--text-xs);
}

/* -------------------------------------------------------------------------
   9. 提示条
   ------------------------------------------------------------------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.notice-info { background: var(--color-secondary-soft); border-color: var(--color-secondary); color: var(--color-fg); }
.notice-warning { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-fg); }
.notice-danger { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-fg); }

/* -------------------------------------------------------------------------
   10. 骨架屏（加载态）
   ------------------------------------------------------------------------- */
.skeleton {
  position: relative;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: transparent;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.skeleton-line { height: 14px; margin-bottom: var(--space-2); width: 100%; }
.skeleton-line:last-child { margin-bottom: 0; width: 70%; }
.skeleton-title { height: 20px; width: 40%; margin-bottom: var(--space-3); }
.skeleton-block { height: 120px; width: 100%; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }

/* -------------------------------------------------------------------------
   11. Toast
   ------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-8);
  transform: translateX(-50%);
  max-width: calc(100vw - var(--space-8));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-fg);
  color: var(--color-surface);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  z-index: 100;
}

.toast[hidden] { display: none; }

.toast-danger { background: var(--color-danger-strong); }
.toast-success { background: var(--color-success-strong); }

/* -------------------------------------------------------------------------
   12. 空状态 / 分页
   ------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-4);
  text-align: center;
  color: var(--color-fg-subtle);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-top: var(--space-4);
}

/* -------------------------------------------------------------------------
   13. Markdown 长文正文排版
   -------------------------------------------------------------------------
   报告是这个界面里读得最久的内容，正文可读性优先于信息密度：
   16px 起步、1.75 行高、克制的色彩对比，不追求"看起来紧凑"。
   ------------------------------------------------------------------------- */
.md-body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg);
  word-break: break-word;
}

.md-body > * + * { margin-top: var(--space-4); }

.md-body h2 {
  margin-top: var(--space-8);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.md-body h2:first-child { margin-top: 0; }

.md-body h3 {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-primary);
}

.md-body p { margin: 0; }

.md-body ul,
.md-body ol {
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.md-body ul { list-style: disc; }
.md-body ol { list-style: decimal; }
.md-body li { line-height: var(--leading-relaxed); }
.md-body li > ul,
.md-body li > ol { margin-top: var(--space-2); }

.md-body strong { font-weight: 700; color: var(--color-fg); }

.md-body blockquote {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-sunken);
  color: var(--color-fg-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.md-body blockquote > * + * { margin-top: var(--space-2); }

.md-body hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

.md-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-sunken);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* 表格本身不限制宽度，但要包一层 .table-scroll 才能在手机宽度下横向滚动，
   不然一张列多的表会把整页撑宽，出现 spec 明确禁止的整页横向滚动 */
.table-scroll { overflow-x: auto; }

.md-body {
  /* 【兜底双保险】表格的宽度溢出兜底。渲染层会包 .table-scroll div（另一端已改），
     CSS 也在这里兜底：即使某张表没被包住，也不会让整个 .md-body 撑宽页面。
     只靠「渲染时记得包」是脆的 —— 忘一次就是手机上页面撑爆。 */
  overflow-x: auto;
}

.md-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.md-body th,
.md-body td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.md-body th {
  background: var(--color-surface-sunken);
  font-weight: 600;
  white-space: nowrap;
}

.md-body tr:nth-child(even) td { background: var(--color-bg); }

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

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.flex-1 { flex: 1 1 auto; min-width: 0; }

/* -------------------------------------------------------------------------
   15. 响应式总控
   -------------------------------------------------------------------------
   移动端最小适配到 360px（比常见的 375px 基线更窄一档）：容器内边距在极窄屏
   收紧一档，避免两侧留白挤占本就不多的正文宽度。
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .container { padding: var(--space-4) var(--space-3); }
  .card-header,
  .card-body,
  .card-footer { padding: var(--space-4); }
  .toast { bottom: var(--space-4); }
}

@media (min-width: 768px) {
  .container { padding: var(--space-6) var(--space-6); }
}