/* ===========================================================
   wxti 子站 · v2 视觉收口覆盖层（2026-05-25）
   目标：把 Y2K 潮酷 + 黑粗字 + 黄高亮 + 4px 硬阴影
        收回主站「极简东方 · 留白如诗」风格
   策略：override CSS variables + 关键组件，保留所有布局
   引入：在原 style.css 之后引入此文件
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

:root {
  /* ----- 调色板：完全对齐主站品牌手册 ----- */
  --bg: #F8F6F0;              /* 缟素 */
  --card: #FFFFFF;
  --ink: #1A1A2E;             /* 玄 */
  --ink-soft: #333333;        /* 墨 */
  --muted: #999999;           /* 银鼠 */
  --line: rgba(0,0,0,0.08);
  --line-strong: rgba(0,0,0,0.12);

  /* 主题色：水靛青（不再用朱砂红抢戏） */
  --theme: #1661AB;
  --theme-soft: #EEF3F8;
  --theme-text: #0E4A82;

  /* 五行色保留（用于人格主卡背景） */
  --wx-wood:  #789262;
  --wx-fire:  #FF461F;
  --wx-earth: #C89B40;
  --wx-metal: #B8B0A0;
  --wx-water: #1661AB;

  /* 字体：去掉 Archivo Black 和庆科黄油体，回到主站思源系 */
  --f-heading: 'Noto Serif SC', serif;
  --f-zh: 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
  --f-zh-heavy: 'Noto Sans SC', sans-serif;
  --f-serif: 'Noto Serif SC', serif;
  --f-mono: 'Noto Sans SC', sans-serif;
}

/* 背景渐变会与卡片产生色差，直接禁用：wxti 走纯净缟素底 */
body::before {
  display: none !important;
}

/* 输入/加载/结果页统一缟素底，让 .page 和卡片之间的对比降到最低 */
.page {
  background: var(--bg);
}
/* 旧版诗意封面已弃用 · 强制隐藏（防止任何缓存渲染）*/
#page-cover,
.cover-topbar,
.cover-logo-center,
.cover-logo-big,
.cover-hero,
.cover-badge,
.cover-title,
.cover-title-sub,
.cover-title-en,
.cover-poem,
.poem-line,
.cover-stats,
.cover-stat,
.cover-stat-num,
.cover-stat-label,
.cover-btn,
.cover-footer { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }

/* 卡片背景由纯白 #FFFFFF 改为更接近缟素的极浅暖白 #FCFAF5，
   保留可见的卡片层级感（描边+阴影承担分隔角色），消除大块色差 */
.bazi-section,
.persona-card,
.cover-poem,
.cover-stat,
#premium-modal,
#ta-modal,
.ta-duo-card {
  background: #FCFAF5 !important;
}

/* ====== 封面页 ====== */
.cover-topbar-date .dot { background: var(--theme); box-shadow: 0 0 6px rgba(22,97,171,0.5); }
.cover-logo-big { width: 60%; max-width: 220px; }

.cover-badge {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 500;
  letter-spacing: 3px;
  font-size: 11px;
}

.cover-title,
.cover-title-sub {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 2px;
  color: var(--ink);
}
.cover-title-sub .hl-red { color: var(--theme); }
.cover-title-en {
  font-family: var(--f-zh);
  font-weight: 300;
  letter-spacing: 6px;
  color: var(--muted);
}

/* 诗意文案卡：去掉 4px 黑边硬阴影，改极简描边 + 极轻阴影 */
.cover-poem {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.03);
  padding: 32px 28px;
}
.poem-line {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 2;
  color: var(--ink-soft);
  letter-spacing: 1px;
}
.poem-line.poem-emphasis {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  background: none;          /* 去掉黄色荧光高亮 */
  padding: 0;
  position: relative;
  display: inline-block;
}
.poem-line.poem-emphasis::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  bottom: 4px;
  height: 8px;
  background: rgba(22, 97, 171, 0.12);   /* 改用水靛青柔光 */
  z-index: -1;
  border-radius: 4px;
}

/* 数据卡 */
.cover-stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.03);
}
.cover-stat-num {
  font-family: var(--f-serif);
  font-weight: 700;
  letter-spacing: 0;
}
.cover-stat:nth-child(1) .cover-stat-num { color: var(--wx-wood); }
.cover-stat:nth-child(2) .cover-stat-num { color: var(--wx-fire); }
.cover-stat:nth-child(3) .cover-stat-num { color: var(--wx-water); }
.cover-stat-label {
  letter-spacing: 1px;
  color: var(--muted);
}

/* 主 CTA：水靛青胶囊按钮（对齐主站 btn-primary） */
.cover-btn {
  background: var(--theme);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(22, 97, 171, 0.20);
  font-family: var(--f-zh);
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 15px;
  padding: 16px 28px;
  transition: all 0.25s ease;
}
.cover-btn:hover {
  background: var(--theme-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 97, 171, 0.30);
}
.cover-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(22, 97, 171, 0.20);
}

.cover-footer {
  color: var(--muted);
  letter-spacing: 2px;
  font-family: var(--f-zh);
  font-weight: 300;
}

/* ====== 输入页 ====== */
.page-header-title {
  font-family: var(--f-serif);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ink);
}
.back-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 50%;
  width: 32px; height: 32px;
  box-shadow: none;
}
.back-btn:hover { background: var(--bg); }

.input-title {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--ink);
}
.input-title .hl {
  color: var(--theme);
  background: none;
}
.input-subtitle, .input-tip {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.5px;
}

.form-section-label {
  font-family: var(--f-zh);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
}
.form-section-label .zh { color: var(--muted); margin-left: 8px; }

.sel {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  font-family: var(--f-zh);
  font-size: 15px;
  box-shadow: none;
}
.sel:focus {
  outline: none;
  border-color: var(--theme);
}

.gender-btn {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  font-family: var(--f-zh);
  font-weight: 500;
  letter-spacing: 1px;
  box-shadow: none;
}
.gender-btn:hover { border-color: var(--theme); }
.gender-btn.active {
  background: var(--theme);
  color: #fff;
  border-color: var(--theme);
}

.overseas-tip {
  background: rgba(200, 155, 64, 0.08);
  border: 1px dashed rgba(200, 155, 64, 0.40);
  color: #8B6E2C;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.7;
}

.submit-btn {
  background: var(--theme);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(22, 97, 171, 0.20);
  font-family: var(--f-zh);
  font-weight: 500;
  letter-spacing: 1px;
  padding: 16px 28px;
  transition: all 0.25s ease;
}
.submit-btn:hover {
  background: var(--theme-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 97, 171, 0.30);
}
.submit-btn:active {
  transform: translateY(0);
}

/* ====== 加载页 ====== */
.loading-text {
  font-family: var(--f-serif);
  color: var(--ink-soft);
  letter-spacing: 1px;
}

/* ====== 结果页 ====== */
.bazi-section { background: var(--card); border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.03); }
.bazi-label-zh {
  font-family: var(--f-serif);
  color: var(--ink);
  letter-spacing: 1px;
}
.bazi-label-en {
  color: var(--muted);
  letter-spacing: 2px;
  font-weight: 300;
}

/* 人格主卡 */
.persona-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.03);
}
.persona-hint-big {
  color: var(--muted);
  font-family: var(--f-zh);
  font-weight: 400;
  letter-spacing: 1px;
}
.persona-gz, .persona-name {
  font-family: var(--f-serif);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 2px;
}
.persona-dot { color: var(--muted); }

/* 区块分隔 */
.section-divider {
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.section-divider .sd-title {
  font-family: var(--f-serif);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink);
}
.section-divider .sd-en {
  color: var(--muted);
  letter-spacing: 2px;
  font-weight: 300;
}

/* 出厂技能 / 弹幕项 */
.lines, .skills, .explain { color: var(--ink-soft); font-family: var(--f-zh); line-height: 1.9; }

/* 正确 / 错误用法 */
.usage-box {
  border: 1px solid;
  border-radius: 12px;
  background: var(--card);
}
.usage-box.good { background: rgba(120, 146, 98, 0.06); border-color: rgba(120, 146, 98, 0.25); }
.usage-box.bad  { background: rgba(200, 155, 64, 0.06); border-color: rgba(200, 155, 64, 0.25); }
.usage-box.good .usage-title { color: var(--wx-wood); font-family: var(--f-serif); font-weight: 700; }
.usage-box.bad  .usage-title { color: var(--wx-earth); font-family: var(--f-serif); font-weight: 700; }
.usage-content { color: var(--ink-soft); font-family: var(--f-zh); }

/* 测测 TA CTA */
.ta-cta {
  background: linear-gradient(135deg, rgba(22, 97, 171, 0.06), rgba(200, 155, 64, 0.06));
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
}
.ta-cta-title { font-family: var(--f-serif); font-weight: 700; color: var(--ink); letter-spacing: 1px; }
.ta-cta-sub { color: var(--muted); }
.ta-cta-btn {
  background: var(--theme);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(22, 97, 171, 0.20);
  font-family: var(--f-zh);
  font-weight: 500;
  padding: 12px 24px;
  letter-spacing: 1px;
}
.ta-cta-btn:hover { background: var(--theme-text); transform: translateY(-2px); }

/* ====== 操作按钮（结果页底部）====== */
.action-btn {
  border-radius: 999px;
  font-family: var(--f-zh);
  font-weight: 500;
  letter-spacing: 1px;
  border: none;
  transition: all 0.25s ease;
}
.action-btn.primary {
  background: var(--theme);
  color: #fff;
  box-shadow: 0 2px 8px rgba(22, 97, 171, 0.20);
}
.action-btn.primary:hover {
  background: var(--theme-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 97, 171, 0.30);
}
.action-btn.primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(22, 97, 171, 0.20); }

.action-btn.premium {
  background: var(--wx-earth);
  color: #fff;
  box-shadow: 0 2px 8px rgba(200, 155, 64, 0.20);
}
.action-btn.premium:hover {
  background: #A37D2C;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200, 155, 64, 0.30);
}
.action-btn.premium:active { transform: translateY(0); }

.action-btn.secondary {
  background: var(--card);
  color: var(--theme);
  border: 1.5px solid var(--theme);
}
.action-btn.secondary:hover {
  background: var(--theme);
  color: #fff;
}

.result-tip {
  color: var(--muted);
  font-family: var(--f-zh);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.5px;
}

/* ====== Modal 弹窗 ====== */
.overlay {
  background: rgba(26, 26, 46, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.overlay-close {
  background: var(--card);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  width: 36px; height: 36px;
  border-radius: 50%;
  box-shadow: none;
}
.overlay-close:hover { background: var(--bg); }

#premium-modal,
#ta-modal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,.20);
}
.modal-title {
  font-family: var(--f-serif);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ink);
}
.modal-subtitle { color: var(--muted); letter-spacing: 2px; }
.modal-wechat-name-big {
  font-family: var(--f-serif);
  font-weight: 700;
  color: var(--theme);
  letter-spacing: 2px;
}
.modal-sep { background: var(--line); }
.modal-qr-tip { color: var(--muted); font-family: var(--f-zh); }

/* 输入框（TA 弹窗）*/
.ta-input {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  font-family: var(--f-zh);
  padding: 12px 14px;
  font-size: 15px;
}
.ta-input:focus {
  outline: none;
  border-color: var(--theme);
}

/* TA 配对结果 */
.ta-result-title {
  font-family: var(--f-serif);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ink);
}
.ta-duo-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ta-duo-gz, .ta-duo-name {
  font-family: var(--f-serif);
  color: var(--ink);
  letter-spacing: 1px;
}
.ta-duo-relation {
  font-family: var(--f-serif);
  font-weight: 700;
  color: var(--theme);
}
.ta-verdict-box {
  background: linear-gradient(135deg, rgba(22, 97, 171, 0.06), rgba(200, 155, 64, 0.06));
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ta-verdict-quote {
  font-family: var(--f-serif);
  color: var(--ink-soft);
  line-height: 1.9;
}

/* ====== 分享卡（保留原视觉，不强行改 — 因为是用户保存的物料） ====== */
/* 仅微调字体和主色，让保存出来的卡也符合品牌 */
.sc-top {
  border-bottom: 1px solid var(--line) !important;  /* 由 2px 黑实线改为 1px 浅描边 */
}
.sc-logo {
  height: 36px !important;
  width: 36px !important;
  object-fit: contain;
}
.sc-brand-zh {
  font-family: var(--f-serif);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 2px;
}
.sc-brand-en {
  font-family: var(--f-zh);
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 2px;
}
.sc-bazi-label, .sc-section-title {
  color: var(--muted);
  letter-spacing: 1px;
  font-family: var(--f-zh);
}
.sc-persona-name {
  font-family: var(--f-serif);
  color: var(--ink);
}
.sc-footer-brand {
  font-family: var(--f-serif);
  color: var(--ink);
  letter-spacing: 1px;
}

/* ====== Pagination / Etc 兜底 ====== */
* { -webkit-tap-highlight-color: transparent; }

/* =================================================
   v3 视觉刷新（2026-05-27）· 对齐主站设计规范
   ================================================= */

/* ---- 1. 小标题（section-divider）改纯文字+主站极简风 ---- */
.section-divider {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 0 0 12px 0 !important;
  margin: 28px 0 16px !important;
  border-bottom: 1px solid var(--line) !important;
  border-left: none !important;
}
.section-divider .sd-icon {
  display: none !important;
}
.section-divider .sd-title {
  font-family: var(--f-serif) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  letter-spacing: 2px !important;
  position: relative;
  padding-left: 14px;
}
.section-divider .sd-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  background: var(--theme);
  border-radius: 2px;
}
.section-divider .sd-en {
  margin-left: auto;
  font-family: var(--f-zh) !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 3px !important;
  color: var(--muted) !important;
}

/* ---- 2. 人格图（persona-img）：浅灰渐变底 · 让银白/透明玩偶显轮廓（朱玉婷 2026-07-05）----
   历史：
   - v1 用 var(--bg) 米色 → 白色主体产生"灰边"视觉错觉
   - v2 改纯白 #FFFFFF → 银白/火焰/玻璃质感玩偶身体完全和背景融合，"身体消失"
   - v3（当前）浅灰渐变：从上到下 #F0EEE9 → #E4E2DC，中间偏亮
     · 深灰玩偶头部（如打火机火焰款）：底色比头部浅 → 头有轮廓
     · 银白玩偶身体：底色是灰色 → 银白显亮，不再"融化"
*/
.persona-img {
  background: linear-gradient(180deg, #F0EEE9 0%, #E8E5DE 60%, #E0DDD5 100%) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow:
    inset 0 2px 20px rgba(255,255,255,.4),  /* 顶部微亮，营造柔光 */
    0 2px 12px rgba(0,0,0,.06);
}
[data-theme="dark"] .persona-img {
  background: linear-gradient(180deg, #4A453D 0%, #3A362F 100%) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 2px 20px rgba(255,255,255,.06),
    0 2px 12px rgba(0,0,0,.30);
}
.persona-img .fallback {
  background: url('../assets/logo-mark-light.png') center/40% no-repeat;
  font-size: 0 !important;
  color: transparent !important;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}

/* ---- 3. 出厂技能 skill 卡片改主站风 ---- */
.skill {
  padding: 14px 16px !important;
  background: #FCFAF5 !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.03) !important;
}
.skill-icon {
  font-family: var(--f-serif) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  color: var(--theme) !important;
  width: 22px;
  text-align: center;
  display: inline-block;
}
.skill-title {
  font-family: var(--f-serif) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  color: var(--ink) !important;
}
.skill-desc {
  font-family: var(--f-zh) !important;
  font-size: 12.5px !important;
  color: var(--muted) !important;
  line-height: 1.8 !important;
  padding-left: 30px !important;
}

/* ---- 4. 灵魂弹幕 line 改极简引用样式 ---- */
.line {
  font-family: var(--f-serif) !important;
  font-style: normal !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: var(--ink-soft) !important;
  line-height: 1.85 !important;
  padding: 6px 0 6px 14px !important;
  border-left: 2px solid var(--theme) !important;
  background: transparent !important;
}

/* ---- 5. 宜/忌 usage-box 改极简东方风 ---- */
.usage-grid {
  gap: 12px !important;
  margin-top: 20px !important;
}
.usage-box {
  padding: 16px 16px !important;
  border-radius: 12px !important;
  border: 1px solid !important;
  background: #FCFAF5 !important;
}
.usage-box.good {
  border-color: rgba(120, 146, 98, 0.30) !important;
  background: rgba(120, 146, 98, 0.04) !important;
}
.usage-box.bad {
  border-color: rgba(200, 155, 64, 0.30) !important;
  background: rgba(200, 155, 64, 0.04) !important;
}
.usage-title {
  font-family: var(--f-serif) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 4px !important;
  margin-bottom: 10px !important;
  position: relative;
  padding-left: 20px;
}
.usage-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
}
.usage-box.good .usage-title { color: var(--wx-wood) !important; }
.usage-box.good .usage-title::before { background: var(--wx-wood); }
.usage-box.bad .usage-title { color: var(--wx-earth) !important; }
.usage-box.bad .usage-title::before { background: var(--wx-earth); }
.usage-content {
  font-family: var(--f-zh) !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: var(--ink-soft) !important;
}

/* ---- 6. 八字段（bazi-section）卡片柔化 ---- */
.bazi-section {
  padding: 18px 18px !important;
  margin-bottom: 18px !important;
  background: #FCFAF5 !important;
  border-radius: 16px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

/* ---- 7. 人格主卡 persona-card 加大留白 ---- */
.persona-card {
  padding: 24px 20px !important;
  border-radius: 16px !important;
  background: #FCFAF5 !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.03) !important;
}

/* ---- 8. 海外提示框柔化 ---- */
.overseas-tip {
  background: rgba(200, 155, 64, 0.06) !important;
  border: 1px dashed rgba(200, 155, 64, 0.35) !important;
  border-radius: 10px !important;
  color: #8B6E2C !important;
  font-size: 12.5px !important;
  line-height: 1.8 !important;
  padding: 12px 14px !important;
  margin-top: 16px;
}

/* ---- 9. 关闭按钮 ✕ 极简化 ---- */
.overlay-close {
  background: rgba(255,255,255,.92) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}

/* ---- 10. badge 标签柔化 ---- */
.cover-badge {
  background: rgba(22, 97, 171, 0.06) !important;
  color: var(--theme) !important;
  border: 1px solid rgba(22, 97, 171, 0.20) !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 4px !important;
}

/* ---- 11. 性别按钮 active 态去除黄色硬阴影 ---- */
.gender-btn.active {
  box-shadow: 0 4px 12px rgba(22, 97, 171, 0.20) !important;
  border: none !important;
}

/* ---- 12. input/select 聚焦统一为水靛青 ---- */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--theme) !important;
  box-shadow: 0 0 0 3px rgba(22, 97, 171, 0.10) !important;
}

/* ---- 13. section 间距加大 ---- */
.persona-card .section-divider:not(:first-child) {
  margin-top: 36px !important;
}

/* =================================================
   分享卡彻底重做（v3）· 纯东方水墨风
   ================================================= */
#share-card {
  background: #FCFAF5 !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.08) !important;
  padding: 28px 24px !important;
}
.sc-top {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--line) !important;
}
.sc-logo {
  height: 40px !important;
  width: 40px !important;
}
.sc-brand-zh {
  font-family: var(--f-serif) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 4px !important;
  color: var(--ink) !important;
}
.sc-brand-en {
  font-family: var(--f-zh) !important;
  font-size: 9px !important;
  font-weight: 300 !important;
  letter-spacing: 3px !important;
  color: var(--muted) !important;
}
.sc-bazi-row {
  margin-bottom: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.sc-bazi-label {
  font-family: var(--f-zh) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  color: var(--muted) !important;
  margin-bottom: 8px !important;
}
.sc-persona {
  margin-bottom: 18px !important;
  text-align: center !important;
}
.sc-persona-img {
  width: 70%;
  margin: 0 auto 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: var(--bg) !important;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.sc-persona-img .fallback {
  background: url('../assets/logo-mark-light.png') center/40% no-repeat;
  font-size: 0;
  width: 100%; height: 100%;
  opacity: 0.5;
}
.sc-persona-hint {
  font-family: var(--f-zh) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  letter-spacing: 2px !important;
  margin-bottom: 4px !important;
}
.sc-gz, .sc-name {
  font-family: var(--f-serif) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: 3px !important;
  color: var(--ink) !important;
}
.sc-dot {
  color: var(--muted) !important;
  margin: 0 6px !important;
}
.sc-section-title {
  font-family: var(--f-serif) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 3px !important;
  color: var(--ink) !important;
  margin: 16px 0 8px !important;
  padding-left: 10px !important;
  position: relative;
}
.sc-section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 10px;
  background: var(--theme);
}
.sc-lines .line {
  font-size: 12.5px !important;
  padding: 4px 0 4px 10px !important;
  border-left-width: 2px !important;
  margin-bottom: 4px !important;
}
.sc-explain {
  font-family: var(--f-zh) !important;
  font-size: 12px !important;
  color: var(--ink-soft) !important;
  line-height: 1.85 !important;
}
.sc-pair-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap;
}
.sc-pair-row .sc-pair-card {
  flex: 0 0 auto;
  padding: 6px 12px !important;
  background: rgba(22,97,171,0.04) !important;
  border: 1px solid rgba(22,97,171,0.15) !important;
  border-radius: 999px !important;
  font-family: var(--f-serif) !important;
  font-size: 12px !important;
  color: var(--ink) !important;
}
.sc-footer {
  margin-top: 22px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--line) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
}
.sc-footer-brand {
  font-family: var(--f-serif) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  color: var(--ink) !important;
}
.sc-footer-tip {
  font-family: var(--f-zh) !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
}
.sc-footer-wx {
  font-family: var(--f-zh) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 6px !important;
}
.sc-qr-img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
}
.sc-qr-label {
  font-family: var(--f-zh) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
}

/* 分享卡底部"保存图片"按钮 */
.share-actions-bottom button {
  background: var(--theme) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-family: var(--f-zh) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  margin-top: 16px !important;
  box-shadow: 0 4px 12px rgba(22, 97, 171, 0.25) !important;
  cursor: pointer;
}
.share-actions-bottom button:hover {
  background: var(--theme-text) !important;
  transform: translateY(-1px);
}

/* TA 配对 verdict 文字 */
.ta-result-subtitle {
  font-family: var(--f-serif) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 3px !important;
  margin-top: 6px !important;
}
.ta-result-subtitle.match { color: var(--wx-fire) !important; }
.ta-result-subtitle.avoid { color: var(--wx-water) !important; }
.ta-result-subtitle.neutral { color: var(--muted) !important; }

/* TA 配对 relation 文字（合/冲）*/
.ta-duo-relation {
  font-family: var(--f-serif) !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  letter-spacing: 0 !important;
}

/* =================================================
   v3.1 补丁（2026-05-27）· 配对卡片 + CTA 主站化
   ================================================= */

/* ---- 1. 天选搭子 / 警惕对象 配对小卡片 ---- */
.pair-item {
  background: #FCFAF5 !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  transition: all 0.2s ease !important;
}
.pair-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(22, 97, 171, 0.12) !important;
  border-color: rgba(22, 97, 171, 0.20) !important;
}
.pair-list.avoid .pair-item {
  background: rgba(200, 155, 64, 0.04) !important;
}
.pair-list.avoid .pair-item:hover {
  box-shadow: 0 6px 16px rgba(200, 155, 64, 0.15) !important;
  border-color: rgba(200, 155, 64, 0.30) !important;
}

/* 配对小卡里的人格图（去掉深蓝硬底+黑边） */
.pair-img {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  width: 56px !important;
  height: 56px !important;
}
.pair-img .fb {
  font-family: var(--f-serif) !important;
  font-weight: 700 !important;
  color: var(--theme) !important;
  background: url('../assets/logo-mark-light.png') center/40% no-repeat !important;
  font-size: 0 !important;
}

/* 配对小卡里的文字 */
.pair-name-zh,
.pair-name {
  font-family: var(--f-serif) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.pair-quote {
  font-family: var(--f-zh) !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
}

/* ---- 2. 关系 tag 标签柔化（三合/六合/六冲/六害） ---- */
.pair-relation-tag {
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-family: var(--f-zh) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}
.pair-relation-tag.sanhe {
  background: rgba(120, 146, 98, 0.10) !important;
  color: var(--wx-wood) !important;
  border: 1px solid rgba(120, 146, 98, 0.25) !important;
}
.pair-relation-tag.liuhe {
  background: rgba(200, 155, 64, 0.10) !important;
  color: var(--wx-earth) !important;
  border: 1px solid rgba(200, 155, 64, 0.25) !important;
}
.pair-relation-tag.liuchong {
  background: rgba(255, 70, 31, 0.08) !important;
  color: var(--wx-fire) !important;
  border: 1px solid rgba(255, 70, 31, 0.25) !important;
}
.pair-relation-tag.liuhai {
  background: rgba(22, 97, 171, 0.08) !important;
  color: var(--theme) !important;
  border: 1px solid rgba(22, 97, 171, 0.25) !important;
}

/* ---- 3. 测测 TA CTA 大块（去黄底+硬阴影） ---- */
.ta-cta {
  margin-top: 32px !important;
  padding: 28px 24px !important;
  background: linear-gradient(135deg, rgba(22, 97, 171, 0.05), rgba(200, 155, 64, 0.05)) !important;
  border: 1px dashed rgba(22, 97, 171, 0.25) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  text-align: center !important;
}
.ta-cta-title {
  font-family: var(--f-serif) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
}
.ta-cta-sub {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  letter-spacing: 1px !important;
  margin-bottom: 18px !important;
}
.ta-cta-btn {
  background: var(--theme) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-family: var(--f-zh) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  width: auto !important;
  min-width: 200px !important;
  box-shadow: 0 4px 12px rgba(22, 97, 171, 0.20) !important;
  transition: all 0.2s ease !important;
}
.ta-cta-btn:hover {
  background: var(--theme-text) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(22, 97, 171, 0.30) !important;
}
.ta-cta-btn:active {
  transform: translateY(0) !important;
}

/* ---- 4. 结果页底部三个按钮（生成分享卡/关注公众号/重新测试）柔化 ---- */
.result-actions {
  gap: 12px !important;
  margin-top: 32px !important;
  margin-bottom: 24px !important;
}
.action-btn {
  border-radius: 999px !important;
  padding: 14px 24px !important;
  font-family: var(--f-zh) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  border: none !important;
  transition: all 0.2s ease !important;
}
.action-btn.primary {
  background: var(--theme) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(22, 97, 171, 0.20) !important;
}
.action-btn.primary:hover {
  background: var(--theme-text) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(22, 97, 171, 0.30) !important;
}
.action-btn.primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(22, 97, 171, 0.20) !important;
}
.action-btn.premium {
  background: var(--wx-earth) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(200, 155, 64, 0.25) !important;
  border: none !important;
}
.action-btn.premium:hover {
  background: #A37D2C !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(200, 155, 64, 0.30) !important;
}
.action-btn.secondary {
  background: transparent !important;
  color: var(--theme) !important;
  border: 1.5px solid var(--theme) !important;
  box-shadow: none !important;
}
.action-btn.secondary:hover {
  background: var(--theme) !important;
  color: #fff !important;
}

/* ---- 5. 结果页底部 result-tip 柔化 ---- */
.result-tip {
  border-top: 1px solid var(--line) !important;
  border-top-style: solid !important;
  font-family: var(--f-zh) !important;
  color: var(--muted) !important;
  letter-spacing: 1px !important;
}