/* ─── Celeste AI – Global Styles ─────────────────────────────────────────────
   Mobile-first design. Base styles target phones (≥320px).
   Wider layouts kick in at 640px (sm) and 900px (lg).
   ─────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500&display=swap');

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

:root {
  --bg-deep:        #0A0A14;
  --bg-card:        #16162A;
  --bg-input:       #1C1C30;
  --border:         rgba(150, 120, 220, 0.18);
  --border-hover:   rgba(196, 168, 255, 0.35);
  --accent:         #C4A8FF;
  --accent-dim:     #9B8FCC;
  --accent-glow:    rgba(196, 168, 255, 0.12);
  --text-primary:   #F0EAF8;
  --text-secondary: #C0B8D8;
  --text-muted:     #8A80A8;
  --text-faint:     #5A5070;
  --error:          #D85A30;
  --success:        #1D9E75;

  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* Touch target minimum */
  --touch-min: 44px;
}

/* ── Full-page starfield ────────────────────────────────────────────────── */

/* Stars are painted on the body using ::before/::after and a helper span.
   Using fixed positioning so they cover the entire viewport edge-to-edge. */

.page-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.page-stars span {
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
}

/* Layer A — 80 tiny 1-2px stars, full viewport */
.page-stars span:nth-child(1) {
  width: 1px; height: 1px;
  box-shadow:
    832px 784px 0px 0px rgba(250,232,217,0.21),
    868px 448px 1px 0px rgba(222,236,249,0.36),
    92px 556px 0px 0px rgba(231,249,247,0.19),
    1469px 334px 1px 0px rgba(250,241,215,0.17),
    297px 639px 0px 0px rgba(235,242,246,0.33),
    263px 729px 1px 0px rgba(249,255,219,0.42),
    844px 303px 0px 0px rgba(255,240,217,0.53),
    1710px 102px 1px 0px rgba(242,247,255,0.52),
    81px 768px 1px 0px rgba(224,237,254,0.53),
    902px 169px 1px 0px rgba(233,240,246,0.28),
    843px 331px 1px 0px rgba(244,255,244,0.24),
    1372px 356px 1px 0px rgba(248,237,255,0.54),
    640px 347px 1px 0px rgba(238,248,255,0.4),
    70px 124px 1px 0px rgba(255,247,210,0.58),
    547px 948px 1px 0px rgba(234,249,255,0.34),
    1827px 788px 0px 0px rgba(225,248,255,0.55),
    680px 1016px 0px 0px rgba(255,230,208,0.46),
    102px 818px 0px 0px rgba(255,254,222,0.4),
    356px 563px 1px 0px rgba(246,232,255,0.56),
    1694px 285px 0px 0px rgba(247,226,226,0.44),
    113px 706px 1px 0px rgba(239,240,248,0.22),
    1506px 169px 0px 0px rgba(215,244,255,0.26),
    1809px 589px 1px 0px rgba(248,245,203,0.51),
    75px 776px 1px 0px rgba(252,242,214,0.46),
    116px 439px 0px 0px rgba(243,235,255,0.19),
    1807px 526px 0px 0px rgba(255,229,210,0.57),
    895px 275px 1px 0px rgba(247,236,226,0.22),
    1644px 360px 0px 0px rgba(232,243,238,0.23),
    867px 814px 0px 0px rgba(238,245,255,0.3),
    107px 604px 0px 0px rgba(253,230,208,0.39),
    1092px 538px 0px 0px rgba(226,238,241,0.25),
    319px 156px 0px 0px rgba(250,244,222,0.3),
    1493px 762px 1px 0px rgba(242,250,247,0.56),
    1910px 73px 0px 0px rgba(255,249,193,0.27),
    541px 163px 1px 0px rgba(245,247,230,0.49),
    1099px 221px 1px 0px rgba(231,240,248,0.57),
    1303px 270px 1px 0px rgba(243,253,255,0.16),
    1705px 592px 0px 0px rgba(214,239,250,0.47),
    555px 627px 1px 0px rgba(215,238,248,0.17),
    450px 1032px 1px 0px rgba(224,238,255,0.26);
  animation: page-stars-a 6s ease-in-out infinite alternate;
}

/* Layer B — 35 medium glowing stars */
.page-stars span:nth-child(2) {
  width: 2px; height: 2px;
  box-shadow:
    98px 421px 1px 1px rgba(249,243,245,0.44),
    1458px 347px 1px 1px rgba(233,252,244,0.28),
    1332px 252px 2px 1px rgba(247,241,255,0.24),
    895px 475px 2px 1px rgba(255,233,194,0.5),
    992px 1011px 1px 1px rgba(216,242,255,0.49),
    232px 466px 2px 1px rgba(213,234,255,0.43),
    1289px 98px 2px 1px rgba(215,245,255,0.4),
    1409px 598px 2px 1px rgba(233,241,255,0.51),
    1141px 744px 1px 1px rgba(218,246,255,0.53),
    8px 292px 1px 1px rgba(247,230,204,0.31),
    639px 712px 1px 1px rgba(218,250,255,0.3),
    504px 68px 2px 1px rgba(245,250,252,0.51),
    413px 1047px 2px 1px rgba(212,250,254,0.46),
    86px 56px 1px 1px rgba(219,249,246,0.29),
    1624px 285px 2px 1px rgba(255,243,215,0.35),
    462px 946px 1px 1px rgba(230,238,255,0.35),
    1498px 223px 1px 1px rgba(212,236,255,0.43),
    212px 841px 2px 1px rgba(248,255,222,0.55),
    1029px 503px 1px 1px rgba(227,252,237,0.46),
    1515px 710px 2px 1px rgba(242,255,255,0.21);
  animation: page-stars-b 9s ease-in-out infinite alternate;
}

/* Layer C — 12 large accent stars with strong glow */
.page-stars span:nth-child(3) {
  width: 2px; height: 2px;
  box-shadow:
    1229px 734px 3px 2px rgba(255,249,231,0.58),
    872px 344px 2px 2px rgba(255,248,226,0.48),
    1298px 509px 2px 2px rgba(229,246,255,0.62),
    102px 139px 3px 2px rgba(255,247,192,0.63),
    567px 722px 2px 2px rgba(247,255,221,0.57),
    775px 623px 2px 2px rgba(250,226,225,0.43),
    1270px 560px 4px 2px rgba(250,247,252,0.51);
  animation: page-stars-c 12s ease-in-out infinite alternate;
}

@keyframes page-stars-a {
  0%   { opacity: 0.20; }
  50%  { opacity: 0.80; }
  100% { opacity: 0.30; }
}
@keyframes page-stars-b {
  0%   { opacity: 0.40; }
  35%  { opacity: 0.15; }
  70%  { opacity: 0.85; }
  100% { opacity: 0.35; }
}
@keyframes page-stars-c {
  0%   { opacity: 0.15; }
  45%  { opacity: 1.00; }
  100% { opacity: 0.25; }
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;  /* prevent iOS font scaling on rotate */
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  position: relative;
  z-index: 1;   /* above .page-stars (z-index: 0) */
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; display: block; }

/* ─── Navigation ──────────────────────────────────────────────────────────── */

.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-md);
  height: 56px;
  background: rgba(10, 10, 20, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--border);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-primary);
  text-decoration: none;
  min-height: var(--touch-min);
}

.nav-glyph { font-size: 18px; color: var(--accent); }
.nav-title { font-family: 'Playfair Display', serif; font-size: 17px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
}

.nav-link {
  font-size: 14px;
  color: var(--text-muted);
  padding: var(--space-sm);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}
.nav-link:hover { color: var(--text-primary); text-decoration: none; }

.nav-cta {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--accent-glow);
  border: 0.5px solid var(--border-hover);
  color: var(--accent);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  transition: background 0.18s;
}
.nav-cta:hover { background: rgba(196,168,255,0.2); text-decoration: none; }

.nav-user-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 10px;
  border-radius: 20px;
  border: 0.5px solid var(--border);
  min-height: var(--touch-min);
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-glow);
  border: 0.5px solid var(--border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  flex-shrink: 0;
}

/* Hide name on small screens */
.user-name { font-size: 13px; color: var(--text-secondary); display: none; }

.nav-signout {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 20px;
  border: 0.5px solid var(--border);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.nav-signout:hover {
  color: #F0997B;
  border-color: rgba(216,90,48,0.4);
  background: rgba(216,90,48,0.08);
  text-decoration: none;
}

@media (min-width: 640px) {
  .top-nav   { padding: 0 var(--space-xl); height: 60px; }
  .user-name { display: block; }
  .nav-links { gap: var(--space-md); }
}

/* ─── Auth pages ──────────────────────────────────────────────────────────── */

.auth-page {
  min-height: calc(100dvh - 56px);
  display: flex;
  align-items: flex-start;         /* top-align on mobile so form isn't hidden by keyboard */
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
}

@media (min-width: 640px) {
  .auth-page { align-items: center; padding: var(--space-xl); }
}

.stars-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(100,60,200,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(60,40,140,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  border: 0.5px solid var(--border-hover);
  border-radius: 20px;
  padding: var(--space-xl) var(--space-lg);
}

@media (min-width: 640px) {
  .auth-card { padding: 2.5rem 2rem; }
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.logo-glyph { font-size: 22px; color: var(--accent); }
.logo-text  { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--text-primary); }

.auth-card h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 5vw, 26px);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 6px;
  text-align: center;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--space-xl);
  font-weight: 300;
}

/* ─── Form elements ───────────────────────────────────────────────────────── */

.form-group { margin-bottom: var(--space-lg); }

.form-group label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="search"] {
  width: 100%;
  background: var(--bg-input);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 13px 14px;           /* taller than before — easier to tap */
  font-size: 16px;              /* 16px prevents iOS auto-zoom on focus */
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  transition: border-color 0.18s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-group input:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(196,168,255,0.08);
}

.form-group input::placeholder { color: var(--text-faint); }

.form-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5) sepia(1) saturate(0.5) hue-rotate(220deg);
  cursor: pointer;
  padding: 4px;
}

.input-hint {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 5px;
  line-height: 1.4;
}

/* Password show/hide toggle */
.input-with-toggle { position: relative; }
.input-with-toggle input { padding-right: 64px; }

.toggle-pw {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: color 0.15s;
  padding: 8px 4px;
  min-height: var(--touch-min);
}
.toggle-pw:hover { color: var(--accent-dim); }

/* Location search results dropdown */
.location-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 0.5px solid var(--border-hover);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 50;
  max-height: 200px;
  overflow-y: auto;
}

.location-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  min-height: var(--touch-min);
  transition: background 0.15s;
}
.location-result-item:hover { background: var(--accent-glow); color: var(--text-primary); }
.location-result-item .loc-icon { color: var(--accent-dim); font-size: 12px; flex-shrink: 0; }
.location-result-item .loc-name { font-weight: 500; }
.location-result-item .loc-country { font-size: 12px; color: var(--text-faint); margin-left: auto; }

.location-searching {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
  text-align: center;
}

/* Sign picker grid */
.sign-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.sign-pick-btn {
  background: var(--bg-input);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 4px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
  min-height: var(--touch-min);
}
.sign-pick-btn:hover  { border-color: var(--border-hover); background: var(--accent-glow); }
.sign-pick-btn.active { border-color: var(--accent); background: rgba(196,168,255,0.15); }

.pick-glyph { font-size: 18px; line-height: 1; }
.pick-name  { font-size: 9px; color: var(--text-muted); letter-spacing: 0.05em; }
.sign-pick-btn.active .pick-name { color: var(--accent); }

.sign-detected {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent-dim);
}

/* Checkbox */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--space-lg);
}
.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.form-check label {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}

/* Alerts */
.alert-error, .alert-success {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: var(--space-lg);
  line-height: 1.5;
}
.alert-error   { background: rgba(216,90,48,0.1);  border: 0.5px solid rgba(216,90,48,0.3);  color: #F0997B; }
.alert-success { background: rgba(29,158,117,0.1); border: 0.5px solid rgba(29,158,117,0.3); color: #5DCAA5; }

/* Primary button */
.btn-auth {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #7F77DD 0%, #534AB7 100%);
  color: #F0EAF8;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.18s, transform 0.1s;
  letter-spacing: 0.02em;
  min-height: var(--touch-min);
  -webkit-tap-highlight-color: transparent;
}
.btn-auth:hover:not(:disabled)  { opacity: 0.9; }
.btn-auth:active:not(:disabled) { transform: scale(0.98); }
.btn-auth:disabled { opacity: 0.45; cursor: not-allowed; }

.auth-switch {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  margin-top: var(--space-lg);
}
.auth-switch a { color: var(--accent-dim); }
.auth-switch a:hover { color: var(--accent); }

/* Spinner */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(240,234,248,0.3);
  border-top-color: #F0EAF8;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Home / cosmos page ──────────────────────────────────────────────────── */

.cosmos-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-2xl);
}

@media (min-width: 640px) {
  .cosmos-page { padding: 0 var(--space-xl) var(--space-2xl); }
}

.cosmos-header {
  text-align: center;
  padding: var(--space-xl) 0 var(--space-lg);
  border-bottom: 0.5px solid var(--border);
  margin-bottom: var(--space-lg);
}

.site-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: var(--space-sm);
  display: block;
}

.cosmos-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.15;
}
.cosmos-header h1 em { font-style: italic; color: var(--accent); }

.cosmos-header .subtitle {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 300;
  margin-bottom: var(--space-lg);
}

.auth-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.btn-primary {
  padding: 11px 22px;
  border-radius: 22px;
  background: rgba(196,168,255,0.12);
  border: 0.5px solid var(--border-hover);
  color: var(--accent);
  font-size: 14px;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  transition: background 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:hover { background: rgba(196,168,255,0.2); text-decoration: none; }

.btn-ghost {
  font-size: 14px;
  color: var(--text-muted);
  padding: 11px 16px;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}
.btn-ghost:hover { color: var(--text-primary); text-decoration: none; }

/* Reading type pills */
.reading-types {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reading-types::-webkit-scrollbar { display: none; }

.type-btn {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 22px;
  border: 0.5px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--accent-dim);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.type-btn:hover, .type-btn.active {
  background: var(--accent-glow);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

/* Sign grid — 4 cols on phone, 6 on tablet, 12 on desktop */
.sign-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: var(--space-lg);
}

@media (min-width: 480px) {
  .sign-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 900px) {
  .sign-grid { grid-template-columns: repeat(12, 1fr); }
}

.sign-btn {
  background: rgba(255,255,255,0.02);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 4px 8px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  min-height: var(--touch-min);
  -webkit-tap-highlight-color: transparent;
}
.sign-btn:hover  { background: rgba(160,100,255,0.08); border-color: var(--border-hover); }
.sign-btn.active { background: rgba(160,100,255,0.16); border-color: var(--accent); }

.sign-btn .glyph { font-size: 20px; line-height: 1; }
.sign-btn .name  { font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; }
.sign-btn .dates { font-size: 8px; color: var(--text-faint); }
.sign-btn.active .dates { color: var(--accent-dim); }

/* Reading panel */
.reading-panel {
  background: rgba(255,255,255,0.02);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  min-height: 240px;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 0.5px solid var(--border);
  background: rgba(160,100,255,0.05);
  flex-wrap: wrap;
}

.big-glyph {
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(196,168,255,0.25));
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .panel-header { padding: var(--space-lg); }
  .big-glyph    { font-size: 52px; }
}

.panel-header-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 4vw, 24px);
  font-weight: 400;
  color: var(--text-primary);
}
.panel-header-text p {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.03em;
}

.element-badges {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.badge {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--accent-glow);
  border: 0.5px solid var(--border-hover);
  color: var(--accent);
  white-space: nowrap;
}

.panel-body {
  padding: var(--space-md);
  min-height: 0;   /* shrinks to content height during loading — no gap */
}

@media (min-width: 640px) {
  .panel-body { padding: var(--space-lg); }
}

.horoscope-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(15px, 3vw, 17px);
  line-height: 1.95;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.horoscope-text p {
  margin: 0;
  line-height: 1.95;
}

.horoscope-text p:first-child {
  font-size: clamp(16px, 3vw, 18px);
  color: var(--text-primary);  /* first sentence slightly brighter */
}

.horoscope-text strong {
  color: var(--sign-accent, var(--accent));
  font-weight: 600;
}

.horoscope-text em {
  font-style: italic;
  color: var(--text-primary);
}

.loading-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-faint);
  font-style: italic;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.refresh-btn {
  margin-top: var(--space-md);
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-faint);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
  padding: 6px 0;
  min-height: var(--touch-min);
}
.refresh-btn:hover { color: var(--accent); }

.lunar-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--space-md);
  border-top: 0.5px solid var(--border);
  background: rgba(100,80,180,0.05);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.03em;
}
.lunar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  flex-shrink: 0;
}

.empty-state { padding: var(--space-2xl) var(--space-md); text-align: center; }
.empty-icon  { font-size: 44px; display: block; margin-bottom: var(--space-md); opacity: 0.2; }
.empty-state p {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text-faint);
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 0.5px solid var(--border);
  padding: var(--space-xl) var(--space-md);
  margin-top: var(--space-2xl);
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

@media (min-width: 640px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-brand { font-family: 'Playfair Display', serif; font-size: 15px; color: var(--text-muted); }
.footer-copy  { font-size: 12px; color: var(--text-faint); }

/* ─── Registration success state ─────────────────────────────────────────── */

.register-success {
  text-align: center;
  padding: var(--space-xl) 0;
}

.success-icon {
  display: block;
  font-size: 52px;
  color: var(--accent);
  margin-bottom: var(--space-lg);
  animation: glow-pulse 1.5s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(196,168,255,0.4)); opacity: 0.8; }
  50%       { filter: drop-shadow(0 0 20px rgba(196,168,255,0.8)); opacity: 1; }
}

.register-success h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 5vw, 26px);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.register-success p {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.success-hint {
  font-size: 13px !important;
  color: var(--text-faint) !important;
  font-style: italic;
  margin-top: var(--space-sm) !important;
  animation: pulse 1.4s ease-in-out infinite;
}

/* Menu overlay removed — sign out is now a direct nav button */

/* ─── Personal sign banner — compact profile card ────────────────────────── */

.personal-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  background: linear-gradient(135deg, rgba(189,144,48,0.10) 0%, rgba(189,144,48,0.04) 55%, rgba(22,22,42,1) 100%);
  border: 1.5px solid #bd9030;
  box-shadow:
    0 0 0 1px rgba(189,144,48,0.15),
    0 0 20px rgba(189,144,48,0.1),
    0 4px 24px rgba(0,0,0,0.4);
  min-height: 160px;
}

/* ── Starfield — glowing stars spread across the full banner ── */

.personal-banner-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 16px;
}

/* Three spans = three independent layers with different sizes,
   glow amounts and animation timings. The blur/spread values on
   box-shadow create the soft glow around each star. */
.personal-banner-stars span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
}

/* Layer A — 45 small glowing stars spread across full area */
.personal-banner-stars span:nth-child(1) {
  box-shadow:
    89px 100px 1px 1px rgba(253,239,207,0.32),
    855px 215px 1px 1px rgba(243,255,236,0.55),
    547px 176px 0px 0px rgba(247,231,227,0.51),
    196px 187px 0px 0px rgba(239,250,242,0.45),
    727px 212px 1px 1px rgba(255,255,220,0.27),
    626px 174px 1px 1px rgba(254,243,229,0.38),
    842px 9px 0px 0px rgba(254,239,206,0.25),
    776px 230px 0px 0px rgba(235,248,247,0.47),
    714px 212px 1px 1px rgba(253,234,251,0.35),
    692px 38px 0px 0px rgba(255,245,220,0.50),
    322px 245px 1px 1px rgba(237,240,253,0.44),
    416px 88px 1px 1px rgba(249,252,225,0.41),
    760px 202px 1px 1px rgba(248,251,220,0.36),
    351px 177px 1px 1px rgba(255,250,217,0.36),
    600px 107px 1px 1px rgba(251,233,251,0.50),
    44px 100px 0px 0px rgba(255,234,207,0.42),
    760px 80px 1px 1px rgba(255,236,208,0.49),
    325px 179px 1px 1px rgba(255,241,208,0.31),
    781px 155px 1px 1px rgba(255,243,202,0.54),
    675px 23px 1px 1px rgba(235,250,244,0.54),
    278px 212px 0px 0px rgba(240,240,249,0.30),
    52px 58px 0px 0px rgba(246,253,255,0.48),
    84px 139px 0px 0px rgba(254,241,225,0.22),
    273px 108px 1px 1px rgba(255,239,219,0.28),
    198px 270px 1px 1px rgba(240,245,240,0.46),
    546px 202px 0px 0px rgba(241,240,237,0.25),
    134px 77px 1px 1px rgba(250,246,194,0.34),
    536px 21px 0px 0px rgba(249,239,255,0.35),
    149px 230px 1px 1px rgba(230,249,234,0.38),
    330px 56px 1px 1px rgba(245,244,255,0.49),
    783px 104px 1px 1px rgba(250,255,233,0.38),
    95px 51px 0px 0px rgba(255,228,215,0.35),
    768px 10px 0px 0px rgba(241,234,254,0.42),
    55px 84px 0px 0px rgba(248,243,248,0.33),
    573px 270px 1px 1px rgba(255,244,193,0.29),
    852px 10px 1px 1px rgba(235,247,255,0.31),
    559px 70px 0px 0px rgba(244,240,255,0.32),
    310px 32px 0px 0px rgba(237,241,255,0.21),
    769px 268px 1px 1px rgba(243,247,255,0.21),
    849px 128px 0px 0px rgba(249,237,252,0.45),
    345px 171px 0px 0px rgba(240,245,247,0.33),
    54px 181px 1px 1px rgba(255,240,202,0.45),
    609px 165px 1px 1px rgba(233,246,238,0.45),
    850px 198px 1px 1px rgba(241,236,247,0.24),
    429px 241px 0px 0px rgba(255,251,222,0.34);
  animation: stars-twinkle-a 5s ease-in-out infinite alternate;
}

/* Layer B — 22 medium stars with more glow spread */
.personal-banner-stars span:nth-child(2) {
  width: 2px; height: 2px;
  box-shadow:
    806px 186px 1px 1px rgba(251,254,223,0.30),
    436px 204px 1px 1px rgba(245,250,247,0.27),
    486px 143px 2px 2px rgba(247,245,205,0.47),
    727px 184px 2px 2px rgba(255,247,229,0.32),
    277px 260px 1px 1px rgba(234,251,237,0.55),
    633px 50px 2px 2px rgba(228,249,239,0.38),
    232px 232px 1px 1px rgba(241,243,255,0.26),
    159px 29px 2px 2px rgba(255,236,201,0.32),
    83px 248px 2px 2px rgba(254,243,226,0.34),
    501px 11px 1px 1px rgba(255,243,194,0.37),
    258px 152px 2px 2px rgba(255,240,227,0.25),
    597px 246px 1px 1px rgba(239,242,241,0.45),
    524px 232px 1px 1px rgba(238,247,255,0.38),
    416px 128px 1px 1px rgba(253,241,255,0.59),
    552px 127px 1px 1px rgba(246,242,250,0.46),
    738px 56px 1px 1px rgba(234,245,241,0.36),
    863px 85px 1px 1px rgba(248,241,220,0.38),
    318px 147px 2px 2px rgba(255,228,213,0.44),
    270px 234px 1px 1px rgba(244,241,255,0.52),
    386px 17px 2px 2px rgba(244,247,255,0.43),
    355px 39px 1px 1px rgba(233,240,255,0.49),
    467px 98px 1px 1px rgba(255,247,205,0.27);
  animation: stars-twinkle-b 7.5s ease-in-out infinite alternate;
}

/* Layer C — 8 large accent stars with strong soft glow, slow pulse */
.personal-banner-stars span:nth-child(3) {
  width: 2px; height: 2px;
  box-shadow:
    356px 77px 4px 4px rgba(242,244,244,0.60),
    473px 232px 3px 3px rgba(255,229,222,0.38),
    20px 47px 3px 3px rgba(238,241,255,0.38),
    714px 15px 3px 3px rgba(250,243,220,0.58),
    386px 86px 4px 4px rgba(255,236,208,0.38),
    772px 214px 2px 2px rgba(243,246,233,0.48),
    315px 198px 3px 3px rgba(255,234,223,0.50),
    526px 172px 4px 4px rgba(255,247,233,0.47);
  animation: stars-twinkle-c 10s ease-in-out infinite alternate;
}

@keyframes stars-twinkle-a {
  0%   { opacity: 0.20; }
  50%  { opacity: 0.85; }
  100% { opacity: 0.30; }
}
@keyframes stars-twinkle-b {
  0%   { opacity: 0.45; }
  30%  { opacity: 0.15; }
  65%  { opacity: 0.80; }
  100% { opacity: 0.35; }
}
@keyframes stars-twinkle-c {
  0%   { opacity: 0.15; }
  40%  { opacity: 0.95; }
  100% { opacity: 0.25; }
}

/* Text content — left side, transparent so gold gradient shows through */
.personal-banner-content {
  flex: 1;
  padding: var(--space-lg);
  min-width: 0;
  background: transparent;
  position: relative;
  z-index: 1;   /* above the stars layer */
}

.personal-banner-greeting {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.personal-banner-sign {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 400;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 4px;
}

.personal-banner-glyph {
  color: var(--sign-accent, #C4A8FF);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sign-accent, #C4A8FF) 60%, transparent));
}

.personal-banner-meta {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}

.personal-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 22px;
  background: rgba(189,144,48,0.12);
  border: 1px solid rgba(189,144,48,0.5);
  color: #d4a843;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.18s;
  min-height: var(--touch-min);
  -webkit-tap-highlight-color: transparent;
}
.personal-banner-cta:hover {
  background: rgba(189,144,48,0.22);
  border-color: rgba(189,144,48,0.8);
}

/* Image — right side, fixed width portrait thumbnail */
.personal-banner-image-wrap {
  order: 2;   /* pushes image to the right of the flex row */
  flex-shrink: 0;
  width: 120px;
  align-self: stretch;
  position: relative;
  overflow: hidden;
}

.personal-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.personal-banner:hover .personal-banner-image {
  transform: scale(1.04);
}

/* Fade left edge of image into card background */
.personal-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg-card) 0%, transparent 40%);
}

/* Wider image on larger screens */
@media (min-width: 640px) {
  .personal-banner         { min-height: 180px; }
  .personal-banner-image-wrap { width: 160px; }
  .personal-banner-content { padding: var(--space-xl); }
}

@media (min-width: 900px) {
  .personal-banner-image-wrap { width: 200px; }
}

/* ─── Sign-specific accent theming ───────────────────────────────────────────
   --sign-accent and --sign-glow are set per-user via inline style on the
   .personal-banner and .reading-panel elements. They fall back to the default
   purple accent when no sign colour is defined.
   ─────────────────────────────────────────────────────────────────────────── */

/* Banner — glyph, CTA button, and border use sign colour */
.personal-banner {
  --sign-accent: #C4A8FF;
  --sign-glow:   rgba(196,168,255,0.12);
  /* Border stays gold — set in the base rule above */
}

.personal-banner .personal-banner-glyph {
  color: var(--sign-accent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sign-accent) 60%, transparent));
}

.personal-banner .personal-banner-cta {
  background: var(--sign-glow);
  border-color: var(--sign-accent);
  color: var(--sign-accent);
}

.personal-banner .personal-banner-cta:hover {
  background: color-mix(in srgb, var(--sign-accent) 25%, transparent);
}

/* Reading panel — header background, badge, glyph, and active state */
.reading-panel {
  --sign-accent: #C4A8FF;
  --sign-glow:   rgba(196,168,255,0.12);
}

.reading-panel .panel-header {
  background: color-mix(in srgb, var(--sign-accent) 8%, transparent);
  border-bottom-color: color-mix(in srgb, var(--sign-accent) 25%, transparent);
}

.reading-panel .big-glyph {
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--sign-accent) 50%, transparent));
}

.reading-panel .badge {
  background: var(--sign-glow);
  border-color: color-mix(in srgb, var(--sign-accent) 40%, transparent);
  color: var(--sign-accent);
}

.reading-panel .lunar-strip {
  background: color-mix(in srgb, var(--sign-accent) 5%, transparent);
}

.reading-panel .lunar-dot {
  background: var(--sign-accent);
}

.reading-panel .refresh-btn:hover {
  color: var(--sign-accent);
}

/* Reading type pills — active pill uses sign colour */
.reading-panel ~ * .type-btn.active,
.type-btn.active {
  background: var(--sign-glow, rgba(196,168,255,0.12));
  border-color: var(--sign-accent, #C4A8FF);
  color: var(--sign-accent, #C4A8FF);
}

/* ─── Lucky Numbers panel ─────────────────────────────────────────────────── */

.lucky-numbers-panel {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-top: var(--space-md);
  transition: border-color 0.2s;
  border-color: color-mix(in srgb, var(--sign-accent, #C4A8FF) 30%, var(--border));
}

.lucky-numbers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 0.5px solid var(--border);
  background: color-mix(in srgb, var(--sign-accent, #C4A8FF) 6%, transparent);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.lucky-numbers-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}

.lucky-numbers-date {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lucky-numbers-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  flex-wrap: wrap;
}

.lucky-number {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  font-family: 'Playfair Display', serif;
  color: var(--sign-accent, #C4A8FF);
  background: color-mix(in srgb, var(--sign-accent, #C4A8FF) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--sign-accent, #C4A8FF) 35%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sign-accent, #C4A8FF) 15%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none;
}

.lucky-number:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px color-mix(in srgb, var(--sign-accent, #C4A8FF) 30%, transparent);
}

@media (max-width: 480px) {
  .lucky-number { width: 44px; height: 44px; font-size: 16px; }
  .lucky-numbers-grid { gap: var(--space-sm); padding: var(--space-md); }
}

/* ─── Used reading type pill state ───────────────────────────────────────── */

.type-btn.used {
  opacity: 0.45;
  cursor: pointer;  /* still clickable — shows modal */
  position: relative;
}

.type-btn.used:hover {
  opacity: 0.55;
  background: rgba(255,255,255,0.03);
  border-color: var(--border);
  color: var(--accent-dim);
}

.used-dot {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.7;
}

/* ─── Modal ───────────────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  animation: modal-fade-in 0.2s ease;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  background: var(--bg-card);
  border: 1px solid rgba(189,144,48,0.4);
  box-shadow:
    0 0 0 1px rgba(189,144,48,0.1),
    0 0 40px rgba(189,144,48,0.08),
    0 24px 64px rgba(0,0,0,0.6);
  border-radius: 20px;
  padding: var(--space-2xl) var(--space-xl);
  max-width: 420px;
  width: 100%;
  text-align: center;
  animation: modal-slide-up 0.25s ease;
}

@keyframes modal-slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-icon {
  font-size: 48px;
  margin-bottom: var(--space-lg);
  display: block;
  animation: moon-pulse 3s ease-in-out infinite;
}

@keyframes moon-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(196,168,255,0.3)); }
  50%       { transform: scale(1.06); filter: drop-shadow(0 0 16px rgba(196,168,255,0.6)); }
}

.modal-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  line-height: 1.4;
}

.modal-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.modal-countdown {
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: var(--space-xl);
}

.modal-countdown strong {
  color: #d4a843;
  font-weight: 500;
}

.modal-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 28px;
  border-radius: 22px;
  background: rgba(189,144,48,0.12);
  border: 1px solid rgba(189,144,48,0.4);
  color: #d4a843;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.18s;
  min-height: var(--touch-min);
  -webkit-tap-highlight-color: transparent;
}

.modal-close:hover {
  background: rgba(189,144,48,0.22);
  border-color: rgba(189,144,48,0.7);
}

/* ─── Button disabled state during loading ───────────────────────────────── */

.type-btn:disabled,
.personal-banner-cta:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;   /* belt-and-braces — prevents any click events */
}

.refresh-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Guest landing page sections ────────────────────────────────────────── */

/* Hero tagline */
.guest-tagline {
  max-width: 680px;
  margin: 0 auto var(--space-2xl);
  text-align: center;
  padding: 0 var(--space-md);
}

.guest-tagline p {
  font-family: 'Playfair Display', serif;
  font-size: clamp(16px, 2.5vw, 20px);
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.8;
}

/* Section wrapper */
.guest-section {
  margin-bottom: var(--space-2xl);
  padding: var(--space-xl) 0;
  border-top: 0.5px solid var(--border);
}

.guest-section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 400;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.guest-section-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* Definition block */
.definition-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  padding: var(--space-xl);
}

.definition-glyph {
  font-size: 48px;
  color: var(--accent);
  flex-shrink: 0;
  filter: drop-shadow(0 0 16px rgba(196,168,255,0.4));
  line-height: 1;
  padding-top: 4px;
}

.definition-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.definition-content p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.definition-content p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .definition-block { flex-direction: column; gap: var(--space-md); }
  .definition-glyph { font-size: 36px; }
}

/* 12 Signs preview grid */
.signs-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (min-width: 480px) {
  .signs-preview-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 700px) {
  .signs-preview-grid { grid-template-columns: repeat(6, 1fr); }
}

.sign-preview-card {
  border-radius: 12px;
  border: 0.5px solid var(--border);
  background: var(--bg-card);
  transition: transform 0.2s, border-color 0.2s;
  cursor: default;
  position: relative;
  /* overflow must NOT be hidden — tooltip needs to escape the card boundary */
}

/* Apply rounded corners only to the image wrap, not the card itself */
.sign-preview-img-wrap {
  border-radius: 12px;
}

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

.sign-preview-img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.sign-preview-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s;
}

.sign-preview-card:hover .sign-preview-img-wrap img {
  transform: scale(1.06);
}

.sign-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,20,0.9) 0%, transparent 60%);
}

.sign-preview-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-sm);
  text-align: center;
  z-index: 1;
}

.sign-preview-glyph {
  display: block;
  font-size: 18px;
  color: var(--sign-accent, var(--accent));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sign-accent, #C4A8FF) 60%, transparent));
  margin-bottom: 2px;
}

.sign-preview-name {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.sign-preview-dates {
  display: block;
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 1px;
}

.guest-cta-block {
  text-align: center;
  margin-top: var(--space-lg);
}

.guest-cta-block .btn-primary {
  font-size: 15px;
  padding: 13px 28px;
}

/* How it works */
.how-it-works { text-align: center; }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

@media (min-width: 640px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
}

.step-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  padding: var(--space-xl);
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}

.step-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.step-number {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--accent-dim);
  margin-bottom: var(--space-md);
}

.step-icon {
  font-size: 36px;
  margin-bottom: var(--space-md);
  display: block;
}

.step-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.step-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ─── Sign preview card tooltip ──────────────────────────────────────────── */

.sign-preview-card {
  position: relative;   /* ensure tooltip positions relative to card */
}

.sign-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(16, 16, 36, 0.96);
  border: 0.5px solid var(--sign-accent, var(--border-hover));
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  text-align: center;
}

/* Small arrow pointing down to the card */
.sign-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--sign-accent, var(--border-hover));
}

.sign-preview-card:hover .sign-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Resend verification block ──────────────────────────────────────────── */

.resend-block {
  background: rgba(196,168,255,0.06);
  border: 0.5px solid var(--border-hover);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.resend-block p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.resend-link {
  font-size: 13px;
  color: var(--accent-dim);
  text-decoration: none;
  white-space: nowrap;
}

.resend-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ─── Terms & Conditions checkbox ────────────────────────────────────────── */

.terms-check {
  background: rgba(196,168,255,0.05);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: var(--space-lg);
}

.terms-check label {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.terms-check label a {
  color: var(--accent-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terms-check label a:hover {
  color: var(--accent);
}

/* ─── Form field validation states ───────────────────────────────────────── */

/* Invalid input — red border */
.form-group input.field-invalid {
  border-color: rgba(216, 90, 48, 0.7);
  box-shadow: 0 0 0 3px rgba(216, 90, 48, 0.08);
}

/* Inline error message */
.field-error {
  display: block;
  font-size: 12px;
  color: #F0997B;
  margin-top: 5px;
  line-height: 1.4;
}

/* Inline success message */
.field-valid {
  display: block;
  font-size: 12px;
  color: #5DCAA5;
  margin-top: 5px;
}

/* Optional field label suffix */
.field-optional {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 400;
  margin-left: 4px;
}

/* ─── Inline lucky numbers display (inside reading panel) ────────────────── */

.lucky-numbers-inline {
  text-align: center;
  padding: var(--space-md) 0;
}

.lucky-intro {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(14px, 2.5vw, 16px);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-xl);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.lucky-footnote {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  margin-top: var(--space-lg);
}

/* ─── Honeypot field — visually hidden from real users ───────────────────────
   Must NOT use display:none or visibility:hidden — bots detect and skip those.
   Instead we move it off-screen and make it zero-size. Real users never see or
   tab to it (tabindex="-1"). Bots crawl the DOM and fill it automatically.    */

.honeypot-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ─── Cosmic loading state ────────────────────────────────────────────────── */

.cosmic-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  gap: var(--space-md);
}

/* Pulsing orb */
.cosmic-loading-orb {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(196,168,255,0.3),
    rgba(83,74,183,0.15));
  border: 1px solid rgba(196,168,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: orb-pulse 2s ease-in-out infinite;
  box-shadow:
    0 0 20px rgba(196,168,255,0.15),
    inset 0 0 20px rgba(196,168,255,0.08);
}

@keyframes orb-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(196,168,255,0.15), inset 0 0 20px rgba(196,168,255,0.08);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 36px rgba(196,168,255,0.30), inset 0 0 28px rgba(196,168,255,0.15);
  }
}

.cosmic-loading-glyph {
  font-size: 28px;
  color: var(--accent);
  animation: glyph-spin 8s linear infinite;
  display: block;
}

@keyframes glyph-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Cycling message — fades in/out via animation on re-render */
.cosmic-loading-message {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(15px, 2.5vw, 17px);
  color: var(--text-secondary);
  line-height: 1.6;
  animation: message-fade 0.5s ease;
  min-height: 1.6em;
}

@keyframes message-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.cosmic-loading-sub {
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
}

/* Three bouncing dots */
.cosmic-loading-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cosmic-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-dim);
  animation: dot-bounce 1.4s ease-in-out infinite;
}

.cosmic-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.cosmic-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1.0); opacity: 1.0; }
}

/* ─── Cosmic Profile formatted output ────────────────────────────────────── */

.cosmic-profile-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cosmic-section-header {
  font-family: 'Playfair Display', serif;
  font-size: clamp(15px, 2.5vw, 18px);
  font-weight: 400;
  color: var(--sign-accent, var(--accent));
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.02em;
  border-bottom: 0.5px solid color-mix(in srgb, var(--sign-accent, var(--accent)) 25%, transparent);
  padding-bottom: var(--space-xs);
}

.cosmic-section-header:first-child {
  margin-top: 0;
}

.cosmic-profile-text p {
  font-family: 'Playfair Display', serif;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.9;
  color: var(--text-secondary);
}

/* ─── Cosmic Profile enhanced formatting ─────────────────────────────────── */

.cosmic-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 400;
  color: var(--text-primary);
  text-align: center;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid rgba(189,144,48,0.3);
  margin-bottom: var(--space-xs);
}

.cosmic-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: clamp(13px, 2vw, 15px);
  color: #d4a843;
  text-align: center;
  letter-spacing: 0.04em;
  margin-top: 0;
  margin-bottom: 0;
}

.cosmic-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-xs) 0;
  color: rgba(189,144,48,0.5);
  font-size: 14px;
  letter-spacing: 0.3em;
}

.cosmic-divider::before,
.cosmic-divider::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: linear-gradient(to right, transparent, rgba(189,144,48,0.3));
  margin: 0 var(--space-md);
}

.cosmic-divider::after {
  background: linear-gradient(to left, transparent, rgba(189,144,48,0.3));
}

/* ─── Birth Chart page ────────────────────────────────────────────────────── */

.chart-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .chart-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl);
  }
  .chart-wheel-wrap { flex: 0 0 620px; }
  .chart-data       { flex: 1; }
}

.chart-wheel-wrap {
  background: var(--bg-card);
  border: 1px solid rgba(189,144,48,0.3);
  border-radius: 16px;
  padding: var(--space-md);
  box-shadow: 0 0 32px rgba(189,144,48,0.08), 0 8px 32px rgba(0,0,0,0.4);
}

.chart-wheel-svg { width: 100%; height: auto; display: block; }

.chart-data { display: flex; flex-direction: column; gap: var(--space-lg); }

.chart-section {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.chart-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--accent);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 0.5px solid var(--border);
  background: rgba(160,100,255,0.05);
  margin: 0;
}

/* Planet table */
.planet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.planet-table th {
  text-align: left;
  padding: 8px var(--space-lg);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 0.5px solid var(--border);
}

.planet-table td {
  padding: 8px var(--space-lg);
  color: var(--text-secondary);
  border-bottom: 0.5px solid rgba(150,120,220,0.08);
}

.planet-table tr:last-child td { border-bottom: none; }

.planet-name { color: var(--text-primary); font-weight: 500; }
.planet-glyph-cell { color: var(--accent); margin-right: 6px; }

.retrograde-badge {
  font-size: 10px;
  color: #F0997B;
  background: rgba(216,90,48,0.1);
  border: 0.5px solid rgba(216,90,48,0.3);
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 4px;
}

/* Gold = angular chart points (Ascendant & Midheaven), not planets */
.asc-row td { color: #d4a843; font-style: italic; }

/* Key facts grid */
.chart-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.chart-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-card);
}

.fact-label { font-size: 11px; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.fact-value { font-size: 14px; color: var(--text-primary); font-weight: 500; }

/* Aspects */
.aspects-list { padding: var(--space-sm) 0; }

.aspect-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 7px var(--space-lg);
  font-size: 13px;
  border-bottom: 0.5px solid rgba(150,120,220,0.06);
}

.aspect-item:last-child { border-bottom: none; }
.aspect-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.aspect-planets { flex: 1; color: var(--text-secondary); }
.aspect-name { color: var(--text-muted); font-size: 12px; }
.aspect-orb  { color: var(--text-faint); font-size: 11px; margin-left: auto; }

.chart-note {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  padding: var(--space-sm);
  line-height: 1.6;
}

/* Missing data state */
.chart-missing {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
}

.chart-missing-icon { font-size: 52px; display: block; margin-bottom: var(--space-lg); }

.chart-missing h2 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.chart-missing p { font-size: 15px; color: var(--text-muted); margin-bottom: var(--space-sm); }
.chart-missing-sub { font-size: 13px !important; color: var(--text-faint) !important; }

/* ─── Personal banner action buttons ─────────────────────────────────────── */

.personal-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.personal-banner-chart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 22px;
  background: transparent;
  border: 0.5px solid rgba(189,144,48,0.35);
  color: rgba(212,168,67,0.75);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  transition: all 0.18s;
  min-height: var(--touch-min);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.personal-banner-chart-link:hover {
  background: rgba(189,144,48,0.1);
  border-color: rgba(189,144,48,0.7);
  color: #d4a843;
  text-decoration: none;
}

/* ─── Birth Chart — back link, PDF button, beginner guide ─────────────────── */

.chart-back-link {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.btn-back-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  border-radius: 22px;
  background: var(--accent-glow);
  border: 0.5px solid var(--border-hover);
  color: var(--accent);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  transition: all 0.18s;
  min-height: var(--touch-min);
}

.btn-back-profile:hover {
  background: rgba(196,168,255,0.2);
  text-decoration: none;
  color: var(--accent);
}

/* Download bar — inside the wheel card, directly under the SVG */
.chart-download-bar {
  display: flex;
  justify-content: center;
  padding: var(--space-md) 0 var(--space-sm);
  border-top: 0.5px solid rgba(189,144,48,0.2);
  margin-top: var(--space-sm);
}

.btn-save-jpg {
  padding: 10px 22px;
  border-radius: 22px;
  background: rgba(189,144,48,0.12);
  border: 1px solid rgba(189,144,48,0.4);
  color: #d4a843;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.18s;
  min-height: var(--touch-min);
  white-space: nowrap;
}

.btn-save-jpg:hover {
  background: rgba(189,144,48,0.22);
  border-color: rgba(189,144,48,0.7);
}

.chart-pdf-hint {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
}

/* Beginner guide */
.chart-guide {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 0.5px solid var(--border);
}

.chart-guide-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.chart-guide-intro {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-xl);
  max-width: 720px;
}

.guide-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.guide-section {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.guide-section-title {
  padding: var(--space-md) var(--space-lg);
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  transition: background 0.15s;
  user-select: none;
}

.guide-section-title::-webkit-details-marker { display: none; }
.guide-section-title::after { content: '▼'; font-size: 10px; margin-left: auto; color: var(--text-faint); }
details[open] .guide-section-title::after { content: '▲'; }
.guide-section-title:hover { background: var(--accent-glow); }

.guide-section-body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 0.5px solid var(--border);
}

.guide-section-body > p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

.guide-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide-row {
  display: grid;
  grid-template-columns: 28px 110px 1fr;
  gap: var(--space-sm);
  align-items: start;
  padding: 6px 0;
  border-bottom: 0.5px solid rgba(150,120,220,0.06);
  font-size: 13px;
}

.guide-row:last-child { border-bottom: none; }

.guide-glyph {
  color: var(--accent);
  font-size: 16px;
  text-align: center;
  flex-shrink: 0;
}

.guide-number {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dim);
  font-family: 'Inter', sans-serif;
}

.guide-planet {
  color: var(--text-primary);
  font-weight: 500;
}

.guide-meaning { color: var(--text-muted); line-height: 1.5; }

/* Big Three highlight */
.big-three {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.big-three-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-md);
  background: rgba(196,168,255,0.05);
  border: 0.5px solid var(--border-hover);
  border-radius: 12px;
  text-align: center;
}

.big-three-glyph { font-size: 28px; color: var(--accent); }
.big-three-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.big-three-sub   { font-size: 12px; color: var(--text-muted); }

/* Print stylesheet — hides nav, stars, guide; keeps chart clean */
@media print {
  .top-nav, .site-footer, .page-stars,
  .chart-back-link, .chart-pdf-bar, .chart-guide,
  .cosmos-header { display: none !important; }
  body { background: white !important; color: black !important; }
  .chart-wheel-wrap { border: 1px solid #ccc !important; box-shadow: none !important; }
  .chart-layout { flex-direction: column !important; }
  .chart-data { page-break-before: always; }
  .planet-table td, .planet-table th { color: black !important; }
  .chart-section { border: 1px solid #ccc !important; }
  .chart-section-title { color: #333 !important; }
}

/* ─── Guide section title icons ───────────────────────────────────────────── */

.guide-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  flex-shrink: 0;
  margin-right: 4px;
  transition: transform 0.2s;
}

.guide-section-title:hover .guide-title-icon {
  transform: scale(1.15);
}

.guide-icon-sun {
  background: radial-gradient(circle, rgba(212,136,10,0.25), rgba(212,136,10,0.08));
  border: 1px solid rgba(212,136,10,0.4);
  color: #D4880A;
  box-shadow: 0 0 10px rgba(212,136,10,0.2);
}

.guide-icon-signs {
  background: radial-gradient(circle, rgba(212,43,43,0.2), rgba(212,43,43,0.06));
  border: 1px solid rgba(212,43,43,0.35);
  color: #D42B2B;
  box-shadow: 0 0 10px rgba(212,43,43,0.15);
}

.guide-icon-houses {
  background: radial-gradient(circle, rgba(61,158,168,0.2), rgba(61,158,168,0.06));
  border: 1px solid rgba(61,158,168,0.35);
  color: #3D9EA8;
  box-shadow: 0 0 10px rgba(61,158,168,0.15);
}

.guide-icon-aspects {
  background: radial-gradient(circle, rgba(68,170,68,0.2), rgba(68,170,68,0.06));
  border: 1px solid rgba(68,170,68,0.35);
  color: #44AA44;
  box-shadow: 0 0 10px rgba(68,170,68,0.15);
}

.guide-icon-bigthree {
  background: radial-gradient(circle, rgba(196,168,255,0.2), rgba(196,168,255,0.06));
  border: 1px solid rgba(196,168,255,0.35);
  color: #C4A8FF;
  box-shadow: 0 0 10px rgba(196,168,255,0.15);
}

/* ─── Legal pages (Terms & Privacy) ──────────────────────────────────────── */

.legal-page .cosmos-header { margin-bottom: var(--space-xl); }

.legal-date {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: var(--space-sm);
  letter-spacing: 0.03em;
}

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.legal-section {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: var(--space-xl);
}

.legal-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(17px, 3vw, 20px);
  font-weight: 400;
  color: var(--accent);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 0.5px solid var(--border);
}

.legal-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--space-md) 0 var(--space-sm);
  letter-spacing: 0.02em;
}

.legal-section p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.legal-section p:last-child { margin-bottom: 0; }

.legal-section ul {
  margin: var(--space-sm) 0 var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.legal-section li {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.legal-section strong { color: var(--text-primary); }

.legal-section a { color: var(--accent-dim); }
.legal-section a:hover { color: var(--accent); }

.legal-warning {
  background: rgba(216,90,48,0.08);
  border: 0.5px solid rgba(216,90,48,0.25);
  border-radius: 10px;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}

.legal-warning p {
  color: #F0997B !important;
  margin: 0 !important;
  font-size: 13px !important;
}

.legal-contact {
  background: rgba(196,168,255,0.05);
  border: 0.5px solid var(--border-hover);
  border-radius: 10px;
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
}

.legal-contact p {
  font-size: 14px !important;
  margin-bottom: 4px !important;
  color: var(--text-secondary) !important;
}

.legal-footer {
  max-width: 800px;
  margin: var(--space-xl) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-top: 0.5px solid var(--border);
  color: var(--text-faint);
}

.legal-link {
  font-size: 14px;
  color: var(--text-muted);
}

.legal-link:hover { color: var(--accent); text-decoration: none; }

/* ─── Legal pages (Terms & Privacy) ─────────────────────────────────────── */

.legal-page {
  min-height: 100vh;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

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

.legal-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 0.5px solid rgba(189,144,48,0.3);
}

.legal-back {
  display: inline-block;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: var(--space-lg);
}

.legal-back:hover { color: var(--accent); }

.legal-glyph {
  display: block;
  font-size: 32px;
  color: var(--accent);
  margin-bottom: var(--space-md);
}

.legal-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.legal-meta {
  font-size: 13px;
  color: var(--text-faint);
}

.legal-highlight {
  background: rgba(189,144,48,0.08);
  border: 1px solid rgba(189,144,48,0.25);
  border-left: 3px solid #bd9030;
  border-radius: 8px;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.legal-body h2 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--accent);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  padding-bottom: 6px;
  border-bottom: 0.5px solid rgba(150,120,220,0.15);
}

.legal-body p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.legal-body ul {
  margin: var(--space-sm) 0 var(--space-md) var(--space-lg);
}

.legal-body ul li {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 6px;
  position: relative;
}

.legal-body ul li::marker {
  color: var(--accent-dim);
}

.legal-body a {
  color: var(--accent-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-body a:hover { color: var(--accent); }

.legal-body strong { color: var(--text-primary); }

.legal-contact-block {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
}

.legal-contact-block p {
  margin-bottom: 4px;
  font-size: 13px;
}

.legal-footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 12px;
  color: var(--text-faint);
}

.legal-link {
  font-size: 12px;
  color: var(--accent-dim);
  text-decoration: none;
}

.legal-link:hover { color: var(--accent); }

/* ─── Zodiac sign suggestion label ───────────────────────────────────────── */

.sign-suggestion {
  font-size: 12px;
  font-weight: 400;
  color: var(--accent-dim);
  margin-left: 4px;
  font-style: italic;
}

/* ─── Date of birth dropdown selects ─────────────────────────────────────── */

.dob-selects {
  display: grid;
  grid-template-columns: 1fr 2fr 1.5fr;
  gap: var(--space-sm);
}

.dob-selects.field-invalid .dob-select {
  border-color: rgba(216, 90, 48, 0.7);
}

.dob-select {
  width: 100%;
  padding: 14px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  color: var(--text-primary);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A80A8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
  min-height: var(--touch-min);
  transition: border-color 0.15s;
}

.dob-select:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(196,168,255,0.12);
}

.dob-select option {
  background: #1A1A2E;
  color: var(--text-primary);
}