/* ============================================================
   CPM 计算器网站 - 主样式表
   网站：calculatecpm.net
   描述：面向数字营销人员的 CPM（千次展示成本）计算器
   设计理念：移动优先、响应式、专业蓝色配色方案
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS 重置与基础样式
   - 消除浏览器默认样式差异
   - 建立统一的盒模型和排版基线
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* 移除默认的表单元素外观 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* ------------------------------------------------------------
   2. CSS 自定义属性（变量）
   设计系统：Notion-inspired
   单一来源：/DESIGN.md（项目根目录，version: alpha）
   原则：颜色 / 字阶 / 间距 / 圆角 严格使用 DESIGN.md 定义的 token
   ------------------------------------------------------------ */
:root {
  /* ---- 品牌与 CTA ---- */
  --color-primary: #5645d4;
  --color-primary-hover: #4534b3;
  --color-primary-dark: #3a2a99;
  --color-primary-light: #e6e0f5;
  --color-primary-rgb: 86, 69, 212;
  --color-on-primary: #ffffff;

  /* ---- 链接色（与品牌紫区分） ---- */
  --color-link: #0075de;
  --color-link-hover: #005bab;

  /* ---- 品牌色谱（Notion 数据库属性配色） ---- */
  --color-brand-navy: #0a1530;
  --color-brand-navy-deep: #070f24;
  --color-brand-navy-mid: #1a2a52;
  --color-brand-orange: #dd5b00;
  --color-brand-orange-deep: #793400;
  --color-brand-pink: #ff64c8;
  --color-brand-pink-deep: #a02e6d;
  --color-brand-purple: #7b3ff2;
  --color-brand-purple-300: #d6b6f6;
  --color-brand-purple-800: #391c57;
  --color-brand-teal: #2a9d99;
  --color-brand-green: #1aae39;
  --color-brand-yellow: #f5d75e;
  --color-brand-brown: #523410;

  /* ---- pastel 卡片底色（feature card tints） ---- */
  --color-tint-peach: #ffe8d4;
  --color-tint-rose: #fde0ec;
  --color-tint-mint: #d9f3e1;
  --color-tint-lavender: #e6e0f5;
  --color-tint-sky: #dcecfa;
  --color-tint-yellow: #fef7d6;
  --color-tint-yellow-bold: #f9e79f;
  --color-tint-cream: #f8f5e8;
  --color-tint-gray: #f0eeec;

  /* ---- 表面与边框 ---- */
  --color-bg: #ffffff;
  --color-bg-secondary: #f6f5f4;
  --color-bg-tertiary: #fafaf9;
  --color-surface: #ffffff;
  --color-bg-alt: #f6f5f4;
  --color-border: #c8c4be;
  --color-border-light: #e5e3df;
  --color-border-soft: #ede9e4;
  --color-border-focus: var(--color-primary);

  /* ---- 文本（charcoal 暖炭灰为正文默认） ---- */
  --color-text: #37352f;
  --color-text-deep: #1a1a1a;
  --color-text-secondary: #5d5b54;
  --color-text-tertiary: #787671;
  --color-text-muted: #a4a097;
  --color-text-disabled: #bbb8b1;
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: #a4a097;

  /* ---- 语义色（pastel 替代旧的强对比色） ---- */
  --color-success: #1aae39;
  --color-success-light: #d9f3e1;
  --color-warning: #dd5b00;
  --color-warning-light: #ffe8d4;
  --color-error: #e03131;
  --color-error-light: #fde0ec;

  /* ---- 灰阶（保留兼容旧组件，重映射为 Notion 暖灰系） ---- */
  --color-gray-50: #fafaf9;
  --color-gray-100: #f6f5f4;
  --color-gray-200: #ede9e4;
  --color-gray-300: #e5e3df;
  --color-gray-400: #c8c4be;
  --color-gray-500: #bbb8b1;
  --color-gray-600: #a4a097;
  --color-gray-700: #787671;
  --color-gray-800: #5d5b54;
  --color-gray-900: #37352f;

  /* ---- 字体（系统字体栈，不引入外部字体） ---- */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono",
    "Courier New", monospace;

  /* ---- 字阶（DESIGN.md 标准） ---- */
  --text-display: 5rem;        /* 80px - hero-display */
  --text-display-sm: 3.5rem;   /* 56px - display-lg */
  --text-h1: 3rem;             /* 48px */
  --text-h2: 2.25rem;          /* 36px */
  --text-h3: 1.75rem;          /* 28px */
  --text-h4: 1.375rem;         /* 22px */
  --text-h5: 1.125rem;         /* 18px */
  --text-subtitle: 1.125rem;   /* 18px - 副标题 */
  --text-base: 1rem;           /* 16px - body-md */
  --text-sm: 0.875rem;         /* 14px - body-sm */
  --text-xs: 0.8125rem;        /* 13px - caption */
  --text-2xs: 0.75rem;         /* 12px - micro */
  --text-2xs-caps: 0.6875rem;  /* 11px - micro-uppercase（仅 badge） */
  --text-button: 0.875rem;     /* 14px - button */

  /* 兼容旧组件别名（不再扩展使用） */
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* ---- 字重 ---- */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ---- 行高 ---- */
  --leading-display: 1.05;
  --leading-display-lg: 1.10;
  --leading-h1: 1.15;
  --leading-h2: 1.20;
  --leading-h3: 1.25;
  --leading-h4: 1.30;
  --leading-h5: 1.40;
  --leading-body: 1.55;
  --leading-body-sm: 1.50;
  --leading-caption: 1.40;
  --leading-button: 1.30;
  /* 兼容旧别名 */
  --leading-tight: 1.20;
  --leading-normal: 1.55;
  --leading-relaxed: 1.55;

  /* ---- 字距 ---- */
  --tracking-display: -2px;
  --tracking-display-lg: -1px;
  --tracking-h1: -0.5px;
  --tracking-h2: -0.5px;
  --tracking-caps: 1px;
  --tracking-normal: 0;

  /* ---- 间距（DESIGN.md 标准命名 + 旧别名） ---- */
  --space-xxs: 0.25rem;        /*  4px */
  --space-xs: 0.5rem;          /*  8px */
  --space-sm: 0.75rem;         /* 12px */
  --space-md: 1rem;            /* 16px */
  --space-lg: 1.25rem;         /* 20px */
  --space-xl: 1.5rem;          /* 24px */
  --space-xxl: 2rem;           /* 32px */
  --space-xxxl: 2.5rem;        /* 40px */
  --space-section-sm: 3rem;    /* 48px */
  --space-section: 4rem;       /* 64px */
  --space-section-lg: 6rem;    /* 96px */
  --space-hero: 7.5rem;        /* 120px */

  /* 旧 --space-N 别名（让未重构组件继续工作，逐步替换） */
  --space-1: var(--space-xxs);
  --space-2: var(--space-xs);
  --space-3: var(--space-sm);
  --space-4: var(--space-md);
  --space-5: var(--space-lg);
  --space-6: var(--space-xl);
  --space-8: var(--space-xxl);
  --space-10: var(--space-xxxl);
  --space-12: var(--space-section-sm);
  --space-16: var(--space-section);
  --space-20: 5rem;

  /* ---- 圆角（DESIGN.md 标准） ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-xxxl: 24px;
  --radius-full: 9999px;

  /* ---- 阴影（Notion Elevation Levels；默认 L0 无阴影 + hairline border） ---- */
  --shadow-sm: rgba(15, 15, 15, 0.04) 0px 1px 2px 0px;        /* L1 subtle */
  --shadow-md: rgba(15, 15, 15, 0.08) 0px 4px 12px 0px;       /* L2 card */
  --shadow-lg: rgba(15, 15, 15, 0.16) 0px 16px 48px -8px;     /* L4 modal */
  --shadow-xl: rgba(15, 15, 15, 0.20) 0px 24px 48px -8px;     /* L3 hero mockup */
  --shadow-card: var(--shadow-md);
  --shadow-card-hover: var(--shadow-lg);

  /* ---- 过渡 ---- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ---- 布局 ----
     单一容器宽度：1200px（与 DESIGN.md 1280 接近，工具页友好）
     不再使用 prose / xl 双轨制 —— 所有 section 容器统一对齐
     散文段落自己用 --measure 控制可读宽度 */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  /* 站点主容器（所有 section 统一对齐到这一个宽度） */
  --container-page: 1200px;
  /* 散文段落可读 measure（px 单位，避免 ch 受字号影响）
     800px @ 15-16px 字体 ≈ 100-110 字符/行，工具页可读且不显窄 */
  --measure: 800px;
  --container-content: 880px;
  --content-max-width: 880px;
  --container-gutter: 2rem;

  /* 触摸目标（无障碍 / WCAG，覆盖 DESIGN.md 的 44px） */
  --touch-target: 48px;

  /* z-index 层级 */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ------------------------------------------------------------
   3. 排版样式
   字阶 / 字重 / 行高 / 字距 严格对齐 DESIGN.md（heading-1 ~ heading-5）
   规则：
   - 全部标题使用 weight 600（DESIGN.md 标准），不再用 700
   - 移除 h6 的 ALL CAPS（违反硬规则）
   - p 默认色 = charcoal #37352f，提升正文可读性
   - 尺寸两步响应：mobile-first → ≥768px 中档 → ≥1024px DESIGN.md token 完整值
   ------------------------------------------------------------ */
body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* 标题统一基线（mobile-first） */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

h1 {
  font-size: 2rem;                          /* 32px mobile */
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
}

h2 {
  font-size: 1.5rem;                        /* 24px mobile */
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}

h3 {
  font-size: 1.25rem;                       /* 20px mobile */
  line-height: var(--leading-h3);
}

h4 {
  font-size: 1.125rem;                      /* 18px mobile */
  line-height: var(--leading-h4);
}

h5 {
  font-size: 1rem;                          /* 16px mobile */
  line-height: var(--leading-h5);
}

h6 {
  font-size: var(--text-sm);                /* 14px - 不再使用 uppercase / letter-spacing */
  line-height: var(--leading-h5);
  color: var(--color-text-secondary);
}

/* 锚点跳转时避免被固定顶栏遮挡（功能性，保留） */
main h2,
main h3,
.article-content h2,
.article-content h3 {
  scroll-margin-top: 5.5rem;
}

p {
  margin-top: 0;
  margin-bottom: var(--space-md);
  color: var(--color-text);
  line-height: var(--leading-body);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* 焦点可见样式 - 无障碍键盘导航（功能型，保留） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

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

em, i {
  font-style: italic;
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* 行内代码：surface 底 + 极小圆角 + 等宽字体 */
code {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
  color: var(--color-text-deep);
  background-color: var(--color-bg-secondary);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-xs);
}

/* 引用块：去掉品牌紫装饰；改用中性 hairline + 缩进 + slate 文字（编辑型样式） */
blockquote {
  margin: var(--space-xl) 0;
  padding: var(--space-xs) var(--space-md);
  border-left: 3px solid var(--color-border-light);
  color: var(--color-text-secondary);
  font-style: italic;
}

blockquote p {
  color: inherit;
  margin-bottom: 0;
}

/* 高亮标记：保留语义高亮，使用 DESIGN.md 浅黄 tint */
mark {
  background-color: var(--color-tint-yellow);
  color: inherit;
  padding: 0.125em 0.25em;
  border-radius: var(--radius-xs);
}

/* 分割线：hairline 单像素 */
hr {
  border: none;
  height: 1px;
  background-color: var(--color-border-light);
  margin: var(--space-xxl) 0;
}

/* ------------------------------------------------------------
   4. 布局系统（DESIGN.md Body Container + Section Rhythm）
   规则（必须遵守）：
   - body container：max-width 1280px，gutter 32px desktop / 24px tablet / 16px mobile
   - .container 默认 1280（数据表格/计算器/营销区）
   - .container-narrow / .container--narrow = 880 readable width（文章页 article-content 同款）
   - .container--wide = 1440，仅用于 hero / 全幅展示（未来扩展）
   - section 节奏 token：section（默认）/ section-lg / section-sm（DESIGN.md 80/120/48 三档）
   - 横向溢出兜底：所有外层 wrapper 不允许产生横向滚动
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-page);     /* 1200，所有 section 统一对齐 */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* 文章/可读宽度容器（双类名兼容） */
.container-narrow,
.container.container--narrow {
  max-width: var(--content-max-width);
}

/* 大幅展示容器（hero、bleed showcase 用） */
.container.container--wide {
  max-width: 1440px;
}

/* 弹性盒辅助布局 */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: var(--space-2);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-6 {
  gap: var(--space-6);
}

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

/* 栅格布局 */
.grid {
  display: grid;
  gap: var(--space-6);
}

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

/* 区块间距 —— 高度紧凑工具页 rhythm（用户多次反馈：模块间空白还是太大）
   两个 section 间 gap = 上 padding-bottom + 下 padding-top
   - mobile: 20 + 20 = 40px gap
   - tablet: 24 + 24 = 48px gap
   - desktop: 32 + 32 = 64px gap （vs 一开始 160px，减少 60%） */
.section,
main > section,
.content-section {
  padding-top: var(--space-lg);            /* mobile 20 */
  padding-bottom: var(--space-lg);
}

/* 大节奏（关键展示区）：仅比默认略加 */
.section--lg {
  padding-top: var(--space-xl);            /* mobile 24 */
  padding-bottom: var(--space-xl);
}

/* 紧凑节奏（连续小区块、广告占位、相邻同语义模块） */
.section--sm {
  padding-top: var(--space-md);            /* mobile 16 */
  padding-bottom: var(--space-md);
}

/* 横向溢出兜底（用户硬规则：任何模块不能超出网页范围）
   说明：仅 body 用 overflow-x clip，避免影响 html 滚动锚定与 sticky 计算 */
body {
  overflow-x: clip;
  max-width: 100%;
}

/* ------------------------------------------------------------
   4-bis. 容器统一策略（用户硬规则）
   - 所有 section 容器统一为 .container = 1200px（--container-page）
   - 任何模块的文字都使用网页宽度，不单独规定文字宽度
     → 不给段落 / 标题 / subtitle 设 max-width
     → 文字与卡片/网格/表格共用同一容器宽度
   - 数据/网格/表格利用容器全宽（1200）
   ------------------------------------------------------------ */

/* 文章页（含 .article-content）：让 main 内所有 container 收窄到 880
   与 article-content 自身的 max-width: 880 视觉对齐
   避免 1200 容器 → 880 article 的宽度跳跃
   文章页是"长文阅读"语义，整页统一窄宽是合理的 typography pattern */
main:has(.article-content) > .container,
main:has(.article-content) > nav > .container,
main:has(.article-content) > section > .container {
  max-width: var(--container-content);     /* 880 */
}

/* ------------------------------------------------------------
   5. 页头与导航（DESIGN.md：sticky white bar + bottom hairline）
   规则：
   - 顶栏无 box-shadow（按硬规则，shadow 用 hairline border 替代）
   - Logo 用 ink 而非品牌紫（"Don't use purple for body text/surfaces"）
   - Hover/Active 用中性色或 underline，不染品牌紫
   - 桌面端高 68px / 移动端 64px（DESIGN.md 规范）
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--space-md);
  max-width: var(--container-xl);
  margin: 0 auto;
  gap: var(--space-md);
}

/* 网站 Logo（文字商标 + 副标） */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-deep);
  white-space: nowrap;
  text-decoration: none;
}

.site-logo:hover,
.site-logo:focus-visible {
  text-decoration: none;
  color: var(--color-text-deep);
}

.site-logo strong {
  font-weight: var(--font-semibold);
}

.site-logo img,
.site-logo svg {
  width: 32px;
  height: 32px;
}

/* Logo 副标题（移动端隐藏，平板及以上显示） */
.logo-tagline {
  display: none;
  font-size: var(--text-2xs);
  font-weight: var(--font-normal);
  color: var(--color-text-tertiary);
  margin-left: var(--space-xs);
}

/* 移动端汉堡菜单按钮 */
.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: none;
  border: none;
  color: var(--color-text);
  transition: background-color var(--transition-fast);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background-color: var(--color-bg-secondary);
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 主导航 - 移动端默认隐藏（向下滑出抽屉） */
.main-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);     /* 功能型阴影：抽屉悬浮于内容之上 */
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
  z-index: var(--z-sticky);
}

.main-nav.is-open {
  max-height: 80vh;
  overflow-y: auto;
}

.nav-list,
.main-nav > ul {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) 0;
}

/* 导航链接（移动端：垂直列表，紧凑触摸区） */
.nav-link,
.main-nav > ul > li > a {
  display: flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color var(--transition-fast), background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-text-deep);
  background-color: var(--color-bg-secondary);
  text-decoration: none;
}

.nav-link.active {
  color: var(--color-text-deep);
  font-weight: var(--font-semibold);
  border-left-color: var(--color-primary);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border-left: 3px solid transparent;
}

/* 下拉菜单（移动端折叠在父项下方） */
.main-nav .nav-dropdown-menu,
.nav-dropdown-menu {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.nav-dropdown.is-open > .nav-dropdown-menu {
  max-height: 600px;
}

.nav-dropdown-menu li {
  display: list-item;
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: var(--space-xs) var(--space-xl) var(--space-xs) var(--space-xxxl);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  color: var(--color-text-deep);
  background-color: var(--color-bg-secondary);
  text-decoration: none;
}

/* 页头操作按钮区域 */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ------------------------------------------------------------
   6. 英雄（Hero）区域 —— 工具页紧凑版
   设计立意：
   - 这是计算器工具站，首屏体验 = 用户尽快看到并使用计算器
   - Hero 只承担"页面身份 + 一句价值主张"，不做营销大字戏剧
   - 字号克制：mobile 24px → wide 36px（远小于 DESIGN.md marketing hero 的 80px）
   - padding 紧凑：mobile 24px → wide 56px（远小于 DESIGN.md spacing.hero 120px）
   - 移除渐变 / 阴影（硬规则）
   ------------------------------------------------------------ */
.hero,
.hero-section {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  padding: var(--space-lg) var(--space-md);  /* 20px 上下 mobile —— 高度紧凑 */
  text-align: center;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
}

.hero h1,
.hero-section h1 {
  color: var(--color-text-deep);
  font-size: 1.5rem;                      /* 24px mobile —— 工具页克制版 */
  font-weight: var(--font-semibold);
  line-height: 1.25;
  letter-spacing: -0.3px;
  margin-top: 0;
  margin-bottom: var(--space-xs);
  text-wrap: balance;
}

.hero p,
.hero-section p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);                /* 14px mobile */
  line-height: 1.5;
  margin: 0 auto var(--space-sm);           /* 紧凑：12px 下间距 */
}

/* Hero 标题与段落：跟随父容器宽度（不单独规定文字宽度，遵守用户硬规则） */

.hero p strong,
.hero-section p strong {
  color: var(--color-text-deep);
  font-weight: var(--font-semibold);
}

/* Hero 内的主要 CTA：保持 DESIGN.md button-primary 比例（具体按钮规范在 Calculator 阶段处理） */
.hero .btn-primary,
.hero-section .btn-primary {
  font-size: var(--text-base);
  padding: var(--space-sm) var(--space-xl);
}

/* ------------------------------------------------------------
   7. 计算器卡片（DESIGN.md card-base：白底 + hairline border + 无阴影）
   规则：
   - 移除装饰型 box-shadow（按硬规则用 border 替代）
   - 圆角对齐 DESIGN.md card-base radius.lg = 12px
   ------------------------------------------------------------ */
.calculator-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);                 /* 20px mobile，紧凑 */
  margin: 0 auto;                            /* 移除上 margin，让卡片紧贴标题 */
  max-width: 720px;
  position: relative;
}

.calculator-card .card-title {
  font-size: var(--text-h4);
  font-weight: var(--font-semibold);
  line-height: var(--leading-h4);
  color: var(--color-text-deep);
  margin: 0 0 var(--space-xl);
  text-align: center;
}

/* 计算器模式切换标签（segmented tabs on surface tray） */
.calc-tabs {
  display: flex;
  gap: var(--space-xxs);
  background-color: var(--color-bg-secondary);
  padding: var(--space-xxs);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
}

.calc-tab {
  flex: 1;
  min-height: var(--touch-target);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-button);
  font-weight: var(--font-medium);
  line-height: var(--leading-button);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast),
    border-color var(--transition-fast);
  text-align: center;
}

.calc-tab:hover {
  color: var(--color-text-deep);
}

/* Active tab：用 white 抬出 + hairline 描边（替代装饰阴影） */
.calc-tab.active {
  background-color: var(--color-bg);
  color: var(--color-text-deep);
  border-color: var(--color-border-light);
  font-weight: var(--font-semibold);
}

/* ------------------------------------------------------------
   8. 计算器输入字段（DESIGN.md text-input：1px hairline + 2px focus border）
   规则：
   - 边框从 2px 减到 1px（DESIGN.md spec）
   - focus 状态用 2px primary 描边替代原 box-shadow ring（更克制，符合 DESIGN.md text-input-focused）
   ------------------------------------------------------------ */
.calc-input-group {
  margin-bottom: var(--space-lg);
}

.calc-input-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-body-sm);
  color: var(--color-text-deep);
  margin-bottom: var(--space-xs);
}

.calc-input-group .input-hint {
  display: block;
  font-size: var(--text-xs);
  line-height: var(--leading-caption);
  color: var(--color-text-tertiary);
  margin-top: var(--space-xxs);
}

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

.input-prefix,
.input-suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-sm);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  white-space: nowrap;
}

.input-prefix {
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-suffix {
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.calc-input {
  width: 100%;
  min-height: 52px;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-body);
  color: var(--color-text-deep);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-wrapper .calc-input {
  border-radius: 0;
}

.input-wrapper .calc-input:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-wrapper .calc-input:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.calc-input::placeholder {
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

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

/* DESIGN.md text-input-focused：视觉 2px primary 描边
   实现：1px border + 1px inset shadow 叠加成视觉 2px，避免修改 border-width 导致布局偏移 */
.calc-input:focus,
.calc-input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.calc-input.is-valid {
  border-color: var(--color-success);
}

.calc-input.is-invalid {
  border-color: var(--color-error);
}

.input-error-msg {
  display: none;
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-xxs);
  line-height: var(--leading-caption);
}

.calc-input.is-invalid ~ .input-error-msg {
  display: block;
}

/* ------------------------------------------------------------
   9. 计算按钮（DESIGN.md button-primary 大尺寸版）
   规则：
   - 移除 linear-gradient 背景（硬规则）
   - 移除装饰型 box-shadow 与 ::after 高光（硬规则）
   - 移除 hover transform（装饰型微动效）
   - 仅保留功能型反馈：hover 加深底色 / active 更深底色 / loading spinner
   ------------------------------------------------------------ */
.calc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  min-height: 52px;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-button);
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-top: var(--space-xl);
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.calc-btn:hover {
  background-color: var(--color-primary-hover);
}

.calc-btn:active {
  background-color: var(--color-primary-dark);
}

.calc-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-primary);
}

/* 绿色变体（替代主色 CTA 用于"成功/确认"语义场景） */
.calc-btn--green {
  background-color: var(--color-success);
}

.calc-btn--green:hover {
  background-color: #178b2e;       /* success -10% 明度 */
}

.calc-btn--green:active {
  background-color: #136f26;
}

/* Reset 按钮：DESIGN.md button-secondary 中性次级风（替代旧版 inline 灰渐变 + 阴影） */
.calc-btn--reset {
  background-color: transparent;
  color: var(--color-text-deep);
  border: 1px solid var(--color-border);
}

.calc-btn--reset:hover,
.calc-btn--reset:focus-visible {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-text-tertiary);
}

.calc-btn--reset:active {
  background-color: var(--color-border-light);
}

/* 文章页目录（Table of Contents）——
   通过 aria-label 选择器替代历史 inline 样式，统一受设计 token 控制 */
[aria-label="Table of Contents"] {
  margin-bottom: var(--space-xl);
}

[aria-label="Table of Contents"] .card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);
}

[aria-label="Table of Contents"] ol {
  list-style: decimal;
  padding-left: var(--space-xl);
  margin: 0;
}

[aria-label="Table of Contents"] li {
  margin-bottom: var(--space-xs);
  line-height: var(--leading-body-sm);
}

[aria-label="Table of Contents"] li:last-child {
  margin-bottom: 0;
}

[aria-label="Table of Contents"] a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

[aria-label="Table of Contents"] a:hover,
[aria-label="Table of Contents"] a:focus-visible {
  color: var(--color-text-deep);
  text-decoration: underline;
}

/* 加载状态（功能型 spinner，保留） */
.calc-btn.is-loading {
  pointer-events: none;
  opacity: 0.8;
}

.calc-btn.is-loading::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

/* ------------------------------------------------------------
   10. 结果展示区域
   规则：
   - label 用 DESIGN.md micro-uppercase token（11px / 600 / 1px LS，仅限 micro labels）
   - value 字重 700 → 600（DESIGN.md 标准）
   - 高亮容器使用 lavender + 2px primary 描边（DESIGN.md pricing-card-featured 风格）
   ------------------------------------------------------------ */
.calc-result {
  margin-top: var(--space-xl);
  padding: var(--space-xl);
  background-color: var(--color-tint-lavender);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  text-align: center;
  animation: fadeSlideUp 0.4s ease forwards;
}

.calc-result.hidden {
  display: none;
}

.calc-result__label {
  font-size: var(--text-2xs-caps);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-primary-dark);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.calc-result__value {
  font-size: var(--text-h2);
  font-weight: var(--font-semibold);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.calc-result__detail {
  font-size: var(--text-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-secondary);
}

/* 成功变体（语义"积极"，使用 mint tint + success border） */
.calc-result--success {
  background-color: var(--color-tint-mint);
  border-color: var(--color-success);
}

.calc-result--success .calc-result__label,
.calc-result--success .calc-result__value {
  color: var(--color-success);
}

/* 多项结果网格 */
.result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.result-item {
  padding: var(--space-md);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  text-align: center;
}

.result-item__label {
  font-size: var(--text-2xs-caps);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-xxs);
}

.result-item__value {
  font-size: var(--text-h3);
  font-weight: var(--font-semibold);
  line-height: var(--leading-h3);
  color: var(--color-primary);
}

/* ------------------------------------------------------------
   11. 内容区域
   - 文章、常见问题、基准数据表格
   ------------------------------------------------------------ */
.content-section {
  padding: var(--space-6) 0;
}

.content-section:nth-child(even) {
  background-color: var(--color-bg-secondary);
}

.content-section + .content-section {
  border-top: 1px solid var(--color-border-light);
}

.content-section__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.content-section__header h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.content-section__header p {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 文章内容排版 */
.article-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.article-content h2 {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.article-content h3 {
  margin-top: var(--space-6);
}

.article-content p {
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

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

.article-content ul {
  list-style: disc;
}

.article-content ol {
  list-style: decimal;
}

.article-content li {
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.article-content li::marker {
  color: var(--color-primary);
}

/* 公式展示框（去渐变；保留功能型 4px 左色条作为"重要内容"信号） */
.formula-box {
  background-color: var(--color-tint-lavender);
  border: 1px solid var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin: var(--space-xl) 0;
  text-align: center;
}

.formula-box__label {
  font-size: var(--text-2xs-caps);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-primary-dark);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.formula-box__formula {
  font-family: var(--font-family-mono);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-primary-dark);
  padding: var(--space-sm) 0;
  word-break: break-word;
}

.formula-box__description {
  font-size: var(--text-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   12. 卡片与提示框
   规则：
   - 通用 .card 用 DESIGN.md card-base：白底 + hairline border + Level 0 flat（无阴影）
   - hover 反馈通过 border-color 变化替代 shadow + transform
   - .alert 4 变体使用 DESIGN.md pastel tint 色板（lavender / mint / peach / rose）
   ------------------------------------------------------------ */
.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: border-color var(--transition-fast);
}

.card:hover {
  border-color: var(--color-border);
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-link:hover,
.card-link:focus-visible {
  text-decoration: none;
}

.card-link:hover .card,
.card-link:focus-visible .card {
  border-color: var(--color-border);
}

.card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.card__title {
  font-size: var(--text-h5);
  font-weight: var(--font-semibold);
  line-height: var(--leading-h5);
  margin: 0 0 var(--space-xs);
  color: var(--color-text-deep);
}

.card__description {
  font-size: var(--text-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* 提示/警告框（DESIGN.md pastel tints + 语义色文字） */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  line-height: var(--leading-body-sm);
  border: 1px solid transparent;
}

.alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.alert-info {
  background-color: var(--color-tint-lavender);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.alert-success {
  background-color: var(--color-tint-mint);
  border-color: var(--color-success-light);
  color: var(--color-success);
}

.alert-warning {
  background-color: var(--color-tint-peach);
  border-color: var(--color-warning-light);
  color: var(--color-brand-orange-deep);
}

.alert-error {
  background-color: var(--color-tint-rose);
  border-color: var(--color-error-light);
  color: var(--color-error);
}

/* ------------------------------------------------------------
   13. 响应式表格（DESIGN.md comparison-table + comparison-row 风）
   规则：
   - 表头从深色翻转为 surface 软底 + ink 文字（DESIGN.md 编辑风）
   - 表头不再 ALL CAPS（硬规则）
   - 行 hover/zebra 用 surface tint（不染品牌紫 lavender）
   - 表内 badge 全部 token 化、用 DESIGN.md tag 色板
   ------------------------------------------------------------ */
.table-wrapper,
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-md) 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}

.benchmark-table,
.comparison-table {
  width: 100%;
  font-size: var(--text-sm);
  line-height: var(--leading-body-sm);
  font-variant-numeric: tabular-nums;
  border-collapse: collapse;
}

.benchmark-table {
  min-width: 500px;
}

/* 表头：surface 软底 + ink 文字 + sentence case */
.benchmark-table thead,
.comparison-table thead {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-deep);
}

.benchmark-table th,
.comparison-table th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-caption);
  color: var(--color-text-deep);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-light);
}

.benchmark-table td,
.comparison-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-text);
}

.benchmark-table tbody tr:last-child td,
.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.benchmark-table tbody tr:nth-child(even),
.comparison-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-tertiary);
}

.benchmark-table tbody tr:hover,
.comparison-table tbody tr:hover,
.benchmark-table tbody tr:nth-child(even):hover,
.comparison-table tbody tr:nth-child(even):hover {
  background-color: var(--color-bg-secondary);
}

/* 表格内徽章（DESIGN.md badge-tag-* 软色板） */
.table-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-caption);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.table-badge--low {
  background-color: var(--color-tint-mint);
  color: var(--color-success);
}

.table-badge--medium {
  background-color: var(--color-tint-peach);
  color: var(--color-brand-orange-deep);
}

.table-badge--high {
  background-color: var(--color-tint-rose);
  color: var(--color-error);
}

/* ------------------------------------------------------------
   14. 常见问题（FAQ）手风琴（DESIGN.md faq-accordion-item 风）
   规则：
   - 移除 hover/is-open 的 box-shadow（装饰型，按硬规则）
   - is-open 用 border-color 加深替代 shadow 边框
   - hover 不染品牌紫，改用 ink + surface 软底
   ------------------------------------------------------------ */
.faq-section {
  max-width: none;
}

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

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

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

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-md) var(--space-lg);
  font-family: inherit;
  font-size: var(--text-h5);
  font-weight: var(--font-semibold);
  line-height: var(--leading-h5);
  color: var(--color-text-deep);
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  gap: var(--space-md);
  transition: background-color var(--transition-fast);
}

.faq-question:hover,
.faq-question:focus-visible {
  color: var(--color-text-deep);
  background-color: var(--color-bg-secondary);
}

/* FAQ 展开/折叠图标（旋转 chevron） */
.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
}

.faq-icon::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-text-tertiary);
  border-bottom: 2px solid var(--color-text-tertiary);
  transform: rotate(-45deg);
  transition: transform var(--transition-base), border-color var(--transition-fast);
}

.faq-item.is-open .faq-icon::before {
  transform: rotate(45deg);
  border-color: var(--color-text-deep);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), padding var(--transition-slow);
}

.faq-item.is-open .faq-answer {
  max-height: 800px;
}

.faq-answer__inner {
  padding: 0 var(--space-lg) var(--space-lg);
}

.faq-answer p {
  color: var(--color-text);
  line-height: var(--leading-body);
}

/* ------------------------------------------------------------
   15. 页脚（DESIGN.md footer-region：白底 + 顶 hairline + charcoal 文字）
   规则：
   - 背景从深色翻转为亮色 canvas（DESIGN.md 明确规范）
   - 标题 h4 移除 ALL CAPS 与 letter-spacing（违反硬规则）
   - 链接 hover 染 ink 而非品牌紫
   - 选择器同时兼容 .footer-section（实际 HTML）和 .footer-nav（旧规则）
   - .footer-logo / .footer-brand .site-logo 双套兼容
   ------------------------------------------------------------ */
.site-footer {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-section);
  margin-top: var(--space-section);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

.footer-brand {
  max-width: 320px;
}

/* 同时兼容 <a class="footer-logo"> 与 <a class="site-logo">（旧规则） */
.footer-logo,
.footer-brand .site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-deep);
  text-decoration: none;
  margin-bottom: var(--space-md);
}

.footer-logo:hover,
.footer-logo:focus-visible,
.footer-brand .site-logo:hover,
.footer-brand .site-logo:focus-visible {
  color: var(--color-text-deep);
  text-decoration: none;
}

.footer-logo strong {
  font-weight: inherit;
}

.footer-brand p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-body-sm);
  margin-bottom: 0;
}

/* 栏目标题（兼容 .footer-nav 与实际使用的 .footer-section） */
.footer-nav h4,
.footer-section h4 {
  color: var(--color-text-deep);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-body-sm);
  margin: 0 0 var(--space-md);
}

.footer-nav ul,
.footer-section ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li,
.footer-section li {
  margin: 0;
}

/* 链接（DESIGN.md footer-link：steel 文字、txxs 上下 padding、body-sm 字号） */
.footer-nav a,
.footer-section a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);    /* 移动端无障碍触摸目标，桌面端在 1024+ 媒体查询里压缩 */
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-section a:hover,
.footer-section a:focus-visible {
  color: var(--color-text-deep);
  text-decoration: underline;
}

/* 页脚底部分割线 + 版权 + 免责 */
.footer-bottom {
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.footer-bottom p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.footer-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 720px;
  line-height: var(--leading-caption);
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

.footer-bottom-links a {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-bottom-links a:hover,
.footer-bottom-links a:focus-visible {
  color: var(--color-text-deep);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   16. 广告容器
   - 默认隐藏，广告加载成功后通过 JS 显示
   - 响应式自适应
   ------------------------------------------------------------ */
.ad-container {
  display: none;
  text-align: center;
  margin: var(--space-6) 0;
  min-height: 0;
  overflow: hidden;
}

.ad-container.ad-loaded {
  display: block;
}

.ad-container--header {
  margin: var(--space-4) auto;
  max-width: var(--container-lg);
}

.ad-container--sidebar {
  margin: var(--space-4) 0;
}

.ad-container--inline {
  margin: var(--space-8) auto;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.ad-container--footer {
  margin: var(--space-6) auto;
  max-width: var(--container-lg);
}

/* 广告占位标签（DESIGN.md micro-uppercase token：11px / 600 / 1px LS） */
.ad-label {
  font-size: var(--text-2xs-caps);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-xxs);
}

/* ------------------------------------------------------------
   17. 面包屑导航
   兼容两种 HTML 结构：
   A) <nav class="breadcrumb"><div class="container"><ol class="breadcrumb-list"><li>
   B) <nav class="breadcrumb"><span class="breadcrumb-item">…<span class="breadcrumb-separator">›</span>…
   ------------------------------------------------------------ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-md) 0;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Pattern A 包装容器：让 .container 占满父级，让内部 ol 自行排布 */
.breadcrumb > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-tertiary);
}

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

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
  color: var(--color-text-deep);
  text-decoration: underline;
}

/* Pattern B 显式分隔符 */
.breadcrumb-separator {
  margin: 0 var(--space-xxs);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  user-select: none;
}

/* Pattern A 自动生成分隔符（ol/li 结构无显式 separator span） */
.breadcrumb-list .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  margin: 0 var(--space-xs) 0 var(--space-xxs);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  user-select: none;
}

/* 当前页（最后一项）：ink 加粗，无链接装饰 */
.breadcrumb-item:last-child,
.breadcrumb-item.active,
.breadcrumb-item[aria-current="page"] {
  color: var(--color-text-deep);
  font-weight: var(--font-medium);
}

.breadcrumb-item:last-child a,
.breadcrumb-item.active a,
.breadcrumb-item[aria-current="page"] a {
  color: inherit;
  pointer-events: none;
  text-decoration: none;
}

/* ------------------------------------------------------------
   18. 内部链接卡片 / 工具网格
   规则：
   - 移除 hover transform translateY 与 box-shadow（装饰型）
   - hover 反馈通过 border-color 变化 + 箭头水平位移（导航暗示，功能型保留）
   ------------------------------------------------------------ */
/* HTML 中实际使用 .tools-grid（复数），保留 .tool-grid 单数兼容 */
.tool-grid,
.tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* .tool-card 实际 HTML 结构：<a class="tool-card"><div.tool-icon><h3><p></a>
   竖直排版：icon 顶部 → title → description */
.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast);
}

.tool-card:hover,
.tool-card:focus-visible {
  border-color: var(--color-border);
  text-decoration: none;
}

.tool-card .tool-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-tint-lavender);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
}

.tool-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  color: var(--color-text-deep);
  margin: 0;
}

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

/* ------------------------------------------------------------
   18-bis. 通用 tip-card / 信息卡片网格
   - 用于首页 tips-section 等"标题 + 段落"型卡片网格
   - 默认 1 列 mobile，断点升档 2/3 列
   - card 样式与 DESIGN.md card 规范一致：white surface + hairline border
   ------------------------------------------------------------ */
.tips-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.tip-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.tip-card h3 {
  font-size: var(--text-lg);              /* 17-18px */
  font-weight: var(--font-semibold);
  color: var(--color-text-deep);
  margin: 0 0 var(--space-sm);
  line-height: 1.35;
}

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

/* ------------------------------------------------------------
   19. Schema/SEO 相关隐藏元素
   - 结构化数据标记的不可见容器
   ------------------------------------------------------------ */
.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;
}

.schema-markup,
[itemscope]:empty,
script[type="application/ld+json"] {
  display: none;
}

.seo-content {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ------------------------------------------------------------
   20. 通用工具类
   - 间距、文本、显示控制等辅助类
   ------------------------------------------------------------ */

/* 文本对齐 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 文本颜色 */
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-muted { color: var(--color-text-muted); }

/* 文本大小 */
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

/* 字重 */
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* 外边距 */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* 内边距 */
.p-0 { padding: 0; }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

/* 显示控制 */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }

/* 宽度 */
.w-full { width: 100%; }
.max-w-narrow { max-width: var(--content-max-width); }

/* 圆角 */
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* 阴影 */
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* 溢出 */
.overflow-hidden { overflow: hidden; }

/* 按钮系统（DESIGN.md button-primary / button-secondary / button-ghost 严格对齐）
   - 默认 padding 10px 18px、font 14/500/1.30、radius md（DESIGN.md button-md）
   - secondary 用 transparent + ink 文字 + hairline-strong 描边（不再染品牌紫）
   - ghost 用 transparent + ink 文字（无 bg） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--touch-target);     /* WCAG 48px，覆盖 DESIGN.md 的 40px */
  padding: 10px 18px;
  font-family: inherit;
  font-size: var(--text-button);
  font-weight: var(--font-medium);
  line-height: var(--leading-button);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

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

.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--color-on-primary);
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  text-decoration: none;
}

.btn-primary:active {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* DESIGN.md button-secondary：transparent + ink + hairline-strong border */
.btn-secondary {
  color: var(--color-text-deep);
  background-color: transparent;
  border-color: var(--color-border);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  color: var(--color-text-deep);
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
  text-decoration: none;
}

.btn-secondary:active {
  background-color: var(--color-bg-tertiary);
}

/* DESIGN.md button-ghost：transparent + ink + 更小 padding/radius */
.btn-ghost {
  color: var(--color-text-deep);
  background-color: transparent;
  border-color: transparent;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--color-text-deep);
  background-color: var(--color-bg-secondary);
  text-decoration: none;
}

.btn-sm {
  min-height: 36px;
  padding: 6px 12px;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn-lg {
  min-height: 48px;
  padding: 12px 22px;
  font-size: var(--text-base);
}

/* 分隔线 */
.divider {
  height: 1px;
  background-color: var(--color-border-light);
  margin: var(--space-8) 0;
  border: none;
}

/* 徽章/标签（DESIGN.md badge-tag-* 软色板） */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-caption);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
  background-color: var(--color-tint-lavender);
  color: var(--color-primary-dark);
}

.badge-success {
  background-color: var(--color-tint-mint);
  color: var(--color-success);
}

.badge-warning {
  background-color: var(--color-tint-peach);
  color: var(--color-brand-orange-deep);
}

/* 图标占位 */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* 跳转到主内容（无障碍 skip-link，参考 DESIGN.md button-primary） */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: var(--z-toast);
  padding: 10px 18px;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-button);
  font-weight: var(--font-medium);
  line-height: var(--leading-button);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-xs);
  text-decoration: none;
  color: var(--color-on-primary);
}

/* ============================================================
   补充缺失的样式定义
   ============================================================ */

/* nav-menu 与 main-nav 为同一元素的双类名，无需额外样式 */

/* --- Hero 区域副标题（亮色 hero，文字不再翻转） --- */
/* hero subtitle 宽度由上方 .hero > * 统一规则控制（content-max-width 880）
   这里只保留排版属性，不重复设置 max-width */
.hero-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0 auto var(--space-md);
  line-height: var(--leading-body);
}

.hero-subtitle strong {
  color: var(--color-text-deep);
  font-weight: var(--font-semibold);
}

/* --- 计算器外部区域容器 ---
   工具页核心区域：与默认 section 节奏一致（已在全局规则中定义为最紧凑档）
   仅保留特殊的 padding-top 微调（紧贴 hero） */
.calculator-section,
main > .calculator-section {
  padding-top: var(--space-md);          /* mobile 16，比默认 20 还紧（紧贴 hero） */
}

.calculator-section > .container > h2 {
  text-align: center;
  font-size: var(--text-xl);              /* 18px mobile —— 比通用 h2 小 */
  margin-top: 0;
  margin-bottom: var(--space-xs);
}

.calculator-section > .container > .section-intro {
  text-align: center;
  font-size: var(--text-sm);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-md);
}

/* --- 首页输入组（与 .calc-input-group 区分） --- */
.input-group {
  margin-bottom: var(--space-md);           /* 16px：紧凑垂直节奏 */
}

.input-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-body-sm);
  color: var(--color-text-deep);
  margin-bottom: var(--space-xs);
}

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

.input-group .input-prefix {
  position: absolute;
  left: var(--space-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--font-semibold);
  pointer-events: none;
  font-size: var(--text-base);
}

.input-group input[data-field] {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-text-deep);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: var(--touch-target);
}

.input-group input[data-field]:focus,
.input-group input[data-field]:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.input-group .input-prefix + input[data-field] {
  padding-left: calc(var(--space-3) + 1.2em);
}

/* --- 输入字段帮助文字（首页用 .input-help，其他页面用 .input-hint） --- */
.input-help {
  display: block;
  margin-top: var(--space-xxs);
  font-size: var(--text-xs);
  line-height: var(--leading-caption);
  color: var(--color-text-tertiary);
}

/* --- 表单说明文字 --- */
.form-instructions {
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-secondary);
}

/* --- 按钮组容器 --- */
.button-group {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.button-group .btn {
  flex: 1;
}

/* --- 区块介绍段落（DESIGN.md subtitle 风：18px / 400 / 1.50） ---
   宽度由父容器控制（用户硬规则：不单独规定文字宽度） */
.section-intro {
  font-size: var(--text-subtitle);
  font-weight: var(--font-normal);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

/* --- 公式展示网格 --- */
.formula-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

/* --- 公式展示文本（在 .formula-box 内，与 .formula-box__formula 平级使用） --- */
.formula-display {
  font-family: var(--font-family-mono);
  font-size: 1.0625rem;
  font-weight: var(--font-semibold);
  color: var(--color-primary-dark);
  background-color: var(--color-tint-lavender);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: center;
  margin: var(--space-sm) 0;
  letter-spacing: 0;
  line-height: var(--leading-body-sm);
  word-break: break-word;
}

/* --- 步骤指引网格（DESIGN.md card-feature on surface tint） --- */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.step-card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  transition: border-color var(--transition-fast);
}

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

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

/* --- 计算器错误提示专属样式 --- */
.calc-error {
  margin-top: var(--space-4);
  display: none;
}

/* --- 重置按钮微调 --- */
.btn-reset {
  /* 继承 .btn .btn-secondary 的基础样式 */
}

/* --- 首页信任指标（亮色 hero 下，紧凑版 + mint/success 语义色） --- */
.trust-indicators {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);                    /* 12px 紧凑 */
  color: var(--color-text-secondary);
  line-height: 1.2;
}

.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--color-tint-mint);
  color: var(--color-success);
  font-size: 10px;
  flex-shrink: 0;
}

/* --- 计算示例区块（surface tint 卡片，DESIGN.md card-feature 风） --- */
.worked-example {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
}

.worked-example h3 {
  margin-bottom: var(--space-sm);
}

.worked-example ul {
  list-style: disc;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.worked-example li {
  color: var(--color-text);
  margin-bottom: var(--space-xxs);
  line-height: var(--leading-body);
}

/* --- 基准数据备注（DESIGN.md card-feature-yellow 软黄 callout） --- */
.benchmark-note {
  background-color: var(--color-tint-yellow);
  border: 1px solid var(--color-tint-yellow-bold);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text);
}

.benchmark-note p {
  margin-bottom: var(--space-xs);
}

.benchmark-note p:last-child {
  margin-bottom: 0;
}

/* --- 文本链接（文章内带箭头，使用链接蓝而非品牌紫） --- */
.text-link {
  display: inline;
  color: var(--color-link);
  font-weight: var(--font-medium);
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* --- CPM 基准数据对比可视化组件 --- */
.benchmark-results,
.benchmark-comparison {
  margin-top: var(--space-6);
  display: none;
}

.benchmark-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-light);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.benchmark-row:hover {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

.benchmark-platform {
  flex: 0 0 180px;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-deep);
}

.benchmark-bar-wrap {
  flex: 1;
  min-width: 120px;
  height: 20px;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  position: relative;
  overflow: visible;
}

.benchmark-range {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: var(--color-tint-lavender);
  border-radius: var(--radius-full);
}

/* benchmark 标记圆点：保留 2px 白边描边作为"圆点贴在彩色条带上"的视觉信号（功能型） */
.benchmark-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  border: 2px solid var(--color-bg);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.benchmark-info {
  flex: 0 0 100%;
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  line-height: var(--leading-caption);
  padding-top: var(--space-xxs);
}

.benchmark-label {
  font-weight: var(--font-semibold);
}

.benchmark-values {
  color: var(--color-text-tertiary);
}

/* 基准对比评级颜色 */
.benchmark-low .benchmark-marker {
  background: var(--color-success);
}

.benchmark-low .benchmark-label {
  color: var(--color-success);
}

.benchmark-high .benchmark-marker {
  background: var(--color-error);
}

.benchmark-high .benchmark-label {
  color: var(--color-error);
}

.benchmark-avg .benchmark-marker {
  background: var(--color-warning);
}

.benchmark-avg .benchmark-label {
  color: var(--color-warning);
}

/* --- 广告收益计算器：收入分解（DESIGN.md card-feature-lavender 风） --- */
.revenue-breakdown {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background-color: var(--color-tint-lavender);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
}

.daily-revenue,
.monthly-revenue,
.yearly-revenue {
  font-size: var(--text-h3);
  font-weight: var(--font-semibold);
  line-height: var(--leading-h3);
  color: var(--color-primary-dark);
}

.monthly-revenue {
  color: var(--color-success);
  font-size: 1.75rem;
}

/* --- 返回顶部按钮（floating action button，box-shadow 为功能型保留） --- */
.back-to-top {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  box-shadow: var(--shadow-md);    /* 功能型：浮动按钮悬浮于内容之上的视觉信号 */
  z-index: var(--z-toast);
  transition: opacity var(--transition-base), background-color var(--transition-fast);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--color-primary-hover);
}

.back-to-top:active {
  background-color: var(--color-primary-dark);
}

.back-to-top.is-visible {
  display: flex;
}

/* --- 淡入动画类（由 JS 添加） --- */
.fade-in {
  animation: fadeInUp 0.4s ease forwards;
}

/* ------------------------------------------------------------
   21. 媒体查询 - 响应式断点（严格对齐 DESIGN.md L778-799）
   - Mobile small : < 480px      → 单列, hero 36px
   - Mobile large : 480 – 767px  → feature 2-up, hero 48px
   - Tablet       : 768 – 1023px → 2-col grids, hero 56px, hamburger nav 仍生效
   - Desktop      : 1024 – 1279px→ 3-up cards, 顶栏切换为水平桌面态, hero 72px
   - Wide Desktop : ≥ 1280px     → 1280 容器 + 32px gutter, hero 80px
   ------------------------------------------------------------ */

/* === Mobile large（≥ 480px） — hero 微升 === */
@media (min-width: 480px) {
  .hero,
  .hero-section {
    padding: var(--space-xl) var(--space-md);    /* 480+ : 24px 上下 */
  }

  .hero h1,
  .hero-section h1 {
    font-size: 1.75rem;               /* 28px */
  }

  .hero p,
  .hero-section p {
    font-size: var(--text-base);      /* 15px */
  }
}

/* === Tablet（≥ 768px） — 网格切 2 列、排版中档、不切桌面导航 === */
@media (min-width: 768px) {
  /* 排版中档（heading 阶梯 mobile→desktop 中点） */
  h1 { font-size: 2.5rem; }       /* 40px */
  h2 { font-size: 1.875rem; }     /* 30px */
  h3 { font-size: 1.5rem; }       /* 24px */
  h4 { font-size: 1.25rem; }      /* 20px */
  h5 { font-size: 1.0625rem; }    /* 17px */

  /* 容器 gutter：tablet 24px（mobile 16 → tablet 24 → desktop 32） */
  .container {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }

  /* Hero - tablet 档（工具页紧凑版） */
  .hero,
  .hero-section {
    padding: var(--space-xxl) var(--space-xl);   /* tablet : 32px 上下 */
  }

  .hero h1,
  .hero-section h1 {
    font-size: 2rem;                  /* 32px */
    letter-spacing: -0.5px;
  }

  .hero p,
  .hero-section p,
  .hero-subtitle {
    font-size: var(--text-base);      /* 15px */
  }

  /* Calculator section（tablet）—— 上下 padding 仍保持紧凑 */
  .calculator-section {
    padding-top: var(--space-lg);                 /* tablet 20（紧贴 hero） */
    padding-bottom: var(--space-xl);              /* tablet 24，与默认对齐 */
  }

  .calculator-section > .container > h2 {
    font-size: var(--text-2xl);                   /* 24px */
  }

  .calculator-section > .container > .section-intro {
    font-size: var(--text-base);
  }

  /* 计算器卡片 padding 升档 */
  .calculator-card {
    padding: var(--space-8);
  }

  /* 网格 2-up（DESIGN.md L797：feature 2-up at tablet） */
  .result-grid,
  .tool-grid,
  .tools-grid,
  .tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 页脚 3 栏（DESIGN.md L799：6-col → 3-col tablet） */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  /* Section 节奏 - tablet（gap 48） */
  .section,
  main > section,
  .content-section {
    padding-top: var(--space-xl);            /* 24 */
    padding-bottom: var(--space-xl);
  }

  .section--lg {
    padding-top: var(--space-xxl);           /* 32 */
    padding-bottom: var(--space-xxl);
  }

  .section--sm {
    padding-top: var(--space-lg);            /* 20 */
    padding-bottom: var(--space-lg);
  }

  /* 公式展示网格三列、步骤指引两列 */
  .formula-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* 基准对比信息侧栏布局 */
  .benchmark-info {
    flex: 0 0 260px;
    flex-direction: column;
    padding-top: 0;
  }
}

/* === Desktop（≥ 1024px） — 桌面导航 + 完整 heading 阶 + hero 72px === */
@media (min-width: 1024px) {
  /* DESIGN.md L794: top nav 在 < 1024px 折叠为汉堡，到此处才切桌面态 */
  .logo-tagline {
    display: inline;
  }

  .nav-toggle {
    display: none;
  }

  .main-nav {
    position: static;
    max-height: none;
    overflow: visible;
    border-bottom: none;
    box-shadow: none;
    background: transparent;
  }

  .nav-list,
  .main-nav > ul {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
    padding: 0;
  }

  .nav-link,
  .main-nav > ul > li > a {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    border-left: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    min-height: auto;
    white-space: nowrap;
    color: var(--color-text-secondary);
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    color: var(--color-text-deep);
    background-color: var(--color-bg-secondary);
  }

  /* Active：DESIGN.md segmented-tab-active 风格（2px 底部 ink 下划线） */
  .nav-link.active {
    color: var(--color-text-deep);
    font-weight: var(--font-semibold);
    background-color: transparent;
    border-left: none;
    box-shadow: inset 0 -2px 0 var(--color-text-deep);
    border-radius: 0;
  }

  .nav-dropdown-toggle {
    border-left: none;
  }

  .main-nav .nav-dropdown-menu,
  .nav-dropdown-menu {
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xs) 0;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height var(--transition-slow), opacity var(--transition-base),
      visibility var(--transition-base);
    z-index: var(--z-dropdown);
  }

  .nav-dropdown:hover > .nav-dropdown-menu,
  .nav-dropdown.is-open > .nav-dropdown-menu {
    max-height: 600px;
    opacity: 1;
    visibility: visible;
  }

  .nav-dropdown-menu li {
    display: list-item;
  }

  .nav-dropdown-menu a {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    min-height: 36px;
  }

  /* 排版桌面档（DESIGN.md heading-1 ~ heading-5 token） */
  h1 { font-size: var(--text-h1); }       /* 48px */
  h2 { font-size: var(--text-h2); }       /* 36px */
  h3 { font-size: var(--text-h3); }       /* 28px */
  h4 { font-size: var(--text-h4); }       /* 22px */
  h5 { font-size: var(--text-h5); }       /* 18px */

  /* Hero - desktop（工具页紧凑版：首屏让位给计算器） */
  .hero,
  .hero-section {
    padding-top: var(--space-xxl);               /* desktop : 32px 上下 */
    padding-bottom: var(--space-xxl);
    padding-left: var(--space-xxl);
    padding-right: var(--space-xxl);
  }

  .hero h1,
  .hero-section h1 {
    font-size: 2.25rem;                 /* 36px - 远小于 DESIGN.md marketing 72px */
    letter-spacing: -0.5px;
  }

  .hero p,
  .hero-section p,
  .hero-subtitle {
    font-size: var(--text-base);        /* 15px */
  }

  /* Calculator section（desktop）—— 紧贴 hero，最大化首屏可见 */
  .calculator-section {
    padding-top: var(--space-xl);                 /* desktop 24（紧贴 hero） */
    padding-bottom: var(--space-xxl);             /* desktop 32，与默认对齐 */
  }

  .calculator-section > .container > h2 {
    font-size: 1.625rem;                          /* 26px desktop（克制版） */
  }

  /* Section 节奏 - desktop（gap 64，从一开始 160 减少 60%） */
  .section,
  main > section,
  .content-section {
    padding-top: var(--space-xxl);           /* 32 */
    padding-bottom: var(--space-xxl);
  }

  .section--lg {
    padding-top: var(--space-xxxl);          /* 40 */
    padding-bottom: var(--space-xxxl);
  }

  .section--sm {
    padding-top: var(--space-xl);            /* 24 */
    padding-bottom: var(--space-xl);
  }

  /* 页头高度上调 */
  .header-inner {
    height: 68px;
  }

  /* 网格 3-up（DESIGN.md L797：feature 3-up desktop） */
  .tool-grid,
  .tools-grid,
  .tips-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 步骤指引：在统一 1200 容器下用 4 列（8 步骤的视觉节奏） */
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 计算结果网格 3 列 */
  .result-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 页脚 4 栏 */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }

  .footer-nav a,
  .footer-section a {
    min-height: auto;
    padding: var(--space-xxs) 0;
  }

  /* 带侧边栏两栏布局：DESIGN.md 暗示 1024+ 才提供，避免在 tablet 拥挤 */
  .layout-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
    align-items: start;
  }

  .layout-with-sidebar .sidebar {
    position: sticky;
    top: 88px;
  }
}

/* === Wide Desktop（≥ 1280px） — 容器 32px gutter + hero 微升 === */
@media (min-width: 1280px) {
  .container {
    padding-left: var(--space-xxl);
    padding-right: var(--space-xxl);
  }

  /* Hero - wide（保持紧凑，仅微升到 40px，避免营销大字戏剧） */
  .hero h1,
  .hero-section h1 {
    font-size: 2.5rem;                  /* 40px */
    letter-spacing: -0.5px;
  }

  /* 大屏 hero padding：仅微升到 48px，远小于 DESIGN.md 120px hero */
  .hero,
  .hero-section {
    padding-top: var(--space-xxxl);          /* wide : 40px 上下 */
    padding-bottom: var(--space-xxxl);
  }
}

/* 仅在移动设备上显示的元素 */
@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

/* 仅在桌面设备上显示的元素 */
.desktop-only {
  display: none !important;
}

@media (min-width: 768px) {
  .desktop-only {
    display: block !important;
  }
}

/* ------------------------------------------------------------
   22. 打印样式
   - 优化打印输出
   - 隐藏非必要元素
   ------------------------------------------------------------ */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  /* 隐藏非打印内容 */
  .site-header,
  .site-footer,
  .nav-toggle,
  .main-nav,
  .ad-container,
  .breadcrumb,
  .calc-btn,
  .tool-grid,
  .tools-grid,
  .skip-link,
  .header-actions {
    display: none !important;
  }

  /* 链接显示 URL */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666 !important;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  /* 避免内容被截断 */
  h2, h3, h4 {
    page-break-after: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  /* 表格保持完整 */
  table {
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  /* 计算器结果在打印中完整显示 */
  .calc-result {
    border: 2px solid #000 !important;
    padding: 1rem;
  }

  .calculator-card {
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
}

/* ------------------------------------------------------------
   23. 动画与关键帧
   - 页面元素的出现/过渡动画
   ------------------------------------------------------------ */

/* 旋转加载动画 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 从下方淡入滑出 */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 从下方淡入（供 .fade-in 类使用） */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 从上方淡入滑出 */
@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 淡入动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 缩放弹出 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 结果数字滚动效果占位 */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 脉冲发光效果（用于结果高亮） */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(var(--color-primary-rgb), 0); }
}

/* 横向滑入 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 动画辅助类 */
.animate-fade-in {
  animation: fadeIn 0.4s ease forwards;
}

.animate-slide-up {
  animation: fadeSlideUp 0.4s ease forwards;
}

.animate-slide-down {
  animation: fadeSlideDown 0.4s ease forwards;
}

.animate-scale-in {
  animation: scaleIn 0.3s ease forwards;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* 尊重用户的动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   24. 深色模式
   DESIGN.md（Notion）未给出完整暗色 token 规范，按硬规则不可
   越权推导；故移除原 prefers-color-scheme:dark 实现，全站统一
   亮色。如需后续支持，需先在 DESIGN.md 中补全暗色规范。
   ------------------------------------------------------------ */

/* ============================================================
   友情链接（DESIGN.md 风格：白底页脚下的弱信号小字链接）
   ============================================================ */
.friend-links {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.friend-links h4 {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-deep);
}

.friend-links span {
  display: inline-block;
  margin-right: var(--space-lg);
}

.friend-links a {
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.friend-links a:hover,
.friend-links a:focus-visible {
  color: var(--color-text-deep);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Cookie / GDPR-style consent banner（底部固定条）
   ------------------------------------------------------------ */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-lg) 0;
}

.cookie-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
}

.cookie-consent__text {
  flex: 1 1 280px;
  max-width: 52rem;
}

.cookie-consent__title {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-deep);
}

.cookie-consent__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

.cookie-consent__desc a {
  color: var(--color-link);
  text-decoration: underline;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.cookie-consent__btn {
  min-height: 44px;
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-form-intro {
  margin-top: 0;
}

.contact-form-actions {
  margin-top: var(--space-md);
}

/* ── I-Language content structure (IL01) ── */
.content-preview {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-elevated, #f8fafc);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.content-preview ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.25rem;
}

.il-issue h3,
.il-implementation h3 {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
}

.key-insight {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  background: #eff6ff;
  border-radius: var(--radius-md);
  border: 1px solid #bfdbfe;
}

.key-insight p {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.step-warning {
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: #fffbeb;
  border-radius: var(--radius-md);
  border: 1px solid #fde68a;
  font-size: var(--text-sm);
}

.related-content {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.related-content ul {
  padding-left: 1.25rem;
}

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

@media (min-width: 960px) {
  .article-layout {
    grid-template-columns: 1fr min(280px, 32%);
    align-items: start;
  }

  .article-layout__main {
    min-width: 0;
  }

  .editor-note {
    position: sticky;
    top: 6rem;
  }
}

.editor-note {
  padding: var(--space-5);
  background: var(--color-surface-elevated, #f8fafc);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.editor-note h2 {
  font-size: var(--text-base);
  margin: 0 0 var(--space-3);
}

.editor-note p:last-child {
  margin-bottom: 0;
}

.reporting-steps {
  counter-reset: report-step;
  list-style: none;
  padding-left: 0;
}

.reporting-steps li {
  counter-increment: report-step;
  margin-bottom: var(--space-4);
  padding-left: 2.5rem;
  position: relative;
}

.reporting-steps li::before {
  content: counter(report-step);
  position: absolute;
  left: 0;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  font-weight: 700;
  font-size: var(--text-sm);
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
}

.contact-form-card textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 10rem;
}

.footer-cookie-trigger {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-link);
  cursor: pointer;
  text-decoration: none;
  text-align: left;
}

.footer-cookie-trigger:hover,
.footer-cookie-trigger:focus-visible {
  text-decoration: underline;
  color: var(--color-link-hover);
}

/* ============================================================
   样式表结束
   ============================================================ */