/* ============================================================
   Best 401k Calculator - 全局样式表
   Mobile-First 响应式设计 | WCAG AA 无障碍标准
   ============================================================ */

/* ============================================================
   设计令牌 (Design Tokens) — Wise-inspired (per DESIGN.md)
   ------------------------------------------------------------
   原则：
   - 所有原 token 名保留（向后兼容），仅重映射值
   - 新增 Wise 风格 token（brand-primary / display 字号 / pill 等）
   - 颜色：Near Black + Wise Green + Light Mint
   - 字体：Inter（含 900 weight 用于 display）
   - 阴影：禁用 drop-shadow，统一用 1px ring shadow
   ============================================================ */
:root {
  /* ============ 品牌色（核心） ============ */
  --color-brand-primary: #9fe870;        /* Wise Green - 仅用于 CTA 按钮 / accent */
  --color-brand-on-primary: #163300;     /* 绿色按钮上的深绿文字 */
  --color-brand-hover: #cdffad;          /* Pastel Green - 按钮 hover */
  --color-brand-mint: #e2f6d5;           /* Light Mint - 徽章 / 软绿表面 */
  --color-brand-deep: #163300;           /* Dark Green */

  /* ============ 中性色（Near Black 体系） ============ */
  --color-text: #0e0f0c;                 /* 主文本 - Near Black（暖底色） */
  --color-text-secondary: #454745;       /* 次文本 - Warm Dark */
  --color-text-muted: #868685;           /* 弱化文本 - Gray */
  --color-text-on-dark: #e8ebe6;         /* 深色背景上的文字 */
  --color-text-inverse: #ffffff;         /* 完全反色 */

  /* ============ 表面 / 背景 ============ */
  --color-bg: #ffffff;                   /* 主背景 - 纯白 */
  --color-bg-secondary: #fafaf9;         /* 次背景 - 偏暖的 off-white */
  --color-bg-tertiary: #e8ebe6;          /* 三级背景 - Light Surface（微绿） */
  --color-bg-dark: #0e0f0c;              /* 深色区块 - Near Black */
  --color-bg-mint: #e2f6d5;              /* 徽章 / 提示背景 */

  /* ============ 边框（Wise 用 1px ring 替代 shadow） ============ */
  --color-border: rgba(14, 15, 12, 0.12);
  --color-border-strong: rgba(14, 15, 12, 0.24);
  --color-border-dark: #454745;
  --color-border-brand: #9fe870;

  /* ============ 语义色 ============ */
  --color-success: #054d28;              /* Positive Green */
  --color-success-light: #e2f6d5;        /* Mint 表面 */
  --color-warning: #ffd11a;              /* Warning Yellow */
  --color-warning-light: #fff4b8;
  --color-danger: #d03238;               /* Danger Red */
  --color-danger-light: #fde2e3;
  --color-info: #38c8ff;                 /* Bright Cyan */
  --color-info-light: rgba(56, 200, 255, 0.10);
  --color-accent-orange: #ffc091;        /* Bright Orange - 暖色辅助 */

  /* ============ 向后兼容映射（保留旧名，链接旧值不再使用） ============ */
  /* primary 不再映射为蓝色，改为 Near Black（让所有链接 / 强调文本保持深色） */
  --color-primary: var(--color-text);
  --color-primary-dark: #000000;
  --color-primary-light: var(--color-brand-mint);
  --color-primary-rgb: 14, 15, 12;

  /* ============ 图表配色（Wise 调色板） ============ */
  --chart-green: #9fe870;                /* 主品牌 */
  --chart-deep-green: #054d28;
  --chart-orange: #ffc091;
  --chart-red: #d03238;
  --chart-yellow: #ffd11a;
  --chart-cyan: #38c8ff;
  --chart-blue: #0e0f0c;                 /* 替代原蓝色 */
  --chart-purple: #163300;
  --chart-teal: #054d28;

  /* ============================================================
     字体系统
     ------------------------------------------------------------
     - Display 用 Inter 900 weight（替代付费的 Wise Sans）
     - Body 用 Inter，默认 400，强调 600
     - 启用 OpenType "calt"（在 body 全局规则中应用）
     ============================================================ */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;

  /* —— 字号阶梯（Wise hierarchy） —— */
  --text-2xs: 0.75rem;                   /* 12px - Small */
  --text-xs: 0.75rem;                    /* 12px - 兼容旧名 */
  --text-sm: 0.875rem;                   /* 14px - Caption */
  --text-base: 1.0625rem;                /* 17px - Body（紧凑可读） */
  --text-lg: 1.125rem;                                    /* 18px - Feature Title */
  --text-xl: 1.375rem;                                    /* 22px - Card Title */
  --text-2xl: clamp(1.375rem, 2.2vw, 1.875rem);           /* 22-30px - Sub-heading（H2 紧凑） */
  --text-3xl: clamp(1.625rem, 2.8vw, 2.5rem);             /* 26-40px - Section Heading */
  --text-4xl: clamp(1.875rem, 3.6vw, 3rem);               /* 30-48px - Display Hero（紧凑） */
  --text-mega: clamp(3rem, 12vw, 7.875rem); /* 48-126px - Display Mega */

  /* —— 行高 —— */
  --leading-display: 0.95;               /* 紧凑但工具站友好 - display 标题专用 */
  --leading-tight: 1.10;                 /* alt heading */
  --leading-snug: 1.25;                  /* card title / feature */
  --leading-normal: 1.44;                /* body 默认 */
  --leading-relaxed: 1.6;                /* 长文阅读 */
  --line-height: 1.6;                    /* 兼容旧名 */

  /* —— 字重 —— */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;                /* body 强调 / button 默认 */
  --weight-bold: 700;
  --weight-black: 900;                   /* display 专用 - Wise 灵魂 */

  /* —— 字间距 —— */
  --tracking-display: -0.03em;           /* display 微负值 */
  --tracking-tight: -0.108px;
  --tracking-snug: -0.084px;
  --tracking-normal: 0px;
  --tracking-loose: 0.18px;

  /* ============================================================
     间距系统（base 8px）
     ============================================================ */
  --space-1: 0.25rem;                    /* 4px */
  --space-2: 0.5rem;                     /* 8px */
  --space-3: 0.75rem;                    /* 12px */
  --space-4: 1rem;                       /* 16px */
  --space-5: 1.25rem;                    /* 20px */
  --space-6: 1.5rem;                     /* 24px */
  --space-8: 2rem;                       /* 32px */
  --space-10: 2.5rem;                    /* 40px */
  --space-12: 3rem;                      /* 48px */
  --space-16: 4rem;                      /* 64px */
  --space-20: 5rem;                      /* 80px - 新增：大节段间距 */
  --space-24: 6rem;                      /* 96px - 新增：超大节段 */

  /* ============================================================
     圆角系统（Wise 阶梯）
     ============================================================ */
  --radius-xs: 2px;                      /* Minimal - 链接、tag */
  --radius-sm: 0.625rem;                 /* 10px - Standard - input/select */
  --radius-md: 1rem;                     /* 16px - Card / button-sm */
  --radius-lg: 1.25rem;                  /* 20px - 中等卡片 */
  --radius-xl: 1.875rem;                 /* 30px - Feature card */
  --radius-2xl: 2.5rem;                  /* 40px - 大卡片 / 表格容器 */
  --radius-mega: 1000px;                 /* 展示性元素 */
  --radius-pill: 9999px;                 /* Pill - 所有按钮、徽章 */
  --radius-full: 9999px;                 /* 兼容旧名 */

  /* ============================================================
     阴影系统（仅 ring shadow — 禁用 drop-shadow）
     ============================================================ */
  --shadow-none: none;
  --shadow-ring: 0 0 0 1px rgba(14, 15, 12, 0.12);
  --shadow-ring-strong: 0 0 0 1px rgba(14, 15, 12, 0.24);
  --shadow-ring-brand: 0 0 0 1px #9fe870;
  --shadow-inset: rgb(134, 134, 133) 0px 0px 0px 1px inset;

  /* —— 兼容旧名（旧 box-shadow 全部映射为 ring） —— */
  --shadow-sm: var(--shadow-ring);
  --shadow-md: var(--shadow-ring);
  --shadow-lg: var(--shadow-ring-strong);
  --shadow-xl: var(--shadow-ring-strong);

  /* ============================================================
     过渡 / 动画（含 Wise 标志性 scale）
     ============================================================ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* —— Wise 灵魂动画：按钮 hover 物理放大、按下压缩 —— */
  --hover-scale: scale(1.05);
  --active-scale: scale(0.95);

  /* ============================================================
     布局
     ============================================================ */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1440px;
  --header-height: 64px;
}

/* ---- 基础重置 ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .results-section.is-visible {
    animation: none;
  }

  .btn-primary:hover,
  .btn-primary:active {
    transform: none;
  }

  .tool-card:hover {
    transform: none;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Wise 灵魂：OpenType 上下文备选字符（calt）应用到全站文本 */
  font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

/* ---- 排版（Wise hierarchy） ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text);
  text-wrap: balance;
}

/* H1 - Display Hero（响应式 40-96px，900 黑体，0.85 行高 — Wise 灵魂） */
h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-6);
}

/* H2 - Sub-heading（22-30px clamp，900 黑体，紧凑工具站） */
h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-bottom: 0;
  border-bottom: none;
}

/* H3 - Card Title（22px，semibold） */
h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

/* H4 - Feature Title（18px，semibold） */
h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

p {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-loose);
}

a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: rgba(14, 15, 12, 0.24);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-brand-primary);
  text-decoration-thickness: 2px;
}

strong, b {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

ul, ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

li {
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- 布局容器 ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* container-narrow 已废弃，统一使用 container 宽度保持一致 */
.container-narrow {
  max-width: var(--container-max);
}

/* 段落自然填满容器宽度（容器已被 1200px 限制，无需 80ch 二次约束） */
.content-section p,
.content-section li,
.faq-answer p,
.faq-answer li {
  max-width: none;
}

/* ============================================================
   Header / Navigation — Wise 风格
   - 干净 header + ring 边框（无 shadow）
   - Pill 风格 hover（绿色 mint 背景 + scale 微动）
   - 桌面端纯 hover 下拉，移动端点击展开
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  display: flex;
  align-items: center;
  box-shadow: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* —— Logo —— */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition-fast);
}

.site-logo:hover {
  text-decoration: none;
  color: var(--color-text);
  transform: scale(1.02);
}

.site-logo .logo-icon {
  width: 32px;
  height: 32px;
  background: var(--color-brand-primary);
  color: var(--color-brand-on-primary);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: var(--weight-black);
  letter-spacing: 0;
  flex-shrink: 0;
}

/* —— 移动菜单按钮 —— */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.menu-toggle:hover {
  background: var(--color-bg-mint);
  transform: var(--hover-scale);
}

.menu-toggle:active {
  transform: var(--active-scale);
}

.menu-toggle svg {
  width: 22px;
  height: 22px;
}

/* —— 导航菜单（移动端默认抽屉式） —— */
.nav-main {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  z-index: 999;
  overflow-y: auto;
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.nav-main.is-open {
  display: block;
}

.nav-main ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-main > ul > li {
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.nav-main a,
.nav-main .nav-dropdown-toggle {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-tight);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-main .nav-dropdown-toggle {
  font: inherit;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.nav-main a:hover,
.nav-main .nav-dropdown-toggle:hover,
.nav-main a.active {
  background: var(--color-bg-mint);
  color: var(--color-text);
  text-decoration: none;
}

/* —— 下拉子菜单 —— */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.nav-dropdown-toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.nav-dropdown.is-open .nav-dropdown-toggle::after {
  transform: rotate(-135deg);
}

.nav-dropdown-menu {
  display: none;
  padding-left: var(--space-4);
}

.nav-dropdown.is-open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-4);
}

/* ============================================================
   桌面端导航（≥1024px）
   ============================================================ */
@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
  .nav-main {
    display: flex;
    position: static;
    background: transparent;
    padding: 0;
    border: none;
    overflow: visible;
  }
  .nav-main > ul {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .nav-main > ul > li {
    border-bottom: none;
    margin: 0;
  }
  .nav-dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 240px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: var(--shadow-ring);
    transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
    padding-left: var(--space-2);
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-dropdown-menu a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
  }
  .nav-dropdown-toggle::after {
    margin-left: var(--space-2);
  }
}

/* ============================================================
   #7 面包屑 — Wise 极简
   ============================================================ */
.breadcrumb {
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-tight);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-2);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-muted);
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  color: var(--color-text-muted);
  opacity: 0.4;
  margin-left: var(--space-1);
  font-weight: var(--weight-normal);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   #3 Hero — Wise 风格大标题（Display Hero 96px @ 0.85 line-height）
   - 纯色 off-white 背景（禁用渐变）
   - Display 黑体 + 极致紧凑行高
   ============================================================ */
.hero {
  background: var(--color-bg-secondary);
  padding: var(--space-6) 0 var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

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

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
  max-width: none;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

.hero p {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
  max-width: none;
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-tight);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* —— Wise 标志性 mint pill 徽章 —— */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-mint);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-deep);
  letter-spacing: var(--tracking-tight);
  box-shadow: none;
  border: 1px solid transparent;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.hero-badge:hover {
  transform: var(--hover-scale);
  border-color: var(--color-brand-primary);
}

.hero-badge svg {
  width: 14px;
  height: 14px;
  color: var(--color-brand-deep);
}

@media (min-width: 768px) {
  .hero {
    padding: var(--space-16) 0 var(--space-12);
  }
}

/* ============================================================
   #5 计算器卡片 — Wise Feature Card 风格
   - 30px 圆角 + 1px ring border（无 drop-shadow）
   - 白底 / off-white 内部分组
   ============================================================ */
.calc-section {
  padding: var(--space-8) 0;
}

.calc-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  box-shadow: none;
}

@media (min-width: 768px) {
  .calc-card {
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
  }
}

.calc-card-header {
  margin-bottom: var(--space-6);
}

.calc-card-header h2 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  border-bottom: none;
  padding-bottom: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-snug);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.calc-card-header p {
  margin-top: 0;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

/* ============================================================
   #6 表单字段 — Wise input 风格
   ============================================================ */
.form-grid {
  display: grid;
  gap: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-label .tooltip-trigger {
  width: 18px;
  height: 18px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-bold);
  cursor: help;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.form-label .tooltip-trigger:hover {
  background: var(--color-brand-mint);
  color: var(--color-brand-deep);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-prefix,
.input-suffix {
  position: absolute;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  pointer-events: none;
  z-index: 1;
}

.input-prefix {
  left: var(--space-4);
}

.input-suffix {
  right: var(--space-4);
}

.form-input {
  width: 100%;
  min-height: 48px;
  height: 52px;
  padding: 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-input:hover {
  border-color: var(--color-text);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-text);
  box-shadow: var(--shadow-inset);
}

.form-input.has-prefix {
  padding-left: var(--space-8);
}

.form-input.has-suffix {
  padding-right: var(--space-8);
}

.form-select {
  width: 100%;
  min-height: 48px;
  height: 52px;
  padding: 0 var(--space-10) 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230e0f0c' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}

.form-select:hover {
  border-color: var(--color-text);
}

.form-select:focus {
  outline: none;
  border-color: var(--color-text);
  box-shadow: var(--shadow-inset);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-snug);
}

.form-error-banner {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--color-danger-light);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* —— 高级选项折叠 —— */
.advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  background: var(--color-bg-mint);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.advanced-toggle:hover {
  background: var(--color-brand-hover);
  transform: var(--hover-scale);
}

.advanced-toggle:active {
  transform: var(--active-scale);
}

.advanced-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.advanced-toggle.is-open svg {
  transform: rotate(180deg);
}

.advanced-fields {
  display: none;
  padding-top: var(--space-5);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.advanced-fields.is-open {
  display: block;
}

/* ============================================================
   #4 按钮 — Wise Pill 风格
   - Pill (9999px) 圆角 + scale(1.05) hover / scale(0.95) active
   - Primary: 柠檬绿 #9fe870 + 深绿字 #163300
   - Secondary: 透明绿 + 深色字
   - 禁用 drop-shadow，仅保留 ring on focus
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  height: 48px;
  padding: 0 var(--space-5);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-tight);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
  text-decoration: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text);
}

/* —— Primary: Wise Lime Green —— */
.btn-primary {
  background: var(--color-brand-primary);
  color: var(--color-brand-on-primary);
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--color-brand-hover);
  color: var(--color-brand-on-primary);
  transform: var(--hover-scale);
  box-shadow: none;
  text-decoration: none;
}

.btn-primary:active {
  transform: var(--active-scale);
  background: var(--color-brand-primary);
}

/* —— Secondary: 半透明深绿 (subtle pill) —— */
.btn-secondary {
  background: rgba(22, 51, 0, 0.08);
  color: var(--color-text);
  border: none;
}

.btn-secondary:hover {
  background: rgba(22, 51, 0, 0.16);
  color: var(--color-text);
  transform: var(--hover-scale);
  text-decoration: none;
}

.btn-secondary:active {
  transform: var(--active-scale);
}

.btn-full {
  width: 100%;
}

/* —— Large: 用于 Hero CTA、主计算按钮 —— */
.btn-lg {
  min-height: 56px;
  height: 56px;
  font-size: var(--text-lg);
  padding: 0 var(--space-8);
  border-radius: var(--radius-pill);
}

/* —— Small: 用于 export、操作按钮 —— */
.btn-sm {
  min-height: 40px;
  height: 40px;
  font-size: var(--text-sm);
  padding: 0 var(--space-4);
}

/* ============================================================
   #8 结果区域 — Wise Mint 高亮卡 + 数据 Pill
   ============================================================ */
.results-section {
  display: none;
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.results-section.is-visible {
  display: block;
  animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-highlight {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg-mint);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .result-highlight {
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-2xl);
  }
}

.result-highlight-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-deep);
  text-transform: none;
  letter-spacing: var(--tracking-tight);
}

.result-highlight-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-brand-deep);
  margin: var(--space-3) 0;
  font-variant-numeric: tabular-nums;
}

.result-highlight-sub {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.result-grid {
  display: grid;
  gap: var(--space-3);
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-left: 1px solid var(--color-border);
  position: relative;
  transition: border-color var(--transition-fast);
}

.result-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
}

.result-item-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-tight);
}

.result-item-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  font-family: var(--font-display);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

.result-item.success::before { background: var(--color-success); }
.result-item.warning::before { background: var(--color-warning); }
.result-item.danger::before  { background: var(--color-danger); }
.result-item.info::before    { background: var(--color-info); }

/* —— 图表容器 —— */
.chart-container {
  position: relative;
  width: 100%;
  max-height: 380px;
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.chart-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.chart-tab {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  min-height: 40px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  background: rgba(22, 51, 0, 0.08);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.chart-tab:hover {
  background: rgba(22, 51, 0, 0.16);
  transform: var(--hover-scale);
}

.chart-tab.active {
  background: var(--color-brand-primary);
  color: var(--color-brand-on-primary);
}

/* —— 通胀调整开关（Wise toggle） —— */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.toggle-switch-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.toggle-switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  background: rgba(14, 15, 12, 0.16);
  border-radius: var(--radius-pill);
  position: relative;
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.toggle-switch input[type="checkbox"]::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--color-bg);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-ring);
}

.toggle-switch input[type="checkbox"]:checked {
  background: var(--color-brand-primary);
}

.toggle-switch input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

/* ============================================================
   #9 表格 — Wise 风格（无斑马纹，改用悬停 mint 反馈）
   ============================================================ */
.schedule-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 600px;
  font-variant-numeric: tabular-nums;
}

.schedule-table thead {
  background: var(--color-bg-tertiary);
  position: sticky;
  top: 0;
}

.schedule-table th {
  padding: var(--space-3);
  text-align: right;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  letter-spacing: var(--tracking-tight);
}

.schedule-table th:first-child {
  text-align: center;
}

.schedule-table td {
  padding: var(--space-3);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.schedule-table td:first-child {
  text-align: center;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.schedule-table tbody tr {
  transition: background var(--transition-fast);
}

.schedule-table tbody tr:hover {
  background: var(--color-bg-mint);
}

.schedule-table tbody tr:last-child td {
  border-bottom: none;
}

.export-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ============================================================
   教育内容区域
   ============================================================ */
.content-section {
  padding: var(--space-8) 0;
}

.content-section h2 {
  color: var(--color-text);
}

.content-section h3 {
  color: var(--color-text);
}

.content-section p {
  line-height: var(--leading-normal);
}

.callout {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-text);
}

.callout-info    { border-left-color: var(--color-info); }
.callout-success { border-left-color: var(--color-success); }
.callout-warning { border-left-color: var(--color-warning); }
.callout-danger  { border-left-color: var(--color-danger); }

.callout strong {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--weight-semibold);
}

/* —— IRS 限额表格（统一样式与 schedule-table 一致） —— */
.limits-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.limits-table th,
.limits-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.limits-table th {
  background: var(--color-bg-tertiary);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.limits-table tbody tr {
  transition: background var(--transition-fast);
}

.limits-table tbody tr:hover {
  background: var(--color-bg-mint);
}

.limits-table tbody tr:last-child td {
  border-bottom: none;
}

.limits-table td:not(:first-child) {
  text-align: right;
}

/* ============================================================
   FAQ 手风琴 — Wise 风格（明确状态、流畅动画）
   ============================================================ */
.faq-section {
  padding: var(--space-8) 0;
}

.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
  background: var(--color-bg);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.faq-item:hover {
  border-color: var(--color-text);
}

.faq-item.is-open {
  background: var(--color-bg-secondary);
  border-color: var(--color-text);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-5) var(--space-5);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--space-4);
  transition: background var(--transition-fast);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-tight);
}

.faq-question:hover {
  background: transparent;
}

.faq-question svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text);
  transition: transform var(--transition-base);
}

.faq-item.is-open .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  display: none;
  padding: 0 var(--space-5) var(--space-5);
  line-height: var(--leading-normal);
}

.faq-item.is-open .faq-answer {
  display: block;
}

.faq-answer p {
  margin-bottom: var(--space-3);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   相关计算器卡片 — Wise Tool Card 风格（mint hover）
   ============================================================ */
.related-tools {
  padding: var(--space-10) 0;
  background: var(--color-bg-secondary);
}

.related-tools h2 {
  text-align: left;
  border-bottom: none;
  margin-bottom: var(--space-6);
}

.tool-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.tool-card {
  display: block;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  box-shadow: none;
}

.tool-card:hover {
  text-decoration: none;
  border-color: var(--color-text);
  background: var(--color-bg-mint);
  transform: var(--hover-scale);
  color: var(--color-text);
}

.tool-card-icon {
  width: 48px;
  height: 48px;
  background: var(--color-brand-primary);
  color: var(--color-brand-on-primary);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 22px;
}

.tool-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  margin-top: 0;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.tool-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-snug);
}

/* —— 免责声明 —— */
.disclaimer {
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.disclaimer strong {
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   #10 页脚 — Wise 深色页脚（near black + mint accent）
   ============================================================ */
.site-footer {
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.72);
  padding: var(--space-12) 0 var(--space-8);
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
}

.footer-section h4 {
  font-family: var(--font-display);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: var(--tracking-tight);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section li {
  margin-bottom: var(--space-3);
}

.footer-section a {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-section a:hover {
  color: var(--color-brand-primary);
  text-decoration: none;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--color-brand-primary);
}

/* ---- 广告位（无固定尺寸，广告未加载时自动隐藏） ---- */
.ad-container {
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

.ad-container:empty,
.ad-container.ad-hidden {
  display: none;
}

.ad-container ins.adsbygoogle {
  display: block;
}

.ad-container ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

.ad-container-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

/* ---- Cookie consent (GDPR-style) + Consent Mode ---- */
.ad-container.cookie-consent-ad-hidden {
  display: none !important;
}

body.cookie-consent-visible {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  padding: var(--space-5);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent {
    animation: none;
  }
}

.cookie-consent-inner {
  max-width: var(--container-max, 72rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .cookie-consent-inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

.cookie-consent-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-2);
  color: #fff;
  letter-spacing: var(--tracking-tight);
}

.cookie-consent-desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.72);
}

.cookie-consent-link {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent-link:hover {
  color: var(--color-brand-hover);
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
}

.cookie-consent-btn {
  min-width: 10rem;
}

.cookie-consent .btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
}

.cookie-consent .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: var(--hover-scale);
}

/* ---- 工具提示 ---- */
.tooltip {
  position: relative;
  display: inline-flex;
}

.tooltip-content {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-3);
  background: var(--color-text);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: 100;
  margin-bottom: var(--space-1);
  box-shadow: none;
}

.tooltip:hover .tooltip-content,
.tooltip:focus-within .tooltip-content {
  display: block;
}

/* ---- 滑块组件 ---- */
.range-slider {
  width: 100%;
  height: 6px;
  background: rgba(14, 15, 12, 0.16);
  border-radius: var(--radius-pill);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  margin: var(--space-2) 0;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  cursor: pointer;
  box-shadow: var(--shadow-ring);
}

.range-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-ring);
}

/* ---- 更新标签 ---- */
.update-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-mint);
  color: var(--color-brand-deep);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ---- E-E-A-T 信任行 ---- */
.trust-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0;
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

.trust-line a {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-decoration-color: var(--color-brand-primary);
}

/* ---- 顶部 30% 内链：page-intro（Wise Mint 信息条） ---- */
.page-intro {
  margin: var(--space-3) 0 var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-mint);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-brand-deep);
}

.page-intro strong {
  color: var(--color-brand-deep);
  font-weight: var(--weight-bold);
  margin-right: var(--space-1);
}

.page-intro a {
  color: var(--color-brand-deep);
  font-weight: var(--weight-semibold);
  text-decoration-color: var(--color-brand-deep);
  text-underline-offset: 0.18em;
}

.page-intro a:hover {
  text-decoration-color: var(--color-brand-on-primary);
}

/* ---- Verdict / Editor's Recommendation 区块（Commercial Investigation 立场卡） ---- */
.verdict-box {
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  margin: var(--space-6) 0;
}

.verdict-box h2 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  color: var(--color-brand-deep);
}

.verdict-lead {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  font-style: italic;
}

.verdict-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .verdict-grid {
    grid-template-columns: 1fr 1fr;
  }
  .verdict-card-primary {
    grid-column: 1 / -1;
  }
}

.verdict-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.verdict-card-primary {
  background: var(--color-bg-mint);
  border-color: var(--color-brand-deep);
}

.verdict-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-brand-deep);
  margin: 0;
  line-height: var(--leading-snug);
}

.verdict-recommendation {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin: 0;
}

.verdict-reason {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

.verdict-action {
  font-size: var(--text-sm);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.verdict-action a {
  color: var(--color-brand-deep);
  font-weight: var(--weight-semibold);
  text-decoration-color: var(--color-brand-primary);
}

.verdict-disclaimer {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ---- 原创数据表配套（Information Gain 标记） ---- */
.data-source {
  font-size: var(--text-base);
  color: var(--color-text);
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-mint);
  border-radius: var(--radius-md);
  line-height: 1.6;
}

.data-source strong {
  color: var(--color-brand-deep);
}

.data-source-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-6);
  padding: 0 var(--space-2);
  line-height: 1.55;
}

.data-source-note em {
  font-style: italic;
}

/* ---- I-Language Level 5: Impact (Key Takeaways + Next Question) ---- */
.il-impact {
  background: var(--color-bg-secondary);
  border-top: 2px solid var(--color-brand-primary);
  border-bottom: 2px solid var(--color-brand-primary);
  padding: var(--space-10) 0;
}

.il-impact h2 {
  color: var(--color-brand-deep);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.il-impact-lead {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  font-style: italic;
}

.takeaways-list {
  list-style: none;
  counter-reset: takeaway;
  padding: 0;
  margin: 0 0 var(--space-8);
}

.takeaways-list li {
  counter-increment: takeaway;
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-4) 4rem;
  margin-bottom: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
}

.takeaways-list li::before {
  content: counter(takeaway);
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-primary);
  color: var(--color-brand-on-primary);
  font-weight: var(--weight-black);
  font-size: var(--text-base);
  border-radius: var(--radius-pill);
}

.takeaways-list li strong {
  color: var(--color-brand-deep);
}

.il-impact h3 {
  color: var(--color-brand-deep);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
}

.next-questions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.next-questions-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}

.next-questions-list li strong {
  color: var(--color-text);
}

.next-questions-list a {
  color: var(--color-brand-deep);
  font-weight: var(--weight-semibold);
  text-decoration-color: var(--color-brand-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

@media (min-width: 768px) {
  .next-questions-list li {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ---- Article TOC（UX02 章节导航） ---- */
.toc-section {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.article-toc {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
}

.article-toc .toc-heading {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.toc-list {
  list-style: none;
  counter-reset: toc;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .toc-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-6);
  }
}

.toc-list li {
  counter-increment: toc;
  padding: var(--space-2) 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  border-bottom: 1px dashed var(--color-border);
  font-size: var(--text-base);
  line-height: 1.4;
}

.toc-list li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--color-brand-deep);
  flex-shrink: 0;
  min-width: 2rem;
}

.toc-list a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-medium);
  flex: 1;
}

.toc-list a:hover {
  color: var(--color-brand-deep);
  text-decoration: underline;
  text-decoration-color: var(--color-brand-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* ---- 阅读进度条（UX02 长文章独有） ---- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(14, 15, 12, 0.06);
  z-index: 1100;
  pointer-events: none;
}

.reading-progress-fill {
  height: 100%;
  width: 0;
  background: var(--color-brand-primary);
  transition: width 80ms linear;
  box-shadow: 0 0 6px rgba(159, 232, 112, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .reading-progress-fill {
    transition: none;
  }
}

/* ---- Mid-article Content Hook（UX03 中段参与度卡） ---- */
.content-hook {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-5);
  background: var(--color-bg);
  border: 2px solid var(--color-brand-primary);
  border-radius: var(--radius-md);
  position: relative;
}

.content-hook::before {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  bottom: -2px;
  width: 6px;
  background: var(--color-brand-primary);
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.content-hook-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-mint);
  color: var(--color-brand-deep);
  border-radius: var(--radius-pill);
}

.content-hook-body {
  flex: 1;
  min-width: 0;
}

.content-hook-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-brand-deep);
  margin: 0 0 var(--space-2);
}

.content-hook-body p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}

.content-hook-body p strong {
  color: var(--color-brand-deep);
}

.content-hook-body p em {
  font-style: italic;
  color: var(--color-text-secondary);
}

@media (max-width: 600px) {
  .content-hook {
    flex-direction: column;
    gap: var(--space-3);
  }
  .content-hook-icon {
    width: 40px;
    height: 40px;
  }
}

/* ---- Sortable Table（UX05） ---- */
.sortable-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-mint);
  border-radius: var(--radius-pill);
  width: fit-content;
}

.sortable-hint svg {
  color: var(--color-brand-deep);
}

.sortable-table thead th.sortable-column {
  cursor: pointer;
  user-select: none;
  padding-right: 1.6em;
  position: relative;
  transition: background-color var(--transition-fast);
}

.sortable-table thead th.sortable-column:hover,
.sortable-table thead th.sortable-column:focus {
  background: var(--color-bg-mint);
  outline: none;
}

.sortable-table thead th.sortable-column::after {
  content: '\2195';
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.35;
  font-size: 0.85em;
}

.sortable-table thead th[aria-sort="ascending"]::after {
  content: '\2191';
  opacity: 1;
  color: var(--color-brand-deep);
}

.sortable-table thead th[aria-sort="descending"]::after {
  content: '\2193';
  opacity: 1;
  color: var(--color-brand-deep);
}

/* ---- Article Poll（UX05） ---- */
.article-poll {
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-6);
  background: var(--color-bg-mint);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-brand-primary);
}

.article-poll-title {
  margin: 0 0 var(--space-2);
  color: var(--color-brand-deep);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.article-poll-lead {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
  font-style: italic;
}

.article-poll-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.article-poll-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  font-size: var(--text-base);
  color: var(--color-text);
}

.article-poll-option:hover {
  border-color: var(--color-brand-deep);
  background: var(--color-bg-mint);
}

.article-poll-option input[type="radio"] {
  accent-color: var(--color-brand-deep);
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
}

.article-poll-option:has(input:checked) {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-deep);
  color: var(--color-brand-on-primary);
  font-weight: var(--weight-semibold);
}

.article-poll-option:has(input:checked) strong {
  color: var(--color-brand-on-primary);
}

.article-poll-option-text strong {
  color: var(--color-brand-deep);
  font-weight: var(--weight-bold);
}

.article-poll-result {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-5);
  background: var(--color-bg);
  border: 2px solid var(--color-brand-deep);
  border-radius: var(--radius-md);
  animation: pollFadeIn 240ms ease-out;
}

.article-poll-result-title {
  margin: 0 0 var(--space-3);
  color: var(--color-brand-deep);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.article-poll-result-content p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.article-poll-result-content p:last-child {
  margin-bottom: 0;
}

@keyframes pollFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .article-poll-result {
    animation: none;
  }
  .article-poll-option {
    transition: none;
  }
}

/* ============================================================
   响应式断点（h1/h2/Hero 已用 clamp 自动响应，无需重设）
   ============================================================ */

/* 平板竖屏 (≥640px) */
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* 平板横屏 (≥768px) */
@media (min-width: 768px) {
  .tool-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 桌面 (≥1024px)
   注：导航重构已经迁移到 Header 组件中的 @media (min-width: 1024px)
*/
@media (min-width: 1024px) {
  /* 两栏布局（计算器+侧栏广告） */
  .page-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
    align-items: start;
  }

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

  .page-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }

  .form-grid { grid-template-columns: 1fr 1fr 1fr; }
  .result-grid { grid-template-columns: repeat(3, 1fr); }
  .tool-grid { grid-template-columns: repeat(4, 1fr); }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* 大桌面 (≥1280px) */
@media (min-width: 1280px) {
  .container { padding: 0 var(--space-8); }
}

/* ---- 打印样式 ---- */
@media print {
  .site-header,
  .site-footer,
  .ad-container,
  .menu-toggle,
  .nav-main,
  .related-tools,
  .btn { display: none !important; }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .calc-card {
    border: 1px solid #ccc;
    box-shadow: none;
  }
}

/* ---- 辅助功能 ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-brand-primary);
  color: var(--color-brand-on-primary);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  z-index: 9999;
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}

/* ---- 焦点可见性（Wise: solid ring on text color） ---- */
:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}