:root {
  --bg:          #04010f;
  --bg-card:     #0d0422;
  --bg-card-2:   #07021a;
  --bg-elevated: #120630;
  --border:      #1a0d3a;
  --border-mid:  #2a1550;
  --border-glow: rgba(139,92,246,0.25);

  --purple:      #8b5cf6;
  --purple-dark: #6d28d9;
  --purple-light:#a78bfa;
  --purple-dim:  #9d6ff0;
  --gold:        #f0d060;
  --gold-dark:   #c9a830;
  --gold-glow:   rgba(240,208,96,0.35);

  --text-1: #f0e8ff;
  --text-2: #c0a8e0;
  --text-3: #9878c0;
  --text-4: #7058a0;
  --text-5: #4a3070;

  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px;
  --r-lg: 20px; --r-xl: 24px; --r-2xl: 28px;

  --shadow-card:   0 8px 32px rgba(0,0,0,0.45);
  --shadow-purple: 0 4px 24px rgba(109,40,217,0.40);
  --shadow-gold:   0 4px 20px rgba(240,208,96,0.30);
  --shadow-glow:   0 0 40px rgba(139,92,246,0.18);

  --glass-bg:     rgba(13,4,34,0.88);
  --glass-border: rgba(139,92,246,0.18);

  /* ── GLOBAL SAFE-AREA SYSTEM ── single source of truth
     Debug: safeTop=env(safe-area-inset-top)  headerHeight=50+safeTop
            sectionHeaderH=96px  sectionScreenTopGap=safeTop+96+16
            bareScreenTopGap=safeTop+42  bottomNavH=112px
  */
  --safe-top:                env(safe-area-inset-top, 0px);
  --safe-bottom:             env(safe-area-inset-bottom, 0px);
  --app-bg:                  #04010f;
  --navbar-base-h:           62px;
  --header-height:           calc(var(--navbar-base-h) + var(--safe-top));
  --section-header-h:        96px;    /* section pages: global navbar visual+breathing */
  --bare-screen-top-gap:     calc(var(--safe-top) + 42px);  /* tarot/dream/coffee/hand/profile */
  --bottom-nav-h:            112px;   /* real height consumed by floating bottom nav */
  --bottom-nav-offset:       max(16px, var(--safe-bottom));
  --screen-top-gap:          calc(var(--header-height) + 12px);          /* home */
  --section-screen-top-gap:  calc(var(--header-height) + 8px); /* explore/section pages: navbar-bottom + 8px breathing */
  --screen-bottom-gap:       calc(var(--bottom-nav-h) + var(--bottom-nav-offset) + 18px);
}

/* Typography */
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
h1,h2,h3 { letter-spacing: -0.3px; }

/* Gradient text utility */
.grad-gold {
  background: linear-gradient(135deg, #f0d060, #fff5cc, #d4a830);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-purple {
  background: linear-gradient(135deg, #c084fc, #8b5cf6, #6d28d9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glassmorphism card ── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── CONSTELLATION BACKGROUND ── */
.starfield {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  overflow: hidden;
  will-change: opacity;
}
.starfield::before, .starfield::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 8%, rgba(240,208,96,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 82% 45%, rgba(139,92,246,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 85%, rgba(240,208,96,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 55%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 72%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 48% 33%, rgba(167,139,250,0.5) 0%, transparent 100%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
.starfield::after {
  background-image:
    radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 88%, rgba(240,208,96,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 20%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 85% 80%, rgba(139,92,246,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 35%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 12%, rgba(240,208,96,0.6) 0%, transparent 100%);
  animation-delay: 3s; animation-duration: 8s;
}
@keyframes twinkle {
  0%   { opacity: 0.5; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.02); }
  100% { opacity: 0.6; transform: scale(0.99); }
}

/* starfield sits behind everything via z-index:0 + pointer-events:none */

/* ── ONBOARDING SCREEN UPGRADES ── */
.onboard-header {
  padding: 52px 24px 12px;
  background: linear-gradient(180deg, rgba(20,6,60,0.9) 0%, transparent 100%);
}
.step-label {
  font-size: 10px; font-weight: 700;
  color: var(--purple); letter-spacing: 3px;
  text-transform: uppercase;
}
.onboard-title { font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--text-1); }
.onboard-sub   { font-size: 14px; color: var(--text-3); line-height: 1.6; margin-top: 4px; }
.progress-fill { background: linear-gradient(90deg, var(--purple), var(--gold)); }

/* ── READING CARD REDESIGN ── */
.reading-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  margin: 0 20px 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.reading-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.reading-card.rc-work::before   { background: linear-gradient(90deg,#6366f1,#8b5cf6); }
.reading-card.rc-love::before   { background: linear-gradient(90deg,#ec4899,#f43f5e); }
.reading-card.rc-health::before { background: linear-gradient(90deg,#10b981,#34d399); }
.reading-card.rc-money::before  { background: linear-gradient(90deg,#f59e0b,#f0d060); }

/* ── HOME SECTION HEADER ── */
.horoscope-section { padding: 4px 0 0; }
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 14px;
}
.section-title { font-size: 16px; font-weight: 700; color: var(--text-1); }
.section-date  { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ── PROFILE CARD GLASSMORPHISM ── */
.profile-card {
  margin: 0 16px 18px;
  background: linear-gradient(145deg,rgba(20,6,55,0.9),rgba(10,3,30,0.95));
  backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 22px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  position: relative; overflow: hidden;
}
.profile-card::after {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(139,92,246,0.15), transparent 70%);
  pointer-events: none;
}

/* ── NAV BAR ACTIVE INDICATOR ── */
.tnav-item.active::after {
  content: '';
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2px; border-radius: 2px;
  background: var(--gold);
}
.bnav-item.active .bi-icon::after {
  display: none;
}
.bi-icon { position: relative; }

/* ── BOTTOM NAV BLUR UPGRADE ── (overridden by pill nav below) */
#main-topnav {
  background: rgba(5,1,20,0.92) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(139,92,246,0.12) !important;
}

/* ── SCREEN HERO GRADIENTS ── */
#home    { background: radial-gradient(ellipse 120% 40% at 50% 0%, #1a0650 0%, #04010f 55%); }
#compat  { background: radial-gradient(ellipse 120% 40% at 50% 0%, #2d0a4e 0%, #04010f 55%); }
#chat    { background: radial-gradient(ellipse 120% 40% at 50% 0%, #0a1a4e 0%, #04010f 55%); }
#tarot   { background: #04010f; }
#crystal { background: radial-gradient(ellipse 120% 40% at 50% 0%, #0e1060 0%, #04010f 70%); }
#moon    { background: radial-gradient(ellipse 120% 40% at 50% 0%, #0a2040 0%, #04010f 60%); }
#coffee  { background: #04010f; }
#astrologers { background: radial-gradient(ellipse 120% 40% at 50% 0%, #1a0a35 0%, #04010f 55%); }
#numerology  { background: radial-gradient(ellipse 120% 40% at 50% 0%, #180a50 0%, #04010f 55%); }
#birth-chart { background: radial-gradient(ellipse 120% 40% at 50% 0%, #051a20 0%, #04010f 55%); }
#celebrity   { background: radial-gradient(ellipse 120% 40% at 50% 0%, #241050 0%, #04010f 55%); }
#features    { background: radial-gradient(ellipse 120% 40% at 50% 0%, #120530 0%, #04010f 55%); }
#dream       { background: #04010f; }
#hand        { background: radial-gradient(ellipse 120% 40% at 50% 0%, #1a0650 0%, #04010f 58%); }
#profile     { background: radial-gradient(ellipse 120% 40% at 50% 0%, #140530 0%, #04010f 55%); }

/* ── PREMIUM BANNER UPGRADE ── */
.premium-banner {
  margin: 12px 16px 0;
  background: linear-gradient(135deg,#1e0845,#350f70,#1e0845);
  background-size: 200% 100%;
  animation: banner-shimmer 4s ease infinite;
  border-radius: var(--r-lg);
  border: 1px solid rgba(139,92,246,0.35);
  box-shadow: 0 4px 24px rgba(109,40,217,0.25);
}
@keyframes banner-shimmer {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── DAY TOGGLE UPGRADE ── */
.day-toggle {
  margin: 14px 16px 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 50px; padding: 3px;
}
.day-toggle button.active {
  background: linear-gradient(135deg,var(--purple),var(--purple-dark));
  box-shadow: var(--shadow-purple);
}

/* ── FEATURE CARD UPGRADE ── */
.feature-card {
  background: linear-gradient(145deg,#0d0422,#07021a);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.feature-card:hover {
  border-color: rgba(139,92,246,0.4);
  box-shadow: 0 8px 28px rgba(109,40,217,0.2);
  transform: translateY(-2px);
}
.feature-icon { filter: drop-shadow(0 0 8px rgba(139,92,246,0.3)); }
.feature-name { font-size: 13px; font-weight: 600; color: var(--text-1); }

/* ── INPUT FIELD UPGRADE ── */
.input-field {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-family: inherit;
  transition: all 0.2s;
}
.input-field:focus {
  border-color: var(--purple);
  background: rgba(139,92,246,0.06);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}

/* ── BUTTON UPGRADES ── */
.btn-primary {
  background: linear-gradient(135deg, #9d6ff0, #6d28d9);
  border-radius: var(--r-md);
  font-family: inherit;
  font-weight: 700;
  box-shadow: var(--shadow-purple);
  transition: all 0.2s;
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: btn-shine 3s ease infinite;
}
@keyframes btn-shine { 0%,100% { left: -100%; } 50% { left: 150%; } }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(109,40,217,0.5); }

/* ── TAROT CARD UPGRADE (legacy removed) ── */

/* ── SIGN DETAIL UPGRADE ── */
.sd-card {
  background: linear-gradient(145deg,var(--bg-card),var(--bg-card-2));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.sd-card-title {
  font-size: 10px; font-weight: 800;
  color: var(--purple); letter-spacing: 2.5px;
}

/* ── COMPATIBILITY SCREEN UPGRADE ── */
.compat-header {
  padding: 24px 20px 16px;
}
.compat-title { font-size: 22px; font-weight: 800; color: var(--text-1); }
.compat-sub   { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.compat-percent {
  font-size: 72px; font-weight: 900;
  background: linear-gradient(135deg,var(--gold),#fff5cc,var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── PROFILE SCREEN UPGRADE ── */
.prof-item {
  background: linear-gradient(145deg,#0d0422,#07021a);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all 0.2s;
}
.prof-item:hover {
  border-color: rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.05);
}
.prof-item-label { color: var(--text-1); }
.prof-sub-card {
  background: linear-gradient(145deg,#1f0650,#0a0220);
  border: 1px solid var(--border-mid);
}

/* ── CHAT SCREEN UPGRADE ── */
.chat-message.bot .message-bubble {
  background: linear-gradient(145deg,#0d0422,#07021a);
  border: 1px solid var(--border);
  border-radius: 18px 18px 18px 4px;
}
.chat-message.user .message-bubble {
  background: linear-gradient(135deg,var(--purple),var(--purple-dark));
  border-radius: 18px 18px 4px 18px;
}

/* ── SPLASH SCREEN UPGRADE ── */
.app-logo-name {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 8px;
  text-transform: uppercase;
  background: linear-gradient(160deg, #e8d5a3 0%, #f5e6c0 30%, #c9a84c 55%, #f0d4a0 75%, #d4a830 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logo-shimmer 5s ease infinite;
  filter: drop-shadow(0 0 18px rgba(200,160,60,0.35));
}
@keyframes logo-shimmer {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.splash-orb {
  font-size: 80px;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 28px rgba(139,92,246,0.7)) drop-shadow(0 0 60px rgba(240,208,96,0.2));
}

/* ── MOON SCREEN UPGRADE ── */
.moon-phase-orb {
  box-shadow: 0 0 60px rgba(240,208,96,0.25), 0 0 120px rgba(139,92,246,0.1);
}
.moon-card {
  background: linear-gradient(145deg,#0d0422,#07021a);
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* ── NUMEROLOGY UPGRADE ── */
.num-circle {
  box-shadow: 0 0 60px rgba(139,92,246,0.4), 0 0 100px rgba(109,40,217,0.2);
}
.num-card {
  background: linear-gradient(145deg,#0d0422,#07021a);
  border-color: var(--border);
}

/* ── PAYWALL UPGRADE ── */
#paywall {
  background: radial-gradient(ellipse at 50% 0%, #1a0650 0%, #04010f 60%);
}
.pw-stars { font-size: 20px; letter-spacing: 4px; }
.pw-plan {
  background: linear-gradient(145deg,#0d0422,#07021a);
  border-color: var(--border);
}
.pw-plan.selected {
  background: linear-gradient(145deg,rgba(139,92,246,0.12),rgba(109,40,217,0.08));
  border-color: var(--purple) !important;
  box-shadow: 0 0 20px rgba(139,92,246,0.2);
}

/* ── SECTION LABEL UTILITY ── */
.screen-section-label {
  font-size: 10px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: var(--purple);
  margin-bottom: 8px;
}

/* ── LANG BUTTON UPGRADE ── */
.lang-btn {
  border-color: var(--border-mid);
  background: rgba(255,255,255,0.02);
  font-family: inherit; font-weight: 500;
  transition: all 0.2s;
}
.lang-btn.selected, .lang-btn:hover {
  background: rgba(139,92,246,0.18);
  border-color: var(--purple);
  box-shadow: 0 0 12px rgba(139,92,246,0.2);
}

/* ── MODAL UPGRADE ── */
.modal-sheet {
  background: linear-gradient(180deg,#0d0422,#07021a);
  border: 1px solid var(--border-mid);
  border-bottom: none;
}
.modal-title { font-weight: 800; color: var(--text-1); }

/* ── TOAST UPGRADE ── */
#toast {
  background: linear-gradient(135deg,#1e0845,#350f70);
  border-color: rgba(139,92,246,0.4);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  font-weight: 600;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 0; height: 0; }


*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--app-bg);color:#fff;display:flex;justify-content:center;overscroll-behavior:none;}
#app{width:100%;max-width:430px;height:100%;background:var(--app-bg);position:relative;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;margin:0 auto;}

/* Fixed safe-area background — guarantees Dynamic Island/status bar area
   always has the app's dark background, regardless of which screen is active. */
.safe-area-top-bg{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--safe-top);
  background:var(--app-bg);
  z-index:9999;
  pointer-events:none;
}
/* Welcome screen: render gradient once on body (fixed = viewport coords),
   make every layer above it transparent so one seamless surface shows through */
body.screen-splash {
  background: radial-gradient(circle at 50% 26%, rgba(72,24,145,0.45) 0%, rgba(28,8,60,0.70) 22%, #130322 52%, #090012 100%) !important;
  background-attachment: fixed !important;
}
body.screen-splash #app,
body.screen-splash #splash,
body.screen-splash .safe-area-top-bg {
  background: transparent !important;
}

/* Onboarding screens: same trick — body holds the solid color,
   safe-area and app layers are transparent so no divider appears */
body.screen-ob {
  background: #04010f !important;
}
body.screen-ob #app,
body.screen-ob .safe-area-top-bg {
  background: transparent !important;
}

/* Tarot screen */
body.screen-tarot {
  background: radial-gradient(circle at 50% 18%, #2a0a52 0%, #160530 30%, #08011a 62%, #04010f 100%) fixed !important;
}
body.screen-tarot #app,
body.screen-tarot #tarot,
body.screen-tarot .safe-area-top-bg {
  background: transparent !important;
}

/* Profile screen */
body.screen-profile {
  background: radial-gradient(ellipse 120% 40% at 50% 0%, #140530 0%, #04010f 55%) fixed !important;
}
body.screen-profile #app,
body.screen-profile #profile,
body.screen-profile .safe-area-top-bg {
  background: transparent !important;
}

/* Dream screen — deep midnight blue */
body.screen-dream {
  background: radial-gradient(circle at 50% 18%, #071a40 0%, #040e28 30%, #020818 62%, #010410 100%) fixed !important;
}
body.screen-dream #app,
body.screen-dream #dream,
body.screen-dream .safe-area-top-bg {
  background: transparent !important;
}

/* Coffee screen — dark espresso brown */
body.screen-coffee {
  background: radial-gradient(circle at 50% 18%, #2a1008 0%, #180a04 30%, #0e0502 62%, #080300 100%) fixed !important;
}
body.screen-coffee #app,
body.screen-coffee #coffee,
body.screen-coffee .safe-area-top-bg {
  background: transparent !important;
}

/* SCREENS */
.screen{width:100%;min-height:100%;display:none;flex-direction:column;position:relative;z-index:1;}
.screen.active{display:flex;}

/* ══ SPLASH / WELCOME ══ */
#splash{
  opacity:1!important;transform:none!important;
  background:radial-gradient(ellipse at 50% 22%,#190640 0%,#08011a 50%,#03000d 100%);
  align-items:center;justify-content:flex-start;text-align:center;
  padding:0 28px 56px;position:relative;overflow:hidden;
}
/* Top ambient halo */
#splash::before{
  content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:340px;height:340px;
  background:radial-gradient(ellipse at 50% 0%,rgba(90,20,190,0.13) 0%,transparent 68%);
  pointer-events:none;
}
/* Bottom depth gradient */
#splash::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:240px;
  background:radial-gradient(ellipse at 50% 100%,rgba(60,10,130,0.18) 0%,transparent 72%);
  pointer-events:none;
}
.splash-stars-canvas{position:absolute;inset:0;pointer-events:none;opacity:0.75;z-index:0;}

/* ── Lang picker ── */
.splash-lang-picker{position:absolute;top:calc(var(--safe-top) + 8px);right:20px;z-index:10;}
.splash-lang-trigger{
  display:flex;align-items:center;gap:4px;
  padding:5px 11px;
  background:rgba(12,3,30,0.55);
  border:1px solid rgba(139,92,246,0.18);
  border-radius:999px;
  color:rgba(195,168,250,0.82);
  font-size:11px;font-weight:500;letter-spacing:0.8px;
  cursor:pointer;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:all 0.22s;
}
.splash-lang-trigger:hover{border-color:rgba(139,92,246,0.42);background:rgba(28,6,70,0.72);}
.splash-lang-caret{color:rgba(155,115,240,0.65);transition:transform 0.22s;flex-shrink:0;}
.splash-lang-picker.open .splash-lang-caret{transform:rotate(180deg);}
.splash-lang-dropdown{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  background:rgba(8,2,22,0.96);
  border:1px solid rgba(139,92,246,0.22);
  border-radius:13px;padding:5px;min-width:158px;
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  box-shadow:0 20px 52px rgba(0,0,0,0.75),0 0 0 1px rgba(80,30,160,0.08);
  animation:dropdown-in 0.18s cubic-bezier(.22,1,.36,1) both;
}
@keyframes dropdown-in{from{opacity:0;transform:translateY(-5px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.splash-lang-picker.open .splash-lang-dropdown{display:block;}
.splash-lang-opt{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:8px 11px;
  border:none;border-radius:8px;
  background:transparent;color:rgba(188,160,235,0.75);
  font-size:12.5px;cursor:pointer;transition:all 0.14s;text-align:left;
}
.splash-lang-opt:hover{background:rgba(139,92,246,0.16);color:#fff;}
.splash-lang-opt.selected{background:rgba(139,92,246,0.18);color:rgba(230,215,255,0.95);}

/* ── Hero ── */
.splash-hero{
  display:flex;flex-direction:column;align-items:center;gap:26px;
  margin-top:clamp(76px,15vh,112px);
  position:relative;z-index:1;
}
.splash-orb{position:relative;width:168px;height:168px;display:flex;align-items:center;justify-content:center;}
.splash-orb-glow{
  position:absolute;inset:-32px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(212,175,55,0.13) 0%,rgba(90,20,180,0.08) 52%,transparent 72%);
  filter:blur(20px);
  animation:orb-breathe 5s ease-in-out infinite alternate;
}
@keyframes orb-breathe{from{opacity:0.45;transform:scale(0.97);}to{opacity:0.95;transform:scale(1.1);}}
.splash-orb-img{
  width:100%;height:100%;object-fit:contain;border-radius:50%;
  position:relative;z-index:1;
  animation:logo-float 6s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(212,175,55,0.24)) drop-shadow(0 0 28px rgba(120,50,210,0.15));
}
@keyframes logo-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.splash-brand{display:flex;flex-direction:column;align-items:center;gap:11px;position:relative;z-index:1;}
.splash-divider{width:52px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,0.38),transparent);}
.app-logo-tag{font-family:'Cinzel',serif;font-size:9.5px;font-weight:400;color:rgba(172,140,212,0.44);letter-spacing:6px;text-transform:uppercase;}

/* ── Sub text ── */
.splash-sub{
  font-family:'Cormorant Garamond','Georgia',serif;
  font-size:15px;font-weight:300;font-style:italic;
  color:rgba(175,148,218,0.58);
  line-height:1.88;max-width:220px;letter-spacing:0.25px;
  margin-top:auto;padding-top:24px;
  position:relative;z-index:1;
}

/* ── CTA ── */
.splash-cta{width:100%;display:flex;flex-direction:column;gap:11px;margin-top:28px;position:relative;z-index:1;}
.splash-btn-primary{
  background:linear-gradient(135deg,#7a52dd 0%,#5418b4 100%)!important;
  box-shadow:0 6px 22px rgba(72,22,160,0.30)!important;
  font-size:16px!important;font-weight:600!important;
  letter-spacing:0.2px;
}
.splash-btn-secondary{
  background:transparent!important;
  border:1px solid rgba(139,92,246,0.22)!important;
  color:rgba(165,135,210,0.68)!important;
  font-size:13.5px!important;
  box-shadow:none!important;
}
.splash-btn-secondary:hover{background:rgba(139,92,246,0.08)!important;border-color:rgba(139,92,246,0.38)!important;color:rgba(200,175,240,0.85)!important;}

/* Hidden compat buttons */
.lang-btn{display:none;}
.lang-btn.selected,.lang-btn:hover{}
/* ══ TERMS SCREEN ══ */
.terms-wrap{padding:calc(var(--safe-top) + 20px) 20px 32px;gap:14px;}
.terms-title{font-size:24px;font-weight:900;text-align:center;color:#ede9fe;letter-spacing:-.3px;}
.terms-hint{font-size:13px;color:#a78bfa;text-align:center;line-height:1.5;transition:opacity .3s ease;}
.terms-hint.terms-hint-done{opacity:0;pointer-events:none;}

/* Scroll progress */
.terms-scroll-track{width:100%;height:3px;background:rgba(139,92,246,.15);border-radius:999px;overflow:hidden;}
.terms-scroll-fill{height:100%;width:0%;background:linear-gradient(90deg,#7c3aed,#a855f7,#d4af37);border-radius:999px;transition:width .12s linear;}

/* Box */
.terms-box-wrap{position:relative;width:100%;}
.terms-box-wrap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:48px;border-radius:0 0 18px 18px;background:linear-gradient(to bottom,transparent,#07021a);pointer-events:none;transition:opacity .3s ease;}
.terms-box-wrap.terms-read::after{opacity:0;}
.terms-box{height:46vh;overflow-y:auto;border-radius:18px;padding:14px 12px;display:flex;flex-direction:column;gap:10px;}
.terms-box::-webkit-scrollbar{width:3px;}
.terms-box::-webkit-scrollbar-thumb{background:rgba(139,92,246,.35);border-radius:99px;}

/* Cards */
.terms-card{display:flex;align-items:flex-start;gap:12px;background:rgba(139,92,246,.07);border:1px solid rgba(139,92,246,.18);border-radius:14px;padding:14px 12px;}
.terms-card-icon{font-size:22px;flex-shrink:0;line-height:1;margin-top:1px;}
.terms-card-body{display:flex;flex-direction:column;gap:4px;}
.terms-card-title{font-size:13px;font-weight:800;color:#ede9fe;letter-spacing:.1px;}
.terms-card-text{font-size:12px;color:#b898e0;line-height:1.6;}
.terms-card-text strong{color:#ddd6fe;font-weight:700;}

/* Custom checkbox */
.terms-accept{display:flex;gap:12px;align-items:center;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);border-radius:14px;padding:14px;cursor:pointer;}
.terms-accept input[type=checkbox]{display:none;}
.terms-check-box{width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(139,92,246,.45);background:rgba(139,92,246,.1);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s ease;}
.terms-check-box::after{content:'';width:6px;height:11px;border:2px solid transparent;border-top:none;border-left:none;transform:rotate(45deg) translateY(-1px);transition:border-color .2s;}
#terms-check:checked ~ .terms-check-box{background:linear-gradient(135deg,#7c3aed,#a855f7);border-color:#a855f7;box-shadow:0 0 10px rgba(168,85,247,.5);}
#terms-check:checked ~ .terms-check-box::after{border-color:#fff;}
#terms-check:disabled ~ .terms-check-box{opacity:.4;cursor:not-allowed;}
.terms-accept-text{font-size:13px;color:#c4b5fd;line-height:1.45;font-weight:500;}

/* Continue button */
.terms-continue-btn{transition:opacity .3s ease, box-shadow .3s ease, background .3s ease;}
#terms-continue:disabled{opacity:.5;background:linear-gradient(135deg,#2d1b5e,#3b2070);color:#8b6fc0;box-shadow:none;cursor:not-allowed;}
#terms-continue:not(:disabled){box-shadow:0 0 20px rgba(139,92,246,.5),0 0 40px rgba(139,92,246,.2);}

/* BUTTONS */
.btn-primary{width:100%;padding:17px;border-radius:16px;border:none;background:linear-gradient(135deg,#9d6ff0,#6d28d9);color:#fff;font-size:17px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 20px rgba(109,40,217,0.3);touch-action:manipulation;pointer-events:auto;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(109,40,217,0.45);}
.btn-primary:active{transform:translateY(0);}
.btn-secondary{width:100%;padding:15px;border-radius:16px;border:1.5px solid #3a2060;background:transparent;color:#b898e0;font-size:15px;cursor:pointer;transition:all 0.2s;}
.btn-secondary:hover{background:rgba(90,61,138,0.2);border-color:#6d28d9;}

/* ONBOARDING */
.onboard-header{padding:calc(var(--safe-top) + 18px) 24px 18px;display:flex;flex-direction:column;gap:8px;}
.progress-bar{width:100%;height:3px;background:rgba(255,255,255,0.07);border-radius:2px;overflow:hidden;margin-bottom:6px;}
.progress-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,#f0d060);border-radius:2px;transition:width 0.4s ease;}
.step-label{font-size:11px;color:#6b4fa0;letter-spacing:2px;text-transform:uppercase;}
.onboard-title{font-size:27px;font-weight:800;line-height:1.2;}
.onboard-sub{font-size:14px;color:#9878c0;margin-top:4px;line-height:1.5;}
.onboard-body{padding:8px 24px;flex:1;display:flex;flex-direction:column;gap:14px;}
.onboard-footer{padding:20px 24px 40px;display:flex;flex-direction:column;gap:10px;}

/* INPUTS */
.input-field{width:100%;padding:16px 18px;border-radius:14px;border:1.5px solid #2a1550;background:rgba(255,255,255,0.03);color:#fff;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;caret-color:#a855f7;}
.input-field:focus{border-color:#8b5cf6;background:rgba(139,92,246,0.08);box-shadow:0 0 0 3px rgba(139,92,246,.18),0 0 20px rgba(139,92,246,.12);}
.input-field::placeholder{color:#4a3068;}
.input-label{font-size:13px;color:#9878c0;margin-bottom:5px;}
.input-group{display:flex;flex-direction:column;gap:4px;}
.privacy-note{background:rgba(139,92,246,0.07);border-radius:12px;padding:14px;border:1px solid #2a1550;font-size:13px;color:#8868a0;line-height:1.6;}

/* ══ OB STEP 1 — NAME SCREEN ══ */
.ob-name-screen{position:relative;overflow:hidden;}
.ob-name-stars{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:
  radial-gradient(1px 1px at 15% 20%, rgba(167,139,250,.5) 0%, transparent 100%),
  radial-gradient(1px 1px at 72% 14%, rgba(167,139,250,.4) 0%, transparent 100%),
  radial-gradient(1.5px 1.5px at 40% 60%, rgba(212,175,55,.35) 0%, transparent 100%),
  radial-gradient(1px 1px at 85% 42%, rgba(167,139,250,.3) 0%, transparent 100%),
  radial-gradient(1px 1px at 25% 78%, rgba(167,139,250,.4) 0%, transparent 100%),
  radial-gradient(1px 1px at 60% 88%, rgba(212,175,55,.25) 0%, transparent 100%),
  radial-gradient(1.5px 1.5px at 90% 72%, rgba(167,139,250,.35) 0%, transparent 100%),
  radial-gradient(1px 1px at 10% 50%, rgba(212,175,55,.3) 0%, transparent 100%);
  animation:obStarsShimmer 4s ease-in-out infinite alternate;}
@keyframes obStarsShimmer{
  0%  { opacity:.6; }
  100%{ opacity:1;  }
}
.ob-name-screen .onboard-header,
.ob-name-screen .onboard-body,
.ob-name-screen .onboard-footer{ position:relative;z-index:1; }
.ob-name-body{ gap:10px; }
.ob-privacy-note{ font-size:12px;padding:10px 12px; }
.ob-gender-group{ margin-top:2px; }
.ob-gender-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.ob-gender-chip{
  border:1.5px solid #2a1550;
  background:rgba(255,255,255,0.02);
  color:#cbb5f2;
  border-radius:14px;
  padding:13px 12px;
  font-size:13px;
  font-weight:600;
  line-height:1.25;
  text-align:center;
  cursor:pointer;
  transition:all .2s;
}
.ob-gender-chip:hover{ border-color:#8b5cf6;background:rgba(139,92,246,.1); }
.ob-gender-chip.selected{
  border-color:#a855f7;
  background:linear-gradient(135deg,rgba(168,85,247,.3),rgba(109,40,217,.24));
  color:#fff;
  box-shadow:0 0 0 1px rgba(168,85,247,.35),0 0 16px rgba(168,85,247,.18);
}

/* Name continue button states */
.ob-name-btn:disabled{
  opacity:1;
  background:linear-gradient(135deg,#1e1040,#2d1b5e);
  color:#6b4fa0;
  box-shadow:none;
  cursor:not-allowed;
  border:1px solid rgba(139,92,246,.15);
}
.ob-name-btn:not(:disabled){
  box-shadow:0 0 22px rgba(139,92,246,.5),0 0 44px rgba(139,92,246,.2);
  animation:obBtnGlow 2.5s ease-in-out infinite alternate;
}
@keyframes obBtnGlow{
  0%  { box-shadow:0 0 16px rgba(139,92,246,.4),0 0 32px rgba(139,92,246,.15); }
  100%{ box-shadow:0 0 28px rgba(139,92,246,.65),0 0 50px rgba(139,92,246,.25); }
}

/* SCROLL WHEEL PICKER */
.wheel-picker-wrap{background:linear-gradient(160deg,#0f0528,#07021a);border-radius:18px;border:1px solid #2a1550;padding:0 12px;overflow:hidden;position:relative;}
.wheel-picker-wrap::before,.wheel-picker-wrap::after{content:'';position:absolute;left:0;right:0;height:88px;z-index:2;pointer-events:none;}
.wheel-picker-wrap::before{top:0;background:linear-gradient(180deg,#0f0528 0%,rgba(15,5,40,0) 100%);}
.wheel-picker-wrap::after{bottom:0;background:linear-gradient(0deg,#0f0528 0%,rgba(15,5,40,0) 100%);}
.wheel-selected-line{position:absolute;top:50%;left:12px;right:12px;height:44px;transform:translateY(-50%);border-top:1px solid rgba(157,111,240,0.35);border-bottom:1px solid rgba(157,111,240,0.35);background:rgba(139,92,246,0.07);border-radius:10px;z-index:1;pointer-events:none;}
.wheel-cols{display:flex;gap:0;}
.wheel-col{flex:1;height:220px;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:88px 0;position:relative;}
.wheel-col::-webkit-scrollbar{display:none;}
.wheel-item{height:44px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-size:16px;color:#7858a0;transition:color 0.15s,font-size 0.15s,font-weight 0.15s;user-select:none;cursor:pointer;}
.wheel-item.selected{color:#fff;font-size:18px;font-weight:700;}
.wheel-col-label{text-align:center;font-size:10px;color:#5a3d80;letter-spacing:2px;text-transform:uppercase;padding:10px 0 6px;}
.wheel-label-row{display:flex;}
.wheel-label-row>div{flex:1;}
.input-field.input-error{border-color:#f87171!important;box-shadow:0 0 0 3px rgba(248,113,113,.14);}
.wheel-picker-wrap.input-error{border-color:#f87171!important;box-shadow:0 0 0 3px rgba(248,113,113,.14);}
.onboard-error{display:none;color:#fca5a5;font-size:12px;line-height:1.45;margin-top:8px;}
.onboard-error.show{display:block;}
/* TIME OPTIONAL */
.time-optional{background:rgba(139,92,246,0.05);border:1px dashed #3a2060;border-radius:14px;padding:16px;text-align:center;cursor:pointer;transition:all 0.2s;}
.time-optional:hover{background:rgba(139,92,246,0.1);border-color:#8b5cf6;}
.to-label{font-size:12px;color:#9878c0;margin-bottom:3px;}
.to-val{font-size:15px;color:#f0d060;font-weight:600;}
.time-row{display:flex;gap:10px;}
.time-row select{flex:1;padding:16px 8px;border-radius:14px;border:1.5px solid #2a1550;background:#0a0520;color:#fff;font-size:15px;outline:none;cursor:pointer;appearance:none;text-align:center;}
.time-row select option{background:#0a0520;color:#fff;}

/* ══ OB STEP 3 — LOCATION ══ */
.ob-location-body{ gap:10px; }
.ob-loc-trust{ text-align:center;font-size:11px;color:rgba(139,92,246,.45);letter-spacing:.3px;margin-top:-4px; }

/* Cosmic preview card */
.loc-cosmic-card{
  background:linear-gradient(135deg,rgba(30,10,70,.9),rgba(10,5,40,.95));
  border:1px solid rgba(139,92,246,.25);border-radius:16px;
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;
  animation:locCardIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes locCardIn{
  0%  { opacity:0;transform:translateY(8px) scale(.97); }
  100%{ opacity:1;transform:translateY(0) scale(1); }
}
.loc-cosmic-city{ font-size:13px;font-weight:700;color:#ede9fe;letter-spacing:.2px; }
.loc-cosmic-rows{ display:flex;flex-direction:column;gap:7px; }
.loc-cosmic-row{ display:flex;justify-content:space-between;align-items:center; }
.loc-cosmic-label{ font-size:12px;color:#9878c0; }
.loc-cosmic-val{ font-size:12px;font-weight:700;color:#d4af37; }

/* Birth time card */
.ob-time-card{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(139,92,246,.07);border:1px solid rgba(139,92,246,.2);
  border-radius:14px;padding:14px 16px;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.ob-time-card:hover{ background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.4); }
.ob-time-card-left{ display:flex;flex-direction:column;gap:3px; }
.ob-time-card-title{ font-size:13px;font-weight:700;color:#ddd6fe; }
.ob-time-card-sub{ font-size:12px;color:#7c5cbf; }
.ob-time-card-arrow{ font-size:20px;color:#7c5cbf;transition:transform .25s ease;line-height:1; }
.ob-time-card.open .ob-time-card-arrow{ transform:rotate(90deg); }
.ob-time-picker{ padding:4px 0 2px; }

/* Footer */
.ob-location-footer{ gap:8px;padding-top:12px; }

/* GEO BUTTON */
.geo-btn{width:100%;padding:15px;border-radius:14px;border:1.5px solid #3a2060;background:linear-gradient(135deg,rgba(139,92,246,0.12),rgba(109,40,217,0.08));color:#c8a8f0;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.2s;}
.geo-btn:hover{border-color:#8b5cf6;background:rgba(139,92,246,0.2);}
.geo-btn.loading{opacity:0.7;pointer-events:none;}
.city-dropdown{position:absolute;top:100%;left:0;right:0;z-index:50;background:#0f0528;border:1.5px solid #3a2060;border-radius:14px;margin-top:4px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.5);}
.city-option{padding:14px 16px;font-size:14px;color:#c8a8f0;cursor:pointer;border-bottom:1px solid #1e1040;transition:background 0.15s;}
.city-option:last-child{border-bottom:none;}
.city-option:hover{background:rgba(139,92,246,0.15);color:#fff;}
.city-option strong{color:#fff;}
.bc-location-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}
.bc-location-toggle button{border:1.5px solid #2a1550;background:rgba(255,255,255,.04);color:#b898e0;border-radius:14px;padding:11px 8px;font-size:12px;font-weight:800;cursor:pointer;}
.bc-location-toggle button.active{border-color:#8b5cf6;background:rgba(139,92,246,.16);color:#fff;}
.bc-location-msg{font-size:12px;color:#9878c0;line-height:1.5;margin-top:8px;min-height:18px;}
.bc-location-msg.error{color:#f87171;}
.bc-location-msg.ok{color:#34d399;}
/* ── Birth Chart Redesign ── */
.bc-info-card{background:linear-gradient(160deg,#0f0528,#07021a);border:1px solid #2a1550;border-radius:20px;padding:18px 20px;margin-bottom:16px;}
.bc-info-title{font-size:10px;font-weight:900;color:#8b5cf6;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:14px;}
.bc-info-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;}
.bc-info-label{font-size:13px;color:#7858a0;}
.bc-info-value{font-size:13px;color:#e8d0ff;font-weight:600;text-align:right;max-width:55%;}
.bc-info-divider{height:1px;background:rgba(139,92,246,.12);}
.bc-info-edit-btn{width:100%;margin-top:16px;padding:11px;border-radius:12px;border:1px solid rgba(139,92,246,.3);background:rgba(139,92,246,.08);color:#b898e0;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s;}
.bc-info-edit-btn:active{background:rgba(139,92,246,.18);}
.bc-chart-placeholder{background:linear-gradient(160deg,#0c0428,#060118);border:1px solid #2a1550;border-radius:20px;padding:24px 20px;margin-bottom:16px;text-align:center;overflow:hidden;}
.bc-chart-placeholder-inner{display:flex;flex-direction:column;align-items:center;gap:14px;}
.bc-chart-placeholder .chart-wheel{width:200px;height:200px;margin:0 auto;position:relative;flex-shrink:0;}
.bc-placeholder-label{font-size:12px;color:#5a3d80;font-style:italic;letter-spacing:.3px;}

.bc-state-hidden{display:none!important;}
.bc-setup-note{font-size:13px;color:#c0a8e0;line-height:1.65;margin-bottom:12px;}
.bc-profile-summary{font-size:13px;color:#d8c6f5;line-height:1.7;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.16);border-radius:14px;padding:12px;margin-bottom:12px;}
.bc-missing-list{font-size:12px;color:#f0d060;line-height:1.55;margin:-4px 0 12px;}
.bc-section-label{font-size:12px;color:#9878c0;font-weight:800;margin-top:14px;}
.bc-time-row{display:flex;gap:8px;margin-top:10px;}
.bc-time-row select{flex:1;background:rgba(255,255,255,.04);border:1.5px solid #2a1550;border-radius:12px;color:#fff;padding:12px;font-size:14px;outline:none;}
.bc-time-row select:focus{border-color:#8b5cf6;}
.bc-unknown-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:#b898e0;cursor:pointer;}
.bc-unknown-row input{accent-color:#8b5cf6;}
.bc-generate-btn{width:100%;margin-top:14px;padding:14px;border-radius:14px;border:none;background:linear-gradient(135deg,#9d6ff0,#6d28d9);color:#fff;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 4px 18px rgba(109,40,217,.35);}
/* NOTIF PERMISSION BANNER */
.notif-permission-banner{background:linear-gradient(135deg,#1a0840,#280d60);border-radius:16px;padding:16px;border:1px solid #3a2060;display:flex;align-items:center;gap:12px;}
.npb-icon{font-size:28px;}
.npb-text{flex:1;}
.npb-title{font-size:14px;font-weight:700;}
.npb-sub{font-size:12px;color:#9878c0;margin-top:2px;}
.npb-status{font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;text-align:center;}
.notif-perm-pending{background:rgba(255,255,255,0.06);color:#9878c0;}
.notif-perm-granted{background:rgba(16,185,129,0.15);color:#34d399;}
.notif-perm-denied{background:rgba(239,68,68,0.12);color:#f87171;}
/* ── CHAT SCREEN ── */
#chat{background:#04010f;height:100vh;min-height:100vh;overflow:hidden;padding-bottom:164px;}
.chat-header{background:linear-gradient(180deg,#0f0528,#04010f);padding:52px 20px 16px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #1e1040;flex-shrink:0;}
.chat-avatar{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle,#3d1a6e,#0a0320);border:2px solid #8b5cf6;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 0 16px rgba(139,92,246,0.4);}
.chat-header-info{flex:1;}
.chat-bot-name{font-size:16px;font-weight:800;}
.chat-bot-status{font-size:12px;color:#34d399;display:flex;align-items:center;gap:5px;}
.chat-bot-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#34d399;display:inline-block;}
.chat-premium-badge{font-size:11px;padding:5px 10px;border-radius:20px;background:linear-gradient(135deg,#f0d060,#c9a830);color:#04010f;font-weight:800;cursor:pointer;}
.chat-messages{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 164px;display:flex;flex-direction:column;gap:14px;scrollbar-width:none;}
.chat-messages::-webkit-scrollbar{display:none;}
.chat-msg{display:flex;gap:10px;max-width:88%;animation:fadeIn 0.3s ease;}
.chat-msg.bot{align-self:flex-start;}
.chat-msg.user{align-self:flex-end;flex-direction:row-reverse;}
.msg-avatar{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#3d1a6e,#0a0320);border:1px solid #5a3d8a;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;margin-top:2px;}
.msg-bubble{padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.6;max-width:100%;}
.chat-msg.bot .msg-bubble{background:linear-gradient(160deg,#150830,#0a0220);border:1px solid #2a1550;color:#e0c8ff;border-bottom-left-radius:6px;}
.chat-msg.user .msg-bubble{background:linear-gradient(135deg,#6d28d9,#4c1d95);color:#fff;border-bottom-right-radius:6px;}
.msg-time{font-size:10px;color:#5a3d80;margin-top:4px;text-align:right;}
.chat-msg.bot .msg-time{text-align:left;}
.typing-indicator{display:flex;align-items:center;gap:5px;padding:12px 16px;}
.typing-dot{width:7px;height:7px;border-radius:50%;background:#6d28d9;animation:typingBounce 1.2s ease-in-out infinite;}
.typing-dot:nth-child(2){animation-delay:0.2s;}
.typing-dot:nth-child(3){animation-delay:0.4s;}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-8px);}}
.chat-suggestions{display:flex;gap:8px;padding:0 0 10px;overflow-x:auto;scrollbar-width:none;flex-shrink:0;}
.chat-suggestions::-webkit-scrollbar{display:none;}
.chat-suggestion{padding:8px 14px;border-radius:20px;border:1px solid #3a2060;background:rgba(139,92,246,0.08);color:#b898e0;font-size:13px;white-space:nowrap;cursor:pointer;transition:all 0.2s;flex-shrink:0;}
.chat-suggestion:hover{border-color:#8b5cf6;background:rgba(139,92,246,0.2);color:#fff;}
.chat-input-area{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:rgba(7,2,26,0.97);backdrop-filter:blur(24px);border-top:1px solid #1e1040;padding:10px 16px 12px;z-index:520;display:block;}
.chat-input-area.visible{display:block;}
.chat-input-row{display:flex;gap:10px;align-items:center;}
.chat-input{flex:1;padding:13px 18px;border-radius:50px;border:1.5px solid #2a1550;background:rgba(255,255,255,0.04);color:#fff;font-size:15px;outline:none;transition:border-color 0.2s;}
.chat-input:focus{border-color:#8b5cf6;}
.chat-input::placeholder{color:#5a3d80;}
.chat-send-btn{width:46px;height:46px;border-radius:50%;border:none;background:linear-gradient(135deg,#9d6ff0,#6d28d9);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;}
.chat-send-btn:hover{transform:scale(1.08);box-shadow:0 4px 16px rgba(109,40,217,0.4);}
.chat-send-btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;}
.chat-daily-tip{background:linear-gradient(135deg,#1a0840,#280d60);border-radius:16px;padding:16px;border:1px solid #3a2060;margin:0 16px;}
.cdt-label{font-size:11px;color:#7858a0;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;}
.cdt-text{font-size:14px;color:#d0b8f0;line-height:1.6;}

/* ── PAYWALL SCREEN ── */
#paywall{background:radial-gradient(ellipse at 50% -10%,#2a0870 0%,#04010f 55%);overflow-y:auto;scrollbar-width:none;}
#paywall::-webkit-scrollbar{display:none;}
.pw-close{position:absolute;top:52px;right:20px;font-size:22px;cursor:pointer;color:#7858a0;z-index:10;}
.pw-hero{text-align:center;padding:56px 24px 24px;}
.pw-crown{font-size:64px;filter:drop-shadow(0 0 20px rgba(240,208,96,0.5));}
.pw-title{font-size:28px;font-weight:900;margin-top:12px;line-height:1.2;}
.pw-sub{font-size:15px;color:#a888d4;margin-top:8px;line-height:1.6;}
.pw-features{padding:0 20px 20px;display:flex;flex-direction:column;gap:10px;}
.pw-feature-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,0.03);border-radius:14px;border:1px solid #1e1040;}
.pw-feat-icon{font-size:22px;width:36px;text-align:center;}
.pw-feat-text{flex:1;}
.pw-feat-name{font-size:14px;font-weight:600;}
.pw-feat-desc{font-size:12px;color:#7858a0;margin-top:1px;}
.pw-feat-check{font-size:16px;color:#34d399;}
.pw-plans{padding:0 20px 20px;display:flex;flex-direction:column;gap:12px;}
.pw-plan{border-radius:18px;padding:18px 20px;border:2px solid #2a1550;background:rgba(255,255,255,0.03);cursor:pointer;transition:all 0.2s;position:relative;}
.pw-plan.selected{border-color:#8b5cf6;background:linear-gradient(160deg,rgba(139,92,246,0.12),rgba(109,40,217,0.08));}
.pw-plan.popular{border-color:#f0d060;}
.pw-popular-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#f0d060,#c9a830);color:#04010f;font-size:11px;font-weight:800;padding:4px 14px;border-radius:20px;white-space:nowrap;}
.pw-plan-header{display:flex;justify-content:space-between;align-items:flex-start;}
.pw-plan-name{font-size:16px;font-weight:700;}
.pw-plan-price{text-align:right;}
.pw-plan-amount{font-size:22px;font-weight:900;color:#f0d060;}
.pw-plan-period{font-size:12px;color:#7858a0;}
.pw-plan-save{font-size:12px;color:#34d399;font-weight:600;margin-top:2px;}
.pw-plan-desc{font-size:13px;color:#9878c0;margin-top:6px;}
.pw-radio{width:20px;height:20px;border-radius:50%;border:2px solid #3a2060;background:transparent;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px;}
.pw-plan.selected .pw-radio{border-color:#8b5cf6;background:#8b5cf6;}
.pw-plan.selected .pw-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff;}
.pw-cta-area{padding:0 20px 20px;}
.pw-trial-note{text-align:center;font-size:12px;color:#7858a0;margin-bottom:10px;}
.pw-btn{width:100%;padding:17px;border-radius:16px;border:none;background:linear-gradient(135deg,#f0d060,#c9a830);color:#04010f;font-size:17px;font-weight:800;cursor:pointer;transition:all 0.2s;letter-spacing:0.3px;}
.pw-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(240,208,96,0.35);}
.pw-legal{text-align:center;font-size:11px;color:#5a3d80;padding:0 20px 40px;line-height:1.6;}
/* SIGN PREVIEW */
/* ── Sign Preview Card ── */
.sign-preview{
  display:none;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#160935,#0a0320);
  border-radius:18px;padding:18px 16px 16px;
  border:1px solid rgba(139,92,246,.3);
  text-align:center;
  animation:spReveal .4s cubic-bezier(.34,1.56,.64,1);
}
.sign-preview.sp-animate .sp-icon-wrap{animation:spIconPop .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes spReveal{
  0%  { opacity:0; transform:translateY(10px) scale(.97); }
  100%{ opacity:1; transform:translateY(0)   scale(1);    }
}
@keyframes spIconPop{
  0%  { transform:scale(.8);  opacity:0; }
  100%{ transform:scale(1);   opacity:1; }
}

/* Particles */
.sp-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:18px;}
.sp-particle{position:absolute;border-radius:50%;animation:spParticleFloat 3s ease-in-out infinite;}
@keyframes spParticleFloat{
  0%,100%{ transform:translateY(0) scale(1);  opacity:.5; }
  50%     { transform:translateY(-10px) scale(1.2); opacity:.9; }
}

/* Icon wrap + glow */
.sp-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px;}
.sp-emoji{font-size:56px;position:relative;z-index:1;transition:opacity .25s ease;}
.sp-glow{
  position:absolute;inset:-12px;border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,.35) 0%, transparent 70%);
  animation:spGlowPulse 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes spGlowPulse{
  0%,100%{ transform:scale(1);   opacity:.6; }
  50%     { transform:scale(1.15);opacity:1;  }
}

/* Date, name, traits */
.sp-date{font-size:11px;color:rgba(167,139,250,.55);letter-spacing:.5px;margin-bottom:4px;min-height:14px;}
.sp-name{font-size:20px;font-weight:800;color:#ede9fe;margin:0;}
.sp-traits{font-size:12px;color:#9878c0;margin-top:5px;letter-spacing:.2px;min-height:16px;}

/* Birthday footer */
.ob-birthday-footer{ gap:8px; }
.ob-back-btn{
  width:100%;padding:13px;border-radius:14px;border:1px solid rgba(139,92,246,.2);
  background:transparent;color:#7c5cbf;font-size:15px;font-weight:600;cursor:pointer;
  transition:color .2s, border-color .2s;
}
.ob-back-btn:hover{ color:#a78bfa; border-color:rgba(139,92,246,.4); }

/* TIME OPTIONAL */
.time-optional{background:rgba(139,92,246,0.05);border:1px dashed #3a2060;border-radius:14px;padding:16px;text-align:center;cursor:pointer;transition:all 0.2s;}
.time-optional:hover{background:rgba(139,92,246,0.1);border-color:#8b5cf6;}
.to-label{font-size:12px;color:#9878c0;margin-bottom:3px;}
.to-val{font-size:15px;color:#f0d060;font-weight:600;}

/* CHIPS */
.chip-grid{display:flex;flex-wrap:wrap;gap:10px;}
.chip{padding:11px 16px;border-radius:50px;border:1.5px solid #2a1550;background:rgba(255,255,255,0.02);color:#b898e0;font-size:14px;cursor:pointer;transition:all 0.2s;user-select:none;}
.chip:hover{border-color:#8b5cf6;background:rgba(139,92,246,0.1);}
.chip.selected{border-color:#9d6ff0;background:linear-gradient(135deg,rgba(157,111,240,0.25),rgba(109,40,217,0.2));color:#fff;}

/* ══ OB STEP 4 — RELATIONSHIP ══ */
.ob-rel-body{ gap:14px; }
.rel-chip-grid{ display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.rel-chip-grid .chip{
  border-radius:14px;padding:14px 12px;
  text-align:center;font-size:14px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.rel-chip-grid .chip.selected{
  border-color:#a855f7;
  background:linear-gradient(135deg,rgba(168,85,247,.3),rgba(109,40,217,.25));
  color:#fff;font-weight:700;
  box-shadow:0 0 0 1px rgba(168,85,247,.4), 0 0 18px rgba(168,85,247,.25);
  animation:chipPop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes chipPop{
  0%  { transform:scale(.93); }
  100%{ transform:scale(1);   }
}
.rel-message{
  min-height:44px;
  background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);
  border-radius:14px;padding:12px 16px;
  font-size:13px;color:#c4b5fd;line-height:1.5;text-align:center;
  transition:opacity .3s ease, transform .3s ease;
  opacity:0;transform:translateY(6px);
}
.rel-message.visible{ opacity:1;transform:translateY(0); }
.ob-rel-footer{ gap:8px; }

/* ══ OB STEP 5 — GOALS ══ */
.ob-goals-body{ gap:12px; }
.goal-groups{ display:flex;flex-direction:column;gap:12px; }
.goal-group-label{
  font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(167,139,250,.45);margin-bottom:4px;padding-left:2px;
}
.goal-group-chips{ display:flex;flex-wrap:wrap;gap:8px; }
.goal-chip{
  display:flex;align-items:center;gap:7px;
  padding:10px 15px;border-radius:50px;
  border:1.5px solid #2a1550;
  background:rgba(255,255,255,.02);
  color:#b898e0;font-size:14px;cursor:pointer;
  transition:all .2s;user-select:none;position:relative;
}
.goal-chip:hover{ border-color:#8b5cf6;background:rgba(139,92,246,.1); }
.goal-chip.selected{
  border-color:#a855f7;
  background:linear-gradient(135deg,rgba(168,85,247,.28),rgba(109,40,217,.22));
  color:#fff;font-weight:600;
  box-shadow:0 0 0 1px rgba(168,85,247,.35),0 0 14px rgba(168,85,247,.2);
  animation:goalChipPop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes goalChipPop{
  0%  { transform:scale(.91); }
  100%{ transform:scale(1);   }
}
.goal-chip-check{
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid rgba(168,85,247,.4);
  background:transparent;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;font-size:10px;
}
.goal-chip.selected .goal-chip-check{
  background:#a855f7;border-color:#a855f7;
}
.goal-chip.selected .goal-chip-check::after{
  content:'✓';color:#fff;font-size:9px;font-weight:800;
}
.goal-summary{
  min-height:40px;
  background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);
  border-radius:14px;padding:11px 16px;
  font-size:13px;color:#c4b5fd;line-height:1.5;text-align:center;
  transition:opacity .3s ease,transform .3s ease;
  opacity:0;transform:translateY(6px);
}
.goal-summary.visible{ opacity:1;transform:translateY(0); }
.ob-goals-footer{ gap:8px; }

/* ══ OB STEP 6 — WORK ══ */
.ob-work-body{ gap:12px; }
.work-message{
  min-height:40px;
  background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);
  border-radius:14px;padding:11px 16px;
  font-size:13px;color:#c4b5fd;line-height:1.5;text-align:center;
  transition:opacity .3s ease,transform .3s ease;
  opacity:0;transform:translateY(6px);
}
.work-message.visible{ opacity:1;transform:translateY(0); }
.ob-work-footer{ gap:8px; }

/* ══ OB STEP 7 — NOTIFICATIONS ══ */
.ob-notify-body{ gap:12px; }

/* Preview notification card */
.notif-preview-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:12px 14px;
  backdrop-filter:blur(8px);
}
.notif-preview-top{ display:flex;justify-content:space-between;align-items:center;margin-bottom:6px; }
.notif-preview-app{ font-size:12px;font-weight:700;color:#ddd6fe; }
.notif-preview-time{ font-size:11px;color:rgba(255,255,255,.35); }
.notif-preview-text{ font-size:13px;color:#e2d9f3;line-height:1.5; }

/* NOTIF GRID */
.notif-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.notif-card{
  padding:16px 10px;border-radius:14px;
  border:1.5px solid #2a1550;background:rgba(255,255,255,0.02);
  text-align:center;cursor:pointer;transition:all 0.2s;position:relative;
}
.notif-card:hover{border-color:#8b5cf6;}
.notif-card.selected{
  border-color:#a855f7;
  background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(109,40,217,.18));
  box-shadow:0 0 0 1px rgba(168,85,247,.3),0 0 16px rgba(168,85,247,.18);
  animation:notifCardPop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes notifCardPop{
  0%  { transform:scale(.93); }
  100%{ transform:scale(1);   }
}
.notif-card-check{
  position:absolute;top:8px;right:8px;
  width:16px;height:16px;border-radius:50%;
  background:#a855f7;display:none;
  align-items:center;justify-content:center;
  font-size:9px;color:#fff;font-weight:800;
}
.notif-card.selected .notif-card-check{ display:flex; }
.notif-time{font-size:20px;font-weight:800;color:#f0d060;}
.notif-desc{font-size:11px;color:#9878c0;margin-top:3px;}

/* Reward text */
.notif-reward{
  font-size:13px;color:#c4b5fd;text-align:center;line-height:1.5;
  min-height:36px;padding:10px 16px;
  background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);border-radius:14px;
  transition:opacity .3s,transform .3s;
  opacity:0;transform:translateY(6px);
}
.notif-reward.visible{ opacity:1;transform:translateY(0); }
.ob-notify-footer{ gap:8px; }

/* HOME */
#home{background:#04010f;}
.home-topbar{display:none!important;}
.top-nav{display:flex;justify-content:space-around;margin-bottom:12px;}
.top-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;opacity:0.5;transition:opacity 0.2s;position:relative;}
.top-nav-item.active{opacity:1;}
.nav-icon{font-size:22px;}
.nav-label{font-size:11px;color:#c0a0f0;}
.nav-badge{position:absolute;top:-4px;right:-8px;background:#f0d060;color:#04010f;font-size:9px;font-weight:800;padding:2px 5px;border-radius:8px;}

.premium-banner{margin:10px 20px;background:linear-gradient(135deg,#1e0845,#350f70);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;border:1px solid #5a2d9e;}
.banner-icon{font-size:28px;}
.bt-title{font-size:13px;font-weight:600;}
.bt-sub{font-size:12px;color:#b898e0;margin-top:2px;}
.banner-arrow{font-size:20px;color:#f0d060;margin-left:auto;}

.day-toggle{display:flex;margin:14px 20px 0;background:rgba(255,255,255,0.04);border-radius:50px;padding:3px;}
.day-toggle button{flex:1;padding:9px;border-radius:50px;border:none;background:transparent;color:#8868a0;font-size:14px;cursor:pointer;transition:all 0.2s;}
.day-toggle button.active{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font-weight:600;}

/* ── PROFILE SELECTOR ── */
.profile-selector{display:flex;gap:14px;padding:20px 20px 18px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;}
.profile-selector::-webkit-scrollbar{display:none;}
.profile-selector::after{content:'';min-width:20px;flex-shrink:0;}
.profile-avatar{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;min-width:64px;transition:transform 0.2s;}
.profile-avatar:active{transform:scale(0.93);}
.avatar-img{width:58px;height:58px;border-radius:50%;background:rgba(139,92,246,0.15);display:flex;align-items:center;justify-content:center;font-size:30px;border:2px solid rgba(139,92,246,0.4);transition:border-color 0.3s,box-shadow 0.3s;}
.avatar-img img{width:29px;height:29px;object-fit:contain;}
.profile-avatar.active .avatar-img{border-color:#b898e0;box-shadow:0 0 0 3px rgba(157,111,240,0.18),0 0 18px rgba(157,111,240,0.5);animation:avatarActivePulse 2.8s ease-in-out infinite;}
@keyframes avatarActivePulse{0%,100%{box-shadow:0 0 0 3px rgba(157,111,240,0.18),0 0 18px rgba(157,111,240,0.5);}50%{box-shadow:0 0 0 5px rgba(157,111,240,0.1),0 0 28px rgba(157,111,240,0.7);}}
.avatar-name{font-size:11px;color:#b898e0;text-align:center;}
.profile-avatar.active .avatar-name{color:#e0ccff;font-weight:700;}
.avatar-add{width:58px;height:58px;border-radius:50%;border:2px dashed #3a2060;background:transparent;color:#5a3d80;font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.avatar-add:hover{border-color:#8b5cf6;color:#8b5cf6;}

/* ── ZODIAC PORTRAIT — aura + particles ── */
.pc-zodiac-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.pc-aura{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(157,111,240,0.28) 0%,rgba(157,111,240,0) 70%);animation:pcAuraBreath 3.2s ease-in-out infinite;pointer-events:none;}
@keyframes pcAuraBreath{0%,100%{transform:scale(1);opacity:0.6;}50%{transform:scale(1.22);opacity:1;}}
.pc-zodiac-particles{position:absolute;inset:0;pointer-events:none;}
.pc-zodiac-particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:#c8a8f0;opacity:0;animation:pcParticleFloat 3s ease-in-out infinite;}
.pc-zodiac-particles span:nth-child(1){top:8%;left:30%;animation-delay:0s;}
.pc-zodiac-particles span:nth-child(2){top:15%;right:22%;animation-delay:0.5s;}
.pc-zodiac-particles span:nth-child(3){bottom:10%;left:20%;animation-delay:1s;}
.pc-zodiac-particles span:nth-child(4){bottom:18%;right:18%;animation-delay:1.5s;}
.pc-zodiac-particles span:nth-child(5){top:50%;left:4%;animation-delay:2s;}
.pc-zodiac-particles span:nth-child(6){top:50%;right:4%;animation-delay:2.5s;}
@keyframes pcParticleFloat{0%,100%{opacity:0;transform:translateY(0) scale(0.5);}40%{opacity:0.9;transform:translateY(-8px) scale(1);}70%{opacity:0.4;transform:translateY(-14px) scale(0.7);}}

/* PROFILE CARD */
#home .profile-card{margin:0 20px 14px;background:linear-gradient(160deg,#0f0528,#07021a);border-radius:22px;padding:22px;border:1px solid #2a1550;box-shadow:0 8px 30px rgba(0,0,0,0.4);overflow:hidden;}
#home .pc-header{text-align:center;margin-bottom:16px;}
#home .pc-name{font-size:21px;font-weight:800;}
#home .pc-date{font-size:13px;color:#9878c0;margin-top:3px;}
#home .pc-body{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;}
#home .pc-stats-left,#home .pc-stats-right{display:flex;flex-direction:column;gap:14px;}
#home .pc-stats-right{align-items:flex-end;text-align:right;}
#home .stat-label{font-size:10px;color:#5a3d80;letter-spacing:1.5px;text-transform:uppercase;}
#home .stat-value{font-size:14px;font-weight:700;color:#e8d0ff;margin-top:2px;overflow-wrap:anywhere;}
#home .stat-sub{font-size:12px;color:#7858a0;overflow-wrap:anywhere;}
#home .find-out-btn{font-size:11px;padding:5px 10px;border-radius:8px;border:1px solid #8b5cf6;background:transparent;color:#b898e0;cursor:pointer;margin-top:4px;transition:all 0.2s;}
#home .find-out-btn:hover{background:rgba(139,92,246,0.15);}
#home .zodiac-circle{width:100px;height:100px;border-radius:50%;background:none;border:none;display:flex;align-items:center;justify-content:center;font-size:54px;box-shadow:none;}
.pc-center-col{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.pc-mythic-title{
  text-align:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(200,170,255,0.6);
  text-shadow:0 0 10px rgba(180,130,255,0.4);
  margin-top:6px;
  white-space:nowrap;
}
@media (max-width: 640px){
  #home .pc-body{display:grid;grid-template-columns:auto 112px auto;align-items:start;justify-content:center;column-gap:8px;row-gap:0;}
  #home .pc-stats-left,#home .pc-stats-right{
    min-width:100px;
    max-width:140px;
    display:grid;
    grid-template-rows:repeat(3,minmax(58px,auto));
    gap:14px;
    align-content:start;
  }
  #home .pc-stats-right{align-items:flex-end;text-align:right;}
  #home .pc-stats-left > div,#home .pc-stats-right > div{
    min-height:58px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  #home .pc-header{margin-bottom:12px;}
  #home .stat-label{display:block;white-space:nowrap;line-height:1;margin-bottom:6px;}
  #home .stat-value{display:flex;align-items:center;gap:6px;line-height:1.1;white-space:nowrap;overflow:visible;max-width:100%;min-width:0;}
  #home .pc-stats-right .stat-value{justify-content:flex-end;}
  #home .stat-sub{line-height:1.2;max-width:100%;}
  #home .stat-value img,#home .stat-value svg{flex-shrink:0;overflow:visible;}
  #home .pc-center-col{width:112px;max-width:112px;min-width:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;}
  #home .zodiac-circle{width:108px;height:108px;max-width:108px;max-height:108px;flex-shrink:0;}
  #home .zodiac-circle img{width:108px !important;height:108px !important;object-fit:contain;}
  #home .pc-mythic-title{white-space:normal;line-height:1.12;max-width:100%;overflow-wrap:anywhere;}
  #home .find-out-btn,#home .add-birth-time-btn{align-self:flex-start;white-space:nowrap;}
}
.more-details-btn{width:100%;margin-top:18px;padding:13px;border-radius:13px;border:none;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;letter-spacing:0.3px;}
.more-details-btn:hover{opacity:0.9;transform:translateY(-1px);}

/* HOROSCOPE */
.horoscope-section{padding:0 20px 110px;}

/* ── LUCKY BOX ── */
.lucky-box{margin:0 16px 12px;background:linear-gradient(135deg,#0e0630,#12062a,#07021a);border:1px solid rgba(139,92,246,0.3);border-radius:20px;overflow:hidden;}
.lucky-box-header{display:flex;align-items:center;gap:8px;padding:12px 16px 10px;border-bottom:1px solid rgba(139,92,246,0.15);}
.lucky-box-icon{font-size:20px;}
.lucky-box-title{font-size:13px;font-weight:800;color:#ede9fe;flex:1;}
.lucky-box-sign{font-size:11px;color:#9878c0;font-weight:600;}
.lucky-box-cells{display:flex;align-items:stretch;}
.lucky-cell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 8px;gap:5px;text-align:center;}
.lucky-cell-divider{width:1px;background:rgba(139,92,246,0.15);align-self:stretch;margin:10px 0;}
.lucky-cell-label{font-size:9px;font-weight:700;color:#7858a0;letter-spacing:.8px;text-transform:uppercase;}
.lucky-cell-num .lucky-cell-value{font-size:28px;font-weight:900;color:#f0d060;line-height:1;}
.lucky-cell-color .lucky-cell-value{font-size:14px;font-weight:800;color:#ede9fe;display:flex;align-items:center;gap:4px;}
.lucky-cell-day .lucky-cell-value{font-size:14px;font-weight:800;color:#ede9fe;}

/* ── HOME WIDGETS ROW ── */
.home-widgets-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px 12px;}
.home-widgets-row--single{grid-template-columns:1fr;}
.hw-card{background:linear-gradient(160deg,#110930,#07021a);border:1px solid rgba(139,92,246,0.18);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;text-align:center;}
.hw-card--wide{flex-direction:row;justify-content:center;gap:10px;padding:12px 16px;}
.hw-card--wide .hw-label{text-align:left;}
.hw-card--wide .hw-value{font-size:14px;}
.hw-card:active{transform:scale(.97);}
.hw-moon{border-color:rgba(240,208,96,0.25);}
.hw-icon{font-size:24px;line-height:1;}
.hw-label{font-size:10px;color:#9878c0;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.hw-value{font-size:14px;font-weight:800;color:#ede9fe;}

/* ── COSMIC ENERGY CARD ── */
.cosmic-energy-card{margin:0 16px 12px;background:linear-gradient(135deg,#12063a,#1a0a05 60%,#07021a);border:1px solid rgba(139,92,246,0.25);border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:14px;}
.ce-left{flex:1;min-width:0;}
.ce-label{font-size:10px;font-weight:700;color:#9d6ff0;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;}
.ce-title{font-size:16px;font-weight:900;color:#f0d060;margin-bottom:6px;}
.ce-text{font-size:12px;color:#c0a8e0;line-height:1.6;}
.ce-ring{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ce-pct{position:absolute;font-size:12px;font-weight:900;color:#f0d060;}
.section-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;}
.section-title{font-size:18px;font-weight:800;}
.section-date{font-size:12px;color:#7858a0;margin-top:3px;}
.share-btn{font-size:20px;cursor:pointer;color:#7858a0;padding:4px;}

/* ── READING CARDS — horizontal layout ── */
.reading-card{padding:16px 16px 12px;}
.rc-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.rc-left{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;width:54px;}
.rc-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.rc-icon.work{background:linear-gradient(135deg,#1d4ed8,#1e3a8a);}
.rc-icon.love{background:linear-gradient(135deg,#be123c,#9f1239);}
.rc-icon.health{background:linear-gradient(135deg,#047857,#065f46);}
.rc-icon.money{background:linear-gradient(135deg,#b45309,#92400e);}
.rc-title{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#ede9fe;text-align:center;}
.rc-right{display:flex;align-items:center;justify-content:flex-end;}
.rc-pct-badge{font-size:22px;font-weight:900;line-height:1;padding:6px 12px;border-radius:12px;}
.rc-pct-badge--work  {color:#7dd3fc;background:rgba(37,99,235,0.15);}
.rc-pct-badge--love  {color:#fb7185;background:rgba(220,38,38,0.15);}
.rc-pct-badge--health{color:#6ee7b7;background:rgba(5,150,105,0.15);}
.rc-pct-badge--money {color:#fcd34d;background:rgba(217,119,6,0.15);}
.rc-bar{height:3px;background:rgba(255,255,255,0.06);border-radius:2px;margin-bottom:10px;overflow:hidden;}
.rc-bar-fill{height:100%;border-radius:2px;transition:width 0.6s ease;}
.rc-bar-fill.work  {background:linear-gradient(90deg,#2563eb,#7dd3fc);}
.rc-bar-fill.love  {background:linear-gradient(90deg,#dc2626,#fb7185);}
.rc-bar-fill.health{background:linear-gradient(90deg,#059669,#6ee7b7);}
.rc-bar-fill.money {background:linear-gradient(90deg,#d97706,#fcd34d);}
.rc-text{font-size:13px;color:#b898e0;line-height:1.65;margin-bottom:10px;}
.rc-more-btn{display:flex;align-items:center;gap:4px;background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.25);color:#c084fc;font-size:12px;font-weight:700;padding:7px 14px;border-radius:10px;cursor:pointer;transition:background .2s, border-color .2s;letter-spacing:.3px;}
.rc-more-btn:active{background:rgba(139,92,246,0.2);border-color:rgba(139,92,246,0.5);}
.rc-more-arrow{font-size:15px;line-height:1;color:#f0d060;}
.horoscope-flip-hint{padding:0 20px 10px;font-size:12px;color:#9878c0;line-height:1.45;}
.horoscope-flip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 20px 6px;}
.reading-flip-card{height:132px;perspective:1100px;perspective-origin:center;cursor:pointer;}
.reading-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .52s ease-in-out;will-change:transform;}
.reading-flip-card.flipped .reading-flip-inner{transform:rotateY(180deg);}
.reading-flip-face{position:absolute;inset:0;border-radius:18px;border:1px solid rgba(139,92,246,.24);background:linear-gradient(160deg,#10062b,#07021a);box-shadow:0 8px 22px rgba(0,0,0,.24);backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;}
.reading-flip-face::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;}
.reading-flip-card.work .reading-flip-face::before{background:linear-gradient(90deg,#2563eb,#7dd3fc);}
.reading-flip-card.love .reading-flip-face::before{background:linear-gradient(90deg,#dc2626,#fb7185);}
.reading-flip-card.health .reading-flip-face::before{background:linear-gradient(90deg,#059669,#6ee7b7);}
.reading-flip-card.finance .reading-flip-face::before{background:linear-gradient(90deg,#d97706,#fcd34d);}
.reading-flip-back{transform:rotateY(180deg) translateZ(1px);align-items:center;}
.reading-flip-front{transform:translateZ(1px);}
.reading-flip-title{font-size:13px;font-weight:950;letter-spacing:1.2px;text-transform:uppercase;color:#f6edff;margin-bottom:10px;}
.reading-flip-pct{font-size:30px;font-weight:950;line-height:1;}
.reading-flip-card.work .reading-flip-pct{color:#7dd3fc;}
.reading-flip-card.love .reading-flip-pct{color:#fb7185;}
.reading-flip-card.health .reading-flip-pct{color:#6ee7b7;}
.reading-flip-card.finance .reading-flip-pct{color:#fcd34d;}
.reading-flip-summary{font-size:12px;color:#d2bfec;line-height:1.45;font-weight:700;max-width:100%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.reading-flip-card.is-strongest .reading-flip-face{border-color:rgba(240,208,96,.48);box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 18px rgba(240,208,96,.12);}
.home-horoscope-panel{padding:4px 16px 0;overflow:visible;}
.home-horo-switch{margin:2px 0 14px;border:1px solid rgba(139,92,246,.26);background:rgba(9,3,26,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 8px 22px rgba(0,0,0,.2);}
.home-horo-switch button{min-width:0;font-size:13px;font-weight:850;letter-spacing:.2px;color:#9d83c7;transition:background .3s cubic-bezier(.4,0,.2,1),color .24s,box-shadow .3s,transform .16s;}
.home-horo-switch button.active{background:linear-gradient(135deg,#8b5cf6,#5b21b6);color:#fff;box-shadow:0 9px 20px rgba(139,92,246,.3),inset 0 0 0 1px rgba(255,255,255,.14);animation:tabActiveIn 0.28s cubic-bezier(.34,1.56,.64,1);}
@keyframes tabActiveIn{from{transform:scale(0.94);}to{transform:scale(1);}}
.home-horo-switch button:active{transform:scale(.97);}
.home-horo-cats{display:flex;gap:8px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px 14px;padding:6px 16px 8px;scroll-padding:16px;}
.home-horo-cats::-webkit-scrollbar{display:none;}
.home-horo-cats button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;
  border:1px solid rgba(139,92,246,.24);
  border-radius:18px;
  background:#12092a;
  box-shadow:none;
  color:#bfa8de;
  font-family:inherit;
  padding:13px 6px 10px;
  width:68px;
  cursor:pointer;
  flex-shrink:0;
  transition:background .2s,border-color .2s,color .2s;
}
.home-horo-cats button.active{
  border-color:rgba(240,208,96,.44);
  background:#171033;
  box-shadow:none;
}
.home-horo-cats button:active{background:#171033;}
.hhc-icon{display:flex;align-items:center;justify-content:center;line-height:1;}
.hhc-icon svg{stroke:rgba(160,120,255,0.9);filter:none;transition:stroke .2s;}
.hhc-label{font-size:9px;font-weight:500;white-space:normal;text-align:center;line-height:1.2;color:rgba(190,168,222,0.85);transition:color .2s;}
.home-horo-cats button.active .hhc-label{color:#f1dfb3;}
.home-horo-cats button.active .hhc-icon svg{stroke:rgba(232,214,168,1);filter:none;}
.home-horo-cats button.active[data-cat="overview"] .hhc-icon svg{stroke:rgba(232,214,168,1);filter:none;}
.home-horo-box{max-width:100%;overflow:hidden;border:1px solid rgba(139,92,246,.32);border-radius:22px;background:radial-gradient(circle at 100% 0,rgba(139,92,246,.16),transparent 42%),linear-gradient(160deg,#12072f,#07021a);padding:19px 17px;box-shadow:0 14px 32px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.025);transition:opacity .25s ease,transform .25s cubic-bezier(.4,0,.2,1),border-color .25s,box-shadow .25s;}
.home-horo-box.is-changing{opacity:.4;transform:translateY(6px) scale(0.99);border-color:rgba(139,92,246,.18);}
/* Share button */
.horo-share-btn{background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.25);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#9878c0;flex-shrink:0;transition:background 0.2s,color 0.2s,transform 0.15s;}
.horo-share-btn:active{transform:scale(0.88);background:rgba(139,92,246,0.25);color:#e0ccff;}
.horo-share-btn svg{stroke:currentColor;}
.home-horo-box-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:13px;min-width:0;}
.home-horo-box-label{font-size:10px;font-weight:950;color:#9b74df;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;}
.home-horo-box-title{font-size:20px;font-weight:950;color:#fbf7ff;line-height:1.12;overflow-wrap:anywhere;}
.home-horo-box-pct{font-size:26px;font-weight:950;color:#f0d060;line-height:1;white-space:nowrap;text-shadow:0 0 18px rgba(240,208,96,.18);}
.home-horo-meter{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:14px;display:none;}
.home-horo-meter-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#f0d060 0%,#9f6cff 100%);box-shadow:0 0 18px rgba(240,208,96,.22);transition:width .35s ease;}
.home-horo-box-text{font-size:13.5px;color:#d6c4ef;line-height:1.7;overflow-wrap:anywhere;}
.home-horo-box-text.is-compact{line-height:1.58;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.home-horo-default{display:flex;flex-direction:column;gap:13px;}
.home-horo-section{padding-top:12px;border-top:1px solid rgba(139,92,246,.18);}
.home-horo-section:first-child{padding-top:0;border-top:0;}
.home-horo-section-title{font-size:11px;font-weight:950;color:#f0d060;letter-spacing:1.1px;text-transform:uppercase;margin-bottom:5px;}
.home-horo-section-copy{font-size:13.5px;color:#d6c4ef;line-height:1.6;}
.home-match-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.home-match-pill{border:1px solid rgba(240,208,96,.24);border-radius:999px;background:rgba(240,208,96,.08);color:#f7df7a;font-size:12px;font-weight:900;padding:7px 10px;}
.home-match-copy{font-size:13px;color:#cbb7e8;line-height:1.58;}
.home-lucky-grid{display:grid;grid-template-columns:1fr;gap:8px;}
.home-lucky-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(139,92,246,.18);border-radius:14px;background:rgba(139,92,246,.07);padding:10px 12px;}
.home-lucky-label{font-size:11px;font-weight:900;color:#9f7bd8;letter-spacing:.8px;text-transform:uppercase;}
.home-lucky-value{font-size:14px;font-weight:950;color:#f0d060;text-align:right;overflow-wrap:anywhere;}
.home-horo-empty{border:1px dashed rgba(139,92,246,.24);border-radius:16px;background:rgba(139,92,246,.06);padding:14px 13px;color:#c9b7e9;font-size:13px;line-height:1.6;}
@media (max-width:380px){
  #home .profile-card{margin:0 14px 12px;padding:18px 16px;border-radius:20px;}
  #home .pc-header{margin-bottom:12px;}
  #home .pc-body{grid-template-columns:auto 104px auto;justify-content:center;column-gap:6px;row-gap:0;}
  #home .pc-stats-left,#home .pc-stats-right{min-width:90px;max-width:130px;grid-template-rows:repeat(3,minmax(54px,auto));gap:10px;}
  #home .pc-stats-left > div,#home .pc-stats-right > div{min-height:54px;}
  #home .pc-center-col{width:104px;max-width:104px;min-width:104px;}
  #home .stat-label{font-size:9px;letter-spacing:1px;}
  #home .stat-value{font-size:12.5px;}
  #home .stat-sub{font-size:11px;}
  #home .find-out-btn{font-size:10px;padding:4px 8px;}
  #home .zodiac-circle{width:100px;height:100px;font-size:42px;}
  #home .zodiac-circle img{width:100px !important;height:100px !important;}
  .home-horoscope-panel{padding-left:14px;padding-right:14px;}
  .home-horo-switch button{font-size:12px;padding:8px 5px;}
  .home-horo-cats{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;gap:6px;}
  .home-horo-cats button{padding:9px 10px;min-width:52px;}
  .hhc-icon{font-size:16px;}
  .hhc-label{font-size:9.5px;}
  .home-horo-box{padding:16px 14px;border-radius:20px;}
  .home-horo-box-title{font-size:18px;}
  .home-horo-box-pct{font-size:23px;}
  .home-horo-box-text,.home-horo-section-copy,.home-match-copy{font-size:12.8px;}
  .home-lucky-row{padding:9px 10px;}
}

/* FEATURES */
#features{background:#04010f;padding-top:0;}
.features-header{
  min-height:68px;
  padding:10px 22px 14px;
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(180deg,#0f0528 0%,#070118 60%,#04010f 100%);
  border-bottom:1px solid rgba(139,92,246,0.1);
}
.fh-left{display:flex;flex-direction:column;justify-content:center;gap:2px;}
.fh-greeting{
  font-size:14px;
  font-weight:500;
  color:rgba(180,150,230,0.6);
  letter-spacing:0.3px;
}
.fh-title{
  font-size:26px;
  font-weight:900;
  color:#f0eaff;
  letter-spacing:-0.5px;
  line-height:1.15;
}
.fh-sparkle{
  display:inline-block;
  filter:drop-shadow(0 0 6px rgba(240,200,80,0.8)) drop-shadow(0 0 14px rgba(240,200,80,0.4));
  animation:sparkleGlow 2.5s ease-in-out infinite;
}
@keyframes sparkleGlow{
  0%,100%{filter:drop-shadow(0 0 6px rgba(240,200,80,0.8)) drop-shadow(0 0 14px rgba(240,200,80,0.4));}
  50%{filter:drop-shadow(0 0 10px rgba(240,200,80,1)) drop-shadow(0 0 22px rgba(240,200,80,0.6));}
}
.fh-icons{display:flex;gap:16px;font-size:22px;cursor:pointer;}
/* Recommendation strip */
.explore-rec-strip{
  display:flex;align-items:center;gap:6px;
  margin:0 16px 4px;
  padding:10px 14px;
  background:linear-gradient(135deg,rgba(240,200,80,0.07),rgba(139,92,246,0.06));
  border:1px solid rgba(240,200,80,0.2);
  border-radius:14px;
  font-size:12px;color:#c0a060;line-height:1.4;
  animation:recStripFadeIn 0.4s ease-out;
}
@keyframes recStripFadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.explore-rec-strip strong{color:#e8c870;font-weight:700;}
.explore-rec-feat{color:#f0d060;font-weight:800;}
.explore-rec-icon{font-size:13px;flex-shrink:0;animation:sparkleGlow 2.5s ease-in-out infinite;}
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:8px 16px 110px;}
.more-profile-card{grid-column:1/-1;display:flex;align-items:center;gap:14px;background:linear-gradient(160deg,#120634,#08021c);border:1px solid #2a1550;border-radius:22px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.34);cursor:pointer;position:relative;overflow:hidden;}
.more-profile-card::after{content:'';position:absolute;right:-34px;top:-34px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(157,111,240,.22),rgba(157,111,240,0));pointer-events:none;}
.more-profile-avatar{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle,#3d1a6e,#0a0320);border:2px solid rgba(157,111,240,.45);font-size:30px;flex-shrink:0;}
.more-profile-avatar img{width:100%;height:100%;object-fit:cover;}
#fh-profile-btn{overflow:hidden;}
#fh-profile-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.more-profile-info{flex:1;min-width:0;position:relative;z-index:1;}
.more-profile-kicker{font-size:10px;color:#8b5cf6;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:3px;}
.more-profile-name{font-size:18px;font-weight:900;color:#f0e8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.more-profile-sign{font-size:12px;color:#b898e0;margin-top:2px;}
.more-profile-edit{border:1px solid rgba(240,208,96,.35);border-radius:999px;background:rgba(240,208,96,.08);color:#f0d060;font-size:11px;font-weight:900;padding:8px 10px;position:relative;z-index:1;white-space:nowrap;}
/* ── FEATURE CARDS REDESIGN ── */
.feature-card{
  border-radius:22px;padding:16px 14px 14px;
  display:flex;flex-direction:column;align-items:center;
  gap:8px;cursor:pointer;transition:transform 0.18s,box-shadow 0.22s,border-color 0.22s;
  min-height:180px;position:relative;overflow:hidden;
  text-align:center;
}
.feature-card--full{ grid-column:1/-1; flex-direction:row; align-items:center; text-align:left; min-height:100px; padding:16px 20px; }
.feature-card--full .feat-icon-wrap{ flex-shrink:0; }
.feature-card--full .feat-text{ flex:1; }

/* Premium — elevated visual tier */
.feature-card--premium{
  background:linear-gradient(145deg,#1e0c38,#0e0520);
  border:1.5px solid rgba(240,200,80,0.42);
  box-shadow:0 0 24px rgba(240,200,80,0.1), 0 10px 28px rgba(0,0,0,0.45);
  min-height:196px;
}
.feature-card--premium::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 55% 5%,rgba(240,200,80,0.1),transparent 60%);
  pointer-events:none;
}
.feature-card--premium:hover{
  border-color:rgba(240,200,80,0.75);
  box-shadow:0 0 34px rgba(240,200,80,0.22),0 14px 36px rgba(0,0,0,0.5);
  transform:translateY(-3px);
}

/* Free */
.feature-card--free{
  background:linear-gradient(145deg,#100528,#07021a);
  border:1.5px solid rgba(139,92,246,0.25);
  box-shadow:0 4px 18px rgba(0,0,0,0.35);
}
.feature-card--free::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 15%,rgba(139,92,246,0.07),transparent 65%);
  pointer-events:none;
}
.feature-card--free:hover{
  border-color:rgba(139,92,246,0.6);
  box-shadow:0 0 22px rgba(139,92,246,0.18),0 10px 28px rgba(0,0,0,0.4);
  transform:translateY(-3px);
}

/* Tap animation */
.feature-card.feat-tapped{
  animation:featCardTap 0.42s ease-out;
}
.feature-card--premium.feat-tapped{
  border-color:rgba(240,200,80,0.9) !important;
  box-shadow:0 0 28px rgba(240,200,80,0.3),0 0 8px rgba(240,200,80,0.2) !important;
}
.feature-card--free.feat-tapped{
  border-color:rgba(139,92,246,0.85) !important;
  box-shadow:0 0 22px rgba(139,92,246,0.28) !important;
}
@keyframes featCardTap{
  0%{transform:scale(1);}
  30%{transform:scale(1.045);}
  65%{transform:scale(1.02);}
  100%{transform:scale(1);}
}
/* Shimmer sweep on tap */
.feat-shimmer{
  position:absolute;top:0;left:-110%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,240,160,0.14),transparent);
  transform:skewX(-16deg);pointer-events:none;opacity:0;
}
.feature-card.feat-tapped .feat-shimmer{ animation:featShimmerSweep 0.45s ease-out; }
@keyframes featShimmerSweep{ 0%{opacity:1;left:-110%;} 100%{opacity:0;left:160%;} }

/* Icon */
.feat-icon-wrap{ display:flex;align-items:center;justify-content:center; margin-top:4px; }
.feat-float-icon{ animation:featFloat 3.5s ease-in-out infinite; }
@keyframes featFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Text */
.feat-text{ display:flex;flex-direction:column;gap:3px;width:100%; }
.feat-title{ font-size:14px;font-weight:800;color:#f0e8ff;line-height:1.2; }
.feat-sub{ font-size:11px;color:rgba(180,155,220,0.65);line-height:1.45; }
.feature-card--premium .feat-sub{ color:rgba(220,190,120,0.7); }

/* Badges — elegant chip style */
.feat-badge{
  position:absolute;top:10px;right:10px;
  display:flex;align-items:center;gap:3px;
  font-size:9.5px;font-weight:800;
  padding:3px 8px;border-radius:999px;
  letter-spacing:0.3px;
}
.feat-badge--token{
  background:linear-gradient(135deg,#fde68a,#f59e0b);
  color:#1a0800;
  box-shadow:0 1px 6px rgba(245,158,11,0.4),0 0 12px rgba(240,180,40,0.2);
}
.feat-badge--free{
  background:rgba(139,92,246,0.14);
  border:1px solid rgba(139,92,246,0.35);
  color:#c0a0e8;
}

/* Sparkles on premium */
.feat-sparkles{ position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.feat-sparkles span{ position:absolute;width:3px;height:3px;border-radius:50%;background:#f0d060;opacity:0;animation:featSparkle 2.5s ease-in-out infinite; }
.feat-sparkles span:nth-child(1){ top:18%;left:15%;animation-delay:0s; }
.feat-sparkles span:nth-child(2){ top:30%;right:12%;animation-delay:0.8s; }
.feat-sparkles span:nth-child(3){ bottom:25%;left:50%;animation-delay:1.6s; }
@keyframes featSparkle{0%,100%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}

.premium-tag{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#f0d060,#c9a830);color:#04010f;font-size:9px;font-weight:800;padding:3px 7px;border-radius:6px;letter-spacing:0.5px;}
.daily-posts-wrap{padding:0 18px 118px;}
.daily-posts-wrap.section-content #dp-categories{margin-top:0 !important;}
#future-baby #fb-main-view.section-content{
  padding-top:0 !important;
}
.dp-view{display:none;}
.dp-view.active{display:block;animation:dpViewIn .28s cubic-bezier(.22,.8,.28,1);}
.dp-view.dp-exit{animation:dpViewOut .16s ease forwards;}
@keyframes dpViewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes dpViewOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}
.dp-top{padding:4px 0 16px;}
.dp-page-title{font-size:32px;font-weight:950;color:#fbf7ff;line-height:1.04;letter-spacing:0;margin-top:2px;}
.dp-page-sub{font-size:13.5px;color:#b9a0dc;line-height:1.62;margin-top:8px;max-width:320px;}
.dp-chip-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:2px -18px 18px;padding:0 18px 4px;}
.dp-chip-row::-webkit-scrollbar{display:none;}
.dp-chip{border:1px solid rgba(139,92,246,.36);border-radius:999px;background:linear-gradient(160deg,rgba(139,92,246,.14),rgba(15,5,40,.86));color:#e4d6fb;font-size:12px;font-weight:850;padding:11px 14px;white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:8px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:transform .16s ease,border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease;}
.dp-chip.active,.dp-chip:active{border-color:rgba(240,208,96,.58);background:linear-gradient(160deg,rgba(240,208,96,.13),rgba(139,92,246,.12));color:#f0d060;box-shadow:0 0 18px rgba(240,208,96,.1),inset 0 1px 0 rgba(255,255,255,.06);}
.dp-chip:active{transform:scale(.96);}
.dp-chip-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.dp-chip-icon img,
.dp-chip-icon svg{width:20px;height:20px;display:block;flex-shrink:0;}
.dp-section-title{font-size:12px;font-weight:950;color:#f0d060;letter-spacing:1.55px;text-transform:uppercase;margin:20px 0 11px;}
.dp-featured-card{min-height:292px;border:1px solid rgba(139,92,246,.38);border-radius:26px;background:linear-gradient(160deg,#120634,#060116);overflow:hidden;position:relative;cursor:pointer;box-shadow:0 18px 42px rgba(0,0,0,.42),0 0 28px rgba(139,92,246,.12);transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease;}
.dp-featured-card:active{transform:scale(.988);border-color:rgba(240,208,96,.38);box-shadow:0 14px 34px rgba(0,0,0,.36),0 0 22px rgba(139,92,246,.14);}
.dp-featured-card::before{content:'';position:absolute;inset:0;border-radius:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);pointer-events:none;z-index:2;}
.dp-featured-cover{height:154px;background-size:cover;background-position:center;position:relative;}
.dp-featured-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,1,15,0),rgba(4,1,15,.82));}
.dp-featured-body{padding:17px 17px 18px;position:relative;}
.dp-featured-label{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:950;color:#f0d060;letter-spacing:1.3px;text-transform:uppercase;margin-bottom:9px;}
.dp-featured-title{font-size:21px;font-weight:950;color:#fbf7ff;line-height:1.18;}
.dp-featured-excerpt{font-size:13px;color:#c4addf;line-height:1.62;margin-top:9px;}
.dp-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;}
.dp-share-hint{font-size:11px;color:#f0d060;font-weight:900;white-space:nowrap;}
.dp-read-time{font-size:11px;color:#8d71b8;margin-top:10px;font-weight:850;}
.dp-post-list{display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;overflow-y:auto;max-height:calc(100svh - var(--section-screen-top-gap) - 160px);padding-right:6px;scrollbar-width:thin;scrollbar-color:#7c3aed #1a0650;}
.dp-post-list::-webkit-scrollbar{width:4px;}
.dp-post-list::-webkit-scrollbar-track{background:#1a0650;border-radius:4px;}
.dp-post-list::-webkit-scrollbar-thumb{background:#7c3aed;border-radius:4px;}
.dp-post-list::-webkit-scrollbar-thumb:hover{background:#a78bfa;}
.dp-post-list .dp-post-card{animation:dpItemIn .3s ease both;}
.dp-post-list .dp-post-card:nth-child(2){animation-delay:.035s}
.dp-post-list .dp-post-card:nth-child(3){animation-delay:.07s}
.dp-post-list .dp-post-card:nth-child(4){animation-delay:.105s}
.dp-post-list .dp-post-card:nth-child(5){animation-delay:.14s}
@keyframes dpItemIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.dp-post-card{border:1px solid rgba(42,21,80,.92);border-radius:20px;background:linear-gradient(160deg,#10062b,#07021a);padding:10px;cursor:pointer;display:flex;gap:12px;align-items:flex-start;box-shadow:0 8px 24px rgba(0,0,0,.23);transition:transform .18s ease,border-color .18s ease;position:relative;box-sizing:border-box;min-height:132px;height:auto;overflow:hidden;}
.dp-post-card:active{transform:scale(.985);border-color:rgba(157,111,240,.55);}
.dp-bookmark-btn{position:absolute;right:12px;top:12px;z-index:4;width:34px;height:34px;border-radius:50%;border:1px solid rgba(240,208,96,.32);background:rgba(7,2,26,.78);color:#f0d060;font-size:17px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);box-shadow:0 8px 18px rgba(0,0,0,.28);transition:transform .15s ease,border-color .18s ease,background .18s ease,color .18s ease;}
.dp-bookmark-btn:active{transform:scale(.92);}
.dp-bookmark-btn.saved{background:linear-gradient(135deg,#f0d060,#9d6ff0);color:#fff;border-color:rgba(240,208,96,.72);}
.dp-post-cover{width:92px;aspect-ratio:552 / 648;border-radius:16px;background-size:cover;background-repeat:no-repeat;background-position:center center;display:flex;align-items:stretch;justify-content:stretch;flex-shrink:0;position:relative;overflow:hidden;border:1px solid rgba(139,92,246,.22);}
.dp-post-cover img{width:100%;height:100%;display:block;object-fit:cover;object-position:center center;flex:1 1 auto;}
.dp-post-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(240,208,96,.08),rgba(139,92,246,.18));}
.dp-post-content{flex:1;min-width:0;padding:2px 0;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;min-height:0;overflow:hidden;}
.dp-post-meta{font-size:9.5px;color:#9d6ff0;font-weight:950;letter-spacing:1.2px;text-transform:uppercase;margin:0;line-height:1.1;}
.dp-post-title{font-size:15.5px;font-weight:950;color:#f6edff;line-height:1.18;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;margin:0;}
.dp-post-excerpt{font-size:12.2px;color:#a98bd4;line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;}
.dp-post-card .dp-share-hint,
.dp-post-card .dp-bookmark-btn{display:none !important;}
.dp-back-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.dp-header-text{min-width:0;}
.dp-header-action{margin-left:auto;width:40px;height:40px;border-radius:50%;border:1px solid rgba(240,208,96,.3);background:rgba(240,208,96,.08);color:#f0d060;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.18);transition:transform .16s ease,border-color .18s ease,background .18s ease;}
.dp-header-action:active{transform:scale(.94);border-color:rgba(240,208,96,.52);background:rgba(240,208,96,.14);}
.dp-feed-title{font-size:23px;font-weight:950;color:#fbf7ff;line-height:1.15;}
.dp-feed-sub{font-size:12.5px;color:#a98bd4;margin-top:3px;line-height:1.45;}
.dp-category-top{margin-bottom:16px;padding:17px;border:1px solid rgba(139,92,246,.32);border-radius:24px;background:linear-gradient(160deg,#120634,#07021a);position:relative;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.24);}
.dp-category-top::after{content:'';position:absolute;right:-42px;top:-42px;width:126px;height:126px;border-radius:50%;background:radial-gradient(circle,rgba(240,208,96,.18),rgba(139,92,246,0));pointer-events:none;}
.dp-category-top .dp-back-row{position:relative;z-index:1;margin-bottom:0;}
#dp-category-chips{
  margin:12px 0 0 !important;
  padding:0 0 4px !important;
  position:relative;
  z-index:1;
}
#dp-category-list{max-height:calc(100vh - 220px);overflow-y:auto;padding-bottom:30px;scrollbar-width:none;}
#dp-category-list::-webkit-scrollbar{display:none;}
.dp-detail-card{border:1px solid rgba(139,92,246,.34);border-radius:26px;background:linear-gradient(160deg,#10062b,#07021a);overflow:hidden;box-shadow:0 18px 42px rgba(0,0,0,.38);}
.dp-detail-content{padding:20px 20px 20px;}
.dp-detail-title{font-size:28px;font-weight:950;line-height:1.12;color:#fbf7ff;margin-bottom:12px;}
.dp-detail-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10.5px;color:#9d6ff0;font-weight:950;letter-spacing:1.12px;text-transform:uppercase;margin-bottom:16px;}
.dp-detail-pill{border:1px solid rgba(240,208,96,.34);border-radius:999px;background:rgba(240,208,96,.08);color:#f0d060;padding:6px 9px;}
.dp-intro{font-size:15.5px;color:#eadcff;line-height:1.78;margin-bottom:17px;}
.dp-intro p{margin-bottom:8px;}
.dp-intro p:last-child{margin-bottom:0;}
.dp-detail-body{display:flex;flex-direction:column;gap:13px;}
.dp-content-block{border:1px solid rgba(139,92,246,.2);border-radius:19px;background:linear-gradient(160deg,rgba(139,92,246,.08),rgba(15,5,40,.62));padding:15px;}
.dp-block-label{font-size:10px;color:#f0d060;font-weight:950;letter-spacing:1.45px;text-transform:uppercase;margin-bottom:8px;}
.dp-content-block-ranking{padding:16px 15px 15px;}
.dp-block-rank-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;}
.dp-block-rank{min-width:34px;font-size:18px;font-weight:950;line-height:1;color:#f0d060;}
.dp-block-rank-heading{font-size:13.5px;font-weight:900;line-height:1.35;color:#f6edff;}
.dp-block-text{font-size:14.2px;color:#d2bfec;line-height:1.82;}
.dp-ending-line{margin-top:15px;border:1px solid rgba(240,208,96,.22);border-radius:17px;background:rgba(240,208,96,.07);color:#f0d060;font-size:14px;font-weight:900;line-height:1.55;padding:13px;}
.dp-related{margin-top:20px;border-top:1px solid rgba(139,92,246,.14);padding-top:16px;}
.dp-related-title{font-size:12px;font-weight:950;color:#f0d060;letter-spacing:1.45px;text-transform:uppercase;margin-bottom:11px;}
.dp-related-list{display:flex;flex-direction:column;gap:10px;}
.dp-related-card{border:1px solid rgba(139,92,246,.22);border-radius:17px;background:linear-gradient(160deg,rgba(139,92,246,.08),rgba(15,5,40,.5));padding:13px;cursor:pointer;transition:transform .16s ease,border-color .18s ease,background .18s ease;}
.dp-related-card:active{transform:scale(.985);border-color:rgba(240,208,96,.32);background:linear-gradient(160deg,rgba(240,208,96,.08),rgba(139,92,246,.08));}
.dp-related-card{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.dp-related-card-main{min-width:0;}
.dp-related-card-title{font-size:13.5px;font-weight:950;color:#f6edff;line-height:1.32;}
.dp-related-card-meta{font-size:11px;color:#8d71b8;margin-top:6px;font-weight:800;}
.dp-related-arrow{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(240,208,96,.08);border:1px solid rgba(240,208,96,.2);color:#f0d060;flex-shrink:0;}
.dp-share-btn{margin:18px 20px 20px;width:calc(100% - 40px);border:none;border-radius:17px;background:linear-gradient(135deg,#f0d060,#a875f4 45%,#6d28d9);color:#fff;font-size:14px;font-weight:950;padding:15px;cursor:pointer;box-shadow:0 12px 28px rgba(139,92,246,.34),0 0 18px rgba(240,208,96,.12);transition:transform .16s ease,filter .18s ease,box-shadow .18s ease;}
.dp-share-btn:active{transform:scale(.985);filter:brightness(1.05);box-shadow:0 8px 22px rgba(139,92,246,.3),0 0 16px rgba(240,208,96,.14);}
.dp-empty-state{border:1px solid rgba(139,92,246,.28);border-radius:22px;background:linear-gradient(160deg,#10062b,#07021a);padding:24px 18px;text-align:center;color:#b9a0dc;font-size:13px;line-height:1.6;}
@media (prefers-reduced-motion:reduce){
  .dp-view.active,.dp-view.dp-exit,.dp-post-list .dp-post-card{animation:none;}
  .dp-chip,.dp-featured-card,.dp-post-card,.dp-back,.dp-related-card,.dp-share-btn{transition:none;}
}
.fb-hero{text-align:center;padding:10px 20px 18px;}
.fb-orb{width:110px;height:110px;border-radius:50%;margin:0 auto 16px;background:#6d28d9;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 28px rgba(240,208,96,.28),0 0 34px rgba(139,92,246,.28);}
.fb-orb-img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%;}
.fb-title{font-size:24px;font-weight:900;margin-bottom:8px;}
.fb-sub{font-size:13px;color:#b898e0;line-height:1.6;max-width:330px;margin:0 auto;}
.fb-card{margin:24px 16px 14px;background:linear-gradient(160deg,#0f0528,#07021a);border:1px solid #2a1550;border-radius:20px;padding:18px;}
.fb-profile-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:12px;border-radius:16px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.16);}
.fb-profile-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#3d1a6e,#0a0320);border:1px solid #5a3d8a;font-size:22px;flex-shrink:0;overflow:hidden;}
.fb-profile-icon img{width:100% !important;height:100% !important;display:block;object-fit:cover !important;border-radius:50%;transform:scale(1.16);transform-origin:center;}
.fb-profile-text{font-size:13px;color:#d8c6f5;line-height:1.5;}
.fb-field{margin-bottom:12px;overflow:hidden;}
.fb-label{font-size:11px;font-weight:800;color:#8b5cf6;letter-spacing:1.5px;margin-bottom:8px;}
.fb-required{color:#ff6b8f;}
.fb-input{width:100%;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;border:1.5px solid #2a1550;border-radius:14px;background:rgba(255,255,255,.04);color:#f0e8ff;padding:13px 14px;font-size:14px;outline:none;font-family:inherit;min-height:48px;}
.fb-input:focus{border-color:#8b5cf6;}
.fb-primary{width:100%;border:none;border-radius:15px;background:linear-gradient(135deg,#f0d060,#9d6ff0,#6d28d9);color:#fff;font-size:15px;font-weight:800;padding:15px;cursor:pointer;box-shadow:0 8px 24px rgba(139,92,246,.28);transition:transform 0.12s ease,box-shadow 0.12s ease;}
.fb-primary:active{transform:scale(0.97);box-shadow:0 4px 12px rgba(139,92,246,.2);}
.fb-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none;}
.fb-secondary{width:100%;border:1px solid rgba(240,208,96,.28);border-radius:15px;background:rgba(240,208,96,.05);color:#f0d060;font-size:13.5px;font-weight:800;padding:14px;cursor:pointer;margin-top:16px;letter-spacing:.3px;transition:background .15s ease,border-color .15s ease;}
.fb-secondary:active{background:rgba(240,208,96,.1);border-color:rgba(240,208,96,.5);}
.fb-note{font-size:11px;color:#7058a0;line-height:1.6;text-align:center;margin-top:12px;}
.fb-loading-screen{padding-top:18px;}
.fb-loading-screen-kicker{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(240,208,96,.62);text-align:center;margin-bottom:14px;}
.fb-loading-card{
  background:linear-gradient(160deg,#12072f,#09021c);
  border:1px solid rgba(139,92,246,.26);
  border-radius:22px;
  padding:32px 20px 28px;
  text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,0.5), 0 0 40px rgba(249,199,79,.05), inset 0 1px 0 rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
}
.fb-loading-card::before{
  content:'';
  position:absolute;
  left:50%;
  top:76px;
  width:180px;
  height:180px;
  transform:translateX(-50%);
  border-radius:50%;
  background:none;
  filter:blur(10px);
  pointer-events:none;
}
.fb-loading-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 42%);
  pointer-events:none;
}
.fb-loading-signs{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:18px;}
.fb-loading-sign-group{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:auto;}
.fb-loading-sign{
  width:68px;height:68px;border-radius:50%;
  background:linear-gradient(135deg,#1e0840,#2d1060);
  border:1.5px solid rgba(246,211,101,.42);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 16px rgba(246,211,101,.18),0 0 26px rgba(255,209,102,.12),0 0 34px rgba(255,248,220,.06);
  flex-shrink:0;
  overflow:hidden;
}
.fb-loading-sign img{
  width:100% !important;
  height:100% !important;
  display:block;
  object-fit:cover !important;
  border-radius:50%;
  transform:scale(1.16);
  transform-origin:center;
}
.fb-loading-sign-name{display:none;}
.fb-loading-connection{
  display:flex;flex-direction:column;align-items:center;
  width:70px;flex-shrink:0;position:relative;
}
.fb-loading-spark{
  width:70px;height:20px;overflow:visible;
}
.fb-loading-spark path{
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:fbSparkDraw 1.5s ease-in-out infinite;
}
@keyframes fbSparkDraw{
  0%{stroke-dashoffset:120;opacity:0.3;}
  50%{stroke-dashoffset:0;opacity:1;}
  100%{stroke-dashoffset:-120;opacity:0.3;}
}
.fb-loading-family-symbol{
  position:relative;
  width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  box-shadow:none;
  animation:fbLoadingPulse 1.9s ease-in-out infinite;
  isolation:isolate;
  margin-top:2px;
}
.fb-loading-family-symbol::before{
  content:none;
}
.fb-loading-family-symbol::after{
  content:none;
}
.fb-loading-family-glow{
  display:none;
}
.fb-loading-family-emoji{
  position:relative;
  z-index:1;
  font-size:20px;
  line-height:1;
  filter:drop-shadow(0 0 10px rgba(255,236,179,.6));
}
.fb-loading-family-emoji::before,
.fb-loading-family-emoji::after{
  content:'';
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,248,220,.95) 0%, rgba(249,199,79,.7) 55%, transparent 72%);
  box-shadow:0 0 8px rgba(255,214,102,.45);
  pointer-events:none;
}
.fb-loading-family-emoji::before{
  top:-10px;
  left:-8px;
  animation:fbStarFloat 2.6s ease-in-out infinite;
}
.fb-loading-family-emoji::after{
  top:-6px;
  right:-10px;
  animation:fbStarFloat 2.6s ease-in-out 1.1s infinite;
}
.fb-loading-pair-label{font-size:14px;font-weight:800;color:#f0c8e0;letter-spacing:.5px;margin-bottom:14px;text-align:center;}
.fb-loading-msg{font-size:13px;color:#b898e0;line-height:1.5;margin-bottom:18px;min-height:20px;text-align:center;transition:opacity .24s ease,transform .24s ease;}
.fb-loading-progress-wrap{transition:opacity .2s ease,transform .2s ease;}
.fb-loading-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 8px 10px;}
.fb-loading-progress-label{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#E9C46A;}
.fb-loading-pct{font-size:15px;font-weight:900;color:#F7E7BE;}
.fb-loading-bar-wrap{
  height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;
  position:relative;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.34);
  margin:0 8px 10px;
}
.fb-loading-bar-fill{
  width:0;height:100%;border-radius:99px;
  background:
    linear-gradient(180deg, rgba(255,248,220,.36) 0%, rgba(255,248,220,.12) 36%, transparent 37%),
    linear-gradient(90deg,#F6D365 0%,#F9C74F 48%,#F4A261 72%,#FFF0B2 100%);
  box-shadow:0 0 12px rgba(249,199,79,.28),0 0 18px rgba(255,209,102,.16), 0 0 26px rgba(249,199,79,.12);
  transition:width .12s linear;
  position:relative;
  overflow:hidden;
  animation:fbBarGlowPulse 2.8s ease-in-out infinite;
}
.fb-loading-bar-fill::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.16) 42%, rgba(255,255,255,0) 52%);
  pointer-events:none;
}
.fb-loading-bar-fill::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:34px;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,248,220,.22) 28%, rgba(255,255,255,.55) 52%, rgba(255,248,220,.18) 72%, rgba(255,255,255,0) 100%);
  filter:blur(.2px);
  transform:translateX(-42px) skewX(-18deg);
  animation:fbBarShimmer 2.6s linear infinite;
  pointer-events:none;
}
.fb-loading-progress-wrap.is-hidden,
.fb-loading-msg.is-hidden{opacity:0;transform:translateY(-4px);pointer-events:none;}
.fb-result{display:none;margin:0 16px 110px;}
.fb-result.show{display:block;animation:fbResultIn 0.35s ease;}
@keyframes fbResultIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.fb-result-intro{background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(240,208,96,.07));border:1px solid rgba(139,92,246,.28);border-radius:20px;padding:20px 20px 18px;margin-bottom:18px;text-align:center;}
.fb-result-intro::before{content:'\2736  YOUR READING  \2736';display:block;font-size:9px;font-weight:900;color:rgba(240,208,96,.65);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:12px;}
.fb-result-intro-text{font-size:14px;color:#ecdeff;line-height:1.9;margin:0;font-style:normal;}
.fb-section{background:linear-gradient(160deg,#100630,#08031c);border:1px solid rgba(60,24,100,.7);border-radius:18px;padding:16px 16px 16px 20px;margin-bottom:12px;position:relative;overflow:hidden;}
.fb-section::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:18px 0 0 18px;background:linear-gradient(180deg,#f0d060 0%,#8b5cf6 100%);}
.fb-section-title{font-size:10.5px;font-weight:900;color:#f0d060;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:10px;}
.fb-section-text{font-size:13.5px;color:#ddd0f8;line-height:1.88;}
.fb-result.show .fb-result-intro{animation:fbSectionIn 0.4s ease both;}
.fb-result.show .fb-section{opacity:0;animation:fbSectionIn 0.4s ease both;}
.fb-result.show .fb-section:nth-child(2){animation-delay:.07s;}
.fb-result.show .fb-section:nth-child(3){animation-delay:.14s;}
.fb-result.show .fb-section:nth-child(4){animation-delay:.21s;}
.fb-result.show .fb-section:nth-child(5){animation-delay:.28s;}
@keyframes fbSectionIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes fbLoadingPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.14);}}
@keyframes fbStarFloat{0%,100%{transform:translateY(0) scale(.95);opacity:.7;}50%{transform:translateY(-3px) scale(1.1);opacity:1;}}
@keyframes fbBarGlowPulse{0%,100%{box-shadow:0 0 12px rgba(249,199,79,.22),0 0 18px rgba(255,209,102,.12),0 0 26px rgba(249,199,79,.08);}50%{box-shadow:0 0 14px rgba(249,199,79,.32),0 0 22px rgba(255,209,102,.2),0 0 34px rgba(255,248,220,.12);}}
@keyframes fbBarShimmer{0%{transform:translateX(-42px) skewX(-18deg);}100%{transform:translateX(220px) skewX(-18deg);}}

/* ══════════════════════════════════════════
   FUTURE BABY — PREMIUM RESULT REDESIGN v2
   ══════════════════════════════════════════ */

/* Wrapper */
.fbr-wrap{padding:0 0 32px;}

/* ── Header ── */
.fbr-header{text-align:center;padding:28px 20px 20px;position:relative;}
.fbr-orb-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;}
.fbr-sign-pill{
  display:flex;align-items:center;gap:8px;
  background:rgba(139,92,246,.13);
  border:1px solid rgba(139,92,246,.32);
  border-radius:40px;padding:9px 18px;
  font-size:15px;font-weight:800;color:#ecdeff;
  backdrop-filter:blur(10px);
  box-shadow:0 2px 14px rgba(139,92,246,.12);
}
.fbr-sign-pill span{font-size:13px;font-weight:700;color:#ddd0f8;}
.fbr-heart{font-size:30px;filter:drop-shadow(0 0 12px rgba(240,208,96,.7));animation:fbHeartPulse 2.4s ease-in-out infinite;}
@keyframes fbHeartPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
.fbr-subtitle{font-size:11px;font-weight:800;letter-spacing:2.8px;text-transform:uppercase;color:rgba(200,170,255,.5);margin-top:4px;}

/* ── Progress strip ── */
.fbr-progress{
  display:flex;justify-content:center;gap:0;flex-wrap:wrap;
  margin:0 16px 24px;padding:11px 16px;
  background:rgba(139,92,246,.06);
  border:1px solid rgba(139,92,246,.15);
  border-radius:14px;gap:16px;
}
.fbr-prog-item{font-size:9.5px;font-weight:800;letter-spacing:.7px;color:#7a60b8;text-transform:uppercase;}
.fbr-prog-item::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#f0d060;margin-right:5px;vertical-align:middle;box-shadow:0 0 6px rgba(240,208,96,.8);}

/* ── Base card ── */
.fbc-card{
  margin:0 16px 16px;
  background:linear-gradient(148deg,rgba(20,7,50,.94),rgba(9,2,24,.96));
  border:1px solid rgba(90,50,160,.32);
  border-radius:22px;
  padding:22px 20px 14px;
  position:relative;
  overflow:hidden;
  opacity:0;
  animation:fbcFadeUp .55s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes fbcFadeUp{from{opacity:0;transform:translateY(22px) scale(.98);}to{opacity:1;transform:none;}}

/* Shared glass sheen */
.fbc-card::after{
  content:'';position:absolute;inset:0;border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 55%);
  pointer-events:none;
}

/* ── Watermark glyph — hidden ── */
.fbc-watermark{display:none;}

/* ── Card 1: Overview — violet left bar + top shimmer ── */
.fbc-overview{
  border-color:rgba(139,92,246,.42);
  background:linear-gradient(148deg,rgba(25,8,62,.94),rgba(10,3,28,.97));
  box-shadow:inset 3px 0 0 rgba(139,92,246,.55);
}
.fbc-overview::before{
  content:'';position:absolute;top:0;left:18px;right:18px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),transparent);
}

/* ── Card 2: Personality — rose-violet tint ── */
.fbc-card:nth-child(4){
  border-color:rgba(180,80,200,.28);
  box-shadow:inset 3px 0 0 rgba(180,80,200,.35);
}
.fbc-card:nth-child(4) .fbc-watermark{color:rgba(180,80,200,.07);}

/* ── Card 3: Traits — teal-violet tint ── */
.fbc-card:nth-child(5){
  border-color:rgba(80,160,200,.25);
  box-shadow:inset 3px 0 0 rgba(80,160,200,.32);
}
.fbc-card:nth-child(5) .fbc-watermark{color:rgba(80,160,200,.07);}

/* ── Card 4: Talents — emerald tint ── */
.fbc-card:nth-child(6){
  border-color:rgba(80,200,140,.22);
  box-shadow:inset 3px 0 0 rgba(80,200,140,.3);
}
.fbc-card:nth-child(6) .fbc-watermark{color:rgba(80,200,140,.07);}

/* ── Card 5: Final Vibe — gold, strongest ── */
.fbc-vibe{
  border-color:rgba(240,208,96,.38);
  background:linear-gradient(148deg,rgba(34,16,65,.96),rgba(16,7,36,.98));
  box-shadow:0 0 36px rgba(240,208,96,.09), inset 0 0 40px rgba(240,208,96,.04), inset 3px 0 0 rgba(240,208,96,.5);
  margin-bottom:6px;
}
.fbc-vibe::before{
  content:'';position:absolute;top:0;left:18px;right:18px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,208,96,.7),transparent);
}

/* Card head */
.fbc-card-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.fbc-icon{font-size:21px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 7px rgba(240,208,96,.4));}
.fbc-title{font-size:9px;font-weight:900;letter-spacing:2.2px;text-transform:uppercase;color:rgba(190,160,255,.65);}
.fbc-overview .fbc-title{color:rgba(160,130,255,.8);}
.fbc-vibe .fbc-title{color:rgba(240,208,96,.78);text-shadow:0 0 12px rgba(240,208,96,.3);}

/* Card body clamp */
.fbc-body{
  position:relative;
  max-height:5.2em;
  overflow:hidden;
  background:transparent;
  transition:max-height .4s cubic-bezier(.4,0,.2,1);
}
.fbc-body::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2.6em;
  background:linear-gradient(to bottom,transparent,rgba(12,4,32,0));
  transition:opacity .3s ease;pointer-events:none;
}
.fbc-body--open{max-height:80em;}
.fbc-body--open::after{opacity:0;}
.fbc-vibe .fbc-body::after{background:linear-gradient(to bottom,transparent,rgba(20,8,42,0));}

/* Body text */
.fbc-text{font-size:14px;color:#cfc4ee;line-height:2;margin:0;font-weight:400;letter-spacing:.01em;}
.fbc-vibe .fbc-text{color:#f0e4a8;font-style:italic;font-weight:500;line-height:2.1;}

/* Expand button */
.fbc-expand-btn{
  display:block;width:100%;
  margin-top:14px;padding:10px 0 10px;
  background:none;border:none;border-top:1px solid rgba(139,92,246,.12);
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;
  color:rgba(160,130,255,.5);text-transform:uppercase;
  cursor:pointer;text-align:right;
  transition:color .2s,border-color .2s;
}
.fbc-expand-btn:active{color:#c4a8f0;border-color:rgba(139,92,246,.3);}
.fbc-vibe .fbc-expand-btn{color:rgba(240,208,96,.45);border-top-color:rgba(240,208,96,.14);}
.fbc-vibe .fbc-expand-btn:active{color:#f0d060;}

/* ── Actions ── */
.fbr-actions{margin:18px 16px 0;display:flex;flex-direction:column;gap:12px;}

.fbr-btn-share{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.38);
  border-radius:18px;
  color:#c4a8f0;font-size:14px;font-weight:800;letter-spacing:.5px;
  padding:15px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s;
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.fbr-btn-share:active{background:rgba(139,92,246,.24);border-color:rgba(139,92,246,.6);transform:scale(.98);}
.fbr-btn-share-icon{font-size:17px;}

.fbr-btn-explore{
  width:100%;
  background:linear-gradient(110deg,#b8832a 0%,#f0d060 45%,#c9983a 100%);
  background-size:200% auto;
  border:none;border-radius:18px;
  color:#150900;font-size:14.5px;font-weight:900;letter-spacing:.6px;
  padding:16px;cursor:pointer;
  box-shadow:0 6px 28px rgba(240,208,96,.3),0 1px 0 rgba(255,255,255,.15) inset;
  transition:background-position .45s,transform .15s,box-shadow .2s;
}
.fbr-btn-explore:active{background-position:right center;transform:scale(.98);box-shadow:0 3px 14px rgba(240,208,96,.18);}
@keyframes fbShimmer{0%{background-position:0% center;}100%{background-position:200% center;}}

.celebrity-intro,.celebrity-section{margin:0 16px 14px;background:linear-gradient(160deg,#0f0528,#07021a);border:1px solid #2a1550;border-radius:20px;padding:18px;}
.celebrity-profile-row{display:flex;align-items:center;gap:12px;}
.celebrity-zodiac-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#3d1a6e,#0a0320);border:1px solid #5a3d8a;font-size:26px;flex-shrink:0;}
.celebrity-profile-text{font-size:13px;color:#d8c6f5;line-height:1.6;}
.celebrity-section-title{font-size:15px;font-weight:900;color:#f0d060;margin-bottom:6px;}
.celebrity-section-sub{font-size:12px;color:#9878c0;line-height:1.55;margin-bottom:14px;}
.celebrity-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.celebrity-card{display:flex;align-items:center;gap:13px;background:linear-gradient(160deg,#0f0528,#07021a);border:1px solid #2a1550;border-radius:18px;padding:13px;box-shadow:0 8px 28px rgba(0,0,0,.22);}
.celebrity-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid rgba(240,208,96,.35);background:#120630;flex-shrink:0;}
.celebrity-name{font-size:15px;font-weight:900;color:#f0e8ff;}
.celebrity-meta{font-size:12px;color:#9878c0;margin-top:4px;}
.celebrity-badge{display:inline-block;margin-top:7px;font-size:10px;font-weight:800;color:#f0d060;border:1px solid rgba(240,208,96,.25);background:rgba(240,208,96,.08);border-radius:999px;padding:4px 8px;}
.celebrity-state{background:rgba(139,92,246,.07);border:1px solid #2a1550;border-radius:18px;padding:16px;color:#c0a8e0;font-size:13px;line-height:1.65;text-align:center;}
.celebrity-compare-row{display:flex;align-items:center;gap:12px;margin:12px 0 16px;}
.celebrity-compare-box{flex:1;min-height:128px;border:1.5px solid #2a1550;border-radius:18px;background:rgba(139,92,246,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px;cursor:pointer;}
.celebrity-compare-box.empty{border-style:dashed;color:#f0d060;}
.celebrity-compare-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid rgba(240,208,96,.35);background:#120630;display:flex;align-items:center;justify-content:center;font-size:28px;}
.celebrity-compare-name{font-size:13px;font-weight:900;color:#f0e8ff;}
.celebrity-compare-meta{font-size:11px;color:#9878c0;}
.celebrity-vs{font-size:16px;font-weight:900;color:#f0d060;}
.celebrity-picker{display:none;margin:4px 0 16px;max-height:310px;overflow-y:auto;border:1px solid #2a1550;border-radius:16px;padding:10px;background:rgba(139,92,246,.07);}
.celebrity-picker.show{display:block;}
.celebrity-picker-item{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;cursor:pointer;border:1px solid transparent;}
.celebrity-picker-item:hover{border-color:#8b5cf6;background:rgba(139,92,246,.13);}
.celebrity-picker-item img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#120630;}
.celebrity-picker-info{flex:1;min-width:0;}
.celebrity-picker-zodiac{font-size:26px;filter:drop-shadow(0 0 8px rgba(139,92,246,.45));}
#celebrity-select-box,#celebrity-selected-avatar{cursor:pointer;pointer-events:auto;}
.celebrity-picker-view{display:none;padding:0 20px 110px;position:relative;overflow:hidden;}
.celebrity-picker-view.show{display:block;}
.celebrity-picker-view::before,.celebrity-picker-view::after{content:'';position:absolute;border-radius:50%;pointer-events:none;opacity:.55;animation:celebrityRegionFloat 9s ease-in-out infinite;}
.celebrity-picker-view::before{width:220px;height:220px;right:-52px;bottom:82px;background:radial-gradient(circle,rgba(139,92,246,.1) 0%,rgba(139,92,246,.04) 28%,transparent 70%),radial-gradient(circle at 30% 36%,rgba(240,208,96,.82) 0 2px,transparent 3px),radial-gradient(circle at 68% 22%,rgba(196,173,255,.7) 0 1.5px,transparent 3px),radial-gradient(circle at 54% 74%,rgba(112,182,255,.58) 0 2px,transparent 3px),radial-gradient(circle at 22% 70%,rgba(255,255,255,.68) 0 1.5px,transparent 3px);}
.celebrity-picker-view::after{width:180px;height:180px;left:-38px;bottom:118px;background:radial-gradient(circle,rgba(91,162,255,.08) 0%,rgba(91,162,255,.03) 24%,transparent 68%),radial-gradient(circle at 62% 28%,rgba(240,208,96,.68) 0 1.5px,transparent 3px),radial-gradient(circle at 34% 48%,rgba(196,173,255,.62) 0 1.5px,transparent 3px),radial-gradient(circle at 70% 74%,rgba(255,255,255,.58) 0 1.5px,transparent 3px);}
.celebrity-category-view,.celebrity-list-view{padding-top:0;position:relative;z-index:1;}
.celebrity-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.celebrity-category-card{position:relative;border:1px solid rgba(198,168,235,.24);border-radius:24px;background:linear-gradient(180deg,#1a0a44 0%,#130633 52%,#09031e 100%);min-height:186px;padding:18px 15px 8px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;overflow:hidden;}
.celebrity-category-card::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.045),transparent 42%);pointer-events:none;}
.celebrity-category-card:hover,.celebrity-category-card.active{border-color:rgba(240,208,96,.5);box-shadow:0 14px 30px rgba(0,0,0,.26),0 0 14px rgba(240,208,96,.08),inset 0 1px 0 rgba(255,255,255,.05);}
.celebrity-category-card:active{transform:scale(.97);border-color:rgba(240,208,96,.52);box-shadow:0 14px 30px rgba(0,0,0,.26),0 0 18px rgba(240,208,96,.14),inset 0 1px 0 rgba(255,255,255,.05);animation:celebrityCardPulse .34s ease;}
.celebrity-category-icon{width:100px;height:100px;display:flex;align-items:center;justify-content:center;line-height:1;filter:drop-shadow(0 0 10px rgba(240,208,96,.12));margin:0 auto 8px;}
.celebrity-category-icon-img{width:100px;height:100px;display:block;object-fit:contain;flex-shrink:0;}
.celebrity-category-copy{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;flex:1;}
.celebrity-category-name{font-size:16px;font-weight:900;color:#f6edff;line-height:1.15;}
.celebrity-category-meta{font-size:12px;color:#b49fd6;line-height:1.45;}
.celebrity-category-cta{font-size:12px;font-weight:900;color:#f0d7a0;letter-spacing:.2px;text-align:right;align-self:flex-end;min-width:max-content;margin-top:8px;}
.celebrity-category-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none;}
.celebrity-category-chips::-webkit-scrollbar{display:none;}
.celebrity-category-chip{border:1px solid #2a1550;background:rgba(255,255,255,.04);color:#c7b2e8;border-radius:999px;padding:9px 12px;font-size:12px;font-weight:800;white-space:nowrap;transition:border-color .18s ease,background .18s ease,color .18s ease;display:inline-flex;align-items:center;gap:8px;}
.celebrity-category-chip.active{border-color:rgba(240,208,96,.38);background:linear-gradient(135deg,rgba(240,208,96,.16),rgba(139,92,246,.16));color:#fff4d3;}
.celebrity-category-icon-img.chip{width:18px;height:18px;}
.celebrity-search{width:100%;border:1.5px solid #2a1550;border-radius:14px;background:rgba(255,255,255,.04);color:#f0e8ff;padding:14px 15px;font-size:14px;outline:none;margin-bottom:12px;}
.celebrity-search:focus{border-color:#8b5cf6;}
.celebrity-picker-list{max-height:calc(100vh - 250px);overflow-y:auto;background:linear-gradient(160deg,#0f0528,#07021a);border:1px solid #2a1550;border-radius:18px;padding:8px;}
.celebrity-picker-view.show{display:block;min-height:calc(100vh - 88px);}
.celebrity-picker-item{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:14px;cursor:pointer;transition:background .18s ease,transform .18s ease;}
.celebrity-picker-item:hover{background:rgba(139,92,246,.14);transform:translateY(-1px);}
.celebrity-picker-item img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(139,92,246,.55);background:#16082d;flex-shrink:0;}
.celebrity-state{color:#a995cc;text-align:center;padding:18px 10px;font-size:14px;}
#celebrity-picker-state{display:none !important;}
.celebrity-picker-meta{font-size:12px;color:#9878c0;margin-top:4px;}
.celebrity-loading-screen{display:none;padding:0 20px 110px;min-height:calc(100vh - 88px);}
.celebrity-loading-screen.show{display:block;}
.celebrity-loading-view{display:none;margin-top:0;}
.celebrity-loading-view.show{display:block;}
.celebrity-loading-screen-kicker{
  font-size:11px;
  font-weight:900;
  color:rgba(240,140,180,.62);
  letter-spacing:2px;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:12px;
}
.celebrity-loading-card{position:relative;overflow:hidden;border:1px solid rgba(139,92,246,.3);border-radius:22px;padding:32px 20px 28px;text-align:center;background:
  radial-gradient(circle at 18% 22%, rgba(102,144,255,.12), transparent 24%),
  radial-gradient(circle at 82% 22%, rgba(147,92,255,.18), transparent 24%),
  linear-gradient(180deg,#170739 0%,#0b031f 100%);
  box-shadow:0 10px 40px rgba(0,0,0,.5), 0 0 40px rgba(91,162,255,.05);
}
.celebrity-loading-card::before{content:'';position:absolute;left:50%;top:24px;transform:translateX(-50%);width:168px;height:168px;border-radius:50%;background:none;filter:blur(2px);pointer-events:none;}
.celebrity-loading-top{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:18px;}
.celebrity-loading-sign{display:flex;flex-direction:column;align-items:center;gap:0;min-width:0;}
.celebrity-loading-avatar{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#1e0840,#2d1060);border:1.5px solid rgba(139,92,246,.4);box-shadow:0 0 18px rgba(139,92,246,.18);flex-shrink:0;}
.celebrity-loading-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.celebrity-loading-user-avatar{border:1.5px solid rgba(139,92,246,.4);box-shadow:0 0 18px rgba(139,92,246,.18);}
.celebrity-loading-user-avatar img{width:100% !important;height:100% !important;object-fit:cover !important;display:block;transform:scale(1.16);transform-origin:center;}
.celebrity-loading-celeb-avatar{border:1.5px solid rgba(139,92,246,.4);box-shadow:0 0 18px rgba(139,92,246,.18);}
.celebrity-loading-name{display:none;}
.celebrity-loading-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:70px;flex-shrink:0;position:relative;}
.celebrity-loading-spark{width:70px;height:20px;overflow:visible;}
.celebrity-loading-spark path{
  stroke-dasharray:120;
  stroke-dashoffset:120;
  animation:celebritySparkDraw 1.5s ease-in-out infinite;
}
@keyframes celebritySparkDraw{
  0%{stroke-dashoffset:120;opacity:.3;}
  50%{stroke-dashoffset:0;opacity:1;}
  100%{stroke-dashoffset:-120;opacity:.3;}
}
.celebrity-loading-vs{font-size:20px;font-weight:800;color:#cbb6ee;line-height:1;margin-top:2px;}
.celebrity-loading-pair{font-size:14px;font-weight:800;color:#f0c8e0;letter-spacing:.5px;margin-bottom:14px;line-height:1.25;}
.celebrity-loading-message{font-size:13px;color:#b898e0;line-height:1.5;margin-bottom:18px;min-height:20px;margin-top:0;}
.celebrity-loading-progress-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 8px 10px;}
.celebrity-loading-progress-label{font-size:10px;font-weight:800;color:#f0d7a0;letter-spacing:1.5px;text-transform:uppercase;}
.celebrity-loading-progress-value{font-size:15px;font-weight:900;color:#f5e9ff;}
.celebrity-loading-progress-track{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:0 8px 10px;}
.celebrity-loading-progress-fill{width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#8b5cf6,#5ba2ff,#f0d060);transition:width .15s linear;box-shadow:none;}
@keyframes celebrityRegionFloat{0%,100%{transform:translateY(0);opacity:.42}50%{transform:translateY(-8px);opacity:.65}}
@keyframes celebrityCardPulse{0%{box-shadow:0 14px 30px rgba(0,0,0,.26),0 0 10px rgba(240,208,96,.08),inset 0 1px 0 rgba(255,255,255,.05);}50%{box-shadow:0 14px 30px rgba(0,0,0,.26),0 0 22px rgba(240,208,96,.18),inset 0 1px 0 rgba(255,255,255,.05);}100%{box-shadow:0 14px 30px rgba(0,0,0,.26),0 0 16px rgba(240,208,96,.14),inset 0 1px 0 rgba(255,255,255,.05);}}
@media (max-width:380px){
  .celebrity-category-grid{gap:12px;}
  .celebrity-category-card{min-height:186px;padding:16px 12px 8px;border-radius:22px;}
  .celebrity-category-name{font-size:15px;}
  .celebrity-loading-screen{padding:18px 16px 110px;}
  .celebrity-loading-card{padding:28px 16px 24px;}
  .celebrity-loading-avatar{width:68px;height:68px;}
}

/* Chinese Horoscope */
.chinese-wrap{padding:0 20px 112px;}
.chinese-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.section-topbar.chinese-header{margin:0 -20px 0;}
.chinese-picker-intro{padding:10px 0 6px;text-align:center;}
.chinese-picker-title{font-size:24px;font-weight:950;color:#f6edff;line-height:1.1;margin-bottom:8px;}
.chinese-picker-sub{font-size:13px;color:#b9a1dc;line-height:1.6;max-width:280px;margin:0 auto;}
.chinese-animal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:0;}
.chinese-animal-card{position:relative;border:1px solid rgba(139,92,246,.24);border-radius:24px;background:linear-gradient(180deg,#1a0a42 0%,#120634 46%,#08021d 100%);padding:13px 10px 10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:120px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .14s ease;overflow:hidden;}
.chinese-animal-card:hover,.chinese-animal-card:active{border-color:rgba(240,208,96,.3);box-shadow:0 10px 20px rgba(139,92,246,.12),0 0 14px rgba(240,208,96,.06);}
.chinese-animal-card:active{transform:scale(.985);}
.chinese-animal-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03),transparent 46%);pointer-events:none;}
.chinese-animal-card.is-user-sign{
  border-color:var(--gold) !important;
  box-shadow:0 0 18px rgba(212,175,55,.16);
}
.chinese-animal-marker{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:#f2d27c;text-shadow:0 0 10px rgba(242,210,124,.32);animation:chineseMarkerFloat 2.6s ease-in-out infinite;}
.chinese-animal-marker.is-year{color:#b8d7ff;text-shadow:0 0 10px rgba(132,188,255,.32);}
.chinese-animal-avatar{width:72px;height:72px;border-radius:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;box-shadow:none;overflow:visible;flex-shrink:0;transition:box-shadow .22s ease,transform .22s ease;}
.chinese-animal-card.is-user-sign .chinese-animal-avatar{box-shadow:none;}
.chinese-animal-card.is-current-year .chinese-animal-avatar{box-shadow:none;}
.chinese-animal-card.is-user-sign.is-current-year .chinese-animal-avatar{box-shadow:none;}
.chinese-animal-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;}
.chinese-animal-card-name{font-size:13px;font-weight:800;color:#efe7ff;line-height:1.25;text-align:center;}
.chinese-hero{position:relative;overflow:hidden;border:1px solid rgba(240,208,96,.32);border-radius:28px;padding:22px;background:radial-gradient(circle at 88% 8%,rgba(240,208,96,.25),transparent 34%),radial-gradient(circle at 10% 100%,rgba(139,92,246,.18),transparent 34%),linear-gradient(155deg,#1a0738,#09031d 58%,#170516);box-shadow:0 22px 58px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.025) inset,inset 0 1px 0 rgba(255,255,255,.09);}
.chinese-hero-kicker{font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#f0d060;margin-bottom:8px;}
.chinese-hero-main{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.chinese-animal{font-size:64px;line-height:1;filter:drop-shadow(0 0 18px rgba(240,208,96,.30));width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.chinese-animal img{width:100%;height:100%;object-fit:cover;display:block;}
.chinese-title{font-size:34px;font-weight:950;line-height:1.02;color:#fff;}
.chinese-year-label{display:inline-flex;margin-top:8px;border:1px solid rgba(139,92,246,.32);background:rgba(139,92,246,.12);border-radius:999px;padding:6px 10px;color:#c8b7e8;font-size:12px;font-weight:900;}
.chinese-sub{font-size:13px;color:#f0d060;line-height:1.45;margin-top:9px;max-width:270px;font-weight:850;}
.chinese-cycle{margin-top:12px;border:1px solid rgba(139,92,246,.28);border-radius:20px;background:linear-gradient(160deg,rgba(139,92,246,.12),rgba(12,4,31,.68));padding:15px 16px;}
.chinese-cycle-title{font-size:14px;color:#f6edff;font-weight:950;margin-bottom:7px;}
.chinese-cycle-text{font-size:13px;color:#c8b7e8;line-height:1.58;}
.chinese-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
.chinese-pill{border:1px solid rgba(139,92,246,.36);background:rgba(12,4,31,.45);border-radius:16px;padding:12px;}
.chinese-pill-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#8f72bd;font-weight:900;margin-bottom:5px;}
.chinese-pill-value{font-size:15px;color:#e8dcff;font-weight:950;}
.chinese-tabs{display:flex;gap:10px;overflow-x:auto;padding:18px 0 14px;scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.chinese-tabs::-webkit-scrollbar{display:none;}
.chinese-tab{border:1px solid #2a1550;background:rgba(255,255,255,.045);color:#b9a1dc;border-radius:999px;padding:11px 15px;font-size:13px;font-weight:850;white-space:nowrap;transition:background .22s ease,border-color .22s ease,color .22s ease,transform .18s ease,box-shadow .22s ease;touch-action:manipulation;}
.chinese-tab:active{transform:scale(.97);}
.chinese-tab.active{border-color:rgba(240,208,96,.78);background:linear-gradient(135deg,rgba(240,208,96,.24),rgba(139,92,246,.22));color:#fff;box-shadow:0 8px 24px rgba(139,92,246,.20),0 0 0 1px rgba(240,208,96,.08) inset;}
.chinese-content{border:1px solid #241146;border-radius:24px;background:linear-gradient(160deg,rgba(22,8,45,.97),rgba(7,2,20,.99));padding:21px;box-shadow:0 18px 45px rgba(0,0,0,.30);}
.chinese-content.fade{animation:chineseFade .32s ease;}
.chinese-content-title{font-size:20px;font-weight:950;color:#f6edff;margin-bottom:11px;line-height:1.2;}
.chinese-content-text{font-size:14px;line-height:1.72;color:#c8b7e8;}
.chinese-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px;}
.chinese-mini{border:1px solid rgba(139,92,246,.25);background:rgba(139,92,246,.085);border-radius:16px;padding:13px;min-height:72px;}
.chinese-mini-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#8f72bd;font-weight:900;margin-bottom:6px;}
.chinese-mini-value{font-size:14px;color:#f0d060;font-weight:900;line-height:1.35;}
@keyframes chineseFade{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes chineseMarkerFloat{0%,100%{transform:translateY(0);opacity:.92}50%{transform:translateY(-1.5px);opacity:1}}
@media (max-width:380px){
  .chinese-wrap{padding-left:16px;padding-right:16px;}
  .chinese-animal-grid{gap:10px;}
  .chinese-animal-card{padding:12px 8px 9px;min-height:114px;border-radius:22px;}
  .chinese-animal-marker{top:9px;right:9px;font-size:11px;}
  .chinese-animal-avatar{width:66px;height:66px;}
  .chinese-hero{padding:20px;border-radius:24px;}
  .chinese-title{font-size:30px;}
  .chinese-animal{font-size:56px;}
  .chinese-meta,.chinese-mini-grid{gap:8px;}
  .chinese-pill,.chinese-mini{padding:11px;}
}
.sign-bubble img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;}
#celebrity-select-box{cursor:pointer;}
#celebrity-select-box:focus-visible{outline:2px solid #8b5cf6;outline-offset:6px;border-radius:22px;}
.celebrity-compat-result{display:none;text-align:center;margin-top:14px;}
.celebrity-compat-result.show{display:block;}
.celebrity-mini-cats{display:flex;gap:8px;margin-top:14px;}
.celebrity-mini-cat{flex:1;background:rgba(139,92,246,.08);border:1px solid #2a1550;border-radius:14px;padding:12px 7px;text-align:center;}
.celebrity-screen-pad{padding-bottom:110px;}

/* COMPATIBILITY */
#compat{background:#04010f;}
.compat-header{padding:52px 20px 22px;background:linear-gradient(180deg,#0f0528,#04010f);text-align:center;}
.compat-title{font-size:25px;font-weight:800;}
.compat-sub{font-size:14px;color:#9878c0;margin-top:6px;}
.compat-body{padding:0 20px 110px;}
.compat-form{background:linear-gradient(160deg,#0f0528,#07021a);border-radius:22px;padding:22px;border:1px solid #2a1550;margin-bottom:14px;}
.compat-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.compat-vs{font-size:18px;font-weight:800;color:#f0d060;text-align:center;padding:8px;align-self:center;}
.compat-sign-select{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;}
.sign-bubble{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,#2a0e60,#07021a);border:2px solid #3a2060;display:flex;align-items:center;justify-content:center;font-size:40px;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 16px rgba(0,0,0,0.4);}
.sign-bubble:hover{border-color:#8b5cf6;box-shadow:0 4px 20px rgba(139,92,246,0.3);}
.sign-bubble.locked{cursor:default;opacity:.9;}
.sign-bubble.empty{background:rgba(255,255,255,.03);border-style:dashed;color:#f0d060;font-size:34px;}
#sign-b-select,#sign-b-bubble{cursor:pointer;pointer-events:auto;position:relative;z-index:3;}
.sign-bubble-label{font-size:12px;color:#9878c0;}
.compat-check-btn{width:100%;padding:15px;border-radius:14px;border:none;background:linear-gradient(135deg,#9d6ff0,#6d28d9);color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 18px rgba(109,40,217,0.35);}
.compat-check-btn:hover{opacity:0.92;transform:translateY(-1px);}
.compat-check-btn:disabled,.compat-check-btn.disabled{background:linear-gradient(135deg,rgba(157,111,240,.25),rgba(109,40,217,.2));color:#9d84c8;box-shadow:none;cursor:not-allowed;border:1px solid rgba(139,92,246,.25);}
.compat-check-btn:disabled:hover,.compat-check-btn.disabled:hover{transform:none;opacity:.78;}
.compat-picker-panel{display:none;margin:4px 0 16px;padding:12px;border:1px solid #2a1550;border-radius:16px;background:rgba(139,92,246,.07);}
.compat-picker-panel.show{display:block;}
.compat-picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.compat-result{background:linear-gradient(160deg,#0f0528,#07021a);border-radius:22px;padding:26px 22px;border:1px solid #6d28d9;text-align:center;display:none;box-shadow:0 8px 30px rgba(109,40,217,0.2);}
.compat-result.show{display:block;}
.compat-percent{font-size:68px;font-weight:900;background:linear-gradient(135deg,#f0d060,#e0b830);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;}
.compat-verdict{font-size:17px;font-weight:700;margin:10px 0 6px;}
.compat-detail{font-size:13px;color:#a888d4;line-height:1.7;}
.compat-categories{display:flex;gap:10px;margin-top:18px;}
.compat-cat{flex:1;background:rgba(139,92,246,0.08);border-radius:14px;padding:14px 8px;text-align:center;border:1px solid #2a1550;}
.cat-name{font-size:11px;color:#7858a0;margin-bottom:4px;text-transform:uppercase;letter-spacing:1px;}
.cat-score{font-size:20px;font-weight:800;color:#f0d060;}
.compat-section{text-align:left;margin-top:18px;background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.15);border-radius:14px;padding:14px 16px;}
.compat-section-title{font-size:12px;font-weight:800;color:#a78bfa;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
.compat-list{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:7px;}
.compat-list li{font-size:13px;color:#c0a8e0;line-height:1.6;}
.compat-conclusion{background:rgba(240,208,96,.05);border-color:rgba(240,208,96,.2);}
.compat-conclusion .compat-section-title{color:#f0d060;}
.compat-conclusion #compat-conclusion{font-size:13px;color:#e0c870;line-height:1.7;font-style:italic;}



/* PWA INSTALL PROMPT */
#pwa-install-banner{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(120px);width:calc(100% - 32px);max-width:398px;background:linear-gradient(135deg,#1e0845,#350f70);border:1px solid #5a2d9e;border-radius:20px;padding:16px 18px;display:flex;align-items:center;gap:14px;z-index:500;box-shadow:0 8px 32px rgba(0,0,0,0.6);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);pointer-events:none;opacity:0;}
#pwa-install-banner.show{transform:translateX(-50%) translateY(0);pointer-events:all;opacity:1;}
.pib-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#9d6ff0,#6d28d9);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;box-shadow:0 4px 14px rgba(109,40,217,0.5);}
.pib-text{flex:1;}
.pib-title{font-size:14px;font-weight:700;color:#fff;}
.pib-sub{font-size:12px;color:#b898e0;margin-top:2px;line-height:1.4;}
.pib-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
.pib-install{background:linear-gradient(135deg,#9d6ff0,#6d28d9);border:none;color:#fff;font-size:12px;font-weight:700;padding:8px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;}
.pib-dismiss{background:transparent;border:none;color:#7858a0;font-size:11px;cursor:pointer;text-align:center;padding:2px;}

/* iOS INSTALL HINT */
#ios-install-hint{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(120px);width:calc(100% - 32px);max-width:398px;background:linear-gradient(135deg,#1e0845,#350f70);border:1px solid #5a2d9e;border-radius:20px;padding:18px 20px;z-index:500;box-shadow:0 8px 32px rgba(0,0,0,0.6);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);pointer-events:none;opacity:0;}
#ios-install-hint.show{transform:translateX(-50%) translateY(0);pointer-events:all;opacity:1;}
.iih-close{position:absolute;top:12px;right:14px;background:none;border:none;color:#7858a0;font-size:18px;cursor:pointer;}
.iih-title{font-size:15px;font-weight:700;margin-bottom:8px;}
.iih-step{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px;color:#b898e0;}
.iih-step span:first-child{font-size:20px;width:28px;text-align:center;}
.iih-arrow{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #350f70;}


/* SCREEN TRANSITIONS */
/* opacity flash removed — screens appear instantly */
.screen{opacity:1;}
.screen.active{opacity:1;}

/* CARD PRESS EFFECT */
.feature-card:active,.bnav-item:active,.tnav-item:active,.btn-primary:active,.sign-option:active{transform:scale(0.96)!important;transition:transform 0.1s ease!important;}
.reading-card:active,.prof-item:active{transform:scale(0.98);}

/* SKELETON LOADER */
.skeleton{background:linear-gradient(90deg,#0f0528 25%,#1e0a40 50%,#0f0528 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* PULSE BADGE */
@keyframes pulse-badge{0%,100%{box-shadow:0 0 0 0 rgba(240,208,96,0.5);}50%{box-shadow:0 0 0 5px rgba(240,208,96,0);}}
.tnav-badge{animation:pulse-badge 2s infinite;}

/* FLOAT ANIMATION */
@keyframes float2{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.03);}}

/* SHARE BUTTON */
.share-btn{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#25d366,#128c7e);border:none;color:#fff;font-size:13px;font-weight:700;padding:10px 18px;border-radius:50px;cursor:pointer;margin:12px 20px 0;width:calc(100% - 40px);justify-content:center;box-shadow:0 3px 12px rgba(37,211,102,0.35);}
.share-btn:active{transform:scale(0.97);}
.result-share-card{position:relative;overflow:hidden;border-radius:24px;padding:18px;margin:16px 0 12px;background:radial-gradient(circle at 84% 4%,rgba(240,208,96,.3),transparent 32%),radial-gradient(circle at 0% 100%,rgba(139,92,246,.32),transparent 42%),linear-gradient(160deg,#16051f,#070213 72%);border:1px solid rgba(240,208,96,.3);box-shadow:0 20px 46px rgba(0,0,0,.34),0 0 26px rgba(139,92,246,.16),inset 0 1px 0 rgba(255,255,255,.07);}
.result-share-card:before{content:'✦';position:absolute;right:18px;top:14px;color:rgba(240,208,96,.5);font-size:32px;text-shadow:0 0 18px rgba(240,208,96,.55);}
.result-share-feature{font-size:10px;font-weight:900;color:#f0d060;text-transform:uppercase;letter-spacing:1.8px;margin-bottom:8px;}
.result-share-headline{font-size:21px;font-weight:950;color:#fff;line-height:1.18;margin-bottom:12px;padding-right:34px;text-shadow:0 0 18px rgba(157,111,240,.22);}
.result-share-block{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:15px;padding:12px;margin-top:9px;}
.result-share-label{font-size:10px;font-weight:900;color:#9d6ff0;text-transform:uppercase;letter-spacing:1.3px;margin-bottom:5px;}
.result-share-text{font-size:12px;line-height:1.55;color:#d7c8f2;}
.result-share-advice .result-share-label{color:#f0d060;}
.result-share-btn{width:100%;border:none;border-radius:16px;padding:14px 16px;margin-bottom:12px;background:linear-gradient(135deg,#f0d060,#9d6ff0 55%,#6d28d9);color:#fff;font-size:14px;font-weight:950;cursor:pointer;box-shadow:0 12px 28px rgba(139,92,246,.3),0 0 18px rgba(240,208,96,.12);}
.result-share-btn:active{transform:scale(.985);filter:brightness(1.06);}

/* MOON SCREEN */
.moon-phase-orb{width:160px;height:160px;border-radius:50%;margin:0 auto 20px;position:relative;display:flex;align-items:center;justify-content:center;font-size:80px;}
.moon-card{background:linear-gradient(160deg,#0f0528,#07021a);border-radius:18px;padding:20px;border:1px solid #2a1550;margin-bottom:14px;}
.moon-card-title{font-size:11px;font-weight:800;color:#8b5cf6;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;}
.moon-phase-bar{height:8px;border-radius:4px;background:rgba(255,255,255,0.06);overflow:hidden;margin-top:8px;}
.moon-phase-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#8b5cf6,#f0d060);}
.moon-sign-chip{display:inline-block;background:rgba(139,92,246,0.15);border:1px solid #3a2060;border-radius:20px;padding:4px 12px;font-size:12px;color:#c0a8e0;margin:4px;}

/* BIRTH CHART */
.chart-wheel{width:220px;height:220px;margin:0 auto 24px;position:relative;}
.chart-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(139,92,246,0.25);}
.chart-ring.outer{inset:0;}
.chart-ring.mid{inset:30px;border-color:rgba(240,208,96,0.2);}
.chart-ring.inner{inset:60px;background:radial-gradient(#1a0840,#04010f);border-color:rgba(139,92,246,0.4);}
.chart-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:36px;}
.planet-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.planet-row:last-child{border-bottom:none;}
.planet-glyph{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.big-three-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.big-three-icon svg{width:26px;height:26px;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.planet-name{font-size:13px;font-weight:600;flex:1;}
.planet-placement{font-size:13px;color:#f0d060;font-weight:700;}
.planet-desc{font-size:11px;color:#7858a0;margin-top:1px;}
.bc-row-copy{flex:1;min-width:0;}
.planet-placement{
  max-width:118px;
  text-align:right;
  line-height:1.25;
}
.house-grid{display:flex;flex-direction:column;margin-top:6px;}
.house-grid .planet-row{padding:12px 0;}
.house-grid .planet-row:last-child{border-bottom:none;}
.house-num{font-size:13px;font-weight:700;color:#f4efff;line-height:1.2;}
.house-name{font-size:11px;color:#7858a0;margin-top:2px;line-height:1.35;}

/* ── Birth Chart Deep Reading Card ──────────────────────────────────────────── */
.bc-deep-card{background:linear-gradient(145deg,rgba(30,10,65,0.97),rgba(18,5,42,0.98));border:1px solid rgba(229,197,106,0.28);box-shadow:0 0 28px rgba(139,92,246,0.14),0 0 12px rgba(229,197,106,0.06);padding:20px;}
.bc-deep-title{font-size:15px;font-weight:800;letter-spacing:0.08em;color:rgba(229,197,106,0.95);text-transform:uppercase;margin-bottom:10px;}
.bc-deep-subtitle{font-size:13px;color:rgba(200,180,255,0.75);line-height:1.6;margin-bottom:18px;}
.bc-deep-btn{width:100%;padding:14px 20px;border-radius:14px;border:none;background:linear-gradient(135deg,rgba(139,92,246,0.90),rgba(109,62,216,0.95));color:rgba(240,215,140,0.98);font-size:14px;font-weight:700;letter-spacing:0.05em;cursor:pointer;box-shadow:0 4px 18px rgba(139,92,246,0.35);}
.bc-deep-btn:disabled{opacity:0.5;cursor:not-allowed;}
.bc-deep-loading-spinner{width:32px;height:32px;border:3px solid rgba(139,92,246,0.25);border-top-color:rgba(229,197,106,0.80);border-radius:50%;animation:spin 0.9s linear infinite;}
.bc-deep-loading-msg{font-size:13px;color:rgba(200,180,255,0.70);text-align:center;}
.bc-deep-reading-text{font-size:14px;color:rgba(225,210,255,0.88);line-height:1.75;margin:0;padding-top:8px;white-space:pre-wrap;}

/* ── Planet Placement Table ────────────────────────────────────────────────── */
.planet-table-card{border-radius:18px;overflow:hidden;border:1px solid rgba(139,92,246,0.24);width:100%;border-collapse:collapse;display:table;}
.planet-table-card td{vertical-align:middle;border-bottom:1px solid rgba(139,92,246,0.14);}
.planet-table-card tr:last-child td{border-bottom:none;}
.planet-table-sign{padding:10px 6px 10px 12px;border-right:1px solid rgba(139,92,246,0.16);white-space:nowrap;}
.planet-table-sign-text{color:rgba(232,191,90,0.95);font-size:10px;font-weight:800;letter-spacing:0.13em;text-transform:uppercase;line-height:1.35;}
.planet-table-planet{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 8px 6px 10px;line-height:1;white-space:nowrap;border-right:1px solid rgba(139,92,246,0.16);}
.planet-table-glyph{width:30px;min-width:30px;height:30px;display:inline-grid;place-items:center;font-size:25px;line-height:30px;overflow:visible;flex-shrink:0;font-family:"Arial Unicode MS","Segoe UI Symbol",system-ui,sans-serif;}
.planet-table-glyph.venus{transform:translateY(3px);}.planet-table-glyph.mars{transform:translateY(2px);}
.planet-table-pname{display:inline-flex;align-items:center;font-size:13px;color:rgba(235,225,255,0.90);font-weight:500;line-height:1.1;}
.planet-table-deg{font-size:11px;color:rgba(180,150,255,0.50);margin-left:2px;line-height:1;}
.planet-table-house{text-align:center;padding:4px 8px;min-width:44px;}
.planet-table-house-num{color:rgba(232,191,90,0.92);font-size:24px;font-weight:800;line-height:1;}

/* NUMEROLOGY */
.num-screen-inner{padding-bottom:calc(148px + env(safe-area-inset-bottom)) !important;}
.num-circle{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2c1350 0%,#1a0a39 58%,#120627 100%);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;box-shadow:0 0 26px rgba(139,92,246,.24),0 0 34px rgba(240,208,96,.08);flex-direction:column;gap:4px;overflow:hidden;position:relative;border:1.5px solid rgba(240,208,96,.22);animation:numCirclePulse 5.2s ease-in-out infinite;}
.num-circle::before{content:'';position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(240,208,96,.26);pointer-events:none;}
.num-circle::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(167,139,250,.14);pointer-events:none;}
.num-orbit{position:absolute;inset:2px;border-radius:50%;border:1px dashed rgba(240,208,96,.18);opacity:.7;transform:rotate(-12deg);pointer-events:none;animation:numOrbitSpin 16s linear infinite;}
.num-star{position:absolute;width:5px;height:5px;border-radius:50%;background:#f6e08a;box-shadow:0 0 8px rgba(240,208,96,.55);opacity:.7;animation:numStarFloat 3.4s ease-in-out infinite;}
.num-star-1{top:18px;right:18px;animation-delay:.1s;}
.num-star-2{left:16px;bottom:26px;width:4px;height:4px;animation-delay:1.2s;}
.num-star-3{right:26px;bottom:14px;width:3px;height:3px;animation-delay:2.1s;}
.num-big{font-size:56px;font-weight:900;color:#fff;line-height:1;position:relative;z-index:1;}
.num-label{font-size:11px;color:rgba(255,255,255,0.74);text-transform:uppercase;letter-spacing:2px;position:relative;z-index:1;}
.num-card{background:linear-gradient(160deg,#0f0528,#07021a);border-radius:18px;padding:22px 20px;border:1px solid #2a1550;margin-bottom:12px;box-shadow:0 8px 24px rgba(0,0,0,.22);position:relative;overflow:hidden;}
.num-card::before{content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);}
.num-card-title{font-size:13px;font-weight:800;color:#f0d060;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;line-height:1.25;}
.num-card-body{font-size:14px;color:#c0a8e0;line-height:1.75;}
.num-trait-row{display:grid;gap:10px;margin-top:4px;}
.num-trait-group{border:1px solid rgba(139,92,246,.24);background:rgba(139,92,246,.07);border-radius:14px;padding:14px;}
.num-trait-group:last-child{background:rgba(139,92,246,.04);border-color:rgba(139,92,246,.16);}
.num-trait-group-title{font-size:10px;color:#f0d060;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:9px;}
.num-trait-chips{display:flex;flex-wrap:wrap;gap:7px;}
.num-trait{background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.2);border-radius:20px;padding:6px 13px;font-size:12px;color:#d7c9f1;font-weight:700;}
.num-trait-group:first-child .num-trait{background:linear-gradient(135deg,rgba(195,163,255,.18),rgba(139,92,246,.16));border-color:rgba(195,163,255,.28);color:#f4edff;}
.num-trait-group:last-child .num-trait{background:rgba(139,92,246,.06);border-color:rgba(139,92,246,.12);color:#b79fd9;}
.num-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;}
.num-profile-box{text-align:center;background:rgba(139,92,246,0.06);border:1px solid #1e1040;border-radius:14px;padding:18px 12px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.num-profile-box:active{transform:scale(.98);box-shadow:0 0 18px rgba(240,208,96,.12);border-color:rgba(240,208,96,.24);}
.num-profile-value{font-size:28px;font-weight:900;color:#f0d060;line-height:1;}
.num-profile-label{font-size:11px;color:#8f72bd;margin-top:7px;font-weight:700;letter-spacing:0.3px;}
.num-profile-desc{font-size:11px;color:#7058a0;margin-top:4px;line-height:1.35;}
.num-tabs{display:flex;gap:8px;overflow-x:auto;padding:0 0 20px;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:24px;}
.num-tabs::-webkit-scrollbar{display:none;}
.num-tab{flex-shrink:0;padding:9px 18px;border-radius:20px;border:1px solid rgba(139,92,246,0.2);background:rgba(139,92,246,0.06);color:#7858a0;font-size:13px;font-weight:700;cursor:pointer;transition:background 0.18s ease,border-color 0.18s ease,color 0.18s ease;white-space:nowrap;outline:none;-webkit-tap-highlight-color:transparent;}
.num-tab.active{background:linear-gradient(135deg,rgba(74,31,120,.95) 0%,rgba(92,49,145,.95) 52%,rgba(121,93,176,.95) 100%);border-color:rgba(240,208,96,.38);color:#f3e8ca;font-weight:800;box-shadow:none;position:relative;overflow:hidden;}
.num-tab.active::before{content:'';position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(180deg,rgba(255,248,220,.14) 0%,rgba(255,248,220,.05) 36%,rgba(255,255,255,0) 48%);pointer-events:none;}
.num-tab:not(.active):hover{background:rgba(139,92,246,0.12);color:#9878c0;}
.num-panel{display:none;}
.num-panel.num-panel-active{display:block;animation:numFadeIn 0.42s ease forwards;}
.num-panel.num-panel-exit{display:block;animation:numFadeOut 0.22s ease forwards;pointer-events:none;}
@keyframes numFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes numFadeOut{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-6px);}}
.num-ov-path{font-size:18px;font-weight:900;background:linear-gradient(135deg,#f0d060,#fff5cc,#d4a830);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;line-height:1.3;}
.num-ov-guide{font-size:14.5px;color:#c0a8e0;line-height:1.7;}
.num-insight-list{display:grid;gap:10px;margin:0 0 14px;}
.num-insight-row{display:grid;grid-template-columns:minmax(88px,110px) minmax(0,1fr);align-items:start;gap:6px 14px;padding:12px 12px;border-radius:12px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.14);}
.num-insight-label{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#9d84c8;flex-shrink:0;}
.num-insight-value{font-size:13px;font-weight:700;color:#f0e8ff;text-align:right;line-height:1.35;}
.num-insight-meaning{grid-column:2 / 3;font-size:11px;line-height:1.45;color:#8f72bd;text-align:right;}
.num-card-overview{border-color:rgba(240,208,96,.18);}
.num-card-overview .num-card-title,.num-card-overview .num-insight-label{color:#f0d060;}
.num-card-traits{border-color:rgba(190,160,255,.18);}
.num-card-traits .num-card-title{color:#d7b8ff;}
.num-card-love{border-color:rgba(244,152,193,.18);}
.num-card-love .num-card-title{color:#f4b4d1;}
.num-card-career{border-color:rgba(129,140,248,.18);}
.num-card-career .num-card-title{color:#b8c7ff;}
.num-card-numbers{border-color:rgba(240,208,96,.18);}
.num-love-header{display:flex;align-items:center;gap:8px;margin:-2px 0 12px;}
.num-love-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(244,152,193,.12);border:1px solid rgba(244,152,193,.22);color:#f4b4d1;font-size:13px;line-height:1;}
.num-love-kicker{font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#dca0bf;}
.num-keyword-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px;}
.num-keyword-chip{padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.2px;background:rgba(129,140,248,.12);border:1px solid rgba(129,140,248,.22);color:#dbe1ff;}
.num-tip-card{margin-top:18px;padding:16px 18px;border-radius:16px;background:linear-gradient(160deg,rgba(23,9,52,.96),rgba(9,3,28,.98));border:1px solid rgba(240,208,96,.16);box-shadow:0 8px 24px rgba(0,0,0,.2);}
.num-tip-label{font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#f0d060;margin-bottom:8px;}
.num-tip-text{font-size:13px;line-height:1.65;color:#d4c3ef;}
@keyframes numStarFloat{0%,100%{transform:translateY(0) scale(1);opacity:.65;}50%{transform:translateY(-3px) scale(1.08);opacity:1;}}
@keyframes numOrbitSpin{from{transform:rotate(-12deg);}to{transform:rotate(348deg);}}
@keyframes numCirclePulse{0%,100%{box-shadow:0 0 26px rgba(139,92,246,.24),0 0 34px rgba(240,208,96,.08);}50%{box-shadow:0 0 30px rgba(139,92,246,.3),0 0 42px rgba(240,208,96,.12);}}

/* NOTIFICATION PANEL */
.notif-panel{background:linear-gradient(160deg,#0f0528,#07021a);border-radius:18px;padding:20px;border:1px solid #2a1550;margin:0 20px 16px;}
.notif-panel-title{font-size:15px;font-weight:700;margin-bottom:14px;}
.notif-time-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.notif-time-label-wrap{display:flex;flex-direction:column;gap:2px;flex:1;}
.notif-time-label{font-size:14px;color:#e0d0ff;font-weight:600;}
.notif-time-hint{font-size:11px;color:#6b4fa0;line-height:1.4;}
.notif-time-input{background:rgba(139,92,246,0.1);border:1.5px solid #3a2060;border-radius:10px;color:#fff;font-size:16px;padding:8px 12px;width:110px;text-align:center;outline:none;}
.notif-toggle{position:relative;width:46px;height:26px;cursor:pointer;flex-shrink:0;}
.notif-toggle input{opacity:0;width:0;height:0;}
.notif-slider{position:absolute;inset:0;background:#1e1040;border-radius:26px;transition:0.3s;}
.notif-slider:before{content:'';position:absolute;width:20px;height:20px;left:3px;bottom:3px;background:#5a3d80;border-radius:50%;transition:0.3s;}
.notif-toggle input:checked+.notif-slider{background:linear-gradient(135deg,#9d6ff0,#6d28d9);}
.notif-toggle input:checked+.notif-slider:before{transform:translateX(20px);background:#fff;}

/* IMPROVED PAYWALL */
.pw-trial-badge{background:linear-gradient(135deg,#f0d060,#c9a830);color:#04010f;font-size:11px;font-weight:900;padding:4px 14px;border-radius:20px;letter-spacing:1px;display:inline-block;margin-bottom:14px;}
.pw-timer{font-size:28px;font-weight:900;color:#f0d060;letter-spacing:4px;margin:8px 0;font-variant-numeric:tabular-nums;}
.pw-plan-row{display:flex;gap:10px;margin:16px 0;}
.pw-plan{flex:1;border:2px solid #2a1550;border-radius:16px;padding:14px 10px;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;}
.pw-plan.selected{border-color:#9d6ff0;background:rgba(139,92,246,0.12);}
.pw-plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#f0d060,#c9a830);color:#04010f;font-size:9px;font-weight:900;padding:2px 10px;border-radius:10px;white-space:nowrap;}
.pw-plan-price{font-size:22px;font-weight:900;color:#fff;margin-top:6px;}
.pw-plan-period{font-size:11px;color:#9878c0;margin-top:2px;}
.pw-plan-save{font-size:11px;color:#34d399;font-weight:700;margin-top:4px;}
.pw-restore{background:none;border:none;color:#5a3d80;font-size:12px;cursor:pointer;margin-top:10px;text-decoration:underline;}


/* PERSISTENT TOP NAV */
#main-topnav{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:linear-gradient(180deg,rgba(7,2,26,.96),rgba(7,2,26,.72),rgba(7,2,26,0));backdrop-filter:blur(18px);border-bottom:none;display:flex;justify-content:flex-end;align-items:center;padding:44px 16px 10px;z-index:500;pointer-events:none;}
.top-menu-button{pointer-events:auto;display:flex;align-items:center;gap:7px;height:40px;padding:0 13px;border:1px solid rgba(139,92,246,.35);border-radius:999px;background:rgba(15,5,40,.86);color:#e8d0ff;box-shadow:0 8px 24px rgba(0,0,0,.28);cursor:pointer;}
.top-menu-button.active{border-color:#9d6ff0;box-shadow:0 0 18px rgba(139,92,246,.28);}
.top-menu-icon{font-size:18px;line-height:1;}
.top-menu-label{font-size:11px;font-weight:800;color:#c0a0f0;}
.tnav-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;opacity:0.5;transition:all 0.2s;padding:4px 8px;min-width:60px;position:relative;}
.tnav-item.active{opacity:1;}
.tnav-icon{font-size:20px;line-height:1;}
.tnav-label{font-size:10px;color:#c0a0f0;white-space:nowrap;}
.tnav-item.active .tnav-label{color:#9d6ff0;}
.tnav-badge{position:absolute;top:0px;right:6px;background:#f0d060;color:#04010f;font-size:9px;font-weight:800;padding:1px 5px;border-radius:8px;line-height:14px;}

/* ══ MAIN SCREEN PADDING SYSTEM ══
   Three groups:
   A) Home            → --screen-top-gap         (global navbar home mode)
   B) Section screens → --section-screen-top-gap  (global navbar section mode)
   C) Bare screens    → 0 or --bare-screen-top-gap on inner container
                        (no global navbar, own topbar or hero section handles top)
*/

/* A) Default: home + any other main-screen not overridden below */
.main-screen{
  padding-top:var(--screen-top-gap);
  padding-bottom:var(--screen-bottom-gap);
}

/* B) Section pages — global navbar in section mode (Explore, Birth Chart, etc.)
   The .section-header-mode class is toggled by JS on all SHARED_SECTION_SCREENS.
   !important needed: #features/#zodiac-all/#sign-detail have ID-level padding-top:0
   which beats class specificity. section-header-mode is NEVER on bare screens. */
.screen.main-screen.section-header-mode{
  padding-top:var(--section-screen-top-gap) !important;
}

/* C) Bare screens: no global navbar shown → remove screen-level top padding.
   Top spacing is handled by each screen's own section-topbar or inner container. */
#dream.main-screen,
#coffee.main-screen,
#hand.main-screen,
#profile.main-screen,
#privacy-policy.main-screen,
#terms-conditions.main-screen{
  padding-top:0;
}
/* Profile has no section-topbar — push content below DI via prof-header padding */
#profile.main-screen{
  padding-top:0;
}

/* Tarot is not .main-screen — give it the bare gap via padding-bottom at least */
#tarot{
  padding-bottom:var(--screen-bottom-gap);
}
/* Tarot hide-bottom-nav state */
body.tarot-hide-bottom-nav #tarot{
  padding-bottom:var(--safe-bottom);
}

/* BOTTOM NAV */
.bottom-nav {
  position: fixed;
  bottom: var(--bottom-nav-offset);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 398px;
  background: linear-gradient(
    160deg,
    rgba(120, 60, 220, 0.18) 0%,
    rgba(10, 4, 28, 0.38) 50%,
    rgba(80, 20, 160, 0.16) 100%
  );
  backdrop-filter: blur(40px) saturate(2.2) brightness(1.08);
  -webkit-backdrop-filter: blur(40px) saturate(2.2) brightness(1.08);
  border-radius: 40px;
  border: 1px solid rgba(180, 140, 255, 0.18);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 0 24px rgba(100, 40, 200, 0.12);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 5px 8px;
  z-index: 100;
  overflow: hidden;
}
/* Reflective top highlight — polished glass effect */
.bottom-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  border-radius: 50%;
  pointer-events: none;
}
/* Soft inner light sweep */
.bottom-nav::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  border-radius: 40px 40px 0 0;
  pointer-events: none;
}
.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  padding: 6px 10px;
  border-radius: 28px;
  min-width: 0;
  flex: 1;
  position: relative;
}
.bnav-item.active {
  opacity: 1;
  background: rgba(139, 92, 246, 0.22);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.bi-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.bi-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #c0a0f0;
  text-align: center;
  line-height: 1.1;
  max-width: 64px;
  min-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.bnav-dream .bi-label { font-size: 9.5px; }
.bnav-item.active .bi-label { color: #e0ccff; }

/* FLOATING AI CHAT BUTTON */
/* Hidden — re-enable for Pro users by removing this line */
#floating-chat-btn{display:none!important;}
.floating-chat-btn{
  position:fixed;
  left:auto;
  right:max(14px, calc((100vw - min(100vw, 430px)) / 2 + 14px));
  bottom:96px;
  width:58px;
  height:58px;
  border-radius:50%;
  border:1px solid rgba(240,208,96,0.42);
  background:radial-gradient(circle at 35% 25%,#f0d060 0%,#9d6ff0 40%,#3d1a6e 72%,#09021c 100%);
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.45),0 0 24px rgba(139,92,246,0.45);
  z-index:650;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
body.navs-on .floating-chat-btn{display:flex;}
body.navs-on.chat-active .floating-chat-btn{display:none;}
.floating-chat-btn.dragging{cursor:grabbing;transition:none;}
.floating-chat-icon{font-size:26px;line-height:1;pointer-events:none;}
.floating-chat-pulse{position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(240,208,96,0.28);animation:floatChatPulse 2.4s ease-in-out infinite;pointer-events:none;}
@keyframes floatChatPulse{0%,100%{transform:scale(1);opacity:.55;}50%{transform:scale(1.16);opacity:.15;}}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);display:none;justify-content:flex-end;align-items:flex-end;z-index:900;}
.modal-overlay.show{display:flex;}
.modal-sheet{width:100%;max-width:430px;background:#0a0225;border-radius:26px 26px 0 0;padding:22px;border:1px solid #2a1550;border-bottom:none;animation:slideUp 0.3s ease;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal-handle{width:36px;height:4px;background:#3a2060;border-radius:2px;margin:0 auto 16px;}
.modal-title{font-size:18px;font-weight:800;text-align:center;margin-bottom:16px;}
.signs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-height:340px;overflow-y:auto;padding-bottom:20px;}
.sign-option{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:14px;background:rgba(255,255,255,0.03);border:1.5px solid #2a1550;cursor:pointer;transition:all 0.2s;}
.sign-option:hover,.sign-option.selected{border-color:#8b5cf6;background:rgba(139,92,246,0.15);}
.so-emoji{font-size:28px;}
.so-name{font-size:11px;color:#b898e0;}

/* READY SCREEN */
/* ══ OB STEP 8 — READY ══ */
#ob-ready{ background:radial-gradient(ellipse at 50% 0%,#1a0545 0%,#04010f 60%); overflow-x:hidden; }
.ob-ready-screen{ position:relative;overflow:hidden;overflow-x:hidden;box-sizing:border-box; }

/* Stars background */
.ob-ready-stars{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 15%, rgba(212,175,55,.7) 0%, transparent 100%),
    radial-gradient(1px   1px at 78% 8%,  rgba(167,139,250,.6) 0%, transparent 100%),
    radial-gradient(2px   2px at 55% 25%, rgba(212,175,55,.5) 0%, transparent 100%),
    radial-gradient(1px   1px at 88% 55%, rgba(167,139,250,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 70%, rgba(167,139,250,.4) 0%, transparent 100%),
    radial-gradient(1px   1px at 65% 78%, rgba(212,175,55,.4) 0%, transparent 100%),
    radial-gradient(1px   1px at 35% 90%, rgba(167,139,250,.5) 0%, transparent 100%),
    radial-gradient(2px   2px at 92% 30%, rgba(212,175,55,.35) 0%, transparent 100%),
    radial-gradient(1px   1px at 8%  45%, rgba(167,139,250,.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 5%, rgba(255,255,255,.5) 0%, transparent 100%);
  animation:readyStarsPulse 4s ease-in-out infinite alternate;
}
@keyframes readyStarsPulse{
  0%  { opacity:.6; }
  100%{ opacity:1;  }
}

/* Layout */
.ob-ready-body{
  position:relative;z-index:1;
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;
  width:100%;
  padding:8px 24px 16px;
  gap:22px;
  text-align:center;
  box-sizing:border-box;
}
.ob-ready-header{
  position:relative;
  z-index:1;
}
.ob-ready-footer{
  position:relative;
  z-index:1;
  align-items:center;
}

/* Text block */
.ob-ready-top{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:none;
  box-sizing:border-box;
}
.ob-ready-label{
  font-size:11px;color:#6b4fa0;letter-spacing:2.5px;text-transform:uppercase;
}
.ob-ready-headline{
  font-size:28px;font-weight:900;line-height:1.2;color:#ede9fe;
}
#ready-name{
  background:linear-gradient(135deg,#f0d060,#c9a830);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.ob-ready-suffix{ color:#ede9fe;-webkit-text-fill-color:#ede9fe; }
.ob-ready-sub{ font-size:13px;color:#9878c0;line-height:1.7;max-width:none;margin:0; }

/* Zodiac card */
.ob-ready-card{
  position:relative;
  background:linear-gradient(160deg,#160935,#0a0320);
  border-radius:22px;padding:24px 32px;
  border:1px solid rgba(139,92,246,.3);
  text-align:center;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.ob-ready-card-glow{
  position:absolute;inset:-1px;border-radius:22px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(139,92,246,.2) 0%, transparent 60%);
  animation:readyCardGlow 3s ease-in-out infinite alternate;
}
@keyframes readyCardGlow{
  0%  { opacity:.5; }
  100%{ opacity:1;  }
}
.ob-ready-emoji{
  font-size:0;/* icon via innerHTML */
  filter:drop-shadow(0 0 16px rgba(139,92,246,.6));
  margin-bottom:8px;
}
.ob-ready-sign-name{ font-size:22px;font-weight:900;color:#ede9fe;margin-bottom:6px; }
.ob-ready-traits{ font-size:13px;color:#c4b5fd;letter-spacing:.3px;margin-bottom:6px; }
.ob-ready-sign-sub{ font-size:12px;color:#7c5cbf;line-height:1.55;font-style:italic; }

/* CTA */
.ob-ready-cta{
  width:100%;
  animation:readyCtaPulse 2.8s ease-in-out infinite alternate;
}
@keyframes readyCtaPulse{
  0%  { box-shadow:0 0 16px rgba(139,92,246,.35),0 4px 20px rgba(109,40,217,.3); }
  100%{ box-shadow:0 0 32px rgba(139,92,246,.65),0 4px 28px rgba(109,40,217,.5); }
}
.ob-ready-reassure{
  width:100%;
  font-size:11px;
  color:rgba(139,92,246,.4);
  letter-spacing:.3px;
  text-align:center;
}

/* Entrance animations */
.ready-anim-1{ opacity:0;animation:readySlideUp .5s ease forwards .12s; }
.ready-anim-2{ opacity:0;animation:readySlideUp .6s ease forwards .32s; }
.ready-anim-3{ opacity:0;animation:readySlideUp .6s ease forwards .58s; }
.ready-anim-4{ opacity:0;animation:readySlideUp .5s ease forwards .84s; }
.ready-anim-5{ opacity:0;animation:readyRise   .7s cubic-bezier(.34,1.56,.64,1) forwards 1.05s; }
.ready-anim-6{ opacity:0;animation:readySlideUp .5s ease forwards 1.4s; }
@keyframes readySlideUp{
  0%  { opacity:0;transform:translateY(18px); }
  100%{ opacity:1;transform:translateY(0);    }
}
@keyframes readyRise{
  0%  { opacity:0;transform:translateY(30px) scale(.94); }
  100%{ opacity:1;transform:translateY(0)    scale(1);   }
}

/* TOAST */
#toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(16px);background:linear-gradient(135deg,#1e0845,#350f70);color:#e8d0ff;padding:12px 22px;border-radius:50px;font-size:13px;font-weight:600;opacity:0;transition:all 0.3s;z-index:300;white-space:nowrap;pointer-events:none;border:1px solid #5a2d9e;}

/* FADE */
.fade-in{animation:fadeIn 0.4s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
::-webkit-scrollbar{width:0;}

/* ══ TAROT SCREEN ══ */
#tarot{background:#04010f;overflow:hidden;}
#tarot.active{display:flex!important;flex-direction:column;}

/* ── Intro / Category State ── */
.tarot-intro{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:var(--bare-screen-top-gap) 24px 24px;text-align:center;}
.tarot-intro-back{position:absolute;top:20px;left:20px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;color:#fff;}
/* Hero icon wrap */
.tarot-hero-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;}
.tarot-icon-glow{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,0.35) 0%,rgba(139,92,246,0) 70%);animation:tarotGlowBreath 3s ease-in-out infinite;}
.tarot-intro-icon{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(139,92,246,0.6));border-radius:16px;animation:tarotIconFloat 3.5s ease-in-out infinite;position:relative;z-index:1;}
@keyframes tarotIconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes tarotGlowBreath{0%,100%{opacity:0.6;transform:scale(1);}50%{opacity:1;transform:scale(1.18);}}
.tarot-intro-title{font-size:28px;font-weight:900;background:linear-gradient(135deg,#f0d060,#fff5cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;}
.tarot-intro-sub{font-size:13px;color:#b898e0;line-height:1.65;max-width:260px;margin-bottom:6px;}
.tarot-trust-line{font-size:10.5px;color:#7858a0;letter-spacing:0.5px;margin-bottom:26px;}
.tarot-cat-label{font-size:10px;font-weight:700;color:#6848a0;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:14px;}
.tarot-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:340px;}
.tarot-cat-btn{background:linear-gradient(160deg,rgba(26,8,64,0.85),rgba(10,2,32,0.65));border:1.5px solid rgba(139,92,246,0.22);border-radius:18px;padding:16px 12px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color 0.25s,transform 0.18s,box-shadow 0.25s;position:relative;overflow:hidden;}
.tarot-cat-btn::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(240,208,96,0.08) 0%,rgba(240,208,96,0) 60%);opacity:0;transition:opacity 0.3s;}
.tarot-cat-btn.tapped{transform:scale(1.04);border-color:rgba(240,208,96,0.7);box-shadow:0 0 18px rgba(240,208,96,0.25),0 0 6px rgba(139,92,246,0.3);animation:tarotCardGlowPulse 0.55s ease-out;}
.tarot-cat-btn.tapped::after{opacity:1;}
@keyframes tarotCardGlowPulse{0%{box-shadow:0 0 0 rgba(240,208,96,0);}40%{box-shadow:0 0 22px rgba(240,208,96,0.4),0 0 8px rgba(139,92,246,0.35);}100%{box-shadow:0 0 12px rgba(240,208,96,0.15);}}
/* shimmer sweep on tap */
.tarot-cat-btn .tcat-shimmer{position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,220,80,0.18),transparent);transform:skewX(-15deg);pointer-events:none;transition:none;}
.tarot-cat-btn.tapped .tcat-shimmer{animation:tarotShimmerSweep 0.55s ease-out;}
@keyframes tarotShimmerSweep{0%{left:-100%;}100%{left:160%;}}
.tarot-cat-btn:active{transform:scale(0.97);}
.tarot-cat-icon{font-size:24px;color:#f0d060;}.tarot-cat-icon img{width:34px;height:34px;object-fit:contain;}
.tarot-cat-name{font-size:16px;font-weight:600;color:#e8d8ff;margin-bottom:-2px;margin-top:2px;}
.tarot-cat-desc{font-size:10px;color:#7858a0;line-height:1.3;}

/* ── Pick State ── */
.tarot-pick-state{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.tarot-pick-content{flex:1;overflow-y:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;}
.tarot-pick-header{display:flex;align-items:center;gap:12px;padding:var(--bare-screen-top-gap) 16px 16px;}
.tarot-pick-back{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;color:#fff;flex-shrink:0;}
.tarot-pick-title{font-size:11px;font-weight:600;color:#8868b0;letter-spacing:0.3px;margin-bottom:2px;}
.tarot-pick-category{font-size:22px;font-weight:900;background:linear-gradient(135deg,#f0d060,#fff5cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

/* ── Slots (all same size) ── */
.tarot-slots-wrap{padding:6px 14px 0;}
.tarot-spread-row{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start;}
.tarot-slot-wrap{display:flex;flex-direction:column;align-items:center;flex:1;}
.tarot-slot-badge{font-size:8px;font-weight:800;color:#9d6ff0;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:5px;text-align:center;}
.tarot-cotd-row{display:flex;justify-content:center;margin-bottom:8px;}
.tarot-cotd-row .tarot-slot-wrap{flex:none;width:calc((100% - 16px) / 3);}
.tarot-slot{background:linear-gradient(160deg,rgba(26,8,64,0.65),rgba(10,2,32,0.5));border:1px solid rgba(139,92,246,0.18);border-radius:14px;padding:8px;height:230px;display:flex;flex-direction:column;align-items:stretch;width:100%;overflow:hidden;box-sizing:border-box;}
.tarot-slot.filled{border:none;background:transparent;padding:0;border-radius:0;overflow:visible;height:auto;animation:fadeIn 0.4s ease;}
.tarot-slot.filled .tarot-slot-flip-wrap{flex:none;}
.tarot-slot.filled .tarot-slot-flip-inner{height:auto;position:static;}
.tarot-slot.filled .tarot-slot-flip-back,.tarot-slot.filled .tarot-slot-flip-front{position:static;inset:auto;}
.tarot-slot.filled img{width:100%;height:auto;object-fit:unset;display:block;}
.tarot-slot-empty{flex:1;display:flex;align-items:center;justify-content:center;}
.tarot-slot-empty-icon{font-size:16px;color:rgba(139,92,246,0.22);animation:pulse 2s ease-in-out infinite;}
.tarot-slot-filled{display:flex;flex-direction:column;align-items:center;gap:5px;}
.tarot-slot-img{width:100%;height:100%;object-fit:contain;border-radius:0;box-shadow:none;}
.tarot-slot-name{font-size:9px;font-weight:800;color:#f0d060;text-align:center;}
.tarot-slot-meaning{font-size:8px;color:#c0a8e0;text-align:center;line-height:1.35;padding:0 2px;}

/* ── Summary ── */
.tarot-summary-wrap{margin:6px 14px 16px;background:linear-gradient(160deg,#110535,#07021a);border:1px solid rgba(139,92,246,0.22);border-radius:18px;padding:16px;animation:fadeIn 0.5s ease;}
.tarot-summary-title{font-size:13px;font-weight:800;color:#f0d060;margin-bottom:10px;}
.tarot-summary-text{font-size:12px;color:#d0b8f0;line-height:1.8;}
.tarot-new-reading-btn{width:100%;border:none;border-radius:12px;padding:13px;margin-top:14px;background:linear-gradient(135deg,#9d6ff0,#6d28d9);color:#fff;font-size:14px;font-weight:700;cursor:pointer;}
.tarot-new-reading-btn:active{transform:scale(0.98);}

/* ── Deck Preview State (face-up grid) ── */
.tarot-deck-preview{flex:1;overflow-y:auto;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;}
.tdp-header{display:flex;align-items:center;gap:12px;padding:var(--bare-screen-top-gap) 16px 12px;flex-shrink:0;}
.tdp-back{flex-shrink:0;}
.tdp-label{font-size:11px;font-weight:600;color:#8868b0;letter-spacing:0.3px;margin-bottom:2px;}
.tdp-category{font-size:22px;font-weight:900;background:linear-gradient(135deg,#f0d060,#fff5cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.tdp-hint{text-align:center;font-size:10px;color:rgba(139,92,246,0.45);letter-spacing:1px;margin-bottom:12px;flex-shrink:0;}

/* Grid: 6-6-6-4 */
.tdp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:0 10px 24px;align-content:start;}

/* Each preview card */
.tdp-card{animation:tdpDrop 0.5s cubic-bezier(0.22,1,0.36,1) both;overflow:visible;}
@keyframes tdpDrop{from{opacity:0;transform:translateY(-40px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}}

.tdp-card-inner{position:relative;width:100%;padding-bottom:165%;}
.tdp-card-front,.tdp-card-back{position:absolute;inset:0;border-radius:0;overflow:visible;display:flex;flex-direction:column;align-items:center;transition:transform 0.18s ease-in, opacity 0.18s ease-in;}
.tdp-card-back{display:none;}
/* scaleX flip phases controlled by JS */
.tdp-card-inner.flip-shrink .tdp-card-front{transform:scaleX(0);opacity:0.4;}
.tdp-card-inner.flip-grow .tdp-card-back{transform:scaleX(1);opacity:1;}
.tdp-card-inner.flip-grow .tdp-card-back{display:flex;}
.tdp-card-inner.flip-grow .tdp-card-front{display:none;}

.tdp-card-img{width:100%;height:auto;display:block;flex-shrink:0;}
.tdp-card-name{font-size:6px;font-weight:700;color:#e8d8ff;text-align:center;padding:2px 2px 1px;line-height:1.2;}
.tdp-card-keyword{font-size:5px;color:#f0d060;text-align:center;padding-bottom:2px;opacity:0.85;}

/* ── Bottom deck (fan/wheel) ── */
.tarot-deck-section{flex-shrink:0;background:linear-gradient(0deg,#04010f 0%,rgba(4,1,15,0.94) 65%,transparent 100%);padding:10px 0 16px;}
.tarot-deck-hint{text-align:center;font-size:10px;color:rgba(139,92,246,0.4);letter-spacing:1px;margin-bottom:4px;}
.tarot-fan-viewport{height:150px;overflow:visible;position:relative;cursor:grab;user-select:none;padding-top:12px;box-sizing:border-box;-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%);mask-image:linear-gradient(to bottom,black 60%,transparent 100%);}
.tarot-fan-viewport:active{cursor:grabbing;}
.tarot-fan-track{position:absolute;bottom:-32px;left:0;right:0;height:180px;}
.tarot-fan-card{position:absolute;width:96px;height:158px;bottom:0;left:calc(50% - 48px);transform-origin:50% 370px;cursor:pointer;transition:transform 0.28s ease,opacity 0.28s ease;border-radius:0;overflow:visible;box-shadow:none;}
.tarot-fan-card img{width:100%;height:100%;object-fit:cover;border-radius:5px;pointer-events:none;}
.tarot-fan-card:active{filter:brightness(1.15);}

/* ── Slot flip animation ── */
.tarot-slot-flip-wrap{width:100%;flex:1;display:flex;align-items:stretch;}
.tarot-slot-flip-inner{width:100%;height:100%;position:relative;}
.tarot-slot-flip-back,.tarot-slot-flip-front{position:absolute;inset:0;display:flex;}
.tarot-slot-flip-back img,.tarot-slot-flip-front img{width:100%;height:100%;object-fit:contain;border-radius:0;box-shadow:none;}

/* ── Summary card rows ── */
.tarot-sum-row{display:flex;align-items:center;justify-content:space-between;margin:10px 0 4px;}
.tarot-sum-card{font-size:12px;font-weight:800;color:#f0d060;}
.tarot-sum-label{font-size:9px;font-weight:700;color:#7858a0;letter-spacing:1px;text-transform:uppercase;}
.tarot-summary-text p{font-size:12px;color:#d0b8f0;line-height:1.75;margin:0 0 6px;}

@keyframes pulse{0%,100%{opacity:0.5;}50%{opacity:1;}}

/* ══ SIGN DETAIL SCREEN ══ */
#sign-detail{background:#04010f;padding-top:0;}
.sd-header{padding:var(--section-screen-top-gap) 20px 16px;display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#0f0528,#04010f);border-bottom:1px solid #1e1040;}
.sd-header-info{flex:1;}
.sd-sign-name{font-size:22px;font-weight:800;color:#f0e8ff;line-height:1.15;}
.sd-sign-dates{font-size:12px;font-weight:500;color:#9878c0;line-height:1.4;margin-top:3px;}
.sd-sign-emoji-big{font-size:40px;}
.sd-body{overflow-y:auto;flex:1;padding:20px;display:flex;flex-direction:column;gap:16px;padding-bottom:100px;min-width:0;}
.sd-card{background:linear-gradient(160deg,#0f0528,#07021a);border:1px solid #2a1560;border-radius:16px;padding:18px;}
.sd-card-title{font-size:11px;font-weight:900;color:#f0d060;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;}
.sd-overview-card{
  background:
    radial-gradient(circle at 88% 10%,rgba(240,208,96,.18),transparent 36%),
    radial-gradient(circle at 8% 100%,rgba(139,92,246,.16),transparent 34%),
    linear-gradient(160deg,#15063a,#08021d 60%,#120426);
  border-color:rgba(240,208,96,.24);
  box-shadow:0 18px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
}
.sd-overview-text{font-size:16px;line-height:1.78;color:#ece3ff;}
.sd-identity-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.sd-identity-row{
  display:grid;
  grid-template-columns:minmax(84px,108px) minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:12px;
  border-radius:14px;
  background:rgba(139,92,246,.075);
  border:1px solid rgba(139,92,246,.14);
}
.sd-identity-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#8f72bd;
}
.sd-identity-value{
  font-size:14px;
  font-weight:800;
  color:#efe7ff;
  line-height:1.45;
}
.sd-chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.sd-chip{
  padding:7px 14px;
  border-radius:999px;
  border:1px solid #3a2060;
  background:rgba(139,92,246,0.08);
  font-size:13px;
  font-weight:700;
  color:#d6c1f4;
}
.sd-chip-soft{
  border-color:rgba(139,92,246,.2);
  background:rgba(139,92,246,.05);
  color:#b9a1dc;
}
.sd-mini-title{
  font-size:10px;
  font-weight:900;
  color:#8f72bd;
  letter-spacing:1.4px;
  text-transform:uppercase;
  margin:16px 0 8px;
}
.sd-section-copy{margin-top:14px;}
.sd-watchout{
  margin-top:14px;
  border:1px solid rgba(240,208,96,.16);
  background:rgba(240,208,96,.06);
  border-radius:14px;
  padding:12px 13px;
  font-size:13px;
  line-height:1.65;
  color:#d9c38f;
}
.privacy-policy-text{overflow-y:visible;background:linear-gradient(160deg,#0f0528,#07021a);border:1px solid #2a1560;border-radius:16px;padding:18px;font-size:13px;color:#c0a8e0;line-height:1.75;}
.privacy-policy-text h3{font-size:12px;font-weight:900;color:#f0d060;letter-spacing:1px;text-transform:uppercase;margin:18px 0 8px;}
.privacy-policy-text h3:first-child{margin-top:0;}
.privacy-policy-text p{margin-bottom:12px;}
.privacy-policy-text ul{padding-left:18px;margin:0 0 12px;}
.privacy-policy-text li{margin-bottom:6px;}
.sd-traits-row{display:flex;flex-wrap:wrap;gap:8px;}
.sd-trait{padding:7px 14px;border-radius:22px;border:1px solid #3a2060;background:rgba(139,92,246,0.08);font-size:13px;color:#c0a0f0;}
.sd-trait.strength{border-color:#1a5c3a;background:rgba(52,211,153,0.08);color:#34d399;}
.sd-trait.weakness{border-color:#5c1a1a;background:rgba(239,68,68,0.06);color:#f87171;}
.sd-stat-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #1a0a40;}
.sd-stat-row:last-child{border-bottom:none;}
.sd-stat-label{font-size:13px;color:#7858a0;}
.sd-stat-value{font-size:13px;font-weight:700;color:#e0c8ff;}
.sd-reading-text{font-size:13px;color:#c0a8e0;line-height:1.75;}
.sd-compat-signs{display:flex;gap:10px;flex-wrap:wrap;}
.compat-mini-sign{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  padding:8px 12px;
  background:rgba(139,92,246,.085);
  border:1px solid rgba(139,92,246,.18);
  color:#efe7ff;
  font-size:13px;
  font-weight:800;
}
.compat-mini-sign img{
  width:22px;
  height:22px;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.sd-lucky-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sd-lucky-item{background:rgba(139,92,246,0.06);border:1px solid #2a1560;border-radius:14px;padding:13px 12px;text-align:left;}
.sd-lucky-label{font-size:9px;color:#7858a0;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;font-weight:800;}
.sd-lucky-val{font-size:14px;font-weight:800;color:#f0d060;line-height:1.35;}

/* ══ PROFILE SCREEN ══ */
#profile{background:#04010f;}
/* #profile.main-screen has padding-top: --bare-screen-top-gap, so prof-header gets 0 top */
.prof-header{padding:var(--bare-screen-top-gap) 20px 20px;background:linear-gradient(180deg,#0f0528,#04010f);border-bottom:1px solid #1e1040;}
.prof-avatar-area{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px;}
.prof-avatar-edit-wrap{position:relative;width:88px;height:88px;cursor:pointer;}
.prof-big-avatar{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,#3d1a6e,#0a0320);border:2.5px solid #8b5cf6;display:flex;align-items:center;justify-content:center;font-size:40px;box-shadow:0 0 24px rgba(139,92,246,0.4);overflow:hidden;position:relative;}
.prof-avatar-img{width:100%;height:100%;object-fit:cover;display:none;}
.prof-avatar-symbol{line-height:1;}
.prof-avatar-upload{position:absolute;right:0;bottom:0;width:28px;height:28px;border-radius:50%;border:2px solid #080216;background:linear-gradient(135deg,#f0d060,#9d6ff0);color:#04010f;font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(139,92,246,.45);cursor:pointer;padding:0;}
.prof-avatar-upload:active{transform:scale(.96);}
.prof-user-name{font-size:22px;font-weight:900;}
.prof-user-sign{font-size:14px;color:#9878c0;}
.prof-edit-btn{padding:8px 20px;border-radius:20px;border:1.5px solid #3a2060;background:transparent;color:#b898e0;font-size:13px;font-weight:600;cursor:pointer;}
.prof-body{overflow-y:auto;flex:1;padding:20px;display:flex;flex-direction:column;gap:14px;padding-bottom:140px;}
.prof-section-title{font-size:11px;font-weight:800;color:#6b4fa0;letter-spacing:2px;text-transform:uppercase;padding:4px 0 8px;}
.prof-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:linear-gradient(160deg,#0f0528,#07021a);border:1px solid #1e1040;border-radius:14px;cursor:pointer;transition:all 0.2s;}
.prof-item:hover{border-color:#3a2060;background:rgba(139,92,246,0.06);}
.prof-item-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.prof-item-info{flex:1;}
.prof-item-label{font-size:14px;font-weight:600;color:#e0c8ff;}
.prof-item-value{font-size:12px;color:#7858a0;margin-top:2px;}
.prof-item-arrow{font-size:16px;color:#3a2060;}
.prof-notif-token-badge{font-size:11px;font-weight:800;white-space:nowrap;padding:3px 8px;border-radius:20px;margin-right:4px;}
.prof-notif-token-badge.unclaimed{background:rgba(240,208,96,.15);color:#fcd34d;border:1px solid rgba(240,208,96,.3);}
.prof-notif-token-badge.claimed{background:rgba(52,211,153,.1);color:#6ee7b7;border:1px solid rgba(52,211,153,.2);}
.notification-sheet-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9500;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  box-sizing:border-box;
}
.notification-sheet{
  position:relative;
  width:100%;
  max-width:420px;
  background:#0a0225;
  border-radius:24px;
  padding:28px 24px 28px;
  border:1px solid #2a1550;
  z-index:9501;
  box-sizing:border-box;
  max-height:100%;
  overflow-y:auto;
}
body.notif-panel-open .global-navbar,
body.notif-panel-open .bottom-nav,
body.notif-panel-open .safe-area-top-bg{
  display:none !important;
}
.notification-sheet-close{
  position:absolute;
  top:18px;
  right:18px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(190,140,255,0.25);
  background:rgba(255,255,255,0.06);
  color:#EDE3FF;
  font-size:22px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.notification-sheet-close:active{transform:scale(.94);}
.prof-sub-card{background:linear-gradient(135deg,#1f0650,#0a0220);border:1px solid #3a2060;border-radius:16px;padding:18px;position:relative;overflow:hidden;}
.prof-sub-card::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;background:radial-gradient(circle,rgba(139,92,246,0.3),transparent 70%);pointer-events:none;}
.prof-sub-badge{display:inline-block;padding:4px 12px;border-radius:20px;background:linear-gradient(135deg,#f0d060,#c9a830);color:#04010f;font-size:11px;font-weight:900;margin-bottom:10px;}
.prof-sub-title{font-size:16px;font-weight:800;margin-bottom:4px;}
.prof-sub-desc{font-size:13px;color:#9878c0;line-height:1.5;margin-bottom:14px;}
.prof-sub-btn{width:100%;padding:14px;border-radius:12px;border:none;background:linear-gradient(135deg,#9d6ff0,#6d28d9);color:#fff;font-size:14px;font-weight:700;cursor:pointer;}
.prof-lang-expand{max-height:0;overflow:hidden;transition:max-height 0.3s ease;margin-top:-14px;}
.prof-lang-expand.open{max-height:120px;margin-top:0;}
.prof-lang-row{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 12px 54px;}
.prof-lang-pill{padding:8px 16px;border-radius:20px;border:1.5px solid #2a1560;background:rgba(255,255,255,0.02);color:#9878c0;font-size:13px;cursor:pointer;transition:all 0.2s;}
.prof-lang-pill.active{background:rgba(139,92,246,0.2);border-color:#8b5cf6;color:#fff;font-weight:700;}
#prof-lang-arrow{transition:transform 0.25s ease;}
#prof-lang-arrow.open{transform:rotate(90deg);}
.prof-logout-btn{width:100%;padding:15px;border-radius:14px;border:1.5px solid rgba(248,113,113,0.35);background:rgba(248,113,113,0.08);color:#fca5a5;font-size:15px;font-weight:800;cursor:pointer;transition:all 0.2s;touch-action:manipulation;pointer-events:auto;}
.prof-logout-btn:hover{background:rgba(248,113,113,0.14);border-color:rgba(248,113,113,0.55);color:#fecaca;}
.prof-social{padding:18px 0 8px;text-align:center;}
.prof-social-label{font-size:11px;font-weight:800;color:#9878c0;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px;}
.prof-social-row{display:flex;gap:12px;justify-content:center;}
.prof-social-btn{display:flex;align-items:center;gap:8px;padding:13px 20px;border-radius:14px;border:1.5px solid rgba(139,92,246,0.5);background:rgba(139,92,246,0.15);font-size:13px;font-weight:700;color:#e0ccff;cursor:pointer;transition:all 0.2s;flex:1;max-width:160px;justify-content:center;}
.prof-social-btn:active{background:rgba(139,92,246,0.28);border-color:rgba(139,92,246,0.8);}
.prof-social-instagram{border-color:rgba(225,48,108,0.6);background:rgba(225,48,108,0.15);color:#ffb8d0;}
.prof-social-instagram:active{background:rgba(225,48,108,0.28);}
.prof-social-tiktok{border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.1);color:#ede9fe;}
.prof-social-tiktok:active{background:rgba(255,255,255,0.18);}
.prof-social-icon{width:18px;height:18px;flex-shrink:0;}
.prof-legal-links{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 0 4px;flex-wrap:wrap;}
.prof-legal-link{font-size:12px;color:#6b4fa0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .18s;}
.prof-legal-link:hover{color:#a78bfa;}
.prof-legal-delete{color:#7a3030;}
.prof-legal-delete:hover{color:#f87171;}
.prof-legal-sep{font-size:11px;color:#3a2060;user-select:none;}
.prof-version{text-align:center;font-size:11px;color:#3a2060;padding:4px 0 16px;}


/* ── Persistent nav visibility — controlled by body class ── */
body:not(.navs-on) #main-topnav,
body:not(.navs-on) .bottom-nav {
  display: none !important;
}
body.navs-on #main-topnav  { display: flex !important; }
body.navs-on .bottom-nav   { display: flex !important; }
body.tarot-hide-bottom-nav .bottom-nav{
  display:none !important;
}

/* ══ ZODIAC-ALL SCREEN ══ */
#zodiac-all { background:#04010f; flex-direction:column; padding-top:0; }
.za-header {
  display:flex; align-items:center; gap:12px;
  padding:64px 20px 16px;
  background:linear-gradient(180deg,rgba(80,20,180,.25) 0%,transparent 100%);
}
.za-back {
  flex-shrink:0;
}
.za-back:hover{}
.za-header-text { flex:1; }
.za-title { font-size:22px; font-weight:700; color:#fff; }
.za-subtitle { font-size:13px; color:#9878c0; margin-top:2px; }
.za-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  padding:8px 0 112px;
  min-width:0;
}
.za-card {
  position:relative;
  border:1px solid rgba(139,92,246,.24);
  border-radius:22px;
  background:linear-gradient(180deg,#1a0a42 0%,#120634 46%,#08021d 100%);
  padding:14px 8px 12px;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .14s ease;
  overflow:hidden;
  text-align:center;
  min-height:142px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.za-card:active{transform:scale(.985);}
.za-card::before {
  content:none;
}
.za-card.fire   { --el-color:#f87171; border-color:rgba(248,113,113,.25); }
.za-card.earth  { --el-color:#34d399; border-color:rgba(52,211,153,.25); }
.za-card.air    { --el-color:#fbbf24; border-color:rgba(251,191,36,.25); }
.za-card.water  { --el-color:#60a5fa; border-color:rgba(96,165,250,.25); }
.za-card:hover,
.za-card:active{
  border-color:rgba(240,208,96,.3);
  box-shadow:0 10px 20px rgba(139,92,246,.12),0 0 14px rgba(240,208,96,.06);
}
.za-card-glow {
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:108px;
  height:108px;
  border-radius:50%;
  background:var(--el-color);
  opacity:.11;
  filter:blur(26px);
  pointer-events:none;
}
.za-emoji {
  width:82px;
  height:82px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  position:relative;
  z-index:1;
  flex-shrink:0;
}
.za-emoji img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
}
.za-name {
  font-size:16px;
  font-weight:800;
  color:#efe7ff;
  line-height:1.2;
  margin:0;
}
.za-dates {
  font-size:11px;
  color:#b9a1dc;
  line-height:1.35;
  margin:0;
}
/* user's sign highlight */
.za-card.my-sign {
  border-color:var(--gold) !important;
  box-shadow:0 0 18px rgba(212,175,55,.16);
}
.za-card.my-sign .za-my-badge {
  display:inline-flex;
}
.za-my-badge {
  display:none;
  position:absolute;
  top:10px;
  right:10px;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  color:#f2d27c;
  text-shadow:0 0 10px rgba(242,210,124,.32);
  animation:chineseMarkerFloat 2.6s ease-in-out infinite;
}


/* .all-signs-row removed from home (now only via Horoscopes nav) */


html{background:#04010f;}


/* ═══════════════════════════════════════
   BECOME AN ASTROLOGER — application form
═══════════════════════════════════════ */
.aa-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:700;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(6px);}
.aa-sheet{background:linear-gradient(160deg,#0e0530,#07021a);border-radius:24px 24px 0 0;padding:0 0 48px;width:100%;max-width:430px;max-height:92vh;overflow-y:auto;border:1px solid rgba(139,92,246,0.3);border-bottom:none;}
.aa-sheet::-webkit-scrollbar{width:0;}

/* Header */
.aa-header{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;border-bottom:1px solid rgba(139,92,246,0.15);position:sticky;top:0;background:linear-gradient(160deg,#0e0530,#07021a);z-index:1;}
.aa-back{flex-shrink:0;}
.aa-header-text{flex:1;}
.aa-header-title{font-size:17px;font-weight:900;color:#ede9fe;}
.aa-header-sub{font-size:12px;color:#7858a0;margin-top:2px;}

/* Form layout */
.aa-section-label{font-size:11px;font-weight:800;color:#9d6ff0;letter-spacing:1.5px;text-transform:uppercase;padding:20px 20px 8px;}
.aa-section-hint{font-size:12px;color:#7858a0;padding:0 20px 10px;}
.aa-req{color:#f87171;}
.aa-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px;}
.aa-field-wrap{padding:0 20px 14px;}
.aa-row-2 .aa-field-wrap{padding:0 0 14px;}
.aa-label{display:block;font-size:12px;font-weight:700;color:#c0a8e0;margin-bottom:6px;letter-spacing:.3px;}
.aa-input{width:100%;background:rgba(255,255,255,0.04);border:1.5px solid rgba(139,92,246,0.2);border-radius:12px;padding:12px 14px;color:#ede9fe;font-size:14px;outline:none;transition:border-color .2s;box-sizing:border-box;}
.aa-input:focus{border-color:rgba(139,92,246,0.6);background:rgba(139,92,246,0.05);}
.aa-input::placeholder{color:#4a3260;}
.aa-textarea{min-height:110px;resize:none;font-family:inherit;line-height:1.6;}
.aa-char-count{font-size:11px;color:#5a3d80;text-align:right;margin-top:4px;}
.aa-phone-wrap{position:relative;}
.aa-phone-prefix{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#9878c0;font-size:14px;font-weight:700;}
.aa-input-phone{padding-left:26px;}

/* Specialty chips */
.aa-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 16px;}
.aa-chip{background:rgba(255,255,255,0.04);border:1.5px solid rgba(139,92,246,0.18);border-radius:24px;padding:8px 14px;font-size:13px;font-weight:600;color:#9878c0;cursor:pointer;transition:all .2s;user-select:none;}
.aa-chip.selected{background:rgba(139,92,246,0.2);border-color:#8b5cf6;color:#ede9fe;}
.aa-chip:active{transform:scale(.97);}

/* Error */
.aa-error{margin:0 20px 14px;background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.3);border-radius:10px;padding:10px 14px;font-size:13px;color:#fca5a5;line-height:1.5;}

/* Submit */
.aa-submit-btn{width:calc(100% - 40px);margin:0 20px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);border:none;color:#fff;font-size:16px;font-weight:800;padding:16px;border-radius:16px;cursor:pointer;box-shadow:0 4px 24px rgba(109,40,217,0.4);display:flex;align-items:center;justify-content:center;gap:10px;}
.aa-submit-btn:active{opacity:.9;}
.aa-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.aa-disclaimer{font-size:11px;color:#4a3260;text-align:center;padding:12px 20px 0;line-height:1.5;}

/* Success */
.aa-success{display:flex;flex-direction:column;align-items:center;padding:40px 20px;text-align:center;}
.aa-success-icon{font-size:64px;color:#f0d060;margin-bottom:16px;animation:cfRing 2s ease-in-out infinite;}
.aa-success-title{font-size:24px;font-weight:900;color:#ede9fe;margin-bottom:6px;}
.aa-success-name{font-size:18px;font-weight:700;color:#f0d060;margin-bottom:16px;}
.aa-success-msg{font-size:14px;color:#c0a8e0;line-height:1.7;margin-bottom:20px;max-width:320px;}
.aa-success-specs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.aa-success-specs .spec-tag{background:rgba(139,92,246,0.18);border:1px solid rgba(139,92,246,0.3);border-radius:20px;padding:5px 12px;font-size:12px;color:#c084fc;}

/* ═══════════════════════════════════════════
   COFFEE FORTUNE — upload, analysis, results
═══════════════════════════════════════════ */
/* Upload modal */
.cf-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.82);z-index:500;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);padding:24px;box-sizing:border-box;}
.cf-modal-sheet{position:relative;background:linear-gradient(160deg,#150640,#07021a);border-radius:28px;padding:26px 20px 22px;width:min(100%,430px);max-height:min(calc(100vh - 48px),720px);overflow-y:auto;border:1px solid rgba(139,92,246,.34);box-shadow:0 22px 60px rgba(0,0,0,.48),0 0 0 1px rgba(240,208,96,.08) inset;}
.hand-upload-sheet{padding-top:54px;padding-bottom:22px;}
.cf-modal-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(190,140,255,.24);background:rgba(255,255,255,.06);color:#ede3ff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 16px rgba(139,92,246,.14);}
.cf-modal-handle{display:none;}
.cf-modal-title{font-size:20px;font-weight:900;text-align:center;margin-bottom:6px;color:#ede9fe;}
.cf-modal-sub{font-size:13px;color:#9878c0;text-align:center;margin-bottom:22px;line-height:1.55;}
.cf-upload-helper{font-size:12px;color:#f0d060;line-height:1.5;text-align:center;margin:-12px 0 14px;}
.cf-validation-status{display:none;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#c0a8e0;margin:0 0 12px;}
.cf-validation-status.show{display:flex;}
.cf-validation-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.24);border-top-color:#f0d060;border-radius:50%;animation:spin .8s linear infinite;}
.cf-upload-btn:disabled{opacity:.58;cursor:not-allowed;}
.cf-privacy-notice{font-size:11.5px;color:#9fb7e8;line-height:1.55;background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.2);border-radius:14px;padding:10px 12px;margin:-10px 0 14px;text-align:left;}
.cf-upload-btn{width:100%;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(139,92,246,0.2);border-radius:16px;padding:14px 16px;margin-bottom:10px;cursor:pointer;color:#ede9fe;text-align:left;transition:background .2s;box-sizing:border-box;}
.cf-upload-btn:active{background:rgba(139,92,246,0.18);}
.cf-upload-icon{font-size:28px;flex-shrink:0;}
.upload-option-icon-svg{width:38px;height:38px;color:rgba(210,165,92,0.95);flex-shrink:0;filter:drop-shadow(0 0 10px rgba(201,132,52,0.22));display:flex;align-items:center;justify-content:center;}
.upload-option-icon-svg svg{width:100%;height:100%;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.palm-upload-icon{color:rgba(255,155,215,0.95);filter:drop-shadow(0 0 10px rgba(212,72,160,0.22));}
.cf-upload-label{font-size:15px;font-weight:700;display:block;}
.cf-upload-sub{font-size:12px;color:#7858a0;margin-top:2px;display:block;}
.cf-cancel-btn{width:100%;background:transparent;border:none;color:#7858a0;font-size:14px;padding:14px;cursor:pointer;margin-top:2px;}

/* ── Coffee upload sheet — brown/espresso override (coffee only) ── */
#coffee-upload-modal .cf-modal-sheet{
  background:linear-gradient(180deg,rgba(36,12,8,0.94) 0%,rgba(24,6,10,0.98) 100%);
  border:1px solid rgba(161,96,38,0.46);
  border-radius:32px;
  box-shadow:inset 0 1px 0 rgba(255,196,120,0.06),0 16px 44px rgba(0,0,0,0.42);
}
#coffee-upload-modal .cf-modal-close{
  background:rgba(41,17,12,0.82);
  border:1px solid rgba(161,96,38,0.34);
  color:#fff7ef;
  box-shadow:none;
}
#coffee-upload-modal .cf-modal-title{color:#fff7ef;font-weight:800;}
#coffee-upload-modal .cf-modal-sub{color:rgba(255,238,220,0.72);}
#coffee-upload-modal .cf-privacy-notice{
  background:rgba(41,17,12,0.72);
  border:1px solid rgba(161,96,38,0.32);
  color:rgba(255,238,220,0.78);
}
#coffee-upload-modal .cf-upload-btn{
  background:rgba(31,10,8,0.72);
  border:1px solid rgba(161,96,38,0.34);
  border-radius:18px;
  color:#fff7ef;
}
#coffee-upload-modal .cf-upload-btn:active{background:rgba(161,96,38,0.22);}
#coffee-upload-modal .cf-upload-label{color:#fff7ef;}
#coffee-upload-modal .cf-upload-sub{color:rgba(255,238,220,0.62);}
#coffee-upload-modal .cf-cancel-btn{color:rgba(210,165,92,0.95);}

/* Analysis full-screen overlay */
.cf-analysis-overlay{position:fixed;inset:0;background:rgba(4,1,15,.88);backdrop-filter:blur(12px);z-index:950;display:flex;align-items:center;justify-content:center;pointer-events:all;}
.fortune-loading-screen{
  display:none;
  min-height:calc(100vh - 96px);
  padding:40px 20px 116px;
  box-sizing:border-box;
  align-items:flex-start;
  justify-content:center;
  overflow-x:hidden;
}
.fortune-loading-shell{
  width:100%;
  max-width:420px;
  margin:0 auto;
  text-align:center;
}
.fortune-loading-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:rgba(240,208,96,.68);
  margin-bottom:18px;
  text-align:center;
}
.fortune-loading-error{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(190,140,255,.18);
  border-radius:18px;
  padding:18px 16px 16px;
  box-sizing:border-box;
  margin:2px 0 14px;
}
.fortune-loading-error-title{
  font-size:18px;
  font-weight:900;
  color:#f3ecff;
  margin-bottom:8px;
}
.fortune-loading-error-text{
  font-size:14px;
  line-height:1.6;
  color:#cbb7ea;
  margin-bottom:14px;
}
.fortune-loading-retry{
  width:100%;
  border:none;
  border-radius:16px;
  padding:14px 16px;
  font-size:14px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);
  box-shadow:0 10px 24px rgba(139,92,246,.24);
  cursor:pointer;
}
.premium-analysis-screen{
  position:fixed;
  inset:0;
  z-index:1200;
  background:#070014;
  backdrop-filter:blur(12px);
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  align-items:center;
  justify-content:center;
}
.premium-analysis-cancel-modal{
  position:fixed;
  inset:0;
  z-index:1300;
  background:rgba(4,1,15,.72);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
}
.premium-analysis-cancel-sheet{
  width:min(100%, 420px);
  background:linear-gradient(180deg,#170722 0%, #0b0312 100%);
  border:1px solid rgba(190,140,255,.18);
  border-radius:24px;
  padding:22px 18px 18px;
  box-sizing:border-box;
  box-shadow:0 18px 48px rgba(0,0,0,.42);
}
.premium-analysis-cancel-title{
  font-size:18px;
  font-weight:900;
  line-height:1.35;
  color:#f3ecff;
  text-align:center;
  margin-bottom:16px;
}
.premium-analysis-cancel-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.premium-analysis-cancel-btn{
  width:100%;
  border:none;
  border-radius:16px;
  padding:14px 16px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}
.premium-analysis-cancel-btn-danger{
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);
  box-shadow:0 10px 24px rgba(139,92,246,.24);
}
.premium-analysis-cancel-btn-secondary{
  color:#d8c7f4;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(190,140,255,.16);
}
.premium-analysis-screen-dream{
  background:#070014;
}
.premium-analysis-screen::before{
  display:none;
}
.premium-analysis-shell{
  position:relative;
  z-index:1;
  width:calc(100% - 32px);
  height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 48px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:18px;
  text-align:center;
  border-radius:38px;
  background:radial-gradient(circle at top center,rgba(86,45,140,0.18) 0%,rgba(28,6,58,1) 55%,rgba(22,4,48,1) 100%);
  border:1px solid rgba(203,160,255,0.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
  overflow:hidden;
  box-sizing:border-box;
}
.premium-analysis-shell::before{
  display:none;
}
.premium-analysis-screen-dream .premium-analysis-shell{
  background:linear-gradient(180deg,rgba(8,22,52,0.96) 0%,rgba(7,12,38,0.98) 55%,rgba(5,6,28,1) 100%);
  border:1px solid rgba(74,122,190,0.42);
  border-radius:36px;
  box-shadow:inset 0 1px 0 rgba(130,170,255,0.08),0 12px 38px rgba(0,0,0,0.34),0 0 28px rgba(74,122,190,0.10);
}
.premium-analysis-screen-coffee .premium-analysis-shell{
  background:linear-gradient(180deg,rgba(36,12,8,0.94) 0%,rgba(24,6,10,0.98) 100%);
  border:1px solid rgba(161,96,38,0.46);
  border-radius:36px;
  box-shadow:inset 0 1px 0 rgba(255,196,120,0.06),0 12px 38px rgba(0,0,0,0.34);
}
.premium-analysis-screen-coffee .premium-analysis-kicker{
  color:rgba(232,191,90,0.95);
}
.premium-analysis-screen-coffee .premium-analysis-title{
  color:#fff7ef;
}
.premium-analysis-screen-coffee .premium-analysis-status{
  color:rgba(255,238,220,0.78);
}
.premium-analysis-screen-coffee .premium-analysis-percent{
  color:rgba(232,191,90,0.95);
}
.premium-analysis-screen-coffee #premium-analysis-progress-fill{
  background:linear-gradient(90deg,#7a3a08,#c07830,#e8bf5a);
}
.premium-analysis-header{
  position:relative;
  width:100%;
  min-height:64px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:18px 18px 0;
  box-sizing:border-box;
  margin-bottom:24px;
}
.premium-analysis-back{
  position:absolute;
  top:18px;
  left:18px;
  z-index:2;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(190,140,255,.22);
  background:rgba(255,255,255,.06);
  color:#ede3ff;
  font-size:24px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 0 16px rgba(139,92,246,.14);
}
.premium-analysis-screen-dream .premium-analysis-shell::before,
.premium-analysis-screen-dream .premium-analysis-shell::after{
  content:'';
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  opacity:.7;
}
.premium-analysis-screen-dream .premium-analysis-shell::before{
  width:220px;
  height:88px;
  top:132px;
  left:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(219,198,255,.12) 0%, rgba(219,198,255,.04) 42%, rgba(219,198,255,0) 74%);
  filter:blur(10px);
  animation:dreamMistFloat 6.2s ease-in-out infinite;
}
.premium-analysis-screen-dream .premium-analysis-shell::after{
  width:170px;
  height:68px;
  top:156px;
  left:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(159,183,232,.1) 0%, rgba(159,183,232,0) 72%);
  filter:blur(12px);
  animation:dreamMistFloat 8s ease-in-out infinite reverse;
}
.premium-analysis-kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:#d9c5ff;
  width:100%;
  text-align:center;
  margin:0;
  padding:12px 48px 0;
  box-sizing:border-box;
}
.premium-analysis-icon-wrap{
  position:relative;
  width:152px;
  height:152px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:26px;
}
.premium-analysis-icon-glow{
  position:absolute;
  width:128px;
  height:128px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,.34) 0%, rgba(139,92,246,0) 72%);
  filter:blur(4px);
  animation:premiumLoadingGlow 3.6s ease-in-out infinite;
}
.premium-analysis-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(240,208,96,.2);
}
.premium-analysis-orbit-a{
  inset:10px;
  animation:premiumOrbit 14s linear infinite;
}
.premium-analysis-orbit-b{
  inset:0;
  border-color:rgba(139,92,246,.24);
  animation:premiumOrbitReverse 18s linear infinite;
}
.premium-analysis-icon-wrap::after,
.premium-analysis-icon-wrap::before{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#f0d060;
  box-shadow:0 0 14px rgba(240,208,96,.55);
}
.premium-analysis-icon-wrap::before{
  top:18px;
  right:18px;
}
.premium-analysis-icon-wrap::after{
  bottom:20px;
  left:22px;
  width:6px;
  height:6px;
  background:#b794f6;
  box-shadow:0 0 12px rgba(183,148,246,.5);
}
.premium-analysis-icon-image{
  position:relative;
  z-index:1;
  width:92px;
  height:92px;
  object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(139,92,246,.35));
  animation:premiumLoadingFloat 3.2s ease-in-out infinite;
}
.premium-analysis-screen-birth_chart .premium-analysis-icon-image{
  width:115px;
  height:115px;
}
.premium-analysis-scan-frame,
.premium-analysis-scan-grid,
.premium-analysis-scan-beam{display:none;}
.premium-analysis-title{
  font-size:28px;
  line-height:1.18;
  font-weight:900;
  color:#f4efff;
  max-width:320px;
  margin-bottom:12px;
}
.premium-analysis-percent{
  font-size:16px;
  font-weight:900;
  color:#f0d060;
  margin-bottom:14px;
}
.premium-analysis-progress{
  width:min(100%, 320px);
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(240,208,96,.14);
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.08);
  margin-bottom:18px;
}
.premium-analysis-progress-fill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#8b5cf6 0%, #c084fc 50%, #f0d060 100%);
  box-shadow:0 0 24px rgba(139,92,246,.34);
  transition:width .18s linear;
}
.premium-analysis-status{
  min-height:44px;
  max-width:320px;
  font-size:14px;
  line-height:1.55;
  color:#cdb9e7;
  margin-bottom:18px;
  transition:opacity .24s ease, transform .24s ease;
}
.premium-analysis-error{
  width:min(100%, 320px);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(190,140,255,.18);
  border-radius:18px;
  padding:18px 16px 16px;
  box-sizing:border-box;
  margin-bottom:18px;
}
.premium-analysis-error-icon{
  width:40px;
  height:40px;
  margin:0 auto 10px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#f0d060;
  background:rgba(240,208,96,.08);
  border:1px solid rgba(240,208,96,.16);
  box-shadow:0 0 18px rgba(240,208,96,.08);
}
.premium-analysis-error-title{
  font-size:18px;
  font-weight:900;
  color:#f3ecff;
  margin-bottom:8px;
}
.premium-analysis-error-text{
  font-size:14px;
  line-height:1.6;
  color:#cbb7ea;
  margin-bottom:14px;
}
.premium-analysis-error-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.premium-analysis-retry{
  width:100%;
  border:none;
  border-radius:16px;
  padding:14px 16px;
  font-size:14px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);
  box-shadow:0 10px 24px rgba(139,92,246,.24);
  cursor:pointer;
}
.premium-analysis-error-back{
  width:100%;
  border-radius:16px;
  padding:14px 16px;
  font-size:14px;
  font-weight:900;
  color:#d8c7f4;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(190,140,255,.16);
  cursor:pointer;
}
.premium-analysis-helper{
  position:absolute;
  bottom:36px;
  left:0;
  right:0;
  font-size:12px;
  color:#7f6b98;
  letter-spacing:.3px;
  text-align:center;
}
.premium-analysis-screen-dream .premium-analysis-kicker{
  color:#d8c2ff;
}
.premium-analysis-screen-dream .premium-analysis-icon-wrap::before{
  top:10px;
  right:12px;
  width:7px;
  height:7px;
  background:#f7e4a2;
  box-shadow:
    -126px 36px 0 0 rgba(247,228,162,.88),
    -94px -8px 0 -1px rgba(188,160,255,.95),
    102px 18px 0 -1px rgba(188,160,255,.92),
    70px -24px 0 -2px rgba(247,228,162,.78),
    -58px 74px 0 -2px rgba(188,160,255,.8);
  animation:dreamStarsBlink 5.2s ease-in-out infinite;
}
.premium-analysis-screen-dream .premium-analysis-icon-wrap::after{
  bottom:18px;
  left:14px;
  width:5px;
  height:5px;
  background:#c7b4fb;
  box-shadow:
    116px 56px 0 -1px rgba(247,228,162,.76),
    86px -52px 0 -2px rgba(199,180,251,.9),
    -14px -48px 0 -2px rgba(247,228,162,.72);
  animation:dreamStarsBlink 6.8s ease-in-out infinite 1.1s;
}
.premium-analysis-screen-dream .premium-analysis-icon-glow{
  background:radial-gradient(circle, rgba(240,208,96,.22) 0%, rgba(192,132,252,.22) 34%, rgba(139,92,246,0) 74%);
  filter:blur(8px);
  animation:premiumLoadingGlow 4.6s ease-in-out infinite;
}
.premium-analysis-screen-dream .premium-analysis-orbit-a{
  border-color:rgba(240,208,96,.18);
}
.premium-analysis-screen-dream .premium-analysis-orbit-b{
  border-color:rgba(192,132,252,.18);
}
.premium-analysis-screen-dream .premium-analysis-icon-image{
  width:96px;
  height:96px;
  filter:drop-shadow(0 0 24px rgba(240,208,96,.18)) drop-shadow(0 0 30px rgba(139,92,246,.35));
  animation:dreamMoonBreath 5.4s ease-in-out infinite;
}
.premium-analysis-screen-dream .premium-analysis-title{
  color:#f3ecff;
}
.premium-analysis-screen-dream .premium-analysis-percent{
  color:#f1db93;
}
.premium-analysis-screen-dream .premium-analysis-progress{
  height:6px;
  background:rgba(255,255,255,.04);
  border-color:rgba(240,208,96,.12);
}
.premium-analysis-screen-dream .premium-analysis-progress-fill{
  background:linear-gradient(90deg,#8b5cf6 0%, #d8b4fe 56%, #f0d060 100%);
  box-shadow:0 0 18px rgba(240,208,96,.18);
}
.premium-analysis-screen-dream .premium-analysis-status{
  color:#cab8e4;
}
.premium-analysis-screen-dream .premium-analysis-helper{
  color:#8f7ca8;
}
.premium-analysis-screen-coffee{
  background:#070014;
}
.premium-analysis-screen-coffee .premium-analysis-kicker{
  color:#e6c989;
}
.premium-analysis-screen-coffee .premium-analysis-icon-wrap{
  width:178px;
  height:216px;
}
.premium-analysis-screen-coffee .premium-analysis-icon-glow{
  width:154px;
  height:154px;
  background:radial-gradient(circle, rgba(240,208,96,.2) 0%, rgba(189,108,32,.16) 34%, rgba(139,92,246,0) 76%);
  filter:blur(12px);
  animation:premiumLoadingGlow 4.6s ease-in-out infinite;
}
.premium-analysis-screen-coffee .premium-analysis-orbit-a{
  border-color:rgba(240,208,96,.14);
}
.premium-analysis-screen-coffee .premium-analysis-orbit-b{
  border-color:rgba(184,115,51,.18);
}
.premium-analysis-screen-coffee .premium-analysis-icon-image{
  display:block;
  width:126px;
  height:170px;
  border-radius:24px;
  object-fit:cover;
  object-position:center;
  border:2px solid rgba(240,208,96,.3);
  box-shadow:0 0 0 1px rgba(167,139,250,.14),0 16px 34px rgba(0,0,0,.28),0 0 24px rgba(240,208,96,.12);
  filter:none;
  animation:palmImageBreath 4.6s ease-in-out infinite;
}
.premium-analysis-screen-coffee .premium-analysis-icon-wrap::before,
.premium-analysis-screen-coffee .premium-analysis-icon-wrap::after{
  display:none;
}
.premium-analysis-screen-coffee .premium-analysis-shell::before,
.premium-analysis-screen-coffee .premium-analysis-shell::after{
  display:none;
}
.premium-analysis-screen-coffee .premium-analysis-title{
  color:#f6efe7;
}
.premium-analysis-screen-coffee .premium-analysis-percent{
  color:#f0d7a0;
}
.premium-analysis-screen-coffee .premium-analysis-progress{
  background:rgba(255,255,255,.05);
  border-color:rgba(240,208,96,.14);
}
.premium-analysis-screen-coffee .premium-analysis-progress-fill{
  background:linear-gradient(90deg,#8b5cf6 0%, #b87333 48%, #f0d060 100%);
  box-shadow:0 0 18px rgba(240,208,96,.14);
}
.premium-analysis-screen-coffee .premium-analysis-status{
  color:#d9c1aa;
}
.premium-analysis-screen-coffee .premium-analysis-helper{
  color:#8f7561;
}
.premium-analysis-screen-palm{
  background:#070014;
}
.premium-analysis-screen-palm .premium-analysis-shell{
  background:linear-gradient(180deg,rgba(31,8,55,0.96) 0%,rgba(18,4,38,0.98) 100%);
  border:1px solid rgba(212,72,160,0.36);
  border-radius:36px;
  box-shadow:inset 0 1px 0 rgba(255,160,220,0.06),0 12px 38px rgba(0,0,0,0.34),0 0 28px rgba(212,72,160,0.10);
}
.premium-analysis-screen-palm .premium-analysis-kicker{
  color:#e8cf93;
}
.premium-analysis-screen-palm .premium-analysis-icon-wrap{
  width:178px;
  height:216px;
}
.premium-analysis-screen-palm .premium-analysis-icon-glow{
  width:154px;
  height:154px;
  background:radial-gradient(circle, rgba(240,208,96,.2) 0%, rgba(167,139,250,.18) 42%, rgba(139,92,246,0) 76%);
  filter:blur(12px);
}
.premium-analysis-screen-palm .premium-analysis-orbit-a{
  border-color:rgba(240,208,96,.12);
}
.premium-analysis-screen-palm .premium-analysis-orbit-b{
  border-color:rgba(167,139,250,.18);
}
.premium-analysis-screen-palm .premium-analysis-icon-image{
  display:block;
  width:126px;
  height:170px;
  border-radius:24px;
  object-fit:cover;
  object-position:center;
  border:2px solid rgba(240,208,96,.3);
  box-shadow:0 0 0 1px rgba(167,139,250,.14),0 16px 34px rgba(0,0,0,.28),0 0 24px rgba(240,208,96,.12);
  filter:none;
  animation:palmImageBreath 4.6s ease-in-out infinite;
}
.premium-analysis-palm-svg{
  display:none;
  position:relative;
  z-index:1;
  width:108px;
  height:108px;
  overflow:visible;
  filter:drop-shadow(0 0 18px rgba(240,208,96,.12)) drop-shadow(0 0 28px rgba(139,92,246,.18));
}
.premium-analysis-screen-palm .premium-analysis-palm-svg{display:none !important;}
.premium-analysis-screen-coffee .premium-analysis-palm-svg{display:none !important;}
.premium-analysis-screen-coffee .premium-analysis-scan-frame,
.premium-analysis-screen-palm .premium-analysis-scan-frame{
  display:block;
  position:absolute;
  inset:22px 24px;
  border-radius:26px;
  border:1px solid rgba(240,208,96,.18);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.1);
  z-index:2;
  pointer-events:none;
}
.premium-analysis-screen-coffee .premium-analysis-scan-grid,
.premium-analysis-screen-palm .premium-analysis-scan-grid{
  display:block;
  position:absolute;
  inset:26px 28px;
  border-radius:22px;
  background:
    repeating-linear-gradient(180deg, rgba(240,208,96,.055) 0 2px, rgba(240,208,96,0) 2px 16px),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  mix-blend-mode:screen;
  opacity:.8;
  z-index:2;
  pointer-events:none;
}
.premium-analysis-screen-coffee .premium-analysis-scan-beam,
.premium-analysis-screen-palm .premium-analysis-scan-beam{
  display:block;
  position:absolute;
  left:32px;
  right:32px;
  top:30px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(240,208,96,.95), rgba(167,139,250,.9), transparent);
  box-shadow:0 0 16px rgba(240,208,96,.4);
  z-index:3;
  pointer-events:none;
  animation:palmScanBeam 2.8s ease-in-out infinite;
}
.premium-palm-outline,
.premium-palm-line{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.premium-palm-outline{
  stroke:#f0d060;
  stroke-width:4;
  opacity:.92;
}
.premium-palm-line{
  stroke:#f3de98;
  stroke-width:3.1;
  opacity:.5;
}
.premium-palm-line-1{animation:palmLineGlow 3.6s ease-in-out infinite;}
.premium-palm-line-2{animation:palmLineGlow 3.6s ease-in-out infinite .7s;}
.premium-palm-line-3{animation:palmLineGlow 3.6s ease-in-out infinite 1.4s;}
.premium-palm-line-4{animation:palmLineGlow 3.6s ease-in-out infinite 2.1s;}
.premium-palm-particle{
  fill:#f0d060;
  opacity:.3;
  filter:drop-shadow(0 0 10px rgba(240,208,96,.45));
}
.premium-palm-particle-1{animation:palmParticleFlowOne 2.8s ease-in-out infinite;}
.premium-palm-particle-2{animation:palmParticleFlowTwo 3.3s ease-in-out infinite .5s;}
.premium-palm-particle-3{animation:palmParticleFlowThree 3s ease-in-out infinite 1s;}
.premium-analysis-screen-palm .premium-analysis-shell::before,
.premium-analysis-screen-palm .premium-analysis-shell::after{
  content:'';
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.premium-analysis-screen-palm .premium-analysis-shell::before{
  width:9px;
  height:9px;
  top:184px;
  left:50%;
  margin-left:-72px;
  background:#f0d060;
  box-shadow:
    34px -26px 0 -1px rgba(240,208,96,.88),
    88px -12px 0 -2px rgba(167,139,250,.9),
    106px 22px 0 -3px rgba(240,208,96,.76),
    -10px 54px 0 -2px rgba(167,139,250,.72);
  animation:palmAuraParticle 5.2s ease-in-out infinite;
}
.premium-analysis-screen-palm .premium-analysis-shell::after{
  width:6px;
  height:6px;
  top:202px;
  left:50%;
  margin-left:28px;
  background:#c5adff;
  box-shadow:
    -52px -20px 0 -1px rgba(240,208,96,.76),
    24px -36px 0 -2px rgba(240,208,96,.7),
    64px 2px 0 -2px rgba(167,139,250,.82);
  animation:palmAuraParticle 6.2s ease-in-out infinite reverse;
}
.premium-analysis-screen-palm .premium-analysis-title{
  color:#f5efff;
}
.premium-analysis-screen-palm .premium-analysis-percent{
  color:#f0d7a0;
}
.premium-analysis-screen-palm .premium-analysis-progress{
  height:6px;
  background:rgba(255,255,255,.04);
  border-color:rgba(240,208,96,.12);
}
.premium-analysis-screen-palm .premium-analysis-progress-fill{
  background:linear-gradient(90deg,#8b5cf6 0%, #b794f6 44%, #f0d060 100%);
  box-shadow:0 0 18px rgba(240,208,96,.16);
}
.premium-analysis-screen-palm .premium-analysis-status{
  color:#d5c3ea;
}
.premium-analysis-screen-palm .premium-analysis-helper{
  color:#8f7fa4;
}
@keyframes premiumOrbit{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes premiumOrbitReverse{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}
@keyframes premiumLoadingGlow{0%,100%{opacity:.72;transform:scale(1);}50%{opacity:1;transform:scale(1.08);}}
@keyframes premiumLoadingFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes dreamMoonBreath{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes dreamMistFloat{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-8px);}}
@keyframes dreamStarsBlink{0%,100%{opacity:.72;}50%{opacity:1;}}
@keyframes coffeeCupFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes coffeeSteamRise{
  0%{opacity:.25;transform:translateY(6px) scale(.92) rotate(-6deg);}
  50%{opacity:.85;transform:translateY(-8px) scale(1.02) rotate(0deg);}
  100%{opacity:.18;transform:translateY(-18px) scale(1.08) rotate(6deg);}
}
@keyframes coffeeParticleRise{
  0%,100%{opacity:.35;transform:translateY(0);}
  50%{opacity:1;transform:translateY(-10px);}
}
@keyframes palmIconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes palmLineGlow{
  0%,100%{opacity:.38;filter:drop-shadow(0 0 0 rgba(240,208,96,0));}
  50%{opacity:1;filter:drop-shadow(0 0 10px rgba(240,208,96,.45));}
}
@keyframes palmParticleFlowOne{
  0%,100%{transform:translate(0,0);opacity:.25;}
  50%{transform:translate(18px,-6px);opacity:1;}
}
@keyframes palmParticleFlowTwo{
  0%,100%{transform:translate(0,0);opacity:.22;}
  50%{transform:translate(-12px,10px);opacity:.95;}
}
@keyframes palmParticleFlowThree{
  0%,100%{transform:translate(0,0);opacity:.28;}
  50%{transform:translate(2px,14px);opacity:.9;}
}
@keyframes palmAuraParticle{
  0%,100%{opacity:.45;transform:translateY(0);}
  50%{opacity:1;transform:translateY(-8px);}
}
@keyframes palmImageBreath{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.025);}
}
@keyframes palmScanBeam{
  0%{top:30px;opacity:.15;}
  18%{opacity:1;}
  85%{opacity:1;}
  100%{top:182px;opacity:.12;}
}
#coffee-analysis-overlay.fortune-loading-screen,
#hand-analysis-overlay.fortune-loading-screen{
  position:relative;
  inset:auto;
  background:transparent;
  backdrop-filter:none;
  z-index:auto;
  min-height:calc(100vh - 96px);
  padding:var(--section-screen-top-gap) 20px 116px;
  align-items:flex-start;
  justify-content:center;
}
#coffee-analysis-overlay.fortune-loading-screen .cf-scan-wrap,
#hand-analysis-overlay.fortune-loading-screen .cf-scan-wrap{
  width:100%;
  max-width:420px;
  margin:0 auto;
}
.cf-scan-wrap{display:flex;flex-direction:column;align-items:center;padding:0 32px;width:100%;max-width:360px;}
.cf-processing-spinner{width:42px;height:42px;border-radius:50%;border:3px solid rgba(240,208,96,.2);border-top-color:#f0d060;border-right-color:#9d6ff0;animation:spin .85s linear infinite;margin:0 auto 18px;box-shadow:0 0 24px rgba(139,92,246,.28);}
.cf-scan-img-wrap{position:relative;width:190px;height:190px;border-radius:50%;overflow:hidden;border:2px solid rgba(139,92,246,0.5);margin-bottom:24px;flex-shrink:0;}
.cf-scan-img{width:100%;height:100%;object-fit:cover;}
.cf-scan-line{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#8b5cf6,#f0d060,#8b5cf6,transparent);animation:cfScan 1.4s ease-in-out infinite;box-shadow:0 0 12px rgba(139,92,246,.8);}
@keyframes cfScan{0%{top:0;opacity:1}90%{top:100%;opacity:1}100%{top:100%;opacity:0}}
.cf-scan-ring{position:absolute;border-radius:50%;border:2px solid transparent;animation:cfRing 2s ease-in-out infinite;}
.cf-ring-1{inset:-4px;border-color:rgba(139,92,246,.45);animation-delay:0s;}
.cf-ring-2{inset:-14px;border-color:rgba(240,208,96,.2);animation-delay:.6s;}
@keyframes cfRing{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
.cf-analysis-title{font-size:18px;font-weight:800;color:#f0d060;letter-spacing:1px;margin-bottom:20px;text-align:center;}
.cf-analysis-steps{width:100%;display:flex;flex-direction:column;gap:8px;}
.cf-step{font-size:13px;color:#3d2060;padding:9px 12px;border-radius:10px;border:1px solid transparent;opacity:.24;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease,color .35s ease,background .35s ease,border-color .35s ease;}
.cf-step.cf-active{color:#efe7ff;background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.3);opacity:1;transform:translateY(0);box-shadow:0 0 18px rgba(139,92,246,.1);}

/* ══════════════════════════════════════════════
   RISING SIGN
   ══════════════════════════════════════════════ */

#rising-sign > div{padding-top:0;}
#rs-circle{position:relative;width:129px;height:129px;margin:0 auto 16px;overflow:visible;background:none;box-shadow:none;animation:rsHeroFloat 4.2s ease-in-out infinite;}
#rs-circle::before{content:none;}
#rs-sign-emoji{position:relative;z-index:1;filter:drop-shadow(0 0 16px rgba(240,208,96,.42));width:129px;height:129px;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;}
#rs-sign-emoji img{width:100%;height:100%;display:block;object-fit:cover;animation:rsIconPulse 3.8s ease-in-out infinite;}
.rs-sparkle{position:absolute;width:5px;height:5px;border-radius:50%;background:#f8e7a1;box-shadow:0 0 10px rgba(240,208,96,.85);opacity:.45;z-index:2;animation:rsSparkle 3.2s ease-in-out infinite;}
.rs-sparkle-1{top:12px;right:12px;animation-delay:.1s;}
.rs-sparkle-2{left:8px;bottom:24px;width:4px;height:4px;animation-delay:1.1s;}
.rs-sparkle-3{right:24px;bottom:4px;width:3px;height:3px;animation-delay:1.9s;}
@keyframes rsHeroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes rsIconPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}}
@keyframes rsSparkle{0%,100%{opacity:.18;transform:translateY(0) scale(.8);}45%{opacity:1;transform:translateY(-8px) scale(1.15);}}
.rs-hero-copy{text-align:center;margin-bottom:18px;}
#rs-sign-name{color:#f0e8ff;letter-spacing:0;}
#rs-sign-element{max-width:280px;margin:6px auto 0;color:#bfa8de !important;line-height:1.6;}
.rs-badges{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:12px;}
.rs-badge{border:1px solid rgba(240,208,96,.24);background:linear-gradient(135deg,rgba(240,208,96,.12),rgba(139,92,246,.12));color:#eadcba;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;line-height:1;box-shadow:0 8px 20px rgba(0,0,0,.14);}
.rs-tabs-shell{position:relative;margin:0 -20px 14px 0;padding-left:0;overflow:visible;}
#rs-tabs{gap:9px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;scroll-padding-left:8px;scroll-padding-right:34px;padding:8px 34px 14px 0;margin:0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}
#rs-tabs::before{content:none;}
#rs-tabs::after{content:'';flex:0 0 2px;}
#rs-tabs .num-tab{scroll-snap-align:center;border-radius:999px;padding:10px 16px;background:#140a2a;border:1.5px solid rgba(110,78,170,.45);color:#a98bd0;appearance:none;-webkit-appearance:none;outline:none;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;isolation:isolate;font-size:14px;font-weight:700;line-height:1.2;box-shadow:none;}
#rs-tabs .num-tab.active{
  background:linear-gradient(135deg,rgba(42,20,69,.96) 0%,rgba(55,27,90,.96) 52%,rgba(68,38,106,.96) 100%);
  box-shadow:none;
  border-color:rgba(240,208,96,.58);
  color:#f2e7c3;
}
#rs-tabs .num-tab.active::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,248,220,.14) 0%,rgba(255,248,220,.05) 34%,rgba(255,255,255,0) 48%);
  pointer-events:none;
}
#rs-tabs .num-tab:hover{background:#140a2a;color:#b998f0;}
#rs-tabs .num-tab:focus,
#rs-tabs .num-tab:focus-visible{outline:none;box-shadow:none;}
#rs-tabs .num-tab.active:focus,
#rs-tabs .num-tab.active:focus-visible{box-shadow:none;}
#rs-panels .num-card{position:relative;overflow:hidden;border-color:rgba(240,208,96,.18);background:linear-gradient(160deg,rgba(22,8,52,.98),rgba(7,2,26,.98));box-shadow:0 12px 34px rgba(0,0,0,.28);}
#rs-panels .num-card::before{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(240,208,96,.5),rgba(157,111,240,.35),transparent);}
#rs-panels .num-card-body{font-size:13.5px;line-height:1.78;}
.rs-tab-heading{font-size:17px;font-weight:900;color:#f3edff;margin-bottom:12px;line-height:1.25;letter-spacing:0;}
.rs-insight-list{display:grid;gap:8px;margin-bottom:14px;}
.rs-insight-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(139,92,246,.2);background:rgba(139,92,246,.075);border-radius:14px;padding:11px 12px;}
.rs-insight-label{font-size:11px;font-weight:900;color:#f0d060;text-transform:uppercase;letter-spacing:.7px;flex-shrink:0;}
.rs-insight-value{font-size:12.5px;color:#dfd2f5;font-weight:800;text-align:right;line-height:1.35;}
.rs-tab-copy{color:#c0a8e0;font-size:13.5px;line-height:1.78;margin:0;}
#rs-panels .num-panel.num-panel-active{animation:rsPanelIn .26s ease forwards;}
#rs-panels .num-panel.num-panel-exit{display:block;animation:rsPanelOut .14s ease forwards;pointer-events:none;}
@keyframes rsPanelIn{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:translateY(0);}}
@keyframes rsPanelOut{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-5px);}}
.rs-cta-area{display:grid;gap:10px;margin-top:16px;}
.rs-cta{width:100%;border:none;border-radius:16px;padding:15px 16px;font-family:inherit;font-size:14px;font-weight:900;cursor:pointer;transition:transform .14s ease,box-shadow .18s ease,opacity .18s ease;}
.rs-cta:active{transform:scale(.98);}
.rs-cta-primary{background:linear-gradient(135deg,#f0d060,#c97430,#9d6ff0);color:#14051f;box-shadow:0 10px 28px rgba(201,116,48,.28);}
.rs-cta-secondary{background:rgba(139,92,246,.1);border:1px solid rgba(240,208,96,.22);color:#eadcba;box-shadow:0 8px 22px rgba(0,0,0,.16);}
#rising-sign.active{animation:rsScreenIn .28s ease;}
@keyframes rsScreenIn{from{opacity:0;}to{opacity:1;}}

.cf-step.cf-done{color:#34d399;opacity:.9;transform:translateY(0);}
.cf-step.cf-done::before{content:'✓ ';}
/* Coffee error overlay — center the card in available screen area */
#coffee-analysis-overlay.cf-error-active .fortune-loading-kicker{display:none;}
#coffee-analysis-overlay.cf-error-active{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:env(safe-area-inset-top,0px) 20px calc(env(safe-area-inset-bottom,0px) + 96px);
}
#cf-error-state{
  background:linear-gradient(180deg,rgba(36,12,8,0.92) 0%,rgba(24,6,10,0.96) 100%);
  border:1px solid rgba(161,96,38,0.42);
  border-radius:28px;
  box-shadow:inset 0 1px 0 rgba(255,196,120,0.06),0 8px 32px rgba(0,0,0,0.28);
  width:100%;
  max-width:420px;
  padding:34px 24px 38px;
  box-sizing:border-box;
  transform:translateY(-24px);
}
.cf-error-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(232,191,90,0.9);
  margin-bottom:18px;
}
.cf-error-icon{font-size:52px;margin-bottom:12px;filter:grayscale(0.5);}
.cf-error-title{font-size:18px;font-weight:900;color:#f87171;margin-bottom:10px;}
.cf-error-msg{font-size:13px;color:rgba(255,238,220,0.78);line-height:1.65;margin-bottom:22px;max-width:280px;margin-left:auto;margin-right:auto;}
.cf-error-retry{background:linear-gradient(135deg,#c07830,#7a3a08);border:none;color:#fff;font-size:15px;font-weight:700;padding:14px 28px;border-radius:14px;cursor:pointer;box-shadow:0 4px 20px rgba(180,100,30,.4);width:100%;}

/* Ritual card extras */
/* Coffee hero */
.cf-hero-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;}
.cf-hero-glow{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(192,120,48,0.23) 0%,rgba(192,120,48,0) 70%);animation:cfGlowBreath 3s ease-in-out infinite;}
.cf-hero-icon{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(192,120,48,.85));animation:cfIconFloat 3.4s ease-in-out infinite;position:relative;z-index:1;}
@keyframes cfIconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes cfGlowBreath{0%,100%{opacity:0.55;transform:scale(1);}50%{opacity:1;transform:scale(1.2);}}
.cf-subtitle{font-size:13px;color:#b89060;line-height:1.65;margin-bottom:0;}
/* Ritual card */
.cf-ritual-card{background:linear-gradient(160deg,#1a0a05,#0d0310);border-radius:22px;padding:26px 22px;border:1px solid rgba(180,100,30,0.35);text-align:center;margin-bottom:16px;}
.cf-ritual-title{font-size:17px;font-weight:800;color:#f0c060;margin-bottom:8px;letter-spacing:0.2px;}
.cf-ritual-sub{font-size:12.5px;color:#907040;line-height:1.7;margin-bottom:20px;max-width:270px;margin-left:auto;margin-right:auto;}
/* Ritual steps */
.cf-steps-row{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.cf-step-pill{background:rgba(180,100,30,.15);border:1px solid rgba(180,100,30,.3);border-radius:20px;padding:6px 12px;font-size:11px;font-weight:600;color:#c07830;opacity:0;transform:translateY(8px);animation:cfStepReveal 0.4s ease-out forwards;}
.cf-step-pill--purple{background:rgba(139,92,246,.2);border-color:rgba(139,92,246,.35);color:#a078d0;}
.cf-ritual-step-1{animation-delay:0.05s;}
.cf-ritual-step-2{animation-delay:0.2s;}
.cf-ritual-step-3{animation-delay:0.35s;}
.cf-ritual-step-4{animation-delay:0.5s;}
@keyframes cfStepReveal{to{opacity:1;transform:translateY(0);}}
/* Upload hint */
.cf-upload-hint{font-size:11px;color:#7a5828;margin-bottom:18px;letter-spacing:0.2px;}
.cf-step-arrow{color:#6040a0;font-size:14px;}
.cf-begin-btn{background:linear-gradient(135deg,#c07830,#7a3a08);border:none;color:#fff;font-size:16px;font-weight:700;padding:16px;border-radius:16px;cursor:pointer;box-shadow:0 4px 24px rgba(180,100,30,.45);width:100%;max-width:280px;}
.cf-begin-btn:disabled,.hf-begin-btn:disabled{opacity:.72;cursor:not-allowed;box-shadow:none;}
.analysis-btn-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;margin-right:8px;vertical-align:-2px;}

/* Preview card */
.cf-preview-card{background:linear-gradient(160deg,#1a0a05,#0d0310);border-radius:22px;padding:28px 22px;border:1px solid rgba(180,100,30,.35);text-align:center;margin-bottom:16px;}
.cf-preview-img-wrap{position:relative;width:150px;height:190px;border-radius:20px;overflow:hidden;border:3px solid #c07830;margin:0 auto 16px;box-shadow:0 0 28px rgba(180,100,30,.4);}
.cf-preview-img{width:100%;height:100%;object-fit:cover;display:block;}
.cf-preview-badge{position:absolute;bottom:0;left:0;right:0;background:rgba(52,211,153,.88);color:#fff;font-size:10px;font-weight:700;padding:4px;letter-spacing:.5px;text-align:center;}

/* Result photo strip */
.cf-result-photo-wrap{display:flex;align-items:center;gap:12px;background:rgba(180,100,30,.08);border:1px solid rgba(180,100,30,.2);border-radius:14px;padding:12px;margin-bottom:14px;}
.cf-result-img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid #c07830;flex-shrink:0;}
.cf-result-photo-label{font-size:11px;color:#a07840;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}

/* AI insight banner */
.cf-ai-banner{display:flex;align-items:flex-start;gap:10px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.22);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:12px;color:#c0a8e0;line-height:1.65;}
.cf-ai-dot{width:8px;height:8px;border-radius:50%;background:#8b5cf6;flex-shrink:0;margin-top:3px;animation:pulse 2s ease-in-out infinite;}

/* Hand fortune */
.hf-begin-btn{background:linear-gradient(135deg,#c026d3,#7c3aed);border:none;color:#fff;font-size:16px;font-weight:800;padding:16px;border-radius:16px;cursor:pointer;box-shadow:0 4px 24px rgba(192,38,211,.4);width:100%;max-width:300px;transition:transform 0.15s,box-shadow 0.2s;}
.hf-begin-btn:active{transform:scale(0.98);box-shadow:0 8px 32px rgba(192,38,211,.5);}
.hf-card{background:linear-gradient(160deg,#130530,#08031c);border-radius:22px;padding:24px 22px 28px;border:1px solid rgba(236,72,153,.22);text-align:center;margin-bottom:16px;}
/* Palm hero */
.hf-hero-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;}
.hf-hero-glow{position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,0.14) 0%,rgba(139,92,246,0.08) 50%,transparent 70%);animation:hfGlowBreath 3.2s ease-in-out infinite;pointer-events:none;}
@keyframes hfGlowBreath{0%,100%{opacity:0.6;transform:scale(1);}50%{opacity:1;transform:scale(1.2);}}
.hf-hero-icon{width:96px;height:96px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 0 14px rgba(236,72,153,0.17));animation:hfPalmFloat 3.6s ease-in-out infinite;}
@keyframes hfPalmFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
/* Card text */
.hf-card-title{font-size:20px;font-weight:900;color:#f0d060;margin-bottom:8px;}
.hf-card-sub{font-size:13px;color:#c48aaa;line-height:1.65;margin-bottom:18px;max-width:280px;margin-left:auto;margin-right:auto;}
/* Analysis chips */
.hf-analysis-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px;}
.hf-chip{padding:6px 12px;border-radius:20px;font-size:11px;font-weight:700;opacity:0;transform:translateY(6px);animation:hfChipReveal 0.35s ease-out forwards;}
@keyframes hfChipReveal{to{opacity:1;transform:translateY(0);}}
.hf-chip-1{background:rgba(244,114,182,0.12);border:1px solid rgba(244,114,182,0.3);color:#f9a8d4;animation-delay:0.05s;}
.hf-chip-2{background:rgba(167,139,250,0.12);border:1px solid rgba(167,139,250,0.3);color:#c4b5fd;animation-delay:0.15s;}
.hf-chip-3{background:rgba(110,231,183,0.1);border:1px solid rgba(110,231,183,0.25);color:#6ee7b7;animation-delay:0.25s;}
.hf-chip-4{background:rgba(240,208,96,0.1);border:1px solid rgba(240,208,96,0.25);color:#f0d060;animation-delay:0.35s;}
/* Prep steps */
.hf-steps-row{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.hf-prep-step{padding:6px 12px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid rgba(236,72,153,.3);color:#f9a8d4;background:rgba(236,72,153,.1);opacity:0;transform:translateY(6px);animation:hfChipReveal 0.35s ease-out forwards;}
.hf-prep-step--purple{border-color:rgba(139,92,246,.35);color:#c4b5fd;background:rgba(139,92,246,.14);}
.hf-prep-1{animation-delay:0.1s;}
.hf-prep-2{animation-delay:0.25s;}
.hf-prep-3{animation-delay:0.4s;}
/* Trust note */
.hf-trust-note{font-size:11px;color:#7858a0;margin-bottom:18px;letter-spacing:0.2px;}
/* ── Palm error active state ── */
#hand-analysis-overlay.hf-error-active .fortune-loading-kicker{display:none;}
#hand-analysis-overlay.hf-error-active{
  align-items:center;
  justify-content:center;
  /* Subtract topbar (60px + safe-top) and bottom nav (96px + safe-bottom) so the
     error card is visually centered between them, not just in viewport-minus-nav. */
  min-height:calc(100vh - 60px - var(--safe-top,0px) - env(safe-area-inset-bottom,0px) - 96px);
  padding:0 20px;
}
/* ── Palm result: remove top gradient glow ── */
#hand.palm-result-active{background:#04010f;}
/* ── Palm preview card padding ── */
#hand-preview-card{padding:28px 24px;}
/* ── Palm unified style (upload sheet, checking/preview card, error card) ── */
#hand-upload-modal .cf-modal-sheet{
  background:linear-gradient(180deg,rgba(31,8,55,0.96) 0%,rgba(18,4,38,0.98) 100%);
  border:1px solid rgba(212,72,160,0.36);
  border-radius:32px;
  box-shadow:inset 0 1px 0 rgba(255,160,220,0.06),0 16px 44px rgba(0,0,0,0.42),0 0 28px rgba(212,72,160,0.10);
}
#hand-upload-modal .cf-modal-close{background:rgba(31,8,55,0.82);border:1px solid rgba(212,72,160,0.34);color:#fce7f3;box-shadow:none;}
#hand-upload-modal .cf-modal-title{color:#fce7f3;font-weight:800;}
#hand-upload-modal .cf-modal-sub{color:rgba(252,231,243,0.72);}
#hand-upload-modal .cf-privacy-notice{background:rgba(31,8,55,0.72);border:1px solid rgba(212,72,160,0.28);color:rgba(252,231,243,0.78);}
#hand-upload-modal .cf-upload-btn{background:rgba(24,5,44,0.72);border:1px solid rgba(212,72,160,0.34);border-radius:18px;color:#fce7f3;}
#hand-upload-modal .cf-upload-btn:active{background:rgba(212,72,160,0.18);}
#hand-upload-modal .cf-upload-label{color:#fce7f3;}
#hand-upload-modal .cf-upload-sub{color:rgba(252,231,243,0.62);}
#hand-upload-modal .cf-cancel-btn{color:rgba(244,114,182,0.95);}

.hf-preview-card{
  background:linear-gradient(180deg,rgba(31,8,55,0.96) 0%,rgba(18,4,38,0.98) 100%);
  border-radius:28px;
  border:1px solid rgba(212,72,160,0.36);
  box-shadow:inset 0 1px 0 rgba(255,160,220,0.06),0 12px 38px rgba(0,0,0,0.34),0 0 28px rgba(212,72,160,0.10);
  padding:28px 22px;
  text-align:center;
  margin-bottom:16px;
}
#hf-error-state{
  background:linear-gradient(180deg,rgba(31,8,55,0.96) 0%,rgba(18,4,38,0.98) 100%);
  border:1px solid rgba(212,72,160,0.36);
  border-radius:28px;
  box-shadow:inset 0 1px 0 rgba(255,160,220,0.06),0 8px 32px rgba(0,0,0,0.28),0 0 28px rgba(212,72,160,0.10);
  width:calc(100% - 40px);
  max-width:420px;
  margin:0 auto;
  padding:34px 24px 38px;
  box-sizing:border-box;
}
.hf-error-kicker{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(232,191,90,0.9);margin-bottom:18px;}
#hf-error-state .hf-begin-btn{max-width:none;margin-top:16px;}
.hf-preview-img-wrap{position:relative;width:150px;height:190px;border-radius:20px;overflow:hidden;border:3px solid #ec4899;margin:0 auto 16px;box-shadow:0 0 28px rgba(236,72,153,.35);}
.hf-preview-img{width:100%;height:100%;object-fit:cover;}
.hf-preview-badge{position:absolute;bottom:0;left:0;right:0;background:rgba(52,211,153,.88);color:#fff;font-size:10px;font-weight:700;padding:4px;letter-spacing:.5px;text-align:center;}
.hf-result-photo-wrap{display:flex;align-items:center;gap:12px;background:rgba(236,72,153,.08);border:1px solid rgba(236,72,153,.2);border-radius:14px;padding:12px;margin-bottom:14px;}
.hf-result-img{width:56px;height:72px;border-radius:12px;object-fit:cover;border:2px solid #ec4899;flex-shrink:0;}
.hf-line-card{background:linear-gradient(160deg,#14051f,#07021a);border-radius:18px;padding:18px;border:1px solid rgba(236,72,153,.22);margin-bottom:12px;}
.hf-summary-card{margin-bottom:14px;}

/* Hand selection modal cards (left / right) */
.hand-select-sheet{max-height:92vh;overflow-y:auto;}
.hand-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 18px;}
.hand-pick-card{background:linear-gradient(160deg,#130530,#08031c);border:1px solid rgba(236,72,153,.22);border-radius:18px;padding:16px 12px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.hand-pick-icon{font-size:38px;line-height:1;margin-bottom:8px;}
.hand-pick-icon-left{transform:scaleX(-1);}
.hand-pick-label{font-size:14px;font-weight:800;color:#f0d060;letter-spacing:0.5px;margin-bottom:10px;}
.hand-pick-bullets{list-style:none;padding:0;margin:0 0 14px;text-align:left;width:100%;}
.hand-pick-bullets li{position:relative;font-size:12px;color:#c0a8e0;line-height:1.5;padding-left:14px;margin-bottom:6px;}
.hand-pick-bullets li::before{content:"•";position:absolute;left:2px;top:0;color:#a78bfa;font-weight:800;}
.hand-pick-cta{width:100%;background:linear-gradient(135deg,#6366f1,#a855f7);border:none;color:#fff;font-size:13px;font-weight:800;padding:11px 8px;border-radius:12px;cursor:pointer;margin-top:auto;}
.hand-pick-cta:active{transform:scale(0.97);}
.hand-pick-helper{background:rgba(139,92,246,0.08);border:1px solid rgba(139,92,246,0.18);border-radius:14px;padding:12px 14px;margin-top:6px;}
.hand-pick-helper-title{font-size:12px;font-weight:800;color:#f0d060;margin-bottom:8px;}
.hand-pick-helper-line{font-size:12px;color:#b898e0;line-height:1.5;margin-bottom:4px;}
.hand-pick-helper-line:last-child{margin-bottom:0;}

/* Hand-select & hand-upload modal: shrink close button ~20% and shift up 3px */
#hand-select-modal .cf-modal-close,
#hand-upload-modal .cf-modal-close{
  width:30px;height:30px;font-size:19px;top:13px;right:13px;
}
/* Tighten gap between modal title and subline (helper) on both palm modals */
#hand-select-modal .cf-modal-title,
#hand-upload-modal .cf-modal-title{margin-bottom:10px;}
#hand-select-modal .cf-upload-helper,
#hand-upload-modal .cf-upload-helper{margin-top:0;}

/* Hand context card (top of result page) */
.hf-hand-context{background:linear-gradient(160deg,rgba(139,92,246,0.16),rgba(236,72,153,0.08));border:1px solid rgba(167,139,250,0.32);border-radius:16px;padding:14px 16px;margin-bottom:14px;}
.hf-hand-context-title{font-size:12px;font-weight:800;color:#f0d060;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.hf-hand-context-desc{font-size:13px;color:#c0a8e0;line-height:1.6;}
.hf-line-title{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:11px;font-weight:800;color:#f0d060;letter-spacing:1px;text-transform:uppercase;}
.hf-line-text{font-size:13px;color:#c0a8e0;line-height:1.8;}
.hf-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.hf-metric{background:rgba(255,255,255,.04);border:1px solid rgba(236,72,153,.16);border-radius:14px;padding:12px;text-align:left;}
.hf-metric--full{grid-column:1 / -1;}
.hf-metric-label{font-size:10px;color:#9878c0;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;font-weight:800;}
.hf-metric-value{font-size:18px;color:#ede9fe;font-weight:900;}

/* Dream interpretation */
/* Dream hero */
.df-hero-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;}
.df-hero-glow{position:absolute;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,0.22) 0%,rgba(96,165,250,0) 70%);animation:dfGlowBreath 3.2s ease-in-out infinite;}
.df-hero-icon{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(96,165,250,.50));animation:dfIconFloat 3.6s ease-in-out infinite;position:relative;z-index:1;}
@keyframes dfIconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes dfGlowBreath{0%,100%{opacity:0.55;transform:scale(1);}50%{opacity:1;transform:scale(1.2);}}
.df-card{background:linear-gradient(160deg,#081633,#07021a);border-radius:22px;padding:22px;border:1px solid rgba(96,165,250,.28);box-shadow:0 8px 28px rgba(0,0,0,.28);margin-bottom:16px;}
.df-title{text-align:center;font-size:26px;font-weight:900;color:#ede9fe;margin-bottom:6px;}
.df-sub{text-align:center;font-size:13.5px;color:#a8c4f0;line-height:1.65;margin-bottom:14px;}
.df-question{font-size:16px;font-weight:800;color:#c8a8f0;margin-bottom:10px;letter-spacing:0.2px;}
.df-textarea{width:100%;min-height:150px;border-radius:18px;border:1px solid rgba(139,92,246,.18);background:rgba(255,255,255,.025);color:#ede9fe;font-family:inherit;font-size:15px;line-height:1.6;padding:15px 16px;outline:none;resize:none;box-sizing:border-box;transition:border-color 0.25s,background 0.25s,box-shadow 0.25s;box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);}
.df-textarea:focus{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 0 0 3px rgba(139,92,246,0.08);}
.df-textarea::placeholder{color:#6b7da3;}
/* Symbol hints strip */
.df-symbol-hints{margin:10px 0 4px;animation:dfHintsReveal 0.35s ease-out;}
@keyframes dfHintsReveal{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.df-hints-label{font-size:9.5px;font-weight:700;color:#6070a0;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:7px;}
.df-hints-strip{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.df-hints-strip::-webkit-scrollbar{display:none;}
.df-hint-chip{flex-shrink:0;display:flex;align-items:center;gap:5px;background:rgba(96,165,250,0.07);border:1px solid rgba(96,165,250,0.18);border-radius:20px;padding:5px 10px 5px 8px;animation:dfChipPop 0.28s ease-out both;}
@keyframes dfChipPop{from{opacity:0;transform:scale(0.82);}to{opacity:1;transform:scale(1);}}
.df-hint-chip-emoji{font-size:14px;line-height:1;}
.df-hint-chip-label{font-size:11px;font-weight:700;color:#a8c4f0;}
.df-hint-chip-hint{font-size:10px;color:#5a7aaa;}
.df-helper-prompts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px;}
.df-helper-prompt{font-size:11px;font-weight:800;color:#9fb7e8;background:rgba(96,165,250,.07);border:1px solid rgba(96,165,250,.16);border-radius:12px;padding:8px 10px;line-height:1.25;}
.df-btn{width:100%;background:linear-gradient(135deg,#60a5fa,#6d28d9);border:none;color:#fff;font-size:16px;font-weight:900;padding:16px;border-radius:16px;cursor:pointer;box-shadow:0 4px 24px rgba(96,165,250,.32);margin-top:14px;transition:transform .16s ease,filter .18s ease,box-shadow .18s ease;}
.df-btn:active{transform:scale(.985);filter:brightness(1.07);box-shadow:0 7px 28px rgba(96,165,250,.38);}
.df-btn:disabled{opacity:.55;cursor:not-allowed;}
.df-btn:disabled:active{transform:none;filter:none;}
/* ── Dream / Coffee top spacing ──
   These screens have no global navbar and no section-topbar.
   The inner main-view gets --bare-screen-top-gap to push hero below DI.
   The hero container's 40px inline padding is zeroed out so spacing is
   handled solely by --bare-screen-top-gap on the container. */
#dream-main-view{
  padding-top:var(--bare-screen-top-gap) !important;
}
#coffee-main-view{
  padding-top:var(--bare-screen-top-gap) !important;
}
/* Zero out the hero section's own 40px inline padding (already accounted for above) */
.dream-input-section > div:first-child{
  padding-top:0 !important;
}
.coffee-input-section > div:first-child{
  padding-top:0 !important;
}

.dream-result-active .dream-input-section{display:none;}
.dream-result-active #dream-result{display:block;}
.dream-result-active #dream-main-view{padding:calc(var(--safe-top) + 15px) 20px 20px !important;}
.coffee-result-active .coffee-input-section{display:none;}
.coffee-result-active #coffee-reading{display:block !important;}
.coffee-result-active #coffee-main-view{padding:calc(var(--safe-top) + 15px) 20px 20px !important;}
#hand.palm-loading-active #hand-section-topbar,
#hand.palm-result-active #hand-section-topbar{display:none !important;}
#hand.palm-loading-active ~ #global-top-navbar,
body:has(#hand.palm-loading-active) #global-top-navbar{display:none !important;}
/* Hand has a section-topbar — it starts at y=0 of screen (#hand padding-top:0).
   The topbar's own padding-top handles safe-area clearance. */
#hand-section-topbar{
  padding-top:calc(var(--safe-top) + 10px);
  min-height:calc(68px + var(--safe-top));
  box-sizing:border-box;
}
/* Privacy Policy and Terms — own section-topbar, no global navbar */
#privacy-policy .section-topbar,
#terms-conditions .section-topbar{
  padding-top:calc(var(--safe-top) + 8px);
  min-height:calc(60px + var(--safe-top));
  box-sizing:border-box;
}

/* ── Legal pages: fixed header + independently scrolling content ── */
#privacy-policy,
#terms-conditions{
  flex-direction:column !important;
  overflow:hidden !important;
  height:100svh !important;
  height:100vh !important; /* fallback */
  padding-bottom:0 !important;
}
#privacy-policy.active,
#terms-conditions.active{
  display:flex !important;
}
#privacy-policy .section-topbar,
#terms-conditions .section-topbar{
  flex:0 0 auto;
}
#privacy-policy .sd-content,
#terms-conditions .sd-content{
  flex:1 1 auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  padding:0 15px calc(env(safe-area-inset-bottom, 0px) + 100px) !important;
  box-sizing:border-box !important;
}
#privacy-policy .sd-content .sd-body,
#terms-conditions .sd-content .sd-body{
  overflow:visible !important;
  padding-bottom:0 !important;
}
#privacy-policy .privacy-policy-text,
#terms-conditions .privacy-policy-text{
  max-height:none !important;
  overflow-y:visible !important;
}
/* Subtle scrollbar */
#privacy-policy .sd-content::-webkit-scrollbar,
#terms-conditions .sd-content::-webkit-scrollbar{
  width:4px;
}
#privacy-policy .sd-content::-webkit-scrollbar-thumb,
#terms-conditions .sd-content::-webkit-scrollbar-thumb{
  background:rgba(139,92,246,0.35);
  border-radius:999px;
}
#privacy-policy .sd-content::-webkit-scrollbar-track,
#terms-conditions .sd-content::-webkit-scrollbar-track{
  background:transparent;
}
/* When topbar is hidden (palm result), give the main-view the safe-area top */
#hand.palm-result-active #hand-main-view{padding:8px 20px 20px !important;}
#hand-section-topbar.hand-topbar-hidden{display:none !important;}
#hand.palm-result-active .hand-input-section{display:none;}
#hand.palm-result-active #hand-reading{display:block !important;}
.fortune-result-header{position:relative;width:100%;min-height:40px;display:flex;align-items:flex-start;justify-content:flex-start;margin-bottom:4px;}
.fortune-result-back{position:relative;top:auto;left:auto;box-shadow:0 0 16px rgba(139,92,246,.14);}
.df-result{display:none;background:var(--bg-card);border-radius:22px;padding:20px;border:1px solid rgba(139,92,246,.25);margin-bottom:16px;}
.df-zodiac-note{display:none;font-size:12px;color:#9fb7e8;line-height:1.6;background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.14);border-radius:14px;padding:12px 14px;margin-bottom:8px;}
.df-section{padding:14px 0;border-bottom:1px solid rgba(139,92,246,.12);}
.df-section:last-child{border-bottom:none;padding-bottom:0;}
.df-section-title{font-size:12px;font-weight:900;color:#f0d060;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.df-section-text{font-size:13px;color:#c0a8e0;line-height:1.75;}
.df-overview-text{
  background:rgba(96,165,250,.06);
  border:1px solid rgba(96,165,250,.14);
  border-radius:14px;
  padding:12px 14px;
  color:#e7ddff;
}
.df-keyword-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.df-keyword-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(139,92,246,.1);
  border:1px solid rgba(139,92,246,.22);
  color:#d9c5ff;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
}
.df-keyword-empty{
  font-size:12px;
  color:#8e78b2;
}
.df-note{font-size:11px;color:#6478a8;line-height:1.55;margin-top:12px;text-align:center;}
.result-disclaimer{font-size:11px;color:#7058a0;line-height:1.55;margin:14px 4px 4px;text-align:center;opacity:0.85;}
.df-share-btn{width:100%;border:none;border-radius:16px;padding:14px 16px;margin-top:16px;background:linear-gradient(135deg,#60a5fa,#9d6ff0 55%,#6d28d9);color:#fff;font-size:14px;font-weight:950;cursor:pointer;box-shadow:0 10px 24px rgba(96,165,250,.24),0 0 18px rgba(139,92,246,.14);}
.df-share-btn:active{transform:scale(.985);filter:brightness(1.05);}
.df-loading{display:none;background:linear-gradient(160deg,#081633,#07021a);border-radius:22px;padding:24px 20px;border:1px solid rgba(96,165,250,.28);box-shadow:0 10px 30px rgba(0,0,0,.3);margin-bottom:16px;text-align:center;}
.dream-loading-screen{
  align-items:center !important;
  justify-content:flex-start !important;
  padding-top:calc(var(--safe-top) + 20px) !important;
  padding-bottom:var(--screen-bottom-gap) !important;
}
.dream-loading-screen .fortune-loading-shell{
  background:var(--bg-elevated);
  border-radius:24px;
  padding:28px 20px 22px;
  border:1px solid rgba(139,92,246,.35);
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  box-sizing:border-box;
}
.dream-loading-screen .fortune-loading-kicker{
  color:rgba(159,183,232,.82);
}
.df-loading-moon{font-size:48px;margin-bottom:12px;filter:drop-shadow(0 0 24px rgba(96,165,250,.75));animation:float 3s ease-in-out infinite;}
.df-loading-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(96,165,250,.18);border-top-color:#60a5fa;margin:0 auto 12px;animation:spin 1s linear infinite;}
.df-loading-title{font-size:16px;font-weight:900;color:#ede9fe;margin-bottom:16px;}
.df-loading-steps{display:flex;flex-direction:column;gap:8px;text-align:left;}
.df-loading-step{font-size:13px;color:#3d5d8c;padding:10px 12px;border-radius:12px;border:1px solid transparent;opacity:.18;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease,color .35s ease,background .35s ease,border-color .35s ease;}
.df-loading-step.show{opacity:.82;transform:translateY(0);color:#9fb7e8;}
.df-loading-step.active{opacity:1;color:#eef5ff;background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.24);box-shadow:0 0 18px rgba(96,165,250,.1);}

/* ══ YOUR SOULMATE ══ */

/* Heart pulse animation */
@keyframes smPulse{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.18);opacity:1;}}

/* Sign comparison row */
#soulmate .compat-row{
  justify-content:center;
  gap:0;
}
#soulmate .compat-sign-select{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:80px;
}
#soulmate .sign-bubble{
  width:72px;
  height:72px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background:linear-gradient(135deg,#1a0535,#2d1060);
  border:1.5px solid rgba(139,92,246,.3);
  transition:border-color .2s ease, box-shadow .2s ease;
}
#soulmate .sign-bubble.locked{
  background:linear-gradient(135deg,#2d0e3a,#4a1a60) !important;
  border:1.5px solid rgba(240,140,180,.65) !important;
  box-shadow:0 0 22px rgba(240,140,180,.28), 0 0 10px rgba(139,92,246,.2) !important;
}
#soulmate .sign-bubble.empty{
  font-size:22px;
  color:rgba(152,120,192,.55);
  border:1.5px dashed rgba(139,92,246,.3);
  background:rgba(139,92,246,.06);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#soulmate .sign-bubble.empty:hover,
#soulmate #sm-sign-b-select:hover .sign-bubble.empty{
  border-color:rgba(240,140,180,.55);
  background:rgba(240,140,180,.08);
  box-shadow:0 0 16px rgba(240,140,180,.18);
}
#soulmate .sign-bubble.selected{
  border:1.5px solid rgba(240,140,180,.65);
  box-shadow:0 0 22px rgba(240,140,180,.28), 0 0 10px rgba(139,92,246,.2);
  background:linear-gradient(135deg,#2d0e3a,#4a1a60);
}
#soulmate .sign-bubble-label{
  font-size:11px;
  font-weight:700;
  color:#9878c0;
  letter-spacing:.4px;
  text-align:center;
}

/* Heart connector */
#soulmate .compat-vs{
  display:none; /* replaced by heart connector in HTML */
}

/* Picker panel */
#sm-picker-panel{
  background:linear-gradient(160deg,rgba(26,5,53,.95),rgba(13,4,34,.98));
  border:1px solid rgba(240,140,180,.18);
  border-radius:20px;
  padding:18px 14px 14px;
  margin-bottom:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}

/* Picker grid — 3 columns */
#sm-picker-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

/* Soulmate screen refinements */
.sm-locked-bubble{background:linear-gradient(135deg,#2a1045,#3d1a6e)!important;border:2px solid rgba(139,92,246,.5)!important;}
.sm-pick-bubble{border:2px dashed rgba(240,140,180,.55)!important;color:rgba(240,140,180,.9)!important;font-size:26px!important;}
.sm-pick-side:active .sm-pick-bubble{transform:scale(.94);}
.sm-pick-label{color:rgba(240,140,180,.8)!important;font-size:11px!important;font-weight:600!important;}
.sm-helper-text{font-size:11.5px;color:rgba(152,120,192,.6);text-align:center;margin:-4px 0 14px;line-height:1.5;}

/* Sign item cards */
.sm-sign-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:10px 6px;
  border-radius:14px;
  background:rgba(139,92,246,.07);
  border:1px solid rgba(139,92,246,.15);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
  -webkit-tap-highlight-color:transparent;
}
.sm-sign-item:hover{
  background:rgba(240,140,180,.1);
  border-color:rgba(240,140,180,.3);
  box-shadow:0 0 12px rgba(240,140,180,.14);
}
.sm-sign-item:active{
  transform:scale(.95);
}
.sm-sign-item.active{
  background:linear-gradient(135deg,rgba(240,140,180,.15),rgba(139,92,246,.15));
  border-color:rgba(240,140,180,.55);
  box-shadow:0 0 16px rgba(240,140,180,.22), 0 0 8px rgba(139,92,246,.15);
}
.sm-sign-item-emoji{
  font-size:22px;
  line-height:1;
}
.sm-sign-item-name{
  font-size:10px;
  font-weight:700;
  color:#b090d8;
  letter-spacing:.3px;
  text-align:center;
}
.sm-sign-item.active .sm-sign-item-name{
  color:#f0d8f0;
}

/* CTA button */
#sm-reveal-btn{
  width:100%;
  border:none;
  border-radius:18px;
  padding:15px 20px;
  font-family:inherit;
  font-size:15px;
  font-weight:900;
  letter-spacing:.3px;
  cursor:pointer;
  transition:opacity .2s ease, box-shadow .2s ease, transform .1s ease;
}
#sm-reveal-btn.disabled,
#sm-reveal-btn:disabled{
  background:linear-gradient(135deg,#2a1045,#3d1a6e);
  color:rgba(152,120,192,.45);
  box-shadow:none;
  cursor:default;
  opacity:.6;
}
#sm-reveal-btn:not(:disabled):not(.disabled){
  background:linear-gradient(135deg,#c84b7a,#9d4fbd 50%,#6d28d9);
  color:#fff;
  box-shadow:0 8px 28px rgba(200,75,120,.35), 0 0 18px rgba(139,92,246,.2);
}
#sm-reveal-btn:not(:disabled):not(.disabled):active{
  transform:scale(.98);
  filter:brightness(1.06);
}

/* Result container */
/* ── SOULMATE LOADING CARD ── */
.sm-loading-screen{
  padding-top:18px;
}
.sm-loading-screen-kicker{
  font-size:11px;
  font-weight:900;
  color:rgba(240,140,180,.62);
  letter-spacing:2px;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:12px;
}
.sm-loading-card{
  background:linear-gradient(160deg,#130430,#07021a);
  border:1px solid rgba(240,140,180,0.22);
  border-radius:22px;
  padding:32px 20px 28px;
  text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,0.5), 0 0 40px rgba(240,140,180,0.06);
  animation:smLoadIn 0.4s cubic-bezier(.22,.8,.28,1);
}
@keyframes smLoadIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.sm-loading-signs{
  display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:18px;
}
.sm-loading-sign{
  width:68px;height:68px;border-radius:50%;
  background:linear-gradient(135deg,#1e0840,#2d1060);
  border:1.5px solid rgba(240,140,180,0.4);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 18px rgba(240,140,180,0.18);
  flex-shrink:0;
  overflow:hidden;
}
.sm-loading-sign img{
  width:100% !important;
  height:100% !important;
  display:block;
  object-fit:cover !important;
  border-radius:50%;
  transform:scale(1.16);
  transform-origin:center;
}
.sm-loading-sign-a{ animation:smSignPulse 2s ease-in-out infinite; }
.sm-loading-sign-b{ animation:smSignPulse 2s ease-in-out 1s infinite; }
@keyframes smSignPulse{
  0%,100%{box-shadow:0 0 14px rgba(240,140,180,0.18);}
  50%{box-shadow:0 0 28px rgba(240,140,180,0.5), 0 0 8px rgba(192,132,252,0.3);}
}
.sm-loading-connection{
  display:flex;flex-direction:column;align-items:center;
  width:70px;flex-shrink:0;position:relative;
}
.sm-loading-spark{
  width:70px;height:20px;overflow:visible;
}
.sm-loading-spark path{
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:smSparkDraw 1.5s ease-in-out infinite;
}
@keyframes smSparkDraw{
  0%{stroke-dashoffset:120;opacity:0.3;}
  50%{stroke-dashoffset:0;opacity:1;}
  100%{stroke-dashoffset:-120;opacity:0.3;}
}
.sm-loading-heart{
  font-size:20px;color:#f472b6;margin-top:2px;
  animation:smHeartBeat 1.2s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(244,114,182,0.7));
}
@keyframes smHeartBeat{
  0%,100%{transform:scale(1);}
  30%{transform:scale(1.35);}
  60%{transform:scale(1.1);}
}
.sm-loading-pair-label{
  font-size:14px;font-weight:800;color:#f0c8e0;
  letter-spacing:0.5px;margin-bottom:14px;
}
.sm-loading-msg{
  font-size:13px;color:#b898e0;line-height:1.5;
  margin-bottom:18px;min-height:20px;
  transition:opacity 0.3s ease;
}
.sm-loading-progress-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 8px 10px;
}
.sm-loading-progress-label{
  font-size:10px;
  font-weight:800;
  color:rgba(240,140,180,.44);
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.sm-loading-bar-wrap{
  height:5px;background:rgba(255,255,255,0.07);
  border-radius:99px;overflow:hidden;margin:0 8px 10px;
}
.sm-loading-bar-fill{
  height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#f472b6,#c084fc,#818cf8);
  transition:width 0.15s linear;
}
.sm-loading-pct{
  font-size:14px;font-weight:900;color:#f0c8e0;
  letter-spacing:.3px;
}
#sm-result{
  border-radius:22px;
  overflow:hidden;
}
.sm-result-card{
  background:linear-gradient(160deg,#100525,#07021a);
  border:1px solid rgba(240,140,180,.2);
  border-radius:22px;
  padding:20px 18px;
  box-shadow:0 10px 40px rgba(0,0,0,.4), 0 0 30px rgba(240,140,180,.06);
}
.sm-result-header{
  text-align:center;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(240,140,180,.12);
}
.sm-result-pair{
  font-size:20px;
  font-weight:900;
  color:#f0e8ff;
  letter-spacing:-.2px;
  margin-bottom:4px;
}
.sm-result-verdict{
  font-size:11px;
  font-weight:800;
  color:#f472b6;
  letter-spacing:1.8px;
  text-transform:uppercase;
  margin-bottom:12px;
  text-shadow:0 0 12px rgba(244,114,182,0.5);
}
.sm-score-wrap{
  display:flex;align-items:baseline;justify-content:center;gap:3px;
  margin-bottom:10px;
}
.sm-score-num{
  font-size:42px;font-weight:900;line-height:1;
  background:linear-gradient(135deg,#f9a8d4,#c084fc);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:-1px;
}
.sm-score-denom{
  font-size:14px;font-weight:700;
  color:rgba(240,140,180,.4);padding-bottom:4px;
}
.sm-score-bar-wrap{
  height:5px;background:rgba(255,255,255,0.07);
  border-radius:99px;overflow:hidden;margin:0 8px;
}
.sm-score-bar-fill{
  height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#f472b6,#c084fc);
  transition:width 1.1s cubic-bezier(.4,0,.2,1);
}
.sm-section{
  padding:14px 0;
  border-bottom:1px solid rgba(139,92,246,.1);
  position:relative;
}
.sm-section:last-of-type{
  border-bottom:none;
  padding-bottom:0;
}
.sm-section-title{
  font-size:10px;
  font-weight:900;
  color:rgba(240,140,180,.75);
  letter-spacing:1.8px;
  text-transform:uppercase;
  margin-bottom:8px;
}
.sm-section-text{
  font-size:13.5px;
  color:#ddd0f8;
  line-height:1.85;
}
.sm-bullet-list{
  margin:0;
  padding:0 0 0 18px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.sm-bullet-list li{
  font-size:13px;
  color:#ddd0f8;
  line-height:1.6;
}
.sm-conclusion .sm-section-title{ color:#f0d060; }
.sm-conclusion-text{ color:#f0e8a0; font-style:italic; }
.sm-share-btn{
  width:100%;
  border:none;
  border-radius:16px;
  padding:13px 16px;
  margin-top:18px;
  background:linear-gradient(135deg,rgba(240,140,180,.15),rgba(139,92,246,.18));
  border:1px solid rgba(240,140,180,.25);
  color:#f0c8e0;
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  letter-spacing:.3px;
  cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease;
}
.sm-share-btn:active{
  background:linear-gradient(135deg,rgba(240,140,180,.22),rgba(139,92,246,.26));
  box-shadow:0 0 18px rgba(240,140,180,.18);
}
.sm-try-btn{
  width:100%;
  border:1px solid rgba(240,140,180,.25);
  border-radius:15px;
  background:rgba(240,140,180,.05);
  color:#f0c8e0;
  font-family:inherit;
  font-size:13.5px;
  font-weight:800;
  padding:14px;
  cursor:pointer;
  margin-top:10px;
  letter-spacing:.3px;
  transition:background .15s ease, border-color .15s ease;
}
.sm-try-btn:active{
  background:rgba(240,140,180,.12);
  border-color:rgba(240,140,180,.5);
}

/* ══ HELP CENTER ══ */
.hc-contact-card{
  font-size:13px;
  color:#b090d8;
  line-height:1.7;
  margin-bottom:20px;
  padding:14px 16px;
  background:linear-gradient(160deg,rgba(24,8,54,.9),rgba(10,3,28,.92));
  border:1px solid rgba(139,92,246,.18);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.2), inset 0 0 26px rgba(139,92,246,.06);
}
.hc-contact-link{
  color:#a78bfa;
  font-weight:700;
  text-decoration:none;
}
.hc-contact-link:active{
  color:#d8c1ff;
}
.hc-group-title{font-size:10px;font-weight:900;color:rgba(240,208,96,.6);letter-spacing:2px;text-transform:uppercase;margin:22px 0 10px;}
.hc-item{background:rgba(13,4,34,.8);border:1px solid rgba(139,92,246,.15);border-radius:16px;margin-bottom:8px;overflow:hidden;cursor:pointer;transition:border-color .2s ease;}
.hc-item:active{border-color:rgba(139,92,246,.4);}
.hc-item.open{border-color:rgba(139,92,246,.35);}
.hc-question{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;font-size:14px;font-weight:700;color:#e8d8ff;line-height:1.4;width:100%;background:none;border:none;font-family:inherit;text-align:left;cursor:pointer;}
.hc-chevron{font-size:18px;color:#6d28d9;flex-shrink:0;transition:transform .22s ease;display:inline-block;}
.hc-item.open .hc-chevron{transform:rotate(90deg);}
.hc-answer{display:none;font-size:13px;color:#b090d8;line-height:1.78;padding:0 16px 16px;}

/* ══ TOKEN SYSTEM ══ */

/* Token chip in header */
.token-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #1a0a00;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 8px rgba(245,158,11,.35);
  transition: transform .12s ease, box-shadow .12s ease;
  flex-shrink: 0;
}
.token-chip:active { transform: scale(.95); box-shadow: 0 1px 4px rgba(245,158,11,.2); }

/* Premium gold coin token icon — used in header pill and feature badges */
.tok-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff8d6 0%, #fcd34d 28%, #f59e0b 60%, #d97706 100%);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.30),
    inset 0 1.5px 1px rgba(255,255,255,0.65),
    inset 0 -1px 1px rgba(120,60,0,0.20),
    0 0 6px rgba(245,158,11,0.28);
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
}
.tok-coin::after {
  content: '✦';
  font-size: 7px;
  color: rgba(100,45,0,0.72);
  text-shadow: 0 0.5px 0 rgba(255,255,255,0.5);
  line-height: 1;
  font-weight: 900;
}
/* Slightly smaller version inside feature card badges */
.feat-badge--token .tok-coin {
  width: 13px;
  height: 13px;
}
.feat-badge--token .tok-coin::after { font-size: 5.5px; }

/* Token store overlay */
.token-store-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,1,15,0);
  z-index: 19999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  transition: background 0.35s ease;
}
.token-store-overlay.ts-visible {
  background: rgba(4,1,15,0.72);
}
.token-store-box {
  background: linear-gradient(180deg, #130a2e 0%, #0d0420 60%, #04010f 100%);
  width: 100%;
  max-width: 430px;
  height: 88svh;
  height: 88vh;
  border-radius: 24px 24px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  padding-left: 20px;
  padding-right: 20px;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  touch-action: pan-y;
}
.token-store-overlay.ts-visible .token-store-box {
  transform: translateY(0);
}
.token-store-drag-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  margin: 0 auto 16px;
  flex-shrink: 0;
}
.token-store-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.token-store-title {
  font-size: 20px;
  font-weight: 800;
  color: #fcd34d;
  flex: 1;
}
.token-store-balance {
  font-size: 13px;
  color: #a78bfa;
  font-weight: 600;
}
.token-store-close {
  background: rgba(255,255,255,.08);
  border: none;
  color: #e0d0ff;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Hide navbars when token store is open */
body.token-store-open .global-navbar,
body.token-store-open .bottom-nav,
body.token-store-open .safe-area-top-bg {
  display: none !important;
}
.token-store-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #7c5bc4;
  margin: 18px 0 10px;
}
.token-pkg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.token-pkg-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 16px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.token-pkg-card:active { background: rgba(139,92,246,.12); }
.token-pkg-featured {
  border-color: #f59e0b;
  background: rgba(245,158,11,.08);
}
.token-pkg-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #1a0a00;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.token-pkg-name { font-size: 13px; font-weight: 700; color: #d4c8ff; margin-bottom: 6px; }
.token-pkg-amount { font-size: 30px; font-weight: 900; color: #fcd34d; line-height: 1; }
.token-pkg-unit { font-size: 11px; color: #9ca3af; margin-bottom: 8px; }
.token-pkg-price { font-size: 15px; font-weight: 800; color: #fff; }
.token-pkg-per { font-size: 10px; color: #6b7280; margin-bottom: 10px; }
.token-pkg-btn {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 20px;
  cursor: pointer;
  width: 100%;
  pointer-events: none; /* parent div handles click */
}
.token-pkg-featured .token-pkg-btn { background: linear-gradient(135deg, #f59e0b, #d97706); color: #1a0a00; }

/* Earn list */
.token-earn-list { display: flex; flex-direction: column; gap: 8px; }
.token-earn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(139,92,246,.12);
  border-radius: 12px;
  padding: 10px 12px;
}
.token-earn-icon { font-size: 20px; flex-shrink: 0; }
.token-earn-info { flex: 1; }
.token-earn-name { font-size: 13px; font-weight: 700; color: #e0d0ff; }
.token-earn-desc { font-size: 11px; color: #7c6fa0; }
.token-earn-amount { font-size: 13px; font-weight: 800; color: #fcd34d; white-space: nowrap; }
.token-earn-tappable { cursor: pointer; transition: background .18s; }
.token-earn-tappable:active { background: rgba(139,92,246,.12); }
.token-earn-arrow { font-size: 16px; color: #6b4fa0; margin-left: 6px; flex-shrink: 0; }
.token-earn-status { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; margin-right: 4px; }
.token-earn-status.claimed { background: rgba(52,211,153,.1); color: #6ee7b7; border: 1px solid rgba(52,211,153,.25); }
.token-earn-status.unclaimed { background: rgba(240,208,96,.1); color: #fcd34d; border: 1px solid rgba(240,208,96,.25); }
.token-ad-row { opacity: 0.5; cursor: not-allowed; }
.token-ad-coming { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; background: rgba(139,92,246,.12); color: #a78bfa; border: 1px solid rgba(139,92,246,.25); }
.token-store-note { font-size: 11px; color: #4b3a70; text-align: center; margin-top: 20px; }

/* Token gate modal */
.token-gate-modal {
  position: fixed;
  inset: 0;
  background: rgba(4,1,15,.88);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.token-gate-box {
  background: linear-gradient(180deg, #130a2e 0%, #0d0420 100%);
  border: 1px solid rgba(139,92,246,.4);
  border-radius: 24px;
  padding: 28px 24px;
  text-align: center;
  max-width: 320px;
  width: 100%;
}
.token-gate-icon { font-size: 40px; margin-bottom: 12px; }
.token-gate-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.token-gate-sub { font-size: 14px; color: #a78bfa; line-height: 1.5; margin-bottom: 10px; }
.token-gate-balance {
  font-size: 13px;
  color: #fcd34d;
  font-weight: 700;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 18px;
  display: inline-block;
}
.token-gate-btn-primary {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #1a0a00;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  padding: 13px 0;
  width: 100%;
  cursor: pointer;
  margin-bottom: 10px;
}
.token-gate-btn-secondary {
  background: transparent;
  border: 1px solid rgba(139,92,246,.3);
  color: #a78bfa;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 0;
  width: 100%;
  cursor: pointer;
}

/* Token toast */
.token-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #1e0a4a, #2d1060);
  border: 1px solid rgba(245,158,11,.4);
  color: #fcd34d;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  z-index: 11000;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  transition: opacity .25s ease, transform .25s ease;
}
.token-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══ WELCOME BONUS MODAL ══ */
.welcome-bonus-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .35s ease;
}
.welcome-bonus-overlay.wbm-visible {
  opacity: 1;
}
.welcome-bonus-box {
  background: linear-gradient(160deg, #1a0533 0%, #0f0221 60%, #1a0533 100%);
  border: 1px solid rgba(167,139,250,.35);
  border-radius: 28px;
  padding: 36px 28px 32px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 60px rgba(139,92,246,.35), 0 20px 60px rgba(0,0,0,.6);
  transform: scale(.88) translateY(20px);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.wbm-visible .welcome-bonus-box {
  transform: scale(1) translateY(0);
}
.welcome-bonus-stars {
  font-size: 13px;
  letter-spacing: 10px;
  color: #f59e0b;
  margin-bottom: 12px;
  opacity: .7;
}
.welcome-bonus-emoji {
  font-size: 64px;
  margin-bottom: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(245,158,11,.5));
}
.welcome-bonus-title {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.2;
}
.welcome-bonus-subtitle {
  font-size: 14px;
  color: rgba(196,181,253,.75);
  margin: 0 0 24px;
  line-height: 1.6;
}
.welcome-bonus-amount {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.05));
  border: 1.5px solid rgba(245,158,11,.5);
  border-radius: 20px;
  padding: 16px 40px;
  margin-bottom: 28px;
}
.welcome-bonus-num {
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.welcome-bonus-label {
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
  margin-top: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.welcome-bonus-btn {
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(109,40,217,.5);
  transition: transform .15s ease, box-shadow .15s ease;
  margin-bottom: 12px;
}
.welcome-bonus-btn:active {
  transform: scale(.97);
  box-shadow: 0 3px 12px rgba(109,40,217,.4);
}
.welcome-bonus-hint {
  font-size: 12px;
  color: rgba(196,181,253,.5);
  margin: 0;
}

/* ══ GLOBAL TOP NAVBAR ══ */
.global-navbar {
  display: none; /* shown via showBothNavs() */
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 9000;
  height: var(--header-height);
  padding: 4px 16px 6px;
  padding-top: var(--safe-top);
  align-items: center;
  justify-content: space-between;
  background: var(--app-bg);
  border-bottom: 1px solid rgba(139,92,246,0.16);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.global-navbar-home,
.global-navbar-section{
  width:100%;
  display:flex;
  align-items:center;
}
.global-navbar-home{
  justify-content:space-between;
}
.global-navbar.section-mode .global-navbar-home{
  display:none;
}
.global-navbar:not(.section-mode) .global-navbar-section{
  display:none;
}
.global-navbar-section{
  gap:12px;
}
.global-section-title-wrap{
  min-width:0;
  flex:1;
}
.global-navbar-section-actions{
  margin-left:auto;
  display:none;
  align-items:center;
  gap:10px;
}
.global-navbar.has-actions .global-navbar-section-actions{
  display:flex;
}
.global-navbar-left {
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #e8d5a3, #f5e6c0, #c9a84c, #f0d4a0);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logo-shimmer 5s ease infinite;
  filter: drop-shadow(0 0 8px rgba(200,160,60,0.3));
}
.global-navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-topbar{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:calc(60px + var(--safe-top));
  padding:8px 16px;
  padding-top:calc(var(--safe-top) + 8px);
  background:var(--app-bg);
  border-bottom:1px solid rgba(139,92,246,0.16);
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.section-topbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.back-button{
  width:48px;
  height:48px;
  border-radius:50%;
  appearance:none;
  -webkit-appearance:none;
  background:rgba(255, 255, 255, 0.04);
  border:1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  overflow:hidden;
  padding:0;
  position:relative;
  color:transparent;
  font-size:0;
  line-height:0;
  box-shadow:0 0 10px rgba(168, 85, 247, 0.25);
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.back-button::before{
  content:"";
  width:22px;
  height:22px;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px 22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 5L8 12L15 19' stroke='%23E9D5FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform:translateX(-1px);
}
.back-button:hover{
  box-shadow:0 0 14px rgba(168, 85, 247, 0.34);
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.12);
}
.back-button:active{
  transform:scale(0.92);
}
.section-title-wrap{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.section-title{
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  color:#f0e8ff;
  margin:0;
}
.section-subtitle{
  font-size:12px;
  font-weight:500;
  color:#9878c0;
  line-height:1.4;
  margin:3px 0 0;
}
.section-topbar-edge{
  margin:0 0 0;
}
.section-content{
  padding-top:8px !important;
  box-sizing:border-box;
}
.za-content,
.sd-content{
  padding:0 15px 0 !important;
  box-sizing:border-box;
  overflow-x:hidden;
}
.za-content .za-grid{
  padding:8px 0 112px;
}
.sd-content .sd-body{
  padding:8px 0 100px;
}
@media (max-width:380px){
  .za-grid{
    gap:10px;
  }
  .za-card{
    padding:12px 7px 10px;
    min-height:132px;
    border-radius:20px;
  }
  .za-card-glow{
    width:96px;
    height:96px;
    filter:blur(22px);
  }
  .za-emoji{
    width:72px;
    height:72px;
  }
  .za-name{
    font-size:14px;
  }
  .za-dates{
    font-size:11px;
  }
  .za-my-badge{
    top:9px;
    right:9px;
    font-size:11px;
  }
}
.screen.main-screen > .section-topbar{
  margin-bottom:0;
}
.chinese-wrap > .section-topbar,
#celebrity-main-view > .section-topbar,
#celebrity-picker-view > .section-topbar,
#celebrity-loading-screen > .section-topbar{
  margin-bottom:0;
}
.navbar-profile-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.18);
  border: 1.5px solid rgba(139, 92, 246, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0;
}
.navbar-profile-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
body.hide-legacy-topnav #main-topnav{
  display:none !important;
}
.screen.main-screen.section-header-mode#zodiac-all .za-header,
.screen.main-screen.section-header-mode#sign-detail > .sd-header,
.screen.main-screen.section-header-mode#help-center > .sd-header,
.screen.main-screen.section-header-mode#invite > .sd-header,
.screen.main-screen.section-header-mode#token-history > .sd-header{
  display:none !important;
}
.screen.section-header-mode#tarot .tdp-header,
.screen.section-header-mode#tarot .tarot-pick-header{
  display:none !important;
}
.screen.section-header-mode#tarot .tarot-deck-preview,
.screen.section-header-mode#tarot .tarot-pick-content{
  padding-top:var(--section-screen-top-gap);
  box-sizing:border-box;
}
.screen.main-screen.section-header-mode#features .features-grid{
  padding-top:8px;
}
.screen.main-screen.section-header-mode#features .features-header{
  display:none !important;
}
.screen.main-screen.section-header-mode .section-topbar,
.screen.main-screen.section-header-mode .dp-back-row,
.screen.main-screen.section-header-mode .dp-category-top{
  display:none !important;
}
.screen.main-screen.section-header-mode#daily-posts .dp-category-top{
  display:block !important;
  margin:0 0 16px;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}
.screen.main-screen.section-header-mode#daily-posts .dp-category-top::after{
  display:none;
}
.screen.main-screen.section-header-mode#daily-posts .dp-category-top .dp-back-row{
  display:none !important;
}
.screen.main-screen.section-header-mode#daily-posts #dp-category-chips{
  margin:0 !important;
  padding:0 0 11px !important;
}
#help-center .hc-content{
  box-sizing:border-box;
  overflow-x:hidden;
}
#celebrity.section-header-mode #celebrity-main-view > .section-topbar,
#celebrity.section-header-mode #celebrity-picker-view > .section-topbar,
#celebrity.section-header-mode #celebrity-loading-screen > .section-topbar{
  display:none !important;
}
.screen.main-screen.section-header-mode#invite > div[style*="padding:24px 20px"]{
  padding-top:15px !important;
  box-sizing:border-box;
}

/* ══ INVITE SCREEN ══ */
.invite-hero {
  background: linear-gradient(135deg, #1a0a3a, #0f0528);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.invite-hero-emoji { font-size: 48px; }
.invite-hero-title { font-size: 20px; font-weight: 800; color: #fff; }
.invite-hero-sub { font-size: 14px; color: #a78bfa; line-height: 1.6; }

.invite-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invite-step {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(139,92,246,.12);
  border-radius: 14px;
  padding: 12px 14px;
}
.invite-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #1a0a00;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.invite-step-text { font-size: 14px; color: #c4b5e8; line-height: 1.4; }

.invite-link-box {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 16px;
  padding: 14px 16px;
}
.invite-link-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7c5bc4; margin-bottom: 8px; }
.invite-link-row { display: flex; align-items: center; gap: 10px; }
.invite-link-text {
  flex: 1;
  font-size: 13px;
  color: #fcd34d;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invite-copy-btn {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.invite-share-btn {
  width: 100%;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.invite-share-whatsapp { background: #25d366; color: #fff; }
.invite-share-other { background: rgba(139,92,246,.15); border: 1px solid rgba(139,92,246,.3); color: #c4b5e8; }

.invite-balance-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: #7c6fa0;
  padding: 4px 0 8px;
}

/* ══ TOKEN CHIP ANIMATION ══ */
@keyframes tokenPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.token-chip-pop { animation: tokenPop 0.38s ease; }

/* ══ FEATURE CARD TOKEN BADGE ══ */
.feature-token-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #1a0a00;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.feature-card { position: relative; }

/* ══ BOTTOM NAV TOKEN BADGE ══ */
.bnav-token-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #2a1000;
  font-size: 7.5px;
  font-weight: 800;
  padding: 1.5px 5px;
  border-radius: 999px;
  pointer-events: none;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 4px rgba(245,158,11,0.35);
}

/* ══ PROFILE TOKEN CARD ══ */
.prof-token-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1a0a3a, #0f0420);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 14px;
  cursor: pointer;
  gap: 12px;
}
.prof-token-left { flex: 1; }
.prof-token-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7c5bc4;
  margin-bottom: 4px;
}
.prof-token-amount {
  font-size: 28px;
  font-weight: 900;
  color: #fcd34d;
  line-height: 1;
}
.prof-token-unit { font-size: 14px; font-weight: 600; color: #a78bfa; }
.prof-token-right { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.prof-token-history-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #c4b5e8;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.prof-token-buy-btn {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  border: none;
  color: #1a0a00;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}

/* ══ TOKEN HISTORY SCREEN ══ */
.th-empty {
  text-align: center;
  color: #6b4fa0;
  font-size: 14px;
  line-height: 1.7;
  padding: 48px 20px;
}
.th-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(139,92,246,.1);
  border-radius: 14px;
  padding: 13px 15px;
  margin-bottom: 8px;
}
.th-label { font-size: 14px; font-weight: 600; color: #d4c8ff; flex: 1; }
.th-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.th-amount { font-size: 15px; font-weight: 900; }
.th-earn  { color: #4ade80; }
.th-spend { color: #f87171; }
.th-date  { font-size: 11px; color: #5c4a7a; white-space: nowrap; }

/* ══ ADD PROFILE MODAL ══ */
.add-profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,1,15,.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  padding: 20px;
  box-sizing: border-box;
}
.add-profile-box {
  background: linear-gradient(180deg,#130a2e 0%,#0d0420 100%);
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 24px;
  width: 100%;
  max-width: 420px;
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.add-profile-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.add-profile-title {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  flex: 1;
}
.add-profile-cost {
  font-size: 13px;
  color: #fcd34d;
  font-weight: 600;
}
.add-profile-close {
  background: rgba(255,255,255,.08);
  border: none;
  color: #e0d0ff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
}
.add-profile-balance {
  font-size: 13px;
  color: #7c5bc4;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 8px 12px;
}
.add-profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.add-profile-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7c5bc4;
}
.add-profile-input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  padding: 12px 14px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.add-profile-input::placeholder { color: #4a3570; }
.add-profile-input:focus { border-color: rgba(139,92,246,.6); }
.add-profile-dob-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1.4fr;
  gap: 8px;
}
.bc-dob-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.bc-dob-row .add-profile-select {
  text-align: center;
}
.add-profile-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.add-profile-select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  padding: 11px 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.avatar-menu-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(139,92,246,.85);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: -1px;
  z-index: 2;
  padding: 0;
}
.avatar-menu-btn:active { opacity: 0.7; }
.add-birth-time-btn {
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 20px;
  color: #a78bfa;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  display: inline-block;
  margin-top: 2px;
}
.add-birth-time-btn:active { opacity: 0.7; }
.add-profile-optional {
  font-size: 11px;
  font-weight: 400;
  color: #5a4080;
  margin-left: 4px;
}
.add-profile-error {
  font-size: 13px;
  color: #f87171;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 10px;
  padding: 9px 12px;
}
.add-profile-btn {
  background: linear-gradient(135deg,#fcd34d,#f59e0b);
  color: #1a0a00;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  padding: 14px;
  cursor: pointer;
  width: 100%;
}

/* Profile Info Card */
.prof-info-card {
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.18);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 8px;
}
.prof-info-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  transition: background .15s;
  gap: 8px;
}
.prof-info-row:active { background: rgba(139,92,246,.1); }
.prof-info-disabled { cursor: default; opacity: 0.45; pointer-events: none; }
.prof-info-label {
  font-size: 14px;
  font-weight: 600;
  color: #e0c8ff;
  flex: 1;
}
.prof-info-value {
  font-size: 14px;
  color: #7858a0;
  max-width: 160px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-info-arrow {
  font-size: 18px;
  color: #3a2060;
  flex-shrink: 0;
}
.prof-info-divider {
  height: 1px;
  background: rgba(139,92,246,.12);
  margin: 0 16px;
}
.prof-choice-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.prof-choice-chip{
  border:1px solid rgba(139,92,246,0.22);
  background:rgba(255,255,255,0.03);
  color:#cbb5f2;
  border-radius:999px;
  padding:11px 14px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
}
.prof-choice-chip.selected{
  border-color:rgba(240,208,96,0.38);
  background:rgba(240,208,96,0.12);
  color:#ffe58a;
  box-shadow:0 0 0 1px rgba(240,208,96,0.08) inset;
}
.prof-choice-chip:active{transform:scale(.98);}

/* ══ TAROT ASSISTANT CHAT — BOTTOM SHEET ══════════════════ */

/* Dark overlay behind sheet */
.ta-overlay{
  position:fixed;
  z-index:9999;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:opacity 0.3s ease;
}

/* Bottom sheet — full viewport height, covers global navbar */
.ta-modal{
  position:fixed;
  /* left/width/height set by JS */
  z-index:10000;
  display:flex;flex-direction:column;
  background:#0a0225;
  border-radius:0;
  border:none;
  box-shadow:0 -20px 60px rgba(0,0,0,0.45);
  overflow:hidden;
  transition:transform 0.3s ease;
  box-sizing:border-box;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 24px 0;
}
body.tarot-assistant-open .global-navbar,
body.tarot-assistant-open .safe-area-top-bg{
  display:none !important;
}

/* Centered content wrapper */
.ta-inner{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
}

/* Drag handle */
.ta-drag-handle{
  width:36px;height:4px;border-radius:2px;
  background:#3a2060;
  margin:0 auto 18px;
  flex-shrink:0;
}

/* Header — horizontal layout */
.ta-header{
  flex-shrink:0;
  display:flex;flex-direction:row;align-items:center;
  justify-content:space-between;
  padding:0 0 16px;
  border-bottom:1px solid rgba(167,139,250,.12);
}
.ta-header-left{
  display:flex;align-items:center;gap:12px;
}
.ta-header-text{
  display:flex;flex-direction:column;gap:2px;
}
.ta-close-btn{
  border:1px solid rgba(190,140,255,0.25);
  background:rgba(255,255,255,0.06);
  color:#EDE3FF;font-size:22px;font-weight:700;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  line-height:1;
}
.ta-close-btn:active{transform:scale(.94);}
.ta-avatar-wrap{
  position:relative;width:52px;height:52px;
}
.ta-avatar-img{
  width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(212,175,55,.5);
  position:relative;z-index:2;
}
.ta-avatar-ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(#d4af37,#a855f7,#d4af37,#818cf8,#d4af37);
  animation:taRingSpin 4s linear infinite;
  opacity:.7;z-index:1;
}
@keyframes taRingSpin{ to{ transform:rotate(360deg); } }
.ta-title{
  font-size:18px;font-weight:800;
  color:#f0e6ff;letter-spacing:.2px;
}
.ta-subtitle{
  font-size:13px;color:#a78bfa;letter-spacing:.2px;
}

/* Messages scroll area */
.ta-messages{
  flex:1;overflow-y:auto;
  padding:14px 0 20px;
  display:flex;flex-direction:column;gap:12px;
  scrollbar-width:none;
}
.ta-messages::-webkit-scrollbar{ display:none; }

/* Message row */
.ta-msg-wrap{
  display:flex;align-items:flex-end;gap:8px;
  opacity:0;transform:translateY(14px);
  transition:opacity 0.4s ease, transform 0.4s ease;
}
.ta-msg-wrap.ta-msg-visible{
  opacity:1;transform:translateY(0);
}

/* Bubble */
.ta-bubble{
  background:linear-gradient(135deg,rgba(88,28,135,.55) 0%,rgba(49,16,92,.7) 100%);
  border:1px solid rgba(167,139,250,.2);
  border-radius:18px 18px 18px 4px;
  padding:12px 16px;
  color:#e8d5ff;font-size:14px;line-height:1.55;
  max-width:88%;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 20px rgba(100,30,200,.18);
}

/* Cards preview bubble */
.ta-bubble-cards{
  padding:12px;
  display:flex;flex-direction:column;gap:10px;
  max-width:94%;
}
.ta-card-item{
  display:flex;align-items:center;gap:10px;
}
.ta-card-thumb{
  width:44px;height:72px;object-fit:cover;
  border-radius:6px;
  border:1px solid rgba(212,175,55,.35);
  flex-shrink:0;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.ta-card-info{
  display:flex;flex-direction:column;gap:2px;
}
.ta-card-name{
  font-size:13px;font-weight:700;color:#f0e6ff;
}
.ta-card-keyword{
  font-size:11px;color:#d4af37;letter-spacing:.4px;
}
.ta-card-pos{
  font-size:11px;color:#a78bfa;margin-top:2px;letter-spacing:.3px;
  text-transform:uppercase;
}

/* Typing indicator bubble */
.ta-bubble-typing{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;
  background:linear-gradient(135deg,rgba(60,10,110,.7) 0%,rgba(30,8,70,.85) 100%);
  border:1px solid rgba(212,175,55,.3);
  border-radius:18px 18px 18px 4px;
  width:fit-content;
  box-shadow:0 2px 12px rgba(120,40,220,.18);
}
.ta-bubble-typing span{
  width:7px;height:7px;border-radius:50%;
  background:#a855f7;
  animation:taTypingDot 1.1s ease-in-out infinite;
  box-shadow:0 0 6px rgba(168,85,247,.6);
}
.ta-bubble-typing span:nth-child(2){ animation-delay:.18s; }
.ta-bubble-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes taTypingDot{
  0%,60%,100%{ opacity:.3;transform:translateY(0) scale(.85); }
  30%{ opacity:1;transform:translateY(-4px) scale(1.1); }
}

/* Countdown bubble */
.ta-bubble-countdown{
  display:flex;align-items:center;gap:10px;
}
.ta-countdown-text{
  color:#c4b5fd;font-size:14px;
}
.ta-dots{
  display:flex;gap:4px;align-items:center;
}
.ta-dots span{
  width:5px;height:5px;border-radius:50%;
  background:#a855f7;
  animation:taDot 1.2s ease-in-out infinite;
}
.ta-dots span:nth-child(2){ animation-delay:.2s; }
.ta-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes taDot{
  0%,80%,100%{ opacity:.3;transform:scale(.8); }
  40%{ opacity:1;transform:scale(1.15); }
}

/* ── Reading reveal bubbles ────────────────────────── */
.ta-bubble-reading{
  background:linear-gradient(135deg,rgba(60,10,120,.65) 0%,rgba(30,8,70,.8) 100%);
  border-color:rgba(212,175,55,.25);
  padding:14px 16px;
  max-width:92%;
}
.ta-bubble-conclusion{
  background:linear-gradient(135deg,rgba(80,20,140,.7) 0%,rgba(30,8,80,.85) 100%);
  border-color:rgba(212,175,55,.45);
  box-shadow:0 4px 28px rgba(160,60,255,.22);
}
.ta-reading-label{
  font-size:12px;font-weight:700;letter-spacing:.6px;
  color:#d4af37;margin-bottom:7px;text-transform:uppercase;
}
.ta-reading-label--conclusion{
  color:#c084fc;
}
.ta-reading-text{
  font-size:14px;line-height:1.6;color:#e2d4ff;
}

/* ── Bottom dock ───────────────────────────────────── */
.ta-dock{
  flex-shrink:0;
  position:relative;
  margin:0 -24px 0;
  display:flex;align-items:center;justify-content:center;
  gap:10px;
  padding:12px 16px 20px;
  background:linear-gradient(180deg,transparent 0%,rgba(10,4,30,.95) 28%,rgba(10,4,30,1) 100%);
  border-top:1px solid rgba(167,139,250,.1);
}
/* Animated glow orb — visible during reading */
.ta-dock-glow{
  position:absolute;
  top:-18px;left:50%;transform:translateX(-50%);
  width:120px;height:18px;
  background:radial-gradient(ellipse at 50% 100%,rgba(168,85,247,.35) 0%,transparent 70%);
  pointer-events:none;
  animation:taDockPulse 2.4s ease-in-out infinite;
}
.ta-dock-glow.hidden{ display:none; }
@keyframes taDockPulse{
  0%,100%{ opacity:.5;transform:translateX(-50%) scaleX(1); }
  50%{ opacity:1;transform:translateX(-50%) scaleX(1.25); }
}
/* Left / right dock buttons */
.ta-dock-btn{
  flex-shrink:0;
  padding:9px 14px;border-radius:20px;
  font-size:13px;font-weight:700;letter-spacing:.2px;
  border:none;cursor:pointer;
  transition:opacity .2s,transform .15s;
  white-space:nowrap;
}
.ta-dock-btn:active{ opacity:.75;transform:scale(.96); }
.ta-dock-new{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(167,139,250,.2);
  color:#c4b5fd;
}
.ta-dock-new:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.ta-dock-share{
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  color:#fff;
  box-shadow:0 3px 14px rgba(124,58,237,.35);
  transition:opacity .4s ease, transform .15s;
}
/* Center status */
.ta-dock-status{
  flex:1;text-align:center;
  overflow:hidden;
}
.ta-dock-status-text{
  font-size:12px;color:#a78bfa;letter-spacing:.3px;
  display:block;
  animation:taDockStatusFade 0.5s ease;
}
@keyframes taDockStatusFade{
  from{ opacity:0;transform:translateY(4px); }
  to{ opacity:1;transform:translateY(0); }
}
/* Legacy action wrap — hide (buttons now live in dock) */
.ta-actions-wrap{ display:none!important; }

/* ══ NAZAR PROTECTION SCREEN ══════════════════════════════ */
.nazar-screen{
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, #2a0660 0%, transparent 65%),
    #04010f;
  flex-direction:column;
  min-height:100vh;
  overflow:hidden;
}
.nazar-screen.active{
  display:flex;
}

/* Header */
.nazar-header{
  display:flex;align-items:center;gap:14px;
  padding:18px 16px 12px;
  flex-shrink:0;
}
.nazar-back{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(167,139,250,.15);
  color:#c4b5fd;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .2s;
}
.nazar-back:active{ background:rgba(255,255,255,.14); }
.nazar-header-title{ font-size:17px;font-weight:700;color:#f0e6ff; }
.nazar-header-sub{ font-size:11px;color:#a78bfa;margin-top:2px;letter-spacing:.4px; }

/* Body */
.nazar-body{
  flex:1;
  display:flex;flex-direction:column;align-items:center;
  padding:20px 22px 44px;
  gap:24px;
  overflow-y:auto;
}

/* Video / eye ritual area */
.nazar-video-wrap{
  position:relative;
  width:210px;height:210px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  transition:box-shadow .4s ease;
  box-shadow:
    0 0 0 2px rgba(212,175,55,.2);
}
.nazar-video-wrap.nazar-active{
  box-shadow:
    0 0 0 2px rgba(212,175,55,.2);
}
.nazar-video{
  width:100%;height:100%;
  object-fit:cover;border-radius:50%;display:block;
}
.nazar-eye-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:88px;pointer-events:none;
  transition:filter .4s ease;
  filter:drop-shadow(0 0 14px rgba(80,120,255,.6));
}
.nazar-video-wrap.nazar-active .nazar-eye-overlay{
  filter:drop-shadow(0 0 14px rgba(80,120,255,.6));
}

/* Smoke rings */
.nazar-smoke-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(168,85,247,.22);
  animation:nazarRingPulse 3.2s ease-out infinite;
  pointer-events:none;
}
.nazar-smoke-ring--2{ animation-delay:.9s; border-color:rgba(100,140,255,.15); }
.nazar-smoke-ring--3{ animation-delay:1.8s;border-color:rgba(212,175,55,.1); }
@keyframes nazarRingPulse{
  0%  { transform:scale(1);  opacity:.9; }
  100%{ transform:scale(1.7);opacity:0;  }
}
/* Active state matches idle — no extra ring effects during burn */
.nazar-video-wrap.nazar-active .nazar-smoke-ring{
  animation-duration:3.2s;
  border-color:rgba(168,85,247,.22);
}
.nazar-video-wrap.nazar-active .nazar-smoke-ring--2{ border-color:rgba(100,140,255,.15); }
.nazar-video-wrap.nazar-active .nazar-smoke-ring--3{ border-color:rgba(212,175,55,.1); }

/* Titles */
.nazar-titles{ text-align:center; }
.nazar-title{
  font-size:22px;font-weight:800;color:#f0e6ff;
  letter-spacing:.15px;margin-bottom:6px;
}
.nazar-subtitle{
  font-size:13px;color:#a78bfa;line-height:1.55;
  letter-spacing:.2px;
}

/* Hold button */
.nazar-bottom-group{
  margin-top:auto;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:100%;
  position:relative;
  padding-top:60px;
}
.nazar-hold-wrap{
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.nazar-hold-btn{
  position:relative;
  width:50px;height:50px;border-radius:50%;
  background:transparent;
  border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  box-shadow:none;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  outline:none;
  animation:nazarIdlePulse 2.8s ease-in-out infinite;
}
.nazar-hold-btn.nazar-holding{
  transform:scale(.93);
  animation:none;
  background:transparent;
  box-shadow:
    0 0 0 1.5px rgba(212,175,55,.6),
    0 0 35px rgba(255,120,20,.75),
    0 0 65px rgba(212,175,55,.35);
}
.nazar-hold-btn:disabled{
  opacity:.4;cursor:not-allowed;
  transform:scale(1)!important;
  animation:none;
}
.nazar-hold-icon{
  width:50px;height:50px;object-fit:contain;
  transition:transform .2s ease, filter .2s ease;
  filter:drop-shadow(0 0 6px rgba(255,140,0,.6));
}
.nazar-hold-btn.nazar-holding .nazar-hold-icon{
  transform:scale(1.18);
  filter:drop-shadow(0 0 14px rgba(255,160,0,1)) drop-shadow(0 0 6px rgba(255,80,0,.7));
  animation:nazarFireFlicker .35s ease-in-out infinite alternate;
}
.nazar-hold-label{
  font-size:13px;font-weight:600;color:#ddd6fe;
  letter-spacing:.3px;text-align:center;
  line-height:1.4;
  transition:color .2s;
}

/* Dual rings on button */
.nazar-hold-ring{
  position:absolute;border-radius:50%;pointer-events:none;
}
.nazar-hold-ring--outer{
  inset:-10px;
  border:1.5px solid rgba(212,175,55,.3);
  animation:nazarHoldRingOuter 2.4s ease-in-out infinite;
}
.nazar-hold-ring--inner{
  inset:-4px;
  border:1px solid rgba(168,85,247,.25);
  animation:nazarHoldRingInner 1.8s ease-in-out infinite;
}
.nazar-hold-btn.nazar-holding .nazar-hold-ring--outer{
  border-color:rgba(255,140,20,.8);
  box-shadow:0 0 12px rgba(255,120,0,.5);
  animation-duration:1.1s;
}
.nazar-hold-btn.nazar-holding .nazar-hold-ring--inner{
  border-color:rgba(212,175,55,.7);
  animation-duration:.8s;
}
@keyframes nazarIdlePulse{
  0%,100%{ box-shadow:none; }
  50%    { box-shadow:none; }
}
@keyframes nazarFireFlicker{
  0%  { transform:scale(1.18) rotate(-2deg); }
  100%{ transform:scale(1.25) rotate(2deg); }
}
@keyframes nazarHoldRingOuter{
  0%,100%{ opacity:.35;transform:scale(1);    }
  50%    { opacity:.9; transform:scale(1.05); }
}
@keyframes nazarHoldRingInner{
  0%,100%{ opacity:.25;transform:scale(1);    }
  50%    { opacity:.7; transform:scale(1.03); }
}

/* Hint */
.nazar-hint{
  font-size:12px;color:rgba(167,139,250,.5);
  text-align:center;letter-spacing:.4px;
  transition:color .4s, opacity .4s;
  min-height:18px;
}

/* Progress */
.nazar-progress-wrap{
  position:absolute;top:0;left:0;right:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:opacity .4s ease;
}
.nazar-progress-bar-track{
  width:100%;height:5px;border-radius:3px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.nazar-progress-bar-fill{
  height:100%;width:0%;border-radius:3px;
  background:linear-gradient(90deg,#5b21b6,#a855f7 60%,#d4af37);
  transition:width 0.12s linear;
  box-shadow:0 0 10px rgba(168,85,247,.65);
}
.nazar-progress-text{
  font-size:13px;font-weight:600;color:#c4b5fd;
  letter-spacing:.35px;text-align:center;
  min-height:20px;
  transition:color .5s;
}

/* Result card */
.nazar-result-card{
  width:100%;border-radius:22px;
  background:
    linear-gradient(160deg,rgba(40,8,90,.92) 0%,rgba(15,5,40,.97) 100%);
  border:1px solid rgba(212,175,55,.25);
  padding:24px 20px 20px;
  box-shadow:0 8px 40px rgba(80,20,180,.3);
  opacity:0;transform:translateY(24px);
  transition:opacity 0.6s ease, transform 0.6s ease;
  margin-top:8px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  --nazar-accent:#f0d060;
  --nazar-accent-soft:rgba(240,208,96,.28);
  --nazar-accent-glow:rgba(240,208,96,.44);
}
.nazar-result-card::before{
  content:'';
  position:absolute;
  inset:-20% -10%;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.06) 0%, transparent 36%),
    radial-gradient(circle at 18% 82%, var(--nazar-accent-soft) 0%, transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(139,92,246,.12) 0%, transparent 34%);
  animation:nazarResultBackgroundDrift 14s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:-2;
}
.nazar-result-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(1px 1px at 14% 18%, rgba(255,255,255,.16) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 16%, rgba(255,255,255,.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 74%, rgba(255,255,255,.10) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 76%, rgba(255,255,255,.08) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,.10) 0%, transparent 100%);
  opacity:.75;
  animation:nazarResultParticles 12s linear infinite;
  pointer-events:none;
  z-index:-1;
}
.nazar-result-card.nazar-result-visible{
  opacity:1;transform:translateY(0);
}
.nazar-result-header{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:20px;gap:4px;text-align:center;
  animation:nazarResultFadeIn .56s ease both;
}
.nazar-result-eye{
  font-size:44px;
  margin-bottom:6px;
  transform:scale(.8);
  opacity:0;
  animation:nazarResultIconEntry .7s cubic-bezier(.22,1,.36,1) .08s forwards;
}
.nazar-result-eye-icon{
  animation:nazarResultGlowPulse 2.8s ease-in-out infinite;
  filter:drop-shadow(0 0 10px var(--nazar-accent-soft));
}
.nazar-result-title{
  font-size:18px;font-weight:800;color:#f0e6ff;letter-spacing:.2px;
}
.nazar-result-sub{
  font-size:12px;color:#a78bfa;letter-spacing:.4px;
}
.nazar-result-meter{
  width:100%;
  margin-top:14px;
  padding:12px 12px 0;
  opacity:0;
  transform:translateY(14px);
  animation:nazarResultFadeUp .55s ease forwards;
}
.nazar-result-meter-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.nazar-result-meter-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#a78bfa;
}
.nazar-result-meter-value{
  font-size:22px;
  line-height:1;
  font-weight:900;
  color:#f6ecff;
  text-shadow:0 0 18px var(--nazar-accent-soft);
}
.nazar-result-meter-track{
  width:100%;
  height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
}
.nazar-result-meter-fill{
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--nazar-accent) 0%,#fff2bf 55%,var(--nazar-accent) 100%);
  box-shadow:0 0 14px var(--nazar-accent-glow);
  position:relative;
  transition:width 1.2s cubic-bezier(.22,1,.36,1);
}
.nazar-result-meter-fill::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.16) 42%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.16) 58%,transparent 100%);
  transform:translateX(-130%);
  animation:nazarResultShimmer 2.6s ease-in-out infinite;
}
.nazar-result-fields{
  display:flex;flex-direction:column;gap:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(167,139,250,.12);
  margin-bottom:18px;
}
.nazar-result-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:11px 14px;gap:12px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(167,139,250,.08);
  opacity:0;
  transform:translateY(10px);
  animation:nazarResultFadeUp .5s ease forwards;
}
.nazar-result-row:last-child{ border-bottom:none; }
.nazar-result-label{
  font-size:11px;font-weight:600;color:#a78bfa;
  letter-spacing:.4px;text-transform:uppercase;
  flex:0 1 auto;
  max-width:45%;
  line-height:1.35;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.nazar-result-value{
  font-size:13px;font-weight:700;color:#f0e6ff;
  text-align:right;
  flex:1 1 auto;
  min-width:0;
  line-height:1.4;
  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:normal;
}
.nazar-result-message{
  font-size:13px;line-height:1.65;color:#c4b5fd;
  text-align:center;
  padding:14px 4px;
  border-top:1px solid rgba(212,175,55,.12);
  margin-bottom:18px;
  font-style:italic;
  opacity:0;
  transform:translateY(10px);
  text-shadow:0 0 14px rgba(212,175,55,.12);
  animation:nazarResultFadeUp .6s ease forwards;
}
.nazar-result-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:10px;
  opacity:0;
  transform:translateY(10px);
  animation:nazarResultFadeUp .5s ease forwards;
}
.nazar-result-btn{
  padding:13px 10px;border-radius:14px;
  font-size:14px;font-weight:700;letter-spacing:.2px;
  border:none;cursor:pointer;
  transition:opacity .2s,transform .18s ease, box-shadow .22s ease, filter .22s ease;
}
.nazar-result-btn:active{ opacity:.8;transform:scale(.97); }
.nazar-btn-again{
  grid-column:1 / -1; /* full width top */
  background:linear-gradient(135deg,#4c0f9e,#6d28d9);
  color:#f0e6ff;
  box-shadow:0 4px 20px rgba(109,40,217,.4);
  animation:nazarPrimaryGlowPulse 2.9s ease-in-out infinite;
}
.nazar-btn-share{
  background:rgba(212,175,55,.12);
  border:1px solid rgba(212,175,55,.3);
  color:#d4af37;
}
.nazar-btn-back{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(167,139,250,.2);
  color:#c4b5fd;
}
.nazar-result-btn:hover{
  transform:scale(1.02);
}

@keyframes nazarResultGlowPulse{
  0%,100%{
    transform:scale(1);
    filter:drop-shadow(0 0 10px var(--nazar-accent-soft));
  }
  50%{
    transform:scale(1.05);
    filter:drop-shadow(0 0 16px var(--nazar-accent-glow));
  }
}
@keyframes nazarResultBackgroundDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(0,-8px,0) scale(1.03); }
}
@keyframes nazarResultParticles{
  0%{ transform:translateY(0); opacity:.5; }
  50%{ opacity:.78; }
  100%{ transform:translateY(-8px); opacity:.45; }
}
@keyframes nazarResultFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes nazarResultIconEntry{
  0%{
    opacity:0;
    transform:scale(.8);
  }
  100%{
    opacity:1;
    transform:scale(1);
  }
}
@keyframes nazarResultFadeUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes nazarResultShimmer{
  0%,18%{ transform:translateX(-130%); }
  52%,100%{ transform:translateX(130%); }
}
@keyframes nazarPrimaryGlowPulse{
  0%,100%{
    box-shadow:0 4px 20px rgba(109,40,217,.34);
  }
  50%{
    box-shadow:0 6px 26px rgba(109,40,217,.46), 0 0 18px rgba(212,175,55,.12);
  }
}

/* Explore card icon override */
.nazar-feat-icon{
  font-size:64px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  width:96px;height:96px;
  filter:drop-shadow(0 0 12px rgba(80,120,255,.5));
}

/* ══════════════════════════════════════════
   DAILY INSIGHT CARD
══════════════════════════════════════════ */
.daily-insight-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:24px 16px 0;
  padding:16px 18px;
  background:linear-gradient(135deg,rgba(139,92,246,0.18) 0%,rgba(99,55,182,0.12) 100%);
  border:1px solid rgba(167,139,250,0.28);
  border-radius:16px;
  backdrop-filter:blur(8px);
}
.daily-insight-icon{
  flex-shrink:0;
  width:36px;height:36px;
  background:rgba(139,92,246,0.25);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#c4b5fd;
  margin-top:2px;
}
.daily-insight-body{ flex:1;min-width:0; }
.daily-insight-label{
  font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:#a78bfa;margin-bottom:6px;
}
.daily-insight-text{
  font-size:14px;line-height:1.6;color:#e0d0ff;
}

/* ══════════════════════════════════════════
   COSMIC EVENTS SECTION
══════════════════════════════════════════ */
.cosmic-events-section{
  margin:80px 0 0;
  padding:0 16px calc(118px + env(safe-area-inset-bottom));
}
.cosmic-events-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.cosmic-events-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:.02em;
  color:#fff;
  display:flex;
  align-items:center;
  gap:9px;
}
.cosmic-events-star{
  color:#f6dd8f;
  font-size:15px;
  filter:drop-shadow(0 0 12px rgba(168,85,247,.3));
  animation:ceStarPulse 2.6s ease-in-out infinite;
}
@keyframes ceStarPulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.25); }
}
.cosmic-events-count{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.52);
  letter-spacing:.04em;
}

.cosmic-events-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items:stretch;
}
.cosmic-events-grid .ce-card:last-child:nth-child(odd){
  grid-column:1 / 2;
}

.ce-card{
  height:200px;
  cursor:pointer;
  perspective:1000px;
  -webkit-tap-highlight-color:transparent;
  transform:translateY(var(--ce-shift,0));
  animation:ceCardReveal .4s ease both;
  animation-delay:var(--ce-delay,0s);
  transition:transform .24s ease;
  will-change:transform;
}
@keyframes ceCardReveal{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(var(--ce-shift,0));}
}
.ce-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.2,.2,1),filter .22s ease;
  border-radius:20px;
}
.ce-card.flipped .ce-card-inner{
  transform:rotateY(180deg);
}
.ce-card:not(.flipped):hover,
.ce-card:not(.flipped):active{
  transform:translateY(var(--ce-shift,0)) scale(1.03);
}
.ce-card:not(.flipped):hover .ce-card-inner,
.ce-card:not(.flipped):active .ce-card-inner{
  filter:drop-shadow(0 12px 40px rgba(0,0,0,0.8));
}
.ce-front,.ce-back{
  position:absolute;
  inset:0;
  border-radius:20px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  overflow:hidden;
  transition:opacity .28s ease;
}

.ce-front{
  background:
    linear-gradient(180deg, rgba(7,3,16,.08) 0%, rgba(7,3,16,.2) 100%),
    url("images/Planet-icons/planet_card_background.webp") center/cover no-repeat;
  border:1px solid rgba(168, 85, 247, 0.25);
  box-shadow:inset 0 0 40px rgba(124, 58, 237, 0.25),0 8px 30px rgba(0,0,0,0.6);
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  padding:18px 14px;
  z-index:2;
  opacity:1;
}
.ce-front::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(6,3,16,.04) 0%, rgba(6,3,16,.18) 100%),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.025), transparent 24%),
    radial-gradient(circle at 80% 84%, rgba(168,85,247,0.04), transparent 20%),
    linear-gradient(145deg, rgba(255,255,255,0.015), transparent 42%);
  pointer-events:none;
}
.ce-front-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  text-align:center;
  gap:0;
  width:100%;
  height:100%;
}
.ce-planet-icon{
  width:90px;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  flex-shrink:0;
  color:#f3e9ff;
  animation:ceIconFloat 3s ease-in-out infinite;
}
.ce-front-copy{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  padding:0 0 0 5px;
  text-align:left;
}
.ce-planet-ring{
  display:none;
}
.ce-planet-glyph{
  position:relative;
  z-index:1;
  width:90px;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#efe5ff;
}
.ce-planet-glyph svg{
  width:28px;
  height:28px;
  display:block;
}
.ce-planet-image{
  width:90px;
  height:90px;
  object-fit:contain;
  display:block;
}
@keyframes ceIconFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}
.ce-event-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(8,4,20,.82);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  z-index:2;
}
.ce-badge-image{
  width:12px;
  height:12px;
  object-fit:contain;
  display:block;
}
.ce-front-date{
  margin-top:4px;
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
  color:rgba(255,255,255,0.5);
  line-height:1.1;
}
.ce-front-label{
  margin-top:6px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  line-height:1.15;
  max-width:140px;
  text-wrap:balance;
}
.ce-back{
  background:linear-gradient(160deg,#0B0515 0%, #140A2A 100%);
  border:1px solid rgba(168, 85, 247, 0.22);
  box-shadow:inset 0 0 36px rgba(124, 58, 237, 0.18),0 8px 30px rgba(0,0,0,0.62);
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  padding:20px 18px 16px;
  z-index:1;
  opacity:0;
  box-sizing:border-box;
}
.ce-card.flipped .ce-front{
  opacity:0;
}
.ce-card.flipped .ce-back{
  opacity:1;
}
.ce-back-stars{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.ce-back-stars span{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  opacity:.38;
}
.ce-back-stars span:nth-child(1){top:18px;left:20px;}
.ce-back-stars span:nth-child(2){top:32px;right:28px;}
.ce-back-stars span:nth-child(3){bottom:42px;left:26px;}
.ce-back-stars span:nth-child(4){bottom:22px;right:18px;}
.ce-back-stars span:nth-child(5){top:50%;right:14px;}
.ce-back-glow{
  position:absolute;
  top:-24px;
  right:-22px;
  width:96px;
  height:96px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.22),rgba(168,85,247,0));
  pointer-events:none;
  filter:blur(2px);
}
.ce-back-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-height:100%;
  height:100%;
}
.ce-back-title{
  font-size:18px;
  line-height:1.15;
  font-weight:800;
  color:#f2ddff;
  letter-spacing:.01em;
  max-height:42px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ce-back-text{
  margin-top:12px;
  font-size:14px;
  line-height:1.35;
  color:#D8C7F4;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ce-back-footer{
  position:relative;
  z-index:1;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.ce-back-sign{
  min-width:0;
  max-width:80px;
  white-space:nowrap;
  font-size:12px;
  color:rgba(216,199,244,0.65);
  overflow:hidden;
  text-overflow:ellipsis;
}
.ce-view-more{
  flex-shrink:0;
  font-size:12px;
  font-weight:800;
  color:#FFE46E;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,228,110,0.12);
  border:1px solid rgba(255,228,110,0.22);
  white-space:nowrap;
}
.ce-view-more:active{
  transform:scale(.97);
}
.ce-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(4,2,12,.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px 16px calc(110px + env(safe-area-inset-bottom));
  z-index:2000;
}
.ce-modal-overlay.open{
  display:flex;
}
.ce-modal{
  width:min(100%, 360px);
  max-height:min(76vh, 620px);
  overflow:auto;
  border-radius:24px;
  padding:22px 18px 18px;
  background:linear-gradient(160deg, rgba(19,10,40,.96) 0%, rgba(10,6,23,.98) 100%);
  border:1px solid rgba(168,85,247,.22);
  box-shadow:0 28px 60px rgba(0,0,0,.48), inset 0 0 40px rgba(124,58,237,.16);
  position:relative;
}
.ce-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:#f3e8ff;
  font-size:22px;
  line-height:1;
}
.ce-modal-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-right:30px;
}
.ce-modal-icon{
  width:68px;
  height:68px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ce-modal-icon img{
  width:68px;
  height:68px;
  object-fit:contain;
  display:block;
}
.ce-modal-date{
  font-size:12px;
  font-weight:600;
  color:rgba(216,199,244,.62);
}
.ce-modal-title{
  margin-top:4px;
  font-size:20px;
  line-height:1.14;
  font-weight:800;
  color:#fff;
}
.ce-modal-impact{
  margin-top:18px;
  font-size:12px;
  font-weight:700;
  color:#FFE46E;
  letter-spacing:.02em;
}
.ce-modal-text{
  margin-top:10px;
  font-size:15px;
  line-height:1.55;
  color:#E7DDF9;
}
.ce-modal-advice{
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,228,110,0.12);
  border:1px solid rgba(255,228,110,0.18);
  color:#FFE46E;
  font-size:12px;
  font-weight:700;
}
.ce-card:not(.flipped):hover .ce-front,
.ce-card:not(.flipped):active .ce-front{
  box-shadow:inset 0 0 60px rgba(168,85,247,0.35),0 12px 40px rgba(0,0,0,0.8);
}

/* ══════════════════════════════════════════
   ACCOUNT AUTH MODAL
══════════════════════════════════════════ */
.account-modal-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(10,6,20,0.82);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  box-sizing:border-box;
}
/* When the 6-digit code panel is showing, anchor the modal toward the top
   so the iPhone keyboard doesn't cover the Verify CTA. */
.account-modal-overlay.verify-active{
  align-items:flex-start;
  padding-top:calc(env(safe-area-inset-top,0px) + 6vh);
}
.account-modal-box{
  position:relative;
  width:100%;max-width:420px;
  background:linear-gradient(160deg,#1a0f2e 0%,#120a24 100%);
  border:1px solid rgba(167,139,250,0.22);
  border-radius:24px;
  padding:32px 24px 32px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  max-height:100%;overflow-y:auto;
  box-sizing:border-box;
}
.account-modal-close{
  position:absolute;top:16px;right:16px;
  background:rgba(255,255,255,0.08);border:none;border-radius:50%;
  width:32px;height:32px;color:#c4b5fd;font-size:16px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.account-modal-star{ font-size:22px;color:#a78bfa;margin-bottom:2px; }
.account-modal-title{
  font-size:20px;font-weight:700;color:#f0eaff;text-align:center;
}
.account-modal-sub{
  font-size:13px;color:#9d85c4;text-align:center;
  line-height:1.5;margin-bottom:4px;
}
#account-provider-panel,
#account-email-panel,
#account-forgot-panel{ width:100%;display:flex;flex-direction:column;gap:10px; }
.account-provider-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 18px;border-radius:12px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(167,139,250,0.22);
  color:#e0d0ff;font-size:14px;font-weight:600;
  cursor:pointer;transition:background 0.18s;
}
.account-provider-btn:hover{ background:rgba(139,92,246,0.18); }
.account-provider-btn:disabled{ opacity:0.45;cursor:not-allowed; }
.account-apple-btn{ color:#f5f5f5; }
.account-email-btn{ color:#c4b5fd; }
.account-danger-btn{
  background:rgba(239,68,68,0.1);
  border-color:rgba(239,68,68,0.3);
  color:#fca5a5;
}
.account-danger-btn:hover{ background:rgba(239,68,68,0.2); }
.account-cancel-btn{
  background:none;border:none;color:#7858a0;
  font-size:13px;cursor:pointer;padding:4px 0;
  text-decoration:underline;
}
.account-delete-link{
  background:none;border:none;color:#9b6b6b;
  font-size:12px;cursor:pointer;padding:6px 0 2px;
  text-decoration:underline;opacity:0.8;
}
.account-delete-link:hover{ color:#ef4444;opacity:1; }
.account-back-btn{
  background:none;border:none;color:#a78bfa;
  font-size:13px;cursor:pointer;padding:0 0 4px;
  align-self:flex-start;
}
.account-input-label{
  font-size:12px;color:#a78bfa;font-weight:600;
  letter-spacing:0.04em;
  margin-bottom:5px;margin-top:10px;
}
.account-input-wrap{
  position:relative;display:flex;align-items:center;
}
.account-input-wrap .account-input{
  padding-right:42px;
}
.account-pw-toggle{
  position:absolute;right:12px;
  background:none;border:none;cursor:pointer;
  font-size:16px;padding:0;line-height:1;
  color:#a78bfa;opacity:0.7;
}
.account-pw-toggle:hover{ opacity:1; }
.account-input{
  width:100%;padding:12px 14px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(167,139,250,0.22);
  border-radius:10px;color:#e0d0ff;font-size:14px;
  outline:none;box-sizing:border-box;
}
.account-input:focus{ border-color:rgba(167,139,250,0.5); }
.account-input::placeholder{ color:#6b5a8a; }
.account-forgot-link{
  background:none;border:none;
  color:#a78bfa;font-size:12px;cursor:pointer;
  padding:0;text-decoration:underline;
}
.account-forgot-link:hover{ color:#c4b5fd; }
.account-submit-btn{
  width:100%;padding:13px;border-radius:12px;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  border:none;color:#fff;font-size:15px;font-weight:700;
  cursor:pointer;
}
.account-submit-btn:disabled{ opacity:0.45;cursor:not-allowed; }

/* ── 6-digit verification code boxes ──────────────────────────────────────── */
.verify-code-boxes{
  display:flex;justify-content:center;align-items:center;gap:8px;
  margin:8px 0 4px;
  direction:ltr; /* digits always LTR even on RTL languages */
}
.verify-code-box{
  width:44px;height:54px;
  border:1.5px solid rgba(212,168,76,0.25);
  border-radius:10px;
  background:rgba(10,6,30,0.45);
  color:#f5e6c0;
  font-family:'SF Mono',Menlo,Monaco,monospace;
  font-size:22px;font-weight:600;
  text-align:center;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  caret-color:#d4a830;
}
.verify-code-box::placeholder{ color:rgba(245,230,192,0.15); }
.verify-code-box:focus{
  border-color:rgba(212,168,76,0.7);
  box-shadow:0 0 0 3px rgba(212,168,76,0.15), 0 0 18px rgba(212,168,76,0.15);
}
.verify-code-box.filled{
  border-color:rgba(212,168,76,0.5);
  background:rgba(20,10,40,0.55);
}
.verify-code-boxes.error .verify-code-box{
  border-color:rgba(239,68,68,0.55);
  animation:verify-shake 0.45s ease;
}
.verify-code-boxes.success .verify-code-box{
  border-color:rgba(74,222,128,0.55);
  background:rgba(34,80,50,0.25);
}
@keyframes verify-shake{
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-6px); }
  40% { transform:translateX(6px); }
  60% { transform:translateX(-4px); }
  80% { transform:translateX(4px); }
}
@media (max-width:380px){
  .verify-code-box{ width:38px;height:48px;font-size:20px; }
  .verify-code-boxes{ gap:6px; }
}
.account-modal-error{
  font-size:12px;color:#fca5a5;text-align:center;
  background:rgba(239,68,68,0.1);border-radius:8px;
  padding:8px 12px;width:100%;box-sizing:border-box;
}
.account-modal-status{
  font-size:13px;color:#9d85c4;text-align:center;
  line-height:1.5;padding:8px 0;
}
.account-modal-loading{
  position:absolute;inset:0;border-radius:24px 24px 0 0;
  background:rgba(10,6,20,0.7);
  display:flex;align-items:center;justify-content:center;
}
.account-loading-spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid rgba(167,139,250,0.2);
  border-top-color:#a78bfa;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ══════════════════════════════════════════
   PROFILE — ACCOUNT CARD
══════════════════════════════════════════ */
.prof-account-card{
  margin-bottom:8px;
  border-radius:16px;
  overflow:hidden;
}
.prof-account-guest,
.prof-account-secured{
  background:linear-gradient(135deg,rgba(139,92,246,0.12),rgba(99,55,182,0.08));
  border:1px solid rgba(167,139,250,0.2);
  border-radius:16px;
  padding:18px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.prof-account-badge{
  display:inline-flex;align-self:flex-start;
  padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;
}
.prof-account-badge-guest{
  background:rgba(251,191,36,0.15);
  border:1px solid rgba(251,191,36,0.3);
  color:#fbbf24;
}
.prof-account-badge-secured{
  background:rgba(52,211,153,0.15);
  border:1px solid rgba(52,211,153,0.3);
  color:#34d399;
}
.prof-account-desc{
  font-size:13px;color:#b8a0d8;line-height:1.5;margin:0;
}
.prof-account-logout-btn{
  margin-top:4px;
}

/* ── Skeleton / shimmer placeholders ───────────────────────────────────
   Apply class "img-skeleton" on the IMAGE itself (or its wrapper).
   The shimmer disappears as soon as the image fires `load`.
   Pair with JS handler that removes the class on `load`. */
.img-skeleton{
  position:relative;
  background:linear-gradient(90deg,
    rgba(139,92,246,0.06) 0%,
    rgba(139,92,246,0.16) 50%,
    rgba(139,92,246,0.06) 100%);
  background-size:200% 100%;
  animation:img-shimmer 1.4s ease-in-out infinite;
  border-radius:12px;
  overflow:hidden;
}
.img-skeleton.img-loaded{
  animation:none;
  background:transparent;
}
@keyframes img-shimmer{
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}