/* ══════════════════════════════════════════════════════════════════════════════
   COSMIC PRECISION — design system overlay (Stitch → Shaula integration)
   Sovrascrive i token in app.css senza toccare la logica JS.
   Caricato DOPO app.css così ha priorità.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds — Deep Void */
  --bg:  #05070A;
  --bg2: #0b1323;
  --bg3: #131c2c;
  --bg4: #172030;

  /* Starlight Gold */
  --accent:      #E8C46A;
  --accent2:     #d4af37;
  --accent-glow: rgba(232,196,106,.20);
  --gold:        #E8C46A;
  --gold2:       #f2ca50;
  --gold3:       rgba(232,196,106,.30);

  /* Text */
  --text:  #dae2f9;
  --text2: #d0c5af;
  --text3: rgba(208,197,175,.50);

  /* Borders — ultra-fine stellar */
  --border:  rgba(255,255,255,.06);
  --border2: rgba(255,255,255,.12);

  /* Radius */
  --r:  6px;
  --r2: 12px;
  --r3: 20px;

  /* Gradients */
  --grad-primary: linear-gradient(135deg,#E8C46A 0%,#d4af37 100%);
  --grad-text:    linear-gradient(135deg,#f2ca50,#E8C46A);

  /* Nebula Purple (accent secondario) */
  --nebula: #7B61FF;
  --nebula-dim: rgba(123,97,255,.15);

  /* Typography families */
  --font-head:    'EB Garamond', Georgia, serif;
  --font-body:    'Hanken Grotesk', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.hero-headline,
.modal-title,
.form-title,
.pay-title,
.user-header h2,
.logo {
  font-family: var(--font-head);
}

/* JetBrains Mono per dati tecnici */
.font-mono,
.planet-deg,
.aspect-orb,
.transit-deg,
.chart-deg,
.technical-data {
  font-family: var(--font-mono);
  letter-spacing: .05em;
}

/* ── GLASSMORPHISM UTILITY ──────────────────────────────────────────────────── */
.glass-card {
  background: rgba(6,14,30,.40);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(232,196,106,.15);
}

.stellar-glow {
  box-shadow: 0 0 20px rgba(232,196,106,.12);
}

.glass {
  background: rgba(6,14,30,.40);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(255,255,255,.08);
}

/* ── NAVIGATION BAR (home) ──────────────────────────────────────────────────── */
.home-nav,
nav {
  background: rgba(5,7,10,.60);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid rgba(232,196,106,.15);
  box-shadow: 0 0 15px rgba(232,196,106,.06);
}

.logo {
  font-family: var(--font-head);
  letter-spacing: .3em;
  color: var(--gold);
  font-weight: 500;
}

/* ── MAIN NAV — tab bar app autenticata ─────────────────────────────────────── */
#mainNav {
  background: rgba(5,7,10,.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid rgba(255,255,255,.08);
  height: 60px;
  padding: 0 1.25rem;
  display: none;           /* mantenuto: la logica JS lo mostra/nasconde */
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
}

/* Tab chart — barra tab scrollabile */
.chart-tabs-wrap {
  background: rgba(5,7,10,.40);
  border-bottom: 0.5px solid rgba(255,255,255,.06);
  position: sticky;
  top: 0;
  z-index: 100;
}

.chart-tabs,
.tab-bar {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 .25rem;
  height: 44px;
  align-items: stretch;
  background: rgba(5,7,10,.25);
  border-bottom: 0.5px solid rgba(255,255,255,.06);
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(208,197,175,.55);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  padding: 0 2px;
  height: 100%;
  display: flex;
  align-items: center;
  transition: color .2s, border-color .2s;
  flex-shrink: 0;
}
.tab-btn:hover  { color: var(--text2); }
.tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  text-shadow: 0 0 8px rgba(232,196,106,.4);
}

/* ── AUTH OVERLAY ───────────────────────────────────────────────────────────── */
.auth-overlay {
  background: rgba(5,7,10,.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.auth-box {
  background: rgba(6,14,30,.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(232,196,106,.20);
  border-radius: var(--r3);
  box-shadow: 0 0 40px rgba(0,0,0,.5), 0 0 20px rgba(232,196,106,.05);
}

.auth-tabs {
  display: flex;
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
  position: relative;
  margin-bottom: 1.5rem;
}

.auth-tab {
  flex: 1;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  color: var(--text3);
  transition: color .3s;
  position: relative;
  z-index: 1;
}
.auth-tab.active {
  color: #05070A;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(232,196,106,.3);
}

.form-group label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(232,196,106,.65);
}

.form-group input,
.form-group select {
  background: rgba(255,255,255,.04);
  border: 0.5px solid rgba(255,255,255,.10);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font-body);
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus {
  border-color: rgba(232,196,106,.50);
  box-shadow: 0 0 12px rgba(232,196,106,.15);
  outline: none;
}

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.btn-gold {
  background: var(--gold);
  border: none;
  color: #05070A;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--r2);
  box-shadow: 0 4px 20px rgba(232,196,106,.25);
  transition: filter .2s, transform .15s;
}
.btn-gold:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-outline {
  background: none;
  border: 0.5px solid rgba(232,196,106,.30);
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .1em;
}
.btn-outline:hover {
  border-color: var(--gold);
  background: rgba(232,196,106,.06);
}

/* ── MODAL ──────────────────────────────────────────────────────────────────── */
#modal {
  background: rgba(5,7,10,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-box {
  background: rgba(6,14,30,.60);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(232,196,106,.18);
  border-radius: var(--r3);
  box-shadow: 0 -8px 40px rgba(0,0,0,.5), 0 0 20px rgba(232,196,106,.06);
}

/* Handle bar per bottom sheet */
.modal-handle {
  width: 40px;
  height: 4px;
  background: rgba(232,196,106,.25);
  border-radius: 2px;
  margin: 0 auto 1.5rem;
}

/* ── CARDS / PANELS ─────────────────────────────────────────────────────────── */
.card,
.panel,
.chart-panel,
.today-card,
.transit-card,
.planet-row,
.aspect-row,
.planet-card,
.aspect-card,
.transit-item,
.transit-section,
.sinastria-result,
.report-section,
.moon-card,
.drill-box,
.natal-brief-box,
.horoscope-area-card {
  background: rgba(6,14,30,.40) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(255,255,255,.08) !important;
  border-radius: var(--r2);
}

/* ── HERO REDESIGN ──────────────────────────────────────────────────────────── */
body {
  background: #05070A;
}

.hero {
  background:
    radial-gradient(ellipse 60% 40% at 50% -5%, rgba(232,196,106,.12) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 8%   80%, rgba(123,97,255,.07)  0%, transparent 55%),
    radial-gradient(ellipse 25% 25% at 95%  90%, rgba(164,201,255,.04) 0%, transparent 50%),
    #05070A;
}

/* ── HOME NAV — look glass premium ─────────────────────────────────────────── */
.home-nav {
  background: rgba(5,7,10,.70) !important;
  border-bottom: 0.5px solid rgba(232,196,106,.18) !important;
  box-shadow: 0 0 20px rgba(232,196,106,.06) !important;
}

/* Logo più luminoso */
.logo {
  font-size: 17px;
  letter-spacing: .35em;
  font-weight: 500;
  color: #E8C46A !important;
}

/* ── AUTH BOX — glass premium ────────────────────────────────────────────────── */
.auth-shell {
  background: rgba(5,7,10,.70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.auth-box {
  background: rgba(8,16,32,.65) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 0.5px solid rgba(232,196,106,.22) !important;
  box-shadow: 0 0 60px rgba(0,0,0,.6), 0 0 25px rgba(232,196,106,.06) !important;
}

/* Form inputs glass */
.auth-box input,
.form-screen input,
#formScreen input,
#formScreen select {
  background: rgba(255,255,255,.04) !important;
  border: 0.5px solid rgba(255,255,255,.12) !important;
  color: #dae2f9 !important;
}
.auth-box input:focus,
#formScreen input:focus,
#formScreen select:focus {
  border-color: rgba(232,196,106,.50) !important;
  box-shadow: 0 0 14px rgba(232,196,106,.18) !important;
  outline: none !important;
}

/* ── FORM SCREEN ────────────────────────────────────────────────────────────── */
.form-card,
#formScreen .glass,
#formScreen > div {
  background: rgba(8,16,32,.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(232,196,106,.15);
  border-radius: var(--r3);
}

/* ── PAY SCREEN ─────────────────────────────────────────────────────────────── */
.pay-card,
.price-card {
  background: rgba(6,14,30,.50) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0.5px solid rgba(232,196,106,.18) !important;
  border-radius: var(--r3) !important;
}

.price-card.featured,
.price-card--highlight {
  border-color: rgba(232,196,106,.40) !important;
  box-shadow: 0 0 30px rgba(232,196,106,.10) !important;
}

/* Luna screen */
#lunaScreen .luna-card {
  background: rgba(6,14,30,.40);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(164,201,255,.12);
}

/* ── HERO ───────────────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,   rgba(232,196,106,.10) 0%,transparent 65%),
    radial-gradient(ellipse 40% 35% at 5%  80%,  rgba(123,97,255,.06)  0%,transparent 55%),
    radial-gradient(ellipse 30% 30% at 95% 90%,  rgba(164,201,255,.04) 0%,transparent 50%),
    var(--bg);
}

.hero-eyebrow {
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4em;
}

.hero-headline {
  font-family: var(--font-head);
  color: var(--text);
}

/* ── SCROLLBARS ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(232,196,106,.20); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(232,196,106,.40); }

/* ── SELECTION ──────────────────────────────────────────────────────────────── */
::selection {
  background: rgba(232,196,106,.25);
  color: var(--text);
}