/* ============================================================
   Bagua — Eastern Wisdom for Modern Life
   Celestial Observatory aesthetic · ancient instruments meet digital oracle
   ============================================================ */

:root {
  /* The Abyss — deepest possible darks */
  --bg-primary: #030308;
  --bg-secondary: #08081a;
  --bg-card: rgba(10, 10, 28, 0.8);
  --bg-glass: rgba(14, 14, 38, 0.55);
  --bg-glass-hover: rgba(22, 22, 52, 0.7);
  --bg-input: rgba(6, 6, 18, 0.9);

  /* Celestial Gold — warm, rich, candlelit */
  --gold: #c8a26e;
  --gold-light: #e8d4ac;
  --gold-dark: #9c7840;
  --gold-glow: rgba(200, 162, 110, 0.4);
  --amber: #b89048;

  /* Temple Purple */
  --purple: #6a4fa0;
  --purple-light: #9878cc;
  --purple-dark: #3d2870;
  --purple-glow: rgba(106, 79, 160, 0.25);

  /* Oracle Teal — AI accent */
  --ai-cyan: #48c8b8;
  --ai-cyan-glow: rgba(72, 200, 184, 0.25);

  /* Signal */
  --crimson: #b83030;

  /* Parchment Text */
  --text-primary: #d8d0c4;
  --text-secondary: #8e8678;
  --text-muted: #585048;
  --text-heading: #ede6da;

  /* Borders & shadows */
  --border-glass: rgba(200, 162, 110, 0.08);
  --border-gold: rgba(200, 162, 110, 0.22);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --shadow-glow: 0 0 50px rgba(200, 162, 110, 0.08);
  --shadow-card: 0 12px 48px rgba(0, 0, 0, 0.6);
  --shadow-deep: 0 24px 80px rgba(0, 0, 0, 0.4), 0 0 1px rgba(200, 162, 110, 0.15);

  /* Sizing */
  --nav-height: 56px;
  --container-max: 1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition: 0.32s var(--ease);
  --transition-slow: 0.6s var(--ease);

  /* Typography */
  --font-hero: 'Ma Shan Zheng', 'ZCOOL XiaoWei', cursive;
  --font-display: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
  --font-serif: 'Noto Serif SC', 'Songti SC', serif;
  --font-sans: 'DM Sans', 'Noto Sans SC', system-ui, sans-serif;
  --font-latin: 'Cormorant Garamond', 'Georgia', serif;
}

/* ── Theme: 古卷 Parchment (warm brown) ────────────── */
[data-theme="parchment"] {
  --bg-primary: #1a1410;
  --bg-secondary: #221c14;
  --bg-card: rgba(30, 24, 16, 0.8);
  --bg-glass: rgba(36, 28, 18, 0.6);
  --bg-glass-hover: rgba(48, 38, 24, 0.7);
  --bg-input: rgba(20, 16, 10, 0.9);
  --gold: #d4a050;
  --gold-light: #f0d8a0;
  --gold-dark: #a87830;
  --gold-glow: rgba(212, 160, 80, 0.4);
  --purple: #8b6050;
  --purple-light: #b08878;
  --purple-dark: #604030;
  --text-primary: #e0d4c0;
  --text-secondary: #a09078;
  --text-muted: #706050;
  --text-heading: #f0e8d8;
  --border-glass: rgba(212, 160, 80, 0.1);
  --border-gold: rgba(212, 160, 80, 0.25);
}

/* ── Theme: 星空 Nebula (deep blue-purple) ──────────── */
[data-theme="nebula"] {
  --bg-primary: #060818;
  --bg-secondary: #0a1028;
  --bg-card: rgba(12, 18, 45, 0.8);
  --bg-glass: rgba(16, 24, 55, 0.6);
  --bg-glass-hover: rgba(24, 32, 68, 0.7);
  --bg-input: rgba(8, 12, 30, 0.9);
  --gold: #7eb8e0;
  --gold-light: #b0d8f0;
  --gold-dark: #4890b8;
  --gold-glow: rgba(126, 184, 224, 0.35);
  --purple: #8868d0;
  --purple-light: #b090f0;
  --purple-dark: #5840a0;
  --text-primary: #d0d8e8;
  --text-secondary: #7888a8;
  --text-muted: #485068;
  --text-heading: #e0e8f8;
  --border-glass: rgba(126, 184, 224, 0.08);
  --border-gold: rgba(126, 184, 224, 0.2);
  --ai-cyan: #60d0f0;
  --ai-cyan-glow: rgba(96, 208, 240, 0.25);
  --crimson: #e06080;
}

/* ── Theme: 朱砂 Cinnabar (red-black) ──────────────── */
[data-theme="cinnabar"] {
  --bg-primary: #0a0406;
  --bg-secondary: #140a0e;
  --bg-card: rgba(24, 10, 14, 0.8);
  --bg-glass: rgba(30, 14, 18, 0.6);
  --bg-glass-hover: rgba(44, 22, 28, 0.7);
  --bg-input: rgba(16, 8, 10, 0.9);
  --gold: #d05040;
  --gold-light: #f08070;
  --gold-dark: #a03028;
  --gold-glow: rgba(208, 80, 64, 0.35);
  --amber: #c06040;
  --purple: #804060;
  --purple-light: #b06888;
  --purple-dark: #502838;
  --text-primary: #e0d0c8;
  --text-secondary: #a08880;
  --text-muted: #685850;
  --text-heading: #f0e0d8;
  --border-glass: rgba(208, 80, 64, 0.08);
  --border-gold: rgba(208, 80, 64, 0.22);
  --crimson: #d04040;
}

/* ── Theme Switcher Button ─────────────────────────── */
.theme-switcher {
  position: fixed;
  top: calc(var(--nav-height) + 12px);
  right: 16px;
  z-index: 999;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(3, 3, 8, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: 24px;
}

.theme-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  position: relative;
}

.theme-dot:hover { transform: scale(1.15); }

.theme-dot.active {
  border-color: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
}

.theme-dot[data-theme="default"]  { background: linear-gradient(135deg, #c8a26e, #3d2870); }
.theme-dot[data-theme="parchment"]{ background: linear-gradient(135deg, #d4a050, #604030); }
.theme-dot[data-theme="nebula"]   { background: linear-gradient(135deg, #7eb8e0, #5840a0); }
.theme-dot[data-theme="cinnabar"] { background: linear-gradient(135deg, #d05040, #502838); }

@media (max-width: 640px) {
  .theme-switcher {
    top: auto;
    bottom: calc(68px + env(safe-area-inset-bottom));
    right: 12px;
    padding: 4px;
  }
  .theme-dot { width: 18px; height: 18px; }
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: #fbf5e6;
  color: #000;
  line-height: 1.75;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: default;
}

/* ── Atmospheric layers (fixed behind everything) ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: none;
  pointer-events: none;
  z-index: 0;
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
}

a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-light); }
img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--text-heading);
  line-height: 1.35;
}

::selection {
  background: var(--gold-dark);
  color: var(--bg-primary);
}

/* Custom golden cursor on desktop */
@media (hover: hover) {
  body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%23c8a26e' opacity='0.7'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23c8a26e' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E") 10 10, default; }
  a, button, [onclick], .feature-card, .nav-link, .spread-btn, .trigram-grid > *, .hexagram-chart > *, .zodiac-grid > *, .tarot-grid > *, .number-grid > *, .tarot-card {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23e8d4ac' opacity='0.8'/%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23e8d4ac' stroke-width='0.6' opacity='0.4'/%3E%3C/svg%3E") 12 12, pointer;
  }
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ============================================================
   NAVIGATION
   ============================================================ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(3, 3, 8, 0.4);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: all var(--transition);
}

#navbar.scrolled {
  background: rgba(3, 3, 8, 0.94);
  border-bottom-color: var(--border-glass);
  box-shadow: 0 1px 40px rgba(0, 0, 0, 0.7);
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold) !important;
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  padding-right: 16px;
}

.nav-logo::after {
  content: '';
  position: absolute;
  right: 0; top: 25%; bottom: 25%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-gold), transparent);
}

.nav-logo:hover { color: var(--gold-light) !important; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none;
  cursor: pointer; padding: 4px;
  z-index: 1001; flex-shrink: 0;
}

.nav-toggle span {
  display: block; width: 20px; height: 1.5px;
  background: var(--text-secondary);
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Nav links — smooth horizontal scroll */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 1;
  mask-image: linear-gradient(90deg, black 0%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 94%, transparent 100%);
  padding: 0 4px;
}

.nav-links::-webkit-scrollbar { display: none; }

.nav-link {
  display: block;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted) !important;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
  letter-spacing: 0.04em;
  position: relative;
}

.nav-link:hover {
  color: var(--text-secondary) !important;
  background: rgba(255, 255, 255, 0.03);
}

.nav-link.active {
  color: var(--gold) !important;
  background: rgba(200, 162, 110, 0.06);
  font-weight: 600;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 25%; right: 25%;
  height: 1.5px;
  background: var(--gold);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--gold-glow);
}

/* AI nav glow */
.nav-link.ai-glow {
  color: var(--ai-cyan) !important;
  text-shadow: 0 0 10px var(--ai-cyan-glow);
}
.nav-link.ai-glow:hover { background: rgba(72, 200, 184, 0.06); }
.nav-link.ai-glow.active::after { background: var(--ai-cyan); box-shadow: 0 0 10px var(--ai-cyan-glow); }

/* ---- Nav dropdown groups ---- */
.nav-group { position: relative; list-style: none; }
.nav-group-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0; cursor: pointer;
  font: inherit;
}
.nav-caret { font-size: 0.65rem; opacity: 0.55; transition: transform .2s ease; }
.nav-group:hover .nav-caret, .nav-group.open .nav-caret { transform: rotate(-180deg); }
.nav-pill-new {
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 1px 5px; margin-left: 4px;
  background: linear-gradient(135deg, var(--ai-cyan, #48c8b8), var(--gold, #c8a26e));
  color: #0a0a1c; border-radius: 99px;
}
.nav-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 200px;
  background: rgba(12, 12, 28, 0.96);
  border: 1px solid rgba(200, 162, 110, 0.18);
  border-radius: 10px;
  padding: 6px;
  list-style: none;
  margin: 0;
  display: none;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 1000;
}
.nav-group:hover > .nav-dropdown,
.nav-group.open > .nav-dropdown,
.nav-group:focus-within > .nav-dropdown { display: block; }
.nav-dropdown li { list-style: none; }
.nav-dropdown .nav-link {
  display: block; white-space: nowrap;
  padding: 8px 12px; border-radius: 6px;
  font-size: 0.82rem;
}
.nav-dropdown .nav-link:hover {
  background: rgba(200, 162, 110, 0.1);
  color: var(--gold-light, #e8d4ac) !important;
}
.nav-dd-section {
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted, #7a7a88);
  padding: 10px 12px 4px; pointer-events: none;
}
.nav-dd-section:first-child { padding-top: 4px; }

/* Mobile: expand dropdowns inline */
@media (max-width: 860px) {
  .nav-dropdown { position: static; display: block; border: 0; background: transparent;
    box-shadow: none; padding: 0 0 0 14px; min-width: 0; }
  .nav-caret { display: none; }
  .nav-group-btn { pointer-events: none; color: var(--gold) !important; font-weight: 600; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  display: none;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.section.active {
  display: block;
  animation: sectionIn 0.55s var(--ease-out) both;
}

.section.fading {
  display: block;
  animation: sectionOut 0.25s var(--ease) both;
}

@keyframes sectionIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sectionOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.section-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: calc(var(--nav-height) + 52px) 28px 100px;
}

.section-header {
  text-align: center;
  margin-bottom: 72px;
  position: relative;
}

/* Decorative line above section title */
.section-header::before {
  content: '✦';
  display: block;
  font-size: 0.7rem;
  color: var(--gold-dark);
  opacity: 0.5;
  margin-bottom: 16px;
  letter-spacing: 2em;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 400;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(200, 162, 110, 0.15));
  letter-spacing: 0.08em;
}

.section-intro {
  max-width: 660px;
  margin: 0 auto;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 2;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   HERO — Celestial Observatory
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 80px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 18%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 28% 62%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 8%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 48% 15%, rgba(200,162,110,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 38%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 78%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 82%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 48%, rgba(200,162,110,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 12%, rgba(152,120,204,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 32%, rgba(200,162,110,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 88%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 28%, rgba(200,162,110,0.3) 0%, transparent 100%);
  background-size: 200% 200%;
  animation: starfieldDrift 140s linear infinite;
}

.stars-layer2 {
  opacity: 0.5;
  background-size: 300% 300%;
  animation-duration: 200s;
  animation-direction: reverse;
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Fog layers */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 45%, rgba(61, 40, 112, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 25%, rgba(200, 162, 110, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 85%, rgba(3, 3, 8, 0.9) 0%, transparent 55%);
  z-index: 2;
}

.hero-bg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 240px;
  background: linear-gradient(to top, var(--bg-primary), transparent);
  z-index: 3;
}

@keyframes starfieldDrift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 60%; }
  100% { background-position: 0% 100%; }
}

/* ── Animated Bagua Mandala ─────────────────────────── */
.mandala {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(320px, 50vw, 520px);
  height: clamp(320px, 50vw, 520px);
  z-index: 1;
  pointer-events: none;
}

.mandala-ring {
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.mandala-ring--outer {
  width: 100%; height: 100%;
  border: 1px solid rgba(200, 162, 110, 0.08);
  animation: mandalaRotate 90s linear infinite;
}

.mandala-ring--middle {
  width: 62%; height: 62%;
  border: 1px solid rgba(152, 120, 204, 0.08);
  animation: mandalaRotate 60s linear infinite reverse;
  box-shadow: 0 0 60px rgba(106, 79, 160, 0.04) inset;
}

.mandala-ring--inner {
  width: 28%; height: 28%;
  border: 1px solid rgba(200, 162, 110, 0.12);
  animation: mandalaRotate 30s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes mandalaRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Trigram labels on outer ring */
.trigram-label {
  position: absolute;
  top: 50%; left: 50%;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: rgba(200, 162, 110, 0.22);
  transform-origin: center center;
  /* Place around the circle */
  --angle: calc(var(--i) * 45deg - 90deg);
  --dist: 48%;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--dist))) rotate(calc(-1 * var(--angle))) translate(-50%, -50%);
  text-align: center;
  line-height: 1;
  transition: color 2s ease;
}

.trigram-label small {
  display: block;
  font-size: 0.55em;
  margin-top: 2px;
  opacity: 0.6;
}

/* Yin-Yang at center */
.yinyang {
  width: 60%; height: 60%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(200, 162, 110, 0.1);
  animation: mandalaRotate 20s linear infinite reverse;
  box-shadow: 0 0 30px rgba(200, 162, 110, 0.06);
}

.yinyang-half {
  position: absolute;
  width: 100%; height: 50%;
}

.yinyang-half--light {
  top: 0;
  background: linear-gradient(90deg, rgba(200, 162, 110, 0.15) 50%, rgba(30, 30, 60, 0.2) 50%);
  border-radius: 50% 50% 0 0;
}

.yinyang-half--light::before {
  content: '';
  position: absolute;
  bottom: 0; left: 25%;
  width: 50%; height: 100%;
  border-radius: 50%;
  background: rgba(200, 162, 110, 0.12);
}

.yinyang-half--dark {
  bottom: 0;
  background: linear-gradient(90deg, rgba(30, 30, 60, 0.2) 50%, rgba(200, 162, 110, 0.15) 50%);
  border-radius: 0 0 50% 50%;
}

.yinyang-half--dark::before {
  content: '';
  position: absolute;
  top: 0; right: 25%;
  width: 50%; height: 100%;
  border-radius: 50%;
  background: rgba(30, 30, 60, 0.3);
}

/* ── Hero Content ───────────────────────────────────── */
.hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  margin-bottom: 80px;
}

.hero-title {
  font-family: var(--font-hero);
  font-size: clamp(3rem, 10vw, 6.5rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  margin-bottom: 28px;
  color: var(--gold-light);
  text-shadow:
    0 0 40px rgba(200, 162, 110, 0.3),
    0 0 80px rgba(200, 162, 110, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.5);
  animation: heroTitleIn 1.5s var(--ease-out) both;
}

@keyframes heroTitleIn {
  0%   { opacity: 0; letter-spacing: 0.5em; text-shadow: 0 0 80px rgba(200, 162, 110, 0.6); }
  60%  { opacity: 1; }
  100% { letter-spacing: 0.15em; text-shadow: 0 0 40px rgba(200, 162, 110, 0.3), 0 0 80px rgba(200, 162, 110, 0.1), 0 2px 4px rgba(0, 0, 0, 0.5); }
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 2.2vw, 1.25rem);
  color: var(--text-primary);
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeSlideUp 0.9s var(--ease-out) 0.5s both;
  letter-spacing: 0.06em;
}

.hero-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 2;
  max-width: 520px;
  margin: 0 auto;
  opacity: 0;
  animation: fadeSlideUp 0.9s var(--ease-out) 0.8s both;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FEATURE GRID
   ============================================================ */
.feature-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  max-width: 1040px;
  width: 100%;
  opacity: 0;
  animation: fadeSlideUp 0.9s var(--ease-out) 1s both;
}

/* ---- Feature sections (homepage categorization) ---- */
.feature-section {
  position: relative; z-index: 4;
  max-width: 1040px; width: 100%;
  margin: 0 auto 36px;
  padding: 0 20px;
  opacity: 0;
  animation: fadeSlideUp 0.9s var(--ease-out) 0.9s both;
}
.feature-section + .feature-section { animation-delay: 1.15s; }
.feature-section + .feature-section + .feature-section { animation-delay: 1.35s; }
.feature-section + .feature-section + .feature-section + .feature-section { animation-delay: 1.55s; }
.feature-section-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.25rem; font-weight: 600;
  color: var(--gold-light, #e8d4ac);
  margin: 0 4px 4px;
  letter-spacing: 0.02em;
}
.feature-section-sub {
  margin: 0 4px 14px;
  color: var(--text-muted, #8e8e9e);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}
.fss-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: rgba(200, 162, 110, 0.08);
  border: 1px solid rgba(200, 162, 110, 0.25);
  border-radius: 8px;
  font-size: 1rem;
}
.fss-badge.fss-hot {
  background: linear-gradient(135deg, rgba(220,110,90,0.25), rgba(200,162,110,0.15));
  border-color: rgba(220,110,90,0.4);
  box-shadow: 0 0 16px rgba(220,110,90,0.25);
}
.fss-badge.fss-new {
  background: linear-gradient(135deg, rgba(72,200,184,0.22), rgba(106,79,160,0.18));
  border-color: rgba(72,200,184,0.4);
}
.fss-pill {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em;
  padding: 2px 7px; border-radius: 99px;
  background: linear-gradient(135deg, #48c8b8, #c8a26e);
  color: #0a0a1c;
}

/* Hot feature grid — slightly bigger cards */
.feature-grid-hot { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.feature-card-hot {
  background: linear-gradient(155deg, rgba(200,162,110,0.08), rgba(10,10,28,0.5));
  border-color: rgba(200,162,110,0.32);
}
.feature-card-hot::before { opacity: 1; background: linear-gradient(90deg, transparent, var(--gold, #c8a26e), transparent); }
.feature-card-hot:hover {
  transform: translateY(-4px);
  border-color: rgba(200,162,110,0.6);
  box-shadow: 0 14px 40px rgba(200,162,110,0.18);
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 14px 22px;
  background: rgba(10, 10, 28, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease), border-color var(--transition);
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}

/* Top accent line */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.feature-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--border-gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(200, 162, 110, 0.06);
}

.feature-card:hover::before { opacity: 1; }

.feature-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(200, 162, 110, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  border: 1px solid rgba(200, 162, 110, 0.06);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease);
}

.feature-card:hover .feature-icon {
  transform: scale(1.15) rotate(-5deg);
  box-shadow: 0 0 24px rgba(200, 162, 110, 0.12);
}

.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 5px;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.feature-card p {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* AI Hero Card — full-width CTA above grid */
.ai-hero-card {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  max-width: 1040px;
  margin-bottom: 20px;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(20, 35, 40, 0.7), rgba(15, 20, 45, 0.7));
  border: 1px solid rgba(72, 200, 184, 0.15);
  border-radius: var(--radius-lg);
  text-decoration: none !important;
  overflow: hidden;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.35s var(--ease-spring);
  opacity: 0;
  animation: fadeSlideUp 0.9s var(--ease-out) 0.85s both;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.ai-hero-card:hover {
  border-color: rgba(72, 200, 184, 0.35);
  box-shadow: 0 16px 60px rgba(72, 200, 184, 0.08), 0 0 1px rgba(72, 200, 184, 0.3);
  transform: translateY(-4px);
}
.ai-hero-glow {
  position: absolute; top: -50%; right: -20%; width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(72, 200, 184, 0.06) 0%, transparent 70%);
  pointer-events: none; animation: aiGlowDrift 8s ease-in-out infinite alternate;
}
@keyframes aiGlowDrift { 0% { transform: translate(0,0); } 100% { transform: translate(-30%,10%); } }
.ai-hero-content { display: flex; align-items: center; gap: 20px; position: relative; z-index: 1; }
.ai-hero-icon {
  font-size: 2.4rem; flex-shrink: 0; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(72, 200, 184, 0.08); border-radius: 50%; border: 1px solid rgba(72, 200, 184, 0.12);
  animation: aiBreath 4s ease-in-out infinite;
}
.ai-hero-text { flex: 1; }
.ai-hero-text h3 { font-family: var(--font-display); font-size: 1.2rem; color: var(--ai-cyan); margin-bottom: 4px; letter-spacing: 0.06em; }
.ai-hero-text p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.6; }
.ai-hero-arrow { font-size: 1.4rem; color: var(--ai-cyan); flex-shrink: 0; transition: transform 0.3s var(--ease); opacity: 0.5; }
.ai-hero-card:hover .ai-hero-arrow { transform: translateX(6px); opacity: 1; }
@media (max-width: 640px) {
  .ai-hero-card { padding: 20px; margin-bottom: 14px; }
  .ai-hero-icon { width: 44px; height: 44px; font-size: 1.8rem; }
  .ai-hero-text h3 { font-size: 1rem; }
  .ai-hero-text p { font-size: 0.78rem; }
  .ai-hero-arrow { display: none; }
}

/* AI card special treatment */
.feature-card-ai {
  border-color: rgba(72, 200, 184, 0.1);
  background: linear-gradient(160deg, rgba(10, 10, 28, 0.5), rgba(15, 35, 35, 0.4));
}
.feature-card-ai::before { background: linear-gradient(90deg, transparent, var(--ai-cyan), transparent); }
.feature-card-ai:hover {
  border-color: rgba(72, 200, 184, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 50px rgba(72, 200, 184, 0.06);
}
.feature-card-ai h3 { color: var(--ai-cyan); }
.feature-card-ai .feature-icon {
  background: radial-gradient(circle, rgba(72, 200, 184, 0.08) 0%, transparent 70%);
  animation: aiBreath 4s ease-in-out infinite;
}

@keyframes aiBreath {
  0%, 100% { box-shadow: 0 0 0 rgba(72, 200, 184, 0); }
  50%      { box-shadow: 0 0 24px rgba(72, 200, 184, 0.12); }
}

/* ============================================================
   SUBSECTIONS & LEARN BLOCKS
   ============================================================ */
.subsection {
  margin-bottom: 68px;
}

.subsection h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-glass);
  color: var(--gold);
  letter-spacing: 0.06em;
  position: relative;
}

/* Gold dot before subsection title */
.subsection h3::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--gold-dark);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--gold-glow);
}

.learn-text {
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 2;
  font-size: 0.92rem;
}

.learn-block {
  padding: 40px 36px;
  background: rgba(10, 10, 28, 0.45);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
}

.learn-block::before {
  content: '';
  position: absolute;
  top: -1px; left: 40px; right: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
  opacity: 0.35;
}

.learn-block h3 { border-bottom-color: var(--border-gold); }

/* ============================================================
   THEORY CARDS — Dark jade feel
   ============================================================ */
.theory-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.theory-card {
  padding: 28px;
  background: rgba(6, 6, 18, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  transition: transform 0.35s var(--ease-spring), border-color var(--transition), box-shadow 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}

/* Inner top highlight — jade carved edge effect */
.theory-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(200, 162, 110, 0.12) 50%, transparent 90%);
}

.theory-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200, 162, 110, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 1px rgba(200, 162, 110, 0.1);
}

.theory-card h4 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--gold);
  margin-bottom: 12px;
  font-weight: 400;
}

.theory-card p {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.9;
}

/* ============================================================
   TOOL CARDS — Inputs & Buttons
   ============================================================ */
.tool-card {
  padding: 32px;
  background: rgba(10, 10, 28, 0.45);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.input-group { display: flex; flex-direction: column; gap: 16px; }

.input-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.input-row label {
  font-size: 0.86rem; color: var(--text-secondary); min-width: 80px; font-weight: 500;
}

.input-row input,
.input-row select,
.input-group select {
  flex: 1; min-width: 160px;
  padding: 11px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.input-row input:focus,
.input-row select:focus,
.input-group select:focus {
  border-color: rgba(200, 162, 110, 0.35);
  box-shadow: 0 0 0 3px rgba(200, 162, 110, 0.06), 0 0 24px rgba(200, 162, 110, 0.04);
}

input[type="date"] { color-scheme: dark; }

.tool-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

.status-text { margin-top: 12px; font-size: 0.82rem; color: var(--text-muted); font-style: italic; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 28px;
  font-family: var(--font-sans);
  font-size: 0.86rem; font-weight: 600;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring), box-shadow var(--transition), filter var(--transition);
  white-space: nowrap; letter-spacing: 0.03em;
}

.btn:active { transform: scale(0.95); }

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--bg-primary);
  box-shadow: 0 4px 24px rgba(200, 162, 110, 0.18);
}

.btn-primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 8px 36px rgba(200, 162, 110, 0.25);
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(200, 162, 110, 0.05);
  color: var(--gold);
  border: 1px solid var(--border-gold);
}
.btn-secondary:hover { background: rgba(200, 162, 110, 0.12); }

/* Result area */
.result-area {
  margin-top: 28px; padding: 26px;
  background: rgba(6, 6, 18, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  animation: resultReveal 0.5s var(--ease-out) both;
}

@keyframes resultReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   COMPONENT GRIDS
   ============================================================ */

/* Trigram grid */
.trigram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.trigram-grid > * {
  padding: 18px; text-align: center;
  background: rgba(10, 10, 28, 0.4);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  transition: transform 0.3s var(--ease-spring), border-color var(--transition), box-shadow 0.3s var(--ease);
}
.trigram-grid > *:hover {
  transform: translateY(-3px);
  border-color: var(--border-gold);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Hexagram chart — now a plain centered container; inner .hc-wrap handles its own layout */
.hexagram-chart {
  display: block;
  width: 100%;
}

/* Coins */
.coin-container { display: flex; justify-content: center; gap: 30px; margin: 30px 0; }

.coin {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700;
  color: var(--bg-primary);
  background: linear-gradient(145deg, #e8d4ac, #9c7840);
  box-shadow: 0 4px 24px rgba(200, 162, 110, 0.3), inset 0 2px 4px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.2);
  transition: transform 0.4s var(--ease);
}

.coin.flipping { animation: coinFlip 0.6s var(--ease); }

@keyframes coinFlip {
  0%   { transform: rotateY(0deg) scale(1); }
  50%  { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(360deg) scale(1); }
}

.throw-history {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; margin: 18px 0;
  font-family: var(--font-serif); font-size: 0.86rem; color: var(--text-secondary);
}

.hexagram-display { display: flex; gap: 36px; align-items: flex-start; flex-wrap: wrap; }
.hexagram-symbol { font-family: var(--font-serif); font-size: 2.5rem; color: var(--gold); text-align: center; min-width: 120px; line-height: 1.5; }
.hexagram-info { flex: 1; min-width: 240px; line-height: 1.9; color: var(--text-secondary); font-size: 0.92rem; }
.hexagram-info h4 { color: var(--gold); margin-bottom: 8px; font-size: 1.15rem; }

/* Wuxing */
.wuxing-diagram { display: flex; justify-content: center; padding: 52px 0; }
.wuxing-circle {
  position: relative; width: 320px; height: 320px; border-radius: 50%;
  border: 1px solid rgba(200, 162, 110, 0.06);
  background: radial-gradient(circle, rgba(106, 79, 160, 0.04) 0%, transparent 65%);
}
.wuxing-element {
  position: absolute; top: 50%; left: 50%;
  width: 80px; height: 80px; margin: -40px 0 0 -40px;
  transform: rotate(var(--angle)) translateY(-130px) rotate(calc(-1 * var(--angle)));
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  transition: transform var(--transition), filter var(--transition);
}
.wuxing-element:hover { filter: brightness(1.5) drop-shadow(0 0 8px currentColor); }
.wuxing-char { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; margin-bottom: 4px; }
.wuxing-label { font-size: 0.65rem; color: var(--text-muted); white-space: nowrap; }

[data-element="wood"] .wuxing-char { color: #66bb6a; }
[data-element="fire"] .wuxing-char { color: #ef5350; }
[data-element="earth"] .wuxing-char { color: #c8a26e; }
[data-element="metal"] .wuxing-char { color: #dcdcdc; }
[data-element="water"] .wuxing-char { color: #42a5f5; }

/* Bazi */
.bazi-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; text-align: center; }
.bazi-pillars > * { padding: 18px; background: rgba(10, 10, 28, 0.4); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); font-family: var(--font-serif); }
.bazi-elements { margin-bottom: 18px; padding: 18px; background: rgba(10, 10, 28, 0.4); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.bazi-analysis { line-height: 1.9; color: var(--text-secondary); font-size: 0.92rem; }

/* Zodiac */
.zodiac-display { text-align: center; padding: 18px; }
.zodiac-display h3 { border: none; color: var(--gold); font-size: 1.8rem; margin-bottom: 8px; }
.zodiac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.zodiac-grid > * {
  padding: 22px 14px; background: rgba(10, 10, 28, 0.4); border: 1px solid var(--border-glass); border-radius: var(--radius); text-align: center;
  transition: transform 0.3s var(--ease-spring), border-color var(--transition), box-shadow 0.3s var(--ease); cursor: pointer;
}
.zodiac-grid > *:hover { transform: translateY(-5px); border-color: var(--border-gold); box-shadow: var(--shadow-glow); }

.compatibility-inputs { flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 12px; }
.heart-icon { font-size: 1.5rem; color: var(--crimson); animation: heartPulse 2.5s ease-in-out infinite; }
@keyframes heartPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.25); opacity: 1; } }

/* Tarot */
.spread-selector { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.spread-btn {
  padding: 8px 20px; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500;
  background: rgba(200, 162, 110, 0.03); color: var(--text-muted);
  border: 1px solid var(--border-glass); border-radius: 20px;
  cursor: pointer; transition: all var(--transition);
}
.spread-btn:hover { border-color: var(--gold-dark); color: var(--gold); }
.spread-btn.active { background: rgba(200, 162, 110, 0.1); border-color: var(--gold-dark); color: var(--gold); }

.tarot-spread { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; min-height: 200px; margin-bottom: 18px; }

.tarot-card { width: 120px; height: 190px; perspective: 800px; cursor: pointer; }
.tarot-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s var(--ease); transform-style: preserve-3d; }
.tarot-card.flipped .tarot-card-inner { transform: rotateY(180deg); }
.tarot-card-front, .tarot-card-back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-direction: column;
  padding: 12px; text-align: center; border: 1px solid var(--border-glass); overflow: hidden;
}
.tarot-card-back { background: linear-gradient(145deg, #141030, #08081a); border-color: rgba(200, 162, 110, 0.15); }
.tarot-card-back::before { content: '✦'; font-size: 2.5rem; color: var(--gold-dark); opacity: 0.35; }
.tarot-card-front { transform: rotateY(180deg); background: linear-gradient(145deg, rgba(20, 20, 48, 0.8), rgba(10, 10, 28, 0.9)); border-color: var(--border-gold); font-size: 0.76rem; color: var(--text-primary); line-height: 1.4; }
.tarot-card-front h4 { font-size: 0.82rem; color: var(--gold); margin-bottom: 4px; }

.tarot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.tarot-grid > * {
  padding: 14px 8px; text-align: center; background: rgba(10, 10, 28, 0.4); border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm); font-size: 0.76rem;
  transition: transform 0.25s var(--ease-spring), border-color var(--transition), box-shadow 0.3s var(--ease); cursor: pointer;
}
.tarot-grid > *:hover { transform: translateY(-4px); border-color: var(--gold-dark); box-shadow: 0 0 20px rgba(200, 162, 110, 0.08); }

/* Numerology */
.number-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.number-grid > * {
  padding: 22px 16px; background: rgba(10, 10, 28, 0.4); border: 1px solid var(--border-glass); border-radius: var(--radius); text-align: center;
  transition: transform 0.3s var(--ease-spring), border-color var(--transition), box-shadow 0.3s var(--ease);
}
.number-grid > *:hover { transform: translateY(-4px); border-color: var(--border-gold); box-shadow: 0 0 28px rgba(200, 162, 110, 0.06); }
.num-display { text-align: center; }
.num-display .number {
  font-family: var(--font-display); font-size: 4rem;
  background: linear-gradient(135deg, var(--gold-light), var(--purple-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ============================================================
   I-CHING OVERRIDES — Hexagram lines, chart, result
   ============================================================ */

/* Hexagram line rendering */
.hex-line {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 14px;
  margin: 6px auto !important;
  max-width: 120px;
  position: relative;
}

.hex-line .line-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  transition: all 0.3s var(--ease);
}

.hex-line.yang-line .line-bar.full-bar {
  width: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  box-shadow: 0 0 8px rgba(200, 162, 110, 0.2);
}

.hex-line.yin-line .line-bar.half-bar {
  width: 42%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  box-shadow: 0 0 6px rgba(200, 162, 110, 0.15);
}

.hex-line .line-gap {
  width: 16%;
  height: 6px;
}

.hex-line.changing-line {
  animation: changingPulse 2s ease-in-out infinite;
}

.hex-line.changing-line .line-bar {
  background: linear-gradient(90deg, var(--crimson), #e06050, var(--crimson)) !important;
  box-shadow: 0 0 12px rgba(192, 48, 48, 0.3) !important;
}

.hex-line .change-marker {
  position: absolute;
  right: -24px;
  font-size: 0.7rem;
  color: var(--crimson);
  opacity: 0.8;
}

@keyframes changingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Hexagram info display */
#hexagramResult {
  border: 1px solid var(--border-gold) !important;
  background: rgba(10, 10, 28, 0.6) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
}

.hexagram-display {
  gap: 40px !important;
}

#hexagramSymbol {
  min-width: 140px !important;
  padding: 16px;
  background: rgba(200, 162, 110, 0.03);
  border: 1px solid rgba(200, 162, 110, 0.08);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#hexagramInfo h4 {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  color: var(--gold-light) !important;
  margin-bottom: 14px !important;
  letter-spacing: 0.04em;
}

.hex-trigrams {
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border-glass) !important;
}

.hex-judgment {
  font-family: var(--font-serif) !important;
  color: var(--gold) !important;
  font-size: 1rem !important;
  margin: 10px 0 !important;
}

.hex-meaning {
  color: var(--text-primary) !important;
  font-size: 0.92rem !important;
  margin: 8px 0 !important;
}

.hex-desc {
  color: var(--text-secondary) !important;
  line-height: 1.9 !important;
  font-size: 0.9rem !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border-glass) !important;
}

/* Changed hexagram (变卦) */
.changed-hex {
  margin-top: 20px !important;
  padding: 20px !important;
  background: rgba(106, 79, 160, 0.06) !important;
  border: 1px solid rgba(106, 79, 160, 0.15) !important;
  border-radius: var(--radius) !important;
}

.changed-hex h5 {
  font-family: var(--font-display) !important;
  color: var(--purple-light) !important;
  font-size: 1.1rem !important;
  margin-bottom: 10px !important;
}

/* ── 64 Hexagram Chart — Tabbed Card Layout ────────────── */

.hc-wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

/* Tab bar — 8 tabs evenly across full width */
.hc-tabs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-bottom: 32px;
}

.hc-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: rgba(10, 10, 28, 0.4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
  font-family: var(--font-sans);
}

.hc-tab:hover {
  border-color: var(--border-gold);
  background: rgba(200, 162, 110, 0.04);
}

.hc-tab.active {
  background: rgba(200, 162, 110, 0.08);
  border-color: var(--gold-dark);
  box-shadow: 0 0 16px rgba(200, 162, 110, 0.06);
}

.hc-tab-sym {
  font-size: 1.4rem;
  color: var(--text-muted);
  line-height: 1;
  transition: color var(--transition);
}

.hc-tab.active .hc-tab-sym {
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold-glow);
}

.hc-tab-name {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-serif);
  transition: color var(--transition);
}

.hc-tab.active .hc-tab-name {
  color: var(--gold-light);
}

/* Card grid — 8 cards, fixed 4 columns centered */
.hc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  animation: fadeIn 0.35s var(--ease);
}

/* Individual hexagram card */
.hc-card {
  padding: 22px 20px;
  background: rgba(10, 10, 28, 0.45);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.35s var(--ease-spring), border-color var(--transition), box-shadow 0.35s var(--ease);
  position: relative;
}

.hc-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-gold);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 1px rgba(200, 162, 110, 0.15);
}

.hc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hc-card-num {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* Mini hexagram lines in card */
.hc-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}

.hc-yao {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  height: 4px;
  width: 32px;
}

.hc-yang span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--gold-dark);
  border-radius: 1.5px;
}

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

.hc-yin span {
  display: block;
  width: 42%;
  height: 3px;
  background: var(--gold-dark);
  border-radius: 1.5px;
}

/* Card symbol & text */
.hc-card-sym {
  font-size: 2.2rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}

.hc-card-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold-light);
  margin-bottom: 4px;
  letter-spacing: 0.06em;
}

.hc-card-trigrams {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.hc-card-meaning {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-top: 10px;
  border-top: 1px solid var(--border-glass);
}

/* ── Hexagram Detail Modal ─────────────────────────────── */

.hex-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.3s var(--ease);
}

.hex-detail-overlay.active {
  display: flex;
}

.hex-detail-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  max-width: 520px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-deep);
  max-height: 88vh;
  overflow-y: auto;
}

.hex-detail-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color var(--transition);
}
.hex-detail-close:hover { color: var(--text-primary); }

.hex-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-glass);
}

.hd-symbol-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.hex-detail-symbol {
  font-size: 3rem;
  color: var(--gold);
  line-height: 1;
}

/* Lines in detail modal — proper styled bars */
.hd-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.hd-line-gap {
  height: 6px;
}

.hd-yao {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 7px;
}

.hd-yang span {
  display: block;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  border-radius: 2.5px;
  box-shadow: 0 0 6px rgba(200, 162, 110, 0.15);
}

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

.hd-yin span {
  display: block;
  width: 40%;
  height: 5px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: 2.5px;
  box-shadow: 0 0 4px rgba(200, 162, 110, 0.1);
}

.hd-info h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold-light);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.hd-trigram-info {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Detail body */
.hex-detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hd-judgment, .hd-meaning {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.7;
}

.hd-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-dark);
  background: rgba(200, 162, 110, 0.08);
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.06em;
}

.hd-judgment {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--gold-light);
}

.hd-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 2;
  padding-top: 16px;
  border-top: 1px solid var(--border-glass);
  margin: 0;
}

/* Tablet */
@media (max-width: 900px) {
  .hc-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .hc-tabs { gap: 6px; }
}

/* Mobile */
@media (max-width: 640px) {
  .hc-tabs {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .hc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .hc-card { padding: 16px 14px; }
  .hc-card-sym { font-size: 1.6rem; }
  .hc-card-name { font-size: 0.95rem; }
  .hc-tab { padding: 10px 6px; }
  .hc-tab-sym { font-size: 1.1rem; }
  .hc-tab-name { font-size: 0.65rem; }
  .hex-detail-card { padding: 28px 20px; }
  .hex-detail-header { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 380px) {
  .hc-grid { grid-template-columns: repeat(2, 1fr); }
  .hc-tabs { grid-template-columns: repeat(4, 1fr); }
}

/* ── Trigram Cards ─────────────────────────────────────────── */

.trigram-card {
  padding: 20px 14px !important;
  background: rgba(10, 10, 28, 0.45) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius) !important;
  text-align: center;
  transition: all 0.3s var(--ease-spring) !important;
}

.trigram-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--border-gold) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.trigram-symbol {
  font-size: 2.2rem !important;
  color: var(--gold) !important;
  display: block;
  margin-bottom: 8px;
  text-shadow: 0 0 12px rgba(200, 162, 110, 0.2);
}

.trigram-name {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  color: var(--gold-light) !important;
  margin-bottom: 4px;
}

.trigram-nature {
  font-size: 0.82rem !important;
  color: var(--text-secondary) !important;
  margin-bottom: 8px;
}

.trigram-attr {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
}

.trigram-attr span {
  font-size: 0.68rem !important;
  color: var(--text-muted) !important;
  background: rgba(200, 162, 110, 0.04);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(200, 162, 110, 0.06);
}

/* ============================================================
   BAZI OVERRIDES — Four Pillars, Elements, Analysis
   ============================================================ */

.bazi-pillar-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 24px auto !important;
  max-width: 720px;
}

.bazi-pillar {
  text-align: center;
  border: 1px solid rgba(200, 162, 110, 0.1) !important;
  border-radius: var(--radius) !important;
  padding: 28px 18px !important;
  background: rgba(10, 10, 28, 0.5) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-spring);
}

.bazi-pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 162, 110, 0.2) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Top accent line colored by element */
.bazi-pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  border-radius: 1px;
}

.bazi-pillar-label {
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em !important;
  margin-bottom: 12px !important;
}

.bazi-stem {
  margin: 8px 0 !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(200, 162, 110, 0.06);
}

.bazi-branch {
  margin: 10px 0 4px !important;
}

.bazi-char {
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  display: block !important;
  line-height: 1.2 !important;
  text-shadow: 0 0 16px currentColor;
  filter: saturate(0.85);
}

.bazi-meta {
  font-size: 0.82rem !important;
  opacity: 0.65 !important;
  display: block !important;
  margin-top: 4px;
}

/* Five Elements chart */
.bazi-element-chart {
  max-width: 100% !important;
  margin: 24px auto !important;
  padding: 28px;
  background: rgba(10, 10, 28, 0.3);
  border-radius: var(--radius);
  border: 1px solid var(--border-glass);
}

.bazi-element-chart h4,
#baziElements h4 {
  font-family: var(--font-display) !important;
  color: var(--gold) !important;
  font-size: 1rem !important;
  margin-bottom: 14px !important;
  text-align: center;
}

.bazi-el-row {
  display: flex !important;
  align-items: center !important;
  margin: 12px 0 !important;
  gap: 14px !important;
}

.bazi-el-label {
  width: 36px !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  font-family: var(--font-display) !important;
  text-align: center;
  flex-shrink: 0 !important;
  text-shadow: 0 0 10px currentColor;
  filter: saturate(0.8);
}

.bazi-el-bar-bg {
  flex: 1 !important;
  height: 28px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.bazi-el-bar {
  height: 100% !important;
  border-radius: 11px !important;
  transition: width 0.8s var(--ease) !important;
  box-shadow: 0 0 12px currentColor;
  opacity: 0.75;
}

.bazi-el-val {
  width: 44px !important;
  text-align: right !important;
  font-size: 0.92rem !important;
  color: var(--text-secondary) !important;
  font-weight: 600;
}

/* Bazi analysis text */
#baziAnalysis {
  margin-top: 20px !important;
  padding: 24px !important;
  background: rgba(10, 10, 28, 0.35) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius) !important;
  line-height: 1.9 !important;
}

#baziAnalysis h4 {
  font-family: var(--font-display) !important;
  color: var(--gold) !important;
  font-size: 1.05rem !important;
  margin: 16px 0 10px !important;
  padding-top: 12px;
  border-top: 1px solid var(--border-glass);
}

#baziAnalysis h4:first-child {
  margin-top: 0 !important;
  padding-top: 0;
  border-top: none;
}

#baziAnalysis p {
  margin: 6px 0 !important;
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
}

#baziAnalysis strong {
  color: var(--text-primary) !important;
}

/* Mobile responsive for iching & bazi */
@media (max-width: 640px) {
  .hex-chart-table {
    grid-template-columns: 40px repeat(8, 1fr) !important;
    gap: 3px !important;
  }
  .hex-chart-cell {
    padding: 7px 3px !important;
    min-height: 48px;
    border-radius: 5px;
  }
  .chart-hex-symbol { font-size: 1rem !important; }
  .chart-hex-name { font-size: 0.6rem !important; }
  .hex-chart-col-header, .hex-chart-row-header { font-size: 0.82rem !important; }
  .hex-detail-card { padding: 28px 20px; }
  .hex-detail-symbol { font-size: 2.2rem; }
  .hex-detail-header h3 { font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .bazi-pillar-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hex-chart-table {
    grid-template-columns: 32px repeat(8, 1fr) !important;
    gap: 2px !important;
  }
  .hex-chart-cell {
    padding: 5px 2px !important;
    min-height: 40px;
  }
  .chart-hex-symbol { font-size: 0.85rem !important; }
  .chart-hex-name { font-size: 0.52rem !important; }
  .hex-chart-col-header, .hex-chart-row-header { font-size: 0.72rem !important; }
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.comparison-table-wrapper { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border-glass); }
.comparison-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.84rem; }
.comparison-table th, .comparison-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(200, 162, 110, 0.04); }
.comparison-table thead th { background: rgba(106, 79, 160, 0.1); color: var(--gold); font-family: var(--font-display); font-weight: 400; font-size: 0.86rem; position: sticky; top: 0; z-index: 2; }
.comparison-table tbody tr { transition: background var(--transition); }
.comparison-table tbody tr:nth-child(even) { background: rgba(14, 14, 38, 0.3); }
.comparison-table tbody tr:nth-child(odd) { background: rgba(6, 6, 18, 0.3); }
.comparison-table tbody tr:hover { background: rgba(200, 162, 110, 0.03); }
.comparison-table td:first-child { font-weight: 600; color: var(--gold-dark); white-space: nowrap; }

/* ============================================================
   ARTICLES & GLOSSARY
   ============================================================ */
.article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.article-card {
  padding: 30px; background: rgba(10, 10, 28, 0.4); border: 1px solid var(--border-glass); border-radius: var(--radius);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color var(--transition);
}
.article-card:hover { border-color: rgba(200, 162, 110, 0.15); }
.article-card h4 { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold); margin-bottom: 10px; font-weight: 400; }
.article-card > p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 12px; }

.read-more { display: inline-block; font-size: 0.82rem; font-weight: 600; color: var(--gold-dark); cursor: pointer; transition: color var(--transition); user-select: none; }
.read-more:hover { color: var(--gold-light); }

.article-detail { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-glass); animation: detailSlide 0.4s var(--ease-out); }
.article-card.expanded .article-detail, .article-detail.open { display: block; }
@keyframes detailSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.article-detail p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.9; margin-bottom: 12px; }
.article-detail p:last-child { margin-bottom: 0; }

.glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.glossary-item { padding: 20px; background: rgba(10, 10, 28, 0.35); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); transition: border-color var(--transition); }
.glossary-item:hover { border-color: var(--border-gold); }
.glossary-item dt { font-family: var(--font-display); color: var(--gold); font-size: 0.98rem; margin-bottom: 6px; }
.glossary-item dd { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.7; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  background: var(--bg-secondary); border-top: 1px solid var(--border-glass); position: relative;
}
#footer::before {
  content: ''; position: absolute; top: -1px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent); opacity: 0.25;
}

.footer-inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 52px 28px 36px;
  display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 40px; align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-logo { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold); }
.footer-brand p { font-size: 0.82rem; color: var(--text-muted); }
.footer-links { display: flex; flex-direction: column; gap: 6px; }
.footer-links h4 { font-size: 0.88rem; color: var(--text-primary); margin-bottom: 4px; }
.footer-links a { font-size: 0.82rem; color: var(--text-muted); transition: color var(--transition); }
.footer-links a:hover { color: var(--gold); }
.footer-note h4 { font-size: 0.88rem; color: var(--text-primary); margin-bottom: 8px; }
.footer-note p { font-size: 0.76rem; color: var(--text-muted); line-height: 1.8; }
.footer-bottom { border-top: 1px solid var(--border-glass); text-align: center; padding: 18px 24px; }
.footer-bottom p { font-size: 0.76rem; color: var(--text-muted); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.animate-fadeIn { animation: fadeIn 0.6s var(--ease) both; }
.animate-slideUp { animation: slideUp 0.6s var(--ease) both; }

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-note { grid-column: 1 / -1; }
  .bazi-pillars { grid-template-columns: repeat(2, 1fr); }
  .wuxing-circle { width: 260px; height: 260px; }
  .wuxing-element { transform: rotate(var(--angle)) translateY(-105px) rotate(calc(-1 * var(--angle))); }
  .hexagram-display { flex-direction: column; align-items: center; }
  .mandala { width: 300px; height: 300px; }
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 640px) {
  :root { --nav-height: 50px; }

  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed; top: 0; right: 0;
    width: min(300px, 85vw); height: 100dvh;
    flex-direction: column;
    background: rgba(3, 3, 8, 0.97);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    padding: 72px 20px 40px; gap: 2px;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    border-left: 1px solid var(--border-glass);
    z-index: 999; overflow-y: auto; overflow-x: hidden;
    mask-image: none; -webkit-mask-image: none;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-link { font-size: 0.92rem; padding: 12px 16px; color: var(--text-secondary) !important; }
  .nav-link.active::after { display: none; }

  .hero { padding: 68px 16px 40px; }
  .hero-content { margin-bottom: 44px; }
  .mandala { width: 260px; height: 260px; opacity: 0.7; }
  .trigram-label { font-size: 0.85rem; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .feature-card { padding: 16px 10px; }
  .feature-icon { font-size: 1.5rem; width: 40px; height: 40px; }
  .feature-card h3 { font-size: 0.85rem; }
  .feature-card p { font-size: 0.65rem; }

  .section-container { padding: calc(var(--nav-height) + 20px) 16px 56px; }
  .section-header { margin-bottom: 44px; }
  .subsection { margin-bottom: 44px; }
  .learn-block { padding: 20px 14px; }
  .tool-card { padding: 20px 14px; }
  .input-row { flex-direction: column; align-items: stretch; }
  .input-row label { min-width: auto; }
  .theory-content { grid-template-columns: 1fr; }
  .hexagram-chart { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 4px; }
  .zodiac-grid { grid-template-columns: repeat(2, 1fr); }
  .tarot-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
  .number-grid { grid-template-columns: repeat(2, 1fr); }
  .article-grid { grid-template-columns: 1fr; }
  .glossary-grid { grid-template-columns: 1fr; }
  .bazi-pillars { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .wuxing-circle { width: 220px; height: 220px; }
  .wuxing-element { transform: rotate(var(--angle)) translateY(-88px) rotate(calc(-1 * var(--angle))); }
  .wuxing-char { font-size: 1.4rem; }
  .tarot-card { width: 86px; height: 138px; }
  .tarot-spread { gap: 10px; }
  .compatibility-inputs { flex-direction: column !important; }
  .heart-icon { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 22px; padding: 32px 16px 22px; }
  .footer-note { grid-column: auto; }
  .coin { width: 50px; height: 50px; font-size: 1rem; }
  .coin-container { gap: 18px; }
  .comparison-table-wrapper { margin: 0 -16px; border-radius: 0; border-left: none; border-right: none; }
}

@media (max-width: 380px) {
  .feature-grid { grid-template-columns: 1fr; }
  .bazi-pillars { grid-template-columns: repeat(2, 1fr); }
  .tarot-card { width: 70px; height: 112px; }
  .hexagram-chart { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .hero-title { letter-spacing: 0.08em; }
}

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.splash.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-content { text-align: center; }
.splash-symbol {
  font-size: 3.5rem;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
  animation: splashPulse 1.5s ease-in-out infinite;
}
@keyframes splashPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}
.splash-title {
  font-family: var(--font-hero);
  font-size: 1.8rem;
  color: var(--gold-light);
  letter-spacing: 0.15em;
  margin-bottom: 24px;
}
.splash-bar {
  width: 120px;
  height: 2px;
  background: rgba(200, 162, 110, 0.15);
  border-radius: 1px;
  margin: 0 auto;
  overflow: hidden;
}
.splash-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  border-radius: 1px;
  animation: splashLoad 1.2s var(--ease) forwards;
}
@keyframes splashLoad {
  to { width: 100%; }
}

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(3, 3, 8, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border-glass);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: center;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  text-decoration: none !important;
  border-radius: 8px;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-icon {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-muted);
  transition: color var(--transition), transform 0.2s var(--ease-spring);
}

.mobile-nav-label {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.mobile-nav-item.active .mobile-nav-icon,
.mobile-nav-item.active .mobile-nav-label {
  color: var(--gold);
}

.mobile-nav-item.active .mobile-nav-icon {
  transform: scale(1.1);
}

.mobile-nav-ai .mobile-nav-icon {
  color: var(--ai-cyan) !important;
}

.mobile-nav-ai.active .mobile-nav-label {
  color: var(--ai-cyan);
}

/* Mobile menu backdrop overlay */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.3s var(--ease);
}
.nav-backdrop.visible { display: block; }

/* ============================================================
   DAILY FORTUNE WIDGET
   ============================================================ */
.daily-fortune {
  margin-top: 28px;
  opacity: 0;
  animation: fadeSlideUp 0.9s var(--ease-out) 0.7s both;
}

.daily-fortune-inner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  background: rgba(200, 162, 110, 0.06);
  border: 1px solid rgba(200, 162, 110, 0.1);
  border-radius: 40px;
  cursor: pointer;
  transition: all var(--transition);
}

.daily-fortune-inner:hover {
  background: rgba(200, 162, 110, 0.1);
  border-color: rgba(200, 162, 110, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(200, 162, 110, 0.08);
}

.daily-fortune-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.daily-fortune-hex {
  font-size: 1.3rem;
  color: var(--gold);
}

.daily-fortune-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-light);
}

.daily-fortune-word {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.pricing-card {
  padding: 36px 28px;
  background: rgba(10, 10, 28, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.4s var(--ease), border-color var(--transition);
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-deep);
}

.pricing-card--popular {
  border-color: var(--gold-dark);
  background: linear-gradient(180deg, rgba(200, 162, 110, 0.06) 0%, rgba(10, 10, 28, 0.5) 40%);
  transform: scale(1.03);
}

.pricing-card--popular:hover {
  transform: scale(1.03) translateY(-8px);
}

.pricing-card--premium {
  border-color: rgba(72, 200, 184, 0.2);
  background: linear-gradient(180deg, rgba(72, 200, 184, 0.04) 0%, rgba(10, 10, 28, 0.5) 40%);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 18px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--bg-primary);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 20px;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 12px rgba(200, 162, 110, 0.3);
}

.pricing-tier {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-heading);
  margin-bottom: 12px;
  letter-spacing: 0.06em;
}

.pricing-price {
  font-family: var(--font-display);
  font-size: 2.8rem;
  color: var(--gold-light);
  margin-bottom: 4px;
  line-height: 1;
}

.pricing-price span {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-family: var(--font-sans);
}

.pricing-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.pricing-features {
  list-style: none;
  text-align: left;
  margin-bottom: 28px;
}

.pricing-features li {
  padding: 7px 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  position: relative;
  padding-left: 22px;
}

.pricing-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold-dark);
  font-size: 0.8rem;
}

.pricing-btn {
  width: 100%;
  padding: 13px;
  font-size: 0.9rem;
}

/* ── Engagement Bar ─────────────────────────────────── */
.engage-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 28px;
  background: rgba(200, 162, 110, 0.04);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  margin-bottom: 36px;
}

.engage-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.engage-icon { font-size: 1.2rem; }
.engage-label { font-size: 0.78rem; color: var(--text-muted); }
.engage-val { font-size: 0.92rem; font-weight: 700; color: var(--gold-light); font-family: var(--font-display); }

.engage-checkin {
  padding: 7px 18px !important;
  font-size: 0.8rem !important;
  border-radius: 20px !important;
  animation: checkinPulse 2s ease-in-out infinite;
}

@keyframes checkinPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(200, 162, 110, 0); }
  50% { box-shadow: 0 0 16px rgba(200, 162, 110, 0.15); }
}

/* ── Payment Modal ──────────────────────────────────── */
.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.3s var(--ease);
}

.pay-modal-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  max-width: 440px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-deep);
}

.pay-modal-close {
  position: absolute;
  top: 14px; right: 18px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  transition: color var(--transition);
}
.pay-modal-close:hover { color: var(--text-primary); }

.pay-modal-card h3 {
  font-family: var(--font-display);
  color: var(--gold-light);
  font-size: 1.2rem;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.pay-modal-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.pay-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pay-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(10, 10, 28, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  font-family: var(--font-sans);
  text-align: left;
  width: 100%;
}

.pay-method:hover {
  border-color: var(--border-gold);
  background: rgba(200, 162, 110, 0.05);
  transform: translateX(4px);
}

.pay-method-icon { font-size: 1.5rem; flex-shrink: 0; }
.pay-method-name { flex: 1; font-size: 0.92rem; color: var(--text-primary); font-weight: 500; }
.pay-method-tag {
  font-size: 0.68rem;
  color: var(--text-muted);
  background: rgba(200, 162, 110, 0.06);
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.pay-method--crypto {
  border-color: rgba(245, 158, 11, 0.12);
}
.pay-method--crypto:hover {
  border-color: rgba(245, 158, 11, 0.3);
}

.pay-result {
  margin-top: 20px;
  padding: 20px;
  background: rgba(10, 10, 28, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

.pay-result .crypto-addr {
  display: block;
  font-family: monospace;
  font-size: 0.76rem;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px 0;
  word-break: break-all;
  cursor: pointer;
}

/* ── Rewards Grid ───────────────────────────────────── */
.rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.reward-card {
  padding: 24px 18px;
  background: rgba(10, 10, 28, 0.4);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  text-align: center;
  transition: all 0.3s var(--ease-spring);
}

.reward-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.reward-icon { font-size: 2rem; margin-bottom: 10px; }
.reward-name { font-family: var(--font-display); font-size: 1rem; color: var(--gold-light); margin-bottom: 4px; }
.reward-req { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 8px; }
.reward-desc { font-size: 0.82rem; color: var(--text-secondary); }

@media (max-width: 640px) {
  .engage-bar { gap: 12px; padding: 14px 16px; }
  .engage-item { gap: 5px; }
  .engage-label { font-size: 0.68rem; }
  .pay-modal-card { padding: 28px 20px; }
  .rewards-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .reward-card { padding: 16px 12px; }
}

/* Nav CTA button style */
.nav-link-cta {
  color: var(--gold) !important;
  background: rgba(200, 162, 110, 0.08) !important;
  border: 1px solid rgba(200, 162, 110, 0.15);
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-weight: 600 !important;
}
.nav-link-cta:hover {
  background: rgba(200, 162, 110, 0.15) !important;
  border-color: rgba(200, 162, 110, 0.3);
}

/* ============================================================
   RESULT SHARING
   ============================================================ */
.share-result-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 18px;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: rgba(200, 162, 110, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
}
.share-result-btn:hover {
  color: var(--gold);
  background: rgba(200, 162, 110, 0.1);
  border-color: var(--border-gold);
}

/* ============================================================
   RESPONSIVE OVERRIDES FOR MOBILE NAV
   ============================================================ */
@media (max-width: 640px) {
  .mobile-nav { display: flex; }

  /* Add bottom padding so content isn't hidden behind mobile nav */
  .section-container {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  #footer {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  .hero {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* Hide top nav on mobile - use bottom nav instead */
  #navbar {
    display: none;
  }

  /* Pricing cards stack nicely */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  .pricing-card--popular {
    transform: none;
    border-width: 2px;
  }
  .pricing-card--popular:hover {
    transform: translateY(-8px);
  }
}

/* ============================================================
   ONBOARDING MODAL
   ============================================================ */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.4s var(--ease);
}

.onboarding-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 48px 36px 32px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-deep), 0 0 80px rgba(200, 162, 110, 0.06);
}

.onboarding-icon {
  font-size: 2.8rem;
  margin-bottom: 20px;
  display: block;
}

.onboarding-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold-light);
  margin-bottom: 14px;
  letter-spacing: 0.06em;
}

.onboarding-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 28px;
}

.onboarding-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.onboarding-dots {
  display: flex;
  gap: 8px;
}

.onboarding-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(200, 162, 110, 0.15);
  transition: all var(--transition);
}

.onboarding-dot.active {
  background: var(--gold);
  width: 20px;
  border-radius: 4px;
}

.onboarding-skip {
  position: absolute;
  top: 16px; right: 20px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color var(--transition);
}
.onboarding-skip:hover { color: var(--text-secondary); }

/* ============================================================
   MODULE STYLE UNIFICATION
   Overrides hardcoded colors from JS-injected <style> tags
   to match the main Celestial Observatory theme.
   Uses high specificity to win over inline styles.
   ============================================================ */

/* ── Global card/panel unification ──────────────────────── */

/* Any module-generated panel with dark background */
#meihuaContent, #ziweiContent, #fengshuiContent,
#facereadingContent, #aiAdvisorContent {
  color: var(--text-primary);
}

/* Unify all tab/button styles generated by modules */
#meihuaContent button,
#ziweiContent button,
#fengshuiContent button,
#facereadingContent button,
#aiAdvisorContent button {
  font-family: var(--font-sans);
}

/* Module section containers — ensure proper spacing */
#meihuaContent > div,
#ziweiContent > div,
#fengshuiContent > div,
#facereadingContent > div,
#aiAdvisorContent > div {
  max-width: 100%;
}

/* Fix any hardcoded white text on module cards */
#meihuaContent h3, #meihuaContent h4,
#ziweiContent h3, #ziweiContent h4,
#fengshuiContent h3, #fengshuiContent h4,
#facereadingContent h3, #facereadingContent h4 {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

/* ── Tarot module fixes ─────────────────────────────────── */

/* Tarot cards: ensure card back matches theme */
.tc-back {
  background: linear-gradient(145deg, #0e0a20, var(--bg-primary)) !important;
  border-color: rgba(200, 162, 110, 0.15) !important;
}

/* Tarot reading result text */
.tarot-reading-card, .tr-card {
  background: rgba(10, 10, 28, 0.5) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius) !important;
}

/* Major Arcana grid cards */
.ma-card {
  background: rgba(10, 10, 28, 0.4) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius-sm) !important;
  transition: transform 0.3s var(--ease-spring), border-color var(--transition) !important;
}
.ma-card:hover {
  border-color: var(--border-gold) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ── Astrology module fixes ─────────────────────────────── */

.zodiac-card, .zg-card {
  background: rgba(10, 10, 28, 0.4) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius) !important;
}

.zodiac-card:hover, .zg-card:hover {
  border-color: var(--border-gold) !important;
  transform: translateY(-4px) !important;
}

/* Compatibility result */
.compat-result, .cr-card {
  background: rgba(10, 10, 28, 0.5) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius) !important;
}

/* ── Numerology module fixes ────────────────────────────── */

.nl-card, .num-card {
  background: rgba(10, 10, 28, 0.4) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius) !important;
}

/* ── Meihua module fixes ────────────────────────────────── */

.mh-tab, .mh-method-tab {
  border-radius: 8px !important;
}

.mh-result-card {
  background: rgba(10, 10, 28, 0.5) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius) !important;
}

/* ── Ziwei module — already uses vars, just polish ──────── */

/* ── Feng Shui fixes (uses 0 CSS vars) ─────────────────── */

.fs-compass, .compass-svg {
  max-width: 100%;
}

/* ── Face Reading module fixes ──────────────────────────── */

.fr-upload-area {
  border: 2px dashed rgba(200, 162, 110, 0.15) !important;
  border-radius: var(--radius-lg) !important;
  background: rgba(10, 10, 28, 0.3) !important;
  transition: border-color var(--transition) !important;
}

.fr-upload-area:hover {
  border-color: rgba(200, 162, 110, 0.3) !important;
}

/* ── Tarot: fix tiny fonts & hardcoded colors ───────────── */

/* Tarot card dimensions & typography */
.tc-card, .tarot-card-item {
  border-radius: var(--radius-sm) !important;
}

.card-number, .tc-number, .ag-number {
  font-size: 0.7rem !important;
  color: var(--text-muted) !important;
}

.card-name, .tc-name {
  font-size: 0.82rem !important;
  font-family: var(--font-display) !important;
  color: var(--gold-light) !important;
}

.card-name-en, .tc-name-en {
  font-size: 0.65rem !important;
  color: var(--text-muted) !important;
}

/* Tarot reading interpretation text */
.tr-keywords, .reading-keywords {
  font-size: 0.82rem !important;
  color: var(--text-secondary) !important;
}

.tr-meaning, .reading-meaning {
  font-size: 0.88rem !important;
  line-height: 1.85 !important;
  color: var(--text-secondary) !important;
}

/* Tarot modal overlay */
.tarot-modal, .ma-modal {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.tarot-modal-content, .ma-modal-content {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-deep) !important;
}

/* ── Meihua: fix tiny fonts & Tailwind-like colors ──────── */

.mh-line-num {
  font-size: 0.72rem !important;
}

.mh-element-tag, .mh-ty-badge {
  font-size: 0.78rem !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
}

.mh-ty-verdict {
  font-size: 0.92rem !important;
  font-family: var(--font-display) !important;
}

.mh-tab.active, .mh-method-tab.active {
  background: rgba(200, 162, 110, 0.12) !important;
  border-color: var(--gold-dark) !important;
  color: var(--gold-light) !important;
}

/* Meihua trigram display */
.mh-trigram-symbol {
  font-size: 2rem !important;
  color: var(--gold) !important;
}

.mh-trigram-name {
  font-family: var(--font-display) !important;
  color: var(--gold-light) !important;
}

/* Meihua result cards */
.mh-hexagram-card, .mh-result-section {
  background: rgba(10, 10, 28, 0.5) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
}

/* Meihua reference table */
.mh-ref-card {
  background: rgba(10, 10, 28, 0.4) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius-sm) !important;
}

/* ── Numerology: fix gold color & font sizes ────────────── */

.num-card {
  border-radius: var(--radius) !important;
}

.num-card .num-number, .num-card-number {
  color: var(--gold) !important;
  font-family: var(--font-display) !important;
  text-shadow: 0 0 16px var(--gold-glow);
}

.num-card-badge {
  font-size: 0.72rem !important;
  background: rgba(200, 162, 110, 0.1) !important;
  color: var(--gold) !important;
  border-radius: 12px !important;
  padding: 2px 10px !important;
}

.num-step, .num-step-detail {
  font-size: 0.85rem !important;
  color: var(--text-secondary) !important;
}

.num-detail-section {
  margin-bottom: 16px !important;
  padding: 16px !important;
  background: rgba(10, 10, 28, 0.35) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius-sm) !important;
}

.num-detail-section strong {
  font-size: 0.88rem !important;
  color: var(--gold) !important;
  font-family: var(--font-display) !important;
}

/* ── Fengshui: unify all hardcoded colors ───────────────── */

/* Compass SVG container */
#fengshuiContent svg text {
  font-family: var(--font-serif) !important;
}

/* Direction cards */
.fs-dir-card, .fs-direction-card {
  background: rgba(10, 10, 28, 0.45) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius) !important;
  transition: transform 0.3s var(--ease-spring), border-color var(--transition) !important;
}

.fs-dir-card:hover, .fs-direction-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--border-gold) !important;
}

/* Auspicious / inauspicious color overrides */
.fs-good, .fs-auspicious {
  border-left: 3px solid #4caf50 !important;
}

.fs-bad, .fs-inauspicious {
  border-left: 3px solid var(--crimson) !important;
}

/* Room layout grid */
.fs-room-grid, .fs-grid {
  gap: 6px !important;
}

.fs-room-cell, .fs-grid-cell {
  background: rgba(10, 10, 28, 0.4) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius-sm) !important;
  min-height: 80px;
}

/* Kua number result */
.fs-kua-result {
  background: rgba(200, 162, 110, 0.04) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius-lg) !important;
}

/* Fengshui tabs */
.fs-tab, .fs-tab-btn {
  border-radius: 8px !important;
  font-family: var(--font-sans) !important;
}

.fs-tab.active, .fs-tab-btn.active {
  background: rgba(200, 162, 110, 0.12) !important;
  color: var(--gold) !important;
  border-color: var(--gold-dark) !important;
}

/* Astrology modal overlay fix */
.zodiac-overlay, .astro-modal {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.zodiac-overlay-content, .astro-modal-content {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-deep) !important;
}

/* ── AI Advisor — floating button refinement ────────────── */

.ai-fab {
  box-shadow: 0 4px 24px rgba(72, 200, 184, 0.2), 0 0 60px rgba(72, 200, 184, 0.06) !important;
}

/* AI mini chat overlay — fit viewport, never cut input */
.ai-mini-chat {
  border: 1px solid rgba(72, 200, 184, 0.15) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-deep) !important;
  height: min(560px, calc(100dvh - 160px)) !important;
  max-height: calc(100dvh - 100px) !important;
}
.ai-mini-chat .ai-chat-container {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}
.ai-mini-chat .ai-chat-header { flex: 0 0 auto !important; }
.ai-mini-chat .ai-chat-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.ai-mini-chat .ai-chat-input-area {
  flex: 0 0 auto !important;
  display: block !important;
  background: #fbf5e6 !important;
  border-top: 2px solid var(--e-red) !important;
  box-shadow: 0 -4px 12px rgba(0,0,0,.08) !important;
}
@media (max-width: 768px) {
  .ai-mini-chat {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    left: 8px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    height: min(68dvh, calc(100dvh - 160px)) !important;
  }
  /* Hide suggested-questions in mini chat to save vertical space */
  .ai-mini-chat .ai-suggested-questions { display: none !important; }
  .ai-mini-chat .ai-chat-input-area { padding: 8px 10px 10px !important; }
}
.ai-mini-chat .ai-suggested-questions { margin-bottom: 8px !important; }

/* Close button in mini chat header */
.ai-mini-close {
  margin-left: auto !important;
  background: none !important;
  border: 0 !important;
  color: var(--e-ink-2, #666) !important;
  font-size: 1.3rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: background .15s !important;
}
.ai-mini-close:hover { background: rgba(192,57,43,.08) !important; color: var(--e-red) !important; }

/* ── Universal polish for all module-injected elements ──── */

/* Any module input/select */
#meihuaContent input, #meihuaContent select,
#ziweiContent input, #ziweiContent select,
#fengshuiContent input, #fengshuiContent select,
#facereadingContent input, #facereadingContent select {
  background: var(--bg-input);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 10px 14px;
  font-size: 0.86rem;
  outline: none;
  transition: border-color var(--transition);
}

#meihuaContent input:focus, #meihuaContent select:focus,
#ziweiContent input:focus, #ziweiContent select:focus,
#fengshuiContent input:focus, #fengshuiContent select:focus,
#facereadingContent input:focus, #facereadingContent select:focus {
  border-color: rgba(200, 162, 110, 0.35);
  box-shadow: 0 0 0 3px rgba(200, 162, 110, 0.06);
}

/* Scrollbar for any module-created scrollable area */
#meihuaContent ::-webkit-scrollbar,
#ziweiContent ::-webkit-scrollbar,
#fengshuiContent ::-webkit-scrollbar,
#facereadingContent ::-webkit-scrollbar,
#aiAdvisorContent ::-webkit-scrollbar {
  width: 4px;
}

#meihuaContent ::-webkit-scrollbar-thumb,
#ziweiContent ::-webkit-scrollbar-thumb,
#fengshuiContent ::-webkit-scrollbar-thumb,
#facereadingContent ::-webkit-scrollbar-thumb,
#aiAdvisorContent ::-webkit-scrollbar-thumb {
  background: var(--gold-dark);
  border-radius: 2px;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  #navbar, .nav-toggle, .tool-actions, .btn, .spread-selector, .mandala, .hero-bg, .mobile-nav, .splash { display: none !important; }
  body { background: #fff; color: #222; }
  body::before, body::after { display: none; }
  .section { display: block !important; page-break-inside: avoid; }
}

/* ============================================================
   v2 — Bagua bilingual brand & out-of-China shell
   ============================================================ */
.splash-subtitle {
  margin-top: 8px;
  font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: rgba(232, 212, 172, 0.65);
  text-transform: uppercase;
}

.nav-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav-logo-mark {
  font-size: 22px;
  color: var(--gold, #c8a26e);
  line-height: 1;
}
.nav-logo-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}
.nav-logo-en {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--gold, #c8a26e);
}
.nav-logo-zh {
  font-family: 'Noto Serif SC', serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(232, 212, 172, 0.55);
  text-transform: none;
}
[lang="zh-CN"] .nav-logo-en { font-size: 14px; opacity: 0.7; order: 2; letter-spacing: 0.18em; }
[lang="zh-CN"] .nav-logo-zh { font-size: 18px; color: var(--gold, #c8a26e); order: 1; letter-spacing: 0.18em; }

.nav-lang { margin-left: auto; }
.nav-lang-btn {
  background: transparent;
  border: 1px solid rgba(232, 212, 172, 0.25);
  color: rgba(232, 212, 172, 0.7);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .2s ease;
}
.nav-lang-btn:hover { border-color: var(--gold, #c8a26e); color: var(--gold, #c8a26e); }
.nav-lang-btn .lang-sep { opacity: 0.4; }
.nav-lang-btn .active { color: var(--gold, #c8a26e); font-weight: 600; }

.hero-eyebrow {
  font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(232, 212, 172, 0.6);
  margin-bottom: 14px;
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}
.btn-lg {
  padding: 14px 28px;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.btn-ghost {
  background: transparent;
  color: var(--gold, #c8a26e);
  border: 1px solid rgba(200, 162, 110, 0.35);
}
.btn-ghost:hover { background: rgba(200, 162, 110, 0.1); border-color: var(--gold, #c8a26e); }

@media (max-width: 768px) {
  .nav-logo-zh { display: none; }
  .nav-lang { margin-left: 0; }
}

.feature-card-new {
  position: relative;
}
.feature-card-new::after {
  content: 'NEW';
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #c8a26e, #ec9075);
  color: #0a0a1c;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.08em;
}

/* À la carte cards */
.alc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.alc-card {
  background: #fbf5e6;
  border: 1px solid var(--e-border);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}
.alc-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: #000;
  margin-bottom: 6px;
}
.alc-price {
  font-size: 22px;
  color: var(--e-red);
  font-weight: 700;
  margin-bottom: 12px;
}
.alc-foot {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--e-muted);
  font-style: italic;
}
.pricing-badge--save {
  background: linear-gradient(135deg, #ec9075, #c8a26e) !important;
}
.pricing-legal {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--e-muted);
  line-height: 1.7;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-legal a { color: var(--e-red); }

/* Nav: scrollable on tight desktop */
@media (min-width: 769px) and (max-width: 1280px) {
  .nav-links {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; flex-shrink: 0; }
}

/* ================================================================
   HOME · EAST PANE — 朱砂红 + 古卷黄 + 毛笔体
   ================================================================ */
.home-east {
  position: relative;
  background: #f3e9d2;
  background-image:
    radial-gradient(ellipse at 10% 10%, rgba(192,57,43,.05), transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(192,57,43,.05), transparent 50%);
  color: #2a1810;
  font-family: 'Noto Serif SC', serif;
  min-height: calc(100vh - 60px);
  padding-top: 20px;
}
.home-east::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0; opacity: .4;
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(170,120,60,.06) 39px, rgba(170,120,60,.06) 40px);
}
.home-east .e-wrap {
  position: relative; z-index: 1;
  padding: 24px 20px 80px;
  max-width: 780px;
  margin: 0 auto;
}

/* top info bar */
.home-east .e-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
  background: #fbf5e6;
  border: 1px solid #d4c08a;
  padding: 14px;
  border-radius: 4px;
}
.home-east .e-cell { text-align: center; border-right: 1px dashed #c5b280; padding: 4px 0; }
.home-east .e-cell:last-child { border-right: none; }
.home-east .e-lbl { font-family: 'Noto Serif SC', serif; font-size: .7rem; color: #8a6a40; margin-bottom: 4px; letter-spacing: .15em; }
.home-east .e-val { font-family: 'Ma Shan Zheng', serif; font-size: 1.2rem; color: #c0392b; line-height: 1.1; }
.home-east .e-val small { font-family: 'Noto Serif SC', serif; font-size: .62rem; color: #8a6a40; display: block; margin-top: 4px; letter-spacing: .1em; }
@media (max-width: 520px) {
  .home-east .e-bar { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .home-east .e-cell:nth-child(2) { border-right: none; }
  .home-east .e-cell:nth-child(1), .home-east .e-cell:nth-child(2) { border-bottom: 1px dashed #c5b280; padding-bottom: 10px; }
}

/* hero */
.home-east .e-hero {
  position: relative;
  padding: 44px 24px 38px;
  background: #fbf5e6;
  border: 1px solid #d4c08a;
  margin-bottom: 24px;
  box-shadow: 0 2px 0 #d4c08a, 4px 6px 0 -2px #c0392b;
}
.home-east .e-hero::before {
  content: '';
  position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid #e5d4a0;
  pointer-events: none;
}
.home-east .e-hero-corner {
  position: absolute; width: 28px; height: 28px;
  border: 1px solid #c0392b; opacity: .5;
}
.home-east .e-hero-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.home-east .e-hero-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.home-east .e-hero-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.home-east .e-hero-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }

.home-east .e-crest { text-align: center; margin-bottom: 14px; position: relative; z-index: 2; }
.home-east .e-crest span {
  display: inline-block; padding: 4px 14px;
  background: #c0392b; color: #fbf5e6;
  font-family: 'Noto Serif SC', serif;
  font-size: .78rem; letter-spacing: .3em;
}

.home-east .e-title {
  font-family: 'Ma Shan Zheng', serif;
  text-align: center;
  font-size: clamp(2.8rem, 9vw, 4.4rem);
  line-height: 1;
  color: #2a1810;
  margin-bottom: 12px;
  letter-spacing: .1em;
  position: relative; z-index: 2;
}
.home-east .e-title .mid { color: #c0392b; }
.home-east .e-title-sm { font-size: clamp(2rem, 6vw, 2.6rem); }
.home-east .e-sub {
  text-align: center;
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem; color: #5a3e28;
  margin-bottom: 20px; letter-spacing: .08em;
  position: relative; z-index: 2;
}
.home-east .e-sub em { color: #c0392b; font-style: normal; font-weight: 600; }

.home-east .e-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 18px 0;
  position: relative; z-index: 2;
}
.home-east .e-divider::before, .home-east .e-divider::after {
  content: ''; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, #c5a560, transparent);
  max-width: 80px;
}
.home-east .e-divider span { font-family: 'Ma Shan Zheng', serif; color: #c0392b; font-size: 1.3rem; }

.home-east .e-hero-meta {
  display: flex; justify-content: center;
  gap: 20px; flex-wrap: wrap;
  font-family: 'Noto Serif SC', serif;
  font-size: .85rem; color: #8a6a40;
  position: relative; z-index: 2;
}
.home-east .e-hero-meta span { display: flex; align-items: center; gap: 4px; }
.home-east .e-hero-meta span::before { content: '·'; color: #c0392b; font-weight: 900; }

.home-east .e-cta {
  display: flex; gap: 10px;
  justify-content: center; margin-top: 24px;
  flex-wrap: wrap;
  position: relative; z-index: 2;
}

/* button */
.home-east .e-btn {
  font-family: 'Noto Serif SC', serif;
  font-weight: 500; font-size: .95rem;
  padding: 11px 22px; border-radius: 2px;
  cursor: pointer; border: none;
  letter-spacing: .08em; transition: .2s;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.home-east .e-btn-primary {
  background: linear-gradient(180deg, #c0392b, #9a2d22);
  color: #fbf5e6;
  box-shadow: 0 2px 0 #7a2218, inset 0 1px 0 rgba(255,255,255,.15);
}
.home-east .e-btn-primary:hover { transform: translateY(1px); box-shadow: 0 1px 0 #7a2218; }
.home-east .e-btn-ghost {
  background: #fbf5e6; color: #2a1810;
  border: 1px solid #c5a560;
}
.home-east .e-btn-ghost:hover { background: #f1e6c8; }

/* today card grid */
.home-east .e-today {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px; margin-bottom: 24px;
}
@media (max-width: 520px) { .home-east .e-today { grid-template-columns: 1fr; } }

.home-east .e-card {
  background: #fbf5e6;
  border: 1px solid #d4c08a;
  padding: 18px;
  position: relative; overflow: hidden;
}
.home-east .e-card-lbl {
  font-family: 'Noto Serif SC', serif;
  font-size: .7rem; color: #8a6a40;
  letter-spacing: .2em; margin-bottom: 10px;
  display: flex; justify-content: space-between;
}
.home-east .e-card-lbl .pill {
  background: #c0392b; color: #fbf5e6;
  padding: 2px 8px; font-size: .62rem;
  border-radius: 2px; letter-spacing: .1em;
}

.home-east .e-hex { display: flex; align-items: center; gap: 14px; }
.home-east .e-hex-sym {
  font-family: serif;
  width: 54px; text-align: center;
  display: flex; flex-direction: column; gap: 4px;
}
.home-east .e-hex-sym i { display: block; height: 6px; background: #2a1810; border-radius: 1px; }
.home-east .e-hex-sym i.yin { background: #2a1810; position: relative; }
.home-east .e-hex-sym i.yin::after {
  content: ''; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 8px; transform: translateX(-50%);
  background: #fbf5e6;
}
.home-east .e-hex-body h4 { font-family: 'Ma Shan Zheng', serif; font-size: 1.6rem; color: #2a1810; line-height: 1; margin-bottom: 4px; }
.home-east .e-hex-body p { font-family: 'Noto Serif SC', serif; font-size: .82rem; color: #5a3e28; line-height: 1.6; }

.home-east .e-score { display: flex; align-items: center; gap: 16px; }
.home-east .e-dial {
  width: 74px; height: 74px; border-radius: 50%;
  position: relative;
  background: conic-gradient(#c0392b 0 72%, #e5d4a0 72% 100%);
  display: grid; place-items: center; flex-shrink: 0;
}
.home-east .e-dial::before {
  content: ''; position: absolute; inset: 6px;
  border-radius: 50%; background: #fbf5e6;
}
.home-east .e-dial span {
  position: relative;
  font-family: 'Ma Shan Zheng', serif;
  color: #c0392b; font-size: 1.5rem;
}
.home-east .e-score-txt h4 { font-family: 'Noto Serif SC', serif; font-size: .92rem; margin-bottom: 6px; color: #2a1810; font-weight: 600; }
.home-east .e-score-txt p { font-family: 'Noto Serif SC', serif; font-size: .76rem; color: #5a3e28; line-height: 1.6; }
.home-east .e-score-txt .stamp { font-family: 'Ma Shan Zheng', serif; color: #c0392b; font-size: .92rem; margin-right: 4px; }

/* 宜 / 忌 */
.home-east .e-yiji {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 24px;
}
.home-east .e-yiji .e-card { padding: 14px 16px; }
.home-east .e-yiji .e-y-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.home-east .e-yiji .e-y-head .sq {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-family: 'Ma Shan Zheng', serif;
  font-size: 1rem; color: #fbf5e6; line-height: 1;
}
.home-east .e-yiji .yi .sq { background: #2a6e4a; }
.home-east .e-yiji .ji .sq { background: #2a1810; }
.home-east .e-yiji .e-y-head b { font-family: 'Noto Serif SC', serif; font-size: .8rem; color: #5a3e28; letter-spacing: .15em; font-weight: 500; }
.home-east .e-yiji .e-y-list { display: flex; flex-wrap: wrap; gap: 5px; }
.home-east .e-yiji .e-y-list span {
  font-family: 'Noto Serif SC', serif;
  font-size: .8rem; padding: 3px 9px;
  background: #f1e6c8; color: #2a1810; border-radius: 2px;
}
.home-east .e-yiji .ji .e-y-list span { background: #efe0c5; color: #5a3e28; }

/* 打卡 */
.home-east .e-signin {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  background: #fbf5e6;
  border: 1px solid #d4c08a;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.home-east .e-signin-flame {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-family: 'Ma Shan Zheng', serif;
  font-size: 1.8rem; color: #e4771f;
  background: radial-gradient(circle, #fff4d8, transparent 70%);
  border-radius: 50%;
}
.home-east .e-signin-txt { line-height: 1.3; }
.home-east .e-signin-txt b { font-family: 'Ma Shan Zheng', serif; color: #c0392b; font-size: 1.15rem; margin-right: 6px; }
.home-east .e-signin-txt span { font-family: 'Noto Serif SC', serif; font-size: .78rem; color: #5a3e28; }
.home-east .e-signin .e-btn { font-size: .85rem; padding: 8px 16px; }

/* AI 大师 */
.home-east .e-ai {
  display: block;
  background: linear-gradient(135deg, #2a1810, #3a2018);
  color: #f3e9d2;
  padding: 22px 24px;
  border: 1px solid #c5a560;
  position: relative;
  margin-bottom: 36px;
  overflow: hidden;
  text-decoration: none;
}
.home-east .e-ai::before {
  content: '☯';
  position: absolute; right: -30px; bottom: -40px;
  font-size: 180px;
  color: rgba(212,180,106,.08);
}
.home-east .e-ai-tag {
  font-family: 'Ma Shan Zheng', serif;
  color: #d4b46a;
  font-size: 1rem; letter-spacing: .2em;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
  position: relative; z-index: 2;
}
.home-east .e-ai-tag::before { content: ''; width: 18px; height: 1px; background: #d4b46a; }
.home-east .e-ai h3 { font-family: 'Ma Shan Zheng', serif; font-size: 1.6rem; margin-bottom: 6px; color: #f3e9d2; letter-spacing: .08em; position: relative; z-index: 2; }
.home-east .e-ai p {
  font-family: 'Noto Serif SC', serif;
  font-size: .86rem;
  color: rgba(243,233,210,.78);
  line-height: 1.7;
  margin-bottom: 14px;
  position: relative; z-index: 2;
}
.home-east .e-ai .e-btn-primary {
  background: linear-gradient(180deg, #d4b46a, #a8843a);
  color: #2a1810;
  box-shadow: 0 2px 0 #7a5a20;
}

/* section head */
.home-east .e-sec-head { text-align: center; margin: 40px 0 20px; position: relative; }
.home-east .e-sec-head h2 {
  font-family: 'Ma Shan Zheng', serif;
  font-size: 2.1rem; color: #2a1810;
  display: inline-block; padding: 0 24px;
  background: #f3e9d2; position: relative; z-index: 1;
  letter-spacing: .1em;
}
.home-east .e-sec-head::before {
  content: ''; position: absolute;
  left: 20%; right: 20%; top: 50%;
  height: 1px; background: #c5a560;
}
.home-east .e-sec-head .sub {
  font-family: 'Noto Serif SC', serif;
  font-size: .82rem; color: #8a6a40;
  margin-top: 6px; letter-spacing: .2em;
}

/* module grid */
.home-east .e-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 16px;
}
@media (max-width: 520px) { .home-east .e-grid { grid-template-columns: repeat(2, 1fr); } }

.home-east .e-mod {
  background: #fbf5e6;
  border: 1px solid #d4c08a;
  padding: 16px 12px 14px;
  text-align: center;
  position: relative;
  cursor: pointer; transition: .2s;
  text-decoration: none; color: inherit;
  overflow: hidden;
  display: block;
}
.home-east .e-mod:hover { transform: translateY(-2px); box-shadow: 0 4px 0 -1px #c5a560; }
.home-east .e-mod::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c0392b, #d4b46a);
}
.home-east .e-mod-icon {
  width: 48px; height: 48px;
  margin: 4px auto 8px;
  border-radius: 50%;
  background: #f3e9d2; border: 1px solid #c5a560;
  display: grid; place-items: center;
  font-family: 'Ma Shan Zheng', serif;
  font-size: 1.6rem; color: #c0392b;
}
.home-east .e-mod-tt { font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: .9rem; color: #2a1810; margin-bottom: 2px; }
.home-east .e-mod-sub { font-family: 'Noto Serif SC', serif; font-size: .72rem; color: #8a6a40; letter-spacing: .08em; }
.home-east .e-mod-badge {
  position: absolute; top: 6px; right: 6px;
  background: #c0392b; color: #fbf5e6;
  font-family: 'Noto Serif SC', serif;
  font-size: .62rem; padding: 1px 6px;
  border-radius: 2px; letter-spacing: .1em;
}
.home-east .e-mod-badge.hot { background: linear-gradient(135deg, #c0392b, #e4771f); }
.home-east .e-mod-badge.new { background: #2a6e4a; }

/* quote */
.home-east .e-quote {
  margin: 30px 0;
  padding: 26px 22px;
  background: #fbf5e6;
  border: 1px dashed #c5a560;
  text-align: center; position: relative;
}
.home-east .e-quote .g { font-family: 'Ma Shan Zheng', serif; font-size: 1.9rem; color: #c0392b; margin-bottom: 10px; }
.home-east .e-quote q {
  display: block;
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem; line-height: 1.9;
  color: #2a1810; quotes: none;
}
.home-east .e-quote q::before, .home-east .e-quote q::after { content: ''; }
.home-east .e-quote cite {
  display: block;
  font-family: 'Noto Serif SC', serif;
  font-size: .78rem; color: #8a6a40;
  margin-top: 10px; font-style: normal;
  letter-spacing: .15em;
}

/* finale + seal */
.home-east .e-finale { text-align: center; padding-bottom: 80px; margin-top: 36px; }
.home-east .e-seal {
  position: absolute; right: 16px; bottom: 16px;
  width: 56px; height: 56px;
  background: #c0392b;
  display: grid; place-items: center;
  transform: rotate(-8deg);
  font-family: 'Ma Shan Zheng', serif;
  color: #fbf5e6;
  font-size: .82rem; line-height: 1;
  text-align: center; letter-spacing: .1em;
  border: 2px solid #9a2d22;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(192,57,43,.4);
  z-index: 3;
}

/* ================================================================
   GLOBAL EAST SKIN — applies to every section (except landing.html)
   paper #f3e9d2 · card #fbf5e6 · ink #2a1810 · red #c0392b · gold #d4b46a
   ================================================================ */

/* ---- palette tokens ---- */
:root {
  --e-paper: #f3e9d2;
  --e-card: #fbf5e6;
  --e-card-2: #f1e6c8;
  --e-ink: #000000;
  --e-ink-2: #1a1a1a;
  --e-muted: #3a3a3a;
  --e-red: #c0392b;
  --e-red-dk: #9a2d22;
  --e-gold: #d4b46a;
  --e-gold-dk: #c5a560;
  --e-border: #d4c08a;
  /* redefine legacy dark-theme tokens so stale rules render dark on cream */
  --text-primary: #000 !important;
  --text-secondary: #1a1a1a !important;
  --text-muted: #3a3a3a !important;
  --text-heading: #000 !important;
  --gold: #c0392b !important;
  --gold-light: #9a2d22 !important;
  --gold-dark: #9a2d22 !important;
  --ai-cyan: #c0392b !important;
  --ai-cyan-glow: rgba(192,57,43,.25) !important;
}

/* ---- body + section base ---- */
html, body {
  background: var(--e-paper) !important;
  color: var(--e-ink) !important;
}
body {
  font-family: 'Noto Serif SC', serif !important;
  background-image:
    radial-gradient(ellipse at 10% 10%, rgba(192,57,43,.04), transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(192,57,43,.04), transparent 50%) !important;
  cursor: default;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; opacity: .35;
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(170,120,60,.05) 39px, rgba(170,120,60,.05) 40px);
}

.section { background: transparent; color: var(--e-ink); }
.section-container {
  padding: calc(var(--nav-height) + 28px) 24px 80px;
  max-width: 860px;
}

/* ---- section header / intro ---- */
.section-header { margin-bottom: 40px; }
.section-header::before {
  content: '☯';
  color: var(--e-red) !important;
  font-size: 1rem !important;
  opacity: .7 !important;
  letter-spacing: 0 !important;
  margin-bottom: 10px !important;
}
.section-header h2 {
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-ink) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  letter-spacing: .1em !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 6vw, 3rem) !important;
}
.section-intro {
  color: var(--e-ink-2) !important;
  font-family: 'Noto Serif SC', serif !important;
  font-size: .98rem;
  line-height: 1.9;
}

/* ---- subsection ---- */
.subsection h3 {
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-red) !important;
  letter-spacing: .12em;
  border-bottom: 1px dashed var(--e-gold-dk) !important;
  font-weight: 400;
  font-size: 1.5rem;
}
.subsection h3::before {
  background: var(--e-red) !important;
  box-shadow: none !important;
}

/* ---- cards ---- */
.tool-card, .result-area, .theory-card,
.bazi-pillars > *, .bazi-elements,
.trigram-card, .trigram-grid > *,
.hexagram-display, .hexagram-chart > *,
.tarot-card-front, .tarot-card-back,
.learn-block {
  background: var(--e-card) !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  backdrop-filter: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.tool-card { box-shadow: 0 2px 0 var(--e-border) !important; }

.theory-card::after {
  background: linear-gradient(90deg, transparent 10%, var(--e-red) 50%, transparent 90%) !important;
}
.theory-card:hover {
  border-color: var(--e-red) !important;
  box-shadow: 0 4px 0 -1px var(--e-gold-dk) !important;
}
.theory-card h4 {
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-red) !important;
  letter-spacing: .08em;
}
.theory-card p { color: var(--e-ink-2) !important; }

.bazi-pillars > * {
  background: var(--e-card) !important;
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-red) !important;
  border-radius: 2px !important;
  font-size: 1.2rem;
}
.bazi-elements { color: var(--e-ink-2) !important; background: var(--e-card) !important; }
.bazi-analysis { color: var(--e-ink-2) !important; }

.trigram-grid > *:hover,
.trigram-card:hover {
  border-color: var(--e-red) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 -1px var(--e-gold-dk) !important;
}
.trigram-symbol { color: var(--e-red) !important; }
.trigram-name { font-family: 'Ma Shan Zheng', serif !important; color: var(--e-ink) !important; }
.trigram-nature, .trigram-attr { color: var(--e-muted) !important; }
.trigram-attr span { color: var(--e-ink-2) !important; }

.hexagram-symbol { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
.hexagram-info { color: var(--e-ink-2) !important; }
.hexagram-info h4 {
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-red) !important;
  letter-spacing: .1em;
  font-weight: 400;
}

.tarot-card-back {
  background: linear-gradient(145deg, #fbf5e6, #f1e6c8) !important;
  border-color: var(--e-border) !important;
}
.tarot-card-back::before { color: var(--e-red) !important; opacity: .7 !important; }
.tarot-card-front { background: var(--e-card) !important; border-color: var(--e-red) !important; color: var(--e-ink) !important; }
.tarot-card-front h4 { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }

.learn-text { color: var(--e-ink-2) !important; font-family: 'Noto Serif SC', serif !important; }
.learn-block { border-left: 3px solid var(--e-red) !important; }
.learn-block::before { display: none !important; }
.learn-block h3 {
  border-bottom-color: var(--e-gold-dk) !important;
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-red) !important;
}

/* ---- forms ---- */
input[type="text"], input[type="number"], input[type="date"], input[type="time"],
input[type="email"], input[type="password"], input[type="search"],
textarea, select {
  background: var(--e-card) !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 2px !important;
  font-family: 'Noto Serif SC', serif !important;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus,
input[type="time"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="search"]:focus, textarea:focus, select:focus {
  border-color: var(--e-red) !important;
  box-shadow: 0 0 0 2px rgba(192,57,43,.15) !important;
  outline: none;
}
input[type="date"] { color-scheme: light !important; }
label { color: var(--e-ink-2) !important; font-family: 'Noto Serif SC', serif; }
.status-text { color: var(--e-muted) !important; }

/* ---- buttons ---- */
.btn {
  font-family: 'Noto Serif SC', serif !important;
  border-radius: 2px !important;
  letter-spacing: .08em;
  font-weight: 500 !important;
}
.btn-primary {
  background: linear-gradient(180deg, var(--e-red), var(--e-red-dk)) !important;
  color: #fbf5e6 !important;
  box-shadow: 0 2px 0 #7a2218, inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.btn-primary:hover {
  filter: none !important;
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 #7a2218 !important;
}
.btn-secondary, .btn-ghost {
  background: var(--e-card) !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-gold-dk) !important;
}
.btn-secondary:hover, .btn-ghost:hover {
  background: var(--e-card-2) !important;
  border-color: var(--e-red) !important;
}

/* ---- navbar ---- */
.navbar, nav.navbar {
  background: rgba(251,245,230,.92) !important;
  border-bottom: 1px solid var(--e-border) !important;
  backdrop-filter: blur(8px);
}
.nav-logo, .nav-logo-en, .nav-logo-zh, .nav-logo-mark {
  color: var(--e-red) !important;
}
.nav-logo-zh { color: var(--e-muted) !important; }
.nav-logo::after {
  background: linear-gradient(180deg, transparent, var(--e-gold-dk), transparent) !important;
}
.nav-link {
  color: var(--e-ink-2) !important;
  font-family: 'Noto Serif SC', serif !important;
}
.nav-link:hover, .nav-group:hover .nav-group-btn, .nav-link.active {
  color: var(--e-red) !important;
  background: rgba(192,57,43,.08) !important;
}
.nav-group-btn { color: inherit; }
.nav-caret { color: var(--e-muted); }
.nav-pill-new {
  background: linear-gradient(135deg, var(--e-red), var(--e-gold)) !important;
  color: #fbf5e6 !important;
}
.nav-dropdown {
  background: var(--e-card) !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 4px !important;
}
.nav-dd-section {
  color: var(--e-muted) !important;
  font-family: 'Noto Serif SC', serif;
  letter-spacing: .15em;
}
.nav-lang-btn { color: var(--e-ink-2) !important; border-color: var(--e-border) !important; }
.nav-lang-btn .active { color: var(--e-red) !important; }
.nav-toggle span { background: var(--e-ink) !important; }

/* ---- splash / onboarding ---- */
.splash { background: var(--e-paper) !important; }
.splash-symbol { color: var(--e-red) !important; }
.splash-title { color: var(--e-ink) !important; font-family: 'Ma Shan Zheng', serif !important; }
.splash-subtitle { color: var(--e-muted) !important; }
.splash-bar { background: rgba(192,57,43,.15) !important; }
.splash-bar-fill { background: linear-gradient(90deg, var(--e-red), var(--e-gold)) !important; }

.onboarding-card {
  background: var(--e-card) !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
}
.onboarding-icon { color: var(--e-red) !important; }

/* ---- mobile nav ---- */
.mobile-nav {
  background: rgba(251,245,230,.96) !important;
  border-top: 1px solid var(--e-border) !important;
}
.mobile-nav-item { color: var(--e-ink-2) !important; }
.mobile-nav-item.active, .mobile-nav-item:hover { color: var(--e-red) !important; }
.mobile-nav-icon { color: inherit; }

/* ---- misc ---- */
.pricing-legal a { color: var(--e-red) !important; }
code, pre { background: var(--e-card-2) !important; color: var(--e-ink) !important; }
a { color: var(--e-red); }

/* text colors fall-through for common classes that used dark palette */
.feature-card, .feature-card h3, .feature-card p { color: var(--e-ink) !important; }
.feature-card {
  background: var(--e-card) !important;
  border: 1px solid var(--e-border) !important;
}
.feature-card:hover { border-color: var(--e-red) !important; }
.feature-section-title { color: var(--e-ink) !important; font-family: 'Ma Shan Zheng', serif; }
.feature-section-sub { color: var(--e-muted) !important; }

/* AI advisor chat & key panel — keep paper palette */
#aiChatMessages, .ai-chat-box, .ai-key-panel {
  background: var(--e-card) !important;
  border-color: var(--e-border) !important;
  color: var(--e-ink) !important;
}

/* any inherited white text in result blobs */
.result-area h3, .result-area h4 {
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-red) !important;
  letter-spacing: .08em;
}

/* ================================================================
   EAST SKIN — part 2: the real #navbar + JS-injected cards
   ================================================================ */

/* ---- actual navbar id ---- */
#navbar {
  background: rgba(251, 245, 230, 0.85) !important;
  border-bottom: 1px solid var(--e-border) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
}
#navbar.scrolled {
  background: rgba(251, 245, 230, 0.96) !important;
  border-bottom-color: var(--e-border) !important;
  box-shadow: 0 1px 24px rgba(170, 120, 60, 0.12) !important;
}

/* AI-glow nav link → red */
.nav-link.ai-glow {
  color: var(--e-red) !important;
  text-shadow: 0 0 8px rgba(192, 57, 43, 0.25) !important;
}
.nav-link.ai-glow:hover { background: rgba(192, 57, 43, 0.08) !important; }
.nav-link.ai-glow.active::after {
  background: var(--e-red) !important;
  box-shadow: 0 0 8px rgba(192, 57, 43, 0.4) !important;
}

/* Plus / CTA nav link → red */
.nav-link-cta {
  color: var(--e-red) !important;
  background: rgba(192, 57, 43, 0.08) !important;
  border: 1px solid rgba(192, 57, 43, 0.3) !important;
}

/* Fix: .nav-links has overflow-y:hidden which clips dropdowns — unclip it */
.nav-links {
  overflow: visible !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
/* dropdown must show when .open — re-assert */
.nav-group:hover > .nav-dropdown,
.nav-group.open > .nav-dropdown,
.nav-group:focus-within > .nav-dropdown {
  display: block !important;
}
.nav-dropdown .nav-link {
  color: var(--e-ink-2) !important;
}
.nav-dropdown .nav-link:hover {
  background: rgba(192, 57, 43, 0.1) !important;
  color: var(--e-red) !important;
}

/* ---- gamification module (.gm-*) ---- */
.gm-stat,
.gm-badge,
.gm-mini-card,
.gm-pull-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 4px !important;
}
.gm-pull-card {
  background: linear-gradient(135deg, rgba(192,57,43,0.08), rgba(212,180,106,0.12)) !important;
  border-color: var(--e-gold-dk) !important;
}
.gm-badge.have {
  background: rgba(192, 57, 43, 0.08) !important;
  border-color: var(--e-red) !important;
}
.gm-stat-n,
.gm-pull-card h4,
.gm-pull-label,
.gm-mini-card h5 {
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-red) !important;
}
.gm-stat-l,
.gm-pull-vibe,
.gm-mini-card p {
  color: var(--e-ink) !important;
}
.gm-badge {
  opacity: 1 !important;
}
.gm-badge-n {
  color: var(--e-ink) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.gm-badge-i { color: var(--e-ink) !important; }
.gm-pull-label { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
/* xc-intro header used by daily module */
.xc-intro h3, .xc-intro h2, .xc-section > .xc-intro h3 {
  color: var(--e-ink) !important;
  font-family: 'Ma Shan Zheng', serif !important;
  opacity: 1 !important;
}
/* xc-btn used by 查看 / 邀请朋友 etc */
.xc-btn {
  color: var(--e-ink) !important;
  background: #fbf5e6 !important;
  border: 1px solid var(--e-gold-dk) !important;
  font-weight: 600 !important;
}
.xc-btn:hover { background: rgba(192,57,43,.08) !important; color: var(--e-red) !important; border-color: var(--e-red) !important; }
.xc-btn-primary {
  background: linear-gradient(180deg, var(--e-red), var(--e-red-dk)) !important;
  color: #fbf5e6 !important;
  border-color: var(--e-red-dk) !important;
}
.xc-btn-primary:hover { color: #fbf5e6 !important; }
.bg-hud-pill {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-red) !important;
}
.bg-hud-pill:hover { background: var(--e-card-2) !important; }

/* ---- synastry (.sn-*) ---- */
.sn-card, .sn-block, .sn-person, .sn-out, .sn-summary, .sn-tip, .sn-elem, .sn-rel {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 4px !important;
}
.sn-headline, .sn-score-row, .sn-score {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}

/* ---- tour (.tr-*) ---- */
.tr-pool, .tr-selected, .tr-route, .tr-slot, .tr-chip, .tr-tag, .tr-why {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 3px !important;
}
.tr-selected-empty, .tr-pool-empty { color: var(--e-muted) !important; }
.tr-name { color: var(--e-ink) !important; }
.tr-count { color: var(--e-red) !important; }

/* ---- fun (.fn-*) ---- */
.fn-pick, .fn-picks, .fn-dir {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 4px !important;
}
.fn-pick-h, .fn-pick-t {
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-red) !important;
}
.fn-pick-w { color: var(--e-ink-2) !important; }

/* ---- food (.fd-*) ---- */
.fd-list { background: #fbf5e6 !important; border: 1px solid var(--e-border) !important; color: var(--e-ink) !important; }
.fd-list li { color: var(--e-ink) !important; border-bottom: 1px dashed var(--e-border) !important; }
.fd-list li b { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
.fd-list li small { color: var(--e-ink) !important; font-size: 13px !important; }
.fd-list li * { color: var(--e-ink) !important; }
.fd-list li b, .fd-list li strong { color: var(--e-red) !important; }
.fd-dot { background: var(--e-red) !important; }

/* ---- outfit (.ot-*) ---- */
.ot-mode-tabs, .ot-outfit-card, .ot-palette, .ot-items-row, .ot-form-actions, .ot-occasion {
  background: transparent !important;
  color: var(--e-ink) !important;
}
.ot-mode-tab {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink-2) !important;
  border-radius: 2px !important;
}
.ot-mode-tab.active {
  background: var(--e-red) !important;
  color: #fbf5e6 !important;
  border-color: var(--e-red) !important;
}
.ot-item-chip, .ot-swatch {
  background: var(--e-card-2) !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-border) !important;
}

/* ---- deskfengshui (.dfs-*) ---- */
.dfs-canvas-wrap, .dfs-legend, .dfs-tools-row {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 4px !important;
}

/* ---- waitlist (.wl-*) ---- */
.wl-form, .wl-perks, .wl-done, .wl-hint {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 4px !important;
}
.wl-hint { color: var(--e-muted) !important; background: transparent !important; border: 0 !important; }

/* ---- paywall (.bg-paywall-*) ---- */
.bg-paywall { background: rgba(251, 245, 230, 0.96) !important; }
.bg-paywall-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 6px !important;
}
.bg-paywall-mark, .bg-paywall-badge {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}
.bg-paywall-cta, .bg-paywall-cta-yearly {
  background: linear-gradient(180deg, var(--e-red), var(--e-red-dk)) !important;
  color: #fbf5e6 !important;
  border: none !important;
}
.bg-paywall-sub, .bg-paywall-perks, .bg-paywall-row, .bg-paywall-legal {
  color: var(--e-ink-2) !important;
}
.bg-paywall-link { color: var(--e-red) !important; }
.bg-paywall-cancel, .bg-paywall-x {
  background: transparent !important;
  color: var(--e-ink-2) !important;
  border: 1px solid var(--e-border) !important;
}

/* ---- shared xuancase-core (.xc-*) ---- */
.xc-card, .xc-canvas-card, .xc-intro, .xc-list, .xc-score-label {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 4px !important;
}
.xc-bullet, .xc-chip {
  background: var(--e-card-2) !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-border) !important;
}
.xc-btn, .xc-btn-primary, .xc-btn-ghost {
  font-family: 'Noto Serif SC', serif !important;
  border-radius: 2px !important;
  letter-spacing: .08em !important;
}
.xc-btn-primary {
  background: linear-gradient(180deg, var(--e-red), var(--e-red-dk)) !important;
  color: #fbf5e6 !important;
  box-shadow: 0 2px 0 #7a2218, inset 0 1px 0 rgba(255,255,255,.15) !important;
  border: none !important;
}
.xc-btn-ghost {
  background: #fbf5e6 !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-gold-dk) !important;
}
.xc-input {
  background: #fbf5e6 !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 2px !important;
}
.xc-score-bar { background: var(--e-card-2) !important; }
.xc-score-bar-fill { background: linear-gradient(90deg, var(--e-red), var(--e-gold)) !important; }
.xc-score-n, .xc-score-num {
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-red) !important;
}
.xc-image-preview {
  background: var(--e-card-2) !important;
  border: 1px dashed var(--e-gold-dk) !important;
}
.xc-chip.elem-木 { background: rgba(42,110,74,0.12) !important; color: #2a6e4a !important; border-color: rgba(42,110,74,0.3) !important; }
.xc-chip.elem-火 { background: rgba(192,57,43,0.12) !important; color: var(--e-red) !important; border-color: rgba(192,57,43,0.3) !important; }
.xc-chip.elem-土 { background: rgba(212,180,106,0.18) !important; color: #8a6a20 !important; border-color: var(--e-gold-dk) !important; }
.xc-chip.elem-金 { background: rgba(200,170,110,0.18) !important; color: #7a5a20 !important; border-color: #a88a40 !important; }
.xc-chip.elem-水 { background: rgba(80,110,160,0.14) !important; color: #3a5a80 !important; border-color: rgba(80,110,160,0.3) !important; }

/* splash/onboarding text overrides in case dynamic theme lingers */
.splash-title, .splash-subtitle { font-family: 'Ma Shan Zheng', serif !important; }

/* theme switcher on corner — hide since we're fixed on East */
.theme-switcher { display: none !important; }

/* ================================================================
   EAST SKIN — part 3: AI advisor page (ai-advisor section)
   ================================================================ */

/* conversation history bar */
.ai-history-bar {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 4px !important;
}
.ai-hb-header { border-bottom: 1px solid var(--e-border) !important; }
.ai-hb-title {
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-red) !important;
  letter-spacing: .08em;
}
.ai-hb-new {
  background: transparent !important;
  color: var(--e-red) !important;
  border: 1px solid var(--e-red) !important;
  border-radius: 2px !important;
  font-family: 'Noto Serif SC', serif !important;
}
.ai-hb-new:hover { background: rgba(192,57,43,.08) !important; }
.ai-hb-item {
  background: var(--e-card) !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 3px !important;
}
.ai-hb-item.active {
  background: rgba(192,57,43,.08) !important;
  border-color: var(--e-red) !important;
}
.ai-hb-item-title { color: var(--e-ink) !important; }
.ai-hb-item-meta { color: var(--e-muted) !important; }
.ai-hb-del { color: var(--e-muted) !important; }
.ai-hb-del:hover { color: var(--e-red) !important; }

/* memory stats */
.ai-memory-stats {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink-2) !important;
}
.ai-mem-icon, .ai-mem-label { color: var(--e-ink) !important; }
.ai-mem-badge {
  background: var(--e-card-2) !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-border) !important;
}
.ai-mem-clear { color: var(--e-red) !important; border: 1px solid var(--e-border) !important; background: transparent !important; }

/* chat container */
.ai-chat-container {
  background: var(--e-card) !important;
  border: 1px solid var(--e-border) !important;
  height: calc(100vh - 180px) !important;
  min-height: 600px !important;
  max-height: none !important;
  color: var(--e-ink) !important;
  border-radius: 6px !important;
  overflow: hidden;
}

/* chat header (玄学大师 AI) */
.ai-chat-header {
  background: linear-gradient(135deg, #2a1810, #3a2018) !important;
  color: #f3e9d2 !important;
  border-bottom: 1px solid var(--e-gold-dk) !important;
}
.ai-chat-header * { color: #f3e9d2 !important; }
.ai-chat-avatar {
  background: radial-gradient(circle, #d4b46a, #a8843a) !important;
  border: 2px solid var(--e-red) !important;
  color: #fbf5e6 !important;
}
.ai-chat-title-area h3 {
  font-family: 'Ma Shan Zheng', serif !important;
  color: #d4b46a !important;
  letter-spacing: .08em;
}
.ai-chat-title-area p { color: rgba(243, 233, 210, .7) !important; }

/* assistant message bubble — was dark purple gradient, force cream */
.ai-msg.assistant .ai-msg-bubble,
.ai-msg.user .ai-msg-bubble {
  background: #fbf5e6 !important;
  background-image: none !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
}
.ai-msg.user .ai-msg-bubble {
  background: linear-gradient(135deg, rgba(212,180,106,.18), rgba(212,180,106,.1)) !important;
  background-image: linear-gradient(135deg, rgba(212,180,106,.18), rgba(212,180,106,.1)) !important;
  border: 1px solid var(--e-gold-dk) !important;
}
.ai-typing-dots {
  background: #fbf5e6 !important;
  background-image: none !important;
  border: 1px solid var(--e-border) !important;
}
.ai-typing-dot { background: var(--e-red) !important; opacity: .6 !important; }
.ai-clear-btn {
  background: transparent !important;
  color: #d4b46a !important;
  border: 1px solid #d4b46a !important;
  border-radius: 2px !important;
}
.ai-clear-btn:hover { background: rgba(212,180,106,.15) !important; }

/* chat messages */
.ai-chat-messages {
  background: #fbf5e6 !important;
  color: var(--e-ink) !important;
}
.ai-chat-messages * { color: var(--e-ink); }

.ai-welcome { color: var(--e-ink-2) !important; }
.ai-welcome-orb { color: var(--e-red) !important; }

/* message bubbles — HIGH contrast */
.ai-msg-avatar {
  background: linear-gradient(135deg, var(--e-red), var(--e-red-dk)) !important;
  color: #fbf5e6 !important;
  border: none !important;
}
.ai-msg.user .ai-msg-avatar {
  background: linear-gradient(135deg, var(--e-gold), #a8843a) !important;
  color: #2a1810 !important;
}
.ai-msg-bubble {
  background: #ffffff !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 0 var(--e-border) !important;
}
.ai-msg.user .ai-msg-bubble {
  background: #f1e6c8 !important;
  border-color: var(--e-gold-dk) !important;
  color: var(--e-ink) !important;
}
.ai-msg-bubble, .ai-msg-bubble * {
  color: var(--e-ink) !important;
}
.ai-msg-bubble strong, .ai-msg-bubble b {
  color: var(--e-red) !important;
  font-weight: 700;
}
.ai-msg-bubble h1, .ai-msg-bubble h2, .ai-msg-bubble h3, .ai-msg-bubble h4 {
  font-family: 'Ma Shan Zheng', serif !important;
  color: var(--e-red) !important;
  letter-spacing: .06em;
}
.ai-msg-bubble em, .ai-msg-bubble i { color: var(--e-ink-2) !important; font-style: italic; }
.ai-msg-bubble code {
  background: var(--e-card-2) !important;
  color: var(--e-red) !important;
  padding: 1px 5px;
  border-radius: 2px;
}
.ai-msg-bubble a { color: var(--e-red) !important; text-decoration: underline; }
.ai-msg-bubble ul, .ai-msg-bubble ol { color: var(--e-ink) !important; }
.ai-msg-bubble li { color: var(--e-ink) !important; }
.ai-msg-bubble li::marker { color: var(--e-red) !important; }

/* ── AI markdown tables ─────────────────────────────────────── */
.ai-msg-bubble .ai-md-table,
.ai-msg-bubble table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 10px 0 !important;
  font-size: .88rem !important;
  background: #fbf5e6 !important;
  border: 1px solid var(--e-gold-dk) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.ai-msg-bubble .ai-md-table th,
.ai-msg-bubble table th {
  background: linear-gradient(135deg, rgba(192,57,43,.12), rgba(212,180,106,.18)) !important;
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
  border-bottom: 2px solid var(--e-red) !important;
  text-align: left !important;
  white-space: nowrap !important;
}
.ai-msg-bubble .ai-md-table td,
.ai-msg-bubble table td {
  padding: 7px 10px !important;
  border-top: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  vertical-align: top !important;
  line-height: 1.55 !important;
}
.ai-msg-bubble .ai-md-table tr:nth-child(even) td,
.ai-msg-bubble table tr:nth-child(even) td {
  background: rgba(212,180,106,.08) !important;
}
.ai-msg-bubble pre {
  background: #f1e6c8 !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  overflow-x: auto !important;
  margin: 8px 0 !important;
}
.ai-msg-bubble pre code {
  background: transparent !important;
  color: var(--e-ink) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .82rem !important;
  white-space: pre !important;
}

/* input area */
.ai-chat-input-area {
  background: #fbf5e6 !important;
  border-top: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
}
.ai-suggested-questions { background: transparent !important; }
.ai-suggestion {
  background: #fbf5e6 !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-border) !important;
  font-family: 'Noto Serif SC', serif !important;
  border-radius: 2px !important;
}
.ai-suggestion:hover {
  background: rgba(192,57,43,.08) !important;
  border-color: var(--e-red) !important;
  color: var(--e-red) !important;
}

.ai-input-row {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 4px !important;
}
.ai-chat-textarea {
  background: transparent !important;
  color: var(--e-ink) !important;
  font-family: 'Noto Serif SC', serif !important;
  border: none !important;
}
.ai-chat-textarea::placeholder { color: var(--e-muted) !important; }

.ai-upload-btn {
  background: transparent !important;
  color: var(--e-muted) !important;
  border: none !important;
}
.ai-upload-btn:hover { color: var(--e-red) !important; }

.ai-send-btn {
  background: linear-gradient(180deg, var(--e-red), var(--e-red-dk)) !important;
  color: #fbf5e6 !important;
  border: none !important;
  box-shadow: 0 2px 0 #7a2218 !important;
}
.ai-send-btn:hover { transform: translateY(1px); box-shadow: 0 1px 0 #7a2218 !important; }

.ai-image-preview {
  background: var(--e-card-2) !important;
  border: 1px dashed var(--e-gold-dk) !important;
}
.ai-preview-remove {
  background: var(--e-red) !important;
  color: #fbf5e6 !important;
  border: none !important;
}

/* quick cards row */
.ai-quick-cards { background: transparent !important; }
.ai-quick-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 4px !important;
}
.ai-quick-card:hover { border-color: var(--e-red) !important; background: rgba(192,57,43,.06) !important; }
.ai-quick-icon { color: var(--e-red) !important; }
.ai-quick-label { color: var(--e-ink) !important; font-family: 'Noto Serif SC', serif !important; }

/* key panel / status banner */
.ai-key-panel, .ai-context-bar {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  border-radius: 4px !important;
}
.ai-key-title { color: var(--e-red) !important; font-family: 'Noto Serif SC', serif; }
.ai-key-row, .ai-key-input-wrap { background: transparent !important; }
.ai-key-input {
  background: #ffffff !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 2px !important;
}
.ai-key-eye {
  background: transparent !important;
  color: var(--e-muted) !important;
  border: none !important;
}
.ai-key-save {
  background: linear-gradient(180deg, var(--e-red), var(--e-red-dk)) !important;
  color: #fbf5e6 !important;
  border: none !important;
  border-radius: 2px !important;
}
.ai-provider-tab {
  background: transparent !important;
  color: var(--e-ink-2) !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 2px !important;
}
.ai-provider-tab.active {
  background: var(--e-red) !important;
  color: #fbf5e6 !important;
  border-color: var(--e-red) !important;
}
.ai-key-status, .ai-key-privacy { color: var(--e-muted) !important; }
.ai-status-dot { background: #ccc !important; }
.ai-status-dot.connected { background: #2a6e4a !important; box-shadow: 0 0 6px rgba(42,110,74,.4) !important; }

/* AI hero card on home (if visible) */
.ai-hero-card {
  background: linear-gradient(135deg, #2a1810, #3a2018) !important;
  border: 1px solid var(--e-gold-dk) !important;
  color: #f3e9d2 !important;
}
.ai-hero-text h3 { color: #d4b46a !important; font-family: 'Ma Shan Zheng', serif !important; }
.ai-hero-text p { color: rgba(243,233,210,.75) !important; }
.ai-hero-arrow { color: #d4b46a !important; }
.ai-hero-icon { color: #d4b46a !important; }

/* hide any purple/cyan text-shadow glows sitewide */
.ai-glow, [class*="ai-"] {
  text-shadow: none !important;
}

/* ================================================================
   EAST SKIN — pricing + à la carte + engage bar
   ================================================================ */
.pricing-card,
.pricing-card--popular,
.pricing-card--premium {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
  box-shadow: 0 1px 0 var(--e-border) !important;
}
.pricing-card--popular {
  border-color: var(--e-red) !important;
  background: linear-gradient(180deg, rgba(192,57,43,.06), #fbf5e6 40%) !important;
}
.pricing-card--premium {
  border-color: var(--e-gold-dk) !important;
  background: linear-gradient(180deg, rgba(212,180,106,.1), #fbf5e6 40%) !important;
}
.pricing-card:hover { box-shadow: 0 6px 20px rgba(170,120,60,.15) !important; }

.pricing-badge {
  background: linear-gradient(135deg, var(--e-red), var(--e-red-dk)) !important;
  color: #fbf5e6 !important;
  box-shadow: 0 2px 8px rgba(192,57,43,.3) !important;
}
.pricing-badge--save {
  background: linear-gradient(135deg, var(--e-gold), var(--e-gold-dk)) !important;
  color: var(--e-ink) !important;
}

.pricing-tier {
  color: var(--e-ink) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}
.pricing-price { color: var(--e-red) !important; font-weight: 700 !important; }
.pricing-price span { color: var(--e-muted) !important; }
.pricing-desc { color: var(--e-ink-2) !important; }
.pricing-features li {
  color: var(--e-ink) !important;
  border-bottom: 1px solid var(--e-border) !important;
}
.pricing-features li::before { color: var(--e-red) !important; }
.pricing-legal { color: var(--e-ink-2) !important; }
.pricing-legal a { color: var(--e-red) !important; }

/* buttons inside pricing cards — ensure readable */
.pricing-btn {
  color: var(--e-ink) !important;
  background: #fbf5e6 !important;
  border: 1px solid var(--e-gold-dk) !important;
}
.pricing-card--popular .pricing-btn {
  background: linear-gradient(180deg, var(--e-red), var(--e-red-dk)) !important;
  color: #fbf5e6 !important;
  border-color: var(--e-red-dk) !important;
}
.pricing-card--premium .pricing-btn {
  background: linear-gradient(180deg, var(--e-gold), var(--e-gold-dk)) !important;
  color: var(--e-ink) !important;
  border-color: var(--e-gold-dk) !important;
}

/* À la carte cards */
.alc-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
}
.alc-name {
  color: var(--e-ink) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}
.alc-price { color: var(--e-red) !important; }
.alc-foot { color: var(--e-ink-2) !important; }
.alc-card button, .alc-card .btn {
  background: #fbf5e6 !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-gold-dk) !important;
}

/* engage bar & generic dark-card residuals */
.engage-bar {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
}
.engage-item, .engage-item * { color: var(--e-ink) !important; }

/* ================================================================
   EAST SKIN — sweep: all remaining dark-card classes
   ================================================================ */
/* I Ching / hexagram */
.hexagram-display, .hex-trigrams, .hex-judgment, .hex-meaning, .hex-desc,
.changed-hex, .hc-card, .hc-tab, .hex-detail-card {
  background: #fbf5e6 !important;
  border-color: var(--e-border) !important;
  color: var(--e-ink) !important;
}
.hc-card *, .hc-tab *, .hex-detail-card *, .hexagram-display *,
.hex-trigrams *, .hex-judgment *, .hex-meaning *, .hex-desc *, .changed-hex * {
  color: var(--e-ink) !important;
}
.hc-card-sym, .hc-card-name, .hc-tab.active, .hex-detail-symbol,
.hex-judgment h3, .hex-judgment h4, .changed-hex h5 {
  color: var(--e-red) !important;
}
.hc-card-num, .hc-card-trigrams, .hc-card-meaning, .hc-tab-name { color: var(--e-ink-2) !important; }
.hc-yang span, .hex-line .line-bar { background: var(--e-ink) !important; }
.hc-yin span { background: var(--e-ink) !important; }
.hex-detail-overlay { background: rgba(42, 24, 16, 0.55) !important; }
.hex-detail-close { color: var(--e-muted) !important; }
.hex-detail-close:hover { color: var(--e-red) !important; }

/* payment / crypto */
.pay-method, .pay-result {
  background: #fbf5e6 !important;
  border-color: var(--e-border) !important;
  color: var(--e-ink) !important;
}
.pay-method:hover { background: rgba(192,57,43,.06) !important; border-color: var(--e-red) !important; }
.pay-method-name { color: var(--e-ink) !important; }
.pay-method-tag { color: var(--e-ink-2) !important; background: rgba(212,180,106,.15) !important; }
.pay-result { color: var(--e-ink) !important; }
.pay-result .crypto-addr { background: var(--e-card-2) !important; color: var(--e-red) !important; }

/* rewards */
.reward-card {
  background: #fbf5e6 !important;
  border-color: var(--e-border) !important;
}
.reward-card *, .reward-name { color: var(--e-ink) !important; }
.reward-name { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
.reward-req { color: var(--e-muted) !important; }

/* glossary */
.glossary-item {
  background: #fbf5e6 !important;
  border-color: var(--e-border) !important;
  color: var(--e-ink) !important;
}
.glossary-item * { color: var(--e-ink) !important; }

/* generic: any lingering dark-card using glass border */
.tool-card, .theory-card, .learn-block, .result-area,
.subsection > div[class*="-card"], .subsection > div[class*="-block"] {
  background: #fbf5e6 !important;
  border-color: var(--e-border) !important;
  color: var(--e-ink) !important;
}

/* ================================================================
   EAST SKIN — global light-text sweep (audit remediation)
   ================================================================ */
/* hero / landing titles originally light-on-dark */
.hero-title, .hero-subtitle, .hero-desc { color: var(--e-ink) !important; }

/* form inputs */
.input-group input, .input-group select, .input-group textarea, .input-group label {
  color: var(--e-ink) !important;
}

/* feature-card-ai was cyan */
.feature-card-ai h3, .feature-card-ai h4 { color: var(--e-red) !important; }

/* zodiac */
.zodiac-display h3, .zodiac-display h4 { color: var(--e-ink) !important; font-family: 'Ma Shan Zheng', serif !important; }

/* trigram names */
.trigram-name { color: var(--e-ink) !important; }

/* hexagram detail */
.hd-info, .hd-judgment, .hd-judgment * { color: var(--e-ink) !important; }

/* article cards */
.article-card, .article-card * { color: var(--e-ink) !important; }
.article-card h3, .article-card h4 { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
.read-more, .read-more:hover { color: var(--e-red) !important; }

/* daily fortune widget */
.daily-fortune-name, .daily-fortune-inner, .daily-fortune-inner * { color: var(--e-ink) !important; }

/* footer */
#footer, #footer * { color: var(--e-ink) !important; }
.footer-logo { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
.footer-links h4, .footer-note h4 { color: var(--e-red) !important; }
.footer-links a { color: var(--e-ink-2) !important; }
.footer-links a:hover { color: var(--e-red) !important; }

/* any global <a> that was gold-on-dark */
a { color: var(--e-red); }
a:hover { color: var(--e-red-dk); }

/* generic heading fallback — ensure all h1..h6 inside content readable */
h1, h2, h3, h4, h5, h6 { color: var(--e-ink); }
.section-container h1, .section-container h2, .section-container h3,
.section-container h4, .section-container h5, .section-container h6 {
  color: var(--e-ink) !important;
}

/* text-heading / text-primary / text-secondary / text-muted elements */
[style*="color:var(--text-heading)"],
[style*="color:var(--text-primary)"],
[style*="color:var(--text-secondary)"],
[style*="color:var(--ai-cyan)"],
[style*="color:var(--gold"] { color: var(--e-ink) !important; }

/* mobile nav cyan */
.mobile-nav-ai .mobile-nav-icon { color: var(--e-red) !important; }

/* hardcoded element color in wuxing */
[data-element="earth"] .wuxing-char { color: var(--e-gold-dk) !important; }

/* pricing badge "最受欢迎" */
.pricing-badge { color: #fbf5e6 !important; font-weight: 700 !important; }

/* ================================================================
   EAST SKIN — all grid children + module cards forced cream
   ================================================================ */
.zodiac-grid > *,
.tarot-grid > *,
.number-grid > *,
.trigram-grid > *,
.hexagram-chart > *,
.feature-grid > *,
.zodiac-card, .zg-card,
.compat-result, .cr-card,
.nl-card, .num-card,
.mh-result-card,
.tarot-card-front, .tarot-card-back,
.reward-card, .glossary-item {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: var(--e-ink) !important;
}
.zodiac-grid > *:hover,
.tarot-grid > *:hover,
.number-grid > *:hover,
.zodiac-card:hover, .zg-card:hover {
  border-color: var(--e-red) !important;
  box-shadow: 0 4px 16px rgba(170,120,60,.15) !important;
}
.tarot-card-back { background: linear-gradient(145deg, #fbf5e6, #f1e6c8) !important; border-color: var(--e-gold-dk) !important; }
.tarot-card-back::before { color: var(--e-red) !important; opacity: .6 !important; }
.tarot-card-front { background: #fbf5e6 !important; color: var(--e-ink) !important; border-color: var(--e-gold-dk) !important; }
.tarot-card-front h4 { color: var(--e-red) !important; }
.tarot-card-front * { color: var(--e-ink) !important; }

.spread-btn {
  background: #fbf5e6 !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-border) !important;
}
.spread-btn:hover, .spread-btn.active {
  background: rgba(192,57,43,.08) !important;
  color: var(--e-red) !important;
  border-color: var(--e-red) !important;
}

/* numerology number — was gradient-clipped for dark bg */
.num-display .number {
  background: none !important;
  -webkit-text-fill-color: var(--e-red) !important;
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}

/* all direct children text */
.zodiac-grid > * *,
.tarot-grid > * *,
.number-grid > * *,
.zodiac-card *, .zg-card *,
.compat-result *, .cr-card *,
.nl-card *, .num-card *,
.mh-result-card *,
.reward-card *, .glossary-item * {
  color: var(--e-ink) !important;
}
/* preserve red accents inside those cards for titles/strong */
.zodiac-grid > * strong, .zodiac-grid > * h4, .zodiac-grid > * h5,
.tarot-grid > * strong, .tarot-grid > * h4,
.number-grid > * strong, .number-grid > * h4,
.zodiac-card h3, .zodiac-card h4,
.zg-card h3, .zg-card h4,
.nl-card h3, .nl-card h4,
.num-card h3, .num-card h4 {
  color: var(--e-red) !important;
}

/* tarot-specific readable */
.tarot-card, .tarot-card *,
.tarot-position, .tarot-name, .tarot-orientation, .tarot-keywords,
.tarot-meaning, .tarot-description, .tarot-label, .tarot-card-label,
.tarot-reading, .tarot-reading *,
.card-display, .card-display *,
.card-position, .card-position-label, .card-meaning {
  color: #000 !important;
}
.tarot-name, .tarot-position, .card-position-label {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}
.tarot-card, .card-display {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
}

/* ================================================================
   NUCLEAR: force readable black text everywhere inside sections
   — but preserve red/gold accent colors and bright button text
   ================================================================ */
.section-container p,
.section-container span,
.section-container li,
.section-container label,
.section-container td,
.section-container th,
.section-container div:not([class*="btn"]):not([class*="badge"]):not([class*="tag"]):not([class*="pill"]):not([class*="chip"]) {
  color: #000 !important;
}
/* keep explicit red / gold accents visible */
.section-container .e-brush,
.section-container [class*="-title"],
.section-container [class*="-headline"],
.section-container [class*="-red"],
.section-container strong,
.section-container b {
  color: var(--e-red) !important;
}
/* button text keeps whatever the button color is */
.section-container button,
.section-container .btn,
.section-container .xc-btn,
.section-container .pricing-btn {
  color: inherit;
}
/* bright button text when button has dark bg */
.btn-primary, .xc-btn-primary, .ai-send-btn,
.pricing-card--popular .pricing-btn {
  color: #fbf5e6 !important;
}

/* ================================================================
   FINAL NUCLEAR SWEEP — every panel/card/tab cream, every text black
   overrides JS-injected dark backgrounds + light text
   ================================================================ */

/* all fengshui classes */
.fs-tab, .fs-card, .fs-panel,
.fs-dir-btn, .fs-mansion-cell, .fs-house-type,
.fs-kua-form, .fs-kua-btn, .fs-kua-result, .fs-kua-dir-card,
.fs-floor-cell, .fs-room-item, .fs-analysis-item, .fs-tip-card,
.fs-edu-section, .fs-compass-info, .fs-dir-card, .fs-direction-card,
.fs-room-cell, .fs-grid-cell {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.fs-tab { color: #000 !important; }
.fs-tab:hover { background: rgba(192,57,43,.08) !important; color: var(--e-red) !important; border-color: var(--e-red) !important; }
.fs-tab.active, .fs-tab-btn.active {
  background: linear-gradient(135deg, rgba(192,57,43,.12), rgba(212,180,106,.15)) !important;
  color: var(--e-red) !important;
  border-color: var(--e-red) !important;
}
.fs-card h3, .fs-card h2, .fs-card h4 { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
.fs-card p, .fs-card li, .fs-card span, .fs-card div,
.fs-card *, .fs-panel *, .fs-tab *, .fs-mansion-cell *, .fs-house-type *,
.fs-kua-result *, .fs-floor-cell *, .fs-room-item *, .fs-analysis-item *,
.fs-tip-card *, .fs-edu-section *, .fs-compass-info * {
  color: #000 !important;
}
.fs-ring-dir { fill: #1a1a1a !important; }
.fs-compass-svg text { fill: #000 !important; }
/* 8 direction circle buttons */
.fs-dir-btn {
  background: linear-gradient(180deg, #fbf5e6, #f1e6c8) !important;
  border: 2px solid var(--e-gold-dk) !important;
  color: #000 !important;
}
.fs-dir-btn:hover, .fs-dir-btn.active {
  background: linear-gradient(180deg, rgba(192,57,43,.1), #f1e6c8) !important;
  border-color: var(--e-red) !important;
  color: var(--e-red) !important;
}
.fs-dir-btn * { color: inherit !important; }

/* all JS-injected class prefixes — blanket sweep */
[class^="ag-"], [class*=" ag-"],
[class^="bg-"]:not(.bg-hud-pill):not(.bg-paywall-overlay):not(.bg-paywall-modal),
[class^="fd-"], [class*=" fd-"],
[class^="fn-"], [class*=" fn-"],
[class^="fr-"], [class*=" fr-"],
[class^="fs-"], [class*=" fs-"],
[class^="gm-"], [class*=" gm-"],
[class^="hc-"], [class*=" hc-"],
[class^="hd-"], [class*=" hd-"],
[class^="mh-"], [class*=" mh-"],
[class^="ot-"], [class*=" ot-"],
[class^="sn-"], [class*=" sn-"],
[class^="tr-"], [class*=" tr-"],
[class^="wl-"], [class*=" wl-"],
[class^="xc-"]:not(.xc-btn-primary):not([class*="xc-chip"]),
[class^="zw-"], [class*=" zw-"],
[class^="dfs-"], [class*=" dfs-"],
[class^="nl-"], [class*=" nl-"] {
  color: #000 !important;
}

/* force any card-like container in these prefixes to cream bg */
[class^="fs-"][class*="card"], [class^="fs-"][class*="panel"],
[class^="fs-"][class*="cell"], [class^="fs-"][class*="item"],
[class^="ag-"][class*="card"], [class^="fr-"][class*="card"],
[class^="mh-"][class*="card"], [class^="mh-"][class*="tab"],
[class^="zw-"][class*="card"], [class^="zw-"][class*="palace"],
[class^="dfs-"][class*="canvas"], [class^="dfs-"][class*="legend"] {
  background: #fbf5e6 !important;
  border-color: var(--e-border) !important;
}

/* HUD badges (top right streak/points) */
.bg-hud-pill { color: var(--e-red) !important; }

/* make all <small> / <em> / <i> / descriptive text dark */
body small, body em, body i, body cite,
.section-container small, .section-container em,
.section-container i, .section-container cite {
  color: #1a1a1a !important;
}

/* fullscreen toggle button in chat header */
.ai-fullscreen-btn {
  margin-left: auto !important;
  margin-right: 8px !important;
  background: transparent !important;
  border: 1px solid var(--e-gold-dk) !important;
  color: var(--e-gold) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 4px !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s ease;
}
.ai-fullscreen-btn:hover {
  background: rgba(212,180,106,.12) !important;
  color: #f3e9d2 !important;
}
.ai-chat-header .ai-clear-btn { margin-left: 0 !important; }

/* fullscreen immersive mode */
body.ai-fs-active { overflow: hidden !important; }
body.ai-fs-active #navbar,
body.ai-fs-active .mobile-nav,
body.ai-fs-active .ai-history-bar,
body.ai-fs-active .ai-memory-stats,
body.ai-fs-active .section-header,
body.ai-fs-active .ai-quick-cards,
body.ai-fs-active .ai-floating-btn { display: none !important; }
.ai-chat-container.ai-fs {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  z-index: 99999 !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.ai-chat-container.ai-fs .ai-chat-messages {
  padding: 28px max(32px, calc((100vw - 900px) / 2)) !important;
  font-size: 1rem !important;
}
.ai-chat-container.ai-fs .ai-msg-bubble {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  padding: 14px 18px !important;
}
.ai-chat-container.ai-fs .ai-chat-input-area {
  padding: 14px max(32px, calc((100vw - 900px) / 2)) !important;
}
.ai-chat-container.ai-fs .ai-chat-header {
  padding: 12px 24px !important;
}

/* ================================================================
   AI advisor — compact layout, bigger chat area
   ================================================================ */
#ai-advisor .section-container {
  max-width: 1200px !important;
  padding: calc(var(--nav-height) + 16px) 20px 40px !important;
}
#ai-advisor .section-header { margin-bottom: 16px !important; }
#ai-advisor .section-title { margin-bottom: 6px !important; }
#ai-advisor .section-sub { margin-bottom: 8px !important; }

/* shrink history bar — ultra compact single row */
.ai-history-bar {
  padding: 3px 8px !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
.ai-hb-header {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.ai-hb-title {
  font-size: .7rem !important;
  margin: 0 !important;
}
.ai-hb-new {
  padding: 2px 6px !important;
  font-size: .66rem !important;
  line-height: 1.3 !important;
}
.ai-hb-list {
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  flex: 1 1 auto !important;
  overflow-x: auto !important;
}
.ai-hb-item {
  padding: 2px 6px !important;
  min-width: 60px !important;
  max-width: 110px !important;
  font-size: .66rem !important;
  line-height: 1.3 !important;
  flex-shrink: 0 !important;
}
.ai-hb-item-title {
  font-size: .66rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ai-hb-item-meta {
  font-size: .56rem !important;
  line-height: 1.2 !important;
}
.ai-hb-del {
  padding: 0 3px !important;
  font-size: .62rem !important;
}

/* hide context badges and status banner if re-introduced */
.ai-context-bar { display: none !important; }

/* memory stats row */
.ai-memory-stats { padding: 8px 12px !important; margin-bottom: 12px !important; }

/* bigger chat container */
.ai-chat-container {
  height: calc(100vh - 160px) !important;
  min-height: 720px !important;
  max-height: none !important;
}
.ai-chat-header { padding: 10px 18px !important; }
.ai-chat-avatar { width: 36px !important; height: 36px !important; font-size: 1.2rem !important; }
.ai-chat-title-area h3 { font-size: .95rem !important; }
.ai-chat-title-area p { font-size: .72rem !important; }

/* tighter messages — more content on screen */
.ai-chat-messages {
  padding: 14px 18px !important;
  gap: 12px !important;
}
.ai-msg-bubble {
  padding: 10px 14px !important;
  line-height: 1.55 !important;
  font-size: .92rem !important;
}
.ai-msg-bubble h1, .ai-msg-bubble h2, .ai-msg-bubble h3, .ai-msg-bubble h4 {
  margin: 8px 0 4px !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
}
.ai-msg-bubble p { margin: 4px 0 !important; }
.ai-msg-bubble ul, .ai-msg-bubble ol { margin: 4px 0 !important; padding-left: 20px !important; }
.ai-msg-bubble li { margin: 2px 0 !important; }

/* tighter input area */
.ai-chat-input-area { padding: 10px 14px !important; }
.ai-suggested-questions, .ai-quick-cards { gap: 8px !important; margin-bottom: 8px !important; }
.ai-suggestion { padding: 6px 12px !important; font-size: .8rem !important; }

/* ================================================================
   NUCLEAR SWEEP — force cream bg on ALL JS-injected class prefixes
   regardless of suffix. Catches fs-layout-analysis, fs-layout-wrap,
   fs-tips-grid, fs-edu-section, fs-kua-group, etc.
   ================================================================ */
[class^="fs-"]:not(.fs-compass-svg):not(.fs-ring-dir):not(.fs-needle):not(.fs-dir-btn):not(.fs-tab):not(.fs-tab-btn),
[class^="fd-"]:not(.fd-tab):not(.fd-btn),
[class^="fn-"]:not(.fn-btn),
[class^="fr-"]:not(.fr-btn):not(.fr-tab),
[class^="gm-"]:not(.gm-btn):not(.gm-badge-earned),
[class^="hc-"]:not(.hc-btn),
[class^="hd-"]:not(.hd-btn),
[class^="mh-"]:not(.mh-btn):not(.mh-tab),
[class^="ot-"]:not(.ot-btn),
[class^="sn-"]:not(.sn-btn),
[class^="tr-"]:not(.tr-btn),
[class^="wl-"]:not(.wl-btn),
[class^="zw-"]:not(.zw-btn):not(.zw-tab),
[class^="dfs-"]:not(.dfs-btn),
[class^="nl-"]:not(.nl-btn),
[class^="ag-"]:not(.ag-btn) {
  background-color: #fbf5e6 !important;
  background-image: none !important;
  border-color: var(--e-border) !important;
  color: #000 !important;
}

/* all descendants inherit dark text */
[class^="fs-"] *, [class^="fd-"] *, [class^="fn-"] *, [class^="fr-"] *,
[class^="gm-"] *, [class^="hc-"] *, [class^="hd-"] *, [class^="mh-"] *,
[class^="ot-"] *, [class^="sn-"] *, [class^="tr-"] *, [class^="wl-"] *,
[class^="zw-"] *, [class^="dfs-"] *, [class^="nl-"] *, [class^="ag-"] * {
  color: #000 !important;
}

/* restore specific element types that should have accent colors */
[class^="fs-"] h1, [class^="fs-"] h2, [class^="fs-"] h3, [class^="fs-"] h4,
[class^="fd-"] h1, [class^="fd-"] h2, [class^="fd-"] h3, [class^="fd-"] h4,
[class^="fn-"] h1, [class^="fn-"] h2, [class^="fn-"] h3, [class^="fn-"] h4,
[class^="fr-"] h1, [class^="fr-"] h2, [class^="fr-"] h3, [class^="fr-"] h4,
[class^="mh-"] h1, [class^="mh-"] h2, [class^="mh-"] h3, [class^="mh-"] h4,
[class^="zw-"] h1, [class^="zw-"] h2, [class^="zw-"] h3, [class^="zw-"] h4 {
  color: var(--e-red) !important;
}

/* SVG elements should keep their fills */
[class^="fs-"] svg, [class^="fs-"] svg * {
  background: transparent !important;
}
.fs-compass-svg, .fs-compass-svg * {
  background: transparent !important;
}

/* ================================================================
   RED ACCENT PASS — break up the all-black monotony.
   Applied AFTER nuclear sweep so it wins. Scope: headings, stat
   numbers, card names, section titles — NOT body text or labels.
   ================================================================ */

/* section headings site-wide */
.section-title,
.feature-section-title,
.xc-intro h3, .xc-intro h2,
.xc-section > h2, .xc-section > h3,
.gm-pull-card h4,
.gm-mini-card h5,
.fs-card h3, .fs-card h2,
.fs-panel h3, .fs-panel h2,
.fs-tab.active,
.tarot-card-front h3, .tarot-card-back h3,
.zodiac-card h3, .zg-card h3,
.num-card h3, .nl-card h3,
.mh-result-card h3, .mh-result-card h2,
.cr-card h3, .compat-result h3,
.zw-palace-name, .zw-card h3,
.ai-chat-title-area h3,
.pricing-tier, .pricing-card h3,
.reward-card h3, .glossary-item h3,
.fd-card h3, .fd-list b,
.hc-card h3, .hd-card h3,
.tr-card h3, .wl-card h3,
.dfs-title, .ag-title {
  color: var(--e-red) !important;
}

/* stat numbers & key metrics */
.gm-stat-n,
.gm-pull-label,
.stat-number, .stat-value,
.big-number, .result-number,
.num-result-value, .nl-result-value,
.score-num, .score-value {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}

/* "dark" text on card titles — override nuclear black */
[class^="fs-"] h1, [class^="fs-"] h2, [class^="fs-"] h3, [class^="fs-"] h4,
[class^="fd-"] h1, [class^="fd-"] h2, [class^="fd-"] h3, [class^="fd-"] h4,
[class^="gm-"] h1, [class^="gm-"] h2, [class^="gm-"] h3, [class^="gm-"] h4, [class^="gm-"] h5,
[class^="mh-"] h1, [class^="mh-"] h2, [class^="mh-"] h3, [class^="mh-"] h4,
[class^="zw-"] h1, [class^="zw-"] h2, [class^="zw-"] h3, [class^="zw-"] h4,
[class^="fr-"] h1, [class^="fr-"] h2, [class^="fr-"] h3, [class^="fr-"] h4,
[class^="hc-"] h1, [class^="hc-"] h2, [class^="hc-"] h3, [class^="hc-"] h4,
[class^="hd-"] h1, [class^="hd-"] h2, [class^="hd-"] h3, [class^="hd-"] h4,
[class^="tr-"] h1, [class^="tr-"] h2, [class^="tr-"] h3, [class^="tr-"] h4,
[class^="wl-"] h1, [class^="wl-"] h2, [class^="wl-"] h3, [class^="wl-"] h4,
[class^="nl-"] h1, [class^="nl-"] h2, [class^="nl-"] h3, [class^="nl-"] h4,
[class^="ag-"] h1, [class^="ag-"] h2, [class^="ag-"] h3, [class^="ag-"] h4 {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}

/* strong emphasis (b / strong) inside card lists */
.fd-list b, .fd-list strong,
[class^="fs-"] b, [class^="fs-"] strong,
[class^="fr-"] b, [class^="fr-"] strong,
[class^="mh-"] b, [class^="mh-"] strong {
  color: var(--e-red) !important;
}

/* daily fortune stat labels keep black but numbers go red (already covered above) */
.gm-stat-n { font-size: 28px !important; }

/* landing / hero accents */
.hero-subtitle .accent,
.hero-title-en,
.section-kicker { color: var(--e-red) !important; }

/* ================================================================
   FULL PROJECT DARK-BG KILL SWEEP — audit round (2026-04)
   Covers: gamification / fun / synastry / paywall / tour / tarot
           bazi / facereading / waitlist / iching / meihua / numerology
   ================================================================ */

/* gamification stats/badges/mini-cards */
.gm-stat, .gm-badge, .gm-mini-card, .gm-pull-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.gm-stat *, .gm-badge *, .gm-mini-card *, .gm-pull-card * { color: #000 !important; }
.gm-stat-n, .gm-pull-label, .gm-pull-card h4, .gm-mini-card h5 {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}

/* HUD pill (top-right streak/points) */
.bg-hud-pill {
  background: rgba(251,245,230,.95) !important;
  color: var(--e-red) !important;
  border: 1px solid var(--e-gold-dk) !important;
  backdrop-filter: blur(8px) !important;
}

/* fun module */
.fn-dir, .fn-pick-h { color: var(--e-red) !important; }
.fn-pick {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.fn-pick * { color: #000 !important; }

/* synastry (合盘) */
.sn-person, .sn-block, .sn-headline-wrap {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.sn-person *, .sn-block * { color: #000 !important; }
.sn-person h4, .sn-block h5, .sn-score span {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}
.sn-headline { color: var(--e-ink) !important; font-weight: 600 !important; }

/* paywall modal */
.bg-paywall, .bg-paywall-overlay {
  background: rgba(0,0,0,.55) !important;
}
.bg-paywall-modal, .bg-paywall-card {
  background: #fbf5e6 !important;
  background-image: none !important;
  border: 2px solid var(--e-gold-dk) !important;
  color: #000 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.25) !important;
}
.bg-paywall-modal *, .bg-paywall-card * { color: #000 !important; }
.bg-paywall-card h3, .bg-paywall-mark {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}
.bg-paywall-cta {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-gold-dk) !important;
  color: var(--e-ink) !important;
}
.bg-paywall-cta-yearly {
  background: linear-gradient(135deg, rgba(192,57,43,.12), rgba(212,180,106,.2)) !important;
  border: 1px solid var(--e-red) !important;
  color: var(--e-red) !important;
  font-weight: 700 !important;
}
.bg-paywall-cta-yearly * { color: var(--e-red) !important; }
.bg-paywall-badge {
  background: var(--e-red) !important;
  color: #fbf5e6 !important;
  font-weight: 700 !important;
}
.bg-paywall-badge * { color: #fbf5e6 !important; }

/* tour route */
.tr-route li, .tr-route-item, .tr-step {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.tr-route li *, .tr-step * { color: #000 !important; }
.tr-name {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}

/* tarot additional (spread buttons, modal, arcana grid) */
.spread-btn {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-gold-dk) !important;
  color: var(--e-ink) !important;
}
.spread-btn:hover, .spread-btn.active {
  background: linear-gradient(135deg, rgba(192,57,43,.1), rgba(212,180,106,.15)) !important;
  color: var(--e-red) !important;
  border-color: var(--e-red) !important;
}
.arcana-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.arcana-card:hover {
  background: linear-gradient(135deg, rgba(212,180,106,.15), rgba(192,57,43,.06)) !important;
  border-color: var(--e-red) !important;
  box-shadow: 0 8px 24px rgba(192,57,43,.15) !important;
}
.arcana-card * { color: #000 !important; }
.tarot-modal-overlay { background: rgba(0,0,0,.55) !important; }
.tarot-modal, .tarot-modal-content {
  background: #fbf5e6 !important;
  border: 2px solid var(--e-gold-dk) !important;
  color: #000 !important;
}
.tarot-modal *, .tarot-modal-content * { color: #000 !important; }
.tarot-modal .modal-close { color: var(--e-red) !important; font-size: 1.4rem !important; }
.tarot-modal .modal-section h4 {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}
.tarot-card-back .card-orientation {
  background: rgba(192,57,43,.1) !important;
  color: var(--e-red) !important;
  border: 1px solid var(--e-red) !important;
}

/* bazi (八字) */
.bazi-pillar, .bz-card, .bz-pillar-head, .bz-analysis-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.bazi-pillar *, .bz-card * { color: #000 !important; }
.bazi-pillar h3, .bazi-pillar h4, .bz-card h3, .bz-card h4 {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}
.bazi-el-bar-bg { background: rgba(192,57,43,.1) !important; }
.bazi-el-bar, .bz-el-bar { background: linear-gradient(90deg, var(--e-gold), var(--e-red)) !important; }

/* facereading overlay */
.facereading-overlay, .fr-overlay { background: rgba(0,0,0,.55) !important; }
.facereading-modal, .fr-modal {
  background: #fbf5e6 !important;
  border: 2px solid var(--e-gold-dk) !important;
  color: #000 !important;
}
.facereading-modal *, .fr-modal * { color: #000 !important; }

/* waitlist form */
.wl-form input, .wl-form textarea {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-gold-dk) !important;
  color: #000 !important;
}
.wl-form input::placeholder, .wl-form textarea::placeholder {
  color: var(--e-muted) !important;
}

/* iching (易经) — catch any residual */
.iching-card, .ic-card, .hex-card, .hexagram-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.iching-card *, .ic-card *, .hex-card * { color: #000 !important; }
.iching-card h3, .ic-card h3, .hex-card h3, .hexagram-card h3 {
  color: var(--e-red) !important;
}

/* meihua (梅花易数) */
.mh-card, .mh-result-card, .mh-pillar, .mh-panel, .mh-tab-content {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.mh-card *, .mh-result-card * { color: #000 !important; }

/* numerology (数秘学) */
.num-card, .nl-card, .num-result-card, .nl-result-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.num-card *, .nl-card *, .num-result-card *, .nl-result-card * { color: #000 !important; }
.num-card h3, .nl-card h3, .num-result-card h3, .nl-result-card h3 {
  color: var(--e-red) !important;
}

/* outfit (穿搭) */
.ot-card, .ot-result-card, .ot-item {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.ot-card *, .ot-result-card *, .ot-item * { color: #000 !important; }

/* deskfengshui (桌面风水) — dfs- classes */
.dfs-canvas, .dfs-item, .dfs-legend, .dfs-panel {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.dfs-canvas *, .dfs-panel * { color: #000 !important; }

/* ziwei (紫微) */
.zw-palace, .zw-card, .zw-panel, .zw-result {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.zw-palace *, .zw-card *, .zw-panel * { color: #000 !important; }
.zw-palace-name, .zw-card h3, .zw-panel h3 {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}

/* food (食补) */
.fd-card, .fd-result-card, .fd-item {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.fd-card *, .fd-result-card * { color: #000 !important; }

/* any remaining modal/overlay that slipped through */
[class*="modal-overlay"], [class*="-overlay"]:not(.bg-hud-pill) {
  background: rgba(0,0,0,.55) !important;
}
[class*="modal-content"]:not(.ai-chat-messages),
[class*="modal-body"]:not(.ai-chat-messages) {
  background: #fbf5e6 !important;
  color: #000 !important;
}

/* any remaining card/panel across prefixes — catch-all */
[class*="-card"]:not(.ai-msg-bubble):not(.tarot-card-front):not(.tarot-card-back),
[class*="-panel"]:not(.ai-chat-messages),
[class*="-modal"]:not(.ai-chat-messages):not([class*="-modal-overlay"]) {
  background-color: #fbf5e6 !important;
  background-image: none !important;
  border-color: var(--e-border) !important;
  color: #000 !important;
}

/* descendants in those catch-all cards inherit black */
[class*="-card"] *:not(.ai-msg-bubble):not(.ai-msg-bubble *):not(h1):not(h2):not(h3):not(h4):not(h5):not(b):not(strong) {
  color: #000 !important;
}

/* descendants in those catch-all cards: headings stay red */
[class*="-card"] h1, [class*="-card"] h2, [class*="-card"] h3,
[class*="-card"] h4, [class*="-card"] h5,
[class*="-card"] b, [class*="-card"] strong {
  color: var(--e-red) !important;
}

/* alc-card (AI life compass pricing) — original theme colors */
.alc-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
}
.alc-name { color: var(--e-ink) !important; font-weight: 600 !important; }
.alc-price { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
.alc-foot { color: var(--e-muted) !important; }

/* pricing-legal (bottom of pricing) */
.pricing-legal { color: var(--e-muted) !important; }
.pricing-legal a { color: var(--e-red) !important; text-decoration: underline; }

/* paywall sub-elements — catch any descendants my earlier rules missed */
.bg-paywall-x { color: var(--e-ink-2) !important; opacity: .7 !important; }
.bg-paywall-x:hover { opacity: 1 !important; color: var(--e-red) !important; }
.bg-paywall-sub, .bg-paywall-perks li { color: var(--e-ink) !important; }
.bg-paywall-cancel, .bg-paywall-legal { color: var(--e-muted) !important; }

/* synastry sub-elements */
.sn-elements, .sn-rel, .sn-summary, .sn-tip p { color: var(--e-ink) !important; }

/* fun module sub-elements */
.fn-pick-w { color: var(--e-ink) !important; }
.fn-pick-h small { color: var(--e-muted) !important; }

/* ================================================================
   ZODIAC / ASTROLOGY — kill ALL dark navy overlays (js/astrology.js)
   ================================================================ */
.zodiac-overlay,
.zodiac-overlay-backdrop { background: rgba(0,0,0,.55) !important; }
.zodiac-overlay-content {
  background: #fbf5e6 !important;
  border: 2px solid var(--e-gold-dk) !important;
  color: #000 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.25) !important;
}
.zodiac-overlay-content * { color: #000 !important; }
.zodiac-overlay-header {
  background: linear-gradient(135deg, rgba(212,180,106,.25), rgba(192,57,43,.1)) !important;
  border-bottom: 1px solid var(--e-border) !important;
}
.zodiac-overlay-header h3 { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
.zodiac-overlay-header p { color: var(--e-ink-2) !important; }
.zodiac-overlay-content h4 { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }

/* detail boxes inside overlay */
.zodiac-detail-box,
.zodiac-detail-grid > *,
.zodiac-detail-section {
  background: #f1e6c8 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.zodiac-detail-box *, .zodiac-detail-section * { color: #000 !important; }
.zodiac-detail-box h4, .zodiac-detail-section h4,
.zodiac-detail-box h5, .zodiac-detail-section h5 { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }

/* meta tags (风象(Air), 基本宫, 守护星) */
.zodiac-meta-tag {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-gold-dk) !important;
  color: #000 !important;
  font-weight: 500 !important;
}
.zodiac-meta-tag * { color: #000 !important; }

/* card grid items (keyword chips 聪明/多才多艺 etc) */
.zodiac-tag, .zodiac-keyword, .zodiac-trait {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-gold-dk) !important;
  color: var(--e-red) !important;
  font-weight: 500 !important;
}

/* result + compat cards */
.zodiac-result-card,
.compat-result-card {
  background: #fbf5e6 !important;
  border: 2px solid var(--e-gold-dk) !important;
  color: #000 !important;
}
.zodiac-result-card *, .compat-result-card * { color: #000 !important; }
.compat-header {
  background: linear-gradient(135deg, rgba(212,180,106,.2), rgba(192,57,43,.08)) !important;
  border-bottom: 1px solid var(--e-border) !important;
}
.compat-sign, .compat-assessment {
  background: #f1e6c8 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.compat-sign *, .compat-assessment * { color: #000 !important; }
.compat-bar-track { background: rgba(192,57,43,.1) !important; }
.compat-ring-bg { stroke: rgba(192,57,43,.15) !important; }

/* zodiac grid cards on main page */
.zodiac-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
.zodiac-card:hover {
  background: linear-gradient(135deg, rgba(212,180,106,.15), rgba(192,57,43,.06)) !important;
  box-shadow: 0 8px 24px rgba(192,57,43,.12) !important;
  transform: translateY(-4px) !important;
}
.zodiac-card * { color: #000 !important; }
.zodiac-card h3, .zodiac-card h4 { color: var(--e-red) !important; }

/* big-symbol drop shadow (looks weird on cream) */
.zodiac-big-symbol { filter: drop-shadow(0 2px 6px rgba(192,57,43,.2)) !important; }

/* XuanCase uploader dropzone — was dark glass, now cream */
.xc-uploader {
  background: #f1e6c8 !important;
  border: 2px dashed var(--e-gold-dk) !important;
  color: #000 !important;
}
.xc-uploader:hover, .xc-uploader.drag {
  background: linear-gradient(135deg, rgba(212,180,106,.2), rgba(192,57,43,.06)) !important;
  border-color: var(--e-red) !important;
}
.xc-uploader-icon { color: var(--e-red) !important; }
.xc-uploader-title { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; font-size: 1.15rem !important; }
.xc-uploader-hint { color: var(--e-ink) !important; }
.xc-uploader * { color: #000 !important; }
.xc-uploader .xc-btn-primary {
  background: var(--e-red) !important;
  color: #fbf5e6 !important;
  border: 1px solid var(--e-red-dk) !important;
}
.xc-uploader .xc-btn-primary * { color: #fbf5e6 !important; }

/* tarot reading cards — was transparent-white on dark theme, now mauve on cream */
.tarot-reading-card {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
  box-shadow: 0 2px 8px rgba(192,57,43,.06) !important;
}
.tarot-reading-card * { color: #000 !important; }
.tarot-reading-card .reading-pos {
  background: rgba(192,57,43,.1) !important;
  color: var(--e-red) !important;
  font-weight: 600 !important;
}
.tarot-reading-card .reading-name {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}
.tarot-reading-card .reading-orient.upright { color: #2d6a4f !important; }
.tarot-reading-card .reading-orient.reversed { color: var(--e-red) !important; }
.tarot-reading-card .reading-keywords {
  color: var(--e-ink-2) !important;
  font-weight: 500 !important;
}
.tarot-reading-card .reading-meaning { color: var(--e-ink) !important; }
.tarot-reading h4 { color: var(--e-red) !important; }

/* toast (notify) — cream bg, black bold text, red border */
.xc-toast {
  background: #fbf5e6 !important;
  border: 2px solid var(--e-red) !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 6px 20px rgba(192,57,43,.25) !important;
  backdrop-filter: none !important;
}
.xc-toast * { color: #000 !important; }

/* ================================================================
   BAZI — kill remaining dark bg on element chart + analysis container,
   ensure pillar row centers on all viewports
   ================================================================ */
/* parent #baziPillars was display:grid(4x1fr) — that trapped .bazi-pillar-row
   into one 1/4-wide cell and forced pillars to stack. Force it to block. */
.bazi-pillars {
  display: block !important;
  grid-template-columns: none !important;
  text-align: center !important;
}
.bazi-pillar-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 24px auto !important;
  max-width: 760px !important;
  width: 100% !important;
}
.bazi-pillar {
  flex: 0 1 150px !important;
  min-width: 130px !important;
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
  box-shadow: 0 2px 8px rgba(192,57,43,.06) !important;
}
.bazi-pillar * { color: #000 !important; }
.bazi-pillar-label { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; opacity: 1 !important; }
.bazi-char { color: var(--e-red) !important; text-shadow: none !important; filter: none !important; font-family: 'Ma Shan Zheng', serif !important; }

.bazi-element-chart,
.bazi-element-chart h4,
#baziElements,
#baziElements h4 {
  background: #fbf5e6 !important;
  background-image: none !important;
  border-color: var(--e-border) !important;
  color: #000 !important;
}
.bazi-element-chart h4, #baziElements h4 { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; background: transparent !important; border: none !important; }
.bazi-el-label { text-shadow: none !important; filter: none !important; color: var(--e-red) !important; }
.bazi-el-val { color: var(--e-ink) !important; opacity: 1 !important; }
.bazi-el-bar { box-shadow: none !important; opacity: 1 !important; }

#baziAnalysis {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}
#baziAnalysis * { color: #000 !important; }
#baziAnalysis h4 {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
  border-top-color: var(--e-border) !important;
}
#baziAnalysis p { color: var(--e-ink) !important; opacity: 1 !important; }
#baziAnalysis strong { color: var(--e-red) !important; }

/* ================================================================
   FACEREADING / PALMREADING — replace purple gradients with east theme
   ================================================================ */
.fr-tabs {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 10px !important;
  padding: 4px !important;
}
.fr-tab {
  background: transparent !important;
  background-image: none !important;
  color: var(--e-ink) !important;
  border: none !important;
  font-weight: 600 !important;
}
.fr-tab:hover {
  background: rgba(212,180,106,.15) !important;
  color: var(--e-red) !important;
}
.fr-tab.active {
  background: linear-gradient(135deg, rgba(192,57,43,.12), rgba(212,180,106,.18)) !important;
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
  border-bottom: 2px solid var(--e-red) !important;
}
.fr-tab-icon { color: inherit !important; }

.fr-panel {
  background: #fbf5e6 !important;
  background-image: none !important;
  border: 1px solid var(--e-border) !important;
  color: #000 !important;
}

.fr-upload-area {
  background: #f1e6c8 !important;
  background-image: none !important;
  border: 2px dashed var(--e-gold-dk) !important;
  color: #000 !important;
}
.fr-upload-area:hover, .fr-upload-area.dragover {
  background: linear-gradient(135deg, rgba(212,180,106,.2), rgba(192,57,43,.06)) !important;
  border-color: var(--e-red) !important;
}
.fr-upload-icon { color: var(--e-red) !important; }
.fr-upload-text { color: #000 !important; }
.fr-upload-text strong { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }

.fr-btn {
  background: #fbf5e6 !important;
  background-image: none !important;
  border: 1px solid var(--e-gold-dk) !important;
  color: var(--e-red) !important;
  font-weight: 600 !important;
}
.fr-btn:hover {
  background: linear-gradient(135deg, rgba(212,180,106,.2), rgba(192,57,43,.08)) !important;
  box-shadow: 0 4px 12px rgba(192,57,43,.15) !important;
  border-color: var(--e-red) !important;
  color: var(--e-red) !important;
}
.fr-btn-primary {
  background: linear-gradient(135deg, var(--e-red), var(--e-red-dk)) !important;
  background-image: linear-gradient(135deg, var(--e-red), var(--e-red-dk)) !important;
  border: 1px solid var(--e-red-dk) !important;
  color: #fbf5e6 !important;
}
.fr-btn-primary:hover {
  background: linear-gradient(135deg, var(--e-red-dk), var(--e-red)) !important;
  background-image: linear-gradient(135deg, var(--e-red-dk), var(--e-red)) !important;
  box-shadow: 0 6px 16px rgba(192,57,43,.35) !important;
  color: #fbf5e6 !important;
}
.fr-btn-primary * { color: #fbf5e6 !important; }

.fr-ai-prompt {
  background: linear-gradient(135deg, rgba(212,180,106,.15), rgba(192,57,43,.05)) !important;
  border: 1px solid var(--e-gold-dk) !important;
  color: #000 !important;
}
.fr-ai-prompt * { color: #000 !important; }
.fr-ai-prompt-icon { color: var(--e-red) !important; }
.fr-ai-prompt-text a { color: var(--e-red) !important; text-decoration: underline; }

.fr-section-block,
.fr-section-title,
.fr-traits-panel,
.fr-trait-row,
.fr-result,
.fr-result-header,
.fr-result-section,
.fr-info-grid,
.fr-info-card,
.fr-three-zones,
.fr-zone-desc-list,
.fr-zone-desc-item,
.fr-twelve-grid,
.fr-palace-card,
.fr-palm-layout,
.fr-palm-svg-wrap,
.fr-palm-controls,
.fr-face-diagram-wrap {
  background: #fbf5e6 !important;
  background-image: none !important;
  border-color: var(--e-border) !important;
  color: #000 !important;
}
.fr-section-title { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
.fr-section-title::before { background: var(--e-red) !important; }
.fr-trait-label { color: var(--e-ink) !important; }
.fr-trait-select {
  background: #fbf5e6 !important;
  border: 1px solid var(--e-gold-dk) !important;
  color: #000 !important;
}
.fr-trait-select:focus { border-color: var(--e-red) !important; box-shadow: 0 0 0 3px rgba(192,57,43,.15) !important; }
.fr-trait-select option { background: #fbf5e6 !important; color: #000 !important; }
.fr-result-label { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
.fr-result-text, .fr-info-card-text, .fr-palace-meaning, .fr-zone-desc-item p { color: var(--e-ink) !important; }
.fr-info-card-title, .fr-palace-name, .fr-zone-desc-item h4 { color: var(--e-red) !important; font-family: 'Ma Shan Zheng', serif !important; }
.fr-palace-num { color: var(--e-gold-dk) !important; }
.fr-face-region { fill: rgba(212,180,106,.2) !important; stroke: var(--e-gold-dk) !important; }
.fr-face-region:hover { fill: rgba(212,180,106,.35) !important; }
.fr-face-region.selected { fill: rgba(192,57,43,.25) !important; stroke: var(--e-red) !important; }
.fr-face-region-label { fill: var(--e-red) !important; }
.fr-zone-bar { background: #f1e6c8 !important; border: 1px solid var(--e-border) !important; }
.fr-zone-segment { background: linear-gradient(to top, rgba(212,180,106,.4), rgba(212,180,106,.15)) !important; }
.fr-zone-segment:hover { background: linear-gradient(to top, rgba(192,57,43,.35), rgba(212,180,106,.25)) !important; }
.fr-palm-line.life   { stroke: var(--e-red) !important; }
.fr-palm-line.head   { stroke: #2c5f8d !important; }
.fr-palm-line.heart  { stroke: #a63a50 !important; }
.fr-palm-line.fate   { stroke: var(--e-gold-dk) !important; }
.fr-palm-line.sun    { stroke: #c88a2a !important; }

/* ================================================================
   FOOTER — kill black, match east cream theme
   ================================================================ */
#footer {
  background: #f1e6c8 !important;
  border-top: 1px solid var(--e-gold-dk) !important;
  color: var(--e-ink) !important;
}
#footer::before {
  background: linear-gradient(90deg, transparent, var(--e-red), transparent) !important;
  opacity: .35 !important;
}
#footer * { color: var(--e-ink) !important; }
.footer-logo {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}
.footer-brand p { color: var(--e-ink-2) !important; }
.footer-links h4, .footer-note h4 {
  color: var(--e-red) !important;
  font-family: 'Ma Shan Zheng', serif !important;
}
.footer-links a { color: var(--e-ink) !important; }
.footer-links a:hover { color: var(--e-red) !important; }
.footer-note p { color: var(--e-ink-2) !important; }
.footer-bottom {
  border-top: 1px solid var(--e-border) !important;
}
.footer-bottom p { color: var(--e-ink-2) !important; }

/* footer — horizontal compact layout on mobile */
@media (max-width: 640px) {
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 20px 16px 12px !important;
  }
  .footer-brand p { font-size: .72rem !important; line-height: 1.5 !important; }
  .footer-links {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
  }
  .footer-links h4 { flex-basis: 100% !important; font-size: .78rem !important; margin-bottom: 2px !important; }
  .footer-links a { font-size: .72rem !important; }
  .footer-note { display: none !important; }
  .footer-bottom { padding: 10px 16px !important; }
  .footer-bottom p { font-size: .66rem !important; line-height: 1.4 !important; }
}

/* ================================================================
   AI CHAT INPUT — bigger textarea, better mobile layout
   ================================================================ */
.ai-chat-input-area {
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important;
}
.ai-input-row {
  padding: 10px 12px !important;
  min-height: 56px !important;
  align-items: center !important;
}
.ai-chat-textarea {
  min-height: 44px !important;
  max-height: 160px !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  padding: 10px 4px !important;
  resize: none !important;
}
.ai-send-btn {
  min-width: 52px !important;
  min-height: 52px !important;
  border-radius: 50% !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
}

@media (max-width: 640px) {
  .ai-chat-input-area { padding: 10px 8px calc(10px + env(safe-area-inset-bottom)) !important; }
  .ai-input-row { padding: 6px 8px !important; min-height: 48px !important; gap: 6px !important; }
  .ai-chat-textarea {
    min-height: 36px !important;
    font-size: 16px !important; /* prevent iOS zoom */
    padding: 6px 4px !important;
    line-height: 1.4 !important;
  }
  /* shorter placeholder so it fits on one line */
  .ai-chat-textarea::placeholder { font-size: 13px !important; }
  .ai-send-btn { min-width: 40px !important; min-height: 40px !important; font-size: 1rem !important; }
  .ai-upload-btn { min-width: 36px !important; padding: 6px !important; }
  .ai-chat-container { border-radius: 4px !important; }
  .ai-chat-messages { padding: 12px 10px !important; }
}

/* ================================================================
   AI FLOATING BUTTON (crystal ball) — east theme + lift above mobile nav
   ================================================================ */
.ai-fab {
  background: linear-gradient(135deg, var(--e-red), var(--e-red-dk)) !important;
  border: 2px solid var(--e-gold-dk) !important;
  color: #fbf5e6 !important;
  width: 54px !important;
  height: 54px !important;
  font-size: 1.5rem !important;
  box-shadow: 0 4px 16px rgba(192,57,43,.4) !important;
  animation: none !important;
}
.ai-fab:hover {
  box-shadow: 0 6px 20px rgba(192,57,43,.55) !important;
  transform: scale(1.08) !important;
}
.ai-fab-badge {
  background: linear-gradient(135deg, var(--e-gold), var(--e-gold-dk)) !important;
  color: #3a2018 !important;
}

@media (max-width: 640px) {
  .ai-fab {
    width: 46px !important;
    height: 46px !important;
    font-size: 1.25rem !important;
    right: 12px !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
}

/* hide floating AI button when already on AI section or when menu drawer is open */
body:has(#ai-advisor.section.active) .ai-fab,
body.ai-page .ai-fab,
body.menu-open .ai-fab { display: none !important; }

/* mobile drawer — was dark navy, make it cream with strong shadow so it's visible on cream page */
@media (max-width: 900px) {
  .nav-links {
    background: #fbf5e6 !important;
    border-left: 4px solid var(--e-red) !important;
    box-shadow: -16px 0 40px rgba(0,0,0,.35), -2px 0 0 var(--e-gold-dk) inset !important;
    z-index: 1001 !important;
    width: min(320px, 88vw) !important;
    padding: 64px 18px 40px !important;
  }
  .nav-links .nav-link,
  .nav-links .nav-group > a,
  .nav-links .nav-dd-section {
    color: var(--e-ink) !important;
    font-size: 1rem !important;
    padding: 14px 14px !important;
    border-bottom: 1px solid rgba(192,57,43,.12) !important;
  }
  .nav-links .nav-link.active,
  .nav-links .nav-link:hover {
    color: var(--e-red) !important;
    background: rgba(192,57,43,.06) !important;
  }
  .nav-backdrop { background: rgba(0,0,0,.55) !important; z-index: 1000 !important; }

  /* Drawer dropdowns: collapsed by default, click header to expand */
  .nav-links .nav-group > .nav-dropdown { display: none !important; padding-left: 12px !important; }
  .nav-links .nav-group.open > .nav-dropdown { display: block !important; }
  .nav-links .nav-group-btn {
    pointer-events: auto !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
  }
  .nav-links .nav-caret { display: inline-block !important; transition: transform .2s; }
  .nav-links .nav-group.open .nav-caret { transform: rotate(180deg); }
}

/* Quick bottom-sheet popup for mobile category buttons */
.quick-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 2000; opacity: 0; transition: opacity .2s ease;
}
.quick-sheet-backdrop.open { opacity: 1; }
.quick-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 2001;
  background: #fbf5e6;
  border-top: 3px solid var(--e-red);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,.35);
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4,.0,.2,1);
  max-height: 70vh; overflow-y: auto;
}
.quick-sheet.open { transform: translateY(0); }
.quick-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(192,57,43,.15);
}
.quick-sheet-title { font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', serif; font-size: 1.2rem; color: var(--e-red); font-weight: 600; }
.quick-sheet-close {
  background: none; border: 0; font-size: 1.8rem; line-height: 1;
  color: var(--e-ink-2); cursor: pointer; padding: 0 8px;
}
.quick-sheet-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.quick-sheet-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px 8px;
  background: #fff; border: 1px solid rgba(192,57,43,.12);
  border-radius: 12px; text-decoration: none !important;
  color: var(--e-ink) !important;
  transition: transform .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.quick-sheet-item:active { transform: scale(.96); background: rgba(192,57,43,.06); }
.quick-sheet-icon {
  font-size: 1.6rem; line-height: 1; color: var(--e-red);
  font-family: 'Ma Shan Zheng', serif;
}
.quick-sheet-label { font-size: .78rem; color: var(--e-ink); }

/* Bottom mobile nav — 6 clear tabs matching desktop structure */
@media (max-width: 900px) {
  .mobile-nav {
    justify-content: space-around !important;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) !important;
    gap: 0 !important;
  }
  .mobile-nav-item {
    flex: 1 1 0 !important;
    padding: 4px 2px !important;
  }
  .mobile-nav-icon { font-size: 1.1rem !important; }
  .mobile-nav-label { font-size: 0.68rem !important; white-space: nowrap !important; }
}

/* mobile nav — also kill dark bg */
.mobile-nav {
  background: rgba(251, 245, 230, .96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid var(--e-gold-dk) !important;
}

/* ================================================================
   MOBILE AI ADVISOR — chat takes the screen, other UI shrinks away
   ================================================================ */
@media (max-width: 640px) {
  /* shrink section header on AI page */
  #ai-advisor .section-header { margin-bottom: 6px !important; padding-top: 4px !important; }
  #ai-advisor .section-title { font-size: 1.1rem !important; margin-bottom: 2px !important; }
  #ai-advisor .section-sub { font-size: .72rem !important; margin-bottom: 4px !important; }
  #ai-advisor .section-container { padding: 8px 10px !important; }

  /* history bar: one tiny row, scrolls horizontally */
  .ai-history-bar {
    padding: 2px 6px !important;
    margin-bottom: 4px !important;
    max-height: 32px !important;
  }
  .ai-hb-title { font-size: .65rem !important; }
  .ai-hb-item { min-width: 54px !important; max-width: 90px !important; font-size: .6rem !important; padding: 1px 5px !important; }
  .ai-hb-item-meta { display: none !important; }

  /* memory stats: compact one-liner */
  .ai-memory-stats {
    padding: 4px 10px !important;
    margin-bottom: 6px !important;
    font-size: .7rem !important;
  }

  /* quick cards row: scrollable, smaller chips */
  .ai-quick-cards {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  .ai-quick-card {
    flex-shrink: 0 !important;
    padding: 6px 10px !important;
    font-size: .75rem !important;
  }
  .ai-quick-label { font-size: .72rem !important; }

  /* suggested questions: compact */
  .ai-suggested-questions {
    gap: 4px !important;
    margin-bottom: 4px !important;
  }
  .ai-suggestion { padding: 4px 10px !important; font-size: .72rem !important; }

  /* CHAT CONTAINER — claim the viewport */
  .ai-chat-container {
    height: calc(100vh - 180px) !important;
    min-height: calc(100vh - 180px) !important;
    max-height: calc(100vh - 180px) !important;
    border-radius: 6px !important;
    margin: 0 !important;
  }

  .ai-chat-header {
    padding: 8px 12px !important;
  }
  .ai-chat-avatar { width: 32px !important; height: 32px !important; font-size: 1rem !important; }
  .ai-chat-title-area h3 { font-size: 1rem !important; }
  .ai-chat-title-area p { font-size: .68rem !important; display: none !important; }
  .ai-clear-btn { padding: 4px 8px !important; font-size: .7rem !important; }
}