@charset "UTF-8";
/* ==========================================================================
   base.css · 设计令牌 / reset / 排版 / 无障碍工具类
   令牌严格对齐 PRD §7.1 与 ARCH §9.2，禁止在组件里硬编码散色。
   纪律：
     1. --c-amber 只用于「钱/成本」语境；/roles/ 页与所有权限/安全组件禁止使用
     2. 发光只允许 2 处：Hero 关键数字、主 CTA 按钮
     3. --tx-3 在浅底上仅用于 ≥18px 文本或非文本元素
     4. 所有金额/比率/代码必须挂 .num（等宽 + tabular-nums）
   ========================================================================== */

:root {
  /* 品牌与功能色 */
  --c-navy: #1E3A8A;      /* 主色 · 深靛蓝：深色 Hero 主调 */
  --c-brand: #2563EB;     /* 品牌色 · 标准蓝：按钮/链接/强调数字 */
  --c-brand-2: #3B82F6;   /* 品牌浅阶：渐变端点 */
  --c-brand-100: #DBEAFE; /* 品牌浅底：标签/浅底 */
  --c-indigo: #6366F1;    /* 辅助 · 靛紫：渐变过渡 */
  --c-amber: #F59E0B;     /* 强调 · 琥珀：【钱/成本专用】 */
  --c-green: #10B981;     /* 成功 · 翠绿：通过/已隔离/已确认 */
  --c-red: #EF4444;       /* 警示 · 红：异常/口径缺失/无权访问 */

  /* 背景 */
  --bg-dark: #0F172A;
  --bg-mid: #1E293B;
  --bg-light: #F8FAFC;
  --bg-surface: #FFFFFF;   /* 亮底：默认 section 底色 */
  --bg-tint: #EEF2F7;      /* 浅灰底：.section--alt 交替带，与 --bg-surface 形成可见明度差 */

  /* 文字 */
  --tx-1: #0F172A;
  --tx-2: #475569;
  --tx-3: #94A3B8;       /* 非文本专用（图标/分隔/装饰）；浅底正文勿用，对比度不足 */
  --tx-meta: #64748B;    /* 浅底小字元信息（4.76:1 过 AA），替代 --tx-3 正文用途 */

  /* 深色区文字 */
  --tx-on-dark-1: #FFFFFF;
  --tx-on-dark-2: #CBD5E1;

  /* 圆角 / 阴影 / 渐变 */
  --radius-card: 14px;
  --radius-ctl: 8px;
  --radius-badge: 999px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-2: 0 4px 16px rgba(15, 23, 42, .08);
  --shadow-3: 0 12px 32px rgba(30, 58, 138, .18);
  --grad-hero: linear-gradient(135deg, #0F172A 0%, #1E3A8A 55%, #312E81 100%);
  --grad-btn: linear-gradient(90deg, #2563EB 0%, #6366F1 100%);

  /* 字体 */
  --font-sans: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Roboto Mono", monospace;

  /* 栅格与间距 */
  --container: 1200px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* 字号 */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
}

@media (min-width: 1440px) {
  :root { --container: 1280px; }
}

/* ------------------------------ reset ------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg-light);
  color: var(--tx-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--tx-1);
}

h1 { font-size: clamp(28px, 5vw, 56px); font-weight: 800; letter-spacing: -.5px; }
h2 { font-size: clamp(22px, 3.2vw, 34px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); color: var(--tx-2); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.4em; color: var(--tx-2); }
li { margin-bottom: var(--sp-2); }
strong { color: var(--tx-1); font-weight: 700; }
small { font-size: var(--fs-sm); }

a {
  color: var(--c-brand);
  text-decoration: none;
  transition: color .18s ease;
}

a:hover { color: var(--c-navy); }

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

code, pre { font-family: var(--font-mono); }

table { border-collapse: collapse; }

button { font: inherit; cursor: pointer; }

figure, blockquote { margin: 0; }

/* ------------------------------ 焦点与无障碍 ------------------------------ */

:focus-visible {
  outline: 2px solid var(--c-brand-2);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-brand);
  color: #fff;
  border-radius: 0 0 var(--radius-ctl) 0;
}

.skip-link:focus {
  left: 0;
}

.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;
}

.svg-sprite { display: none; }

.icon { vertical-align: -4px; color: currentColor; }

/* ------------------------------ 工具类 ------------------------------ */

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.tx-strong { color: var(--tx-1); }
.tx-dim { color: var(--tx-2); }
.money-cost { color: var(--c-amber); }

.note-foot {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--tx-meta);
}

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.divider {
  height: 1px;
  margin: var(--sp-6) 0;
  background: rgba(148, 163, 184, .35);
  border: 0;
}

/* 动效降级：关闭所有动画与位移，只保留颜色/透明度变化 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* 打印：隐藏交互组件 */
@media print {
  .topbar, .cta-bar, .toast, .other-links { display: none !important; }
}