/* ─── UrFaith – 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=Manrope:wght@500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

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

/* Browsers only default to a pointer cursor on <a href> — <button>, <input type="submit">,
   and similar defaults to the arrow cursor unless told otherwise. This one rule covers
   every clickable control site-wide so individual components don't each need their own
   cursor:pointer declaration. */
button:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
label[for],
select,
summary {
  cursor: pointer;
}

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
  cursor: not-allowed;
}

:root {
  --bg-deep:        #0F1215;
  --bg-card:        #191D22;
  --bg-input:       #20252B;
  --border:         rgba(197, 160, 89, 0.18);
  --border-hover:   rgba(212, 175, 106, 0.35);
  --accent:         #D4AF6A;
  --accent-dim:     #B08F52;
  --accent-glow:    rgba(212, 175, 106, 0.12);
  --text-primary:   #F3EFE6;
  --text-secondary: #C9C2B4;
  --text-muted:     #948C7C;
  --text-faint:     #5C564A;
  --error:          #D85A30;
  --success:        #4E8B6B;

  /* 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;
}

/* ─── Light theme ─────────────────────────────────────────────────────────
   Applied via [data-theme="light"] on <html>, toggled by ThemeToggle.razor
   and persisted to localStorage. Same warm gold accent throughout — only
   the background/text scale inverts, so every component built on these
   variables adapts automatically without needing its own light-mode rules. */
:root[data-theme="light"] {
  --bg-deep:        #EDE4D0;
  --bg-card:        #FFFDF8;
  --bg-input:       #F1EADA;
  --border:         rgba(139, 108, 41, 0.20);
  --border-hover:   rgba(139, 108, 41, 0.38);
  --accent:         #9C7A3D;
  --accent-dim:     #83672F;
  --accent-glow:    rgba(156, 122, 61, 0.10);
  --text-primary:   #332E24;
  --text-secondary: #675F4F;
  --text-muted:     #8F8672;
  --text-faint:     #ABA28C;
  --error:          #B04A32;
  --success:        #46785E;
}

/* Rather than hiding the starfield in light mode, it's re-skinned into soft
   warm "light motes" instead — same idea as the dark theme's stars, but with
   colours and a soft glow tuned to actually show up against a light
   background (the original pale/cool star colours have almost no contrast
   against a light page, so this uses dedicated light-theme box-shadow rules
   with warm gold tones, further down near the star rules themselves, rather
   than trying to reuse the dark-theme colours via a CSS filter). */

/* The devotional banner photos were composed for the dark theme (dark sky
   fading into a bright subject) — dropped onto a light page as-is they'd
   create a harsh, disconnected rectangle. Rather than hide them, soften
   them: lighten and desaturate the photo slightly and give the fade more
   spread, so it reads as gently blended into the card instead of a stark
   dark block sitting on top of it. */
:root[data-theme="light"] .personal-banner-bg {
  filter: brightness(1.25) saturate(0.75);
}

/* Card/border shadows were tuned for a dark backdrop (soft glow effect) —
   on a light background the same values just look like dirty smudges, so
   soften them into ordinary drop shadows instead. */
:root[data-theme="light"] .personal-banner,
:root[data-theme="light"] .reading-panel,
:root[data-theme="light"] .auth-card {
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

/* The nav bar's background is normally the same --bg-deep as the page body
   underneath it (just at 95% opacity), which reads fine on the dark theme's
   near-black tones but is nearly invisible on the light theme's pale cream —
   the two are too close in value to tell apart. A distinct warm tan gradient
   gives the header real separation from the page instead of blending into it. */
:root[data-theme="light"] .top-nav {
  background: linear-gradient(135deg, #E6D7AE, #D9C793);
}

/* ── 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: color-mix(in srgb, var(--bg-deep) 95%, transparent);
  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: 'Manrope', sans-serif; font-size: 17px; }

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

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--bg-input);
  color: var(--accent);
  font-size: 16px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: var(--accent-glow);
  border-color: var(--border-hover);
  transform: scale(1.05);
}

/* ─── Game promo card (Home page) ──────────────────────────────────────────── */

.game-promo-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: linear-gradient(135deg, rgba(212,175,106,0.08), rgba(93,202,165,0.05));
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  text-decoration: none;
  transition: all 0.15s;
}

.game-promo-card:hover {
  border-color: var(--border-hover);
  background: linear-gradient(135deg, rgba(212,175,106,0.14), rgba(93,202,165,0.08));
  text-decoration: none;
  transform: translateY(-1px);
}

.game-promo-icon { font-size: 28px; flex-shrink: 0; }
.game-promo-text { flex: 1; min-width: 0; }

.game-promo-text h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2px;
}

.game-promo-text p {
  font-size: 12px;
  color: var(--text-faint);
  margin: 0;
}

.game-promo-arrow {
  font-size: 18px;
  color: var(--accent-dim);
  flex-shrink: 0;
}

.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(212,175,106,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; }

@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(212,175,106,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(160,120,50,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Same idea as the dark-theme glow above, but with warmer, higher-opacity
   gold tones — a very faint radial gradient reads as basically invisible
   against a light background unless it's pushed up a bit, whereas on a dark
   background the same low opacity already shows up clearly. */
:root[data-theme="light"] .stars-bg {
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(184,140,50,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(156,110,40,0.10) 0%, transparent 65%);
}

.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: 'Manrope', sans-serif; font-size: 18px; color: var(--text-primary); }

.auth-card h1 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(22px, 5vw, 26px);
  font-weight: 600;
  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="tel"],
.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(212,175,106,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;
}

/* 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: var(--error); }
.alert-success { background: rgba(29,158,117,0.1); border: 0.5px solid rgba(29,158,117,0.3); color: var(--success); }

/* Primary button */
.btn-auth {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #D4AF6A 0%, #A9803F 100%);
  color: #F3EFE6;
  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: #F3EFE6;
  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: 'Manrope', sans-serif;
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 600;
  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(212,175,106,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(212,175,106,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: 1px solid var(--border-hover);
  background: var(--bg-card);
  color: var(--accent-dim);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.type-btn:hover, .type-btn.active {
  background: var(--accent-glow);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

/* ─── Per-reading-type accent colours ─────────────────────────────────────────
   Each reading type gets its own gentle accent — Daily keeps the default gold,
   the rest branch out to a distinct but equally warm, natural hue. Deliberately
   avoids purple/blue-violet tones, which read too close to the app's old
   astrology branding that was scrubbed out earlier. ───────────────────────── */
.type-btn-love      { --type-accent: #C9748A; }
.type-btn-purpose   { --type-accent: #C07A45; }
.type-btn-wellness  { --type-accent: #6FA37D; }
.type-btn-guidance  { --type-accent: #6C87AC; }

:root[data-theme="light"] .type-btn-love      { --type-accent: #A85670; }
:root[data-theme="light"] .type-btn-purpose   { --type-accent: #9C5F2E; }
:root[data-theme="light"] .type-btn-wellness  { --type-accent: #4C7E5C; }
:root[data-theme="light"] .type-btn-guidance  { --type-accent: #4F6789; }

.type-btn-love:hover, .type-btn-love.active,
.type-btn-purpose:hover, .type-btn-purpose.active,
.type-btn-wellness:hover, .type-btn-wellness.active,
.type-btn-guidance:hover, .type-btn-guidance.active {
  background: color-mix(in srgb, var(--type-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--type-accent) 45%, transparent);
  color: var(--type-accent);
}

/* Matching accent on the reading panel header once that type is open */
.panel-header-love      { --type-accent: #C9748A; background: color-mix(in srgb, #C9748A 8%, transparent) !important; }
.panel-header-purpose   { --type-accent: #C07A45; background: color-mix(in srgb, #C07A45 8%, transparent) !important; }
.panel-header-wellness  { --type-accent: #6FA37D; background: color-mix(in srgb, #6FA37D 8%, transparent) !important; }
.panel-header-guidance  { --type-accent: #6C87AC; background: color-mix(in srgb, #6C87AC 8%, transparent) !important; }

:root[data-theme="light"] .panel-header-love      { --type-accent: #A85670; }
:root[data-theme="light"] .panel-header-purpose   { --type-accent: #9C5F2E; }
:root[data-theme="light"] .panel-header-wellness  { --type-accent: #4C7E5C; }
:root[data-theme="light"] .panel-header-guidance  { --type-accent: #4F6789; }

.panel-header-love .big-glyph,      .panel-header-love .panel-header-text h2,
.panel-header-purpose .big-glyph,   .panel-header-purpose .panel-header-text h2,
.panel-header-wellness .big-glyph,  .panel-header-wellness .panel-header-text h2,
.panel-header-guidance .big-glyph,  .panel-header-guidance .panel-header-text h2 {
  color: var(--type-accent);
}

/* Reading panel */
.reading-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  overflow: hidden;
  min-height: 240px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 0.5px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  flex-wrap: wrap;
}

.big-glyph {
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(212,175,106,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: 'Manrope', sans-serif;
  font-size: clamp(19px, 4vw, 25px);
  font-weight: 700;
  color: var(--text-primary);
}
.panel-header-text p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.02em;
}
.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); }
}

.reading-text {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 3vw, 16.5px);
  line-height: 1.9;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.reading-text p {
  margin: 0;
  line-height: 1.9;
}

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

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

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

/* Scripture quote — its own visually distinct callout */
.reading-verse {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 0 10px 10px 0;
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 3.2vw, 19px);
  line-height: 1.7;
  color: var(--text-primary);
}

/* Closing prayer prompt — its own quiet callout */
.reading-prayer {
  margin: 0;
  padding: var(--space-md);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  font-style: italic;
  color: var(--text-secondary);
}

.reading-prayer::before {
  content: "🙏 ";
}

.lunar-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--space-md);
  border-top: 0.5px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  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); color: var(--accent); opacity: 0.55; }
.empty-state p {
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text-secondary);
}

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

.site-footer {
  border-top: 0.5px solid rgba(176,143,82,0.15);
  padding: 16px 24px 12px;
  margin-top: 48px;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.footer-brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  color: var(--text-faint);
  font-size: 16px;
  transition: color 0.15s;
}
.footer-social:hover {
  color: var(--accent);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: rgba(212,175,106,0.5);
}

.footer-copy {
  font-size: 11px;
  color: var(--text-faint);
}

.footer-policy-links {
  max-width: 900px;
  margin: 8px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(176,143,82,0.06);
  flex-wrap: wrap;
}

.footer-policy-links a {
  font-size: 11px;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-policy-links a:hover {
  color: rgba(212,175,106,0.6);
}

.footer-dot {
  font-size: 10px;
  color: var(--text-faint);
}


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

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

.personal-banner {
  position: relative;
  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%, var(--bg-card) 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: 220px;
}

/* ── 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; }
}

/* ── Light theme starfield re-skin — warm glowing "light motes" ──────────────
   Same star positions as the dark theme layers above, but with dedicated
   warm gold colours and a soft glow radius, since the original pale/cool
   star colours have almost no contrast against a light background. Density
   is thinned to roughly half per layer, since these glowing blurred motes
   are visually heavier per-dot than the original sharp 1-2px star points. */

:root[data-theme="light"] .page-stars span:nth-child(1) {
  box-shadow:
    832px 784px 3px 1px rgba(156,122,61,0.77),
    868px 448px 4px 1px rgba(139,108,41,0.59),
    92px 556px 3px 1px rgba(156,122,61,0.73),
    1469px 334px 3px 1px rgba(156,122,61,0.58),
    297px 639px 3px 1px rgba(139,108,41,0.72),
    263px 729px 5px 1px rgba(168,131,66,0.62),
    844px 303px 4px 1px rgba(168,131,66,0.79),
    1710px 102px 4px 1px rgba(156,122,61,0.76),
    81px 768px 4px 1px rgba(180,140,70,0.6),
    902px 169px 3px 1px rgba(180,140,70,0.58),
    843px 331px 4px 1px rgba(156,122,61,0.8),
    1372px 356px 4px 1px rgba(168,131,66,0.79),
    640px 347px 3px 1px rgba(120,90,35,0.84),
    70px 124px 3px 1px rgba(120,90,35,0.72),
    547px 948px 4px 1px rgba(168,131,66,0.72),
    1827px 788px 3px 1px rgba(156,122,61,0.75),
    680px 1016px 3px 1px rgba(180,140,70,0.81),
    102px 818px 5px 1px rgba(156,122,61,0.63),
    356px 563px 4px 1px rgba(180,140,70,0.66),
    1694px 285px 4px 1px rgba(139,108,41,0.76),
    113px 706px 4px 1px rgba(156,122,61,0.71),
    1506px 169px 4px 1px rgba(139,108,41,0.69),
    1809px 589px 4px 1px rgba(180,140,70,0.76),
    75px 776px 4px 1px rgba(156,122,61,0.8),
    116px 439px 5px 1px rgba(180,140,70,0.63),
    1807px 526px 4px 1px rgba(139,108,41,0.61),
    895px 275px 5px 1px rgba(120,90,35,0.82),
    1644px 360px 4px 1px rgba(120,90,35,0.63),
    867px 814px 4px 1px rgba(139,108,41,0.77),
    107px 604px 5px 1px rgba(120,90,35,0.66),
    1092px 538px 5px 1px rgba(139,108,41,0.58),
    319px 156px 3px 1px rgba(156,122,61,0.6),
    1493px 762px 5px 1px rgba(139,108,41,0.73),
    1910px 73px 5px 1px rgba(120,90,35,0.73),
    541px 163px 4px 1px rgba(120,90,35,0.84),
    1099px 221px 3px 1px rgba(156,122,61,0.75),
    1303px 270px 4px 1px rgba(168,131,66,0.78),
    1705px 592px 3px 1px rgba(180,140,70,0.64),
    555px 627px 5px 1px rgba(139,108,41,0.55),
    450px 1032px 4px 1px rgba(180,140,70,0.7);
}

:root[data-theme="light"] .page-stars span:nth-child(2) {
  box-shadow:
    98px 421px 4px 1px rgba(156,122,61,0.8),
    1458px 347px 4px 1px rgba(168,131,66,0.6),
    1332px 252px 3px 1px rgba(139,108,41,0.73),
    895px 475px 3px 1px rgba(120,90,35,0.58),
    992px 1011px 4px 1px rgba(180,140,70,0.62),
    232px 466px 3px 1px rgba(139,108,41,0.58),
    1289px 98px 3px 1px rgba(120,90,35,0.84),
    1409px 598px 4px 1px rgba(168,131,66,0.59),
    1141px 744px 4px 1px rgba(120,90,35,0.63),
    8px 292px 5px 1px rgba(168,131,66,0.84),
    639px 712px 4px 1px rgba(168,131,66,0.76),
    504px 68px 4px 1px rgba(120,90,35,0.68),
    413px 1047px 5px 1px rgba(168,131,66,0.59),
    86px 56px 3px 1px rgba(139,108,41,0.65),
    1624px 285px 4px 1px rgba(168,131,66,0.73),
    462px 946px 3px 1px rgba(156,122,61,0.76),
    1498px 223px 4px 1px rgba(156,122,61,0.57),
    212px 841px 4px 1px rgba(156,122,61,0.57),
    1029px 503px 4px 1px rgba(139,108,41,0.75),
    1515px 710px 4px 1px rgba(139,108,41,0.77);
}

:root[data-theme="light"] .page-stars span:nth-child(3) {
  box-shadow:
    1229px 734px 5px 1px rgba(168,131,66,0.62),
    872px 344px 5px 1px rgba(120,90,35,0.61),
    1298px 509px 5px 1px rgba(156,122,61,0.66),
    102px 139px 5px 1px rgba(120,90,35,0.81),
    567px 722px 3px 1px rgba(156,122,61,0.57),
    775px 623px 3px 1px rgba(180,140,70,0.62),
    1270px 560px 5px 1px rgba(139,108,41,0.59);
}

:root[data-theme="light"] .personal-banner-stars span:nth-child(1) {
  box-shadow:
    89px 100px 4px 1px rgba(139,108,41,0.69),
    855px 215px 5px 1px rgba(156,122,61,0.79),
    547px 176px 3px 1px rgba(168,131,66,0.57),
    196px 187px 3px 1px rgba(168,131,66,0.84),
    727px 212px 4px 1px rgba(139,108,41,0.67),
    626px 174px 4px 1px rgba(120,90,35,0.81),
    842px 9px 4px 1px rgba(156,122,61,0.66),
    776px 230px 4px 1px rgba(120,90,35,0.83),
    714px 212px 4px 1px rgba(120,90,35,0.68),
    692px 38px 5px 1px rgba(168,131,66,0.6),
    322px 245px 4px 1px rgba(180,140,70,0.84),
    416px 88px 3px 1px rgba(168,131,66,0.77),
    760px 202px 3px 1px rgba(156,122,61,0.73),
    351px 177px 4px 1px rgba(168,131,66,0.57),
    600px 107px 3px 1px rgba(168,131,66,0.81),
    44px 100px 3px 1px rgba(156,122,61,0.75),
    760px 80px 5px 1px rgba(139,108,41,0.59),
    325px 179px 4px 1px rgba(168,131,66,0.72),
    781px 155px 3px 1px rgba(156,122,61,0.68),
    675px 23px 4px 1px rgba(168,131,66,0.83),
    278px 212px 4px 1px rgba(139,108,41,0.62),
    52px 58px 4px 1px rgba(120,90,35,0.75),
    84px 139px 5px 1px rgba(180,140,70,0.64),
    273px 108px 3px 1px rgba(156,122,61,0.69),
    198px 270px 3px 1px rgba(168,131,66,0.57),
    546px 202px 4px 1px rgba(139,108,41,0.59),
    134px 77px 3px 1px rgba(180,140,70,0.81),
    536px 21px 4px 1px rgba(180,140,70,0.6),
    149px 230px 4px 1px rgba(168,131,66,0.73),
    330px 56px 3px 1px rgba(168,131,66,0.75),
    783px 104px 4px 1px rgba(168,131,66,0.83),
    95px 51px 4px 1px rgba(156,122,61,0.63),
    768px 10px 4px 1px rgba(156,122,61,0.63),
    55px 84px 4px 1px rgba(168,131,66,0.77),
    573px 270px 4px 1px rgba(139,108,41,0.7),
    852px 10px 3px 1px rgba(180,140,70,0.58),
    559px 70px 4px 1px rgba(120,90,35,0.56),
    310px 32px 4px 1px rgba(180,140,70,0.74),
    769px 268px 4px 1px rgba(180,140,70,0.77),
    849px 128px 5px 1px rgba(168,131,66,0.72),
    345px 171px 3px 1px rgba(156,122,61,0.83),
    54px 181px 3px 1px rgba(139,108,41,0.8),
    609px 165px 4px 1px rgba(168,131,66,0.68),
    850px 198px 4px 1px rgba(156,122,61,0.66),
    429px 241px 4px 1px rgba(156,122,61,0.61);
}

:root[data-theme="light"] .personal-banner-stars span:nth-child(2) {
  box-shadow:
    806px 186px 3px 1px rgba(139,108,41,0.66),
    436px 204px 5px 1px rgba(168,131,66,0.84),
    486px 143px 4px 1px rgba(139,108,41,0.81),
    727px 184px 5px 1px rgba(139,108,41,0.56),
    277px 260px 5px 1px rgba(180,140,70,0.79),
    633px 50px 4px 1px rgba(139,108,41,0.6),
    232px 232px 5px 1px rgba(156,122,61,0.81),
    159px 29px 4px 1px rgba(120,90,35,0.61),
    83px 248px 4px 1px rgba(120,90,35,0.64),
    501px 11px 4px 1px rgba(139,108,41,0.56),
    258px 152px 5px 1px rgba(139,108,41,0.65),
    597px 246px 4px 1px rgba(156,122,61,0.66),
    524px 232px 5px 1px rgba(168,131,66,0.75),
    416px 128px 4px 1px rgba(168,131,66,0.83),
    552px 127px 4px 1px rgba(156,122,61,0.6),
    738px 56px 3px 1px rgba(180,140,70,0.58),
    863px 85px 4px 1px rgba(120,90,35,0.77),
    318px 147px 5px 1px rgba(180,140,70,0.73),
    270px 234px 3px 1px rgba(168,131,66,0.67),
    386px 17px 4px 1px rgba(168,131,66,0.63),
    355px 39px 3px 1px rgba(120,90,35,0.71),
    467px 98px 4px 1px rgba(168,131,66,0.66);
}

:root[data-theme="light"] .personal-banner-stars span:nth-child(3) {
  box-shadow:
    356px 77px 4px 1px rgba(156,122,61,0.74),
    473px 232px 4px 1px rgba(156,122,61,0.7),
    20px 47px 4px 1px rgba(120,90,35,0.67),
    714px 15px 4px 1px rgba(180,140,70,0.61),
    386px 86px 4px 1px rgba(120,90,35,0.73),
    772px 214px 5px 1px rgba(180,140,70,0.71),
    315px 198px 4px 1px rgba(156,122,61,0.64),
    526px 172px 4px 1px rgba(120,90,35,0.69);
}

/* 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: 'Manrope', sans-serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 4px;
}

.personal-banner-glyph {
  color: var(--accent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 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: var(--accent);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.18s;
  min-height: var(--touch-min);
  -webkit-tap-highlight-color: transparent;
  animation: cta-pulse-dark 2.2s ease-in-out infinite;
}
.personal-banner-cta:hover {
  background: rgba(189,144,48,0.22);
  border-color: rgba(189,144,48,0.8);
  animation: none;
}

/* A soft glow reads clearly against a dark banner but nearly disappears
   against a light one, so light theme gets its own stronger border/background
   pulse instead of relying on a shadow that wouldn't show up well there. */
@keyframes cta-pulse-dark {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,106,0.35); border-color: rgba(189,144,48,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(212,175,106,0); border-color: rgba(212,175,106,0.9); }
}

:root[data-theme="light"] .personal-banner-cta {
  animation: cta-pulse-light 2.2s ease-in-out infinite;
}
@keyframes cta-pulse-light {
  0%, 100% { background: rgba(156,122,61,0.10); border-color: rgba(156,122,61,0.5); }
  50%      { background: rgba(156,122,61,0.22); border-color: rgba(156,122,61,0.95); }
}

/* Devotional banner background image — covers the full card, positioned so
   the bright subject (right-weighted in these images) sits under empty space
   rather than under the text on the left */
.personal-banner-bg {
  position: absolute;
  inset: 0;
  background-image: var(--banner-image);
  background-size: cover;
  background-position: 15% right;
  transition: transform 8s ease;
}

.personal-banner:hover .personal-banner-bg {
  transform: scale(1.03);
}

/* Fades the image into the card's own tone from the left (for text legibility),
   with a touch of the accent gold mixed in for warmth rather than a flat wash.
   Also softens the right and bottom edges slightly, so the photo reads as
   settled into the card rather than a hard-edged rectangle sitting on top. */
.personal-banner-bg-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      var(--bg-card) 0%,
      color-mix(in srgb, var(--bg-card) 70%, var(--accent) 8%) 35%,
      color-mix(in srgb, var(--bg-card) 12%, var(--accent) 4%) 65%,
      transparent 100%),
    linear-gradient(to left,
      transparent 82%,
      color-mix(in srgb, var(--bg-card) 22%, transparent) 100%),
    linear-gradient(to top,
      transparent 80%,
      color-mix(in srgb, var(--bg-card) 20%, transparent) 100%);
}

/* Light theme needs a more generous fade — the softened photo still reads
   noticeably darker than the surrounding card, so blend further into it */
:root[data-theme="light"] .personal-banner-bg-fade {
  background:
    linear-gradient(to right,
      var(--bg-card) 0%,
      color-mix(in srgb, var(--bg-card) 75%, var(--accent) 10%) 45%,
      color-mix(in srgb, var(--bg-card) 25%, var(--accent) 6%) 75%,
      color-mix(in srgb, var(--bg-card) 8%, transparent) 100%),
    linear-gradient(to left,
      transparent 80%,
      color-mix(in srgb, var(--bg-card) 30%, transparent) 100%),
    linear-gradient(to top,
      transparent 78%,
      color-mix(in srgb, var(--bg-card) 28%, transparent) 100%);
}

/* Streak badge — floats in the top-right corner over the image */
.banner-streak-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  animation: banner-icon-breathe 4.5s ease-in-out infinite;
}

@keyframes banner-icon-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%      { box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 15%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .banner-streak-badge { animation: none; }
}

.banner-streak-glyph {
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  margin-bottom: 1px;
}

.banner-streak-number {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.banner-streak-label {
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  line-height: 1.3;
  text-align: center;
  max-width: 90px;
}

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

/* ─── Banner / reading panel accent theming ─────────────────────────────────
   All these elements now theme directly off the shared --accent / --accent-glow
   variables (which already flip between dark/light themes), rather than the
   old per-user --sign-accent indirection layer that this used to route through.
   The banner's border itself stays gold via the base .personal-banner rule
   above - nothing extra needed here beyond the child elements below.
   ─────────────────────────────────────────────────────────────────────────── */

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

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

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

/* Reading panel — header background, badge, glyph, and active state */

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

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

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

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

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

/* Reading type pills — active pill uses green for clear "selected" feedback
   (ask-stars-btn keeps its own gold active state — see its rule further down) */
.reading-panel ~ * .type-btn.active,
.type-btn.active {
  background: rgba(93,202,165,0.14);
  border-color: var(--success);
  color: var(--success);
}

/* Explicit combined selector so an active pill stays green even while the
   cursor is still over it, rather than briefly showing the base hover style
   until the mouse moves away (both rules otherwise tie on specificity). */
.type-btn.active:hover {
  background: rgba(93,202,165,0.2);
  border-color: var(--success);
  color: var(--success);
}
/* ─── Used reading type pill state ───────────────────────────────────────── */

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

.type-btn.used:hover {
  opacity: 0.9;
  background: var(--accent-glow);
  border-color: var(--border-hover);
  color: var(--accent-dim);
}

/* When a pill is BOTH active (currently selected) AND used (already used
   today) — which is the normal case, since clicking a pill marks it used
   the same instant — "selected" should visually win over "already used".
   Higher specificity (4 parts) than either .active:hover or .used:hover
   alone (3 parts each), so this reliably wins regardless of file order. */
.type-btn.active.used,
.type-btn.active.used:hover {
  opacity: 1;
  background: rgba(93,202,165,0.14);
  border-color: var(--success);
  color: var(--success);
}

.used-dot {
  font-size: 10px;
  margin-left: 4px;
  opacity: 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 */
}

/* ─── 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: 'Manrope', sans-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: 'Manrope', sans-serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 600;
  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(212,175,106,0.4));
  line-height: 1;
  padding-top: 4px;
}

.definition-content h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  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; }
}

/* 8 Faith-focus preview grid */
.signs-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

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

@media (min-width: 700px) {
  .signs-preview-grid { grid-template-columns: repeat(4, 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;
  padding: var(--space-lg) var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  /* overflow must NOT be hidden — tooltip needs to escape the card boundary */
}

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

.sign-preview-info {
  text-align: center;
}

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

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

.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: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

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

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

.terms-check {
  background: rgba(212,175,106,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: var(--error);
  margin-top: 5px;
  line-height: 1.4;
}

/* ─── 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(212,175,106,0.3),
    rgba(150,110,50,0.18));
  border: 1px solid rgba(212,175,106,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: orb-pulse 2s ease-in-out infinite;
  box-shadow:
    0 0 20px rgba(212,175,106,0.15),
    inset 0 0 20px rgba(212,175,106,0.08);
}

@keyframes orb-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(212,175,106,0.15), inset 0 0 20px rgba(212,175,106,0.08);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 36px rgba(212,175,106,0.30), inset 0 0 28px rgba(212,175,106,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: 'Manrope', sans-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; }
}

/* ─── Faith Profile formatted output ─────────────────────────────────────── */

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

.cosmic-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(19px, 3.4vw, 23px);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.01em;
}

.cosmic-section-header::before {
  content: "✝";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

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

.cosmic-profile-text p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 2vw, 16.5px);
  font-weight: 300;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0 0 var(--space-md) 40px;
}

.cosmic-profile-text p:last-of-type {
  margin-bottom: 0;
}

/* ─── Faith Profile enhanced formatting ──────────────────────────────────── */

.cosmic-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(21px, 4vw, 27px);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.cosmic-subtitle {
  display: inline-flex;
  align-self: center;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(12px, 2vw, 13px);
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 auto var(--space-lg);
  padding: 6px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.cosmic-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-md) 0;
}

.cosmic-divider::before,
.cosmic-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
}

.cosmic-divider span { display: none; }

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

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

/* ─── Legal pages (Terms, Privacy, Refunds, Shipping) ───────────────────── */

.legal-page {
  max-width: 100%;
  padding: var(--space-xl) var(--space-md) var(--space-2xl, 64px);
}

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

.legal-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.legal-header .btn-back-profile {
  margin-bottom: var(--space-lg);
}

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

.legal-header h1 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}

.legal-meta {
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.03em;
  margin: 0;
}

.legal-body {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.legal-body h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(17px, 3vw, 20px);
  font-weight: 600;
  color: var(--accent);
  margin: var(--space-md) 0 var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 0.5px solid var(--border);
}

.legal-body h2:first-child { margin-top: 0; }

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

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

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

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

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

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

.legal-highlight {
  background: rgba(212,175,106,0.05);
  border: 0.5px solid var(--border-hover);
  border-radius: 10px;
  padding: var(--space-md) var(--space-lg);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.legal-highlight strong { color: var(--accent); }

.legal-contact-block {
  background: rgba(212,175,106,0.05);
  border: 0.5px solid var(--border-hover);
  border-radius: 10px;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

/* Global site-footer (in MainLayout) now covers copyright + policy links for all legal pages */

/* ─── Preference dropdown selects (translation, language) ───────────────── */

.dob-select {
  width: 100%;
  padding: 13px 10px;
  padding-right: 28px;
  background: var(--bg-input);
  border: 1px solid rgba(176,143,82, 0.25);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  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='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23D4AF6A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  min-height: 52px;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.dob-select:focus {
  outline: none;
  border-color: rgba(212,175,106,0.5);
  box-shadow: 0 0 0 3px rgba(212,175,106,0.12);
}

/* Data-URI SVG can't reference CSS variables, so the arrow needs its own
   light-theme override with a darker stroke to stay visible on light bg */
:root[data-theme="light"] .dob-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239C7A3D' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Placeholder options (Day/Month/Year) in muted colour */
.dob-select option[value="0"] {
  color: var(--text-muted);
}

.dob-select option {
  background: var(--bg-input);
  color: var(--text-primary);
}

/* Match native iOS/Android picker background to the current theme */
@supports (-webkit-touch-callout: none) {
  .dob-select {
    background-color: var(--bg-input);
    color: var(--text-primary);
  }
}

/* ─── Settings page ───────────────────────────────────────────────────────── */

.settings-container {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

.settings-header {
  margin-bottom: var(--space-2xl);
}



.settings-alert {
  margin-bottom: var(--space-lg);
}

.settings-section {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.settings-section-title {
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 0.5px solid var(--border);
}

.settings-field {
  margin-bottom: var(--space-lg);
}

.settings-field label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.settings-field input[type="text"],
.settings-field input[type="email"],
.settings-field input[type="password"] {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.settings-field input:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(212,175,106,0.1);
}

.settings-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.btn-settings-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  border: none;
  color: #F3EFE6;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s;
  min-height: var(--touch-min);
  margin-top: var(--space-sm);
}

.btn-settings-save:hover:not(:disabled) { opacity: 0.85; }
.btn-settings-save:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-settings-danger {
  background: linear-gradient(135deg, #8B3A3A, #6B2020);
}

/* Nav link style */
.nav-link {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 20px;
  transition: color 0.15s, background 0.15s;
}

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

/* ─── Settings page — birth city input override ───────────────────────────── */

.settings-field input[type="search"] {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.settings-field input[type="search"]:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(212,175,106,0.1);
}

/* Remove the default search clear button on webkit */
.settings-field input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* ─── Page init loading — prevents blank flash on browser return ─────────── */

.page-init-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

/* ─── Language picker (Settings page) ───────────────────────────────────── */

.lang-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.lang-pick-btn {
  padding: 10px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  min-height: var(--touch-min);
}

.lang-pick-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.lang-pick-btn.lang-btn-active {
  background: rgba(212,175,106,0.12);
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* ─── Nav user dropdown ───────────────────────────────────────────────────── */

.nav-user-dropdown {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-user-dropdown .nav-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 24px;
  transition: background 0.15s;
  user-select: none;
}

.nav-user-dropdown .nav-user-info:hover,
.nav-user-dropdown.open .nav-user-info {
  background: rgba(212,175,106,0.1);
}

.dropdown-caret {
  font-size: 10px;
  color: var(--text-faint);
  transition: transform 0.2s;
}

.nav-user-dropdown.open .dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 0.5px solid var(--border-hover);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(212,175,106,0.1);
  overflow: hidden;
  z-index: 1000;
  animation: dropdown-in 0.15s ease;
}

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
}

.dropdown-item:hover {
  background: rgba(212,175,106,0.08);
  color: var(--text-primary);
  text-decoration: none;
}

.dropdown-icon {
  font-size: 14px;
  color: var(--text-faint);
  width: 16px;
  text-align: center;
}

.dropdown-divider {
  height: 0.5px;
  background: var(--border);
  margin: 0;
}

.dropdown-item-danger {
  color: var(--error);
}

.dropdown-item-danger:hover {
  background: rgba(216,90,48,0.08);
  color: var(--error);
}

.dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
}


/* ─── Footer policy links ─────────────────────────────────────────────────── */



/* ─── Legal page PDF download bar ────────────────────────────────────────── */

.legal-pdf-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0 var(--space-md);
  flex-wrap: wrap;
}

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

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

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



/* Print: keep legal content, hide nav/footer/buttons */
@media print {
  .top-nav, .site-footer, .page-stars,
  .legal-header .btn-back-profile, .legal-pdf-bar { display: none !important; }
  body { background: white !important; color: black !important; }
  .legal-container { max-width: 100%; }
  .legal-header h1 { color: black !important; }
  .legal-body h2 { color: #333 !important; border-color: #ccc !important; }
  .legal-body p, .legal-body li { color: #333 !important; }
  .legal-highlight { background: #f5f5f5 !important; border-color: #ccc !important; color: #333 !important; }
}


/* ─── Premium gate (paywall overlay for non-subscribers) ─────────────────── */

.premium-gate {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 220px;
}

.premium-gate-blur {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
  padding: var(--space-lg);
}

.premium-gate-blur p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0 0 var(--space-md);
}

.premium-gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: var(--space-lg);
  background: color-mix(in srgb, var(--bg-deep) 72%, transparent);
  backdrop-filter: blur(2px);
}

.premium-gate-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.premium-gate-overlay h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.premium-gate-overlay p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
  max-width: 320px;
}

.premium-gate-overlay form { margin: 0; }

/* ─── Blazor reconnect UI (shown when the SignalR connection drops) ───────── */
/* Overrides the framework's default tiny, easy-to-miss text with a full,
   impossible-to-miss overlay — this only appears when something's actually
   gone wrong (server restart, network drop), so it should be unmissable. */

#components-reconnect-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  background: color-mix(in srgb, var(--bg-deep) 95%, transparent);
  backdrop-filter: blur(4px);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  text-align: center;
  padding: 32px;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: flex;
}

#components-reconnect-modal::before {
  content: '✦';
  font-size: 32px;
  color: var(--accent);
}

#components-reconnect-modal,
#components-reconnect-modal * {
  font-size: 18px !important;
  line-height: 1.6 !important;
}

#components-reconnect-modal a {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 28px !important;
  border-radius: 24px;
  background: var(--accent);
  color: #0F1215 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#components-reconnect-modal a:hover { opacity: 0.9; }

/* ─── Cosmic Crossword ──────────────────────────────────────────────────────
   Deliberately kept in the global stylesheet rather than a scoped .razor.css
   file — this page hit a persistent Blazor scoped-CSS bundling issue where
   the compiled styles.css bundle never picked up this component's rules
   despite repeated clean rebuilds. Moving the styles here (a plain static
   file, same as everything else on the site) sidesteps that mechanism
   entirely and is confirmed working. ────────────────────────────────────── */

.xw-wrap { max-width: 480px; margin: 0 auto; padding: 24px 16px 48px; }

@media (min-width: 640px) {
  .xw-wrap { max-width: 560px; }
}

.xw-title { font-family: 'Manrope', sans-serif; font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 0; }
.xw-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 20px; }

.xw-grid {
  display: grid;
  gap: 4px;
  background: color-mix(in srgb, var(--bg-deep) 60%, transparent);
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.xw-cell-wrap { position: relative; aspect-ratio: 1; }

.xw-cell {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
}

.xw-black { background: #0A0814; }

.xw-input {
  border: 1.5px solid rgba(176,143,82,0.25);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 4vw, 20px);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  padding: 0;
  min-width: 28px;
  min-height: 28px;
}

.xw-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(212,175,106,0.08);
}

.xw-input.correct {
  background: rgba(93,202,165,0.2);
  border-color: var(--success);
  color: var(--success);
}

.xw-input.incorrect {
  background: rgba(216,90,48,0.15);
  border-color: var(--error);
  color: var(--error);
}

.xw-num {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  pointer-events: none;
  z-index: 1;
}

.xw-actions { display: flex; justify-content: center; margin-bottom: 8px; }

.xw-submit {
  padding: 11px 28px;
  border-radius: 22px;
  border: none;
  background: linear-gradient(135deg, rgba(212,175,106,0.95), #A9803F);
  color: #F3EFE6;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.xw-submit:disabled { opacity: 0.35; cursor: not-allowed; }

.xw-message {
  text-align: center;
  padding: 10px 20px;
  border-radius: 22px;
  font-size: 14px;
  margin: 0 0 16px;
}

.xw-message.error { background: rgba(216,90,48,0.1); border: 0.5px solid rgba(216,90,48,0.3); color: var(--error); }

.xw-clues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 420px) {
  .xw-clues { grid-template-columns: 1fr; }
}

.xw-clue-col h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 8px;
}

.xw-clue-col p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 8px;
}

.xw-clue-col p strong { color: var(--text-primary); }

.xw-result {
  background: var(--bg-card);
  border: 0.5px solid rgba(212,175,106,0.2);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  margin-top: 16px;
}

.xw-result-icon { font-size: 40px; display: block; margin-bottom: 12px; }
.xw-result h2 { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--accent); }
.xw-result p { font-size: 14px; color: var(--text-muted); margin: 0; }

/* Facebook's own brand blue is used deliberately here rather than the site's
   gold accent — it's what makes the button instantly recognisable as "share
   to Facebook" regardless of which theme the rest of the page is in. */
.xw-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 20px;
  border-radius: 22px;
  background: #1877F2;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  min-height: 44px;
}

.xw-share-btn:hover {
  background: #1465D8;
  text-decoration: none;
  transform: translateY(-1px);
}
