/* ====================================================================
   ReportCardComment.com · 全站主样式表 (main.css)
   视觉规范：方案 B · 极简瑞士工学风 (Swiss Precision / Clean Instrument)
   说明：由 functions.php 自动挂载，严禁在 PHP 文件中用 <link> 手动引用
   ==================================================================== */

/* --------------------------------------------------
   1. 全局设计变量（Design Tokens - Swiss Precision）
   -------------------------------------------------- */
:root {
  /* 画布与表面色 (Light Minimal Palette) */
  --color-canvas: #F6F7F9;         /* 整体背景底色：冷灰白，减缓视疲劳 */
  --color-surface: #FFFFFF;        /* 组件卡片表面：纯白 */
  --color-surface-subtle: #F1F4F8; /* 浅灰底纹，用于辅助标签与状态槽 */
  --color-surface-alt: #F8FAFC;    /* 代码块与高亮条底色 */
  
  /* 文字与墨水层级 (Graphite Scale) */
  --color-text-main: #0F172A;      /* 工业石墨黑：高对比、极清晰 */
  --color-text-secondary: #475569; /* 次级正文 */
  --color-text-muted: #64748B;     /* 说明文字、副标题 */
  --color-text-light: #94A3B8;     /* 辅助标注、禁用占位 */
  
  /* 核心强调高光 (Electric Klein Blue) */
  --color-accent: #0052FF;         /* 国际克莱因电光蓝：冷静、高效率、高召回 */
  --color-accent-hover: #0043D6;   /* 悬浮加深 */
  --color-accent-subtle: #EEF4FF;  /* 浅色高光背景 */
  --color-accent-border: #C6DBFF;  /* 高光轮廓 */
  
  /* 辅助信号色 */
  --color-success: #10B981;        /* 状态正常绿色 */
  --color-success-bg: #ECFDF5;
  --color-warning: #F59E0B;        /* 即将推出黄色 */
  --color-warning-bg: #FFFBEB;

  /* 边框与分割细线 (1px Razor Grids) */
  --color-border: #E2E8F0;
  --color-border-dark: #CBD5E1;
  --color-border-focus: #0052FF;

  /* 阴影体系 (Subtle Crisp Shadows) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
  --shadow-focus: 0 0 0 3px rgba(0, 82, 255, 0.16);

  /* 圆角规范 (Crisp Instrument Radii) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 9999px;

  /* 布局网格基准 (1-4-9 节奏系统) */
  --unit-1: 4px;
  --unit-2: 8px;
  --unit-4: 16px;
  --unit-6: 24px;
  --unit-9: 36px;
  --unit-12: 48px;
  --unit-18: 72px;

  /* 字体体系 */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --max-width: 1200px;
}

/* --------------------------------------------------
   2. 基础重置 (CSS Reset)
   -------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  background-color: var(--color-canvas);
  color: var(--color-text-main);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
ul, ol {
  list-style: none;
}
button, input {
  font-family: inherit;
  font-size: inherit;
}

/* 通用容器 */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--unit-6);
}

/* --------------------------------------------------
   3. Header 顶部导航（瑞士工业简洁风，严控出链）
   -------------------------------------------------- */
header.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

/* 品牌 Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-text-main);
}
.brand-logo .dot {
  width: 10px;
  height: 10px;
  background: var(--color-accent);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.2);
}
.brand-logo span.highlight {
  color: var(--color-accent);
}

/* 桌面导航链接 */
nav.desktop-nav {
  display: flex;
  align-items: center;
  gap: var(--unit-6);
}
.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.nav-link:hover {
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

/* 下拉模拟 */
.dropdown-parent {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.dropdown-arrow {
  font-size: 10px;
  transition: transform 0.2s;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--unit-2);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
}
.dropdown-parent:hover .dropdown-menu {
  display: flex;
}
.dropdown-parent:hover .dropdown-arrow {
  transform: rotate(180deg);
}
.dropdown-item {
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dropdown-item:hover {
  background: var(--color-surface-subtle);
  color: var(--color-accent);
}
.badge-preview {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

/* 顶部主 CTA 按钮 (指向工具页) */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--unit-4);
}
.btn-header-cta {
  background: var(--color-accent);
  color: #FFFFFF !important;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 82, 255, 0.25);
}
.btn-header-cta:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* --------------------------------------------------
   4. Hero 区域（功能至上，冷峻有力）
   -------------------------------------------------- */
section.hero-section {
  padding: var(--unit-12) 0 var(--unit-9);
  background: var(--color-canvas);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.status-indicator-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--unit-6);
  box-shadow: var(--shadow-sm);
}
.status-pulse-dot {
  width: 7px;
  height: 7px;
  background: var(--color-success);
  border-radius: 50%;
  position: relative;
}
.status-pulse-dot::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 50%;
  background: var(--color-success);
  opacity: 0.4;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.5; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

.hero-title {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--color-text-main);
  max-width: 860px;
  margin: 0 auto var(--unit-4);
}
.hero-title span.accent-text {
  color: var(--color-accent);
  display: inline-block;
}

.hero-subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 680px;
  margin: 0 auto var(--unit-9);
  font-weight: 500;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--unit-4);
  margin-bottom: var(--unit-6);
}
.btn-hero-primary {
  background: var(--color-accent);
  color: #FFFFFF !important;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 82, 255, 0.3);
  transition: all 0.15s ease;
}
.btn-hero-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 82, 255, 0.35);
}
.btn-hero-secondary {
  background: var(--color-surface);
  color: var(--color-text-main) !important;
  border: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.btn-hero-secondary:hover {
  border-color: var(--color-border-dark);
  background: var(--color-surface-subtle);
}

.hero-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--unit-6);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.trust-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-success);
}

/* --------------------------------------------------
   5. Recently Added 模块（首批挂 ≥5 天，加速爬虫收录）
   -------------------------------------------------- */
section.recently-added-section {
  padding: var(--unit-6) 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.recent-bar {
  display: flex;
  align-items: center;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  gap: var(--unit-4);
  justify-content: space-between;
}
.recent-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.recent-content {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.recent-content strong {
  color: var(--color-text-main);
}
.recent-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-light);
  white-space: nowrap;
}
.recent-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.recent-link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------
   6. 分门别类目录区（哥飞"逐级罗列"核心目录架构）
   -------------------------------------------------- */
section.directory-section {
  padding: var(--unit-12) 0;
  background: var(--color-canvas);
}
.section-header {
  margin-bottom: var(--unit-9);
}
.section-tag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--unit-2);
  display: block;
}
.section-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text-main);
  margin-bottom: var(--unit-2);
}
.section-sub {
  font-size: 15px;
  color: var(--color-text-muted);
  max-width: 620px;
}

/* 轴分类区块 */
.axis-group {
  margin-bottom: var(--unit-9);
}
.axis-title-bar {
  display: flex;
  align-items: center;
  gap: var(--unit-4);
  margin-bottom: var(--unit-4);
  padding-bottom: var(--unit-2);
  border-bottom: 1px solid var(--color-border);
}
.axis-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-main);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.axis-count-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

/* 网格布局 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--unit-4);
}

/* 目录卡片 (统一基础样式) */
.dir-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--unit-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
  position: relative;
}

/* 可点击的上线活跃卡片 (当前仅工具页) */
.dir-card.is-active {
  border-color: var(--color-accent-border);
}
.dir-card.is-active:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.dir-card.is-active .card-action-link {
  color: var(--color-accent);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 即将推出预热卡片 (防 404 死链规范) */
.dir-card.is-upcoming {
  background: #FAFAFC;
  border-style: dashed;
}
.dir-card.is-upcoming:hover {
  border-color: var(--color-border-dark);
  background: var(--color-surface);
}

.card-top {
  margin-bottom: var(--unit-4);
}
.card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--unit-2);
}
.card-badge-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}
.status-live {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.status-upcoming {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-main);
  margin-bottom: 6px;
  line-height: 1.35;
}
.card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.card-footer-row {
  padding-top: var(--unit-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}
.tag-anchor {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-text-light);
}
.btn-notify-pill {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.btn-notify-pill:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --------------------------------------------------
   7. Why Teachers Use It（四大护城河/价值支撑区）
   -------------------------------------------------- */
section.value-section {
  padding: var(--unit-12) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--unit-6);
  margin-top: var(--unit-6);
}
.value-card {
  padding: var(--unit-4);
  border-left: 2px solid var(--color-border);
  transition: border-color 0.2s;
}
.value-card:hover {
  border-left-color: var(--color-accent);
}
.value-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--unit-2);
}
.value-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 8px;
}
.value-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --------------------------------------------------
   8. FAQ 问答手风琴（PAA 核心问题全部 100% 展开展示）
   -------------------------------------------------- */
section.faq-section {
  padding: var(--unit-12) 0;
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-border);
}
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--unit-4);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.faq-question {
  padding: 18px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.faq-question:hover {
  color: var(--color-accent);
}
.faq-icon {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text-light);
  transition: transform 0.2s ease;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  color: var(--color-accent);
}
.faq-answer {
  padding: 0 24px 20px 24px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  border-top: 1px solid transparent;
  display: none;
}
.faq-item.open .faq-answer {
  display: block;
  border-top-color: var(--color-surface-subtle);
}

/* --------------------------------------------------
   9. 底部转化条 (Bottom Conversion Banner)
   -------------------------------------------------- */
section.bottom-banner-section {
  padding: var(--unit-12) 0;
  background: var(--color-text-main);
  color: #FFFFFF;
  text-align: center;
}
.banner-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--unit-2);
}
.banner-sub {
  font-size: 16px;
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto var(--unit-6);
}
.btn-banner-cta {
  background: var(--color-accent);
  color: #FFFFFF !important;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 82, 255, 0.4);
  transition: all 0.15s ease;
}
.btn-banner-cta:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
}

/* --------------------------------------------------
   10. Footer 底部全站栏目树（标准 4 列结构）
   -------------------------------------------------- */
footer.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--unit-12) 0 var(--unit-6);
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--unit-9);
  margin-bottom: var(--unit-9);
}
.footer-brand p {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 280px;
}
.footer-col h4 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-main);
  margin-bottom: var(--unit-4);
}
.footer-links li {
  margin-bottom: 9px;
}
.footer-links a {
  font-size: 13.5px;
  color: var(--color-text-muted);
}
.footer-links a:hover {
  color: var(--color-accent);
}
.footer-bottom-bar {
  border-top: 1px solid var(--color-border);
  padding-top: var(--unit-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--color-text-light);
}

/* --------------------------------------------------
   11. 简易弹窗组件（用于预热卡片的 "Notify Me" 交互）
   -------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-overlay.active {
  display: flex;
}
.modal-box {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  width: 90%;
  max-width: 440px;
  padding: var(--unit-6);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-muted);
}
.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 8px;
}
.modal-desc {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--unit-4);
  line-height: 1.5;
}
.modal-input-group {
  display: flex;
  gap: 8px;
}
.modal-input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 14px;
}
.modal-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}
.modal-btn {
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-weight: 700;
  cursor: pointer;
}

/* --------------------------------------------------
   12. 响应式规则 (Responsive Breakpoints)
   -------------------------------------------------- */
@media (max-width: 1024px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--unit-6); }
}
@media (max-width: 768px) {
  .hero-title { font-size: 34px; }
  .hero-subtitle { font-size: 16px; }
  .hero-cta-group { flex-direction: column; width: 100%; }
  .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; }
  nav.desktop-nav { display: none; }
  .mobile-menu-btn { display: block; }
  .cards-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .recent-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-trust-bar { flex-direction: column; gap: 8px; }
}

/* ====================================================================
   13. 工具页（Report Card Comment Generator）
   说明：工具页使用独立类名体系（.hero / .tool-card / .btn 系列），
   与首页的 .hero-section / .dir-card 并存，互不冲突。
   ==================================================================== */

/* 13.1 Hero（工具页） */
.hero {
  padding: var(--unit-12) 0 var(--unit-9);
  background: var(--color-canvas);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--unit-6);
  box-shadow: var(--shadow-sm);
}
.hero h1 {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  max-width: 860px;
  margin: 0 auto var(--unit-4);
  color: var(--color-text-main);
}
.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 680px;
  margin: 0 auto var(--unit-9);
  font-weight: 500;
}
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--unit-4);
  margin-bottom: var(--unit-6);
}
.trust-strip {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* 13.2 通用按钮（工具页体系） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-accent);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 82, 255, 0.3);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
}
.btn-ghost {
  background: var(--color-surface);
  color: var(--color-text-main);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  border-color: var(--color-border-dark);
  background: var(--color-surface-subtle);
}
.btn-sm { font-size: 13.5px; padding: 9px 18px; }
.btn-lg { font-size: 16px; padding: 16px 34px; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* 13.3 通用区块（工具页） */
.section {
  padding: var(--unit-12) 0;
  background: var(--color-canvas);
}
.section.alt {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.section h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--unit-6);
  color: var(--color-text-main);
}

/* 13.4 卡片（工具页） */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--unit-6);
  box-shadow: var(--shadow-sm);
}
.card h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--color-text-main);
}
.card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.card p a {
  color: var(--color-accent);
  font-weight: 600;
}
.card p a:hover { text-decoration: underline; }

/* 工具主卡 */
.tool-card {
  padding: var(--unit-9);
  max-width: 880px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}
.tool-card h2 {
  font-size: 22px;
  margin-bottom: var(--unit-6);
}

/* 13.5 表单 */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--unit-4);
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.form-grid select,
.form-grid textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-main);
  background: var(--color-surface);
  resize: vertical;
}
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

/* 操作栏与计数徽章 */
.tool-actions {
  display: flex;
  align-items: center;
  gap: var(--unit-4);
  margin-top: var(--unit-6);
}
.count-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* 输出结果区 */
.result-area {
  margin-top: var(--unit-6);
  border-top: 1px solid var(--color-border);
  padding-top: var(--unit-6);
}
.comment-text {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--unit-4) var(--unit-6);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-main);
}
.result-actions {
  display: flex;
  gap: 10px;
  margin-top: var(--unit-4);
}
.limit-msg {
  margin-top: var(--unit-4);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-warning);
}

/* 13.6 网格布局 */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--unit-4);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--unit-4);
}
.card.vp {
  border-left: 2px solid var(--color-border);
  transition: border-color 0.2s;
}
.card.vp:hover { border-left-color: var(--color-accent); }

/* 13.6.1 未上线页面占位文本（保留坑位、不可点击，避免 404 死链） */
.soon-ref {
  color: var(--color-text-secondary);
  border-bottom: 1px dotted var(--color-border-dark);
  cursor: help;
  white-space: nowrap;
}

/* 13.7 How it works 步骤 */
.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--unit-4);
  max-width: 720px;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: var(--unit-12);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}
.steps li strong { color: var(--color-text-main); }
.steps li a { color: var(--color-accent); font-weight: 600; }

/* 13.8 FAQ（原生 details/summary） */
.faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--unit-4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq summary {
  padding: 18px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text-light);
  flex-shrink: 0;
}
.faq details[open] summary::after {
  content: '\2212';
  color: var(--color-accent);
}
.faq summary:hover { color: var(--color-accent); }
.faq details > p {
  padding: 0 24px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.faq details > p a {
  color: var(--color-accent);
  font-weight: 600;
}

/* 13.9 底部转化条（工具页） */
.section.cta-banner {
  background: var(--color-text-main);
  text-align: center;
}
.section.cta-banner h2 {
  color: #FFFFFF;
  font-size: 32px;
  margin-bottom: var(--unit-6);
}
.section.cta-banner .btn-primary {
  box-shadow: 0 4px 16px rgba(0, 82, 255, 0.4);
}

/* 13.10 工具页响应式 */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hero h1 { font-size: 32px; }
  .hero-sub { font-size: 16px; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .tool-card { padding: var(--unit-6); }
  .section h2 { font-size: 24px; }
  .section.cta-banner h2 { font-size: 26px; }
}