/* ═══════════════════════════════════════════════
   命理智算 — 公开站样式 · 曜石紫金 · 紫微星河
   依据《前端网站化设计与实施方案 V1.2》§13 视觉与品牌规范：
   - 13.1 现代文化科技网站，浅色内容区优先，深色仅作首屏/页脚/强调背景
   - 13.2 品牌色板：曜石黑#0E0B14 / 深紫#24143A / 星云紫#6F4CC3 /
          紫金#C6A56B / 米白#F7F4EE / 墨色#1C1822 / 中灰#68636F
   - 13.3 正文桌面≥16px、移动≥15px；表格与辅助文本≥13px；行高1.6—1.85
   - 13.4 图标使用统一 SVG 图标集（components/icon.html）
   依赖：design-tokens.css / components.css / responsive-grid.css
   ═══════════════════════════════════════════════ */

/* ── 兼容别名（映射到设计令牌，保证旧模板变量不断裂） ── */
:root {
  --gold: var(--color-golden-purple);       /* 紫金 */
  --gold-light: #D9BE85;                    /* 紫金浅色 */
  --zhu: var(--color-ji);                   /* 吉红（规则7：红=吉） */
  --xiong: var(--color-xiong);              /* 凶绿（规则7：绿=凶） */
  --ping: var(--color-ping);                /* 平金 */
  --color-primary: var(--color-nebula-purple);  /* 主按钮/链接（ADM 后台） */
  --color-primary-hover: var(--text-link-hover);/* 主按钮悬停 */
  --bg-deep: var(--bg-dark);                /* 曜石黑 */
  --bg-card: var(--bg-surface);             /* 白色卡片 */
  --bg-input: var(--bg-surface);
  --text: var(--text-primary);              /* 墨色 */
  --text-secondary: var(--text-secondary);  /* 中灰 */
  --text-muted: var(--text-tertiary);
  --border: var(--border-default);
  --border-focus: var(--border-focus);
  --error: var(--color-error);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --font: var(--font-family-base);
  --radius-sm: var(--radius-sm);
  --radius: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-full: var(--radius-full);
  --safe-bottom: 34px;
  --max-w: 1200px;
}

/* ── 重置与基准 ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg-page); color:var(--text-primary);
  line-height:1.7; min-height:100vh; -webkit-tap-highlight-color:transparent; }
/* 移动端正文基准 15px（§13.3） */
@media (max-width:767px) { html { font-size:15px; } }

/* ── 公开站容器 ── */
.public-wrap { min-height:100vh; display:flex; flex-direction:column; }
.container-wide { max-width:960px; margin:0 auto; }

/* ── 按钮（品牌样式覆盖，不重复定义尺寸类） ── */
.btn.w-full { justify-content:center; }

/* ── 表单（品牌增强，基础样式来自 components.css） ── */
.form-input, .form-select { min-height:44px; }

/* ── 排版 ── */
h1 { font-size:28px; font-weight:700; line-height:1.3; letter-spacing:1px; color:var(--text-primary); font-family:var(--font-family-display); }
h2 { font-size:22px; font-weight:600; line-height:1.3; color:var(--text-primary); font-family:var(--font-family-display); }
h3 { font-size:18px; font-weight:600; color:var(--text-primary); }
@media (min-width:768px) { h1 { font-size:36px; } h2 { font-size:28px; } }

.section { padding:48px 16px; }
.section-sm { padding:32px 16px; }
@media (min-width:768px) { .section { padding:64px 32px; } .section-sm { padding:48px 32px; } }

.section-title { text-align:center; margin-bottom:8px; color:var(--text-primary); }
.section-subtitle { text-align:center; font-size:15px; color:var(--text-secondary); margin-bottom:36px; line-height:1.7; }
.section-divider { width:48px; height:2px; background:linear-gradient(90deg,transparent,var(--color-golden-purple),transparent); margin:0 auto 32px; }

.container { max-width:720px; margin:0 auto; }
@media (min-width:768px) { .section-subtitle { font-size:16px; } }

/* ── 卡片 ── */
.card { background:var(--bg-card); border-radius:var(--radius-lg); padding:24px; border:1px solid var(--border); }

/* ── Hero（浅色兜底；首页在模板内自定义品牌渐变首屏） ── */
.hero { padding:56px 16px 48px; text-align:center; position:relative; overflow:hidden; background:var(--bg-page); }
.hero::before { content:''; position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:360px; height:360px; background:radial-gradient(circle,rgba(111,76,195,0.06) 0%,transparent 70%); pointer-events:none; }
.hero-ornament { font-size:36px; color:var(--color-golden-purple); opacity:.45; margin-bottom:12px; letter-spacing:12px; }
.hero h1 { margin-bottom:16px; }
.hero h1 em { font-style:normal; color:var(--color-nebula-purple); border-bottom:2px solid var(--color-golden-purple); padding-bottom:4px; }
.hero p { font-size:15px; color:var(--text-secondary); line-height:1.9; max-width:380px; margin:0 auto 28px; }
.hero .btn-group { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
@media (min-width:768px) { .hero { padding:80px 32px 64px; } .hero p { font-size:16px; max-width:520px; } }

/* ── 统计条 ── */
.stats-bar { display:flex; justify-content:center; gap:40px; padding:28px 16px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-surface); }
.stat-item { text-align:center; }
.stat-num { font-size:26px; font-weight:700; color:var(--color-golden-purple); }
.stat-label { font-size:13px; color:var(--text-secondary); margin-top:4px; letter-spacing:1px; }

/* ── 功能卡片 ── */
.feature-card { background:var(--bg-card); border-radius:var(--radius-lg); padding:24px 16px; border:1px solid var(--border); text-align:center; transition:border-color .3s; }
.feature-card:hover { border-color:rgba(111,76,195,0.25); }
.feature-icon { font-size:28px; margin-bottom:12px; display:block; color:var(--color-nebula-purple); }
.feature-card h3 { font-size:16px; color:var(--text-primary); margin-bottom:6px; }
.feature-card p { font-size:13px; color:var(--text-secondary); line-height:1.7; }

/* ── 服务列表 ── */
.service-item { display:flex; align-items:center; gap:14px; background:var(--bg-card); border-radius:var(--radius-lg); padding:18px 16px; border:1px solid var(--border); text-decoration:none; color:var(--text-primary); transition:border-color .2s; }
.service-item:hover,.service-item:active { border-color:var(--color-nebula-purple); }
.service-item .si-icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(111,76,195,0.06); border-radius:8px; font-size:22px; color:var(--color-nebula-purple); flex-shrink:0; }
.service-item .si-info { flex:1; min-width:0; }
.service-item .si-name { font-size:16px; font-weight:600; color:var(--text-primary); }
.service-item .si-meta { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.service-item .si-arrow { color:var(--text-tertiary); font-size:18px; }

/* ── 定价卡片 ── */
.pricing-card { background:var(--bg-card); border-radius:var(--radius-lg); padding:28px 24px; border:1px solid var(--border); position:relative; }
.pricing-card.featured { border-color:var(--color-golden-purple); box-shadow:0 0 28px rgba(198,165,107,0.10); }
.pricing-badge { position:absolute; top:-10px; right:16px; background:linear-gradient(135deg,var(--color-golden-purple),var(--gold-light)); color:var(--bg-dark); font-size:13px; font-weight:700; padding:3px 16px; border-radius:10px; letter-spacing:1px; }
.pricing-name { font-size:18px; font-weight:600; margin-bottom:4px; color:var(--text-primary); }
.pricing-price { margin:16px 0 20px; display:flex; align-items:baseline; gap:4px; }
.pricing-amount { font-size:44px; font-weight:700; color:var(--color-nebula-purple); line-height:1; }
.pricing-unit { font-size:13px; color:var(--text-secondary); }
.pricing-features { list-style:none; margin-bottom:24px; }
.pricing-features li { font-size:15px; padding:8px 0; color:var(--text-secondary); display:flex; align-items:center; gap:8px; line-height:1.6; }
.pricing-features li::before { content:'✓'; color:var(--color-nebula-purple); font-size:13px; flex-shrink:0; }
@media (min-width:768px) { .pricing-row { display:flex; gap:16px; max-width:800px; margin:0 auto; } .pricing-card { flex:1; } .pricing-features li { font-size:16px; } }

/* ── CTA ── */
.cta, .cta-bar { padding:60px 16px; text-align:center; background:var(--bg-page); }
.cta h2, .cta-bar h2 { margin-bottom:8px; }
.cta p, .cta-bar p { font-size:15px; color:var(--text-secondary); margin-bottom:28px; }
@media (min-width:768px) { .cta p, .cta-bar p { font-size:16px; } }

/* ── 内容页（浅色高可读，§13.2） ── */
.content-page { max-width:720px; margin:0 auto; padding:32px 16px; }
.content-page h1 { font-size:24px; margin-bottom:8px; color:var(--text-primary); }
.content-page h2 { font-size:20px; margin:32px 0 12px; color:var(--text-primary); }
.content-page h3 { font-size:18px; margin:24px 0 8px; color:var(--text-primary); }
.content-page p { font-size:15px; color:var(--text-primary); line-height:1.85; margin-bottom:16px; }
.content-page .page-meta { font-size:13px; color:var(--text-secondary); margin-bottom:24px; }
@media (min-width:768px) { .content-page p { font-size:16px; } }

/* ── 认证页（浅色） ── */
.auth-page { display:flex; align-items:center; justify-content:center; min-height:80vh; padding:16px; }
.auth-card { width:100%; max-width:400px; background:var(--bg-surface); border-radius:var(--radius-lg); padding:40px 28px; border:1px solid var(--border); box-shadow:var(--shadow-card); }
.auth-card .auth-seal { text-align:center; margin-bottom:8px; }
.auth-card .auth-seal span { display:inline-flex; width:56px; height:56px; background:var(--color-nebula-purple); border-radius:var(--radius-md); align-items:center; justify-content:center; font-size:28px; font-weight:700; color:var(--text-inverse); font-family:var(--font-family-brand); }
.auth-card h1 { text-align:center; font-size:20px; letter-spacing:4px; color:var(--text-primary); margin-bottom:32px; }
.auth-card .auth-alt { text-align:center; margin-top:24px; font-size:13px; color:var(--text-secondary); }
.auth-card .auth-alt a { color:var(--color-nebula-purple); text-decoration:none; }
.auth-card .divider { display:flex; align-items:center; margin:20px 0; color:var(--text-secondary); font-size:13px; }
.auth-card .divider::before,.auth-card .divider::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-card .divider span { padding:0 12px; }

/* ── 闪现消息（auth-flash，此前无样式定义） ── */
.auth-flash { padding:12px 16px; border-radius:var(--radius-md); margin-bottom:16px; font-size:13px; line-height:1.6; }
.auth-flash.success { background:rgba(56,216,145,0.12); color:#1d7a52; border:1px solid rgba(56,216,145,0.4); }
.auth-flash.error { background:rgba(255,107,107,0.10); color:#c0392b; border:1px solid rgba(255,107,107,0.4); }
.auth-flash.info, .auth-flash.message { background:rgba(111,76,195,0.08); color:#5a3da6; border:1px solid rgba(111,76,195,0.3); }

/* ── 文章页 ── */
.article-page { max-width:760px; margin:0 auto; padding:32px 16px; }
.article-page h1 { font-size:24px; margin-bottom:8px; }
.article-meta, .page-meta { font-size:13px; color:var(--text-secondary); margin-bottom:20px; }
.article-summary { font-size:15px; color:var(--text-primary); line-height:1.85; background:var(--bg-surface); border-left:3px solid var(--color-golden-purple); border-radius:var(--radius-sm); padding:16px; margin-bottom:24px; }
.article-tags, .tags { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.article-tags a, .tags a { font-size:13px; color:var(--color-nebula-purple); background:rgba(111,76,195,0.06); border-radius:var(--radius-full); padding:4px 14px; text-decoration:none; }
.article-related { margin-top:32px; padding-top:24px; border-top:1px solid var(--border); }
.article-cta { text-align:center; padding:32px 0; }
@media (min-width:768px) { .article-page h1 { font-size:28px; } .article-summary { font-size:16px; } }

/* ── 搜索页 ── */
.search-page { max-width:760px; margin:0 auto; padding:32px 16px; }
.search-form { display:flex; gap:8px; margin-bottom:24px; }
.search-form .form-input { flex:1; }
.search-title { font-size:18px; color:var(--text-primary); margin-bottom:4px; }
.search-summary { font-size:13px; color:var(--text-secondary); margin-bottom:16px; }
.search-suggestions { margin-top:32px; }

/* ── 服务介绍页 ── */
.service-section { max-width:860px; margin:0 auto; padding:32px 16px; }
.service-hero { text-align:center; padding:32px 0; }
.service-hero h1 { margin-bottom:8px; }
.service-feature { display:flex; gap:16px; align-items:flex-start; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-bottom:16px; }
.service-feature-icon { width:48px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(111,76,195,0.08); border-radius:var(--radius-md); color:var(--color-nebula-purple); }
.service-feature h3 { font-size:16px; margin-bottom:4px; }
.service-feature p { font-size:15px; color:var(--text-secondary); line-height:1.7; }

/* ── 免费工具聚合页 ── */
.tool-card-detail { display:flex; align-items:center; gap:14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 16px; text-decoration:none; color:var(--text-primary); margin-bottom:12px; transition:border-color .2s; }
.tool-card-detail:hover { border-color:var(--color-nebula-purple); }
.tool-card-icon { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(111,76,195,0.06); border-radius:8px; font-size:22px; color:var(--color-nebula-purple); }
.tool-desc { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.tool-tags { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }

/* ── FAQ ── */
.faq-item { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-bottom:16px; }
.faq-item h3 { font-size:16px; margin-bottom:8px; }
.faq-item p { font-size:15px; color:var(--text-secondary); line-height:1.8; }

/* ── 法律页 ── */
.legal-page { max-width:760px; margin:0 auto; padding:32px 16px; }
.legal-page p { font-size:15px; line-height:1.85; color:var(--text-primary); margin-bottom:16px; }
.legal-meta { font-size:13px; color:var(--text-secondary); margin-bottom:24px; }
@media (min-width:768px) { .legal-page p { font-size:16px; } }

/* ── 空状态图标（SVG 图标集） ── */
.empty-icon, .status-icon .icon { color:var(--text-tertiary); }

/* ── 标签（红吉绿凶金平，规则7） ── */
.tag { display:inline-block; padding:2px 10px; border-radius:4px; font-size:13px; font-weight:600; letter-spacing:1px; line-height:1.6; }
.tag-ji { background:rgba(255,109,134,0.12); color:var(--color-ji); }
.tag-xiong { background:rgba(84,228,157,0.14); color:var(--color-xiong); }
.tag-ping { background:rgba(255,182,92,0.14); color:var(--color-ping); }

/* ── 工具类 ── */
.text-center { text-align:center; }
.text-gold { color:var(--color-golden-purple); }
.text-zhu { color:var(--color-ji); }
.text-muted { color:var(--text-secondary); }
.mt-2 { margin-top:8px; }
.mt-4 { margin-top:16px; }
.mt-6 { margin-top:24px; }
.mb-4 { margin-bottom:16px; }
.mb-6 { margin-bottom:24px; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.gap-2 { gap:8px; }
.gap-4 { gap:16px; }
.w-full { width:100%; }

/* ── 响应式显隐工具 ── */
.hide-mobile { display:none; }
@media (min-width:768px) {
  .hide-mobile { display:flex; }
  .hide-desktop { display:none; }
}

/* ── 动画 ── */
@keyframes fadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.animate-in { animation:fadeIn .5s ease-out; }

/* ═══ §15.2 断点补齐（2026-08-13）═══ */
@media (min-width:576px) {
  .content-page { padding:40px 24px; }
  .article-page { padding:40px 24px; }
  .auth-card { padding:44px 32px; }
}
@media (min-width:1024px) {
  .container-wide { max-width:1080px; }
  h1 { font-size:40px; }
}
@media (min-width:1440px) {
  .container-wide { max-width:1200px; }
}
@media (min-width:2560px) {
  .container-wide { max-width:1440px; }
  .content-page { max-width:920px; }
  .article-page { max-width:980px; }
}

/* ── 术数工具首屏 Hero（统一风格 · 参照数字能量）── */
.tool-hero{
  background:
    radial-gradient(1200px 420px at 50% -10%, rgba(111,76,195,.35), transparent 60%),
    linear-gradient(135deg, var(--color-obsidian), var(--color-deep-purple));
  text-align:center; padding:var(--space-12) var(--space-4) var(--space-10);
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.tool-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(198,165,107,.5), transparent);
}
.tool-hero-inner{max-width:680px; margin:0 auto; position:relative; z-index:1;}
.tool-hero-eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--font-size-sm); font-weight:600; letter-spacing:.12em;
  color:var(--color-golden-purple); padding:6px 16px; border-radius:var(--radius-full);
  border:1px solid rgba(198,165,107,.35); background:rgba(198,165,107,.08);
  margin-bottom:var(--space-4);
}
.tool-hero h1{
  font-size:var(--font-size-2xl); color:var(--color-golden-purple); margin:0 0 var(--space-3);
  letter-spacing:2px; font-weight:700;
}
.tool-hero-sub{
  font-size:var(--font-size-base); color:var(--color-stellar-silver);
  letter-spacing:.1em; margin:0 0 var(--space-3);
}
.tool-hero-desc{
  font-size:var(--font-size-sm); color:var(--text-on-dark-secondary);
  max-width:520px; margin:0 auto; line-height:var(--line-height-relaxed);
}
@media (min-width:768px){
  .tool-hero{padding:var(--space-16) var(--space-4) var(--space-12);}
  .tool-hero h1{font-size:var(--font-size-3xl);}
}