/* ==========================================================================
   CAL.COM DESIGN SYSTEM FOR DUANG.LIFE (design.md)
   Clean, White Canvas, Black CTAs, Light-Gray Cards, Dark Footer (#101010)
   ========================================================================== */

:root {
  /* 1. Colors (design.md specification) */
  --cal-primary: #111111;
  --cal-primary-active: #242424;
  --cal-primary-disabled: #e5e7eb;
  --cal-ink: #111111;
  --cal-body: #374151;
  --cal-muted: #6b7280;
  --cal-muted-soft: #898989;
  --cal-hairline: #e5e7eb;
  --cal-hairline-soft: #f3f4f6;
  --cal-canvas: #ffffff;
  --cal-surface-soft: #f8f9fa;
  --cal-surface-card: #f5f5f5;
  --cal-surface-strong: #e5e7eb;
  --cal-surface-dark: #101010;
  --cal-surface-dark-elevated: #1a1a1a;
  --cal-on-primary: #ffffff;
  --cal-on-dark: #ffffff;
  --cal-on-dark-soft: #a1a1aa;
  --cal-brand-accent: #3b82f6;
  --cal-success: #10b981;
  --cal-warning: #f59e0b;
  --cal-error: #ef4444;
  --cal-badge-orange: #fb923c;
  --cal-badge-pink: #ec4899;
  --cal-badge-violet: #8b5cf6;
  --cal-badge-emerald: #34d399;

  /* 2. Border Radius Scale */
  --rounded-xs: 4px;
  --rounded-sm: 6px;
  --rounded-md: 8px; /* buttons, inputs, category tabs */
  --rounded-lg: 12px; /* content cards, bento boxes */
  --rounded-xl: 16px; /* hero app-mockup container */
  --rounded-pill: 9999px; /* nav-pill-group, badge pills */
  --rounded-full: 9999px; /* avatars, icon buttons */

  /* 3. Spacing System */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-section: 96px;

  /* 4. Typography Fonts */
  --font-display: 'Prompt', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* 5. Legacy Variable Overrides (Enforces White Canvas & Cal.com Tokens) */
  --canvas-bg: #ffffff !important;
  --bento-card-bg: #ffffff !important;
  --bento-card-inset: #f8f9fa !important;
  --bento-card-hover: #ffffff !important;
  --border-subtle: #e5e7eb !important;
  --border-medium: #d1d5db !important;
  --border-strong: #111111 !important;
  --text-main: #374151 !important;
  --text-muted: #6b7280 !important;
  --text-dim: #9ca3af !important;
  --text-white: #111111 !important;
  --text-dark: #111111 !important;
  --coral-primary: #111111 !important;
  --coral-hover: #242424 !important;
  --accent-gold: #111111 !important;
  --pill-radius: 9999px !important;
  --bento-radius: 12px !important;
}

/* ==========================================================================
   BASE & RESET
   ========================================================================== */
* {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  box-sizing: border-box;
}

html, body {
  background-color: #07050d !important;
  background: #07050d !important;
  color: #f3f4f6 !important;
  font-family: var(--font-body) !important;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden !important;
}

/* Remove legacy mystical gradients, floating orbs, stars */
.orb, .canvas-bg-orbs, .holographic-sheen, .stars-container, .mobile-top-header {
  display: none !important;
}

.app-shell {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  background: transparent !important;
  background-color: transparent !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* ==========================================================================
   1. TOP NAVIGATION (top-nav - 64px, White Canvas, Hairline Border)
   ========================================================================== */
.app-top-navbar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 64px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.top-nav-inner {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

/* Brand Wordmark */
.top-nav-brand {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
}
.top-nav-brand .brand-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #111111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}
.top-nav-brand .brand-avatar svg,
.top-nav-brand .brand-avatar .brand-svg {
  fill: #ffffff !important;
  stroke: none !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}
.top-nav-brand .brand-title {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: #111111 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.top-nav-brand .brand-dot-life {
  color: #6b7280 !important;
  font-weight: 500 !important;
}

/* Nav Pill Group (Cal.com Signature Pill-in-Pill Switcher - Dark Celestial Theme) */
.top-nav-tabs {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(18, 13, 34, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  gap: 3px !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.top-nav-tabs .sidebar-nav-item {
  width: auto !important;
  height: 34px !important;
  min-height: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 16px !important;
  border-radius: 9999px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #9ca3af !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transform: none !important;
  box-shadow: none !important;
  position: relative !important;
}
.top-nav-tabs .sidebar-nav-item span {
  white-space: nowrap !important;
  display: inline-block !important;
  font-weight: inherit !important;
  line-height: 1 !important;
}
.top-nav-tabs .sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  transform: none !important;
}
.top-nav-tabs .sidebar-nav-item.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.24) 0%, rgba(217, 119, 6, 0.16) 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid rgba(251, 191, 36, 0.65) !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35), inset 0 0 10px rgba(245, 158, 11, 0.15) !important;
  transform: none !important;
}
.top-nav-tabs .sidebar-nav-item.active svg {
  stroke: #fbbf24 !important;
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.7)) !important;
}
.top-nav-tabs .sidebar-nav-item::before,
.top-nav-tabs .sidebar-nav-item.active::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}
.top-nav-tabs .sidebar-nav-item svg {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  flex-shrink: 0 !important;
  transition: stroke 0.2s ease, filter 0.2s ease !important;
}

/* Right Nav Controls */
.top-nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.nav-icon-btn {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #111111 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.nav-icon-btn:hover {
  background: #f5f5f5 !important;
  border-color: #d1d5db !important;
}

.top-nav-user {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 3px 6px 3px 10px !important;
  background: #f8f9fa !important;
  border-radius: 9999px !important;
  border: 1px solid #e5e7eb !important;
}
.top-nav-user .capsule-name {
  color: #111111 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.top-nav-user .coin-pill {
  padding: 5px 12px !important;
  background: #111111 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: background 0.15s ease !important;
}
.top-nav-user .coin-pill:hover {
  background: #242424 !important;
}

/* ==========================================================================
   2. MAIN WORKSPACE LAYOUT (hero-band & 1200px max width)
   ========================================================================== */
.app-main-layout {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 3.5rem 1.5rem 6rem !important;
}

/* Cal Sans & Prompt Display Typography */
h1, h2, h3, .hero-headline, .paper-title, .bento-title, .section-title {
  font-family: var(--font-display) !important;
  color: #111111 !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
}
.hero-headline {
  font-size: 2.75rem !important;
  line-height: 1.15 !important;
  text-align: center !important;
  margin-bottom: 0.75rem !important;
}
.hero-subhead {
  font-size: 1.125rem !important;
  color: #6b7280 !important;
  text-align: center !important;
  max-width: 640px !important;
  margin: 0 auto 2.5rem !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   3. PRODUCT MOCKUP CARDS & BENTO CONTAINERS (rounded 16px, 1px hairline)
   ========================================================================== */
.bento-card, .product-mockup-card, .hero-app-mockup-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  color: #374151 !important;
  padding: 2.25rem 2rem !important;
  margin-bottom: 2rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.bento-card:hover {
  border-color: #d1d5db !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}

.bento-card-header {
  border-bottom: 1px solid #f3f4f6 !important;
  padding-bottom: 1.25rem !important;
  margin-bottom: 1.75rem !important;
}
.bento-title {
  font-size: 1.25rem !important;
  color: #111111 !important;
  font-weight: 600 !important;
}
.bento-desc {
  font-size: 0.9rem !important;
  color: #6b7280 !important;
  margin-top: 0.25rem !important;
}

/* Light Gray Feature Subcards (#f5f5f5) */
.bento-subcard, .card-surface-soft, .feature-box, .tarot-card-face {
  background: #f5f5f5 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
  color: #374151 !important;
}

/* ==========================================================================
   4. BUTTONS & ACTIONS (button-primary: #111111, rounded.md: 8px)
   ========================================================================== */
.btn-primary, .btn-gold, .btn-coral-pill, .btn-primary-cal, .btn-primary-gradient, .pill-btn {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #111111 !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 42px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  text-decoration: none !important;
}
.btn-primary:hover, .btn-gold:hover, .btn-coral-pill:hover, .pill-btn:hover {
  background: #242424 !important;
  border-color: #242424 !important;
}
.btn-primary:active, .btn-gold:active, .btn-coral-pill:active, .pill-btn:active {
  transform: scale(0.98) !important;
}

/* Secondary Button (White canvas with hairline outline) */
.btn-secondary, .btn-outline, .btn-ghost {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 42px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover {
  background: #f8f9fa !important;
  border-color: #d1d5db !important;
}

/* ==========================================================================
   5. FORM INPUTS & TEXTFIELDS (text-input: 8px rounded, 40px height)
   ========================================================================== */
input[type="text"], input[type="email"], input[type="password"], textarea, select, .bento-input-pill, .bento-textarea {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  width: 100% !important;
}
input:focus, textarea:focus, select:focus, .bento-input-pill:focus, .bento-textarea:focus {
  border-color: #111111 !important;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08) !important;
}
input::placeholder, textarea::placeholder {
  color: #9ca3af !important;
}

.input-pill-wrapper {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
}
.input-pill-wrapper input {
  border: none !important;
  box-shadow: none !important;
  padding: 8px !important;
}

.field-label, label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ==========================================================================
   6. SECTION 3: SPLIT CARD-BY-CARD DIVINATION BENTO CARDS
   ========================================================================== */
.card-split-item {
  background: #110d22 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.card-split-item:hover {
  border-color: rgba(251, 191, 36, 0.4) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9) !important;
}
.card-split-media {
  width: 175px !important;
  min-width: 175px !important;
  max-width: 175px !important;
  background: #090614 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 1.5rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
.card-split-img-wrap,
.card-split-img-wrapper {
  width: 120px !important;
  height: auto !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.9), 0 0 15px rgba(245, 158, 11, 0.25) !important;
  background: #000000 !important;
}
.card-split-img,
.card-split-img-wrapper img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.card-split-position-badge {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #fbbf24 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.35 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
}

/* Status Badges */
.card-split-status-badge {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}
.card-split-status-badge.upright {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}
.card-split-status-badge.reversed {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fef08a !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

.card-split-content {
  flex: 1 !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.card-split-title {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 0.85rem !important;
  line-height: 1.4 !important;
}

/* Symbology Box */
.split-inner-box.symbology-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px !important;
  padding: 1rem 1.15rem !important;
  margin-bottom: 0.75rem !important;
}
.split-inner-box.symbology-box .inner-box-title {
  color: #fbbf24 !important;
  font-weight: 700 !important;
}
.split-inner-box.symbology-box .inner-box-content {
  color: #f3f4f6 !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

/* Divination Box */
.split-inner-box.divination-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px !important;
  padding: 1rem 1.15rem !important;
}
.split-inner-box.divination-box .inner-box-title {
  color: #f59e0b !important;
  font-weight: 700 !important;
}
.split-inner-box.divination-box .inner-box-content {
  color: #f3f4f6 !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   7. ALL-IN-ONE PAYWALL & PRICING TIERS (Pro Tier Inverted to Black #101010)
   ========================================================================== */
.paywall-modal-card {
  max-width: 660px !important;
  width: 95% !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 2.25rem 2rem !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.12) !important;
  color: #111111 !important;
}
.paywall-title {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin-bottom: 0.5rem !important;
}
.paywall-subtitle {
  font-size: 0.95rem !important;
  color: #6b7280 !important;
}

/* Standard Pricing Cards */
.topup-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  color: #111111 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: left;
}
.topup-card:hover {
  border-color: #111111 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
.topup-card.selected {
  border-color: #111111 !important;
  box-shadow: 0 0 0 2px #111111 !important;
}

/* FEATURED PRICING TIER (PRO ฿89): INVERTED TO DEEP BLACK #101010 */
.topup-card.popular, .pricing-tier-card-featured {
  background: #101010 !important;
  color: #ffffff !important;
  border: 1px solid #101010 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18) !important;
}
.topup-card.popular .pkg-title, .topup-card.popular .pkg-coins {
  color: #ffffff !important;
}
.topup-card.popular .pkg-price {
  color: #ffffff !important;
}
.topup-card.popular .pkg-desc {
  color: #a1a1aa !important;
}
.topup-card.popular .pkg-badge {
  background: #fb923c !important;
  color: #111111 !important;
  font-weight: 700 !important;
}

/* Benefit Items */
.benefit-item {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem !important;
}
.benefit-text strong {
  color: #111111 !important;
}
.benefit-text span {
  color: #6b7280 !important;
}

/* ==========================================================================
   8. SIGNATURE CAL.COM DARK FOOTER (footer: #101010)
   ========================================================================== */
.cal-footer {
  background: #101010 !important;
  color: #a1a1aa !important;
  padding: 64px 24px 36px !important;
  margin-top: auto !important;
  border-top: 1px solid #242424 !important;
}
.cal-footer-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
.cal-footer-grid {
  display: grid !important;
  grid-template-columns: 2.2fr 1.2fr 1.2fr 1.4fr !important;
  gap: 3rem !important;
  margin-bottom: 48px !important;
}
.cal-footer-brand .footer-logo-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin-bottom: 1rem !important;
}
.cal-footer-brand .footer-logo-badge {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #101010 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
.cal-footer-brand .footer-logo-text {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
}
.cal-footer-brand .footer-tagline {
  font-size: 14px !important;
  color: #a1a1aa !important;
  line-height: 1.6 !important;
  max-width: 340px !important;
  margin-bottom: 1.25rem !important;
}
.footer-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #1a1a1a !important;
  border: 1px solid #2e2e2e !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 12.5px !important;
  color: #e5e7eb !important;
}
.footer-badge-pill .status-indicator {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
}

.cal-footer-col .footer-col-title {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 1.15rem !important;
  letter-spacing: -0.01em !important;
}
.cal-footer-col .footer-link-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.cal-footer-col .footer-link-list a {
  color: #a1a1aa !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  transition: color 0.15s ease !important;
}
.cal-footer-col .footer-link-list a:hover {
  color: #ffffff !important;
}

.cal-footer-bottom {
  border-top: 1px solid #242424 !important;
  padding-top: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  color: #71717a !important;
}
.cal-footer-bottom .footer-links-inline {
  display: flex !important;
  gap: 10px !important;
}

/* ==========================================================================
   9. MODALS & DIALOGS (Fixed Fullscreen Overlay with High Z-Index)
   ========================================================================== */
.modal-backdrop, .auth-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  overflow-y: auto !important;
}
.bento-modal-card, .auth-modal, .modal-card, .wallet-modal {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  color: #111111 !important;
  padding: 2rem !important;
  position: relative !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}
.bento-modal-close {
  background: #f8f9fa !important;
  color: #111111 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.bento-modal-close:hover {
  background: #e5e7eb !important;
}

/* ==========================================================================
   10. DAILY FORTUNE WIDGET & WCAG HIGH-CONTRAST SYSTEM
   ========================================================================== */
.daily-altar-widget {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.daily-widget-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
}

.daily-widget-title {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin: 0.35rem 0 0.25rem !important;
  letter-spacing: -0.02em !important;
}

.daily-widget-sub, #altarDailyPlanetSub {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #4b5563 !important; /* High contrast readable slate, no more pale gray! */
  line-height: 1.5 !important;
  display: block !important;
}

/* 4 Lucky Colors Grid */
.altar-colors-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.altar-color-pill {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.altar-color-pill:hover {
  background: #ffffff !important;
  border-color: #111111 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.altar-color-dot {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 1px #d1d5db !important;
}

.altar-color-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.altar-color-label {
  color: #6b7280 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.altar-color-name {
  color: #111111 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

/* Lucky Numbers Strip */
.altar-numbers-strip {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #111111 !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.altar-num-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.altar-num-label {
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.altar-num-pill {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 2px 8px !important;
}

.altar-time-text {
  color: #4b5563 !important;
  font-size: 13px !important;
}
.altar-time-text strong {
  color: #111111 !important;
}

/* Checkin Button */
#altarQuickCheckinBtn, .streak-btn {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #111111 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#altarQuickCheckinBtn:hover, .streak-btn:hover {
  background: #242424 !important;
}

/* Eyebrow Pills */
.eyebrow-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  border: 1px solid #e5e7eb !important;
}
.eyebrow-pill.emerald, .eyebrow-pill.free-pill {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border-color: #a7f3d0 !important;
}
.eyebrow-pill.gold {
  background: #fffbeb !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}

.eyebrow-hint {
  font-size: 12.5px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  margin-left: 8px !important;
}

/* Quick Category Tabs */
.quick-category-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 1.25rem !important;
  background: #f8f9fa !important;
  padding: 4px !important;
  border-radius: 9999px !important;
  border: 1px solid #e5e7eb !important;
  width: fit-content !important;
}
.quick-cat-tab {
  background: transparent !important;
  border: none !important;
  color: #6b7280 !important;
  padding: 6px 16px !important;
  border-radius: 9999px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.quick-cat-tab:hover {
  color: #111111 !important;
}
.quick-cat-tab.active {
  background: #ffffff !important;
  color: #111111 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Quick Question Chips */
.quick-questions-wrapper {
  margin-top: 1rem !important;
}
.quick-questions-pane {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
.quick-question-chip {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  text-align: left !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.quick-question-chip:hover {
  border-color: #111111 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
.chip-q-text {
  color: #111111 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.chip-spread-tag {
  color: #6b7280 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}

/* ==========================================================================
   11. RESPONSIVE BREAKPOINTS (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 1024px) {
  .cal-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}

@media (max-width: 768px) {
  .hero-headline {
    font-size: 2rem !important;
  }
  .app-main-layout {
    padding: 1.5rem 1rem 4rem !important;
  }
  .top-nav-tabs .sidebar-nav-item span {
    font-size: 12px !important;
  }
  .cal-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .cal-footer-bottom {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }
  .card-split-item {
    flex-direction: column !important;
    align-items: center !important;
  }
  .card-split-media {
    width: 130px !important;
  }
  .altar-colors-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .quick-questions-pane {
    grid-template-columns: 1fr !important;
  }
}

.modal-backdrop.hidden, .auth-backdrop.hidden, .nav-icon-btn.hidden, #sidebarAdminBtn.hidden, .hidden, [hidden], *.hidden {
  display: none !important;
}

/* ==========================================================================
   13. UNIFIED SPREAD & CARD PICKER (Cal.com Clean Single Bento Card)
   ========================================================================== */
.unified-picker-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 1.75rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}
.unified-deck-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
  flex-wrap: wrap !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid #f3f4f6 !important;
}
.unified-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.unified-spread-title {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}
.spread-slots-container {
  margin-bottom: 1.5rem !important;
  padding: 0.25rem 0 !important;
}
.unified-wheel-mat {
  background: radial-gradient(circle at 50% 95%, #181924 0%, #0d0e14 80%) !important;
  border: 1px solid #27272a !important;
  border-radius: 16px !important;
  padding: 1.5rem 1rem 1rem !important;
  position: relative !important;
  overflow: hidden !important;
}
.wheel-status-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 1rem !important;
  color: #e4e4e7 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.wheel-status-bar .pos-highlight {
  color: #fbbf24 !important;
  font-weight: 600 !important;
}
.unified-wheel-mat .deck-wheel-wrapper {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ==========================================================================
   14. DECK VIEW SWITCHER (Segmented Pill)
   ========================================================================== */
.deck-view-switcher {
  display: flex !important;
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  padding: 3px !important;
  gap: 3px !important;
}
.deck-view-pill {
  background: transparent !important;
  border: none !important;
  color: #6b7280 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}
.deck-view-pill:hover {
  color: #111111 !important;
}
.deck-view-pill.active {
  background: #ffffff !important;
  color: #111111 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
/* ==========================================================================
   15. FULLSCREEN LOADING OVERLAY (Dark Obsidian 3D Shuffling Tarot Modal)
   ========================================================================== */
.divination-fullscreen-loading {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(8, 4, 18, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 1rem !important;
}

.loading-cosmic-modal {
  background: rgba(13, 8, 30, 0.96) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.35) !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 45px rgba(245, 158, 11, 0.2) !important;
  padding: 2.25rem 2rem 2rem !important;
  max-width: 460px !important;
  width: 95% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  color: #ffffff !important;
}

.loading-shuffle-stage {
  position: relative !important;
  width: 140px !important;
  height: 140px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.25rem !important;
}

.loading-shuffle-deck {
  position: relative !important;
  width: 68px !important;
  height: 104px !important;
  z-index: 2 !important;
}

.loading-shuffle-card {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
  transition: transform 0.4s ease !important;
}

.loading-shuffle-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.loading-shuffle-card.lc-1 {
  animation: shuffleFloat1 3s ease-in-out infinite !important;
}
.loading-shuffle-card.lc-2 {
  animation: shuffleFloat2 3s ease-in-out infinite 0.4s !important;
}
.loading-shuffle-card.lc-3 {
  animation: shuffleFloat3 3s ease-in-out infinite 0.8s !important;
}
.loading-shuffle-card.lc-4 {
  animation: shuffleFloat4 3s ease-in-out infinite 1.2s !important;
}
.loading-shuffle-card.lc-center {
  z-index: 5 !important;
  animation: shuffleCenterPulse 2.5s ease-in-out infinite !important;
}

@keyframes shuffleFloat1 {
  0%, 100% { transform: translate(-30px, -10px) rotate(-16deg) scale(0.85); opacity: 0.8; }
  50% { transform: translate(-10px, 12px) rotate(-6deg) scale(0.95); opacity: 1; }
}
@keyframes shuffleFloat2 {
  0%, 100% { transform: translate(30px, -12px) rotate(16deg) scale(0.85); opacity: 0.8; }
  50% { transform: translate(12px, 10px) rotate(6deg) scale(0.95); opacity: 1; }
}
@keyframes shuffleFloat3 {
  0%, 100% { transform: translate(-20px, 18px) rotate(-10deg) scale(0.8); opacity: 0.7; }
  50% { transform: translate(-28px, -8px) rotate(-18deg) scale(0.9); opacity: 1; }
}
@keyframes shuffleFloat4 {
  0%, 100% { transform: translate(22px, 18px) rotate(12deg) scale(0.8); opacity: 0.7; }
  50% { transform: translate(28px, -6px) rotate(18deg) scale(0.9); opacity: 1; }
}
@keyframes shuffleCenterPulse {
  0%, 100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); }
  50% { transform: scale(1.06) rotate(1deg); box-shadow: 0 0 35px rgba(245, 158, 11, 0.7); }
}

.loading-mystic-portal {
  position: absolute !important;
  inset: -15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.loading-portal-ring {
  position: absolute !important;
  border-radius: 50% !important;
  border: 1.5px dashed rgba(251, 191, 36, 0.4) !important;
}

.loading-portal-ring.l-ring-1 {
  width: 130px !important;
  height: 130px !important;
  animation: spinClockwise 12s linear infinite !important;
}

.loading-portal-ring.l-ring-2 {
  width: 155px !important;
  height: 155px !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  animation: spinCounterClockwise 16s linear infinite !important;
}

.loading-portal-glow {
  position: absolute !important;
  width: 90px !important;
  height: 90px !important;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.35) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  animation: pulseGlow 3s ease-in-out infinite !important;
}

@keyframes spinClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spinCounterClockwise {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.loading-brand-pill {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
  color: #fbbf24 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 14px !important;
  border-radius: 9999px !important;
  margin-bottom: 0.75rem !important;
  display: inline-block !important;
}

.loading-main-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.45 !important;
  margin: 0.4rem 0 0.35rem !important;
}

.loading-sub-text {
  font-size: 13.5px !important;
  color: #d1d5db !important;
  line-height: 1.5 !important;
  margin: 0 0 1.25rem !important;
}

.loading-progress-track {
  width: 100% !important;
  max-width: 320px !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  margin: 0 auto !important;
}

.loading-progress-glow {
  height: 100% !important;
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.6) !important;
  animation: progressGlowAnim 2s infinite ease-in-out !important;
}

@keyframes progressGlowAnim {
  0% { width: 10%; }
  50% { width: 75%; }
  100% { width: 95%; }
}

/* ==========================================================================
   16. STEP 3 FLIPBOOK & DESTINY BOOK (Cal.com Clean SaaS Overhaul)
   ========================================================================== */
.flipbook-page-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 14px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
  margin-bottom: 1rem !important;
}

/* Page 1: Executive Verdict Card */
.executive-verdict-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  padding: 2rem !important;
  color: #111111 !important;
  margin-bottom: 1.25rem !important;
}
.exec-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.25rem !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.exec-badge-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.exec-tag.verdict {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #065f46 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
}
.exec-tag.prob {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  color: #111111 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
}
.exec-header span:last-child {
  font-size: 13px !important;
  color: #4b5563 !important;
  font-weight: 600 !important;
}
.exec-question {
  font-size: 1.05rem !important;
  color: #111111 !important;
  font-weight: 600 !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.5 !important;
}
.exec-question em {
  font-style: normal !important;
  color: #4b5563 !important;
}
.exec-verdict-banner {
  background: #111111 !important;
  border: 1px solid #111111 !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}
.exec-verdict-title {
  color: #fbbf24 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.5rem !important;
}
.exec-verdict-text {
  color: #ffffff !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  margin-bottom: 0.75rem !important;
}
.exec-momentum-text {
  color: #d1d5db !important;
  font-size: 13.5px !important;
  border-top: 1px solid #27272a !important;
  padding-top: 0.75rem !important;
  margin-top: 0.75rem !important;
}
.exec-momentum-text strong {
  color: #ffffff !important;
}
.exec-other-card {
  background: #faf5ff !important;
  border: 1px solid #e9d5ff !important;
  border-radius: 12px !important;
  padding: 1.15rem 1.25rem !important;
  margin-bottom: 1.25rem !important;
}
.exec-other-card div:first-child {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #7e22ce !important;
  margin-bottom: 0.35rem !important;
}
.exec-other-card div:last-child {
  font-size: 14px !important;
  color: #3b0764 !important;
  line-height: 1.6 !important;
}
.exec-clues-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 1.25rem !important;
}
.exec-clue-box {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 1.15rem 1.25rem !important;
}
.exec-clue-title {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  margin-bottom: 0.35rem !important;
}
.exec-clue-desc {
  color: #374151 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
.exec-flags-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 1.25rem !important;
}
.exec-flag-card.green {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 12px !important;
  padding: 1.15rem 1.25rem !important;
}
.exec-flag-card.green .exec-flag-header {
  color: #047857 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  margin-bottom: 0.35rem !important;
}
.exec-flag-card.green .exec-flag-text {
  color: #064e3b !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
.exec-flag-card.red {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 12px !important;
  padding: 1.15rem 1.25rem !important;
}
.exec-flag-card.red .exec-flag-header {
  color: #b91c1c !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  margin-bottom: 0.35rem !important;
}
.exec-flag-card.red .exec-flag-text {
  color: #7f1d1d !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
.exec-golden-rule {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
}
.exec-golden-title {
  color: #92400e !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.35rem !important;
}
.exec-golden-quote {
  color: #451a03 !important;
  font-style: italic !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   17. COMPREHENSIVE WCAG AAA HIGH-CONTRAST TYPOGRAPHY & CARD PALETTE
   (Enforces readable deep charcoal / black on all light surfaces)
   ========================================================================== */

/* 1. SPREAD SLOTS (STEP 2) */
.slot-box.empty {
  background: #f8f9fa !important;
  border: 2px dashed #d1d5db !important;
  color: #6b7280 !important;
  box-shadow: none !important;
}
.slot-box.empty:hover {
  background: #ffffff !important;
  border-color: #111111 !important;
  color: #111111 !important;
}
.slot-empty-icon {
  color: #9ca3af !important;
}
.slot-empty-text {
  color: #4b5563 !important;
  font-weight: 600 !important;
}
.slot-pos-badge {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
}
.slot-card-name {
  color: #374151 !important;
  font-weight: 600 !important;
}
.slot-status-text {
  color: #6b7280 !important;
}

/* 2. READING PAPER CARD & ALL MARKDOWN CONTENT (STEP 3 PAGE 3) */
.reading-paper-card {
  background: #0d091a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 2.25rem !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.8) !important;
  color: #f3f4f6 !important;
}
.paper-title {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin-top: 0.35rem !important;
}

/* Force all text in reading-body & markdown-body to be crystal-clear, bright & legible */
.reading-body,
.markdown-body,
#readingMarkdownBody {
  color: #f3f4f6 !important; /* Clean readable crisp ivory-white */
  font-size: 15.5px !important;
  line-height: 1.85 !important;
}

.reading-body p, .markdown-body p,
.reading-body li, .markdown-body li,
.reading-body span, .markdown-body span,
.reading-body div, .markdown-body div {
  color: #f3f4f6 !important;
  line-height: 1.85 !important;
}

.reading-body strong, .markdown-body strong {
  color: #fbbf24 !important; /* Golden glowing highlights for key terms */
  font-weight: 700 !important;
}

.reading-body h1, .markdown-body h1,
.reading-body h2, .markdown-body h2,
.reading-body h3, .markdown-body h3,
.reading-body h4, .markdown-body h4,
.reading-body h5, .markdown-body h5 {
  color: #ffffff !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-bottom: 0.5rem !important;
  margin-top: 1.5rem !important;
}

.reading-body em, .markdown-body em {
  color: #e2e8f0 !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

.reading-body blockquote, .markdown-body blockquote {
  border-left: 3px solid #fbbf24 !important;
  background: rgba(245, 158, 11, 0.08) !important;
  color: #fef3c7 !important;
  padding: 0.85rem 1.25rem !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 1.25rem 0 !important;
}

.reading-body ul, .markdown-body ul,
.reading-body ol, .markdown-body ol {
  padding-left: 1.4rem !important;
  margin-bottom: 1rem !important;
}

/* 3. SPLIT CARD BOXES (Symbology & Divination Boxes) */
.card-split-item {
  background: rgba(22, 17, 36, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  color: #f3f4f6 !important;
}
.card-split-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
}
.split-inner-box.symbology-box,
.split-inner-box.divination-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 0.75rem !important;
}
.split-box-label {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.35rem !important;
}
.split-box-text,
.split-box-text p,
.split-box-text span {
  color: #f3f4f6 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* 4. EXECUTIVE VERDICT CLUES & QUESTIONS (STEP 3 PAGE 1) */
.exec-question {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.exec-question em {
  color: #fbbf24 !important;
  font-style: normal !important;
}
.exec-clue-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.exec-clue-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.exec-clue-desc,
.exec-clue-desc p,
.exec-clue-desc span,
.exec-clue-desc li {
  color: #e5e7eb !important;
  line-height: 1.6 !important;
}

/* 5. ELEMENTAL & ADVICE PAGES (STEP 3 PAGE 2 & 4) */
.elemental-banner,
.reading-advice-page-card,
.birthchart-synergy-card {
  background: #0d091a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important;
  border-radius: 18px !important;
  color: #f3f4f6 !important;
}
.elemental-banner h1, .elemental-banner h2, .elemental-banner h3, .elemental-banner h4,
.elemental-banner strong, .reading-advice-page-card h1, .reading-advice-page-card h2,
.reading-advice-page-card h3, .reading-advice-page-card h4, .reading-advice-page-card strong {
  color: #ffffff !important;
}
.elemental-banner p, .elemental-banner li, .elemental-banner span,
.reading-advice-page-card p, .reading-advice-page-card li, .reading-advice-page-card span {
  color: #f3f4f6 !important;
}

/* 6. FOLLOWUP SECTION (STEP 3 PAGE 5 & HISTORY DETAIL MODAL) */
.followup-section,
.detail-followup-section {
  background: #0d091a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important;
  border-radius: 18px !important;
}
.followup-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.followup-sub {
  color: #9ca3af !important;
  font-size: 13.5px !important;
}
.followup-input-wrapper input {
  background: rgba(22, 17, 36, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}
.followup-input-wrapper input::placeholder {
  color: #9ca3af !important;
}

/* Follow-up Thread Container & Bubbles */
.followup-thread-container,
#detailFollowupThread {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-top: 1rem !important;
  margin-bottom: 1.25rem !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  padding: 4px !important;
}
.followup-thread-item {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.followup-q-bubble {
  align-self: flex-end !important;
  max-width: 88% !important;
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  border-radius: 16px 16px 4px 16px !important;
  padding: 10px 16px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}
.followup-q-bubble strong,
.followup-q-bubble .fu-author {
  color: #111827 !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.followup-q-bubble p {
  color: #1f2937 !important;
  margin: 0 !important;
  font-size: 14px !important;
}
.followup-q-bubble .q-icon {
  font-size: 13px !important;
  margin-right: 4px !important;
}
.followup-a-bubble {
  align-self: flex-start !important;
  max-width: 95% !important;
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 16px 16px 16px 4px !important;
  padding: 16px 20px !important;
  color: #1f2937 !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}
.followup-a-bubble .a-header,
.followup-a-bubble .fu-author {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #b45309 !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  padding-bottom: 6px !important;
}
.followup-a-bubble .a-header span,
.followup-a-bubble .fu-author span {
  color: #b45309 !important;
  font-weight: 800 !important;
}
.followup-a-bubble .a-content,
.followup-a-bubble .reading-body,
.followup-a-bubble div {
  color: #1f2937 !important;
}
.followup-a-bubble p,
.followup-a-bubble .a-content p,
.followup-a-bubble .reading-body p {
  color: #374151 !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  margin-bottom: 0.85rem !important;
}
.followup-a-bubble strong,
.followup-a-bubble .a-content strong,
.followup-a-bubble .reading-body strong {
  color: #111827 !important;
  font-weight: 700 !important;
}
.followup-a-bubble h1,
.followup-a-bubble h2,
.followup-a-bubble h3,
.followup-a-bubble h4,
.followup-a-bubble h5,
.followup-a-bubble .a-content h1,
.followup-a-bubble .a-content h2,
.followup-a-bubble .a-content h3,
.followup-a-bubble .a-content h4,
.followup-a-bubble .a-content h5,
.followup-a-bubble .reading-body h1,
.followup-a-bubble .reading-body h2,
.followup-a-bubble .reading-body h3,
.followup-a-bubble .reading-body h4,
.followup-a-bubble .reading-body h5 {
  color: #b45309 !important;
  font-weight: 800 !important;
  margin-top: 1.15rem !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.4 !important;
  font-size: 15.5px !important;
}
.followup-a-bubble ul,
.followup-a-bubble ol,
.followup-a-bubble .a-content ul,
.followup-a-bubble .a-content ol,
.followup-a-bubble .reading-body ul,
.followup-a-bubble .reading-body ol {
  padding-left: 1.25rem !important;
  margin-bottom: 0.85rem !important;
}
.followup-a-bubble li,
.followup-a-bubble .a-content li,
.followup-a-bubble .reading-body li {
  color: #374151 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-bottom: 0.35rem !important;
}
.followup-a-bubble blockquote,
.followup-a-bubble .a-content blockquote,
.followup-a-bubble .reading-body blockquote {
  background: #f9fafb !important;
  border-left: 3px solid #f59e0b !important;
  color: #1f2937 !important;
  padding: 10px 14px !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 0.85rem 0 !important;
  font-style: italic !important;
}
.followup-a-bubble code,
.followup-a-bubble .a-content code,
.followup-a-bubble .reading-body code {
  background: #f3f4f6 !important;
  color: #111827 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
}
.followup-thread-item.loading .a-content p {
  color: #6b7280 !important;
  font-style: italic !important;
}


/* Flipbook Bottom Navigation */
.flipbook-nav-bar {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 1.5rem !important;
}
.flipbook-dot {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #4b5563 !important;
  font-weight: 600 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.flipbook-dot.active {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}
.flipbook-page-title-hint {
  color: #6b7280 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.flipbook-nav-btn {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  color: #111111 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.flipbook-nav-btn:hover:not(:disabled) {
  background: #e5e7eb !important;
}
.flipbook-nav-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}
.flipbook-final-actions {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1rem !important;
}

/* ==========================================================================
   18. STEP 1: DIVINATION SETUP & FORM MASTER OVERHAUL
   (Eliminates dark charcoal boxes and pale text on Step 1)
   ========================================================================== */
.card-setup {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 2.25rem 2rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}
.card-headline {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.25rem !important;
}

/* 1. Quick Prompts Container (Was dark navy #0e1424) */
.quick-prompts-container {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 1.25rem 1.4rem !important;
  margin-bottom: 1.5rem !important;
}
.quick-prompts-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1rem !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.quick-prompts-badge {
  color: #111111 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}
.quick-prompts-hint {
  color: #6b7280 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  margin-left: 6px !important;
}
.quick-surprise-btn {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  color: #111111 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.quick-surprise-btn:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
}

/* 2. Spread Picker Cards (Were dark charcoal #0b0f1a) */
.spread-picker-header label.field-label {
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.spread-picker-hint {
  color: #6b7280 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.spread-picker-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 0.75rem !important;
}
.spread-card-item {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1.15rem 1.25rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  color: #111111 !important;
}
.spread-card-item:hover {
  border-color: #111111 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}
.spread-card-item.active {
  background: #ffffff !important;
  border: 2px solid #111111 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1) !important;
}
.spread-card-item.active::before {
  display: none !important;
}
.spread-card-item .sc-name {
  color: #111111 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  margin-bottom: 0.25rem !important;
}
.spread-card-item.active .sc-name {
  color: #111111 !important;
  text-shadow: none !important;
}
.spread-card-item .sc-sub {
  color: #4b5563 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.spread-card-item .sc-cost-badge {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  color: #111111 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
}
.spread-card-item.active .sc-cost-badge {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
  box-shadow: none !important;
}
.spread-card-item .sc-check {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* 3. Checkboxes & Labels (Were white #e2e8f0 on white) */
.bento-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0.85rem 0 !important;
  cursor: pointer !important;
}
.checkbox-box {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  border: 1.5px solid #d1d5db !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}
.bento-checkbox input:checked + .checkbox-box {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}
.checkbox-text {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #111111 !important; /* CRITICAL: High-contrast black text */
  user-select: none !important;
}

/* 4. Birth Chart Drawer (Was dark purple #1e1b4b) */
.birthchart-drawer {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.birthchart-drawer-title {
  color: #111111 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}
.birthchart-inputs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 1rem !important;
}
.bento-field-group label.field-label {
  color: #111111 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 0.35rem !important;
}
.bento-field-group input, 
.bento-field-group select, 
.bento-input-pill,
#destinyQuestion {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  color: #111111 !important;
  font-size: 14px !important;
}
#destinyQuestion {
  width: 100% !important;
  min-height: 90px !important;
  padding: 12px 14px !important;
  line-height: 1.6 !important;
  resize: vertical !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
#destinyQuestion:focus {
  border-color: #111111 !important;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08) !important;
}
#destinyQuestion::placeholder,
.bento-input-pill::placeholder {
  color: #9ca3af !important;
}

/* ==========================================================================
   19. TAB 5: HISTORY & ARCHIVE MASTER OVERHAUL
   ========================================================================== */
.history-hero-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  margin-bottom: 1.5rem !important;
}
.history-filter-row {
  display: flex !important;
  gap: 8px !important;
  margin: 1.25rem 0 !important;
  flex-wrap: wrap !important;
}
.history-filter-pill {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.history-filter-pill.active {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.history-search-wrapper {
  position: relative !important;
  width: 100% !important;
}
#historySearchInput {
  width: 100% !important;
  height: 42px !important;
  padding: 10px 14px 10px 38px !important;
  border-radius: 10px !important;
}
.history-search-wrapper .search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  color: #9ca3af !important;
}
.history-list-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 1rem !important;
}
.history-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1.25rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}
.history-card:hover {
  border-color: #111111 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}
.history-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.history-date-badge {
  font-size: 12px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}
.history-question {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
.history-verdict-snippet {
  background: #f8f9fa !important;
  border-left: 3px solid #111111 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: #27272a !important;
  line-height: 1.5 !important;
}
.history-verdict-snippet strong {
  color: #111111 !important;
}
.history-verdict-snippet div {
  color: #4b5563 !important;
}
.history-notes-badge {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  color: #4b5563 !important;
}
.history-empty-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 3rem 2rem !important;
  text-align: center !important;
  color: #111111 !important;
}
.history-empty-card .empty-title {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
}
.history-empty-card .empty-sub {
  color: #6b7280 !important;
  font-size: 14px !important;
}

/* ==========================================================================
   20. TAB 2: WALLPAPER PRODUCT MASTER OVERHAUL
   ========================================================================== */
.wallpaper-hero-card, .wallpaper-preview-bento {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  color: #111111 !important;
}
.wallpaper-setup-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1rem !important;
  margin: 1.25rem 0 !important;
}
.wallpaper-cost-hint {
  color: #4b5563 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.wallpaper-mantra-box {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin-top: 1.25rem !important;
}
.mantra-title {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  margin-bottom: 0.35rem !important;
}
.mantra-body {
  color: #27272a !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   21. TAB 1: DAILY ALTAR & STREAK OVERHAUL
   ========================================================================== */
.daily-free-draw-card, .streak-daily-preview-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  color: #111111 !important;
  margin-top: 1.25rem !important;
}
.daily-free-headline {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
}
.daily-free-desc, .streak-daily-preview-card .card-subhead {
  color: #4b5563 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.streak-count-pill {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  color: #111111 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
}

/* ==========================================================================
   22. DEVICE ADAPTIVE SYSTEM (PC & MOBILE FRIENDLY BY DEVICE)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. DESKTOP & PC SPECIFIC OPTIMIZATIONS (min-width: 1025px)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .app-main-layout {
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 2.5rem 2rem 5rem !important;
  }
  
  /* Step 1: 4 Spread Cards in a single sleek row */
  .spread-picker-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
  
  /* Quick questions 2-column layout */
  .quick-questions-pane {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  /* Step 2: Semicircle Fan & Wheel Hub centered */
  .deck-wheel-container {
    max-width: 680px !important;
    height: 380px !important;
    margin: 0 auto !important;
  }
  
  /* Step 3: Clues in 3 clean columns */
  .exec-clues-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  
  /* Step 3: Flags side-by-side */
  .exec-flags-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  
  /* Split card side-by-side */
  .card-split-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1.75rem !important;
  }
  .card-split-media {
    width: 160px !important;
    flex-shrink: 0 !important;
  }
  .card-split-content {
    flex: 1 !important;
  }
  
  /* Footer 4-column layout */
  .cal-footer-grid {
    grid-template-columns: 2.2fr 1.2fr 1.2fr 1.4fr !important;
    gap: 3rem !important;
  }
}

/* --------------------------------------------------------------------------
   B. TABLET SPECIFIC (769px - 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .app-main-layout {
    max-width: 90% !important;
    padding: 2rem 1.5rem 4rem !important;
  }
  .spread-picker-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .quick-questions-pane {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cal-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}

/* --------------------------------------------------------------------------
   C. MOBILE DEVICES (max-width: 768px)
   -------------------------------------------------------------------------- */
/* ==========================================================================
   MOBILE & RESPONSIVE DESIGN SYSTEM (Comprehensive Overhaul)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. TABLET & MOBILE (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Prevent horizontal screen jiggle */
  html, body, .app-shell, .app-main-layout {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Main Workspace Layout: Extra bottom clearance so floating dock never overlaps content */
  .app-main-layout {
    padding: 0.75rem 0.75rem calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tab-content {
    padding-bottom: 1.5rem !important;
  }
  
  /* 1. TOP NAVBAR: Clean, compact, zero horizontal overflow */
  .app-top-navbar {
    height: 56px !important;
    padding: 0 0.75rem !important;
  }

  .top-nav-inner {
    padding: 0 !important;
    gap: 0.5rem !important;
    justify-content: space-between !important;
    max-width: 100% !important;
  }

  .top-nav-brand {
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
  }

  .top-nav-brand .brand-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .top-nav-brand .brand-title {
    font-size: 1.1rem !important;
  }

  /* Center Tabs: Hidden on mobile (handled by bottom floating dock) */
  .top-nav-tabs {
    display: none !important;
  }

  /* Top Right Controls */
  .top-nav-right {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  /* Hide redundant wallet icon button on mobile (coin pill already opens wallet) */
  #sidebarWalletBtn {
    display: none !important;
  }

  .nav-icon-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
  }

  .nav-icon-btn .nav-svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* User Capsule: Compact & never clips */
  .top-nav-user {
    padding: 2px 4px 2px 8px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .top-nav-user .coin-pill {
    padding: 4px 9px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* 2. BUTTONS & SVG FIXES */
  .btn-cta-svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    stroke-width: 2.2 !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .free-daily-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    border-radius: 9999px !important;
  }

  /* 3. CARD PADDING ON MOBILE */
  .bento-card, .card-setup, .unified-picker-card, 
  .executive-verdict-card, .reading-paper-card, 
  .wallpaper-hero-card, .history-hero-card, .synergy-card {
    padding: 1.15rem 0.95rem !important;
    border-radius: 14px !important;
  }
  
  .card-headline, .hero-headline {
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.75rem !important;
  }

  .card-subhead, .daily-free-desc {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  /* 4. TAB 1: DAILY WIDGET & FORTUNE */
  .daily-widget-header {
    margin-bottom: 1rem !important;
  }

  .daily-widget-title {
    font-size: 1.15rem !important;
  }

  .daily-widget-sub {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  .altar-colors-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .altar-color-pill {
    padding: 8px 10px !important;
    min-height: 58px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
  }

  .altar-color-dot {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-top: 2px !important;
  }

  .altar-color-label {
    font-size: 11px !important;
    color: #6b7280 !important;
  }

  .altar-color-name {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
  }

  .altar-numbers-strip {
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    flex-wrap: wrap !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
  }

  .altar-num-group {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .altar-num-pill {
    font-size: 12px !important;
    padding: 2px 7px !important;
  }

  .altar-time-text {
    font-size: 12px !important;
    color: #374151 !important;
  }

  /* Daily Card Result Container on Mobile */
  .daily-card-showcase {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.25rem 1rem !important;
    gap: 1rem !important;
  }

  .daily-card-img-wrap {
    width: 115px !important;
    height: 190px !important;
  }

  .daily-card-name-th {
    font-size: 1.2rem !important;
  }

  /* 5. TAB 2: STEP 1 SETUP & QUESTION */
  .wizard-stepper-header {
    gap: 4px !important;
    padding: 0 2px !important;
    margin-bottom: 1.25rem !important;
  }

  .wizard-step-chip {
    padding: 6px 10px !important;
    gap: 5px !important;
    font-size: 12px !important;
  }

  .wizard-step-chip .step-num {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  .wizard-step-connector {
    width: 12px !important;
    margin: 0 !important;
  }

  .hero-q-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-q-label {
    font-size: 13px !important;
  }

  .voice-input-btn-hero {
    padding: 4px 10px !important;
    font-size: 12px !important;
  }

  .hero-question-textarea {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  .quick-category-tabs {
    overflow-x: auto !important;
    width: 100% !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
  }

  .quick-category-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .quick-cat-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  .quick-questions-pane {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .quick-question-chip {
    padding: 10px 12px !important;
  }

  .chip-q-text {
    font-size: 13px !important;
  }

  /* Spread Picker in 2x2 Clean Grid */
  .spread-picker-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .spread-card-item {
    padding: 0.85rem 0.75rem !important;
    border-radius: 12px !important;
  }

  .spread-card-item .sc-name {
    font-size: 13px !important;
  }

  .spread-card-item .sc-sub {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .spread-card-item .sc-cost-badge {
    font-size: 11px !important;
    padding: 2px 6px !important;
  }

  /* Birthchart Inputs */
  .birthchart-inputs-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  input[type="text"], input[type="date"], input[type="time"], 
  textarea, select, .cal-input, .bento-input-pill {
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
  }

  /* 6. TAB 2: STEP 2 DECK DRAWING */
  .unified-deck-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .unified-title-group {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .deck-action-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .deck-action-pills button, 
  .deck-view-switcher {
    flex: 1 1 auto !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* Spread Slots Horizontal Track */
  .spread-slots-grid {
    display: flex !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 4px 2px 10px !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .spread-slot-item {
    flex-shrink: 0 !important;
    width: 82px !important;
  }

  .slot-box {
    width: 82px !important;
    height: 130px !important;
  }

  .slot-label {
    font-size: 11px !important;
  }

  /* Arc Fan Container */
  .deck-wheel-container {
    height: 270px !important;
    max-width: 100% !important;
  }

  /* 7. TAB 2: STEP 3 RESULTS & FLIPBOOK */
  .step3-top-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .step3-left-actions, .reading-view-mode-toggle {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .step3-left-actions button, .reading-view-mode-toggle button {
    flex: 1 1 auto !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    padding: 8px 10px !important;
  }

  .exec-flags-row, .exec-clues-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .exec-verdict-banner {
    padding: 1.15rem 1rem !important;
  }

  .exec-verdict-text {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
  }

  /* Split Card on Mobile */
  .card-split-item {
    flex-direction: column !important;
    align-items: center !important;
    padding: 1.15rem 0.95rem !important;
    gap: 1rem !important;
  }

  .card-split-media {
    width: 115px !important;
    max-width: 115px !important;
  }

  .card-split-media img {
    max-height: 185px !important;
  }

  .card-split-content {
    width: 100% !important;
  }

  /* Flipbook Nav Bar */
  .flipbook-nav-bar {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .flipbook-nav-btn {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  .flipbook-page-dots {
    gap: 4px !important;
  }

  .flipbook-dot {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }

  .flipbook-final-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .flipbook-final-actions button {
    width: 100% !important;
  }

  /* Followups on Mobile */
  .suggested-followups-grid, .teaser-chips-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .followup-q-chip {
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 8. MODALS AS BOTTOM SHEET */
  .modal-backdrop, .auth-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .bento-modal-card, .auth-modal-card, .user-profile-modal-card, .wallet-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1.5rem 1.15rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
  }

  .topup-packages-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .qr-code-img {
    max-width: 200px !important;
    margin: 0 auto !important;
  }

  /* 9. FOOTER ON MOBILE */
  .cal-footer {
    padding: 36px 16px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .cal-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .cal-footer-bottom {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }

  /* 10. FLOATING BOTTOM DOCK: Dark Celestial Obsidian Glass Aesthetic */
  .bento-bottom-nav, .mobile-bottom-nav {
    position: fixed !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 14px !important;
    right: 14px !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    height: 60px !important;
    background: rgba(13, 8, 30, 0.94) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1.2px solid rgba(251, 191, 36, 0.3) !important;
    border-radius: 9999px !important;
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 20px rgba(251, 191, 36, 0.1) !important;
    z-index: 95 !important;
    padding: 0 8px !important;
  }

  .bottom-nav-item {
    flex: 1 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #9ca3af !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    cursor: pointer !important;
    height: 46px !important;
    border-radius: 9999px !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .bottom-nav-item .nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9ca3af !important;
    line-height: 1 !important;
    transition: all 0.22s ease !important;
  }

  .bottom-nav-item .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    transition: stroke 0.22s ease, transform 0.22s ease !important;
  }

  .bottom-nav-item .nav-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    letter-spacing: 0.2px !important;
    transition: color 0.22s ease !important;
  }

  .bottom-nav-item:hover {
    color: #e5e7eb !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }

  .bottom-nav-item.active {
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.14) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.16) !important;
  }

  .bottom-nav-item.active .nav-icon {
    color: #fbbf24 !important;
    transform: translateY(-1px) scale(1.08) !important;
  }

  .bottom-nav-item.active .nav-icon svg {
    stroke: #fbbf24 !important;
  }

  .bottom-nav-item.active .nav-label {
    color: #fbbf24 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.35) !important;
  }
}

/* --------------------------------------------------------------------------
   B. EXTRA SMALL PHONES (< 480px / iPhone SE / 360-390px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Navbar: hide settings & sound icons to keep brand + capsule breathing freely */
  #sidebarSettingsBtn, #sidebarSoundToggleBtn {
    display: none !important;
  }

  .top-nav-user .capsule-name {
    display: none !important; /* Hide long name, keep avatar + coin pill */
  }

  .top-nav-user {
    padding: 2px 4px !important;
    border: none !important;
    background: transparent !important;
  }

  .top-nav-user .coin-pill {
    padding: 3px 8px !important;
    font-size: 11.5px !important;
  }

  /* Stepper Header: Super compact for narrow screens */
  .wizard-stepper-header {
    gap: 2px !important;
  }

  .wizard-step-chip {
    padding: 5px 6px !important;
    font-size: 11px !important;
    gap: 3px !important;
  }

  .wizard-step-chip .step-label {
    font-size: 11px !important;
  }

  .wizard-step-connector {
    width: 8px !important;
  }

  /* Spread Cards */
  .spread-picker-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .spread-card-item {
    padding: 0.75rem 0.6rem !important;
  }

  .spread-card-item .sc-top {
    margin-bottom: 0.25rem !important;
  }

  .spread-card-item .sc-name {
    font-size: 12.5px !important;
  }

  .spread-card-item .sc-sub {
    font-size: 10.5px !important;
  }

  .spread-card-item .sc-cost-badge {
    font-size: 10.5px !important;
    padding: 2px 5px !important;
  }

  /* Slots */
  .slot-box {
    width: 76px !important;
    height: 120px !important;
  }

  .spread-slot-item {
    width: 76px !important;
  }

  /* Daily Color Pills */
  .altar-colors-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .altar-color-pill {
    padding: 7px 8px !important;
    min-height: 52px !important;
    gap: 6px !important;
  }

  .altar-color-name {
    font-size: 11.5px !important;
  }

  .altar-color-label {
    font-size: 10px !important;
  }
}

/* ==========================================================================
   23. LOVE SYNASTRY, WALLET PACKAGES & PROFILE MODAL OVERHAUL
   ========================================================================== */

/* 1. Love Synastry Page 3 (Clean Cal.com Light Design) */
.synergy-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  color: #111111 !important;
}
.synastry-dual-grid {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 1rem !important;
  margin: 1.25rem 0 !important;
}
@media (max-width: 768px) {
  .synastry-dual-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}
.synastry-person-card {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1.15rem !important;
  color: #111111 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
.synastry-person-card.querent {
  border-left: 4px solid #7c3aed !important;
}
.synastry-person-card.partner {
  border-right: 4px solid #db2777 !important;
}
.synastry-person-title.querent {
  color: #6d28d9 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.synastry-person-title.partner {
  color: #be185d !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.synastry-person-sign {
  color: #111111 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  margin: 0.35rem 0 0.2rem !important;
}
.synastry-person-detail {
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}
.synastry-chemistry-card {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1.15rem 1.25rem !important;
  color: #111111 !important;
}
.synastry-chemistry-title {
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 0.35rem !important;
}
.synastry-chemistry-text {
  color: #27272a !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.synergy-advice-box {
  background: #fdf2f8 !important;
  border-left: 4px solid #db2777 !important;
  border-radius: 0 12px 12px 0 !important;
  color: #1f2937 !important;
  padding: 1rem 1.25rem !important;
}
.synergy-advice-box strong {
  color: #9d174d !important;
}

/* 2. Top-Up Modal Packages (Clean Light Bento Cards) */
.package-card {
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1.25rem 1rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  color: #111111 !important;
  transition: all 0.18s ease !important;
}
.package-card:hover {
  border-color: #111111 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}
.package-card.popular {
  border: 2px solid #111111 !important;
  background: #ffffff !important;
}
.package-name {
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.package-coins-val {
  color: #111111 !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
}
.package-coins-unit {
  color: #4b5563 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.package-buy-btn {
  background: #111111 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
}
.package-buy-btn:hover {
  background: #27272a !important;
}

/* 3. Member Profile Modal Overhaul (Cal.com SaaS Membership) */
.profile-hero-card {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}
.profile-avatar-big {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.75rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  flex-shrink: 0 !important;
}
.profile-hero-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}
.profile-name {
  color: #111111 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.profile-email {
  color: #6b7280 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.profile-tags-row {
  display: flex !important;
  gap: 6px !important;
  margin-top: 0.35rem !important;
  flex-wrap: wrap !important;
}
.profile-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 1rem !important;
}
.profile-stat-box {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
.p-stat-icon {
  font-size: 1.5rem !important;
}
.p-stat-label {
  color: #6b7280 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: block !important;
}
.p-stat-val {
  color: #111111 !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.referral-flex {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.referral-flex div:first-child div:first-child {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}
.referral-flex div:first-child div:nth-child(2) {
  color: #6b7280 !important;
  font-size: 12px !important;
}
#profileReferralCode {
  color: #111111 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
}
#profileLogoutBtn {
  background: #ffffff !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
#profileLogoutBtn:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
}
#profileViewHistoryBtn {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  color: #111111 !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
}
#profileViewHistoryBtn:hover {
  background: #e5e7eb !important;
}

/* ==========================================================================
   24. MASTER TOP-NAVBAR & PILL-IN-PILL CONTROLS (Dark Celestial Obsidian)
   ========================================================================== */
.app-top-navbar {
  background: rgba(10, 8, 20, 0.88) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  height: 64px !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.top-nav-brand {
  text-decoration: none !important;
}

.top-nav-brand .brand-avatar {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.45) !important;
}

.top-nav-brand .brand-avatar svg {
  fill: #ffffff !important;
  stroke: none !important;
}

/* Pill-in-Pill Switcher container (Desktop Only) */
@media (min-width: 861px) {
  .top-nav-tabs,
  nav.top-nav-tabs {
    background: rgba(18, 13, 34, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9999px !important;
    padding: 4px !important;
    gap: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* Nav Pill Items */
  .top-nav-tabs .sidebar-nav-item,
  nav.top-nav-tabs button.sidebar-nav-item {
    width: auto !important;
    min-width: unset !important;
    height: 34px !important;
    min-height: unset !important;
    padding: 0 16px !important;
    border-radius: 9999px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
  }

  .top-nav-tabs .sidebar-nav-item span {
    white-space: nowrap !important;
    display: inline-block !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
  }

  .top-nav-tabs .sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    transform: none !important;
  }

  .top-nav-tabs .sidebar-nav-item.active,
  nav.top-nav-tabs button.sidebar-nav-item.active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.24) 0%, rgba(217, 119, 6, 0.16) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 1px solid rgba(251, 191, 36, 0.65) !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35), inset 0 0 10px rgba(245, 158, 11, 0.15) !important;
    transform: none !important;
  }

  .top-nav-tabs .sidebar-nav-item.active svg,
  nav.top-nav-tabs button.sidebar-nav-item.active svg {
    stroke: #fbbf24 !important;
    filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.7)) !important;
  }

  /* Eliminate any pseudo-element indicator bar (e.g. legacy vertical gold stripe) */
  .top-nav-tabs .sidebar-nav-item::before,
  .top-nav-tabs .sidebar-nav-item::after,
  .top-nav-tabs .sidebar-nav-item.active::before,
  .top-nav-tabs .sidebar-nav-item.active::after,
  nav.top-nav-tabs button.sidebar-nav-item.active::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    border: none !important;
  }
}

/* ==========================================================================
   25. HERO QUESTION BOX, ZERO EMOJI OVERLAPS & LIGHT SURFACE PURITY (design.md)
   ========================================================================== */

/* 1. Large Hero Question Textarea (User Request: อยากให้เน้นตรงคำถามเป็นช่องใหญ่ๆ) */
.hero-question-group {
  background: #fdfdfd !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.75rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}
.hero-question-group:focus-within {
  border-color: #111111 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 0 0 0 1px #111111 !important;
  background: #ffffff !important;
}
.hero-q-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 0.85rem !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.hero-q-label {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
.voice-input-btn-hero {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.voice-input-btn-hero:hover {
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
}
.voice-input-btn-hero .voice-mic-icon {
  font-size: 14px !important;
}
.hero-question-wrapper {
  width: 100% !important;
}
.hero-question-textarea {
  width: 100% !important;
  min-height: 100px !important;
  padding: 14px 16px !important;
  font-size: 15.5px !important;
  font-family: inherit !important;
  line-height: 1.6 !important;
  color: #111111 !important;
  background: #ffffff !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  resize: vertical !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.hero-question-textarea:focus {
  border-color: #111111 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08) !important;
}
.hero-question-textarea::placeholder {
  color: #9ca3af !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   CHATAROT COSMIC STAGE & FLOATING 3D TAROT UNIVERSE
   ========================================================================== */
#tab-divination {
  position: relative !important;
  min-height: 100vh !important;
  background: #07050d !important;
  padding-bottom: 70px !important;
}

#tab-divination .card-setup {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 100% !important;
}

#tab-divination .premium-hero-card {
  display: none !important;
}

#tab-divination .wizard-stepper-header {
  display: none !important;
}

.cosmic-universe-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  background: radial-gradient(ellipse 90% 65% at 50% 30%, #161028 0%, #0c0817 55%, #05030a 100%);
}

.cosmic-nebula-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -20%);
  width: 750px;
  height: 480px;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.22) 0%, rgba(79, 70, 229, 0.14) 40%, transparent 70%);
  filter: blur(75px);
  pointer-events: none;
}

.cosmic-stars-layer {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 100px 150px, rgba(255,255,255,0.8), rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 240px 80px, #ffd700, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 320px 300px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 450px 120px, #c4b5fd, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 600px 250px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 750px 80px, #fbcfe8, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 900px 350px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 1100px 180px, #ffd700, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 1000px 600px;
  opacity: 0.65;
}

.cosmic-floating-cards {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  overflow: hidden;
}

.floating-tarot-card {
  position: absolute;
  width: 90px;
  height: 155px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85), 0 0 18px rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.14);
  animation: cosmicCardDrift var(--dur, 9s) ease-in-out infinite alternate;
  will-change: transform;
}

.floating-tarot-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes cosmicCardDrift {
  0% {
    transform: translateY(0px) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  }
  100% {
    transform: translateY(-18px) rotate(calc(var(--rot, 0deg) + 3deg)) scale(var(--sc, 1));
  }
}

/* Center Stage */
.chatarot-center-stage {
  position: relative;
  z-index: 5;
  max-width: 720px;
  margin: 0 auto;
  padding: 3.5rem 1rem 4rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chatarot-mono-caption {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 6px;
}

.chatarot-status-line {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #d1d5db;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-pulse-dot {
  color: #10b981;
  font-size: 10px;
  animation: pulseGreen 2s infinite;
}
@keyframes pulseGreen {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px #10b981; }
  50% { opacity: 0.4; text-shadow: none; }
}

.chatarot-main-title {
  font-family: 'Cinzel', 'Prompt', serif, sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  margin: 0 0 4px 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.chatarot-sub-title {
  font-size: 0.95rem;
  color: #9ca3af;
  margin-bottom: 2rem;
  font-weight: 400;
}

/* The Dark Glass Input Shell */
.chatarot-input-shell {
  width: 100%;
  max-width: 660px;
  background: rgba(18, 14, 28, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 18px 20px 14px 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.25s ease;
  box-sizing: border-box;
  text-align: left;
}

.chatarot-input-shell:focus-within {
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9), 0 0 25px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.chatarot-textarea {
  width: 100%;
  min-height: 85px;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  font-family: inherit !important;
  resize: vertical !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.chatarot-textarea::placeholder {
  color: #7b758d !important;
  font-size: 15px !important;
}

.chatarot-shell-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  gap: 10px;
  flex-wrap: wrap;
}

.shell-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.shell-pill-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e5e7eb;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.shell-pill-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.shell-icon-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e5e7eb;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.shell-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.shell-query-counter {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: #6b7280;
  letter-spacing: 0.05em;
}
.shell-query-counter span {
  color: #d1d5db;
  font-weight: 600;
}

/* Ivory CTA Button */
.btn-ivory-start {
  background: #ece8df !important;
  color: #110e1b !important;
  font-family: var(--font-mono, monospace);
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 13px 40px !important;
  margin-top: 20px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(236, 232, 223, 0.25) !important;
  transition: all 0.25s ease !important;
}
.btn-ivory-start:hover {
  background: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.4) !important;
}

/* Floating Spread Dropdown */
.shell-dropdown-wrap {
  position: relative;
}
.shell-spread-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #141022;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 6px;
  min-width: 290px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
  z-index: 100;
  text-align: left;
}
.spread-menu-item {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #d1d5db;
  transition: all 0.15s ease;
}
.spread-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.spread-menu-item.active {
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #fde68a;
}
.spread-menu-item .s-cost {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: #d4af37;
  font-weight: 600;
}
.spread-menu-item .s-cost.free {
  color: #10b981;
}

/* Bottom HUD Dock */
.chatarot-bottom-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  pointer-events: auto;
  background: linear-gradient(to top, rgba(5, 3, 10, 0.95) 0%, rgba(5, 3, 10, 0) 100%);
  font-size: 12px;
}
.dock-left, .dock-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dock-pill-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #d1d5db;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}
.dock-pill-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}
.dock-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #d1d5db;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}
.dock-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
.dock-center {
  color: #6b7280;
  font-size: 11px;
}
.dock-center a {
  color: #9ca3af;
  text-decoration: none;
}
.dock-center a:hover {
  color: #d1d5db;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .chatarot-center-stage {
    padding: 2rem 1rem 5rem 1rem;
  }
  .chatarot-main-title {
    font-size: 1.6rem;
  }
  .chatarot-bottom-dock .dock-center {
    display: none;
  }
  .floating-tarot-card {
    width: 65px;
    height: 110px;
    opacity: 0.65;
  }
}

/* 2. Zero Emoji Overlap Enforcement (User Request: emoji ชอบไปทับ ตรวจสอบด้วย) */
.input-pill-icon {
  display: none !important;
}
.input-pill-wrapper {
  position: relative !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
}
.bento-input-pill,
.input-pill-wrapper input,
.bento-field-group input[type="text"],
.bento-field-group input[type="email"],
.bento-field-group input[type="password"],
.bento-field-group input[type="date"],
.bento-field-group input[type="time"] {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  font-size: 14.5px !important;
  color: #111111 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.bento-input-pill:focus,
.input-pill-wrapper input:focus,
.bento-field-group input:focus {
  border-color: #111111 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.06) !important;
}
.bento-input-pill::placeholder,
.input-pill-wrapper input::placeholder {
  color: #9ca3af !important;
  font-size: 14px !important;
}

/* 3. Word Truncation Fix (User Request: คำยังมี...) */
.altar-color-name,
.color-name-text {
  color: #111111 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
  text-overflow: clip !important;
  overflow: visible !important;
}
.altar-color-info {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.altar-color-pill {
  min-height: 64px !important;
  height: auto !important;
  align-items: flex-start !important;
  padding: 10px 12px !important;
}

/* 4. Remove Check-in Button (User Request: เอาเช็คอินตรงนี้ออก) */
#altarQuickCheckinBtn,
.daily-widget-actions {
  display: none !important;
}

/* 5. Light SaaS Surface Purity for Daily Results & Birth Chart (User Request: สียังไม่เรียบร้อย) */
.daily-card-showcase {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  color: #111111 !important;
  padding: 1.75rem !important;
}
.daily-card-name-th {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
}
.daily-card-name-en {
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
}
.keyword-tag {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 9999px !important;
  padding: 3px 10px !important;
}
.daily-guidance-content {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  color: #111111 !important;
  padding: 1.75rem !important;
}
.guidance-section-title {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
}
.guidance-body-text {
  color: #27272a !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}
.guidance-advice-box {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-left: 4px solid #10b981 !important;
  color: #065f46 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}
.daily-guidance-content strong {
  color: #111111 !important;
}
.daily-guidance-content div {
  color: #374151 !important;
}

/* Birthchart Chips & Badges */
.birthchart-preview-chip,
.partner-preview-chip,
#birthChartPreviewChip,
#partnerBirthChartPreviewChip {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1.25rem 1.4rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  margin-top: 1rem !important;
}
.bc-badge {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  color: #111111 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
}
.bc-badge-sun {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
}
.bc-badge-asc {
  background: #faf5ff !important;
  border: 1px solid #e9d5ff !important;
  color: #6b21a8 !important;
}
.bc-badge-element {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1e40af !important;
}
.bc-card-pill {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  border-radius: 9999px !important;
  padding: 4px 10px !important;
}
.bc-birthcards-row,
.bc-birthcards-row span {
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.partner-preview-chip .bc-badge-sun {
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  color: #be123c !important;
}
.partner-preview-chip .bc-birthcards-row span {
  color: #9f1239 !important;
}

/* ==========================================================================
   26. HERO DAILY TAROT, VECTOR SPREAD ICONS & PROGRESSIVE ACCORDION
   ========================================================================== */

/* Priority 1: Modern Hairline Vector Icons (.sc-svg) */
.sc-svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #f3f4f6 !important;
  color: #111111 !important;
  margin-bottom: 8px !important;
  transition: all 0.18s ease !important;
}
.sc-svg svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  transition: stroke 0.18s ease !important;
}
.spread-card-item:hover .sc-svg,
.spread-card-item.active .sc-svg {
  background: #111111 !important;
  color: #ffffff !important;
}
.spread-card-item:hover .sc-svg svg,
.spread-card-item.active .sc-svg svg {
  stroke: #ffffff !important;
}

/* Priority 2: Daily Tarot Hero Section (Promoted to Top of Tab-Daily) */
.hero-daily-tarot {
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 18px !important;
  padding: 2.25rem 2rem !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero-daily-tarot::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: #111111 !important;
}
.hero-daily-tarot .daily-free-headline {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.5rem !important;
}
.hero-daily-tarot .daily-free-desc {
  font-size: 14.5px !important;
  color: #4b5563 !important;
  line-height: 1.6 !important;
  max-width: 680px !important;
}
.hero-daily-tarot .btn-coral-pill {
  font-size: 15px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
}

/* Daily Altar Fortune Widget (Demoted to Secondary Bento Card) */
.altar-daily-fortune-widget {
  background: #fafafa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 1.5rem 1.75rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}
.altar-daily-fortune-widget .altar-widget-title {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: #111111 !important;
}
.altar-color-pill {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  transition: all 0.15s ease !important;
}
.altar-color-pill:hover {
  border-color: #111111 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
.altar-color-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
}
.altar-color-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}
.altar-num-pill {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #111111 !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 13px !important;
}

/* Priority 3: Progressive Disclosure Birth Chart Accordion */
.bento-accordion-card.birthchart-accordion {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1.25rem 1.4rem !important;
  margin-top: 1rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.bento-accordion-card.birthchart-accordion.is-open {
  border-color: #d1d5db !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04) !important;
}
.birthchart-accordion .accordion-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  user-select: none !important;
  gap: 12px !important;
}
.birthchart-accordion .accordion-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.birthchart-accordion .accordion-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #111111 !important;
}
.birthchart-accordion .accordion-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #111111 !important;
}
.birthchart-accordion .accordion-title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  letter-spacing: -0.01em !important;
}
.birthchart-accordion .accordion-desc {
  font-size: 12.5px !important;
  color: #6b7280 !important;
  margin-top: 2px !important;
}

/* Cal.com Sleek Minimalist Switch */
.bento-switch {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  cursor: pointer !important;
}
.bento-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.switch-slider {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #e5e7eb !important;
  border-radius: 9999px !important;
  transition: all 0.2s ease !important;
}
.switch-slider::before {
  position: absolute !important;
  content: "" !important;
  height: 18px !important;
  width: 18px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s ease !important;
}
.bento-switch input:checked + .switch-slider {
  background-color: #111111 !important;
}
.bento-switch input:checked + .switch-slider::before {
  transform: translateX(20px) !important;
}

/* Accordion Drawer */
.birthchart-drawer {
  margin-top: 1.25rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid #f3f4f6 !important;
  animation: fadeInDrawer 0.2s ease-out !important;
}
.birthchart-drawer.hidden {
  display: none !important;
}
@keyframes fadeInDrawer {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.birthchart-drawer-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  display: block !important;
  margin-bottom: 0.75rem !important;
}
.birthchart-inputs-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}
@media (max-width: 640px) {
  .birthchart-inputs-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
}

/* ==========================================================================
   27. 3-SECOND EXECUTIVE SUMMARY CARD & INSTANT DEAL ENHANCEMENTS
   ========================================================================== */

/* Hero 3-Second Verdict Card */
.hero-3sec-card {
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 1.75rem 2rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 1.5rem !important;
}

/* Question Header */
.exec-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 0.85rem !important;
}
.exec-topic-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e5e7eb !important;
  letter-spacing: 0.02em !important;
  background: rgba(255, 255, 255, 0.06) !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.exec-question-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.85rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  flex-wrap: wrap !important;
}
.exec-q-tag {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.02em !important;
}
.exec-q-body {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.55 !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.25) !important;
}

/* The Big 3-Second Verdict Hero Box */
.exec-verdict-hero-box {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left: 5px solid #111111 !important;
  border-radius: 12px !important;
  padding: 1.4rem 1.6rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}
.exec-verdict-hero-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin-bottom: 6px !important;
}
.exec-verdict-hero-text {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}
.exec-verdict-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding-top: 10px !important;
  border-top: 1px solid #e2e8f0 !important;
}
.exec-timing-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 12.5px !important;
  color: #334155 !important;
}
.exec-timing-pill svg {
  stroke: #475569 !important;
}

/* 3-Pill Bento Takeaways Grid */
.exec-takeaways-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 1.25rem !important;
}
.exec-takeaway-item {
  border-radius: 12px !important;
  padding: 1.15rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.exec-takeaway-item.item-opportunity {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
}
.exec-takeaway-item.item-caution {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
}
.exec-takeaway-item.item-rule {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
.takeaway-head {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}
.takeaway-badge {
  display: inline-block !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}
.badge-green {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}
.badge-amber {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}
.badge-blue {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
.takeaway-text {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: #1e293b !important;
}

/* Clues Summary Box */
.exec-clues-summary-box {
  background: #fafafa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 0.85rem 1.25rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1.25rem !important;
}
.clues-summary-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #4b5563 !important;
  margin-bottom: 4px !important;
}
.clues-summary-list {
  margin: 0 !important;
  padding-left: 1.25rem !important;
  font-size: 13px !important;
  color: #374151 !important;
  line-height: 1.6 !important;
}

/* Deep Dive Quick CTA Bar */
.exec-deep-dive-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: rgba(18, 12, 38, 0.88) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.35) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  margin-top: 1.25rem !important;
  gap: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
.exec-deep-dive-bar span {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #f3f4f6 !important;
}
.btn-goto-deep-dive {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45) !important;
}
.btn-goto-deep-dive span {
  color: #0f0a1e !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}
.btn-goto-deep-dive:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.6) !important;
}

@media (max-width: 768px) {
  .hero-3sec-card {
    padding: 1.25rem !important;
  }
  .exec-verdict-hero-box {
    padding: 1.15rem !important;
  }
  .exec-verdict-hero-text {
    font-size: 1.15rem !important;
  }
  .exec-takeaways-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .exec-deep-dive-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
  }
  .btn-goto-deep-dive {
    justify-content: center !important;
  }
}

/* ==========================================================================
   28. SMART SUGGESTED FOLLOW-UP CHIPS WITH TOKEN BADGES (ASK DUANG.LIFE MASTER)
   ========================================================================== */

/* Suggested Follow-up Wrapper in Messenger / Page 5 */
.suggested-followups-wrapper {
  margin-bottom: 1.25rem !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid #f3f4f6 !important;
}
.suggested-followups-wrapper.hidden {
  display: none !important;
}
.suggested-followups-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 0.85rem !important;
}
.suggested-spark-icon {
  color: #111111 !important;
  font-size: 13px !important;
}
.suggested-header-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}
.suggested-followups-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.suggested-fu-chip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
}
.suggested-fu-chip:hover {
  border-color: #111111 !important;
  background: #f9fafb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-1px) !important;
}
.fu-chip-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
}
.fu-chip-icon {
  font-size: 12px !important;
  color: #6b7280 !important;
}
.fu-chip-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  line-height: 1.4 !important;
}
.fu-chip-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  border-radius: 9999px !important;
  padding: 3px 8px !important;
  white-space: nowrap !important;
}

/* Quick Teaser Box inside Page 1 3-Second Executive Summary Card */
.exec-quick-followup-teaser {
  background: #f9fafb !important;
  border: 1px dashed #d1d5db !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.teaser-head {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
.teaser-spark {
  color: #111111 !important;
  font-size: 12px !important;
}
.teaser-label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}
.teaser-chips-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.teaser-fu-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
}
.teaser-fu-btn:hover {
  border-color: #111111 !important;
  background: #f3f4f6 !important;
}
.teaser-fu-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  line-height: 1.35 !important;
}
.teaser-fu-token {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  border-radius: 9999px !important;
  padding: 2px 6px !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  .suggested-followups-grid,
  .teaser-chips-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   29. EXHAUSTIVE HIGH-CONTRAST TYPOGRAPHY & ZERO LOW-CONTRAST TEXT ENFORCEMENT
   Guarantees all text elements across Modals, Reading Pages, Codex, Wallet & Astrological Views
   are crystal-clear, sharp, dark, and perfectly legible.
   ========================================================================== */

/* 1. Reading Cards Summary Row (Flipbook Page 2 Spread Cards) */
.spread-cards-hero-card {
  background: rgba(18, 12, 38, 0.78) !important;
  border: 1px solid rgba(251, 191, 36, 0.22) !important;
  border-radius: 16px !important;
  padding: 1.25rem !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.reading-cards-row {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 14px !important;
  justify-content: center !important;
  max-width: 960px !important;
  margin: 0.75rem auto !important;
}
.reading-cards-row[data-count="3"] {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
}
.reading-card-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0.85rem 0.65rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.reading-card-item:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}
.reading-card-item .reading-card-img {
  width: 100% !important;
  max-width: 95px !important;
  height: auto !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6) !important;
  display: block !important;
}

@media (max-width: 768px) {
  .reading-cards-row {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
  }
  .reading-card-item {
    padding: 6px 4px !important;
    border-radius: 8px !important;
  }
  .reading-card-item .reading-card-img {
    max-width: 60px !important;
    border-radius: 6px !important;
  }
  .reading-card-item .reading-card-pos {
    font-size: 0.58rem !important;
    margin-top: 0.25rem !important;
    line-height: 1.2 !important;
  }
  .reading-card-item .reading-card-name {
    font-size: 0.64rem !important;
    line-height: 1.2 !important;
  }
  .reading-card-item .reading-card-orient {
    font-size: 0.56rem !important;
    margin-top: 0.15rem !important;
  }
}

/* 2. Codex Card Detail Modal (modal-info-col) */
.modal-info-col {
  color: #111111 !important;
}
.modal-info-col h3 {
  color: #111111 !important;
  font-weight: 800 !important;
}
.modal-archetype {
  color: #4b5563 !important;
}
.modal-archetype strong {
  color: #111111 !important;
}
.modal-section-title {
  font-weight: 700 !important;
}
.modal-info-col ul,
.modal-info-col li {
  color: #374151 !important;
}
.modal-info-col p {
  color: #374151 !important;
  line-height: 1.65 !important;
}
.modal-timing-badge {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
}

/* 3. Single Birth Chart Synergy & Astrology Cards (Page 3) */
.synergy-avatar-callout {
  background: #fefce8 !important;
  border: 1px solid #fef08a !important;
}
.synergy-avatar-text {
  color: #854d0e !important;
  font-weight: 600 !important;
}
.synergy-title {
  color: #111111 !important;
  font-weight: 800 !important;
}
.synergy-subtitle {
  color: #6b7280 !important;
}
.synergy-cell {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}
.synergy-cell-label {
  color: #6b7280 !important;
  font-weight: 700 !important;
}
.synergy-cell-val {
  color: #111111 !important;
  font-weight: 700 !important;
}
.synergy-cell-sub {
  color: #374151 !important;
  font-weight: 500 !important;
}
.synergy-spark-icon {
  color: #111111 !important;
}
.synergy-text-body {
  color: #374151 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.synergy-advice-box {
  background: #fdf2f8 !important;
  border: 1px solid #fbcfe8 !important;
  border-left: 4px solid #db2777 !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  margin-top: 1rem !important;
}
.synergy-advice-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #9d174d !important;
  margin-bottom: 6px !important;
}
.synergy-advice-body {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #1f2937 !important;
}
.synergy-advice-body strong {
  color: #111111 !important;
}
.fortune-affirmation-box {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #065f46 !important;
  font-weight: 600 !important;
}

/* 4. Lucky Color Chips, Timing & Numbers (Page 3 / Daily Fortune) */
.fortune-color-chip {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.color-name-text {
  color: #111111 !important;
  font-weight: 700 !important;
}
.color-desc-text {
  color: #4b5563 !important;
  font-weight: 500 !important;
}
.fortune-numbers-box,
.fortune-timing-box {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}
.fortune-box-title {
  color: #111111 !important;
  font-weight: 700 !important;
}
.lucky-num-badge {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
  font-weight: 800 !important;
}
.lucky-num-badge.primary {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}
.timing-detail-item {
  color: #374151 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
.timing-detail-item strong {
  color: #111111 !important;
  font-weight: 700 !important;
}

/* 5. Wallet Modal, Packages & Payment System */
.wallet-balance-box {
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
.wallet-balance-label {
  color: #6b7280 !important;
  font-weight: 700 !important;
}
.wallet-balance-num {
  color: #111111 !important;
  font-weight: 800 !important;
}
.wallet-balance-num small {
  color: #4b5563 !important;
  font-weight: 600 !important;
}
.user-role-tag {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  font-weight: 700 !important;
}
.user-id-text {
  color: #6b7280 !important;
}
.topup-subcard,
.streak-subcard {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}
.topup-title,
.streak-title {
  color: #111111 !important;
  font-weight: 700 !important;
}
.topup-note {
  color: #059669 !important;
  font-weight: 700 !important;
}
.streak-subtitle {
  color: #6b7280 !important;
}
.streak-day-item {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}
.streak-day-item.checked {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
}
.streak-day-num {
  color: #4b5563 !important;
  font-weight: 700 !important;
}
.streak-day-bonus {
  color: #b45309 !important;
  font-weight: 800 !important;
}
/* Modal sizing & overflow protection */
#walletModal .bento-modal-card,
.wallet-modal {
  max-width: 620px !important;
  width: 95% !important;
  overflow-x: hidden !important;
}

.topup-subcard {
  overflow: visible !important;
  padding: 1.25rem 1.15rem !important;
}

.topup-subcard-header {
  margin-bottom: 1.25rem !important;
}

.topup-packages-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px 14px !important;
  margin-top: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 560px) {
  .topup-packages-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 12px !important;
  }
}
.topup-pkg-card {
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1.25rem 1rem 1rem !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: center !important;
  position: relative !important;
  margin-top: 6px !important;
  transition: all 0.18s ease !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
.topup-pkg-card:hover {
  border-color: #111111 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}
.topup-pkg-card.popular {
  border: 2px solid #111111 !important;
  background: #fafafa !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}
.topup-pkg-card.starter {
  border: 2px solid #f59e0b !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%) !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.22) !important;
}
.topup-pkg-card.starter:hover {
  border-color: #d97706 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.35) !important;
}
.topup-pkg-card.starter .pkg-buy-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
}
.pkg-badge-tag {
  position: absolute !important;
  top: -11px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #111111 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  white-space: nowrap !important;
  max-width: 90% !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  z-index: 2 !important;
}
.pkg-badge-tag.starter-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.45) !important;
}
.topup-pkg-card.popular .pkg-badge-tag {
  background: #ea580c !important;
}
.pkg-title {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  margin-top: 6px !important;
}
.pkg-coins-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 6px 0 2px !important;
}
.pkg-total-coins {
  color: #111111 !important;
  font-weight: 800 !important;
  font-size: 1.6rem !important;
}
.pkg-coins-label {
  color: #4b5563 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.pkg-bonus-tag {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 9999px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}
.pkg-desc {
  font-size: 12px !important;
  color: #4b5563 !important;
  margin: 6px 0 12px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
.pkg-buy-btn {
  width: 100% !important;
  background: #111111 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.pkg-buy-btn:hover {
  background: #27272a !important;
}
.bank-details-box {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}
.bank-label {
  color: #6b7280 !important;
  font-size: 13px !important;
}
.bank-value {
  color: #111111 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.bank-acc-no {
  color: #111111 !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
}
.promptpay-amount-box .amount-label {
  color: #6b7280 !important;
  font-size: 13px !important;
}
.promptpay-amount-box .amount-val {
  color: #111111 !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
}
.slip-step-title {
  color: #111111 !important;
  font-weight: 700 !important;
}
.slip-dropzone-box {
  border: 2px dashed #d1d5db !important;
  background: #f9fafb !important;
}
.dropzone-text {
  color: #111111 !important;
  font-weight: 600 !important;
}
.dropzone-sub {
  color: #6b7280 !important;
  font-size: 12.5px !important;
}

/* 6. Reading History Detail Modal & Notes */
.section-mini-title {
  color: #111111 !important;
  font-weight: 700 !important;
}
.detail-date-text {
  color: #6b7280 !important;
  font-size: 13px !important;
}
.detail-card-name {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
}
.detail-card-pos {
  color: #6b7280 !important;
  font-size: 12px !important;
}
.notes-subcard {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}
.notes-title {
  color: #111111 !important;
  font-weight: 700 !important;
}
.notes-hint {
  color: #6b7280 !important;
  font-size: 12px !important;
}
.bento-textarea {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #111111 !important;
}
.bento-textarea:focus {
  border-color: #111111 !important;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.1) !important;
}

/* 7. Voice / Mic Status & Loading States */
.voice-status-indicator {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}
.voice-status-msg {
  color: #111111 !important;
  font-weight: 600 !important;
}
.voice-hint-badge {
  color: #6b7280 !important;
}
.question-closed-hint {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
  font-weight: 600 !important;
}
.loading-sub-text {
  color: #4b5563 !important;
  font-size: 14px !important;
}
.deck-scroll-hint {
  color: #6b7280 !important;
  font-size: 13px !important;
}
.slot-tracker-chip {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
}
.card-auto-draw p {
  color: #4b5563 !important;
}
.shuffle-counter-badge strong {
  color: #111111 !important;
}

/* 8. Referral Card Clean Responsive Layout */
.referral-subcard {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 1.25rem !important;
}
.referral-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.referral-info {
  flex: 1 !important;
  min-width: 200px !important;
}
.referral-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 0 4px 0 !important;
}
.referral-sub {
  font-size: 12.5px !important;
  color: #6b7280 !important;
  margin: 0 0 8px 0 !important;
}
.referral-code-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  color: #111111 !important;
}
.referral-code-badge strong {
  font-family: monospace !important;
  font-size: 14px !important;
  color: #b45309 !important;
  font-weight: 800 !important;
}
#copyReferralLinkBtn {
  background: #111111 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
#copyReferralLinkBtn:hover {
  background: #27272a !important;
}

/* ==========================================================================
   26. MOBILE TOP NAVBAR OVERHAUL & HIDE CODEX ENCYCLOPEDIA (User Request)
   ========================================================================== */

/* Completely hide Codex / สารานุกรม everywhere across the site */
[data-tab="codex"],
.bottom-nav-item[data-tab="codex"],
.sidebar-nav-item[data-tab="codex"],
#tab-codex,
.codex-tab-content,
.bento-codex-grid,
.codex-nav-item {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Enforce 3-tab layout in Mobile Bottom Dock */
.bento-bottom-nav,
.mobile-bottom-nav {
  justify-content: space-evenly !important;
}

/* Hide Mobile Bottom Nav during Card Selection / Step 2 and Modals */
body.step2-active .bento-bottom-nav,
body.step2-active .mobile-bottom-nav,
body.in-card-picking .bento-bottom-nav,
body.in-card-picking .mobile-bottom-nav,
body.modal-open .bento-bottom-nav,
body.modal-open .mobile-bottom-nav {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Definitive Mobile Top Navbar: Ultra-clean 2-column layout (< 860px) */
@media (max-width: 860px) {
  /* 1. Strictly hide top tabs on mobile/tablets */
  .top-nav-tabs,
  nav.top-nav-tabs,
  header .top-nav-tabs,
  #appSidebar .top-nav-tabs,
  .app-top-navbar .top-nav-tabs {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* 2. Top Navbar container */
  .app-top-navbar {
    height: 56px !important;
    padding: 0 1rem !important;
    background: rgba(10, 8, 20, 0.92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .top-nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.5rem !important;
  }

  /* 3. Left Brand Wordmark */
  .top-nav-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
  }

  .top-nav-brand .brand-avatar {
    width: 30px !important;
    height: 30px !important;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .top-nav-brand .brand-avatar svg {
    width: 16px !important;
    height: 16px !important;
    fill: #ffffff !important;
  }

  .top-nav-brand .brand-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
  }

  .top-nav-brand .brand-dot-life {
    color: #f59e0b !important;
  }

  /* 4. Right Controls: Hide cluttered icon buttons */
  .top-nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  #sidebarWalletBtn,
  #sidebarSettingsBtn,
  #sidebarSoundToggleBtn,
  #sidebarAdminBtn {
    display: none !important;
  }

  /* 5. User Capsule: Avatar + Coin Pill */
  .top-nav-user,
  #sidebarUserCapsule {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
  }

  .top-nav-user .capsule-avatar,
  #sidebarUserAvatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .top-nav-user .capsule-avatar svg,
  #sidebarUserAvatar svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #374151 !important;
  }

  /* Hide long member name text on mobile (< 640px) to prevent overflowing */
  .top-nav-user .capsule-name,
  #sidebarUserName {
    display: none !important;
  }

  /* Coin Pill: Crisp, high-contrast, perfectly visible */
  .top-nav-user .coin-pill,
  #sidebarCoinPill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 10px !important;
    background: #111111 !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    border: 1px solid #111111 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: background 0.15s ease !important;
  }

  .top-nav-user .coin-pill:active,
  #sidebarCoinPill:active {
    background: #27272a !important;
  }

  .top-nav-user .coin-pill .pill-add-hint,
  #sidebarCoinPill .pill-add-hint {
    display: inline-block !important;
    color: #10b981 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    margin-left: 1px !important;
  }
}

/* ==========================================================================
   COMMERCIAL MONETIZATION 2.0: TABS, PASSES & INSUFFICIENCY PUSH
   ========================================================================== */

/* 1. Wallet Tab Switcher */
.wallet-tab-switcher {
  display: flex !important;
  gap: 6px !important;
  background: #f3f4f6 !important;
  padding: 4px !important;
  border-radius: 9999px !important;
  margin: 12px 0 16px !important;
  border: 1px solid #e5e7eb !important;
}

.wallet-tab-btn {
  flex: 1 !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.wallet-tab-btn:hover {
  color: #111827 !important;
}

.wallet-tab-btn.active {
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}

/* 2. Active Pass Banner inside Wallet */
.active-pass-banner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: #fefce8 !important;
  border: 1px solid #fde047 !important;
  border-radius: 12px !important;
  margin-bottom: 14px !important;
  animation: fadeIn 0.25s ease !important;
}

.active-pass-banner.hidden {
  display: none !important;
}

.active-pass-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.active-pass-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.active-pass-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #854d0e !important;
  margin-bottom: 2px !important;
}

.active-pass-sub {
  font-size: 11.5px !important;
  color: #a16207 !important;
  line-height: 1.35 !important;
}

/* 3. Topup Passes Grid */
.topup-passes-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px 14px !important;
  margin-top: 14px !important;
}

@media (max-width: 640px) {
  .topup-passes-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

.pass-card {
  position: relative !important;
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 20px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.pass-card:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12) !important;
  transform: translateY(-2px) !important;
}

.pass-card.featured {
  border-color: #f59e0b !important;
  background: linear-gradient(180deg, #fffdfa 0%, #ffffff 100%) !important;
}

.pass-badge-tag {
  position: absolute !important;
  top: -11px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #111111 !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  max-width: 90% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  z-index: 2 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important;
}

.pass-badge-tag.gold {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
}

.pass-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-align: center !important;
  margin-top: 2px !important;
}

.pass-price-row {
  text-align: center !important;
  margin: 6px 0 8px !important;
}

.pass-price-num {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

.pass-price-unit {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
}

.pass-desc {
  font-size: 11.5px !important;
  color: #4b5563 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  margin-bottom: 10px !important;
}

.pass-features-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  text-align: left !important;
}

.pass-feature-item {
  font-size: 11.5px !important;
  color: #374151 !important;
  line-height: 1.35 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.pass-feature-item svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  color: #10b981 !important;
  margin-top: 2px !important;
}

.pass-buy-btn {
  width: 100% !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 1px solid #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.pass-buy-btn:hover {
  background: #27272a !important;
  border-color: #27272a !important;
}

.pass-buy-btn.gold-btn {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  border-color: #b45309 !important;
}

.pass-buy-btn.gold-btn:hover {
  filter: brightness(1.08) !important;
}

/* 4. Insufficiency Push Modal */
.insufficiency-modal-card {
  max-width: 440px !important;
  width: 92% !important;
  padding: 24px 20px !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
}

.insufficiency-icon-wrap {
  width: 54px !important;
  height: 54px !important;
  line-height: 54px !important;
  font-size: 28px !important;
  border-radius: 50% !important;
  background: #fef3c7 !important;
  color: #d97706 !important;
  margin: 0 auto 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 0 6px #fef9c3 !important;
}

.insufficiency-promo-card {
  background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%) !important;
  border: 1.5px solid #fcd34d !important;
  border-radius: 14px !important;
  padding: 18px 14px 14px !important;
  margin: 16px 0 10px !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08) !important;
}

.insufficiency-promo-card .promo-badge-tag {
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #d97706 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 4px rgba(217, 119, 6, 0.25) !important;
}

.insufficiency-promo-card .promo-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #92400e !important;
  margin-top: 2px !important;
}

.insufficiency-promo-card .promo-coins-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 6px 0 !important;
}

.insufficiency-promo-card .promo-coins-num {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #b45309 !important;
}

.insufficiency-promo-card .promo-coins-unit {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #92400e !important;
}

.insufficiency-promo-card .promo-benefit {
  font-size: 12px !important;
  color: #4b5563 !important;
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
}

.user-role-tag.pass-active-tag {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  font-weight: 700 !important;
}

.user-role-tag.vip-active-tag {
  background: #fdf2f8 !important;
  color: #db2777 !important;
  border: 1px solid #fbcfe8 !important;
  font-weight: 700 !important;
}

/* ==============================================================================
   1. BENTO TOAST NOTIFICATION SYSTEM (Cal.com Minimalist Floating Card)
   ============================================================================== */
.bento-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  width: calc(100vw - 32px);
  pointer-events: none;
}

@media (max-width: 640px) {
  .bento-toast-container {
    bottom: 20px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100vw - 28px);
    max-width: 380px;
  }
}

.bento-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 14px 38px -4px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
  color: #111827;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  animation: bentoToastSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  cursor: pointer;
}

.bento-toast.hiding {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
}

@keyframes bentoToastSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bento-toast-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 1px;
}

.bento-toast.info .bento-toast-icon {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
}

.bento-toast.success .bento-toast-icon {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.bento-toast.error .bento-toast-icon {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.bento-toast.warning .bento-toast-icon {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.bento-toast-body {
  flex: 1;
  min-width: 0;
}

.bento-toast-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
  color: #111827;
}

.bento-toast-msg {
  color: #374151;
  word-break: break-word;
}

.bento-toast-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  padding: 0 0 0 8px;
  cursor: pointer;
  transition: color 0.15s;
}

.bento-toast-close:hover {
  color: #374151;
}

/* ==============================================================================
   2. PROMINENT AUTO-PICK BUTTON & MOBILE BAR
   ============================================================================== */
.btn-auto-pick-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 15px;
  background: linear-gradient(135deg, #ffffff, #f0fdf4);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #047857;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.14);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-auto-pick-pill:hover {
  background: #dcfce7;
  border-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.btn-auto-pick-pill:active {
  transform: translateY(0);
}

.wheel-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 640px) {
  .wheel-status-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .btn-auto-pick-pill {
    width: 100%;
    justify-content: center;
    height: 38px;
    font-size: 13px;
  }
}

/* ==============================================================================
   3. SMART ONBOARDING GUEST BANNER
   ============================================================================== */
.guest-onboarding-banner {
  background: linear-gradient(135deg, #eef2ff, #faf5ff);
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  padding: 13px 15px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.08);
}

.guest-onboarding-icon {
  font-size: 26px;
  flex-shrink: 0;
  animation: giftBounce 2s infinite ease-in-out;
}

@keyframes giftBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.guest-onboarding-text {
  flex: 1;
}

.guest-onboarding-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #312e81;
  margin-bottom: 2px;
}

.guest-onboarding-sub {
  font-size: 12px;
  color: #4338ca;
  line-height: 1.4;
}

.guest-onboarding-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 9999px;
  background: #4f46e5;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}

.guest-onboarding-btn:hover {
  background: #4338ca;
  transform: translateY(-1px);
}

/* ==============================================================================
   4. COMPREHENSIVE WCAG HIGH-CONTRAST & TEXT READABILITY SYSTEM
   ============================================================================== */

/* --- Modal Typography & Headers --- */
.modal-headline {
  color: #111111 !important;
  font-weight: 800 !important;
}

.modal-sub {
  color: #4b5563 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

.field-label {
  color: #111111 !important;
  font-weight: 600 !important;
}

.field-help {
  color: #6b7280 !important;
  font-size: 12px !important;
}

/* --- Auth Modal: High-Contrast Notice & Tabs (Fixes pale yellow on yellow) --- */
.guest-merge-notice {
  background: #fffbeb !important;
  border: 1px dashed #f59e0b !important;
  border-radius: 10px !important;
  padding: 0.65rem 0.85rem !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #92400e !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  margin-top: 0.85rem !important;
}

.guest-merge-notice span {
  color: #92400e !important;
  font-weight: 600 !important;
}

.auth-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 1.25rem 0 !important;
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.auth-divider span {
  color: #4b5563 !important;
  font-weight: 500 !important;
  padding: 0 0.75rem !important;
}

.auth-divider::before,
.auth-divider::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.auth-tabs-row {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  padding: 4px !important;
}

.auth-tab-btn {
  color: #4b5563 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

.auth-tab-btn:hover {
  color: #111111 !important;
}

.auth-tab-btn.active {
  background: #111111 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* --- User Profile Modal: High Contrast Slate & Amber --- */
.profile-hero-card {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}

.profile-name {
  color: #111111 !important;
  font-weight: 800 !important;
}

.profile-email {
  color: #4b5563 !important;
  font-weight: 500 !important;
}

.profile-stat-box {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}

.p-stat-label {
  color: #6b7280 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

.p-stat-val {
  color: #111111 !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
}

#profileReferralCode {
  color: #b45309 !important;
  font-weight: 800 !important;
}

#profileRoleBadge {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-weight: 700 !important;
}

#profileProviderBadge {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
  font-weight: 600 !important;
}

/* --- Settings Modal --- */
#settingsAccountName {
  color: #111111 !important;
  font-weight: 700 !important;
}

#settingsAccountCoins {
  color: #b45309 !important;
  font-weight: 800 !important;
}

#soundVolumeDisplay {
  color: #b45309 !important;
  font-weight: 700 !important;
}

/* --- Gold Pill Buttons: High-Contrast Dark Amber on Cream --- */
.btn-gold,
.pill-btn-sm.btn-gold {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.12) !important;
}

.btn-gold:hover,
.pill-btn-sm.btn-gold:hover {
  background: #fde68a !important;
  color: #78350f !important;
  border-color: #f59e0b !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.25) !important;
}

/* --- History Tab: High-Contrast Banners & Snippets --- */
.history-guest-banner {
  background: #fffbeb !important;
  border: 1px dashed #f59e0b !important;
}

.h-guest-text strong {
  color: #92400e !important;
  font-weight: 700 !important;
}

.h-guest-text p {
  color: #78350f !important;
  font-size: 13px !important;
}

.history-filter-pill {
  color: #4b5563 !important;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  font-weight: 600 !important;
}

.history-filter-pill:hover {
  color: #111111 !important;
  background: #e5e7eb !important;
}

.history-filter-pill.active {
  color: #ffffff !important;
  background: #111111 !important;
  border-color: #111111 !important;
}

.history-verdict-snippet {
  background: #f8fafc !important;
  border-left: 3px solid #111111 !important;
  color: #27272a !important;
  font-weight: 500 !important;
}

.history-verdict-snippet strong {
  color: #111111 !important;
}

.history-notes-badge {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #065f46 !important;
  font-weight: 600 !important;
}

/* --- Spread Card Mini Tags --- */
.spread-card-item .sc-tag-mini.pink {
  background: #fdf2f8 !important;
  border: 1px solid #fbcfe8 !important;
  color: #9d174d !important;
  font-weight: 700 !important;
}

.spread-card-item .sc-tag-mini.gold {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
  font-weight: 700 !important;
}

.badge-tag-pink {
  background: #fdf2f8 !important;
  border: 1px solid #fbcfe8 !important;
  color: #9d174d !important;
  font-weight: 700 !important;
}

/* --- Reversed Shadow Pill (Replaces pale pink with deep crimson) --- */
.reversed-pill {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
  font-weight: 700 !important;
}

/* --- Elemental Balance Banner (Step 3) --- */
#elementalBanner,
.elemental-banner {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

#elementalBanner div[style*="color: #fbbf24"],
#elementalBanner div[style*="color:#fbbf24"] {
  color: #111111 !important;
  font-weight: 700 !important;
}

.meter-label {
  color: #374151 !important;
  font-weight: 600 !important;
}

.meter-bar {
  background: #e5e7eb !important;
}

/* --- Admin CMS Dashboard & Tables --- */
.admin-header-badge {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
  font-weight: 700 !important;
}

.admin-tab-btn {
  color: #4b5563 !important;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  font-weight: 600 !important;
}

.admin-tab-btn.active {
  color: #ffffff !important;
  background: #111111 !important;
  border-color: #111111 !important;
  font-weight: 700 !important;
}

.admin-metric-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.admin-metric-card .metric-label {
  color: #6b7280 !important;
  font-weight: 700 !important;
}

.admin-metric-card .metric-value {
  color: #111111 !important;
  font-weight: 800 !important;
}

.admin-metric-card .metric-footnote {
  color: #4b5563 !important;
  font-weight: 500 !important;
}

.admin-table-container {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}

.admin-table th {
  background: #f9fafb !important;
  color: #111111 !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.admin-table td {
  color: #1f2937 !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-weight: 500 !important;
}

.admin-table tr:hover td {
  background: #f9fafb !important;
}

.badge-approved { background: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #a7f3d0 !important; font-weight: 700 !important; }
.badge-pending { background: #fffbeb !important; color: #92400e !important; border: 1px solid #fde68a !important; font-weight: 700 !important; }
.badge-rejected { background: #fef2f2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; font-weight: 700 !important; }
.badge-admin { background: #faf5ff !important; color: #6b21a8 !important; border: 1px solid #e9d5ff !important; font-weight: 700 !important; }
.badge-user { background: #f1f5f9 !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; font-weight: 700 !important; }

.admin-card-cell {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #111111 !important;
}

.admin-card-cell .card-name-th {
  color: #111111 !important;
  font-weight: 700 !important;
}

.admin-card-cell .card-name-en {
  color: #6b7280 !important;
}

/* --- Mentor Chat Drawer (#chatModal) --- */
.chat-drawer {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.12) !important;
}

.chat-drawer-header {
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

.mentor-name {
  color: #111111 !important;
  font-weight: 800 !important;
}

.mentor-status {
  color: #059669 !important;
  font-weight: 600 !important;
}

.chat-bubble.mentor {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  font-weight: 500 !important;
}

.chat-bubble.mentor strong {
  color: #111111 !important;
}

.chat-bubble.user {
  background: #111111 !important;
  color: #ffffff !important;
}

.chat-input-row {
  border-top: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

/* --- Reading Detail Modal --- */
.exec-verdict-body {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.exec-timing-body {
  color: #b45309 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  margin-top: 4px !important;
}

.exec-pill-badge {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-weight: 700 !important;
}

.notes-subcard {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}

.notes-title {
  color: #111111 !important;
  font-weight: 700 !important;
}

.notes-hint {
  color: #6b7280 !important;
  font-size: 12px !important;
}

/* ==========================================================================
   20. COMPETITOR-STYLE CLEAN STEP 2 DECK PICKER (2-ROW BALANCED SPREAD)
   ========================================================================== */

.competitor-step2-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1.25rem !important;
  padding: 0.4rem 0.25rem !important;
  flex-wrap: wrap !important;
}

.c-topbar-left {
  display: flex !important;
  align-items: center !important;
}

.c-back-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  transition: all 0.15s ease !important;
}

.c-back-link-btn:hover {
  background: #f3f4f6 !important;
  color: #111111 !important;
  border-color: #d1d5db !important;
}

.c-topbar-center {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 480px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.c-question-prefix {
  color: #9ca3af !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.c-question-text {
  color: #111111 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.c-spread-tag {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}

.c-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.c-btn-shuffle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #111111 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease !important;
}

.c-btn-shuffle:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
}

.c-btn-autopick {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.c-btn-autopick:hover {
  background: #f3f4f6 !important;
  color: #111111 !important;
}

.c-counter-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: #111111 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.15) !important;
  letter-spacing: 0.02em !important;
}

/* Competitor Canvas & Meditation Box */
.competitor-picker-canvas {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 20px !important;
  padding: 2.25rem 1.75rem !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03) !important;
}

.competitor-meditation-box {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.06) !important;
  border-radius: 16px !important;
  padding: 1.35rem 2rem !important;
  margin: 0 auto 1.5rem auto !important;
  max-width: 660px !important;
  text-align: center !important;
}

.c-meditation-title {
  color: #92400e !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.02em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.c-sparkle {
  color: #d97706 !important;
  font-size: 15px !important;
}

.c-meditation-sub {
  margin-top: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: 9999px !important;
  padding: 4px 16px !important;
  color: #78350f !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.c-info-icon {
  font-size: 13px !important;
  color: #b45309 !important;
}

/* Minimalist Position Slots Strip */
.competitor-slots-container {
  margin: 0.5rem 0 1.25rem 0 !important;
  display: flex !important;
  justify-content: center !important;
}

.competitor-slots-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
}

.competitor-slots-grid .spread-slot-item {
  width: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

.competitor-slots-grid .slot-box {
  width: 82px !important;
  height: 126px !important;
  border-radius: 10px !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.competitor-slots-grid .slot-box.empty {
  background: #f9fafb !important;
  border: 2px dashed #d1d5db !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
}

.competitor-slots-grid .slot-box.empty.active-target {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
}

.competitor-slots-grid .slot-box.filled {
  border: 1.5px solid #111111 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.competitor-slots-grid .slot-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

.competitor-slots-grid .slot-meta {
  text-align: center !important;
  max-width: 90px !important;
}

.competitor-slots-grid .slot-pos-badge {
  color: #111111 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.competitor-slots-grid .slot-card-name {
  color: #4b5563 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Status Bar */
.competitor-status-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.25rem !important;
  padding: 0 0.5rem !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.competitor-status-row .status-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.c-status-text {
  font-size: 13.5px !important;
  color: #374151 !important;
  font-weight: 500 !important;
}

.c-status-autopick-btn {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.c-status-autopick-btn:hover {
  background: #e5e7eb !important;
}

/* 2-Row Balanced Tarot Deck Stage */
.competitor-deck-stage {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 18px !important;
  padding: 1.75rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  user-select: none !important;
  position: relative !important;
}

.c-deck-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.c-deck-card {
  width: 74px !important;
  height: 122px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1.5px solid #d1d5db !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.2s ease, opacity 0.25s ease !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.c-deck-card img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  pointer-events: none !important;
  display: block !important;
}

.c-deck-card:hover {
  transform: translateY(-18px) scale(1.06) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 16px 28px rgba(245, 158, 11, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  z-index: 50 !important;
}

.c-deck-card.is-picked {
  opacity: 0.18 !important;
  pointer-events: none !important;
  transform: scale(0.92) !important;
  filter: grayscale(1) !important;
  border-color: #e5e7eb !important;
}

/* Shuffling Riffle Wave Animation */
@keyframes cDeckWave {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  30% {
    transform: translateY(-26px) rotate(4deg) scale(1.08);
    box-shadow: 0 16px 28px rgba(245, 158, 11, 0.25);
  }
  60% {
    transform: translateY(10px) rotate(-3deg) scale(0.98);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  }
}

.c-deck-card.shuffling-wave {
  animation: cDeckWave 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  animation-delay: calc(var(--c-idx, 0) * 25ms) !important;
}

/* Responsive Breakpoints */
@media (max-width: 960px) {
  .c-deck-card {
    width: 60px !important;
    height: 98px !important;
    border-radius: 8px !important;
  }
  .c-deck-row {
    gap: 6px !important;
  }
}

@media (max-width: 720px) {
  .competitor-picker-canvas {
    padding: 1.25rem 0.75rem !important;
  }
  .competitor-deck-stage {
    padding: 1.25rem 0.5rem !important;
  }
  .c-deck-card {
    width: 48px !important;
    height: 78px !important;
    border-radius: 6px !important;
  }
  .c-deck-row {
    gap: 4px !important;
  }
  .competitor-meditation-box {
    padding: 1rem 1.25rem !important;
  }
  .c-meditation-title {
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .c-deck-card {
    width: 38px !important;
    height: 62px !important;
    border-radius: 5px !important;
  }
  .c-deck-row {
    gap: 2.5px !important;
  }
  .c-meditation-title {
    font-size: 13px !important;
  }
  .c-meditation-sub {
    font-size: 11px !important;
    padding: 3px 10px !important;
  }
}

/* 4-Row Balanced Deck Stage for 10-Card Celtic Cross Spread */
.competitor-deck-stage.stage-4-rows {
  gap: 10px !important;
  padding: 1.35rem 0.75rem !important;
}

.competitor-deck-stage.stage-4-rows .c-deck-row {
  gap: 8px !important;
}

.competitor-deck-stage.stage-4-rows .c-deck-card {
  width: 66px !important;
  height: 108px !important;
}

@media (max-width: 960px) {
  .competitor-deck-stage.stage-4-rows .c-deck-card {
    width: 52px !important;
    height: 84px !important;
  }
  .competitor-deck-stage.stage-4-rows .c-deck-row {
    gap: 5px !important;
  }
}

@media (max-width: 720px) {
  .competitor-deck-stage.stage-4-rows .c-deck-card {
    width: 42px !important;
    height: 68px !important;
  }
  .competitor-deck-stage.stage-4-rows .c-deck-row {
    gap: 3px !important;
  }
}

@media (max-width: 480px) {
  .competitor-deck-stage.stage-4-rows .c-deck-card {
    width: 35px !important;
    height: 56px !important;
  }
  .competitor-deck-stage.stage-4-rows .c-deck-row {
    gap: 2px !important;
  }
}







/* ========================================================
   SECTION 21: AUSPICIOUS MOBILE WALLPAPER STUDIO (4-IN-1)
   ======================================================== */

.wallpaper-hero-card {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 50%, #FFFFFF 100%) !important;
  border: 1.5px solid #FDE68A !important;
  margin-bottom: 1.25rem;
}

.wallpaper-hero-card .eyebrow-pill.gold {
  background: linear-gradient(135deg, #B45309, #D97706);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 9999px;
  display: inline-block;
}

.wallpaper-studio-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.5rem;
  align-items: start;
}

.wallpaper-controls-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wallpaper-preview-panel {
  position: sticky;
  top: 1.5rem;
}

.wallpaper-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-top: 0.75rem;
}

.wallpaper-zodiac-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  padding: 6px 14px;
  margin-top: 0.85rem;
  font-size: 13px;
  color: #1E293B;
  font-weight: 600;
}
.wallpaper-zodiac-chip.hidden {
  display: none !important;
}

.wallpaper-goals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.wallpaper-goal-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.wallpaper-goal-card input[type="radio"] {
  display: none;
}
.wallpaper-goal-card:hover {
  border-color: #D97706;
  background: #FFFDF9;
  transform: translateY(-1px);
}
.wallpaper-goal-card.active {
  border-color: #B45309;
  background: #FFFBEB;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
}
.w-goal-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.w-goal-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #111111;
  line-height: 1.3;
}
.w-goal-desc {
  font-size: 11.5px;
  color: #6B7280;
  margin-top: 3px;
  line-height: 1.35;
}

.wallpaper-themes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.wallpaper-theme-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.wallpaper-theme-card input[type="radio"] {
  display: none;
}
.wallpaper-theme-card:hover {
  border-color: #D97706;
  background: #FFFDF9;
  transform: translateY(-1px);
}
.wallpaper-theme-card.active {
  border-color: #B45309;
  background: #FFFBEB;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
}

.w-theme-swatch {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}
.gold-velvet-swatch {
  background: radial-gradient(circle, #D97706 0%, #1E1B18 80%);
  border: 2px solid #F59E0B;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}
.celestial-swatch {
  background: radial-gradient(circle, #38BDF8 0%, #0F172A 80%);
  border: 2px solid #38BDF8;
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.3);
}
.art-nouveau-swatch {
  background: radial-gradient(circle, #10B981 0%, #064E3B 80%);
  border: 2px solid #34D399;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.cyber-oracle-swatch {
  background: radial-gradient(circle, #EC4899 0%, #312E81 80%);
  border: 2px solid #F43F5E;
  box-shadow: 0 2px 6px rgba(236, 72, 153, 0.3);
}

.w-theme-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #111111;
  line-height: 1.3;
}
.w-theme-desc {
  font-size: 11.5px;
  color: #6B7280;
  margin-top: 2px;
  line-height: 1.35;
}

.overlay-toggles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #F3F4F6;
}

/* Phone Mockup Frame */
.wallpaper-stage-card {
  padding: 1.5rem;
  background: #FFFFFF;
}

.phone-mockup-frame {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 40px;
  border: 9px solid #1E293B;
  background: #0B0F19;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.phone-mockup-island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #000000;
  border-radius: 16px;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
}
.phone-mockup-camera {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #111827;
  border: 1.5px solid #1F2937;
}

.phone-clock-overlay {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  text-align: center;
  color: #FFFFFF;
  z-index: 20;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.phone-clock-overlay.safe-zone-hidden {
  opacity: 0;
  transform: translateY(-8px);
}
.phone-clock-time {
  font-size: 46px;
  font-weight: 300;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  letter-spacing: -1.5px;
  line-height: 1;
}
.phone-clock-date {
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: 0.2px;
  opacity: 0.95;
}

.phone-dock-overlay {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.phone-dock-overlay.safe-zone-hidden {
  opacity: 0;
  transform: translateY(8px);
}
.dock-pill {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 7px 16px;
  display: flex;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.dock-dot {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.38);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.phone-home-bar {
  width: 108px;
  height: 4px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 2px;
}

.wallpaper-watermark-overlay {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallpaper-watermark-overlay.hidden {
  display: none !important;
}
.watermark-pattern {
  transform: rotate(-35deg);
  display: flex;
  flex-direction: column;
  gap: 50px;
  opacity: 0.35;
  user-select: none;
}
.watermark-pattern span {
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 3px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.wallpaper-canvas-container {
  width: 100%;
  height: 100%;
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0B0F19;
}

.wallpaper-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 25, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}
.wallpaper-loading-overlay.hidden {
  display: none !important;
}

.wallpaper-render-canvas,
.wallpaper-ai-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wallpaper-render-canvas.hidden {
  display: none !important;
}

.wallpaper-placeholder-mat {
  padding: 2rem 1.5rem;
  text-align: center;
  color: #94A3B8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.wallpaper-placeholder-mat.hidden {
  display: none !important;
}
.placeholder-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}
.placeholder-title {
  font-size: 14px;
  font-weight: 700;
  color: #F1F5F9;
  margin-bottom: 6px;
  line-height: 1.4;
}
.placeholder-sub {
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .wallpaper-studio-container {
    grid-template-columns: 1fr;
  }
  .wallpaper-preview-panel {
    position: static;
    margin-top: 1rem;
  }
  .wallpaper-goals-grid {
    grid-template-columns: 1fr;
  }
  .phone-mockup-frame {
    max-width: 290px;
  }
}

/* ==========================================================================
   26. DEFINITIVE UNIFIED CELESTIAL COSMIC DARK THEME (PLATFORM-WIDE)
   Seamless dark galaxy universe matching Chatarot luxury aesthetic
   ========================================================================== */

/* 1. Global Viewport & App Shell Canvas */
html, body {
  background-color: #07050d !important;
  background: #07050d !important;
  color: #e5e7eb !important;
  font-family: var(--font-body, 'Inter', -apple-system, sans-serif) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

.app-shell {
  background: transparent !important;
  background-color: transparent !important;
  color: #e5e7eb !important;
  min-height: 100vh !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.app-main-layout {
  background: transparent !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin: 0 auto !important;
  max-width: 1240px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 1.5rem 1.5rem 7rem 1.5rem !important;
}

.bento-main, .app-content-canvas {
  background: transparent !important;
  width: 100% !important;
}

/* 2. Fullscreen Cosmic Universe Layer */
.cosmic-universe-stage {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse 100% 75% at 50% 20%, #120e24 0%, #090713 45%, #040308 100%) !important;
}

/* 3. Celestial Dark Frosted Glass Top Navigation */
.app-top-navbar,
#appSidebar.app-top-navbar,
header.app-top-navbar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 64px !important;
  background: rgba(10, 8, 18, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
}

.top-nav-inner {
  max-width: 1320px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  box-sizing: border-box !important;
}

.top-nav-brand {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  text-decoration: none !important;
}

.top-nav-brand .brand-avatar {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.45) !important;
}

.top-nav-brand .brand-title {
  color: #ffffff !important;
  font-family: var(--font-display, 'Prompt', sans-serif) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.top-nav-brand .brand-dot-life {
  color: #f59e0b !important;
  font-weight: 700 !important;
}

/* Center Tabs */
.top-nav-tabs {
  display: flex !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9999px !important;
  padding: 4px 6px !important;
  gap: 6px !important;
}

.top-nav-tabs .sidebar-nav-item {
  color: #9ca3af !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.top-nav-tabs .sidebar-nav-item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.top-nav-tabs .sidebar-nav-item.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

/* Nav Icons and User Capsule */
.nav-icon-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #d1d5db !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.nav-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.top-nav-user,
#sidebarUserCapsule {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  padding: 4px 12px 4px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.top-nav-user .capsule-name {
  color: #f3f4f6 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.capsule-stat-pill.coin-pill,
#sidebarCoinPill {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35)) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  border-radius: 9999px !important;
  padding: 3px 10px !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15) !important;
}

/* 4. Complete Typography Contrast Overhaul (Zero Black-on-Dark Artifacts) */
h1, h2, h3, h4, h5, h6,
.card-headline,
.daily-free-headline,
.daily-widget-title,
.bento-title,
.paper-title,
.section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75) !important;
}

.chatarot-main-title,
h1.chatarot-main-title {
  font-family: 'Cinzel', 'Prompt', serif, sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin: 0 0 6px 0 !important;
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.2), 0 4px 18px rgba(0, 0, 0, 0.8) !important;
}

.chatarot-sub-title,
.card-subhead,
.daily-free-desc,
.daily-widget-sub,
.placeholder-sub {
  color: #9ca3af !important;
}

.chatarot-mono-caption {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
}

.chatarot-status-line {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  color: #d1d5db !important;
}

/* 5. Chatarot Hero Stage Transparent Host (Landing Page Glassmorphism) */
#tab-divination,
#divinationWizardStep1,
#divinationWizardStep1 .card-setup,
#divinationWizardStep1 .bento-card,
#step1QuestionHeroPane,
.chatarot-hero-view,
.chatarot-center-stage,
#tab-divination .premium-hero-card,
#tab-divination .wizard-stepper-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.chatarot-center-stage {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 2.5rem 1rem 3rem 1rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  z-index: 5 !important;
}

.chatarot-input-shell {
  width: 100% !important;
  max-width: 660px !important;
  background: rgba(18, 14, 34, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px !important;
  padding: 18px 20px 14px 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  text-align: left !important;
  transition: all 0.25s ease !important;
}

.chatarot-input-shell:focus-within {
  background: rgba(18, 14, 34, 0.65) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 25px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Birth Chart Accordion Transparent Glass */
.bento-accordion-card.birthchart-accordion {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
  color: #ffffff !important;
}

.birthchart-accordion .accordion-title {
  color: #f3f4f6 !important;
}

.birthchart-accordion .accordion-desc {
  color: #9ca3af !important;
}

.birthchart-accordion .accordion-icon {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #fbbf24 !important;
}

.birthchart-accordion .accordion-icon svg {
  stroke: #fbbf24 !important;
}

.birthchart-drawer {
  background: rgba(14, 10, 24, 0.75) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.chatarot-textarea {
  width: 100% !important;
  min-height: 85px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

.chatarot-textarea::placeholder {
  color: #7b758d !important;
}

.btn-ivory-start {
  background: #ece8df !important;
  color: #110e1b !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 13px 40px !important;
  margin-top: 22px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 22px rgba(236, 232, 223, 0.25) !important;
  transition: all 0.25s ease !important;
}

.btn-ivory-start:hover {
  background: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.4) !important;
}

/* 6. Cohesive Bento Cards Across Entire Platform */
.bento-card,
.product-mockup-card,
.hero-app-mockup-card,
.daily-free-draw-card,
.daily-altar-widget,
.history-card,
.reading-paper-card,
.executive-verdict-card,
.wallpaper-card,
.synergy-card {
  background: rgba(18, 14, 30, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
  color: #e5e7eb !important;
}

.bento-card:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6) !important;
}

.bento-card-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.bento-input-pill,
.bento-input,
.bento-textarea {
  background: rgba(22, 17, 36, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.bento-input-pill:focus,
.bento-input:focus,
.bento-textarea:focus {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.2) !important;
}

.eyebrow-pill,
.bento-badge-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #e5e7eb !important;
}

.eyebrow-pill.gold,
.bento-badge-pill.coin-pill,
.bento-badge-pill.streak-pill {
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
}

.eyebrow-pill.free-pill {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

.btn-coral-pill,
.btn-primary,
.free-daily-cta-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
}

/* 7. Celestial Modals & Dialogs (Zero Stark White Overlays) */
.bento-modal,
.bento-modal-content,
.bento-modal-dialog,
.modal-box {
  background: #110d22 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  color: #f3f4f6 !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9) !important;
}

.modal-header,
.bento-modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* 8. Fullscreen Bottom HUD Dock */
.chatarot-bottom-dock {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 12px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  background: linear-gradient(to top, rgba(7, 5, 13, 0.98) 0%, rgba(7, 5, 13, 0.75) 65%, transparent 100%) !important;
  box-sizing: border-box !important;
}

.dock-pill-btn,
.dock-icon-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #e5e7eb !important;
  border-radius: 9999px !important;
}

.dock-pill-btn:hover,
.dock-icon-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.dock-center {
  color: #6b7280 !important;
  font-size: 11.5px !important;
}

.dock-center a {
  color: #9ca3af !important;
  text-decoration: none !important;
}

.dock-center a:hover {
  color: #f3f4f6 !important;
  text-decoration: underline !important;
}

/* 9. Mobile Header Adaptation (< 860px) */
@media (max-width: 860px) {
  .mobile-top-header {
    background: rgba(11, 8, 20, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
  }
  .mobile-hamburger-btn {
    color: #ffffff !important;
  }
  .mobile-brand-title {
    color: #ffffff !important;
  }
  .app-main-layout {
    padding: 1rem 0.75rem calc(88px + env(safe-area-inset-bottom, 0px)) 0.75rem !important;
  }
  .chatarot-main-title {
    font-size: 1.65rem !important;
  }
  .chatarot-bottom-dock .dock-center {
    display: none !important;
  }
}


/* 3D Falling and Floating Cards Animations (User: effect ไพ่เคลื่อนๆตกลงมา) */
.cosmic-floating-cards {
  position: absolute !important;
  inset: 0 !important;
  perspective: 1200px !important;
  transform-style: preserve-3d !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.floating-tarot-card {
  position: absolute !important;
  width: 95px !important;
  height: 162px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.92), 0 0 22px rgba(212, 175, 55, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  animation: cosmicCardFall var(--dur, 11s) ease-in-out infinite alternate !important;
  will-change: transform !important;
  pointer-events: none !important;
  opacity: 0.68 !important;
}

.floating-tarot-card.float-alt {
  animation: cosmicCardFloat var(--dur, 10s) ease-in-out infinite alternate !important;
}

.floating-tarot-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@keyframes cosmicCardFall {
  0% {
    transform: translateY(-28px) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  }
  50% {
    transform: translateY(18px) rotate(calc(var(--rot, 0deg) + 4deg)) scale(calc(var(--sc, 1) * 1.02));
  }
  100% {
    transform: translateY(42px) rotate(calc(var(--rot, 0deg) - 3deg)) scale(var(--sc, 1));
  }
}

@keyframes cosmicCardFloat {
  0% {
    transform: translateY(0px) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  }
  50% {
    transform: translateY(-22px) rotate(calc(var(--rot, 0deg) - 3.5deg)) scale(calc(var(--sc, 1) * 1.03));
  }
  100% {
    transform: translateY(15px) rotate(calc(var(--rot, 0deg) + 2.5deg)) scale(var(--sc, 1));
  }
}

/* ==========================================================================
   27. CHATAROT 3D STEP 2 SHUFFLING & DRAW EXPERIENCE (USER EXACT FLOW)
   ========================================================================== */
.chatarot-step2-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: radial-gradient(ellipse at 50% 50%, #0d081d 0%, #06040e 65%, #020105 100%) !important;
  padding: 1rem 1.5rem 1.5rem 1.5rem !important;
  box-sizing: border-box !important;
  z-index: 99999 !important;
  overflow: hidden !important;
}

.chatarot-step2-container.hidden {
  display: none !important;
  pointer-events: none !important;
}

/* Minimal HUD Topbar */
.chatarot-step2-hud-top {
  width: 100% !important;
  max-width: 1280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 16px !important;
  margin-bottom: 0.5rem !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  z-index: 100 !important;
}

.hud-pill-back, .hud-pill-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: #e5e7eb !important;
  padding: 7px 16px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.hud-pill-back:hover, .hud-pill-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

.hud-pill-btn.auto-pick {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3)) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
  font-weight: 600 !important;
}

.hud-pill-btn.auto-pick:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.45)) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.3) !important;
}

/* Dynamic Selection Prompt Title (User image 3) */
.hud-title-wrap {
  flex: 1 !important;
  text-align: center !important;
  min-width: 260px !important;
}

.chatarot-select-title {
  font-family: 'Cinzel', 'Prompt', serif, sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 400 !important;
  color: #f3f4f6 !important;
  margin: 0 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 2px 10px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.3s ease !important;
}

.chatarot-select-title.highlight {
  color: #fbbf24 !important;
  text-shadow: 0 0 30px rgba(245, 158, 11, 0.8), 0 0 15px rgba(255, 255, 255, 0.6) !important;
}

/* Stage Viewport */
.chatarot-3d-stage-viewport {
  position: relative !important;
  width: 100% !important;
  flex: 1 !important;
  min-height: 480px !important;
  perspective: 1000px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.chatarot-phase {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.chatarot-phase.hidden {
  display: none !important;
  opacity: 0 !important;
}

/* Phase 1: 3D Mystical Shuffling Theater (User image 1) */
.phase-shuffling {
  position: relative !important;
  width: 100% !important;
  min-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  perspective: 1000px !important;
  transform-style: preserve-3d !important;
  overflow: visible !important;
}

.shuffling-vortex-sphere {
  position: relative !important;
  width: 320px !important;
  height: 300px !important;
  margin: 0 auto 1rem auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
}

/* Glowing Sacred Portal */
.shuffling-mystic-portal {
  position: absolute !important;
  inset: -20px !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.portal-ring {
  position: absolute !important;
  border-radius: 50% !important;
  border: 1.5px dashed rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.25), inset 0 0 25px rgba(245, 158, 11, 0.15) !important;
}

.portal-ring.ring-outer {
  width: 340px !important;
  height: 340px !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  animation: portalSpinClockwise 16s linear infinite !important;
}

.portal-ring.ring-mid {
  width: 250px !important;
  height: 250px !important;
  border: 1px dotted rgba(251, 191, 36, 0.5) !important;
  animation: portalSpinCounter 11s linear infinite !important;
}

.portal-core-glow {
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.35) 0%, rgba(139, 92, 246, 0.15) 50%, transparent 75%) !important;
  filter: blur(8px) !important;
  animation: corePulseGlow 3s ease-in-out infinite alternate !important;
}

@keyframes portalSpinClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes portalSpinCounter {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes corePulseGlow {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 1; }
}

/* Riffle Deck Cascade in Center */
.shuffling-riffle-stage {
  position: relative !important;
  width: 180px !important;
  height: 160px !important;
  transform-style: preserve-3d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}

.riffle-packet {
  position: absolute !important;
  width: 78px !important;
  height: 130px !important;
  transform-style: preserve-3d !important;
}

.riffle-packet.riffle-left {
  left: 18px !important;
  animation: riffleLeftShuffle 2.4s ease-in-out infinite !important;
}

.riffle-packet.riffle-right {
  right: 18px !important;
  animation: riffleRightShuffle 2.4s ease-in-out infinite !important;
}

.riffle-card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85), 0 0 15px rgba(245, 158, 11, 0.35) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.6) !important;
  background: #110d24 !important;
}

.riffle-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.riffle-left .c1 { transform: rotateZ(-12deg) translateZ(0px); }
.riffle-left .c2 { transform: rotateZ(-9deg) translateZ(5px); }
.riffle-left .c3 { transform: rotateZ(-6deg) translateZ(10px); }
.riffle-left .c4 { transform: rotateZ(-3deg) translateZ(15px); }

.riffle-right .c1 { transform: rotateZ(12deg) translateZ(0px); }
.riffle-right .c2 { transform: rotateZ(9deg) translateZ(5px); }
.riffle-right .c3 { transform: rotateZ(6deg) translateZ(10px); }
.riffle-right .c4 { transform: rotateZ(3deg) translateZ(15px); }

@keyframes riffleLeftShuffle {
  0% { transform: translateX(0px) rotateY(0deg) rotateZ(0deg); }
  25% { transform: translateX(-38px) rotateY(-20deg) rotateZ(-12deg); }
  50% { transform: translateX(-15px) translateY(-16px) rotateY(-10deg) rotateZ(-5deg); }
  75% { transform: translateX(4px) rotateY(0deg) rotateZ(2deg); }
  100% { transform: translateX(0px) rotateY(0deg) rotateZ(0deg); }
}

@keyframes riffleRightShuffle {
  0% { transform: translateX(0px) rotateY(0deg) rotateZ(0deg); }
  25% { transform: translateX(38px) rotateY(20deg) rotateZ(12deg); }
  50% { transform: translateX(15px) translateY(-16px) rotateY(10deg) rotateZ(5deg); }
  75% { transform: translateX(-4px) rotateY(0deg) rotateZ(-2deg); }
  100% { transform: translateX(0px) rotateY(0deg) rotateZ(0deg); }
}

/* Orbiting Major Arcana Cards in 3D */
.shuffling-orbit-system {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  animation: orbitSystemSpin 12s linear infinite !important;
}

@keyframes orbitSystemSpin {
  from { transform: rotateY(0deg) rotateX(15deg); }
  to { transform: rotateY(360deg) rotateX(15deg); }
}

.shuffling-orbit-card {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 58px !important;
  height: 98px !important;
  margin-top: -49px !important;
  margin-left: -29px !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9), 0 0 20px rgba(245, 158, 11, 0.5) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.75) !important;
  background: #110d24 !important;
}

.shuffling-orbit-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.shuffling-orbit-card.orb-1 { transform: rotateY(0deg) translateZ(215px) rotateY(0deg); }
.shuffling-orbit-card.orb-2 { transform: rotateY(60deg) translateZ(215px) translateY(-18px) rotateY(-60deg); }
.shuffling-orbit-card.orb-3 { transform: rotateY(120deg) translateZ(215px) translateY(18px) rotateY(-120deg); }
.shuffling-orbit-card.orb-4 { transform: rotateY(180deg) translateZ(215px) rotateY(-180deg); }
.shuffling-orbit-card.orb-5 { transform: rotateY(240deg) translateZ(215px) translateY(-18px) rotateY(-240deg); }
.shuffling-orbit-card.orb-6 { transform: rotateY(300deg) translateZ(215px) translateY(18px) rotateY(-300deg); }

.shuffling-center-caption {
  text-align: center !important;
  margin-top: 1rem !important;
  z-index: 10 !important;
}

.shuffling-headline {
  font-family: 'Cinzel', 'Prompt', serif, sans-serif !important;
  font-size: 1.5rem !important;
  color: #ffffff !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.shuffling-subline {
  color: #9ca3af !important;
  font-size: 0.95rem !important;
  margin: 0 0 1rem 0 !important;
}

.btn-cut-deck-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) translateZ(280px) !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(14, 10, 28, 0.95) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.95) !important;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.75), 0 14px 40px rgba(0, 0, 0, 0.9) !important;
  border-radius: 9999px !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  color: #ffffff !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  animation: cutDeckPulse 2s ease-in-out infinite alternate !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  user-select: none !important;
  white-space: nowrap !important;
}

.btn-cut-deck-center:hover {
  background: #fbbf24 !important;
  color: #110e1b !important;
  transform: translate(-50%, -50%) translateZ(180px) scale(1.08) !important;
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.95), 0 15px 40px rgba(0, 0, 0, 0.9) !important;
  border-color: #ffffff !important;
}

.btn-cut-deck-center .cut-deck-spark {
  font-size: 1.1rem !important;
  color: #fbbf24 !important;
  margin-bottom: 2px !important;
  transition: color 0.2s ease !important;
}

.btn-cut-deck-center:hover .cut-deck-spark {
  color: #110e1b !important;
}

.btn-cut-deck-center .cut-deck-text {
  font-family: 'Cinzel', 'Prompt', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.btn-cut-deck-center .cut-deck-sub {
  font-size: 0.68rem !important;
  opacity: 0.85 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

@keyframes cutDeckPulse {
  0% {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.45), 0 6px 20px rgba(0, 0, 0, 0.7);
    border-color: rgba(251, 191, 36, 0.7);
  }
  100% {
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.85), 0 12px 35px rgba(0, 0, 0, 0.9);
    border-color: #fef08a;
  }
}

.hud-pill-skip {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #d1d5db !important;
  font-size: 12px !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.hud-pill-skip:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Phase 2: Gathered Deck in Center (User image 2) */
.phase-deck {
  text-align: center !important;
  padding: 3rem 1rem !important;
}

.gathered-3d-deck {
  position: relative !important;
  width: 105px !important;
  height: 180px !important;
  margin: 0 auto 2.5rem auto !important;
  cursor: pointer !important;
  perspective: 900px !important;
  transform-style: preserve-3d !important;
  transform: rotateX(28deg) rotateY(-12deg) rotateZ(6deg) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.gathered-3d-deck:hover {
  transform: rotateX(18deg) rotateY(-5deg) rotateZ(2deg) scale(1.06) !important;
}

.deck-layer-card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(212, 175, 55, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.deck-layer-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.deck-layer-card.layer-1 { transform: translateZ(0px); }
.deck-layer-card.layer-2 { transform: translateZ(5px); }
.deck-layer-card.layer-3 { transform: translateZ(10px); }
.deck-layer-card.layer-4 { transform: translateZ(15px); }
.deck-layer-card.layer-top { transform: translateZ(20px); }

.btn-finish-shuffle {
  margin-top: 0 !important;
  padding: 14px 45px !important;
  font-size: 14px !important;
  box-shadow: 0 4px 30px rgba(236, 232, 223, 0.35) !important;
}

/* ========================================================
   PHASE 3: 360° COSMIC ORBIT CAROUSEL (STANDING IN CENTER)
   ======================================================== */
.phase-spread {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  overflow: visible !important;
}

.cosmic-spread-field {
  position: relative !important;
  width: 100vw !important;
  flex: 1 !important;
  min-height: 480px !important;
  perspective: 1000px !important;
  perspective-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  touch-action: none !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

.cosmic-spread-field:active {
  cursor: grabbing !important;
}

.cosmic-orbit-carousel {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  transform-style: preserve-3d !important;
  transform-origin: 0px 0px 0px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: none !important;
  will-change: transform !important;
}

.spread-card-3d {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 72px !important;
  height: 122px !important;
  margin-top: -61px !important;
  margin-left: -36px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: #0f0a1c !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.9), 0 0 16px rgba(212, 175, 55, 0.22) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  transform-style: preserve-3d !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, filter 0.25s ease, transform 0.3s ease !important;
  user-select: none !important;
  pointer-events: auto !important;
  z-index: 20 !important;
}

.spread-card-3d:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 1), 0 0 35px rgba(245, 158, 11, 0.8) !important;
  z-index: 200 !important;
}

.spread-card-3d.is-selected {
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 1), 0 0 45px rgba(245, 158, 11, 1) !important;
  z-index: 300 !important;
  animation: selectedPulse 1.2s ease-in-out infinite alternate !important;
}

@keyframes selectedPulse {
  0% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.7); }
  100% { box-shadow: 0 0 50px rgba(245, 158, 11, 1); }
}

.spread-card-3d.is-picked {
  opacity: 0.25 !important;
  pointer-events: none !important;
  filter: grayscale(0.85) !important;
}

.spread-card-3d img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  pointer-events: none !important;
}

.spread-card-order-badge {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
  z-index: 10 !important;
}

/* Mobile specific responsive styling */
@media (max-width: 768px) {
  .chatarot-step2-container {
    padding: 0.6rem 0.5rem !important;
  }
  .chatarot-select-title {
    font-size: 1.35rem !important;
  }
  .phase-shuffling {
    min-height: 380px !important;
  }
  .shuffling-vortex-sphere {
    width: 260px !important;
    height: 240px !important;
  }
  .portal-ring.ring-outer {
    width: 260px !important;
    height: 260px !important;
  }
  .portal-ring.ring-mid {
    width: 190px !important;
    height: 190px !important;
  }
  .shuffling-orbit-card {
    width: 44px !important;
    height: 74px !important;
    margin-top: -37px !important;
    margin-left: -22px !important;
  }
  .cosmic-spread-field {
    min-height: 420px !important;
    perspective: 680px !important;
  }
  .spread-card-3d {
    width: 48px !important;
    height: 82px !important;
    margin-top: -41px !important;
    margin-left: -24px !important;
    border-radius: 6px !important;
  }
  .picked-cards-tray-dock {
    gap: 6px !important;
    padding: 6px 12px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .tray-dock-slot {
    width: 40px !important;
    height: 64px !important;
    border-radius: 6px !important;
  }
  .tray-dock-slot .slot-placeholder-num {
    font-size: 11px !important;
  }
  .tray-dock-slot .slot-pos-name {
    font-size: 8px !important;
    max-width: 38px !important;
  }
  .btn-cut-deck-center {
    padding: 8px 16px !important;
  }
  .btn-cut-deck-center .cut-deck-text {
    font-size: 0.85rem !important;
  }
  .btn-cut-deck-center .cut-deck-sub {
    font-size: 0.62rem !important;
  }
}

/* Bottom Tray Dock */
.picked-cards-tray-dock {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 10px 20px !important;
  background: rgba(14, 10, 24, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.15) !important;
  margin-top: 14px !important;
  margin-bottom: 16px !important;
  z-index: 80 !important;
  max-width: 95vw !important;
  overflow-x: auto !important;
}

.tray-dock-slot {
  position: relative !important;
  width: 56px !important;
  height: 90px !important;
  border-radius: 7px !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  box-sizing: border-box !important;
}

.tray-dock-slot .slot-placeholder-num {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
}

.tray-dock-slot .slot-pos-name {
  font-size: 9.5px !important;
  color: #6b7280 !important;
  text-align: center !important;
  margin-top: 3px !important;
  max-width: 50px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tray-dock-slot.filled {
  border: 2px solid #fbbf24 !important;
  background: #0f0a1c !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.6) !important;
  animation: slotSnapPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes slotSnapPop {
  0% { transform: scale(0.85); box-shadow: 0 0 30px rgba(245, 158, 11, 1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.tray-dock-slot.filled img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 5px !important;
  display: block !important;
}

.tray-dock-slot .tray-slot-badge {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.picked-cards-tray-dock.all-complete {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.85), 0 15px 50px rgba(0,0,0,0.9) !important;
  animation: trayGlowPulse 1s ease-in-out infinite alternate !important;
}

@keyframes trayGlowPulse {
  0% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.6); }
  100% { box-shadow: 0 0 45px rgba(245, 158, 11, 0.95); }
}

/* ========================================================
   DEFINITIVE FULLSCREEN 360° COSMIC DIVINATION VIEWPORT
   ======================================================== */
.chatarot-step2-container {
  position: fixed !important;
  inset: 0 !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: 999999 !important;
  background: radial-gradient(circle at center, #1b1238 0%, #0c071a 60%, #030108 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.chatarot-step2-container.hidden {
  display: none !important;
}

.chatarot-step2-hud-top {
  position: absolute !important;
  top: 16px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 0 1.5rem !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.chatarot-3d-stage-viewport {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.cosmic-spread-field {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, calc(-50% - 15px)) !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.picked-cards-tray-dock {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
  margin: 0 !important;
}

/* ========================================================
   UNIVERSAL HIGH-CONTRAST TEXT & FORM VISIBILITY ENGINE
   (Completely eliminates all dark-on-dark and washed-out text)
   ======================================================== */

/* 1. Step 1: Form labels, checkboxes, birthchart drawer */
.field-label,
label,
.bento-field-group label,
.bento-field-group label.field-label,
.spread-picker-header label.field-label {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.checkbox-text,
.bento-checkbox .checkbox-text {
  color: #ffffff !important;
  font-weight: 500 !important;
}

.birthchart-drawer-title {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.accordion-title {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.accordion-desc {
  color: #d1d5db !important;
}

.bento-accordion-card {
  background: rgba(18, 13, 34, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.birthchart-drawer {
  background: rgba(14, 10, 26, 0.95) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.bento-input-pill,
input[type="date"].bento-input-pill,
input[type="time"].bento-input-pill {
  background: rgba(22, 17, 38, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.bento-input-pill::placeholder {
  color: #9ca3af !important;
}

.spread-addons-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* 2. Step 3: Spread Slot Cards (Flipbook Page 2) */
.spread-slot-item .slot-pos-badge,
.slot-pos-badge,
.competitor-slots-grid .slot-pos-badge {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.spread-slot-item .slot-card-name,
.slot-card-name,
.competitor-slots-grid .slot-card-name {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.spread-slot-item .slot-orient-tag,
.slot-orient-tag {
  font-size: 10.5px !important;
  font-weight: 600 !important;
}

.slot-orient-tag.upright {
  color: #93c5fd !important;
}

.slot-orient-tag.reversed {
  color: #f472b6 !important;
}

/* 3. Elemental Balance Banner (Flipbook Page 2) */
.elemental-banner,
#elementalBanner {
  background: #0d091a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8) !important;
  border-radius: 14px !important;
  padding: 1.1rem 1.25rem !important;
  color: #ffffff !important;
}

.elemental-banner div,
#elementalBanner div {
  color: #ffffff !important;
}

.elemental-meters .meter-label,
.meter-label {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
}

.elemental-meters .meter-label span {
  color: #ffffff !important;
}

/* 4. Page 1 & Reading Result Cards */
.reading-paper-card,
.executive-verdict-card,
.bento-card {
  background: #0e0a1e !important;
  color: #f3f4f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.exec-verdict-body {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.c-question-text {
  color: #fbbf24 !important;
  font-weight: 600 !important;
}

.exec-category-tag,
.category-badge {
  color: #fbbf24 !important;
}

.prophecy-card,
.bento-badge {
  color: #ffffff !important;
}

.card-split-item {
  background: #110d24 !important;
  color: #f3f4f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.card-split-title {
  color: #fbbf24 !important;
}

.card-split-desc {
  color: #e5e7eb !important;
}

/* 5. Page 3 Deep Dive & Birth Chart Synergy */
.grand-master-heading,
.section-title,
.deep-dive-title,
.reading-section-title {
  color: #fbbf24 !important;
  font-weight: 700 !important;
}

.reading-paper-card p,
.reading-paper-card li,
.prophecy-text {
  color: #f3f4f6 !important;
}

.birthchart-synergy-card {
  background: #0e0a1e !important;
  color: #ffffff !important;
}

.synergy-chip {
  color: #ffffff !important;
}

/* 6. Page 5 Followup & Suggested Questions */
.followup-section,
.detail-followup-section,
#followupSection {
  background: #0d091a !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.followup-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
}

.followup-sub {
  color: #d1d5db !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

.suggested-header-title {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}

.suggested-spark-icon {
  color: #fbbf24 !important;
}

.suggested-fu-btn,
.teaser-fu-btn {
  background: rgba(26, 19, 48, 0.9) !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.suggested-fu-btn:hover,
.teaser-fu-btn:hover {
  background: rgba(251, 191, 36, 0.22) !important;
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
  transform: translateY(-1px) !important;
}

.suggested-fu-text,
.teaser-fu-text {
  color: #ffffff !important;
}

.suggested-fu-token,
.teaser-fu-token {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #fef08a !important;
  border: 1px solid rgba(251, 191, 36, 0.6) !important;
}

/* 7. Floating Cards Opacity while Reading */
#divinationWizardStep3:not(.hidden) ~ .cosmic-floating-cards,
.reading-result-book:not(.hidden) ~ .cosmic-floating-cards {
  opacity: 0.04 !important;
  pointer-events: none !important;
}

/* ========================================================
   8. HISTORY CARDS & HISTORY DETAIL MODAL OBSIDIAN THEME
   ======================================================== */
.history-card,
.bento-history-card {
  background: #0e0a1e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  color: #f3f4f6 !important;
  border-radius: 16px !important;
}

.history-card:hover {
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.15) !important;
}

.history-question {
  color: #fbbf24 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 0.5rem 0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.history-date-badge {
  color: #9ca3af !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.history-verdict-snippet {
  background: rgba(255, 255, 255, 0.05) !important;
  border-left: 3px solid #fbbf24 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: #f3f4f6 !important;
  line-height: 1.5 !important;
}

.history-verdict-snippet strong {
  color: #ffffff !important;
}

.history-verdict-snippet div {
  color: #d1d5db !important;
}

.history-notes-badge {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  color: #fbbf24 !important;
}

/* History Detail Modal */
#readingDetailModal .bento-modal-card,
#readingDetailModal .modal-lg {
  background: #0d081e !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 30px rgba(245, 158, 11, 0.12) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
}

#readingDetailModal .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-bottom: 1rem !important;
}

#readingDetailModal .modal-headline,
#readingDetailModal #detailQuestionTitle {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

#readingDetailModal .detail-date-text {
  color: #9ca3af !important;
  font-size: 13px !important;
}

#readingDetailModal .section-mini-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  margin-bottom: 0.75rem !important;
}

#readingDetailModal .detail-cards-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 0.75rem 0 !important;
  overflow-x: visible !important;
}

#readingDetailModal .detail-card-item {
  background: rgba(20, 14, 40, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  padding: 10px 8px !important;
  color: #ffffff !important;
  text-align: center !important;
  flex: 0 1 120px !important;
  min-width: 105px !important;
  max-width: 135px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

#readingDetailModal .detail-card-img-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

#readingDetailModal .detail-card-img {
  width: 76px !important;
  height: auto !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

#readingDetailModal .detail-card-pos {
  color: #fbbf24 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  display: block !important;
  margin-top: 4px !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

#readingDetailModal .detail-card-name {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: block !important;
  margin-top: 2px !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

#readingDetailModal #detailExecutiveCard,
#readingDetailModal .executive-subcard {
  background: #150f2c !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
  border-radius: 12px !important;
  padding: 1.1rem !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

#readingDetailModal .exec-pill-badge {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  margin-bottom: 8px !important;
}

#readingDetailModal #detailVerdictText,
#readingDetailModal .exec-verdict-body {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

#readingDetailModal #detailTimingText,
#readingDetailModal .exec-timing-body {
  color: #fbbf24 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  margin-top: 6px !important;
}

#readingDetailModal .bento-paper-card {
  background: #110c22 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 1.25rem !important;
  color: #f3f4f6 !important;
}

#readingDetailModal .reading-body,
#readingDetailModal #detailReadingMarkdown {
  color: #f3f4f6 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

#readingDetailModal .reading-body h2,
#readingDetailModal .reading-body h3,
#readingDetailModal .reading-body h4 {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  margin: 1.25rem 0 0.5rem !important;
}

#readingDetailModal .reading-body p,
#readingDetailModal .reading-body li {
  color: #f3f4f6 !important;
}

#readingDetailModal .reading-body strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

#readingDetailModal .bento-subcard.notes-subcard {
  background: #130d28 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  color: #ffffff !important;
}

#readingDetailModal .notes-title {
  color: #fbbf24 !important;
  font-weight: 700 !important;
}

#readingDetailModal .notes-hint {
  color: #9ca3af !important;
}

#readingDetailModal #detailNotesInput {
  background: rgba(22, 17, 38, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px !important;
  width: 100% !important;
  padding: 8px 12px !important;
}

/* Follow-up Thread inside Reading Detail Modal */
#readingDetailModal #detailFollowupSection {
  margin-top: 1.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-top: 1.25rem !important;
}

#readingDetailModal #detailFollowupSection .section-mini-title {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#readingDetailModal .followup-q-bubble {
  align-self: flex-end !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 16px 16px 4px 16px !important;
  padding: 12px 18px !important;
  margin-bottom: 12px !important;
  max-width: 90% !important;
  margin-left: auto !important;
}

#readingDetailModal .followup-q-bubble .fu-author {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  display: block !important;
  margin-bottom: 4px !important;
}

#readingDetailModal .followup-q-bubble p {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

#readingDetailModal .followup-a-bubble {
  align-self: flex-start !important;
  background: #181135 !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: 16px 16px 16px 4px !important;
  padding: 18px 22px !important;
  margin-bottom: 18px !important;
  max-width: 96% !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

#readingDetailModal .followup-a-bubble .fu-author {
  color: #fbbf24 !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#readingDetailModal .followup-a-bubble .a-content,
#readingDetailModal .followup-a-bubble .reading-body {
  color: #f3f4f6 !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
}

#readingDetailModal .followup-a-bubble p {
  color: #e5e7eb !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  margin-bottom: 0.85rem !important;
}

#readingDetailModal .followup-a-bubble strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

#readingDetailModal .followup-a-bubble h1,
#readingDetailModal .followup-a-bubble h2,
#readingDetailModal .followup-a-bubble h3,
#readingDetailModal .followup-a-bubble h4 {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  margin-top: 1.15rem !important;
  margin-bottom: 0.5rem !important;
}

#readingDetailModal .followup-a-bubble ul,
#readingDetailModal .followup-a-bubble ol {
  padding-left: 1.25rem !important;
  margin-bottom: 0.85rem !important;
}

#readingDetailModal .followup-a-bubble li {
  color: #e5e7eb !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-bottom: 0.35rem !important;
}

/* ========================================================
   DETAIL MODAL FOLLOW-UP INTERACTIVE SECTION
   ======================================================== */
.detail-followup-section {
  background: rgba(14, 10, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.15rem;
}

.detail-followup-input-box {
  transition: all 0.2s ease;
}

.detail-followup-input-box:focus-within {
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.2);
}

#detailFollowupInput {
  background: rgba(10, 6, 22, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

#detailFollowupInput:focus {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}

#detailSendFollowupBtn {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.35) !important;
  transition: all 0.2s ease !important;
}

#detailSendFollowupBtn:hover:not(:disabled) {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 18px rgba(245, 158, 11, 0.5) !important;
}

#detailSendFollowupBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================================
   9. DAILY GUIDANCE CTA BUTTON & ARROW
   ======================================================== */
#altarQuickDailyCardBtn,
.free-daily-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  max-width: 360px !important;
  padding: 12px 32px !important;
  margin: 1rem 0 0 0 !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

#altarQuickDailyCardBtn:hover,
.free-daily-cta-btn:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 28px rgba(245, 158, 11, 0.6) !important;
}

#altarQuickDailyCardBtn .btn-cta-svg,
.free-daily-cta-btn .btn-cta-svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #ffffff !important;
  stroke-width: 2.5 !important;
  transition: transform 0.2s ease !important;
}

#altarQuickDailyCardBtn:hover .btn-cta-svg,
.free-daily-cta-btn:hover .btn-cta-svg {
  transform: translateX(4px) !important;
}

/* ========================================================
   10. UNIVERSAL MODAL OBSIDIAN THEME (ALL MODALS)
   ======================================================== */
.bento-modal-card,
.modal-card,
.wallet-modal,
.auth-modal,
#walletModal .bento-modal-card,
#authModal .bento-modal-card,
#settingsModal .bento-modal-card,
#insufficiencyModal .bento-modal-card,
#adminModal .bento-modal-card {
  background: #0d081e !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 35px rgba(245, 158, 11, 0.15) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
}

.modal-headline,
.modal-title,
.modal-header h2,
.modal-header h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.modal-sub,
.modal-desc,
.auth-sub {
  color: #d1d5db !important;
}

.auth-tab-btn {
  color: #9ca3af !important;
  background: transparent !important;
}

.auth-tab-btn.active {
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
}

.topup-pkg-card {
  background: rgba(20, 15, 40, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.topup-pkg-card:hover {
  border-color: #fbbf24 !important;
  background: rgba(30, 22, 58, 0.95) !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.35) !important;
}

.topup-pkg-card.popular {
  border-color: #fbbf24 !important;
  background: rgba(35, 25, 65, 0.95) !important;
}

.pkg-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.pkg-total-coins {
  color: #fbbf24 !important;
  font-weight: 800 !important;
}

.pkg-coins-label {
  color: #ffffff !important;
}

.pkg-bonus-tag {
  color: #f472b6 !important;
}

.pkg-desc {
  color: #d1d5db !important;
}

.pkg-buy-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important;
}

/* Spread slot labels universal fix */
.spread-slots-mat .spread-slot-item .slot-meta .slot-pos-badge,
.spread-slots-container .spread-slot-item .slot-pos-badge,
.flipbook-page .spread-slot-item .slot-pos-badge,
.slot-pos-badge {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.spread-slots-mat .spread-slot-item .slot-meta .slot-card-name,
.spread-slots-container .spread-slot-item .slot-card-name,
.flipbook-page .spread-slot-item .slot-card-name,
.slot-card-name {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.exec-question-recap,
.exec-recap-label {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.exec-recap-val,
.c-question-text {
  color: #fbbf24 !important;
  font-weight: 700 !important;
}

.exec-category-tag,
.category-badge {
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
  font-weight: 600 !important;
}

/* Daily Guidance Contrast Fix */
.daily-free-draw-card,
.hero-daily-tarot,
.daily-free-content {
  color: #ffffff !important;
}

.daily-free-headline {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.daily-free-desc,
.hero-daily-tarot .daily-free-desc,
.streak-daily-preview-card .card-subhead {
  color: #d1d5db !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

.card-eyebrow .eyebrow-hint,
.eyebrow-hint {
  color: #9ca3af !important;
}

/* Email OTP input box styling */
#authOtpInput {
  background: rgba(10, 6, 22, 0.9) !important;
  border: 2px solid #fbbf24 !important;
  color: #fbbf24 !important;
  font-weight: 800 !important;
  letter-spacing: 8px !important;
  text-align: center !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.25) !important;
}

#authOtpInput:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.45) !important;
}

/* ========================================================
   LEGAL, DISCLAIMER & PRIVACY POLICY STYLES
   ======================================================== */
.cal-footer-disclaimer-card {
  margin-top: 2rem;
  margin-bottom: 2rem;
  background: rgba(18, 14, 38, 0.75);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.disclaimer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.6rem;
}

.disclaimer-icon {
  font-size: 1.25rem;
}

.disclaimer-title {
  color: #fbbf24;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

.disclaimer-text {
  color: #d1d5db;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.disclaimer-text strong {
  color: #ffffff;
}

.disclaimer-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 0.85rem;
}

.legal-link-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legal-link-btn:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: #fbbf24;
  color: #fbbf24;
  transform: translateY(-1px);
}

/* Legal Documents Content inside Modal */
.legal-doc-card {
  padding: 0.5rem 0.25rem;
  color: #e5e7eb;
}

.legal-doc-card h4 {
  color: #fbbf24;
  font-size: 0.98rem;
  font-weight: 700;
  margin-top: 1.2rem;
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.legal-doc-card h4:first-child {
  margin-top: 0.2rem;
}

.legal-doc-card p {
  color: #d1d5db;
  font-size: 13.5px;
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

.legal-doc-card ul {
  padding-left: 1.35rem;
  margin-bottom: 1rem;
}

.legal-doc-card li {
  color: #d1d5db;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 0.4rem;
}

.legal-doc-card strong {
  color: #ffffff;
}

#legalPolicyModal .modal-headline {
  color: #ffffff !important;
}

#legalPolicyModal .modal-sub {
  color: #9ca3af !important;
}

/* ========================================================
   SEO FAQ ACCORDION SECTION (Cal.com Dark Cosmic Luxury)
   ======================================================== */
.seo-faq-container {
  background: rgba(18, 13, 34, 0.75) !important;
  border: 1px solid rgba(251, 191, 36, 0.22) !important;
  border-radius: 18px !important;
  padding: 2.25rem 2rem !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
}

.faq-header-block {
  text-align: center;
  margin-bottom: 2rem;
}

.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

.faq-main-title {
  color: #ffffff !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.35 !important;
}

.faq-subtitle {
  color: #9ca3af !important;
  font-size: 0.92rem !important;
  max-width: 620px;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}

.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.faq-item {
  background: rgba(26, 19, 48, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  transition: all 0.25s ease !important;
  overflow: hidden !important;
}

.faq-item:hover {
  border-color: rgba(251, 191, 36, 0.3) !important;
  background: rgba(30, 22, 56, 0.8) !important;
}

.faq-item[open] {
  border-color: rgba(251, 191, 36, 0.45) !important;
  background: rgba(26, 19, 48, 0.95) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.faq-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 1.15rem 1.35rem !important;
  cursor: pointer !important;
  user-select: none !important;
  list-style: none !important;
}

.faq-summary::-webkit-details-marker {
  display: none !important;
}

.faq-q-text {
  color: #f3f4f6 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.faq-item[open] .faq-q-text {
  color: #fbbf24 !important;
}

.faq-chevron {
  color: #9ca3af;
  font-size: 1.25rem;
  font-weight: bold;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: #fbbf24;
}

.faq-answer-content {
  padding: 0 1.35rem 1.25rem 1.35rem !important;
  color: #d1d5db !important;
  font-size: 0.92rem !important;
  line-height: 1.75 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  margin-top: 0.25rem !important;
  padding-top: 1rem !important;
}

.faq-answer-content p {
  margin: 0 0 0.5rem 0 !important;
  color: #e5e7eb !important;
}

.faq-answer-content p:last-child {
  margin-bottom: 0 !important;
}

.faq-answer-content strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.faq-list {
  padding-left: 1.25rem !important;
  margin: 0.5rem 0 !important;
}

.faq-list li {
  margin-bottom: 0.45rem !important;
  color: #d1d5db !important;
}

.faq-list li:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 640px) {
  .seo-faq-container {
    padding: 1.5rem 1.15rem !important;
    border-radius: 14px !important;
  }
  .faq-main-title {
    font-size: 1.25rem !important;
  }
  .faq-summary {
    padding: 1rem 1.1rem !important;
  }
  .faq-q-text {
    font-size: 0.92rem !important;
  }
  .faq-answer-content {
    font-size: 0.86rem !important;
    padding: 0.85rem 1.1rem 1rem 1.1rem !important;
  }
}