/* =================================================
   JyotishAI — Premium Cosmic Design System v5
   Mobile-first · Glassmorphism · 8px grid · 2026
   ================================================= */

/* ── Design Tokens ── */
:root{
  /* Cosmic palette */
  --void: #060812;
  --void-rgb: 6,8,18;
  --midnight: #0b0f1f;
  --midnight-rgb: 11,15,31;
  --indigo: #1a1f3a;
  --indigo-rgb: 26,31,58;
  --purple-deep: #2e2157;
  --purple-dim: #4b1d6b;
  --lavender-soft: #8b7cb3;
  --lavender: #a88bc5;
  --gold: #f5c842;
  --gold-rgb: 245,200,66;
  --gold-dim: #d4a832;
  --gold-glow: rgba(245,200,66,0.28);
  --amber-warm: #d98e3e;
  --copper: #b07850;
  --rose-mist: #e0c0a0;

  /* Functional */
  --text-body: #e6e6f0;
  --text-muted: #8a8daf;
  --text-faint: #555779;
  --text-inverse: #060812;
  --surface-1: rgba(16,20,40,0.65);
  --surface-2: rgba(24,28,56,0.75);
  --surface-3: rgba(32,36,68,0.85);
  --glass: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.07);
  --glass-border-strong: rgba(255,255,255,0.12);
  --glass-highlight: rgba(255,255,255,0.06);

  /* Feedback */
  --success: #34d399;
  --success-bg: rgba(52,211,153,0.10);
  --danger: #f87171;
  --danger-bg: rgba(248,113,113,0.10);
  --warning: #fbbf24;
  --warning-bg: rgba(251,191,36,0.10);
  --info: #7dd3fc;
  --info-bg: rgba(125,211,252,0.10);

  /* Typography */
  --font-head: 'Playfair Display', Georgia, 'Noto Serif', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Spacing (8px grid) */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-14: 56px; --space-16: 64px; --space-20: 80px;

  /* Radii */
  --r-sm: 8px;   --r-md: 12px;   --r-lg: 16px;
  --r-xl: 20px;  --r-2xl: 24px;  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.55);
  --shadow-gold: 0 0 28px var(--gold-glow);
  --shadow-elevated: 0 16px 48px rgba(0,0,0,0.6);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.45, 0, 0.15, 1);

  /* Safe areas */
  --bottom-nav-h: 72px;
  --header-h: 64px;
}

/* ── Reset & Base ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overscroll-behavior-y:contain;
}
body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  color:var(--text-body);
  background:var(--void);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  padding-bottom:var(--bottom-nav-h);
}

/* Disable pull-to-refresh overscroll on body */
body::before{
  content:'';
  position:fixed;inset:0;z-index:-2;
  background:var(--void);
}

/* Cosmic background gradient */
body::after{
  content:'';
  position:fixed;top:0;left:0;width:100%;height:600px;z-index:-1;
  background:
    radial-gradient(ellipse 100% 100% at 50% -20%, rgba(30,20,70,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 80% 30%, rgba(78,30,100,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 20% 70%, rgba(40,30,80,0.15) 0%, transparent 50%);
  pointer-events:none;
}

/* ── Typography ── */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.2;
  color:var(--text-body);
}
h1{font-size:clamp(1.875rem,5.5vw,2.5rem)} /* 30-40px */
h2{font-size:clamp(1.5rem,4vw,2rem)}       /* 24-32px */
h3{font-size:clamp(1.125rem,3vw,1.375rem)} /* 18-22px */
h4{font-size:1rem}
p{color:var(--text-muted)}
a{color:var(--gold);text-decoration:none;transition:opacity .15s}
a:hover{opacity:.8}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.18)}

/* ============================================================
   NAVIGATION — Native App Bottom Bar + Sticky Header
   ============================================================ */

.app-shell{position:relative;max-width:480px;margin:0 auto;min-height:100vh}

/* Sticky glass header */
.app-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--space-4);
  background:linear-gradient(180deg, rgba(6,8,18,0.92) 0%, rgba(6,8,18,0.75) 60%, rgba(6,8,18,0) 100%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  pointer-events:none;
}
.app-header > *{pointer-events:auto}
.app-header .brand{
  display:flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-head);font-weight:700;font-size:1.15rem;
  color:#fff;letter-spacing:-0.03em;
}
.app-header .brand-icon{
  width:32px;height:32px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--gold-dim),var(--amber-warm));
  display:grid;place-items:center;
}
.app-header .brand-icon svg{width:18px;height:18px;color:var(--text-inverse)}

/* Hamburger */
.nav-hamburger{
  width:40px;height:40px;border-radius:var(--r-md);
  border:none;
  background:var(--glass);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--glass-border);
  color:var(--text-body);
  display:grid;place-items:center;cursor:pointer;
  transition:all .2s var(--ease-out);
}
.nav-hamburger:active{transform:scale(0.92);background:var(--glass-highlight)}

/* Bottom Navigation */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  height:var(--bottom-nav-h);
  display:flex;justify-content:space-around;align-items:center;
  background:linear-gradient(0deg, rgba(6,8,18,0.95) 0%, rgba(6,8,18,0.85) 60%, rgba(6,8,18,0.6) 100%);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-border);
  padding-bottom:env(safe-area-inset-bottom,0);
  transition:transform .35s var(--ease-out);
}
.bottom-nav.hidden{transform:translateY(110%)}
.bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:var(--space-2) 0;color:var(--text-faint);font-size:.65rem;
  font-weight:500;letter-spacing:.02em;
  position:relative;transition:color .2s var(--ease-out);
  -webkit-touch-callout:none;user-select:none;
}
.bottom-nav a .nav-icon{
  width:24px;height:24px;display:grid;place-items:center;
  color:var(--text-faint);transition:color .2s,transform .2s var(--ease-spring);
}
.bottom-nav a.active{color:var(--gold)}
.bottom-nav a.active .nav-icon{color:var(--gold);transform:translateY(-2px)}
.bottom-nav a.active::after{
  content:'';position:absolute;bottom:4px;width:4px;height:4px;border-radius:var(--r-full);background:var(--gold);
}
/* nav tap feedback */
.bottom-nav a:active{opacity:.7}

/* Floating Action Button */
.fab-wrap{
  position:fixed;bottom:calc(var(--bottom-nav-h) + var(--space-4));right:var(--space-4);z-index:99;
}
.fab{
  width:56px;height:56px;border-radius:var(--r-full);
  border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--amber-warm));
  color:var(--text-inverse);
  display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(245,200,66,0.35),0 0 0 1px rgba(245,200,66,0.15);
  transition:all .25s var(--ease-spring);
}
.fab:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(245,200,66,0.45)}
.fab:active{transform:scale(0.94)}

/* Fullscreen Menu */
.nav-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(6,8,18,0.92);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-6);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease-out);
}
.nav-overlay.open{opacity:1;pointer-events:auto}
.nav-overlay a{
  font-family:var(--font-head);font-size:1.5rem;color:#fff;
  opacity:0;transform:translateY(16px);
  transition:all .4s var(--ease-spring);
}
.nav-overlay.open a{opacity:1;transform:translateY(0)}
.nav-overlay a:nth-child(1){transition-delay:.05s}
.nav-overlay a:nth-child(2){transition-delay:.10s}
.nav-overlay a:nth-child(3){transition-delay:.15s}
.nav-overlay a:nth-child(4){transition-delay:.20s}
.nav-overlay a:nth-child(5){transition-delay:.25s}
.nav-overlay a:nth-child(6){transition-delay:.30s}
.nav-overlay a:nth-child(7){transition-delay:.35s}
.nav-overlay .close-btn{
  position:absolute;top:var(--space-6);right:var(--space-6);
  width:48px;height:48px;border-radius:var(--r-full);
  background:var(--glass);border:1px solid var(--glass-border);
  color:var(--text-body);font-size:1.5rem;cursor:pointer;
  display:grid;place-items:center;
}
.nav-overlay .user-bit{
  position:absolute;top:var(--space-6);left:var(--space-6);
  display:flex;align-items:center;gap:var(--space-3);
}
.nav-overlay .user-bit .avatar{
  width:40px;height:40px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--purple-dim),var(--indigo));
  display:grid;place-items:center;font-size:1rem;
}

/* ============================================================
   LAYOUT & SPACING
   ============================================================ */
.page-content{
  padding-top:calc(var(--header-h) + var(--space-4));
  padding-left:var(--space-4);
  padding-right:var(--space-4);
  padding-bottom:var(--space-8);
  max-width:480px;margin:0 auto;
}
.page-content.no-nav-pad{padding-bottom:0}

.container{max-width:480px;margin:0 auto}

/* ============================================================
   GLASSMORPHISM CARDS
   ============================================================ */
.glass-card{
  background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  padding:var(--space-5);
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s;
}
.glass-card:hover{
  border-color:var(--glass-border-strong);
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.glass-card:active{transform:scale(0.985)}

.glass-card-premium{
  background:linear-gradient(160deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.015) 100%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border-strong);
  border-radius:var(--r-xl);
  padding:var(--space-6);
  position:relative;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
.glass-card-premium::before{
  content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-glow),transparent);
}

/* Accent gold glow top border */
.card-glow-border{
  position:relative;
}
.card-glow-border::after{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,200,66,0.4),transparent);
  border-radius:var(--r-full);
}

/* Horizontal scroll cards */
.h-scroll{
  display:flex;gap:var(--space-3);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:var(--space-2) var(--space-1);
  margin:0 calc(-1*var(--space-4));
  padding-left:var(--space-4);padding-right:var(--space-4);
}
.h-scroll::-webkit-scrollbar{display:none}
.h-scroll .h-card{
  flex:0 0 80%;scroll-snap-align:start;
  min-width:280px;
}
.h-scroll .h-card-sm{flex:0 0 60%;min-width:200px}

/* ============================================================
   BUTTONS — Premium Native
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  border:none;border-radius:var(--r-lg);
  font-family:var(--font-body);font-size:.9rem;font-weight:600;
  padding:var(--space-3) var(--space-5);
  cursor:pointer;position:relative;overflow:hidden;
  transition:all .2s var(--ease-out);
  -webkit-touch-callout:none;user-select:none;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:active:not(:disabled){transform:scale(0.97)}

.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--amber-warm));
  color:var(--text-inverse);
  box-shadow:0 2px 12px rgba(245,200,66,0.25);
}
.btn-primary:hover:not(:disabled){box-shadow:0 4px 20px rgba(245,200,66,0.4);transform:translateY(-1px)}
.btn-primary:active:not(:disabled){transform:scale(0.97)}

.btn-secondary{
  background:var(--surface-2);
  color:var(--text-body);
  border:1px solid var(--glass-border-strong);
}
.btn-secondary:hover{background:var(--surface-3);transform:translateY(-1px)}

.btn-ghost{
  background:transparent;
  color:var(--text-muted);
  border:1px solid var(--glass-border);
}
.btn-ghost:hover{background:var(--glass);color:var(--text-body)}

.btn-block{width:100%;padding-top:var(--space-4);padding-bottom:var(--space-4);border-radius:var(--r-xl);font-size:1rem}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:.82rem;border-radius:var(--r-md)}

/* Shimmer / sparkle effect on primary */
.btn-primary::before{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  transform:skewX(-20deg);
  transition:left .6s var(--ease-out);
}
.btn-primary:hover::before{left:120%}

/* Icon button */
.btn-icon{
  width:44px;height:44px;padding:0;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--surface-2);
  color:var(--text-body);
  border:1px solid var(--glass-border);
  cursor:pointer;transition:all .2s var(--ease-out);
}
.btn-icon:active{transform:scale(0.9)}

/* ============================================================
   FORMS
   ============================================================ */
.form-group{margin-bottom:var(--space-5)}
.form-label{
  display:block;font-size:.82rem;font-weight:600;color:var(--text-muted);
  margin-bottom:var(--space-2);letter-spacing:.02em;
}
.form-input,.form-select,.form-textarea{
  width:100%;padding:14px 18px;
  border-radius:var(--r-lg);border:1.5px solid var(--glass-border);
  background:var(--surface-2);
  color:var(--text-body);font-size:1.05rem;font-family:var(--font-body);
  transition:border-color .2s,box-shadow .2s,background .2s;
  -webkit-appearance:none;appearance:none;
  min-height:48px;
}
.form-input::placeholder{color:var(--text-faint);font-size:.98rem}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;
  border-color:rgba(245,200,66,0.5);
  box-shadow:0 0 0 4px rgba(245,200,66,0.1);
  background:var(--surface-3);
}
select.form-select{padding-right:40px}
.form-group label,.form-label{
  display:block;font-size:.88rem;font-weight:600;color:var(--text-muted);
  margin-bottom:var(--space-2);letter-spacing:.02em;
}

/* Premium select arrow */
.select-wrap{position:relative}
.select-wrap::after{
  content:'▼';position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);
  font-size:.6rem;color:var(--text-muted);pointer-events:none;
}

/* Custom checkbox */
.checkbox-premium{
  display:flex;align-items:flex-start;gap:var(--space-3);
  cursor:pointer;
}
.checkbox-premium input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;min-width:22px;margin-top:2px;
  border-radius:var(--r-sm);border:1.5px solid var(--glass-border-strong);
  background:var(--surface-2);cursor:pointer;
  transition:all .2s var(--ease-out);
  display:grid;place-items:center;
}
.checkbox-premium input[type="checkbox"]:checked{
  background:linear-gradient(135deg,var(--gold),var(--amber-warm));
  border-color:transparent;
}
.checkbox-premium input[type="checkbox"]:checked::after{
  content:'✓';color:var(--text-inverse);font-size:.8rem;font-weight:700;
}
.checkbox-premium span{font-size:.88rem;color:var(--text-muted);line-height:1.35}

/* File upload premium */
.file-drop-zone{
  border:2px dashed var(--glass-border-strong);
  border-radius:var(--r-xl);
  padding:var(--space-8) var(--space-4);
  text-align:center;
  background:var(--surface-1);
  transition:all .25s var(--ease-out);
  cursor:pointer;position:relative;overflow:hidden;
}
.file-drop-zone:hover,.file-drop-zone.dragover{
  border-color:rgba(245,200,66,0.4);
  background:rgba(245,200,66,0.03);
  box-shadow:0 0 24px rgba(245,200,66,0.08);
}
.file-drop-zone .drop-icon{
  width:56px;height:56px;margin:0 auto var(--space-4);
  border-radius:var(--r-full);
  background:var(--surface-2);
  display:grid;place-items:center;
  color:var(--gold);font-size:1.5rem;
}
.file-drop-zone .drop-title{font-weight:600;color:var(--text-body);margin-bottom:var(--space-1)}
.file-drop-zone .drop-hint{font-size:.82rem;color:var(--text-muted)}
.file-drop-zone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ============================================================
   LOADERS & SKELETONS
   ============================================================ */
.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%;
  border-radius:var(--r-md);
  animation:skeletonPulse 1.5s infinite linear;
}
@keyframes skeletonPulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-sm{height:12px}
.skeleton-md{height:16px}
.skeleton-lg{height:24px}
.skeleton-round{border-radius:var(--r-full)}

/* Cosmic spinner */
.cosmic-spinner{
  width:40px;height:40px;border-radius:50%;
  border:3px solid var(--surface-3);
  border-top-color:var(--gold);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Typing dots */
.typing-dots{display:flex;gap:4px;align-items:center;padding:var(--space-3) var(--space-4)}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:typingBounce 1.4s infinite ease-in-out}
.typing-dots span:nth-child(1){animation-delay:0s}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}

/* ============================================================
   TOASTS
   ============================================================ */
.toast-container{
  position:fixed;top:calc(var(--header-h) + var(--space-3));left:50%;transform:translateX(-50%);
  z-index:1000;display:flex;flex-direction:column;gap:var(--space-3);width:90%;max-width:420px;
}
.toast-item{
  background:linear-gradient(135deg, rgba(24,28,56,0.95), rgba(16,20,40,0.95));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border-strong);
  border-radius:var(--r-lg);
  padding:var(--space-4) var(--space-5);
  display:flex;align-items:center;gap:var(--space-3);
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  animation:toastSlide .4s var(--ease-spring);
  font-size:.9rem;
}
@keyframes toastSlide{from{opacity:0;transform:translateY(-16px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.toast-item.info{border-color:rgba(125,211,252,0.25)}
.toast-item.success{border-color:rgba(52,211,153,0.25)}
.toast-item.error{border-color:rgba(248,113,113,0.25)}
.toast-item.warning{border-color:rgba(251,191,36,0.25)}

/* ============================================================
   PULL TO REFRESH
   ============================================================ */
.ptr-wrap{
  position:relative;overflow:hidden;
}
.ptr-indicator{
  position:absolute;top:-60px;left:0;right:0;height:60px;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .2s;
}
.ptr-indicator svg{width:28px;height:28px;color:var(--gold);transition:transform .3s}
.ptr-wrap.ptr-pulling .ptr-indicator{opacity:1}
.ptr-wrap.ptr-releasing .ptr-indicator svg{transform:rotate(180deg)}

/* ============================================================
   TAGS & BADGES
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:var(--space-1) var(--space-3);
  border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text-muted);
  border:1px solid var(--glass-border);
}
.badge-gold{background:rgba(245,200,66,0.12);color:var(--gold);border-color:rgba(245,200,66,0.18)}
.badge-premium{
  background:linear-gradient(135deg,rgba(245,200,66,0.15),rgba(217,142,62,0.1));
  color:var(--gold);border:1px solid rgba(245,200,66,0.2);
}

.tag{
  font-size:.78rem;padding:var(--space-1) var(--space-3);
  border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text-muted);
  border:1px solid var(--glass-border);
  font-weight:500;
}

/* ============================================================
   PROGRESS
   ============================================================ */
.progress-container{width:100%;margin:var(--space-3) 0}
.progress-track{
  width:100%;height:6px;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden;
}
.progress-fill{
  height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--gold),var(--amber-warm));
  transition:width .5s var(--ease-out);position:relative;
}
.progress-fill.active::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:20px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3));
  animation:shimmerBar 1.5s infinite;
}
@keyframes shimmerBar{0%{left:-20%}100%{left:120%}}
.progress-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-muted);margin-top:var(--space-2)}

/* ============================================================
   HERO — Premium cosmic
   ============================================================ */
.hero-compact{
  position:relative;padding:var(--space-8) var(--space-4) var(--space-6);
  text-align:center;overflow:hidden;margin:0 calc(-1*var(--space-4));
}
.hero-compact::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(46,33,87,0.35) 0%,transparent 70%),
    radial-gradient(ellipse 50% 50% at 70% 30%,rgba(75,29,107,0.2) 0%,transparent 60%);
  pointer-events:none;
}
.hero-content{position:relative;z-index:1;max-width:440px;margin:0 auto}
.hero-greeting{font-size:1rem;color:var(--gold);font-weight:600;margin-bottom:var(--space-2);letter-spacing:.02em}
.hero-title{font-family:var(--font-head);font-size:clamp(1.75rem,6vw,2.5rem);font-weight:700;color:#fff;line-height:1.15;margin-bottom:var(--space-3)}
.hero-lead{font-size:1rem;color:var(--text-muted);margin-bottom:var(--space-5);line-height:1.55}

/* Today horoscope mini card */
.today-card{
  background:linear-gradient(160deg, rgba(245,200,66,0.08), rgba(40,30,80,0.25));
  border:1px solid rgba(245,200,66,0.15);
  border-radius:var(--r-xl);
  padding:var(--space-5);
  position:relative;overflow:hidden;
  margin:var(--space-4) 0;
}
.today-card .today-sign{
  display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);
}
.today-card .today-sign .sign-emoji{font-size:2rem;line-height:1}
.today-card .today-sign .sign-name{font-family:var(--font-head);font-weight:600;color:#fff;font-size:1.15rem}
.today-card .today-sign .sign-date{font-size:.78rem;color:var(--text-muted)}
.today-card .today-text{font-size:.9rem;color:var(--text-muted);line-height:1.55}

/* ============================================================
   GRIDS
   ============================================================ */
.quick-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);
}
.quick-grid .quick-item{
  background:var(--surface-1);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:var(--space-4) var(--space-3);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  text-align:center;
  transition:all .2s var(--ease-out);
  cursor:pointer;
}
.quick-grid .quick-item:active{transform:scale(0.96);background:var(--surface-2)}
.quick-grid .quick-icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--surface-2);display:grid;place-items:center;font-size:1.25rem}
.quick-grid .quick-label{font-size:.82rem;font-weight:600;color:var(--text-body)}

/* Lucky numbers row */
.lucky-row{
  display:flex;gap:var(--space-3);
}
.lucky-pill{
  flex:1;
  background:var(--surface-1);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:var(--space-3) var(--space-2);
  text-align:center;
  transition:all .2s var(--ease-out);
}
.lucky-pill .lucky-label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-1)}
.lucky-pill .lucky-value{font-family:var(--font-head);font-size:1.25rem;font-weight:700;color:#fff}
.lucky-pill.gold{background:rgba(245,200,66,0.08);border-color:rgba(245,200,66,0.2)}
.lucky-pill.gold .lucky-value{color:var(--gold)}

/* ============================================================
   SECTION DIVIDERS
   ============================================================ */
.section-label{
  display:flex;align-items:center;gap:var(--space-3);
  margin:var(--space-8) 0 var(--space-4);
}
.section-label span{
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-faint);white-space:nowrap;
}
.section-label .line{flex:1;height:1px;background:linear-gradient(90deg,var(--glass-border),transparent)}

/* ============================================================
   READING RESULTS PREMIUM
   ============================================================ */
.reading-view{
  background:var(--surface-1);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  padding:var(--space-5);
}
.reading-view h2{font-size:1.25rem;margin-bottom:var(--space-4);color:#fff}
.reading-view h3{font-size:1rem;color:var(--gold);margin:var(--space-4) 0 var(--space-2)}
.reading-view p{font-size:.9rem;line-height:1.65;color:var(--text-muted);margin-bottom:var(--space-3)}
.reading-view ul{padding-left:var(--space-5);margin-bottom:var(--space-3)}
.reading-view ul li{font-size:.9rem;color:var(--text-muted);margin-bottom:var(--space-1);line-height:1.55}

/* AI Card sections */
.ai-section-card{
  background:linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 100%);
  border:1px solid rgba(245,200,66,0.12);
  border-radius:var(--r-xl);
  padding:var(--space-5);
  position:relative;overflow:hidden;
  margin-bottom:var(--space-4);
  box-shadow:0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
  transition:transform .2s var(--ease-out),box-shadow .2s;
}
.ai-section-card:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.4)}

.ai-section-header{
  display:flex;align-items:center;gap:var(--space-3);
  margin-bottom:var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--glass-border);
}
.ai-section-icon{
  font-size:1.6rem;line-height:1;flex-shrink:0;
}
.ai-section-title{
  font-family:var(--font-head);font-size:1.15rem;font-weight:700;
  color:var(--gold);margin:0;
}
.ai-card-body{overflow-wrap:break-word;word-break:break-word}
.ai-card-body .ai-para{font-size:.92rem;line-height:1.75;color:var(--text-body);margin-bottom:var(--space-3)}
.ai-card-body .ai-subsection{
  display:flex;align-items:center;gap:var(--space-2);
  margin:var(--space-3) 0 var(--space-2);
  padding:var(--space-2) var(--space-3);
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:var(--r-md);
  font-size:.9rem;color:var(--text-muted);
}
.ai-card-body .ai-sub-icon{font-size:1.1rem;flex-shrink:0}
.ai-highlight{color:var(--gold);font-weight:600}

@media (max-width:480px){
  .ai-section-card{padding:var(--space-4)}
  .ai-section-title{font-size:1.05rem}
  .ai-card-body .ai-para{font-size:.88rem}
}

/* Explicit kill browser default list markers on ai-list */
ol.ai-ol,ul.ai-ul{list-style:none;list-style-type:none;counter-reset:none}
ol.ai-ol li,ul.ai-ul li{list-style:none;list-style-type:none}
ol.ai-ol li::-webkit-list-marker,ul.ai-ul li::-webkit-list-marker{display:none}
ol.ai-ol li::marker,ul.ai-ul li::marker{content:none}
.ai-section-title{overflow-wrap:break-word;word-break:break-word}
.ai-para{overflow-wrap:break-word;word-break:break-word}

/* Lists outside .ai-card-body (highlights/warnings/next_steps) need same styling */
.ai-section-card > .ai-list,
.ai-card-body .ai-list{padding-left:var(--space-4);margin-bottom:var(--space-3);list-style:none}
.ai-section-card > .ai-list .ai-li,
.ai-card-body .ai-list .ai-li{font-size:.88rem;color:var(--text-muted);margin-bottom:var(--space-1);line-height:1.65;overflow-wrap:break-word;word-break:break-word}

/* li-num / li-bullet must work both inside and outside .ai-card-body */
.ai-list .li-num,
.ai-card-body .li-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--r-sm);background:var(--gold-glow);color:var(--gold);font-size:.72rem;font-weight:700;margin-right:6px;flex-shrink:0}
.ai-list .li-bullet,
.ai-card-body .li-bullet{margin-right:6px;flex-shrink:0}

/* View Kundli meta tags flex fix */
.view-kundli-meta{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* Mobile single-column for birth-details grid */
@media (max-width:480px){
  .kundli-data-grid{grid-template-columns:1fr}
  .ai-section-card{overflow-wrap:break-word;word-break:break-word}
}

/* ============================================================
   CHAT UI — AI Astrologer
   ============================================================ */
.chat-thread{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-4);
}
.chat-bubble{
  max-width:85%;padding:var(--space-4);border-radius:var(--r-lg);
  font-size:.9rem;line-height:1.55;position:relative;
  animation:msgSlide .35s var(--ease-out);
}
@keyframes msgSlide{from{opacity:0;transform:translateY(8px)}}}
.chat-bubble.user{align-self:flex-end;background:linear-gradient(135deg,var(--purple-dim),var(--indigo));color:#fff;border-bottom-right-radius:var(--space-1)}
.chat-bubble.ai{align-self:flex-start;background:var(--surface-2);border:1px solid var(--glass-border);color:var(--text-body);border-bottom-left-radius:var(--space-1)}
.chat-bubble .bubble-time{font-size:.65rem;color:var(--text-faint);margin-top:var(--space-2);display:block;text-align:right}

/* Suggested chips */
.chip-row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.chip{
  background:var(--surface-2);border:1px solid var(--glass-border);
  border-radius:var(--r-full);padding:var(--space-2) var(--space-4);
  font-size:.82rem;color:var(--text-muted);cursor:pointer;
  transition:all .2s var(--ease-out);
}
.chip:hover{border-color:var(--gold);color:var(--gold);background:rgba(245,200,66,0.06)}
.chip:active{transform:scale(0.95)}

/* ============================================================
   AUTH PAGES PREMIUM
   ============================================================ */
.auth-hero{
  text-align:center;padding:var(--space-8) var(--space-4) var(--space-6);
}
.auth-hero h1{font-size:clamp(1.75rem,6vw,2.5rem);margin-bottom:var(--space-2)}
.auth-hero p{color:var(--text-muted);font-size:1rem}

.auth-form{
  max-width:380px;margin:0 auto;padding:0 var(--space-4) var(--space-10);
  display:flex;flex-direction:column;gap:var(--space-4);
}

.social-auth-row{
  display:flex;gap:var(--space-3);margin-top:var(--space-2);
}
.social-auth-row .social-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3);border-radius:var(--r-lg);
  background:var(--surface-2);border:1px solid var(--glass-border);
  color:var(--text-body);font-size:.9rem;font-weight:500;cursor:pointer;
  transition:all .2s var(--ease-out);
}
.social-auth-row .social-btn:active{transform:scale(0.97)}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes popIn{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulse-gold{0%,100%{box-shadow:0 0 0 0 rgba(245,200,66,0)}50%{box-shadow:0 0 0 12px rgba(245,200,66,0.1)}}

.animate-fadeIn{animation:fadeIn .5s var(--ease-out)}
.animate-slideUp{animation:slideUp .5s var(--ease-out)}
.animate-slideUp-1{animation:slideUp .5s var(--ease-out) .08s both}
.animate-slideUp-2{animation:slideUp .5s var(--ease-out) .16s both}
.animate-slideUp-3{animation:slideUp .5s var(--ease-out) .24s both}
.animate-popIn{animation:popIn .4s var(--ease-spring)}
.animate-float{animation:float 4s ease-in-out infinite}
.stagger-1{animation-delay:.05s}
.stagger-2{animation-delay:.1s}
.stagger-3{animation-delay:.15s}
.stagger-4{animation-delay:.2s}

/* ============================================================
   MODALS & SHEETS
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(6,8,18,0.7);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:301;
  background:linear-gradient(180deg, var(--indigo), var(--midnight));
  border-top-left-radius:var(--r-2xl);border-top-right-radius:var(--r-2xl);
  border:1px solid var(--glass-border);border-bottom:none;
  padding:var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .4s var(--ease-spring);
}
.sheet.open{transform:translateY(0)}
.sheet .sheet-bar{
  width:40px;height:4px;background:var(--glass-border-strong);border-radius:var(--r-full);margin:0 auto var(--space-5);
}

/* ============================================================
   RESPONSIVE — Mobile first with tablet/desktop enhancement
   ============================================================ */
@media (min-width: 640px){
  body{font-size:16px}
  .app-shell{max-width:520px}
  .page-content{max-width:520px}
}
@media (min-width: 1024px){
  .app-shell{max-width:1200px;padding:0 var(--space-6)}
  .page-content{max-width:1000px;padding-left:var(--space-6);padding-right:var(--space-6)}
  .app-header{padding:0 var(--space-6)}
  .bottom-nav{justify-content:center;gap:var(--space-10);padding:0 var(--space-6)}
  .bottom-nav a{flex:0 0 auto;padding:var(--space-2) var(--space-4);font-size:.75rem}
}

/* ============================================================
   LEGACY SUPPORT / BACKWARD COMPAT
   ============================================================ */
/* Map old class names to new system where possible */
.card-glass{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--space-5)}
.form-card{
  max-width:520px;margin:0 auto;
  background:var(--surface-1);border:1px solid var(--glass-border);
  border-radius:var(--r-xl);padding:var(--space-6) var(--space-5);
  position:relative;
}
@media (min-width:769px){
  .form-card{max-width:720px;padding:var(--space-8) var(--space-7)}
  .page-content{max-width:960px;margin:0 auto}
}
@media (min-width:1200px){
  .form-card{max-width:860px;padding:var(--space-10) var(--space-8)}
  .page-content{max-width:1100px;margin:0 auto}
}
@media (max-width:480px){
  .form-card{padding:var(--space-5) var(--space-4)}
}
.result-box{background:var(--surface-1);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--space-5);margin-top:var(--space-4)}
.loader-box{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-10) var(--space-4)}
.spinner{width:36px;height:36px;border:3px solid var(--surface-3);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
.muted{color:var(--text-muted)}
.fine{font-size:.82rem;color:var(--text-faint)}
.text-center{text-align:center}
.mb-1{margin-bottom:var(--space-1)} .mb-2{margin-bottom:var(--space-2)} .mb-3{margin-bottom:var(--space-3)} .mb-4{margin-bottom:var(--space-4)} .mb-5{margin-bottom:var(--space-5)}
.mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .mt-5{margin-top:var(--space-5)}
.gap-2{gap:var(--space-2)}
.w-full{width:100%}

/* Old style.css compatibility */
.navbar{display:none}
.footer{display:none}
.hero{padding:0}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin-bottom:var(--space-6)}
@media (min-width:640px){
  .quick-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
  .quick-grid{grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
}
.quick-item{background:var(--surface-1);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--space-5) var(--space-3);text-align:center;transition:all .2s var(--ease-out);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--text-body)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-3);margin-bottom:var(--space-6)}
.card{background:var(--surface-1);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:var(--space-4);transition:all .2s}
.page{padding:var(--space-6) var(--space-4)}
.alert{border-radius:var(--r-md);padding:var(--space-3) var(--space-4);margin:var(--space-3) 0;font-size:.9rem}
.reading-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--glass-border)}
.reading-row:last-child{border:none}
.reading-row a{flex:1;font-weight:500;color:var(--text-body)}
.progress-container{width:100%;margin:var(--space-3) 0}
.progress-bar-outer{height:6px;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden}
.progress-bar-inner{height:100%;background:linear-gradient(90deg,var(--gold),var(--amber-warm));border-radius:var(--r-full);transition:width .5s ease}
.progress-label{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-muted);margin-top:var(--space-2)}
.progress-percent{color:var(--gold);font-weight:600}
.dashboard-grid{display:grid;gap:var(--space-4)}
.dash-card{background:var(--surface-1);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--space-5)}
.tabs{display:flex;gap:var(--space-1);margin-bottom:var(--space-4)}
.tab-btn{flex:1;padding:var(--space-3) var(--space-2);border-radius:var(--r-md);border:none;background:transparent;color:var(--text-muted);font-weight:600;cursor:pointer;transition:all .2s}
.tab-btn.active{background:var(--surface-2);color:var(--text-body)}
.form-row{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.form-row .form-group{flex:1 1 0;min-width:220px;margin-bottom:0}
.time-row{display:flex;gap:var(--space-2);align-items:center;width:100%}
.time-row select{flex:1}
.time-row strong{color:var(--text-muted);font-weight:500}
.loc-row{display:flex;gap:var(--space-2);align-items:stretch}
.loc-row input{flex:1}
.location-wrap input{flex:1}
.person-block{background:var(--surface-1);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--space-5);margin-bottom:var(--space-4)}
.person-block h3{font-family:var(--font-head);font-size:1.1rem;color:#fff;margin-bottom:var(--space-3)}
.person-block:last-child{margin-bottom:0}
@media (min-width:769px){
  .form-row{flex-wrap:nowrap}
  .form-row .form-group{min-width:0}
}
@media (max-width:480px){
  .form-row{flex-direction:column;gap:var(--space-3)}
  .form-row .form-group{min-width:100%;margin-bottom:var(--space-3)}
  .time-row{gap:var(--space-1)}
  .loc-row{flex-direction:column}
  .loc-row .btn{width:100%}
}
.ampm-group{display:flex;gap:2px}
.ampm-btn{padding:var(--space-2) var(--space-3);border-radius:var(--r-sm);border:none;background:var(--surface-2);color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:all .2s}
.ampm-btn.active{background:var(--purple-dim);color:var(--text-body)}
.loc-row{display:flex;gap:var(--space-2)}
.location-wrap input{flex:1}
.suggestions{position:absolute;left:0;right:0;z-index:50;background:var(--surface-3);border:1px solid var(--glass-border);border-radius:var(--r-md);max-height:180px;overflow:auto;list-style:none;margin-top:var(--space-1)}
.suggestions li{padding:var(--space-2) var(--space-3);cursor:pointer;font-size:.88rem;color:var(--text-muted);transition:background .15s}
.suggestions li:hover{background:var(--surface-2);color:var(--text-body)}
.checkbox-label{display:flex;gap:var(--space-2);align-items:flex-start;cursor:pointer}
.checkbox-label input{margin-top:3px}
.preview{width:80px;height:80px;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--glass-border);margin-top:var(--space-2);display:none}
.cta-section{text-align:center;padding:var(--space-10) var(--space-4);margin-top:var(--space-6)}
.cta-section h2{font-size:clamp(1.3rem,3.5vw,1.8rem);margin-bottom:var(--space-2)}
.cta-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
.share-toolbar{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.share-bar{display:flex;gap:var(--space-2);flex-wrap:wrap}
.btn-share{gap:var(--space-1);padding:var(--space-2) var(--space-3);font-size:.82rem;border-radius:var(--r-md);background:rgba(245,200,66,.1);color:var(--gold);border:1px solid rgba(245,200,66,.2);cursor:pointer}
.btn-share:hover{background:rgba(245,200,66,.2)}
.lang-selector select{background:var(--surface-2);border:1px solid var(--glass-border);border-radius:var(--r-md);padding:var(--space-1) var(--space-2);color:var(--text-body);font-size:.82rem;cursor:pointer}

/* Responsive legacy */
@media (max-width:860px){
  .nav-toggle{display:none}
}
@media (max-width:480px){
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .form-row{flex-direction:column}
  .form-row .form-group{min-width:100%}
}
/* Hide old nav completely when premium nav is active */
.brand svg{display:none}

/* ── Page transition overlay ── */
.page-transition{position:fixed;inset:0;z-index:500;background:var(--void);opacity:0;pointer-events:none;transition:opacity .35s}
.page-transition.active{opacity:1;pointer-events:auto}
.pt-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(245,200,66,0.04),transparent);background-size:200% 100%;animation:shimmer 2s infinite}

/* ── Vedic result cards ── */
.vedic-result{background:var(--surface-1);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--space-5);margin-top:var(--space-4)}
.vedic-result h2{font-size:1.25rem;color:var(--gold);margin-bottom:var(--space-3)}
.vedic-result h3{font-size:1rem;color:#fff;margin:var(--space-4) 0 var(--space-2)}
.vedic-badges{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}
.vedic-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:var(--space-3)}
.vedic-table th,.vedic-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--glass-border);text-align:left}
.vedic-table th{color:var(--text-muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}

/* ── Location autocomplete dropdown ── */
.suggestions{position:absolute;left:0;right:0;z-index:50;background:var(--surface-3);border:1px solid var(--glass-border);border-radius:var(--r-md);max-height:180px;overflow:auto;list-style:none;margin-top:var(--space-1);box-shadow:0 8px 24px rgba(0,0,0,0.5)}
.suggestions li{padding:var(--space-3);cursor:pointer;font-size:.85rem;color:var(--text-muted);transition:background .15s;border-bottom:1px solid var(--glass-border)}
.suggestions li:last-child{border-bottom:none}
.suggestions li:hover{background:var(--surface-2);color:var(--text-body)}
.sug-name{font-weight:600;color:var(--text-body);font-size:.88rem}
.sug-detail{font-size:.78rem;color:var(--text-faint);margin-top:2px}

/* ── Person block ── */
.person-block{background:var(--surface-1);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--space-5);margin-bottom:var(--space-4)}
.person-block h3{font-family:var(--font-head);font-size:1.1rem;color:#fff;margin-bottom:var(--space-3)}
.person-block:last-child{margin-bottom:0}

/* ── AI analysis sections ── */
.ai-analysis-result{line-height:1.85;font-size:1.05rem}
.ai-analysis-result h3,.ai-analysis-result h4{color:var(--gold);font-family:var(--font-body);font-weight:700;margin:20px 0 10px}
.ai-analysis-result p{margin-bottom:14px}
.ai-analysis-result ul{padding-left:24px;margin-bottom:16px}
.ai-analysis-result ul li{margin-bottom:8px;color:var(--text-muted);line-height:1.55}
.ai-analysis-result ol{padding-left:24px;margin-bottom:16px}
.ai-analysis-result ol li{margin-bottom:8px;color:var(--text-muted);line-height:1.55}
/* highlight blocks with emojis */
.ai-analysis-result > div{background:var(--surface-2);border-radius:12px;padding:16px;margin-bottom:16px;border:1px solid var(--glass-border)}

/* ── Auth guard hidden when page transition active ── */
body:has(.nav-overlay.open){overflow:hidden}

/* ── Premium overrides + legacy compat ── */

/* Spinner (legacy compat) */
.spinner{width:48px;height:48px;border:3px solid rgba(245,200,66,0.12);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Page transition overlay */
.page-transition{position:fixed;inset:0;z-index:500;background:var(--void);opacity:0;pointer-events:none;transition:opacity .35s}
.page-transition.active{opacity:1;pointer-events:auto}

/* Vedic result cards */
.vedic-result{background:var(--surface-1);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--space-5);margin-top:var(--space-4)}
.vedic-result h2{font-size:1.25rem;color:var(--gold);margin-bottom:var(--space-3)}
.vedic-result h3{font-size:1rem;color:#fff;margin:var(--space-4) 0 var(--space-2)}
.vedic-badges{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}
.vedic-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:var(--space-3)}
.vedic-table th,.vedic-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--glass-border);text-align:left}
.vedic-table th{color:var(--text-muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}

/* Location autocomplete */
.suggestions{position:absolute;left:0;right:0;z-index:50;background:var(--surface-3);border:1px solid var(--glass-border);border-radius:var(--r-md);max-height:180px;overflow:auto;list-style:none;margin-top:var(--space-1);box-shadow:0 8px 24px rgba(0,0,0,0.5)}
.suggestions li{padding:var(--space-3);cursor:pointer;font-size:.85rem;color:var(--text-muted);transition:background .15s;border-bottom:1px solid var(--glass-border)}
.suggestions li:last-child{border-bottom:none}
.suggestions li:hover{background:var(--surface-2);color:var(--text-body)}
.sug-name{font-weight:600;color:var(--text-body);font-size:.88rem}
.sug-detail{font-size:.78rem;color:var(--text-faint);margin-top:2px}

/* Person block */
.person-block{background:var(--surface-1);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--space-5);margin-bottom:var(--space-4)}
.person-block h3{font-family:var(--font-head);font-size:1.1rem;color:#fff;margin-bottom:var(--space-3)}
.person-block:last-child{margin-bottom:0}

/* AI analysis sections */
.ai-analysis-result{line-height:1.85;font-size:1.05rem}
.ai-analysis-result h3,.ai-analysis-result h4{color:var(--gold);font-family:var(--font-body);font-weight:700;margin:20px 0 10px}
.ai-analysis-result p{margin-bottom:14px}
.ai-analysis-result ul, .ai-analysis-result ol{padding-left:24px;margin-bottom:16px}
.ai-analysis-result ul li, .ai-analysis-result ol li{margin-bottom:8px;color:var(--text-muted);line-height:1.55}
.ai-analysis-result > div{background:var(--surface-2);border-radius:12px;padding:16px;margin-bottom:16px;border:1px solid var(--glass-border)}

/* Share page premium */
.share-hero-badge{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--amber));color:#0a0a12;padding:5px 14px;border-radius:var(--r-sm);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--space-3)}
.section-card-outer{background:var(--surface-1);border:1px solid var(--glass-border);border-radius:var(--r-xl);margin-bottom:var(--space-4);overflow:hidden}
.section-card-outer:hover{transform:translateY(-1px);border-color:rgba(245,200,66,0.08)}
.section-header-bar{display:flex;align-items:center;gap:var(--space-3);background:var(--surface-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--glass-border)}
.section-body{padding:var(--space-5)}
.section-icon{width:32px;height:32px;border-radius:var(--r-sm);background:var(--gradient-gold);display:flex;align-items:center;justify-content:center;font-size:1rem;color:#0a0a12;flex-shrink:0}
.section-title{font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:#fff}
.section-subtitle{font-size:.8rem;color:var(--text-muted)}

/* Public share CTA */
.public-share-cta{background:var(--gradient-void);border:1px solid rgba(245,200,66,0.12);border-radius:var(--r-xl);padding:var(--space-6);margin-top:var(--space-6);text-align:center;position:relative;background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L61 39L100 50L61 61L50 100L39 61L0 50L39 39Z' fill='%23f5c842' fill-opacity='0.015'/%3E%3C/svg%3E")}

/* Rashi cards */
.rashi-grid{display:flex;flex-direction:column;gap:12px}
.rashi-card{background:var(--surface-2);border:1px solid var(--glass-border);border-radius:var(--r-lg);overflow:hidden;transition:transform .2s,border-color .2s}
.rashi-card:hover{transform:translateY(-1px);border-color:rgba(245,200,66,0.12)}
.rashi-header{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;font-weight:600}
.rashi-header .emoji{font-size:1.4rem}
.rashi-header h3{font-size:1.05rem;margin:0;color:#fff}
.rashi-header .chevron{margin-left:auto;font-size:.85rem;color:var(--text-faint);transition:transform .25s}
.rashi-header .lucky-preview{display:flex;gap:14px;margin-left:12px;font-size:.8rem;color:var(--text-muted)}
.rashi-body{display:none;padding:0 18px 16px}
.rashi-card.open .rashi-body{display:block}
.rashi-card.open .chevron{transform:rotate(180deg)}

/* View Kundli legacy compat */
.view-kundli-page{padding-top:0}
.processing-box{text-align:center;padding:60px 20px}
.ai-section-card{margin-bottom:20px}
.kundli-data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3)}
.kundli-data-item{display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--glass-border);padding-bottom:var(--space-3)}
.kdi-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint)}
.kdi-value{color:var(--text-body);font-weight:600;font-size:.92rem;overflow-wrap:break-word;word-break:break-word}

/* Public share meta grid */
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1) var(--space-4)}
.meta-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin-bottom:1px}
.meta-value{color:var(--text-body);font-weight:600;font-size:.92rem}

/* Footer disclaimer */
.footer-disclaimer{text-align:center;color:var(--text-faint);font-size:.75rem;padding:var(--space-6) 0 var(--space-3);border-top:1px solid var(--glass-border);margin-top:var(--space-4)}

/* Share buttons */
.share-btn{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--surface-2);border:1px solid var(--glass-border);color:var(--text-body);padding:var(--space-2) var(--space-3);border-radius:var(--r-md);font-weight:500;font-size:.85rem}
.share-btn:hover{background:var(--surface-3);border-color:rgba(245,200,66,0.2)}

/* AI block markup */
.ai-block{background:var(--surface-2);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:var(--space-4);margin-bottom:var(--space-3)}
.ai-para{color:var(--text-body);font-size:.96rem;line-height:1.65}