/* =============================================
   超级上上签 · 主题层 (theme.css)
   卡片特效、按钮动效、滚动条美化、加载状态
   ============================================= */

/* ===== 卡片入场动画 ===== */
.home-card {
  
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 卡片延迟入场（首页网格） */
.home-card:nth-child(1) { animation-delay: 0.02s; }
.home-card:nth-child(2) { animation-delay: 0.06s; }
.home-card:nth-child(3) { animation-delay: 0.10s; }
.home-card:nth-child(4) { animation-delay: 0.14s; }
.home-card:nth-child(5) { animation-delay: 0.18s; }
.home-card:nth-child(6) { animation-delay: 0.22s; }

/* ===== 卡片悬停交互 ===== */
.home-card {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.home-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 160, 23, 0.15);
  border-color: rgba(212, 160, 23, 0.3) !important;
}
.home-card:active {
  transform: translateY(0);
}

/* ===== 自定义滚动条 ===== */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(212, 160, 23, 0.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 160, 23, 0.4);
}

/* ===== 按钮动效 ===== */
.btn, button, .ly-btn, .hh-btn, .qm-btn {
  transition: all 0.2s ease !important;
}
.btn:hover, button:hover, .ly-btn:hover, .hh-btn:hover, .qm-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.btn:active, button:active, .ly-btn:active, .hh-btn:active, .qm-btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* ===== 加载状态脉冲 ===== */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

/* ===== 摇卦动画增强 ===== */
.ly-sk {
  animation: coinShake 0.6s ease;
}
@keyframes coinShake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

/* ===== 特殊标签样式 ===== */
.tag-gold {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(212, 160, 23, 0.12);
  color: var(--gold);
  font-size: 11px;
  font-weight: 500;
}
.tag-red {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(198, 40, 40, 0.12);
  color: var(--red-light);
  font-size: 11px;
}
.tag-green {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(76, 175, 80, 0.12);
  color: #4CAF50;
  font-size: 11px;
}

/* ===== 分隔线 ===== */
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 160, 23, 0.2), transparent);
  margin: 12px 0;
}

/* ===== 流畅滚动 ===== */
body, .tab-body, .page-body {
  scroll-behavior: smooth;
}

/* ===== 表单控件美化 ===== */
/* 让系统下拉框在暗色背景下更协调 */
select, input, textarea {
  appearance: auto;
  -webkit-appearance: auto;
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(212, 160, 23, 0.2) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 0.2s ease;
}
select:focus, input:focus, textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.1);
}
/* 下拉框选项背景 */
select option {
  background: #1a1a1a;
  color: #e0d5c0;
}

/* ===== 主按钮 ===== */
.btn-gold, button.btn-gold, [class*="btn-gold"] {
  background: linear-gradient(135deg, rgba(212, 160, 23, 0.2), rgba(212, 160, 23, 0.08)) !important;
  border: 1px solid rgba(212, 160, 23, 0.3) !important;
  color: var(--gold) !important;
  cursor: pointer !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.2s ease !important;
}
.btn-gold:hover {
  background: linear-gradient(135deg, rgba(212, 160, 23, 0.3), rgba(212, 160, 23, 0.12)) !important;
  box-shadow: 0 4px 15px rgba(212, 160, 23, 0.2) !important;
  transform: translateY(-1px);
}

/* ===== 段间距 ===== */
.bz-sec, .ly-cd, .mh-cd, .hh-part {
  margin-bottom: 10px !important;
  border-radius: var(--radius-md) !important;
}

/* ===== 底部导航活性指示 ===== */
.bottom-tab.active::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

/* ===== 段落文字行高 ===== */
p {
  line-height: 1.8;
  font-size: 13px;
}

/* ===== 单选框/复选框 ===== */
input[type="radio"], input[type="checkbox"] {
  accent-color: var(--gold) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

/* ===== 统一板块容器 ===== */
.bz-sec, .ly-cd, .mh-cd, .hh-part, .qimen-cd, .qm-cd {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(212,160,23,0.08) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
}

/* ===== 统一古籍引用脚注 ===== */
.bz-ref, .ly-rf, .mh-rf, .hh-ref, .qm-rf, .dr {
  font-size: 10px !important;
  color: var(--text-dim) !important;
  text-align: right !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(212,160,23,0.06) !important;
  font-style: italic !important;
}

/* ===== 统一返回按钮区域 ===== */
.result-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(212,160,23,0.08);
}
.result-back button {
  background: rgba(212,160,23,0.08);
  border: 1px solid rgba(212,160,23,0.15);
  color: var(--gold);
  font-size: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.result-back button:hover {
  background: rgba(212,160,23,0.2);
}
.result-back span {
  font-size: 13px;
  color: var(--gold);
}

/* ===== 统一标签徽章 ===== */
.bz-tag, .hh-tag, .ly-tag, .mh-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

/* ===== 古籍原文引用框 ===== */
.hh-orig, .ly-orig, .bz-orig {
  background: rgba(0,0,0,0.15);
  border-left: 3px solid rgba(212,160,23,0.3);
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}

/* ===== 四柱八字卡片 ===== */
.bz-pbox {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 10px 0;
}
.bz-pitem {
  text-align: center;
  padding: 8px 6px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  min-width: 56px;
  border: 1px solid rgba(212,160,23,0.1);
}
.bz-plabel {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.bz-pstem {
  font-size: 22px;
  font-weight: bold;
}
.bz-pbranch {
  font-size: 18px;
  font-weight: bold;
}
.bz-pwx {
  font-size: 11px;
  opacity: 0.7;
}
.bz-line {
  text-align: center;
  font-size: 20px;
  letter-spacing: 6px;
  margin: 8px 0 4px;
  color: var(--gold);
  font-weight: 600;
}
.bz-meta {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 10px;
}


/* =============================================
   V4 金色主题层 · 全站统一（2026-08-02）
   首页/我的/登录/13个功能页 同一套金色语法
   纯视觉覆盖，不触碰任何布局与逻辑
   ============================================= */

/* —— 1. 字体体系：标题宋体古风 / 正文现代无衬线 —— */
:root {
  --font-serif: "Songti SC", "STSong", "SimSun", "KaiTi", serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, sans-serif;
  --bg: #14100b;
  --bg-surface: #171208;
}
h1, h2, h3, h4 {
  font-family: var(--font-serif) !important;
}

/* —— 2. 页面氛围：13 页统一顶部金色光晕 —— */
.tab-page {
  background:
    radial-gradient(ellipse 420px 240px at 50% -60px, rgba(212,160,23,0.13), transparent 70%),
    radial-gradient(ellipse 260px 180px at 85% 120px, rgba(168,58,42,0.05), transparent 70%),
    var(--bg) !important;
}

/* —— 3. 页面头部：金色渐变底 + 金线 + 引题小字 —— */
.tab-header {
  background: linear-gradient(180deg, #1f170c 0%, #171208 100%) !important;
  border-bottom: 1px solid rgba(212,160,23,0.28) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,0.35);
}
.tab-header-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif) !important;
  letter-spacing: 3px !important;
  color: #e8c36a !important;
  line-height: 1.35;
}
.tab-header-sub {
  font-size: 9px;
  color: rgba(232,220,200,0.45);
  letter-spacing: 2px;
  font-weight: 400;
  font-family: var(--font-sans);
  margin-top: 1px;
}
.tab-header .back-btn {
  background: linear-gradient(135deg, rgba(212,160,23,0.28), rgba(212,160,23,0.08)) !important;
  border: 1px solid rgba(212,160,23,0.4) !important;
  color: #e8c36a !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* —— 4. 卡片统一：V4 深褐底 + 金边 + 柔和光 —— */
.bz-card, .dc, .zw-fm, .zw-summary, .zw-detail, .hh-part, .hh-form,
.mh-cd, .ly-cd, .zy-cd, .hl-cd, .qm-cd, .qm-card, .qimen-cd {
  background: linear-gradient(180deg, rgba(27,21,12,0.92), rgba(23,18,8,0.88)) !important;
  border: 1px solid rgba(212,160,23,0.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 18px rgba(212,160,23,0.04) !important;
}
/* 章节子卡：金底描边升级 */
.bz-sec, .qimen-cd {
  background: rgba(212,160,23,0.045) !important;
  border: 1px solid rgba(212,160,23,0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
}
/* 卡片标题：宋体 + 亮金 + 金线 */
.bz-card h2, .bz-sec h3, .dc h3, .ly-cd h3, .mh-cd h3, .hh-part h3, .hh-form h3,
.zy-cd h3, .hl-cd h3, .qm-cd h3, .qm-card h2, .qimen-cd h3, .zw-summary h3, .zw-detail h3 {
  font-family: var(--font-serif) !important;
  color: #e8c36a !important;
  letter-spacing: 2px !important;
  border-bottom: 1px solid rgba(212,160,23,0.14) !important;
}

/* —— 5. 主按钮：实心金色渐变（首页同款） —— */
.zw-btn, .hh-btn, .ly-btn, .qm-btn {
  background: linear-gradient(135deg, #e0bd68 0%, #c8961c 55%, #9a730c 100%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #241a06 !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(212,160,23,0.18), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
.zw-btn:active, .hh-btn:active, .ly-btn:active, .qm-btn:active {
  transform: scale(0.97);
}

/* —— 6. 表单控件：圆角加大 + 聚焦金晕 —— */
select, input, textarea {
  border-radius: 10px !important;
}
select:focus, input:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(212,160,23,0.12), 0 0 12px rgba(212,160,23,0.15) !important;
}

/* —— 7. 排盘表格：金色细线 —— */
.tab-page table {
  border-collapse: collapse;
}
.tab-page table td, .tab-page table th {
  border: 1px solid rgba(212,160,23,0.14) !important;
}

/* —— 8. 彩蛋①：大数字金色渐变 —— */
.bz-pstem, .bz-pbranch, .hh-score-num {
  background: linear-gradient(180deg, #e9d294 0%, #d4a017 45%, #8a6709 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-family: var(--font-serif) !important;
}
#dlContainer strong[style*="font-size:22px"] {
  background: linear-gradient(180deg, #e9d294 0%, #d4a017 45%, #8a6709 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-family: var(--font-serif) !important;
  font-size: 26px !important;
}

/* —— 9. 彩蛋③：四柱/宫格/今日 金框发光 —— */
.bz-pitem {
  border-color: rgba(212,160,23,0.3) !important;
  background: rgba(212,160,23,0.05) !important;
  box-shadow: 0 0 12px rgba(212,160,23,0.06) !important;
}
.zw-cell {
  border-color: rgba(212,160,23,0.18) !important;
  border-radius: 10px !important;
}
.zw-cell-mg {
  box-shadow: 0 0 10px rgba(212,160,23,0.14) !important;
}
.hl-today {
  box-shadow: 0 0 10px rgba(212,160,23,0.16) !important;
}

/* —— 10. 古籍脚注：弱金小字（中文不斜体） —— */
.bz-ref, .ly-rf, .mh-rf, .hh-ref, .qm-rf, .dr, .hl-rf, .zy-rf, .qm-ref {
  color: rgba(232,220,200,0.4) !important;
  border-top-color: rgba(212,160,23,0.08) !important;
  font-style: normal !important;
}

/* —— 11. 每日运势标签/时辰格：圆角统一 —— */
.dt { border-radius: 8px !important; }
.di { border-radius: 8px !important; }

/* —— 12. 底部导航：金色质感增强 —— */
.bottom-tab-bar {
  background: rgba(18,13,7,0.92) !important;
  border-top: 1px solid rgba(212,160,23,0.18) !important;
}
/* 底部导航 SVG 图标（金色描边风格，与 13 模块图标统一） */
.bottom-tab .tab-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 2px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.bottom-tab {
  color: #8a7a66;
}
.bottom-tab.active {
  color: #e8c36a !important;
  text-shadow: 0 0 5px rgba(212,160,23,0.2);
}
.bottom-tab.active .tab-icon {
  filter: drop-shadow(0 0 5px rgba(212,160,23,0.3));
}

/* —— 13. 补充卡片：择吉日 zc / 每日一签签文卡 —— */
.zc {
  background: linear-gradient(180deg, rgba(27,21,12,0.92), rgba(23,18,8,0.88)) !important;
  border: 1px solid rgba(212,160,23,0.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 18px rgba(212,160,23,0.04) !important;
}
.zc h3 {
  font-family: var(--font-serif) !important;
  color: #e8c36a !important;
  letter-spacing: 2px !important;
  border-bottom: 1px solid rgba(212,160,23,0.14) !important;
}
.qian-reveal {
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 18px rgba(212,160,23,0.10) !important;
}

/* ===== 14. 底部导航遮挡修复：除首页外所有tab页底部留出导航高度 ===== */
.tab-page:not(#tab-home) .tab-body {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important;
}

/* 备案信息（工信部 ICP 备案号，低调金色） */
.beian-bar {
  margin-top: 14px;
  padding: 10px 16px 14px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: rgba(232,220,200,0.32);
  border-top: 1px solid rgba(212,160,23,0.08);
}
.beian-bar a {
  color: rgba(232,220,200,0.38);
  text-decoration: none;
}
.beian-bar a:active { color: #e8c36a; }

/* ===== 模块卡片统一微光（与首页卡片同质感，2026-08-13） ===== */
.bz-sec, .mh-cd, .ly-cd, .hh-part, .qimen-cd, .qm-cd, .hl-cd, .zy-cd, .dc, .zw-fm {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bz-sec:hover, .mh-cd:hover, .ly-cd:hover, .hh-part:hover, .qimen-cd:hover, .qm-cd:hover, .hl-cd:hover, .zy-cd:hover, .dc:hover, .zw-fm:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(212, 160, 23, 0.1);
}

/* ===== 上上签 · 视觉美化层（token化 + 背景质感 + 响应式） ===== */
:root {
  --ssq-gold: #d4a017;
  --ssq-gold-soft: #e8c36a;
  --ssq-bg: #14100b;
  --ssq-surface: #171208;
  --ssq-text: #e0d5c0;
  --ssq-muted: #887a6a;
  --ssq-green: #4CAF50;
  --ssq-red: #F44336;
  --ssq-orange: #FF9800;
  --ssq-blue: #2196F3;
  --ssq-radius: 14px;
  --ssq-radius-sm: 10px;
  --ssq-shadow: 0 8px 28px rgba(0,0,0,0.35);
  --ssq-glow: 0 6px 24px rgba(212,160,23,0.10);
}
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(212,160,23,0.06), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(212,160,23,0.03), transparent 55%),
    var(--ssq-bg) !important;
}
.home-card, .bz-cd, .mh-cd, .qm-cd { border-radius: var(--ssq-radius); box-shadow: var(--ssq-shadow); }
.home-card { background: linear-gradient(160deg, rgba(255,255,255,0.02), rgba(212,160,23,0.02)) !important; border: 1px solid rgba(212,160,23,0.10) !important; }
.home-card:hover { box-shadow: var(--ssq-glow), var(--ssq-shadow); }
.btn-gold, #calBtn.active {
  background: linear-gradient(135deg, rgba(212,160,23,0.85), rgba(212,160,23,0.55)) !important;
  border: 1px solid rgba(212,160,23,0.6) !important;
  color: #1a0a0a !important;
  box-shadow: 0 4px 14px rgba(212,160,23,0.25);
}
input, select, textarea { transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
input:focus, select:focus, textarea:focus { border-color: rgba(212,160,23,0.6) !important; box-shadow: 0 0 0 2px rgba(212,160,23,0.15); outline: none; }
@media (max-width: 640px) {
  .home-card, .bz-cd, .mh-cd, .qm-cd { border-radius: var(--ssq-radius-sm); }
  .home-card { padding: 14px !important; }
  .bz-pitem { min-width: 58px !important; }
}
* { -webkit-tap-highlight-color: transparent; }
/* ===== 首页视觉焦点美化 ===== */
.hero-item {
  background: linear-gradient(165deg, rgba(212,160,23,0.06), rgba(0,0,0,0.15)) !important;
  border: 1px solid rgba(212,160,23,0.14) !important;
  border-radius: 14px !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero-item:hover { box-shadow: 0 8px 22px rgba(212,160,23,0.16); }
.hero-ico, .hero-ico-ly { filter: drop-shadow(0 0 8px rgba(212,160,23,0.35)); }
.hero-n { color: var(--ssq-gold-soft) !important; font-weight: 600; letter-spacing: 1px; }
.hero-s { color: var(--ssq-muted) !important; }
.hero-t, .sec-h { color: var(--ssq-gold) !important; letter-spacing: 2px; }
/* 评分星金色 */
.mc-stars { color: var(--ssq-gold) !important; letter-spacing: 2px; text-shadow: 0 0 6px rgba(212,160,23,0.4); }
/* 主卡 + 命局卡 质感 */
.main-card, .fate-card {
  background: linear-gradient(165deg, rgba(212,160,23,0.05), rgba(0,0,0,0.20)) !important;
  border: 1px solid rgba(212,160,23,0.12) !important;
  border-radius: 16px !important;
  box-shadow: var(--ssq-shadow);
}
/* 年柱月柱日柱占位：虚线暖底 */
.fc-p { border: 1px dashed rgba(212,160,23,0.30) !important; background: rgba(212,160,23,0.04) !important; border-radius: 10px !important; }
.fc-p .t { color: var(--ssq-muted) !important; }
.fc-p .g { color: var(--ssq-gold-soft) !important; font-weight: 700; font-size: 18px; }
/* 金渐变按钮（AI/人生说明书） */
.mc-btn, .fc-btn {
  background: linear-gradient(135deg, rgba(212,160,23,0.9), rgba(212,160,23,0.6)) !important;
  color: #1a0a0a !important;
  border: 1px solid rgba(212,160,23,0.7) !important;
  box-shadow: 0 5px 16px rgba(212,160,23,0.25);
  font-weight: 600;
}
.mc-btn:hover, .fc-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* 底部导航激活态 */
.nav-item.active, [class*=tab].active { color: var(--ssq-gold) !important; }
/* 会员横条：平滑淡入，避免弹出闪 */
.guide-bar { border: 1px solid rgba(212,160,23,0.18); }
.guide-bar .g-btn { background: linear-gradient(135deg, rgba(212,160,23,0.8), rgba(212,160,23,0.55)) !important; color:#1a0a0a !important; border:1px solid rgba(212,160,23,0.6) !important; }