/* ─────────────────────────────────────────────────────────────────
   AETHERA · CELESTIAL ATLAS — Global App Theme
   Loads AFTER styles.css and BEFORE landing-redesign.css.
   Reflavors the entire app surface (everything outside #landing-screen).
   ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Mono:wght@300;400;500&display=swap');

/* ── 1.  TOKENS — re-route the legacy palette to Atlas ─────────── */
:root {
  /* legacy variable names that styles.css already references */
  --bg:        #07050d;          /* near-black ink cosmos */
  --card:      #110a1f;          /* card panel ink */
  --card2:     #170d28;          /* slightly lifted ink */
  --border:    rgba(201,164,92,.18);
  --border2:   rgba(201,164,92,.32);
  --text:      #f4ead6;          /* starlight ivory */
  --muted:     rgba(244,234,214,.62);
  --dim:       rgba(244,234,214,.38);

  --accent:    #c9a45c;          /* tarnished gold */
  --accent2:   #e8c97a;          /* gilt highlight */
  --gold:      #e8c97a;
  --gold-dim:  #8a6b2e;
  --rose:      #b3431f;          /* illuminated-manuscript red */
  --coral:     #d6552a;

  /* atlas-only tokens used in this file */
  --atlas-paper:    #f4ead6;
  --atlas-paper-2:  #ebdfc4;
  --atlas-ink:      #07050d;
  --atlas-ink-2:    #110a1f;
  --atlas-plum:     #1a0e2e;
  --atlas-rule:     rgba(201,164,92,.32);
  --atlas-rule-soft:rgba(201,164,92,.18);
  --atlas-ember:    #b3431f;

  --atlas-display: 'Italiana', 'Cormorant Garamond', serif;
  --atlas-serif:   'Cormorant Garamond', 'EB Garamond', serif;
  --atlas-mono:    'DM Mono', ui-monospace, monospace;
}

/* ── 2.  GLOBAL TYPOGRAPHY ─────────────────────────────────────── */
body {
  font-family: var(--atlas-serif) !important;
  background:
    radial-gradient(1100px 700px at 80% -10%, #1a0e2e 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 30%, #221538 0%, transparent 55%),
    linear-gradient(180deg, #07050d 0%, #0b0815 35%, #0e0a1e 100%) !important;
  color: var(--atlas-paper) !important;
}

h1, h2, h3, h4 {
  font-family: var(--atlas-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.005em;
}

/* legacy gradient-text headings (e.g. .intro-header h1/h2) → solid ivory */
.intro-header h1,
.intro-header h2,
.intro-header h3,
.profile-card .p-archetype,
[class*="gradient-text"],
[style*="-webkit-background-clip:text"],
[style*="-webkit-background-clip: text"] {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  color: var(--atlas-paper) !important;
  font-family: var(--atlas-display) !important;
}
.profile-card .p-archetype { color: var(--gold) !important; }
.intro-header h2, .intro-header h3 {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  letter-spacing: -.005em !important;
}

/* (Landing already has its own grain overlay; the rest of the app sits on
   the cosmic gradient + stars canvas and doesn't need a global grain layer.) */

/* ── 3.  STARS CANVAS — soften so it doesn't fight the gold ───── */
#stars-canvas { opacity: .55; }

/* ── 4.  INTRO SCREEN (full profile form) ──────────────────────── */
#intro-screen {
  background: transparent !important;
  padding: 32px 20px 48px !important;
}
.intro-inner { max-width: 560px !important; }
.intro-header { padding: 56px 0 36px !important; }
.intro-header .symbols {
  color: var(--gold) !important;
  opacity: .7 !important;
  letter-spacing: 16px !important;
}
.intro-header h1 {
  font-family: var(--atlas-display) !important;
  font-size: clamp(3rem, 8vw, 4.6rem) !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
}
.intro-header .subtitle {
  font-family: var(--atlas-serif) !important;
  color: var(--muted) !important;
  font-size: 1.2rem !important;
}

/* ── 5.  FORMS — hairline editorial inputs everywhere ─────────── */
.form-group label {
  font-family: var(--atlas-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 8px !important;
}
.form-group input,
.form-group select,
.form-group textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--atlas-rule) !important;
  border-radius: 0 !important;
  padding: 12px 4px !important;
  font-family: var(--atlas-serif) !important;
  font-size: 1.1rem !important;
  font-style: italic !important;
  color: var(--atlas-paper) !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-bottom-color: var(--gold) !important;
  outline: none !important;
  color: #fff !important;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(244,234,214,.32) !important;
  font-style: italic !important;
}
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.7) sepia(1) saturate(2) hue-rotate(5deg);
  cursor: pointer;
}

/* sublime ── question/options blocks (used on intro form) */
.question p { font-family: var(--atlas-display) !important; font-size: 1.4rem !important; color: var(--atlas-paper) !important; }
.section-label {
  font-family: var(--atlas-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .35em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  font-style: normal !important;
}
.options button {
  background: transparent !important;
  border: 1px solid var(--atlas-rule-soft) !important;
  border-radius: 0 !important;
  font-family: var(--atlas-mono) !important;
  font-size: .72rem !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--atlas-paper) !important;
  padding: 13px 10px !important;
}
.options button:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: transparent !important; }
.options button.selected {
  background: var(--atlas-paper) !important;
  border-color: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
  box-shadow: 0 0 0 1px var(--gold) inset !important;
}

/* focus pills (intro-screen) */
.focus-section p {
  font-family: var(--atlas-mono) !important;
  font-size: .7rem !important; letter-spacing: .35em !important;
  text-transform: uppercase !important; color: var(--gold) !important;
  font-style: normal !important;
}
.focus-btn {
  font-family: var(--atlas-mono) !important;
  font-size: .7rem !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid var(--atlas-rule-soft) !important;
  border-radius: 0 !important;
  color: var(--atlas-paper) !important;
  padding: 9px 16px !important;
}
.focus-btn:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
.focus-btn.selected {
  background: var(--atlas-paper) !important;
  border-color: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
  box-shadow: 0 0 0 1px var(--gold) inset !important;
}

/* primary CTA */
.cta {
  background: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
  font-family: var(--atlas-display) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  letter-spacing: .04em !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px 24px !important;
  box-shadow: 0 0 0 1px var(--gold) inset, 0 18px 40px -12px rgba(0,0,0,.5) !important;
  transition: all .3s ease !important;
}
.cta::before { content: "✦"; margin-right: 12px; color: var(--atlas-ember); font-size: .9em; }
.cta::after  { content: "✦"; margin-left:  12px; color: var(--atlas-ember); font-size: .9em; }
.cta:hover:not(:disabled) {
  background: var(--gold) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 1px var(--atlas-paper) inset, 0 22px 50px -10px rgba(232,201,122,.4) !important;
}

/* ── 6.  LANGUAGE BAR (intro + welcome) ─────────────────────────── */
.lang-bar { font-family: var(--atlas-mono) !important; gap: 6px !important; }
.lang-btn {
  background: none !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  color: var(--accent) !important;
  font-family: var(--atlas-mono) !important;
  font-size: .62rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
}
.lang-btn:hover { color: var(--gold) !important; border-color: transparent !important; }
.lang-btn.active {
  color: var(--atlas-paper) !important;
  background: transparent !important;
  border-color: var(--atlas-rule) !important;
}

/* ── 7.  AUTH MODAL ─────────────────────────────────────────────── */
.auth-overlay {
  background: rgba(7,5,13,.86) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.auth-modal {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,164,92,.08), transparent 60%),
    linear-gradient(180deg, #110a1f, #0a0613) !important;
  border: 1px solid var(--atlas-rule) !important;
  border-radius: 0 !important;
  padding: 48px 36px !important;
  max-width: 420px !important;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 30px 80px -10px rgba(0,0,0,.6);
}
.auth-modal::before, .auth-modal::after {
  content: "✶"; position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 1rem; color: var(--gold);
  background: #110a1f; padding: 0 14px;
}
.auth-modal::before { top: -.7em; }
.auth-modal::after  { bottom: -.7em; }
.auth-modal h2 {
  font-family: var(--atlas-display) !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  color: var(--atlas-paper) !important;
  margin-bottom: 8px !important;
}
.auth-modal h2::before {
  content: "BEGIN";
  display: block;
  font-family: var(--atlas-mono);
  font-size: .65rem;
  letter-spacing: .35em;
  color: var(--gold);
  margin-bottom: 14px;
}
.auth-modal .signup-only[style*="color:var(--muted)"] {
  font-family: var(--atlas-serif) !important;
  font-style: italic !important;
  font-size: 1rem !important;
  color: var(--muted) !important;
  margin-bottom: 22px !important;
}
.auth-close {
  font-family: var(--atlas-mono) !important;
  color: var(--accent) !important;
}
.auth-close:hover { color: var(--gold) !important; }

/* google button */
.auth-google-btn {
  background: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
  font-family: var(--atlas-mono) !important;
  font-size: .75rem !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  box-shadow: 0 0 0 1px var(--gold) inset !important;
}
.auth-google-btn:hover { background: var(--gold) !important; }
.auth-google-btn svg { width: 18px; height: 18px; margin-right: 10px; }

/* divider */
.auth-divider {
  font-family: var(--atlas-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .35em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin: 22px 0 !important;
  position: relative;
}
.auth-divider::before, .auth-divider::after {
  content: ""; position: absolute; top: 50%; height: 1px;
  background: var(--atlas-rule);
  width: 38%;
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }

/* submit + alt link */
.auth-submit {
  background: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
  font-family: var(--atlas-display) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 16px 24px !important;
  margin-top: 12px !important;
  box-shadow: 0 0 0 1px var(--gold) inset !important;
  transition: all .3s ease !important;
}
.auth-submit:hover { background: var(--gold) !important; }
.auth-toggle {
  font-family: var(--atlas-serif) !important;
  font-style: italic !important;
  color: var(--muted) !important;
  font-size: 1rem !important;
  margin-top: 18px !important;
}
.auth-toggle a {
  color: var(--gold) !important;
  border-bottom: 1px solid var(--gold-dim) !important;
  text-decoration: none !important;
}
.auth-toggle a:hover { color: var(--atlas-paper) !important; border-bottom-color: var(--atlas-paper) !important; }
.auth-error {
  font-family: var(--atlas-mono) !important;
  font-size: .7rem !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--rose) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 12px !important;
  min-height: 20px !important;
}
.auth-error:not(:empty) {
  border: 1px solid var(--rose) !important;
  padding: 10px 12px !important;
}

/* ── 8.  LOADING SCREEN — orb → rotating zodiac wheel ─────────── */
#loading-screen { background: transparent !important; }
.loading-orb {
  width: 220px !important;
  height: 220px !important;
  border-radius: 0 !important;
  background: url("/v1/aethera/assets/atlas-celestial") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 60px rgba(232,201,122,.25)) drop-shadow(0 0 120px rgba(201,164,92,.15));
  animation: atlasSpin 30s linear infinite !important;
  margin-bottom: 40px !important;
}
@keyframes atlasSpin { to { transform: rotate(360deg); } }
.loading-text {
  font-family: var(--atlas-serif) !important;
  font-style: italic !important;
  font-size: 1.3rem !important;
  color: var(--muted) !important;
  max-width: 380px !important;
}
.loading-text::before {
  content: "✶ ✶ ✶";
  display: block;
  font-family: var(--atlas-display);
  color: var(--gold);
  letter-spacing: .8em;
  margin-bottom: 18px;
  font-size: .9rem;
  font-style: normal;
  text-align: center;
  padding-left: .8em;
}
@media (prefers-reduced-motion: reduce) { .loading-orb { animation: none !important; } }

/* ── 9.  RESULTS SCREEN SHELL ───────────────────────────────────── */
#results-screen { background: transparent !important; }

/* bottom nav — editorial mono labels */
.bottom-nav {
  background: rgba(7,5,13,.92) !important;
  border-top: 1px solid var(--atlas-rule) !important;
  padding-top: 10px !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom,0px)) !important;
}
.nav-btn {
  font-family: var(--atlas-mono) !important;
  font-size: .55rem !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  opacity: .75 !important;
}
.nav-btn .nav-icon {
  font-size: 1.15rem !important;
  filter: grayscale(.6) brightness(1.1);
}
.nav-btn:hover, .nav-btn.active { color: var(--gold) !important; opacity: 1 !important; }
.nav-btn.active .nav-icon { filter: none; }

/* sub-nav — letterpress tabs */
.sub-nav {
  background: rgba(7,5,13,.92) !important;
  border-bottom: 1px solid var(--atlas-rule) !important;
  padding: 0 14px !important;
}
.sub-btn {
  font-family: var(--atlas-mono) !important;
  font-size: .68rem !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  padding: 14px 14px !important;
  border-bottom-width: 1px !important;
}
.sub-btn:hover { color: var(--gold) !important; }
.sub-btn.active {
  color: var(--atlas-paper) !important;
  border-bottom-color: var(--gold) !important;
}

/* ── 10. CARDS / SECTIONS / EXPANDABLES ──────────────────────── */
.div-section {
  background: rgba(244,234,214,.025) !important;
  border: 1px solid var(--atlas-rule-soft) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}
.div-section h3, .div-section h4 {
  font-family: var(--atlas-display) !important;
  color: var(--atlas-paper) !important;
}
.div-section.learn-more {
  background: rgba(244,234,214,.02) !important;
  border-color: var(--atlas-rule) !important;
}
.div-section p { font-family: var(--atlas-serif) !important; }

/* expandable accordions */
.expand-section {
  background: rgba(244,234,214,.025) !important;
  border: 1px solid var(--atlas-rule-soft) !important;
  border-radius: 0 !important;
}
.expand-header .eh-title {
  font-family: var(--atlas-display) !important;
  font-size: 1.25rem !important;
  color: var(--atlas-paper) !important;
}
.expand-header .eh-arrow { color: var(--gold) !important; }

/* profile card — the centerpiece reveal */
.profile-card {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,164,92,.10), transparent 60%),
    linear-gradient(180deg, #140b27, #0a0612) !important;
  border: 1px solid var(--atlas-rule) !important;
  border-radius: 0 !important;
  padding: 44px 28px !important;
}
.profile-card::before {
  content: "✶" !important;
  position: absolute !important;
  inset: auto !important;
  top: -.7em !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  background: #0a0612 !important;
  font-size: 1rem !important;
  color: var(--gold) !important;
  padding: 0 14px !important;
  z-index: 2 !important;
  pointer-events: none;
}
.profile-card .p-name {
  font-family: var(--atlas-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .35em !important;
  color: var(--gold) !important;
}
.profile-card .p-archetype {
  font-family: var(--atlas-display) !important;
  font-size: 2.4rem !important;
  color: var(--gold) !important;
}
.profile-card .p-tagline {
  font-family: var(--atlas-serif) !important;
  color: var(--muted) !important;
}
.sign-item .s-label {
  font-family: var(--atlas-mono) !important;
  font-size: .55rem !important;
  letter-spacing: .25em !important;
  color: var(--accent) !important;
}
.sign-item .s-value {
  font-family: var(--atlas-display) !important;
  font-size: 1.1rem !important;
  color: var(--atlas-paper) !important;
}

/* tension / shock / today reveal cards */
.card-tension .tension-label,
.card-today .today-label,
.card-shock .shock-attr {
  font-family: var(--atlas-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .35em !important;
  color: var(--gold) !important;
}
.card-tension .tension-text,
.card-shock .shock-text,
.today-text {
  font-family: var(--atlas-display) !important;
  color: var(--atlas-paper) !important;
}
.card-shock .shock-text {
  font-style: italic;
  font-family: var(--atlas-serif) !important;
  color: var(--gold) !important;
}

/* full reading focus card */
.focus-card {
  background: rgba(244,234,214,.03) !important;
  border: 1px solid var(--atlas-rule) !important;
  border-radius: 0 !important;
}
.focus-card .focus-label {
  font-family: var(--atlas-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .35em !important;
  color: var(--gold) !important;
}
.focus-card .focus-body {
  font-family: var(--atlas-serif) !important;
  font-style: italic;
}
.reading-block .reading-text {
  font-family: var(--atlas-serif) !important;
  font-size: 1.1rem !important;
}

/* ── 11. PALM, TAROT, BIO ──────────────────────────────────────── */
.palm-upload-zone {
  border: 1px dashed var(--atlas-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.palm-upload-zone:hover { border-color: var(--gold) !important; background: rgba(201,164,92,.04) !important; }
.palm-upload-zone .puz-text { font-family: var(--atlas-serif) !important; font-style: italic !important; color: var(--muted) !important; }
.palm-upload-zone .puz-hint { font-family: var(--atlas-mono) !important; font-size: .65rem !important; letter-spacing: .25em !important; text-transform: uppercase !important; color: var(--accent) !important; }
.palm-preview img { border: 1px solid var(--atlas-rule) !important; border-radius: 0 !important; }
.palm-loading .pl-orb {
  background: url("/v1/aethera/assets/atlas-celestial") center / contain no-repeat !important;
  border-radius: 0 !important;
  animation: atlasSpin 30s linear infinite !important;
  filter: drop-shadow(0 0 20px rgba(232,201,122,.3));
}
.palm-detail { background: rgba(244,234,214,.025) !important; border: 1px solid var(--atlas-rule-soft) !important; border-radius: 0 !important; }

/* tarot */
.tarot-card-face { border: 1px solid var(--gold-dim) !important; border-radius: 0 !important; }
.tarot-card-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(201,164,92,.12), transparent 70%),
    linear-gradient(135deg, #170d28, #0a0612) !important;
}
.tarot-card-back::before { border: 1px solid var(--gold) !important; border-radius: 0 !important; opacity: .5 !important; }
.tarot-card-back .tcb-symbol { color: var(--gold) !important; }
.tarot-card-back .tcb-pattern { border: 1px solid var(--gold-dim) !important; opacity: .4 !important; }
.tarot-card-front { background: linear-gradient(180deg, #140b27, #0a0612) !important; }
.tcl-position {
  font-family: var(--atlas-mono) !important;
  letter-spacing: .25em !important;
  color: var(--gold) !important;
}
.tcl-name { font-family: var(--atlas-display) !important; color: var(--atlas-paper) !important; }
.tarot-draw-btn {
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  color: var(--gold) !important;
  font-family: var(--atlas-display) !important;
  font-size: 1.2rem !important;
}
.tarot-draw-btn:hover { background: rgba(201,164,92,.06) !important; }
.tarot-spread-option {
  background: transparent !important;
  border: 1px solid var(--atlas-rule-soft) !important;
  border-radius: 0 !important;
}
.tarot-spread-option:hover { border-color: var(--gold) !important; background: rgba(201,164,92,.04) !important; }
.tarot-spread-option.selected {
  background: rgba(232,201,122,.06) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold) inset !important;
}
.tso-name { font-family: var(--atlas-display) !important; }
.tso-cards {
  font-family: var(--atlas-mono) !important;
  letter-spacing: .25em !important;
  background: transparent !important;
  border: 1px solid var(--atlas-rule-soft);
  border-radius: 0 !important;
}

/* biorhythm bars */
.bio-ring .ring-label {
  font-family: var(--atlas-mono) !important;
  font-size: .6rem !important;
  letter-spacing: .25em !important;
  color: var(--accent) !important;
}
.bio-bar .bar-label {
  font-family: var(--atlas-mono) !important;
  letter-spacing: .25em !important;
  color: var(--accent) !important;
}

/* ── 12. UPGRADE / SHARE MODALS ────────────────────────────────── */
.upgrade-modal, .share-modal,
.modal, [class*="modal-"]:not(.auth-modal) {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,164,92,.08), transparent 60%),
    linear-gradient(180deg, #110a1f, #0a0613) !important;
  border: 1px solid var(--atlas-rule) !important;
  border-radius: 0 !important;
}
.upgrade-btn {
  background: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--atlas-display) !important;
  font-size: 1.2rem !important;
  box-shadow: 0 0 0 1px var(--gold) inset !important;
}
.upgrade-btn:hover { background: var(--gold) !important; }

/* ── 13. SIGNUP BANNER (top bar) ──────────────────────────────── */
.signup-banner {
  background: rgba(7,5,13,.92) !important;
  border-bottom: 1px solid var(--atlas-rule) !important;
  font-family: var(--atlas-mono) !important;
  font-size: .68rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
}
.signup-banner .sb-signin {
  font-family: var(--atlas-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .25em !important;
  border: 1px solid var(--atlas-rule) !important;
  border-radius: 0 !important;
  color: var(--gold) !important;
}
.signup-banner .sb-signin:hover { color: var(--atlas-paper) !important; border-color: var(--gold) !important; }

/* ── 14. WELCOME-BACK SCREEN ───────────────────────────────────── */
#welcome-screen { background: transparent !important; }
.wb-inner, .welcome-inner { max-width: 560px !important; }
.wb-greeting {
  font-family: var(--atlas-display) !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  font-weight: 400 !important;
  color: var(--atlas-paper) !important;
  margin-bottom: 12px !important;
}
.wb-signs {
  font-family: var(--atlas-serif) !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  color: var(--muted) !important;
}
.wb-cta {
  background: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
  font-family: var(--atlas-display) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px 24px !important;
  box-shadow: 0 0 0 1px var(--gold) inset, 0 14px 36px -12px rgba(0,0,0,.5) !important;
  transition: all .3s ease !important;
}
.wb-cta::before { content: "✦"; margin-right: 12px; color: var(--atlas-ember); font-size: .9em; }
.wb-cta::after  { content: "✦"; margin-left:  12px; color: var(--atlas-ember); font-size: .9em; }
.wb-cta:hover { background: var(--gold) !important; box-shadow: 0 0 0 1px var(--atlas-paper) inset, 0 18px 40px -10px rgba(232,201,122,.45) !important; transform: translateY(-1px) !important; }
.wb-cta-secondary {
  background: transparent !important;
  border: 1px solid var(--atlas-rule) !important;
  border-radius: 0 !important;
  color: var(--atlas-paper) !important;
  font-family: var(--atlas-mono) !important;
  font-size: .8rem !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
}
.wb-cta-secondary:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
.wb-links a {
  font-family: var(--atlas-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--atlas-rule-soft) !important;
  padding-bottom: 2px;
}
.wb-links a:hover { color: var(--gold) !important; border-bottom-color: var(--gold) !important; }
.wb-profile-card {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,164,92,.08), transparent 60%),
    rgba(244,234,214,.025) !important;
  border: 1px solid var(--atlas-rule) !important;
  border-radius: 0 !important;
  padding: 28px 20px !important;
  margin-bottom: 20px !important;
  position: relative;
}
/* circular hero img on welcome → keep round but recolor border to gold */
.hero-image img {
  border: 1px solid var(--gold) !important;
  box-shadow: 0 0 60px rgba(232,201,122,.25), 0 0 100px rgba(201,164,92,.15) !important;
}

/* (Sky map moved out of the welcome hero into Explore › Sky Map tab.) */
.natal-chart .nc-ring,
.natal-chart .nc-ring-inner {
  fill: none;
  stroke: rgba(232,201,122,.55);
  stroke-width: .6;
}
.natal-chart .nc-ring-inner { stroke: rgba(232,201,122,.25); stroke-width: .4; }
.natal-chart .nc-tick {
  stroke: rgba(232,201,122,.45);
  stroke-width: .4;
}
.natal-chart .nc-zodiac {
  fill: var(--gold);
  font-size: 8px;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: 'DM Mono', monospace;
}
.natal-chart .nc-planet {
  fill: var(--atlas-paper);
  font-size: 9px;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: 'DM Mono', monospace;
  filter: drop-shadow(0 0 3px rgba(232,201,122,.6));
}
.natal-chart .nc-asc {
  fill: var(--atlas-ember);
  filter: drop-shadow(0 0 4px rgba(214,85,42,.6));
}
.natal-chart .nc-center {
  fill: var(--gold);
  filter: drop-shadow(0 0 6px rgba(232,201,122,.8));
}
/* House cusp lines */
.natal-chart .nc-cusp {
  stroke: rgba(232,201,122,.22);
  stroke-width: .35;
}
.natal-chart .nc-cusp-angular {
  stroke: rgba(232,201,122,.55);
  stroke-width: .7;
}
.natal-chart .nc-house-num {
  fill: rgba(232,201,122,.55);
  font-size: 4.5px;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: 'DM Mono', monospace;
  letter-spacing: .04em;
}
/* Aspect lines — color-coded by aspect family */
.natal-chart .nc-aspect {
  fill: none;
  stroke-width: .4;
  opacity: .55;
}
.natal-chart .nc-aspect-conjunction { stroke: rgba(232,201,122,.55); stroke-dasharray: 1.5 1; }
.natal-chart .nc-aspect-trine       { stroke: #5fb6c4; }                 /* harmonious — cyan */
.natal-chart .nc-aspect-sextile     { stroke: #8ec47a; stroke-dasharray: 2 1; }  /* harmonious — soft green */
.natal-chart .nc-aspect-square      { stroke: #d6552a; }                 /* tense — ember */
.natal-chart .nc-aspect-opposition  { stroke: #c4445a; stroke-dasharray: 3 1.5; }/* tense — crimson */
/* Retrograde planets ride dimmer with a faint red halo */
.natal-chart .nc-planet-group.retro .nc-planet {
  fill: #f6c1a2;
  filter: drop-shadow(0 0 3px rgba(214,85,42,.55));
}
.natal-chart .nc-planet-group:hover .nc-planet {
  fill: #fff;
  filter: drop-shadow(0 0 6px rgba(232,201,122,.9));
  cursor: help;
}
/* ── Sky Map tab pane ───────────────────────────────────────── */
.skymap-pane { max-width: 720px !important; }
.skymap-host {
  width: 100%; max-width: 600px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #140b27 0%, #07050d 80%);
  border: 1px solid var(--gold);
  box-shadow: 0 0 80px rgba(232,201,122,.20), 0 0 160px rgba(201,164,92,.12);
  position: relative;
}
.skymap-host.has-natal-chart svg.natal-chart {
  width: 100%; height: 100%;
}
/* Bump in-SVG font sizes for legibility at 600px */
.skymap-host .natal-chart .nc-zodiac { font-size: 10px; }
.skymap-host .natal-chart .nc-planet { font-size: 11px; }
.skymap-host .natal-chart .nc-house-num { font-size: 5.5px; }
.skymap-loading,
.skymap-empty {
  color: var(--muted);
  text-align: center;
  font-family: var(--atlas-serif);
  font-size: .95rem;
  padding: 32px 16px;
}
.skymap-empty-glyph {
  font-size: 2rem; color: var(--gold); margin-bottom: 10px;
  filter: drop-shadow(0 0 8px rgba(232,201,122,.5));
}
.skymap-meta {
  max-width: 380px; margin: 0 auto 20px;
}
.skymap-bigthree {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 10px;
}
.skymap-bigthree > div {
  text-align: center;
  padding: 8px 4px;
  border: 1px solid var(--atlas-rule-soft);
  border-radius: 6px;
  background: rgba(20,11,39,.45);
}
.skymap-bigthree span {
  display: block;
  font-family: var(--atlas-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.skymap-bigthree strong {
  font-family: var(--atlas-display);
  font-size: 1rem;
  color: var(--gold);
  font-weight: 400;
}
.skymap-birthline {
  text-align: center;
  font-family: var(--atlas-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}
.skymap-warn {
  margin-top: 10px;
  text-align: center;
  font-size: .78rem;
  color: var(--rose);
  font-style: italic;
}
/* Positions + aspects sections */
.skymap-positions, .skymap-aspects {
  margin: 18px auto 0;
  max-width: 600px;
  padding: 18px 16px;
  border: 1px solid var(--atlas-rule-soft);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,11,39,.55), rgba(7,5,13,.55));
}
.skymap-positions h4, .skymap-aspects h4 {
  font-family: var(--atlas-display);
  font-size: 1.05rem;
  color: var(--gold);
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: .04em;
}
.positions-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--atlas-mono);
  font-size: .82rem;
  color: var(--text);
}
.positions-table thead th {
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  padding: 4px 6px;
  border-bottom: 1px solid var(--atlas-rule-soft);
  text-align: left;
}
.positions-table tbody td {
  padding: 7px 6px;
  border-bottom: 1px solid rgba(232,201,122,.08);
}
.positions-table tbody tr:last-child td { border-bottom: none; }
.positions-table .pos-glyph {
  width: 24px; font-size: 1.05rem; color: var(--gold);
  text-align: center;
}
.positions-table .pos-name { color: var(--accent2); }
.positions-table .pos-deg { color: var(--text); font-variant-numeric: tabular-nums; }
.positions-table .pos-house {
  width: 50px; text-align: center; color: var(--gold-dim); letter-spacing: .08em;
}
.positions-table .pos-flags { width: 24px; text-align: center; }
.positions-table .pos-retro { color: #f6c1a2; font-weight: 600; }
.positions-table tr.pos-axis td { color: var(--accent2); font-style: italic; }
.positions-table tr.pos-axis .pos-glyph { color: var(--atlas-ember); }
/* Aspects list */
.aspects-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 6px;
}
.aspects-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(7,5,13,.4);
  font-size: .84rem;
  font-family: var(--atlas-mono);
  border-left: 3px solid var(--gold-dim);
}
.aspects-list .asp-pair { color: var(--text); }
.aspects-list .asp-pair em { font-style: normal; color: var(--accent2); }
.aspects-list .asp-kind {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.aspects-list .asp-orb {
  font-variant-numeric: tabular-nums;
  color: var(--gold-dim);
  font-size: .78rem;
}
.aspects-list .asp-conjunction { border-left-color: rgba(232,201,122,.7); }
.aspects-list .asp-trine       { border-left-color: #5fb6c4; }
.aspects-list .asp-sextile     { border-left-color: #8ec47a; }
.aspects-list .asp-square      { border-left-color: #d6552a; }
.aspects-list .asp-opposition  { border-left-color: #c4445a; }
/* Explainer copy block */
.skymap-explainer {
  margin-top: 8px;
  padding: 22px 18px;
  border: 1px solid var(--atlas-rule-soft);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(26,14,46,.55), rgba(7,5,13,.55));
}
.skymap-explainer h4 {
  font-family: var(--atlas-display);
  font-size: 1.25rem;
  color: var(--gold);
  text-align: center;
  margin: 0 0 14px;
  letter-spacing: .03em;
}
.skymap-explainer p {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 14px;
}
.skymap-explainer .highlight {
  color: var(--gold);
  font-style: italic;
}
.skymap-legend {
  list-style: none;
  padding: 0;
  margin: 10px 0 14px;
  display: grid;
  gap: 10px;
}
.skymap-legend li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text);
}
.skymap-legend strong { color: var(--gold); font-weight: 500; }
.skymap-legend .leg-dot {
  flex: 0 0 12px; width: 12px; height: 12px; margin-top: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(232,201,122,.55);
}
.skymap-legend .leg-asc   { background: var(--atlas-ember); box-shadow: 0 0 6px rgba(214,85,42,.6); }
.skymap-legend .leg-cusp  { background: rgba(232,201,122,.45); box-shadow: none; border: 1px solid var(--gold); }
.skymap-legend .leg-trine { background: linear-gradient(90deg, #5fb6c4 0%, #8ec47a 100%); box-shadow: 0 0 6px rgba(95,182,196,.5); }
.skymap-legend .leg-retro { background: #f6c1a2; box-shadow: 0 0 6px rgba(214,85,42,.4); }
.skymap-note {
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
  margin: 14px 0 0;
}
.skymap-note a { color: var(--gold); text-decoration: underline dotted; }
.wb-tier-badge {
  font-family: var(--atlas-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--atlas-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gold) !important;
  padding: 6px 14px !important;
}
.welcome-focus-btn {
  font-family: var(--atlas-mono) !important;
  font-size: .68rem !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid var(--atlas-rule-soft) !important;
  border-radius: 0 !important;
  color: var(--atlas-paper) !important;
}
.welcome-focus-btn:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
.welcome-focus-btn.selected {
  background: var(--atlas-paper) !important;
  border-color: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
}

/* ── 15. SETTINGS PANE ─────────────────────────────────────────── */
.settings-section {
  background: rgba(244,234,214,.025) !important;
  border: 1px solid var(--atlas-rule-soft) !important;
  border-radius: 0 !important;
}
.settings-btn,
.settings-btn-secondary {
  border-radius: 0 !important;
  font-family: var(--atlas-mono) !important;
  font-size: .72rem !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
}
.settings-btn {
  background: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px var(--gold) inset !important;
}
.settings-btn-secondary {
  background: transparent !important;
  border: 1px solid var(--atlas-rule) !important;
  color: var(--atlas-paper) !important;
}

/* ── 16. CHAT BUBBLES ──────────────────────────────────────────── */
.chat-bubble.user, .chat-bubble.assistant, .chat-bubble {
  border-radius: 0 !important;
}
.chat-bubble.user {
  background: rgba(201,164,92,.10) !important;
  border: 1px solid var(--atlas-rule) !important;
  color: var(--atlas-paper) !important;
}
.chat-bubble.assistant {
  background: rgba(244,234,214,.025) !important;
  border: 1px solid var(--atlas-rule-soft) !important;
  color: var(--atlas-paper) !important;
  font-family: var(--atlas-serif) !important;
  font-size: 1.05rem !important;
}
.chat-input, #chatInput {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--atlas-rule) !important;
  border-radius: 0 !important;
  font-family: var(--atlas-serif) !important;
  font-style: italic;
  color: var(--atlas-paper) !important;
}
.chat-send {
  background: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--atlas-mono) !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
}

/* ── 16b. ATLAS PERSONALIZATION ORNAMENTS ─────────────────────── */

/* Zodiac archetype portrait inside the profile card */
.profile-card .profile-archetype-img {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold);
  box-shadow:
    0 0 0 4px rgba(11,8,21,.6),
    0 0 60px rgba(232,201,122,.25),
    0 0 120px rgba(201,164,92,.15);
  position: relative;
  z-index: 1;
  transition: filter .9s ease, box-shadow .9s ease;
}
.profile-card .profile-archetype-img.is-personal {
  /* subtle "this one is yours" amplification when the personalised
     VisionSmith portrait swaps in over the generic zodiac ornament */
  box-shadow:
    0 0 0 4px rgba(11,8,21,.6),
    0 0 80px rgba(232,201,122,.45),
    0 0 160px rgba(201,164,92,.30);
  filter: saturate(1.05);
}
.profile-card .profile-archetype-caption {
  text-align: center;
  font-family: var(--atlas-mono);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: -8px auto 14px;
  position: relative;
  z-index: 2;
  opacity: .85;
}
/* Share buttons under the cosmic card */
.cosmic-card-share {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px auto 0;
  flex-wrap: wrap;
}
.cosmic-card-share .ccs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #1a0e2e;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: var(--atlas-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 0 18px rgba(232,201,122,.18);
}
.cosmic-card-share .ccs-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(232,201,122,.4);
  filter: brightness(1.06);
}
.cosmic-card-share .ccs-btn:active {
  transform: translateY(0);
  filter: brightness(.95);
}
.cosmic-card-share .ccs-btn-ghost {
  background: transparent;
  color: var(--gold);
  box-shadow: none;
}
.cosmic-card-share .ccs-btn-ghost:hover {
  background: rgba(232,201,122,.08);
  box-shadow: 0 0 18px rgba(232,201,122,.18);
}
.cosmic-card-share .ccs-icon { font-size: 1.05rem; line-height: 1; }
/* Facebook variant — official brand blue */
.cosmic-card-share .ccs-btn-fb {
  background: #1877f2;
  color: #fff;
  border-color: #1877f2;
  box-shadow: 0 0 18px rgba(24,119,242,.25);
}
.cosmic-card-share .ccs-btn-fb:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 28px rgba(24,119,242,.45);
}
.cosmic-card-share .ccs-icon-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: #fff;
  color: #1877f2;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: .9rem;
  font-style: italic;
  line-height: 1;
}

/* Wrappers used as html2canvas capture targets — give them their own soft
   background and rounded edge so the exported image looks polished even
   when the surrounding page chrome is cropped out. */
#skymap-shareable {
  padding: 18px 16px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,11,39,.65), rgba(7,5,13,.65));
  border: 1px solid var(--atlas-rule-soft);
}
.skymap-share-mark,
.today-share-mark {
  text-align: center;
  font-family: var(--atlas-mono);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .7;
  margin-top: 12px;
}
#todayCard {
  padding: 18px 16px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,11,39,.65), rgba(7,5,13,.65));
  border: 1px solid var(--atlas-rule-soft);
}
/* Reading card (Full Reading tab → shareable container) */
#readingCard {
  padding: 22px 18px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,11,39,.65), rgba(7,5,13,.65));
  border: 1px solid var(--atlas-rule-soft);
  margin-top: 12px;
}
.reading-card-head {
  text-align: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--atlas-rule-soft);
}
.reading-card-head .rc-name {
  font-family: var(--atlas-mono);
  font-size: .7rem;
  letter-spacing: .26em;
  color: var(--accent2);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.reading-card-head .rc-archetype {
  font-family: var(--atlas-display);
  font-size: 1.35rem;
  color: var(--gold);
  letter-spacing: .03em;
}
.reading-share-mark {
  text-align: center;
  font-family: var(--atlas-mono);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .7;
  margin-top: 16px;
}
.profile-card .profile-archetype-caption::before,
.profile-card .profile-archetype-caption::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin: 0 8px;
  opacity: .55;
}

/* Numerology life path sigil */
.lp-sigil-wrap {
  text-align: center;
  margin: 8px 0 28px;
}
.lp-sigil {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: contain;
  margin: 0 auto 14px;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.45));
}
.lp-sigil-caption {
  font-family: var(--atlas-mono);
  font-size: .68rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
}
.lp-sigil-caption span {
  font-family: var(--atlas-display);
  font-size: 1.6rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--atlas-paper);
  margin-left: 8px;
  vertical-align: -.15em;
}

/* Aura color medallion */
.aura-medallion-wrap {
  text-align: center;
  margin: 4px 0 24px;
}
.aura-medallion {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.5));
}

/* ── 16c. TAROT CARD BACK — custom illuminated design ─────────── */
.tarot-card-back {
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.15)),
    url("/v1/aethera/assets/tarot-back") center / cover no-repeat !important;
}
.tarot-card-back::before { display: none !important; }
.tarot-card-back .tcb-pattern,
.tarot-card-back .tcb-symbol { display: none !important; }

/* ── 16d. CHAT ORACLE HEADER ───────────────────────────────────── */
#tab-chat .chat-header { text-align: center; }
#tab-chat .chat-header::before {
  content: "";
  display: block;
  width: 96px;
  height: 96px;
  margin: 12px auto 14px;
  background: url("/v1/aethera/assets/chat-oracle") center / contain no-repeat;
  filter: drop-shadow(0 4px 18px rgba(232,201,122,.25));
}

/* ── 16e. TODAY/TRANSIT MEDALLION ───────────────────────────── */
#tab-today h2::before {
  content: "";
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto 14px;
  background: url("/v1/aethera/assets/today-transit") center / contain no-repeat;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
}

/* ── 16f. WAX SEAL on auth modal heading ───────────────────────── */
.auth-modal h2 {
  position: relative;
}
/* keep existing BEGIN kicker, append a wax seal at top of modal */
.auth-modal::before {
  content: "" !important;
  width: 56px !important;
  height: 56px !important;
  background: url("/v1/aethera/assets/wax-seal") center / contain no-repeat !important;
  position: absolute !important;
  top: -28px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 0 !important;
  font-size: 0 !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.6));
}

/* ── 16g. MANUSCRIPT DIVIDERS ─────────────────────────────────── */
.atlas-divider {
  height: 80px;
  margin: 24px auto;
  max-width: 600px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .9;
}
.atlas-divider.d-1 { background-image: url("/v1/aethera/assets/divider-1"); }
.atlas-divider.d-2 { background-image: url("/v1/aethera/assets/divider-2"); }
.atlas-divider.d-3 { background-image: url("/v1/aethera/assets/divider-3"); }

/* ── 17. UTILITY OVERRIDES — anything still rounded/gradient-y ── */
button, input, select, textarea { border-radius: 0; }
[style*="border-radius:12px"], [style*="border-radius:14px"],
[style*="border-radius:16px"], [style*="border-radius:24px"] {
  border-radius: 0 !important;
}
[style*="background:linear-gradient(135deg,var(--accent)"],
[style*="background:linear-gradient(135deg, var(--accent)"] {
  background: var(--atlas-paper) !important;
  color: var(--atlas-ink) !important;
}

/* ── 18. SAFE-AREA TWEAKS for landing — avoid grain double-up ── */
#landing-screen ~ * { /* not a real selector for cascade — kept as marker */ }