/* ==========================================================================
   Divine Counsel - Core Design System & Styles
   ========================================================================== */

/* Design Tokens & Theme Variables */
:root {
  --color-bg-space: #05040a;
  --color-bg-deep: #0a081c;
  --color-bg-card: rgba(15, 12, 34, 0.45);
  --color-bg-card-hover: rgba(22, 18, 48, 0.65);
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(212, 175, 55, 0.25);
  
  /* Deity Accents & Metallic Swarna */
  --color-gold: #d4af37;
  --color-gold-glow: rgba(212, 175, 55, 0.18);
  --color-saffron: #f25e1c;
  --color-saffron-glow: rgba(242, 94, 28, 0.2);
  
  /* Text Tones (Chandan & White) */
  --color-text-primary: #f8f9fa;
  --color-text-secondary: #c7c7db;
  --color-text-muted: #9a9ab8; /* lifted from #7d7d9e → AA (≥4.5:1) on dark themes; every light theme overrides this token */

  /* Guna Colors */
  --color-sattva: #10b981;
  --color-rajas: #f59e0b;
  --color-tamas: #938d86; /* lifted from #6b7280 → AA (≥4.5:1) muted stone on dark themes; light themes override to #57534e */
  
  /* Fonts */
  --font-divine: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;
  --font-sanskrit: 'Yatra One', cursive;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout & Input Variables for Light/Dark Switch */
  --color-bg-header: rgba(12, 11, 30, 0.75);
  --color-bg-hover: rgba(255, 255, 255, 0.04);
  --color-bg-input: rgba(18, 16, 38, 0.85);
  --color-border-input: rgba(255, 255, 255, 0.1);
  --color-bg-select: rgba(12, 11, 30, 0.9);
  --chat-card-bg: rgba(255, 255, 255, 0.03);

  /* Button-tier size tokens */
  --btn-pad-sm: 0.35rem 0.75rem;
  --btn-pad-md: 0.55rem 1.1rem;
  --btn-pad-lg: 0.75rem 1.5rem;
  --btn-min-touch: 44px; /* WCAG 2.5.5 minimum touch target */

  /* Icon size token */
  --icon-sm: 16px;
}

/* Shared compositor-only glow pulse: shadows stay static (painted once),
   only element/pseudo opacity animates — never box-shadow/text-shadow/filter. */
@keyframes glowFade {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

/* Toggled by an IntersectionObserver on [data-anim-pause] containers so
   infinite glow loops stop burning compositor/paint time while offscreen. */
.offscreen-paused,
.offscreen-paused * {
  animation-play-state: paused;
}

/* ==========================================================================
   Vedic / Hindu Methodology Themes (Global Variables)
   ========================================================================== */

/* Theme 1: Cosmic Shyama (Krishna Blue & Peacock Teal) */
body.theme-cosmic:not(.high-contrast-theme) {
  --color-bg-space: #030208;
  --color-bg-deep: #080516;
  --color-bg-card: rgba(13, 9, 31, 0.45);
  --color-bg-card-hover: rgba(20, 14, 46, 0.65);
  --color-border: rgba(0, 229, 255, 0.08);
  --color-border-hover: rgba(0, 229, 255, 0.3);
  --color-gold: #00e5ff;
  --color-gold-glow: rgba(0, 229, 255, 0.2);
  --color-saffron: #d4af37;
  --color-saffron-glow: rgba(212, 175, 55, 0.18);
}

/* Theme 2: Sattva Chandan & Harita (Sandalwood & Tulsi Green) */
body.theme-himalaya:not(.high-contrast-theme) {
  --color-bg-space: #060b09;
  --color-bg-deep: #0c1411;
  --color-bg-card: rgba(15, 27, 22, 0.45);
  --color-bg-card-hover: rgba(22, 38, 32, 0.65);
  --color-border: rgba(16, 185, 129, 0.08);
  --color-border-hover: rgba(16, 185, 129, 0.3);
  --color-gold: #10b981;
  --color-gold-glow: rgba(16, 185, 129, 0.18);
  --color-text-secondary: #e6d3b3;
}

/* Theme 3: Shakti Crimson & Sindoor (Vermilion & Amber) */
body.theme-sunset:not(.high-contrast-theme) {
  --color-bg-space: #080204;
  --color-bg-deep: #140509;
  --color-bg-card: rgba(28, 9, 14, 0.45);
  --color-bg-card-hover: rgba(39, 14, 20, 0.65);
  --color-border: rgba(229, 57, 53, 0.08);
  --color-border-hover: rgba(229, 57, 53, 0.3);
  --color-gold: #ffb300;
  --color-gold-glow: rgba(255, 179, 0, 0.2);
  --color-saffron: #e53935;
  --color-saffron-glow: rgba(229, 57, 53, 0.2);
}

/* Theme 4: Saffron & Swarna (Bhagwa & Gold - Light Vibrant Theme) */
body.theme-golden:not(.high-contrast-theme) {
  --color-bg-space: #fff7f2;
  --color-bg-deep: #ffece0;
  --color-bg-card: rgba(255, 255, 255, 0.75);
  --color-bg-card-hover: rgba(255, 255, 255, 0.9);
  --color-border: rgba(242, 94, 28, 0.15);
  --color-border-hover: rgba(212, 175, 55, 0.4);
  --color-gold: #856411; /* deep bhagwa-gold — AA-compliant (≥4.5:1 on cream) as label/source text */
  --color-gold-glow: rgba(133, 100, 17, 0.15);
  --color-saffron: #f25e1c;
  --color-saffron-glow: rgba(242, 94, 28, 0.15);
  --color-text-primary: #3a1a0b;
  --color-text-secondary: #5c3a2b;
  --color-text-muted: #8c6a5b;
  --color-bg-header: rgba(255, 247, 242, 0.85);
  --color-bg-hover: rgba(242, 94, 28, 0.06);
  --color-bg-input: rgba(255, 255, 255, 0.9);
  --color-border-input: rgba(242, 94, 28, 0.2);
  --color-bg-select: rgba(255, 255, 255, 0.95);
  --chat-card-bg: rgba(255, 255, 255, 0.9) !important;
}

/* Theme 5: Marigold & Vermilion (Ganesha Peeta - Light Vibrant Theme) */
body.theme-ganesha:not(.high-contrast-theme) {
  --color-bg-space: #fffdf0;
  --color-bg-deep: #fff9d6;
  --color-bg-card: rgba(255, 255, 255, 0.8);
  --color-bg-card-hover: rgba(255, 255, 255, 0.95);
  --color-border: rgba(255, 193, 7, 0.2);
  --color-border-hover: rgba(255, 87, 34, 0.4);
  --color-gold: #8f6200; /* deep marigold-amber — AA-compliant (≥4.5:1 on cream) as label/source text */
  --color-gold-glow: rgba(143, 98, 0, 0.15);
  --color-saffron: #e64a19;
  --color-saffron-glow: rgba(230, 74, 25, 0.15);
  --color-text-primary: #302600;
  --color-text-secondary: #524100;
  --color-text-muted: #7a651a;
  --color-bg-header: rgba(255, 253, 240, 0.85);
  --color-bg-hover: rgba(255, 193, 7, 0.06);
  --color-bg-input: rgba(255, 255, 255, 0.9);
  --color-border-input: rgba(255, 193, 7, 0.25);
  --color-bg-select: rgba(255, 255, 255, 0.95);
  --chat-card-bg: rgba(255, 255, 255, 0.95) !important;
}

/* Theme 6: Lotus Pink & Jasmine White (Saraswati Shveta - Light Vibrant Theme) */
body.theme-saraswati:not(.high-contrast-theme) {
  --color-bg-space: #fdfbfd;
  --color-bg-deep: #fbf0f5;
  --color-bg-card: rgba(255, 255, 255, 0.8);
  --color-bg-card-hover: rgba(255, 255, 255, 0.95);
  --color-border: rgba(240, 98, 146, 0.15);
  --color-border-hover: rgba(240, 98, 146, 0.4);
  --color-gold: #d81b60;
  --color-gold-glow: rgba(216, 27, 96, 0.15);
  --color-saffron: #f06292;
  --color-saffron-glow: rgba(240, 98, 146, 0.15);
  --color-text-primary: #2a1521;
  --color-text-secondary: #4a283b;
  --color-text-muted: #724e62;
  --color-bg-header: rgba(253, 251, 253, 0.85);
  --color-bg-hover: rgba(240, 98, 146, 0.06);
  --color-bg-input: rgba(255, 255, 255, 0.9);
  --color-border-input: rgba(240, 98, 146, 0.2);
  --color-bg-select: rgba(255, 255, 255, 0.95);
  --chat-card-bg: rgba(255, 255, 255, 0.95) !important;
}

/* Theme 7: Mandir Bhor (Temple Saffron — Bhagwa, Marigold & Gold on warm cream).
   The free, welcoming default: vibrant, light and unmistakably Hindu. */
body.theme-mandir:not(.high-contrast-theme) {
  --color-bg-space: #fff6ea;
  --color-bg-deep: #ffe9cf;
  --color-bg-card: rgba(255, 252, 246, 0.82);
  --color-bg-card-hover: rgba(255, 255, 255, 0.96);
  --color-border: rgba(217, 119, 6, 0.16);
  --color-border-hover: rgba(226, 84, 13, 0.45);
  --color-gold: #9c5a00; /* deep amber-gold — AA-compliant (≥4.5:1 on space/card/deep cream) as label/source/accent text */
  --color-gold-glow: rgba(156, 90, 0, 0.18);
  --color-saffron: #e2540d;
  --color-saffron-glow: rgba(226, 84, 13, 0.18);
  --color-text-primary: #3a1c08;
  --color-text-secondary: #6b3f1d;
  --color-text-muted: #8a5e34; /* AA-compliant (≥4.5:1 on cream/card/deep) muted brown */
  --color-bg-header: rgba(255, 246, 234, 0.9);
  --color-bg-hover: rgba(226, 84, 13, 0.06);
  --color-bg-input: rgba(255, 255, 255, 0.92);
  --color-border-input: rgba(217, 119, 6, 0.22);
  --color-bg-select: rgba(255, 255, 255, 0.96);
  --chat-card-bg: rgba(255, 255, 255, 0.92) !important;
}

/* Opacity adjustments for decorative backgrounds in light themes */
body.theme-golden .stars-bg,
body.theme-ganesha .stars-bg,
body.theme-saraswati .stars-bg,
body.theme-mandir .stars-bg {
  opacity: 0.03;
}

body.theme-golden .glow-orb,
body.theme-ganesha .glow-orb,
body.theme-saraswati .glow-orb,
body.theme-mandir .glow-orb {
  opacity: 0.12;
}

/* Light themes render these decorative layers near-invisible (0.03 / 0.12), so the
   perpetual rotate / twinkle / float animations are imperceptible — yet they still force
   every backdrop-filter (sticky header, glass cards) to re-rasterize its blur each frame,
   which is the main cause of scroll jank on the default light theme. Freezing them makes
   the backdrop static so those blurs can be cached. (Dark themes keep the motion.) */
body.theme-golden .stars-bg, body.theme-golden .stars-bg::after, body.theme-golden .glow-orb,
body.theme-ganesha .stars-bg, body.theme-ganesha .stars-bg::after, body.theme-ganesha .glow-orb,
body.theme-saraswati .stars-bg, body.theme-saraswati .stars-bg::after, body.theme-saraswati .glow-orb,
body.theme-mandir .stars-bg, body.theme-mandir .stars-bg::after, body.theme-mandir .glow-orb {
  animation: none;
  will-change: auto;
}

/* Guna token remap for light themes.
   The three guna accent tokens are defined once at :root as bright accents tuned
   for the dark themes (#10b981 / #f59e0b / #6b7280). As *text* they only reach
   ~2:1 on the cream cards (the Rajas amber is the worst), so the guna-quiz result
   panel, slider labels, journal badges and the .text-warning/.text-success
   utilities were near-invisible in light themes. Remapping the tokens themselves
   (single source of truth) darkens every consumer to AA at once while keeping the
   traditional green/orange/grey guna identity; the small fill-bars and accent
   stripes that use these as backgrounds only gain contrast on the light track. */
body.light-theme {
  --color-sattva: #047857; /* deep emerald — ≥4.5:1 on cream/card */
  --color-rajas:  #b45309; /* burnt amber  — ≥4.5:1 on cream/card */
  --color-tamas:  #57534e; /* warm stone   — ≥7:1  on cream/card */
}

/* ==========================================================================
   Light Theme Surface Overrides
   The .light-theme umbrella class is added (alongside theme-*) for every
   light/vibrant theme. These rules re-point the handful of surfaces that
   hardcode dark backgrounds at the theme variables, so cards, dropdowns,
   inputs and the chat window adapt cleanly. Dark themes never get this class,
   so their rendering is untouched.
   ========================================================================== */
body.light-theme .shrine-select-card,
body.light-theme .chat-select-card,
body.light-theme .deity-select-option,
body.light-theme .scripture-card {
  background: var(--color-bg-card);
}
body.light-theme .scripture-card {
  border-color: var(--color-border);
}
body.light-theme .shrine-select-card:hover,
body.light-theme .chat-select-card:hover,
body.light-theme .deity-select-option:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-border-hover);
}
body.light-theme .wisdom-modal-footer,
body.light-theme .chat-header {
  background: var(--color-bg-header);
}
body.light-theme .chat-settings-dropdown,
body.light-theme .profile-dropdown {
  background: var(--color-bg-select);
  box-shadow: 0 10px 30px rgba(90, 50, 10, 0.18);
}
body.light-theme .lib-search-input-wrapper,
body.light-theme .chat-settings-dropdown input,
body.light-theme .chat-settings-dropdown select,
body.light-theme #sankalpa-preset-select,
body.light-theme #sankalpa-custom-input,
body.light-theme .custom-chant-input {
  background: var(--color-bg-input);
}
body.light-theme .onboarding-hint {
  background: var(--color-bg-select);
  border-color: var(--color-border-hover);
  box-shadow: 0 10px 30px rgba(90, 50, 10, 0.18);
}
body.light-theme .quote-ticker-container {
  background: linear-gradient(90deg, var(--color-bg-deep), #ffd9b0, var(--color-bg-deep));
}
body.light-theme .chat-window-wrapper {
  background: radial-gradient(circle at center, var(--color-bg-card) 0%, var(--color-bg-deep) 100%);
}
/* Deity bubbles inherit the deity's dark bgGradient via --chat-card-bg (set inline
   on the wrapper in chat-voice.js). Force a light, readable bubble for light themes;
   the deity-coloured left border keeps each deity's identity. */
body.light-theme .chat-bubble.deity {
  background: var(--color-bg-card-hover) !important;
  box-shadow: 0 4px 15px rgba(90, 50, 10, 0.1);
}
/* Deity-accent TEXT that sits ON CREAM in light themes. Two custom props —
   --deity-accent and --altar-accent-color — carry the active deity's colour (e.g.
   Shiva's cyan), tuned for the dark themes; as text on cream it drops to ~2.3:1, so
   these on-cream consumers are neutralised to the readable secondary brown. (Deity
   identity still reads through the coloured icon, card border, accent stripe, mandala
   ring and glow — none of which are text.) NOTE: elements that sit on the *dark* altar
   / meditation panels — the deity name, japa counter and breath labels — must stay
   LIGHT and are handled separately below; do NOT neutralise them here. */
body.light-theme .deity-tagline,
body.light-theme .shrine-select-card.active span,
body.light-theme .chat-select-card.active h5,
body.light-theme .chat-select-card.active span,
body.light-theme .scripture-card-source,
body.light-theme #chat-deity-title,
body.light-theme #chat-settings-dropdown h4,
body.light-theme #chat-settings-dropdown label,
body.light-theme #api-key-help-link,
body.light-theme .message-meta {
  color: var(--color-text-secondary);
}

/* The shrine altar and meditation focus panels stay DARK in every theme, so text on
   them must read as light. The deity subtitle, japa counter and breath labels already
   fall back to the bright deity-accent colour (removed from the neutralise list above);
   only the deity name (h2) hardcodes --color-text-primary, which is dark in light
   themes — restore it to a warm near-white to match the dark-theme altar title. */
body.light-theme .shrine-header h2 {
  color: #faf6ec;
}
/* The mandala focus orb keeps a dark teal gradient in every theme, so its glyph must
   read LIGHT in light themes — the earlier "keep it dark so it reads on cream" was
   wrong (the orb is never cream). .deity-focus-symbol itself already carries the bright
   deity-accent colour via a more specific rule, so only the glyph needs this. */
body.light-theme #focus-symbol-char {
  color: #faf6ec;
}

/* ── Dark immersive panel: the shrine altar ───────────────────────────────────
   .shrine-altar keeps a near-black cosmic gradient in EVERY theme. In light themes its
   descendant text otherwise inherits the cream-tuned dark tokens and collapses to
   ~1–3:1 (the deity name, mode tabs, all theme swatches, audio mixer, japa labels and
   action buttons were near-invisible). Re-map the text/gold tokens on the altar to the
   bright dark-theme values so every label, swatch and button reads at once. */
body.light-theme .shrine-altar {
  --color-text-primary: #f8f9fa;
  --color-text-secondary: #c7c7db;
  --color-text-muted: #9a9ab8;
  --color-gold: #d4af37;
}
/* …except the form controls and glass sub-cards inside the altar, which carry their own
   LIGHT backgrounds and must keep the dark text tokens to stay readable. */
body.light-theme .shrine-altar select,
body.light-theme .shrine-altar option,
body.light-theme .shrine-altar input,
body.light-theme .shrine-altar textarea,
body.light-theme .shrine-altar .japa-stats-row,
body.light-theme .shrine-altar .mantra-display-card {
  --color-text-primary: #3a1c08;
  --color-text-secondary: #6b3f1d;
  --color-text-muted: #8a5e34;
}
/* Danger-action text (e.g. Reset Stats) needs a brighter red than the cream-tuned
   #c62828 to read on the dark altar (restores the base #ff5252; !important beats the
   light-theme .text-danger override that darkens it for cream surfaces). */
body.light-theme .shrine-altar .text-danger {
  color: #ff5252 !important;
}

/* Gold-gradient buttons (accent / seek / chat-send / meditation-start) key their dark
   gradient stop off --color-gold, which is dark in light themes (tuned for label text).
   Under the buttons' dark text that gold edge drops to ~3.4:1, so restore a bright
   marigold stop for light themes only — the second stop and the dark text are kept. */
body.light-theme .accent-btn,
body.light-theme .seek-submit-btn {
  background: linear-gradient(135deg, #d98c0a, #ff9800);
}
body.light-theme .chat-send-btn {
  background: linear-gradient(135deg, var(--chat-accent-color, #d98c0a), #ff9800);
}
body.light-theme .med-start-btn {
  background: linear-gradient(135deg, #d98c0a, #b8860b);
}

/* Mobile glassmorphic bottom nav uses !important dark; match it for light themes */
@media (max-width: 768px) {
  body.light-theme .app-nav {
    background: var(--color-bg-header) !important;
    border-color: var(--color-border-hover) !important;
    box-shadow: 0 8px 30px rgba(90, 50, 10, 0.18) !important;
  }
}

/* --- Light-theme surface overrides, round 2 ---
   These elements hardcode dark backgrounds (inline styles or class rules) and were
   missed by the first pass, leaving dark text on a dark surface in light themes.
   !important is needed to beat the inline styles. The self-contained dark
   "My Shrine" device section (#device-section) and the dark shareable quote card
   (#satsang-share-card-preview) carry their own light text and are deliberately
   excluded — none of these selectors match them. */

/* Always-visible footer */
body.light-theme .app-footer {
  background: var(--color-bg-header) !important;
}

/* Form controls with hardcoded-dark backgrounds (header language picker, breathwork
   ratio, satsang category, location + payment inputs, gift-modal inputs). */
body.light-theme #lang-select,
body.light-theme #custom-video-category,
body.light-theme #location-search-input,
body.light-theme #location-city-select,
body.light-theme #card-holder-name,
body.light-theme #card-number,
body.light-theme #card-expiry,
body.light-theme #gift-recipient-name,
body.light-theme #gift-custom-blessing,
body.light-theme #cloud-sync-email,
body.light-theme .breath-settings-row select {
  background: var(--color-bg-input) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-input) !important;
}

/* Native <option> dropdown lists that default to near-black */
body.light-theme .chat-settings-dropdown select option,
body.light-theme .temple-form select option,
body.light-theme #lang-select option,
body.light-theme #custom-video-category option,
body.light-theme #location-city-select option,
body.light-theme .breath-settings-row select option {
  background: var(--color-bg-select);
  color: var(--color-text-primary);
}

/* Modal cards inherit the translucent --color-bg-card (0.82α) from .glass-card.
   That reads fine on the cream page, but every modal sits on the dark
   rgba(5,4,15,.85) overlay scrim, so in light themes the ~18% bleed-through greys
   the card to ~rgb(219,216,212) — dragging the gold/muted text inside ~80 nodes
   below AA. Point modal cards at the opaque theme cream so their content sits on a
   true light surface; the dark scrim still dims the page behind for focus. (0,2,1)
   specificity beats .glass-card's (0,1,0) without !important. Modals only ever sit
   on the scrim, so this never touches the translucent cards on the page itself. */
body.light-theme .modal-card {
  background: var(--color-bg-space);
}

/* Utility panels with hardcoded near-black backgrounds */
body.light-theme .mantra-display-card,
body.light-theme #call-transcript-panel {
  background: var(--color-bg-input) !important;
  color: var(--color-text-primary);
}

/* Guna-quiz result panel. The bars container hardcodes background:rgba(0,0,0,0.2)
   inline — invisible on dark themes, but on cream it darkens to a ~rgb(204,201,195)
   mud that drops even the AA-remapped guna tokens to ~3:1. Keep the panel near-white
   in light themes (max token contrast) and group it with a border + inset shadow —
   the light-UI idiom — instead of a dark fill. The fill-bar tracks hardcode a white
   rgba(255,255,255,0.05) groove (invisible on cream); swap to a warm translucent
   dark so the empty bar reads. !important beats the inline styles. */
body.light-theme .guna-result-bars {
  background: var(--color-bg-card-hover) !important;
  border-color: var(--color-border) !important;
  box-shadow: inset 0 1px 4px rgba(90, 50, 10, 0.07);
}
body.light-theme .guna-result-track {
  background: rgba(58, 28, 8, 0.1) !important;
}

/* Inset "panel within a card" surfaces that hardcode background:rgba(0,0,0,.15–.2)
   inline (streak chips, billing/gifted ledgers, profile sankalpa + resume notes).
   Same story as the guna bars: invisible darkening on dark themes, but on the cream
   modal/card they turn to mud and drop the muted/secondary text inside below AA.
   Re-point them at the near-white card surface with a real theme border. Their
   white/gold hairline borders (also invisible on cream) come along via border-color.
   The intentionally-dark zones (sangha night-sky map, voice-call overlay, share card)
   are NOT matched here — they keep their dark surfaces. */
body.light-theme .chakra-streak-track,
body.light-theme .billing-details,
body.light-theme #gifted-ledger-container,
body.light-theme #profile-card-sankalpa-text,
body.light-theme #profile-resume-note,
body.light-theme .japa-stats-row {
  background: var(--color-bg-card-hover) !important;
  border-color: var(--color-border) !important;
}

/* One-off hardcoded accent TEXT colours tuned for the dark themes that are unreadable
   on cream (bright-cyan tool/recommendation badges, the dynamic panchang muhurta glows,
   green status pills, deep-orange streak, destructive reds, the dynamic aura tier
   colour, and the deity-tinted chat timestamp). All are foreground text — no dual-role
   gold-button trap — so each is darkened to an AA-safe shade of the SAME hue (semantics
   kept: red stays red, green green, the auspicious/inauspicious muhurta cues intact).
   !important beats the inline / source !important declarations. */
body.light-theme .text-danger,
body.light-theme #cancel-subscription-btn,
body.light-theme .detail-alert-glow-rahu { color: #c62828 !important; }
body.light-theme .text-danger:hover { color: #a31515 !important; }
body.light-theme #tool-tag-incense,
body.light-theme #satsang-recommendation-badge { color: #036b73 !important; }
body.light-theme .detail-alert-glow-brahma { color: #8a5e00 !important; }
body.light-theme .detail-alert-glow-abhijit,
body.light-theme #profile-card-sankalpa-status,
body.light-theme #profile-card-sandbox-note { color: #2e7d32 !important; }
body.light-theme #profile-card-streak { color: #bf360c !important; }
/* Dynamic identity colours (aura tier, deity chat accent) carried elsewhere by glow /
   border — keep the small text itself readable. */
body.light-theme .aura-title { color: var(--color-text-primary); }
body.light-theme .chat-bubble.deity .message-meta { color: var(--color-text-muted); }

/* High Contrast Theme Overrides (Accessibility) */
body.high-contrast-theme {
  --color-bg-space: #000000;
  --color-bg-deep: #000000;
  --color-bg-card: #000000;
  --color-bg-card-hover: #111111;
  --color-border: #ffffff;
  --color-border-hover: #ffd700;
  
  --color-gold: #ffd700;
  --color-gold-glow: rgba(255, 215, 0, 0.4);
  --color-text-primary: #ffffff;
  --color-text-secondary: #ffffff;
  --color-text-muted: #e0e0e0;
}

body.high-contrast-theme .glass-card,
body.high-contrast-theme .card,
body.high-contrast-theme .modal-card {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

body.high-contrast-theme button,
body.high-contrast-theme .nav-btn,
body.high-contrast-theme .secondary-btn,
body.high-contrast-theme .accent-btn {
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  background: #000000 !important;
}

body.high-contrast-theme button:hover,
body.high-contrast-theme .nav-btn.active,
body.high-contrast-theme .accent-btn:hover {
  border-color: #ffd700 !important;
  color: #000000 !important;
  background: #ffd700 !important;
}

body.high-contrast-theme .text-gold,
body.high-contrast-theme .source-tag {
  color: #ffd700 !important;
  font-weight: bold !important;
}

/* Reset & Base Rules */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-space);
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-space);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-hover);
}

body.light-theme ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02);
}
body.light-theme ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}
body.light-theme ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Language selector — dark by default; flips on light themes. */
.lang-select-control {
  background: rgba(12, 11, 30, 0.9);
}
body.light-theme .lang-select-control {
  background: rgba(255, 255, 255, 0.9);
}

/* Sangha map — dark by default; lightens on light themes. */
.sangha-map-display {
  background: rgba(0, 0, 0, 0.25) !important;
}
body.light-theme .sangha-map-display {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* Cloud-sync email input — dark by default; flips on light themes. */
#cloud-sync-email {
  background: rgba(0, 0, 0, 0.25);
  color: var(--color-text-primary);
}
body.light-theme #cloud-sync-email {
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-primary);
}


/* Reusable modal input — dark by default, adapts on light themes. */
.modal-input {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  width: 100%;
  outline: none;
  font-family: var(--font-body);
  box-sizing: border-box;
}
body.light-theme .modal-input {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--color-text-primary);
}

/* Skip-to-content link — off-screen until focused, then revealed for keyboard users. */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 99999;
  background: var(--color-gold);
  color: #070610;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 0 0 8px 8px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

/* Keyboard focus ring — overrides any element-specific `outline: none` for keyboard users. */
:focus-visible {
  outline: 2px solid var(--color-gold) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* Respect prefers-reduced-motion (vestibular accessibility). Disables decorative spins / drifts. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Heavy decorative backgrounds — stop entirely. */
  .stars-bg,
  .stars-bg::after,
  .glow-orb,
  .ring-outer,
  .ring-middle,
  .ring-inner,
  .ticker-content,
  .floating-icon,
  .goldFloat,
  [class*="goldFloat"],
  .hero-counsel::before,
  .altar-glow,
  .shrine-embers,
  .dc-ripple {
    animation: none !important;
    transform: none !important;
  }
}
/* The mandala / bead / canvas elements are visually focused via their own glow — keep the ring tight. */
.mandala-container:focus-visible,
.deity-focus-symbol:focus-visible,
.japa-bead:focus-visible {
  outline-offset: 4px !important;
}

/* Kill the double-tap-zoom wait on every tappable so taps land instantly
   (pinch-zoom and panning stay available). The mandala matters most:
   rapid japa taps must never trigger a zoom gesture. */
a, button, input, select, textarea, label, summary, [role="button"],
.nav-btn, .mandala-container, .japa-bead,
.deity-card, .med-session-card, .satsang-card, .shrine-select-card,
.scripture-card, .chest-box {
  touch-action: manipulation;
}

/* Pressed-state feedback: the standalone `scale` property composes with any
   existing transform (hover lifts, centering translates), so this can apply
   broadly without clobbering them. */
button:not(:disabled):active,
[role="button"]:active,
.deity-card:active,
.med-session-card:active,
.satsang-card:active,
.shrine-select-card:active {
  scale: 0.97;
}

/* Ambient Background Orbs & Stars */
.stars-bg {
  position: fixed;
  top: -25vmax;
  left: -25vmax;
  width: 150vmax;
  height: 150vmax;
  background: 
    linear-gradient(rgba(7, 6, 16, 0.85), rgba(7, 6, 16, 0.98)),
    url('cosmic_mandala.webp') no-repeat center center;
  background-size: cover;
  opacity: 0.22;
  z-index: -2;
  pointer-events: none;
  animation: rotateBackground 240s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.stars-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(1.5px 1.5px at 20px 30px, #d4af37, rgba(0,0,0,0)),
    radial-gradient(2.2px 2.2px at 40px 70px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 10px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.8px 1.8px at 130px 80px, #d4af37, rgba(0,0,0,0)),
    radial-gradient(2.5px 2.5px at 160px 120px, #ffffff, rgba(0,0,0,0));
  background-size: 240px 240px;
  opacity: 0.45;
  animation: starsTwinkle 6s infinite alternate ease-in-out;
  will-change: opacity;
}

@keyframes rotateBackground {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(0, 0, 0) rotate(360deg); }
}

@keyframes starsTwinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.75; }
}


.glow-orb {
  position: fixed;
  border-radius: 50%;
  /* 50px over an already-soft radial gradient looks ~identical to the old 100px but
     halves the blur radius — backdrop/filter cost scales ~quadratically with radius. */
  filter: blur(50px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.3;
  animation: orbFloat 25s infinite alternate ease-in-out;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.orb-1 {
  top: -10%;
  left: 10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(103, 58, 183, 0.4) 0%, transparent 70%);
}

.orb-2 {
  bottom: -10%;
  right: 10%;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, rgba(63, 81, 181, 0.3) 0%, transparent 70%);
  animation-delay: -5s;
}

@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5%, 10%) scale(1.1); }
  100% { transform: translate(-5%, -5%) scale(0.95); }
}

/* Layout Container & Structure */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 6rem;
  min-height: calc(100vh - 180px);
}

.app-section {
  display: none;
  opacity: 0;
  transform: translateY(12px) scale(0.99);
}

.app-section.active {
  display: block;
  animation: pageEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pageEnter {
  from { 
    opacity: 0; 
    transform: translateY(12px) scale(0.99); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}


/* Header & Navigation Styles */
.app-header {
  background: var(--color-bg-header);
  /* Sticky header re-blurs everything scrolling behind it every frame, so keep the
     radius modest (was 15px) — 10px still reads as frosted glass over the near-solid header bg. */


  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  /* Safety net: if the logo + nav + controls ever exceed the row (e.g. a wide
     language label), wrap instead of overflowing the viewport. The 769px icon-only
     nav trim keeps content under the 1200px cap on laptops, so this stays inert
     there; the 769–1199px rule below makes the wrapped result a tidy 2-row header. */
  flex-wrap: wrap;
  row-gap: 0.75rem;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-symbol {
  font-family: var(--font-divine);
  font-size: 2.2rem;
  background: linear-gradient(135deg, var(--color-gold), #ff5722);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
  font-weight: 700;
}

.logo-text h1 {
  font-family: var(--font-divine);
  font-size: 1.4rem;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.logo-text p {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.app-nav {
  display: flex;
  gap: 0.5rem;
}

.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.nav-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.nav-btn.active {
  color: var(--color-gold);
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.15);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.05);
}

/* Audio Control Button */
.icon-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-gold);
  border-color: var(--color-border-hover);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
}

/* Quote Ticker (Ancient scrolls styling) */
.quote-ticker-container {
  background: linear-gradient(90deg, rgba(12, 11, 30, 0.9), rgba(26, 12, 8, 0.9), rgba(12, 11, 30, 0.9));
  border-bottom: 1px solid var(--color-border);
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  overflow: hidden;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.ticker-label {
  color: var(--color-gold);
  font-family: var(--font-divine);
  font-weight: 700;
  padding-right: 1rem;
  border-right: 1px solid var(--color-border);
  margin-right: 1rem;
  white-space: nowrap;
}

.ticker-track {
  width: 100%;
  overflow: hidden;
}

.ticker-content {
  display: inline-block;
  white-space: nowrap;
  animation: tickerPlay 25s linear infinite;
  color: var(--color-text-secondary);
  font-style: italic;
}

@keyframes tickerPlay {
  0% { transform: translate3d(100%, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* Section Common Titles */
.section-title {
  font-family: var(--font-divine);
  font-size: 2.2rem;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.text-center { text-align: center; }

.section-subtitle {
  color: var(--color-text-secondary);
  max-width: 700px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
}

/* Glass Card Global Styles */
.glass-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  /* Blur disabled: backdrop-filter over animated backgrounds causes block-by-block GPU tiling tearing */


  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  position: relative;
}

.glass-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), transparent 40%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 215, 0, 0.05));
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
  transition: opacity var(--transition-normal);
}

.glass-card:hover::after {
  opacity: 1;
}

/* ── Compositor-only ("Apple-smooth") scroll on light themes ───────────────────
   Light-theme cards are 0.75–0.82 opaque and — now that the decorative background is
   frozen — sit over a static, near-uniform backdrop, so blurring it yields ~the same
   pixels as not blurring it. But backdrop-filter forces a per-frame GPU re-raster of
   every card while scrolling, which keeps scroll on the main thread. Dropping it lets
   the browser scroll purely on the compositor thread (no repaint), the same thing that
   makes apple.com feel buttery. There are no scroll listeners, so this is the last
   remaining per-frame cost on the default theme.
   isolation:isolate restores the stacking context backdrop-filter used to create, so
   the .glass-card::after sheen (z-index:-1) stays scoped to the card.
   Dark themes keep the frosted glass (their backdrop is the animated cosmic mandala,
   where the blur genuinely reads). */
body.light-theme .glass-card {


  isolation: isolate;
}
/* Transient overlays that float over busy content keep their blur — they don't scroll,
   so they cost nothing per frame, and the blur keeps text behind them legible. */
body.light-theme .modal-card,
body.light-theme .theme-dropdown-menu,
body.light-theme .profile-dropdown,
body.light-theme .chat-settings-dropdown {


}


/* HERO COUNSEL & SEARCH PANEL */
.hero-counsel {
  padding: 3rem 2rem;
  border-radius: 24px;
  background: radial-gradient(circle at top, rgba(103, 58, 183, 0.15) 0%, transparent 60%);
  margin-bottom: 3.5rem;
  border: 1px solid rgba(103, 58, 183, 0.1);
  position: relative;
}

/* Phase 4: a soft saffron aura behind the hero text. STATIC (not breathing) by
   measurement — an opacity animation here forces the sticky header's backdrop-filter
   to re-rasterize every frame during scroll (sanctuary dropped to ~30fps / 491 janky
   frames in scratch/perf_trace.js). A static gradient rasterizes once and costs nothing
   while scrolling. The breathing pulse lives on the Shrine altar-glow, a focused
   non-scrolling screen. See scratch/perf/REPORT.md (light-theme bg freeze, same cause). */
.hero-counsel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 32%, rgba(232, 130, 12, 0.22) 0%, rgba(212, 160, 23, 0.11) 34%, transparent 64%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.hero-counsel > * {
  position: relative;
  z-index: 1;
}

.seek-box {
  max-width: 750px;
  margin: 0 auto 1.5rem;
}

.input-wrapper {
  position: relative;
  display: flex;
  background: var(--color-bg-input);
  border: 1.5px solid var(--color-border-input);
  border-radius: 50px;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  align-items: center;
  transition: var(--transition-normal);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.input-wrapper:focus-within {
  border-color: var(--color-gold);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.search-icon {
  color: var(--color-text-muted);
  margin-right: 0.75rem;
}

.input-wrapper input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: 1.05rem;
  padding: 0.6rem 0;
  outline: none;
}

.input-wrapper input::placeholder {
  color: var(--color-text-muted);
}

.seek-submit-btn {
  background: linear-gradient(135deg, var(--color-gold), #ff9800);
  border: none;
  color: #070610;
  font-family: var(--font-divine);
  font-weight: 700;
  padding: 0.8rem 1.8rem;
  border-radius: 40px;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
}

.seek-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.35);
  background: linear-gradient(135deg, #ffe033, #ffaa00);
}

/* Suggestion Chips */
.suggestion-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.chip:hover {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.3);
  color: var(--color-text-primary);
}

/* DEITY DIRECTORY GRID */
.deities-directory {
  margin-top: 2rem;
}

.subsection-title {
  font-family: var(--font-divine);
  font-size: 1.6rem;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.subsection-desc {
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.deity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

.deity-card {
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.deity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--deity-accent, var(--color-gold));
  opacity: 0.7;
}

.deity-card:hover {
  transform: translateY(-5px);
  border-color: var(--deity-accent, var(--color-border-hover));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px var(--deity-glow, rgba(255, 215, 0, 0.08));
}

.deity-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}

.deity-title-box h4 {
  font-family: var(--font-divine);
  font-size: 1.4rem;
  color: var(--color-text-primary);
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.deity-tagline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--deity-accent, var(--color-gold));
  font-weight: 600;
}

/* Dark themes: several deity accents (indigo, rose, red…) are too dark as small
   uppercase text on near-black — Balaji indigo hit 3.0:1. Lighten the accent
   toward white so it clears AA while keeping each deity's hue identity.
   (Light themes keep their own override; high-contrast theme untouched.) */
body:not(.light-theme):not(.high-contrast-theme) .deity-tagline {
  color: color-mix(in srgb, var(--deity-accent, var(--color-gold)) 72%, #fff);
}

.deity-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deity-accent, var(--color-text-primary));
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.deity-card:hover .deity-card-icon {
  background: rgba(255, 255, 255, 0.08);
}

.deity-card-body {
  flex-grow: 1;
  margin-bottom: 1.5rem;
}

.deity-aspect {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.8rem;
  border: 1px solid var(--color-border);
}

.deity-desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.deity-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.deity-card:hover .deity-card-footer {
  color: var(--color-text-primary);
}

.deity-card-footer span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: transform var(--transition-fast);
}

.deity-card:hover .deity-card-footer span i {
  transform: translateX(3px);
}

/* ==========================================================================
   WISDOM MODAL (DILEMMA ANSWER OUTPUT)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 4, 12, 0.8);


  will-change: opacity;
  transform: translateZ(0);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 24px;
  contain: content;
  border: 1px solid var(--color-border);
  position: relative;
  transform: scale(0.95);
  transition: transform var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.modal-overlay.active .modal-card {
  transform: scale(1);
}

.close-modal-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: var(--transition-fast);
}

.close-modal-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-gold);
}

.wisdom-modal-header {
  padding: 2.2rem 2.2rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.deity-badge {
  font-family: var(--font-divine);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 0.25rem;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

#modal-deity-epithet {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-secondary);
}

.wisdom-modal-body {
  padding: 2.2rem;
  overflow-y: auto;
}

/* Shloka Container */
.shloka-container {
  background: rgba(255, 215, 0, 0.03);
  border: 1px solid rgba(255, 215, 0, 0.12);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1.8rem;
  position: relative;
  box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.02);
}

.shloka-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.source-tag {
  font-family: var(--font-divine);
  font-size: 0.8rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.shloka-audio-btn {
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.2);
  color: var(--color-gold);
  border-radius: 20px;
  padding: 0.3rem 0.8rem;
  min-height: var(--btn-min-touch);
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.shloka-audio-btn:hover {
  background: rgba(255, 215, 0, 0.15);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
}

.shloka-sanskrit {
  font-family: var(--font-sanskrit);
  font-size: 1.3rem;
  text-align: center;
  color: var(--color-text-primary);
  margin-bottom: 0.8rem;
  line-height: 1.8;
  word-spacing: 2px;
}

.shloka-transliteration {
  font-size: 0.85rem;
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.shloka-container .divider {
  height: 1px;
  background: rgba(255, 215, 0, 0.1);
  margin: 0.8rem 0;
}

.shloka-translation {
  font-size: 0.95rem;
  color: var(--color-text-primary);
  text-align: center;
  font-weight: 400;
  line-height: 1.5;
}

/* Counsel Details */
.counsel-message, .counsel-actions, .counsel-reflection-box {
  margin-bottom: 1.8rem;
}

.counsel-message h4, .counsel-actions h4 {
  font-family: var(--font-divine);
  font-size: 1.05rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.counsel-message p {
  color: var(--color-text-secondary);
  font-size: 0.98rem;
  line-height: 1.6;
}

.counsel-actions ul {
  list-style: none;
  padding-left: 0;
}

.counsel-actions li {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.75rem;
}

.counsel-actions li::before {
  content: '✦';
  position: absolute;
  left: 0.2rem;
  top: 0;
  color: var(--color-gold);
}

.counsel-reflection-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.2rem;
}

.reflection-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.reflection-header i {
  color: var(--color-gold);
  width: 18px;
  height: 18px;
}

#modal-reflection-text {
  color: var(--color-text-secondary);
  font-style: italic;
  font-size: 0.92rem;
}

/* Modal Footer */
.wisdom-modal-footer {
  padding: 1.2rem 2.2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background: rgba(12, 11, 30, 0.5);
}

/* Button UI */
.accent-btn, .secondary-btn, .text-btn {
  font-family: var(--font-divine);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--transition-fast);
}

.accent-btn {
  background: linear-gradient(135deg, var(--color-gold), #ff9800);
  border: none;
  color: #070610;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.15);
}

.accent-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.3);
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 0.75rem 1.5rem;
}

.secondary-btn:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-border-hover);
}

.text-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  padding: 0.5rem 1rem;
}

.text-btn:hover {
  color: var(--color-text-primary);
}

.w-100 { width: 100%; }

/* ==========================================================================
   SHRINE ROOM SECTION (MEDITATIVE SPACE)
   ========================================================================== */
.shrine-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  min-height: 720px;
}

.shrine-sidebar {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 1.5rem;
  overflow-y: auto;
}

.shrine-sidebar h3 {
  font-family: var(--font-divine);
  font-size: 1.1rem;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}

.shrine-deity-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.shrine-select-card {
  background: rgba(18, 16, 38, 0.3);
  border: 1px solid var(--color-border);
  padding: 0.8rem 1.2rem;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shrine-select-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

.shrine-select-card.active {
  background: var(--deity-bg, rgba(255, 215, 0, 0.06));
  border-color: var(--deity-accent, var(--color-gold));
  color: var(--color-text-primary);
}

.shrine-select-card h5 {
  font-family: var(--font-divine);
  font-size: 0.95rem;
  font-weight: 700;
}

.shrine-select-card span {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.shrine-select-card.active span {
  /* The active card's background is already the deity accent (~0.4), so an
     accent-colored "selected" badge failed AA (cyan-on-teal 3.88:1). Light text
     reads on any accent tint; light themes override this to dark text above. */
  color: var(--color-text-secondary);
}

/* Altar Main Stage */
.shrine-altar {
  background: radial-gradient(circle at center, rgba(12, 11, 30, 0.9) 0%, rgba(5, 4, 12, 0.95) 100%);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.altar-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--altar-glow-color, rgba(255, 215, 0, 0.1)) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
  transition: background var(--transition-slow);
  /* Phase 4: the deity-colored altar glow now breathes (opacity-only / compositor). */
  animation: dcAuraBreathe 7s ease-in-out infinite;
  will-change: opacity;
}

/* ============================================================
   Phase 4 — ambient + micro-interaction layer
   Always-on motion is transform/opacity only. prefers-reduced-motion
   disables all of it (see the reduced-motion block near the top).
   ============================================================ */
@keyframes dcAuraBreathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.78; }
}

/* Incense embers rising in the shrine altar (JS-driven canvas, behind the mandala). */
.shrine-embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Tap ripple on ritual buttons ([data-ripple]); span injected + removed by JS. */
[data-ripple] {
  position: relative;
  overflow: hidden;
}
.dc-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 215, 0, 0.28) 42%, transparent 70%);
  animation: dcRipple 0.6s ease-out forwards;
  z-index: 0;
}
@keyframes dcRipple {
  to { transform: scale(2.4); opacity: 0; }
}

.shrine-header {
  text-align: center;
  z-index: 1;
}

.shrine-header h2 {
  font-family: var(--font-divine);
  font-size: 2.2rem;
  color: var(--color-text-primary);
  font-weight: 700;
  letter-spacing: 1.5px;
}

.shrine-header p {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--altar-accent-color, var(--color-gold));
}

.altar-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  width: 100%;
  z-index: 1;
  position: relative;
  margin: 0.8rem 0;
}

/* Mandala Ring Animation */
.mandala-container {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-normal);
}

.mandala-container:hover {
  transform: scale(1.03);
}

.mandala-container:active {
  transform: scale(0.97);
}

.mandala-ring {
  position: absolute;
  border: 1px dashed var(--altar-accent-color, var(--color-gold));
  border-radius: 50%;
  opacity: 0.3;
  will-change: transform;
}

.ring-outer {
  width: 100%;
  height: 100%;
  animation: rotateCW 60s linear infinite;
  opacity: 0.15;
}

.ring-middle {
  width: 80%;
  height: 80%;
  border-style: double;
  animation: rotateCCW 45s linear infinite;
  opacity: 0.25;
}

.ring-inner {
  width: 60%;
  height: 60%;
  border-style: dotted;
  animation: rotateCW 30s linear infinite;
  opacity: 0.35;
}

.deity-focus-symbol {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--altar-card-bg, rgba(255, 255, 255, 0.03));
  border: 2px solid var(--altar-accent-color, var(--color-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-divine);
  font-size: 3.2rem;
  color: var(--altar-accent-color, var(--color-text-primary));
  font-weight: 700;
  box-shadow: 0 0 30px var(--altar-glow-color, rgba(255, 215, 0, 0.15));
  text-shadow: 0 0 15px var(--altar-glow-color, rgba(255, 215, 0, 0.2));
  user-select: none;
  z-index: 2;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.mandala-container:active .deity-focus-symbol {
  box-shadow: 0 0 50px var(--altar-accent-color, rgba(255, 215, 0, 0.4));
}

@keyframes rotateCW {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

/* Japa Mala counter & buttons */
.shrine-controls {
  width: 100%;
  max-width: 480px;
  z-index: 1;
  margin-bottom: 0.5rem;
}

.japa-counter {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  padding: 1.2rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.counter-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.counter-label {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.counter-number {
  font-family: var(--font-divine);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--altar-accent-color, var(--color-gold));
}

.counter-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.counter-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--altar-accent-color, var(--color-gold)), #ff5722);
  border-radius: 3px;
  transition: width 0.1s ease;
}

.japa-counter button.accent-btn {
  width: 100%;
  margin-bottom: 0.5rem;
}

.altar-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

/* (Ambiance & sound moved to the header sound popover — see .sound-dropdown-menu.) */

.altar-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-family: var(--font-divine);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition-fast);
}

.altar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--altar-accent-color, var(--color-border-hover));
  color: var(--color-text-primary);
}

/* Altar Flower Falling Animation Trigger */
.flower-particle {
  position: absolute;
  color: #ff80ab;
  pointer-events: none;
  font-size: 1.2rem;
  z-index: 5;
  animation: fallAnimation 2.5s linear forwards;
}

@keyframes fallAnimation {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(650px) rotate(360deg);
    opacity: 0;
  }
}

/* ==========================================================================
   JOURNAL SECTION (REFLECTIONS)
   ========================================================================== */
.journal-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
}

.journal-form-panel h2, .journal-logs-panel h2 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.journal-form {
  padding: 2rem;
  margin-top: 1.2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-family: var(--font-divine);
  font-size: 0.9rem;
  color: var(--color-gold);
  margin-bottom: 0.4rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.form-group input, .form-group textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition-fast);
}

.form-group input:focus, .form-group textarea:focus {
  border-color: var(--color-gold);
  background: rgba(255, 255, 255, 0.04);
}

/* Slider Design for Spiritual States */
.guna-tracker {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  margin-bottom: 1.8rem;
}

.tracker-main-label {
  display: block;
  font-family: var(--font-divine);
  font-size: 0.9rem;
  color: var(--color-gold);
  margin-bottom: 1rem;
  font-weight: 600;
}

.guna-sliders {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.guna-slider-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 500;
}

.guna-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: help;
}

.guna-name::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.guna-name.sattva { color: var(--color-sattva); }
.guna-name.sattva::before { background: var(--color-sattva); }

.guna-name.rajas { color: var(--color-rajas); }
.guna-name.rajas::before { background: var(--color-rajas); }

.guna-name.tamas { color: var(--color-tamas); }
.guna-name.tamas::before { background: var(--color-tamas); }

.guna-value {
  color: var(--color-text-secondary);
}

.slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  outline: none;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.guna-slider-group:nth-child(1) .slider-input::-webkit-slider-thumb { background: var(--color-sattva); }
.guna-slider-group:nth-child(2) .slider-input::-webkit-slider-thumb { background: var(--color-rajas); }
.guna-slider-group:nth-child(3) .slider-input::-webkit-slider-thumb { background: var(--color-tamas); }

.slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* History logs list */
.journal-logs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.2rem;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  padding-right: 0.5rem;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--color-text-muted);
}

.empty-state i {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.journal-item {
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.journal-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.journal-item-title {
  font-family: var(--font-divine);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.journal-item-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.journal-item-content {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 1.2rem;
  white-space: pre-wrap;
}

.journal-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding-top: 0.8rem;
}

.journal-item-gunas {
  display: flex;
  gap: 0.8rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.journal-item-guna-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.journal-item-guna-badge.sattva { color: var(--color-sattva); }
.journal-item-guna-badge.rajas { color: var(--color-rajas); }
.journal-item-guna-badge.tamas { color: var(--color-tamas); }

.delete-journal-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: var(--transition-fast);
}

.delete-journal-btn:hover {
  color: #ff5252;
  background: rgba(255, 82, 82, 0.08);
}

/* ==========================================================================
   DIVINE CHAT SECTION
   ========================================================================== */
.chat-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  height: calc(100vh - 240px);
  min-height: 550px;
}

.chat-sidebar {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 1.5rem;
  overflow-y: auto;
}

.chat-sidebar h3 {
  font-family: var(--font-divine);
  font-size: 1.1rem;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}

.chat-deity-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-select-card {
  background: rgba(18, 16, 38, 0.3);
  border: 1px solid var(--color-border);
  padding: 0.8rem 1.2rem;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.chat-select-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

.chat-select-card.active {
  background: var(--deity-bg, rgba(255, 215, 0, 0.06));
  border-color: var(--deity-accent, var(--color-gold));
}

.chat-select-card h5 {
  font-family: var(--font-divine);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.1rem;
}

.chat-select-card span {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Active deity-picker card: its background is already the deity accent (~0.4),
   so accent-colored text on it failed AA (cyan-on-teal 3.97:1). Use light text
   like the shrine-select cards do — the accent bg + border carry the identity.
   Light themes override these to dark text via the umbrella block above. */
.chat-select-card.active h5 {
  color: var(--color-text-primary);
}

.chat-select-card.active span {
  color: var(--color-text-secondary);
}

.chat-window-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  position: relative;
  border: 1px solid var(--color-border);
  background: radial-gradient(circle at center, rgba(12, 11, 30, 0.9) 0%, rgba(5, 4, 12, 0.95) 100%);
  box-shadow: 0 0 30px var(--chat-glow-color, rgba(255, 215, 0, 0.05));
  transition: box-shadow var(--transition-slow);
}

.chat-header {
  padding: 1.2rem 1.8rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  background: rgba(12, 11, 30, 0.6);

}

.chat-header-info h2 {
  font-family: var(--font-divine);
  font-size: 1.4rem;
  color: var(--color-text-primary);
  font-weight: 700;
}

.chat-header-info p {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--chat-accent-color, var(--color-gold));
  font-weight: 600;
}

.chat-messages {
  flex-grow: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Starter prompt chips shown after greeting in a fresh chat */
.chat-starter-prompts {
  align-self: center;
  max-width: 90%;
  margin-top: 0.25rem;
  padding: 0.85rem 1rem 0.9rem;
  background: rgba(212, 175, 55, 0.04);
  border: 1px dashed rgba(212, 175, 55, 0.18);
  border-radius: 14px;
  animation: messageFadeIn 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.chat-starter-label {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-gold, #d4af37);
  opacity: 0.85;
  margin-bottom: 0.55rem;
}
.chat-starter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}
.chat-starter-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 215, 0, 0.22);
  color: var(--color-text-primary, #f5f1e6);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--transition-fast, 180ms ease), border-color var(--transition-fast, 180ms ease), transform var(--transition-fast, 180ms ease);
  font-family: inherit;
  line-height: 1.25;
}
.chat-starter-chip:hover,
.chat-starter-chip:focus-visible {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-1px);
}

.chat-bubble {
  max-width: 80%;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  line-height: 1.6;
  font-size: 0.98rem;
  position: relative;
  animation: messageFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes messageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-bubble.user {
  align-self: flex-end;
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.15);
  color: var(--color-text-primary);
  border-bottom-right-radius: 4px;
}

.chat-bubble.deity {
  align-self: flex-start;
  background: var(--chat-card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-left: 3px solid var(--chat-accent-color, var(--color-gold));
}

.chat-bubble .message-text {
  white-space: pre-wrap;
}

.chat-bubble .message-meta {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  text-align: right;
  font-family: var(--font-body);
}

.chat-bubble.deity .message-meta {
  color: var(--chat-accent-color, var(--color-text-muted));
  opacity: 0.7;
}

/* Shloka integration in chat bubble */
.chat-shloka {
  background: rgba(255, 215, 0, 0.02);
  border: 1px solid rgba(255, 215, 0, 0.08);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.8rem;
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.01);
}

.chat-shloka-sanskrit {
  font-family: var(--font-sanskrit);
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.chat-shloka-translation {
  font-style: italic;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  line-height: 1.4;
}

.chat-shloka-source {
  font-size: 0.72rem;
  color: var(--chat-accent-color, var(--color-gold));
  text-align: right;
  margin-top: 0.4rem;
  font-family: var(--font-divine);
  font-weight: 600;
  text-transform: uppercase;
}

/* Chat bubble actions */
.chat-bubble-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.6rem;
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 0.5rem;
}

.chat-bubble-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-family: var(--font-body);
  transition: var(--transition-fast);
  padding: 0.1rem 0.3rem;
}

.chat-bubble-btn:hover {
  color: var(--chat-accent-color, var(--color-text-primary));
}

.chat-bubble-btn i {
  width: 13px;
  height: 13px;
}

/* Typing Indicator (Serene pulse animation) */
.typing-indicator {
  padding: 0.8rem 1.2rem;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  margin-left: 1.5rem;
  margin-bottom: 1.2rem;
  border-left: 3px solid var(--chat-accent-color, var(--color-gold));
}

.typing-indicator .dot {
  width: 6px;
  height: 6px;
  background: var(--chat-accent-color, var(--color-gold));
  border-radius: 50%;
  animation: wave 1.2s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}

.typing-indicator .typing-label {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-left: 0.5rem;
  font-style: italic;
}

@keyframes wave {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* Chat Input Bar */
.chat-input-form {
  padding: 1rem 1.5rem;
  background: var(--color-bg-card);

  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 0.75rem;
  z-index: 1;
}

#chat-input {
  flex: 1;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: 30px;
  padding: 0.75rem 1.5rem;
  color: var(--color-text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition-normal);
}

#chat-input:focus {
  border-color: var(--chat-accent-color, var(--color-gold));
  box-shadow: 0 0 15px var(--chat-glow-color, rgba(255, 215, 0, 0.1));
}

.chat-send-btn {
  background: linear-gradient(135deg, var(--chat-accent-color, var(--color-gold)), #ff9800);
  border: none;
  color: #070610;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.chat-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px var(--chat-glow-color, rgba(255, 215, 0, 0.3));
}

/* AI Settings Dropdown */
.chat-settings-dropdown {
  position: absolute;
  top: 75px;
  right: 20px;
  width: 320px;
  padding: 1.5rem;
  z-index: 100;
  border: 1px solid var(--color-border);
  background: rgba(12, 11, 30, 0.96);


  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border-radius: 14px;
  animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-top: 3px solid var(--chat-accent-color, var(--color-gold));
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-settings-dropdown h4 {
  font-family: var(--font-divine);
  color: var(--chat-accent-color, var(--color-gold));
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.chat-settings-dropdown p {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.chat-settings-dropdown .form-group {
  margin-bottom: 1.2rem;
}

.chat-settings-dropdown label {
  display: block;
  font-family: var(--font-divine);
  font-size: 0.75rem;
  color: var(--chat-accent-color, var(--color-gold));
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.chat-settings-dropdown input, .chat-settings-dropdown select {
  width: 100%;
  background: rgba(18, 16, 38, 0.95);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-primary);
  padding: 0.5rem 0.8rem;
  font-size: 0.85rem;
  outline: none;
  transition: var(--transition-fast);
}

.chat-settings-dropdown select option {
  background: #0c0b1e;
  color: var(--color-text-primary);
}

.chat-settings-dropdown input:focus, .chat-settings-dropdown select:focus {
  border-color: var(--chat-accent-color, var(--color-gold));
  background: rgba(255, 255, 255, 0.05);
}

.chat-settings-dropdown .settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.chat-settings-dropdown .settings-actions button {
  padding: 0.45rem 1rem;
  font-size: 0.75rem;
  border-radius: 20px;
}

.chat-settings-dropdown .get-key-link {
  font-size: 0.75rem;
  color: var(--chat-accent-color, var(--color-gold));
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
}

.chat-settings-dropdown .get-key-link:hover {
  text-decoration: underline;
}

.chat-settings-dropdown .get-key-link i {
  width: 12px;
  height: 12px;
}

.ai-badge {
  font-size: 0.65rem;
  background: linear-gradient(135deg, #00f2fe, #4facfe);
  color: #070610;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.app-footer {
  background: rgba(7, 6, 16, 0.9);
  border-top: 1px solid var(--color-border);
  padding: 2rem 1.5rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
}

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

.app-footer p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

@media (min-width: 769px) {
  .nav-btn span {
    display: none !important;
  }
  .app-logo p {
    display: none !important;
  }
  .header-container {
    padding: 0.75rem 1rem;
  }
  /* Icon-only nav (769–1399px): tighter button padding so the 8 nav icons + logo +
     5 controls fit one row inside the 1200px cap on common laptops. Restored to the
     roomier labelled padding at ≥1400px below. */
  .nav-btn {
    padding: 0.6rem 0.9rem;
  }
  .app-nav {
    gap: 0.25rem;
  }
  .header-controls {
    gap: 0.5rem;
  }
}

/* ≥1400px: widen the cap to 1400 so the icon-only header (~1330px of logo + 8 nav
   icons + controls) sits comfortably on one row. Text labels are deliberately NOT
   restored — a labelled 8-item horizontal nav measures ~1224px on its own (~2130px
   total), which can't fit any realistic container, so the nav stays icon-only at every
   width ≥769px. The Dakshina label does fit here, so it's shown again below. */
@media (min-width: 1400px) {
  .header-container {
    max-width: 1400px;
  }
}

@media (max-width: 992px) {
  .shrine-container, .chat-container {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .shrine-sidebar, .chat-sidebar {
    max-height: 220px;
  }
  
  .chat-window-wrapper {
    height: 500px;
  }

  .journal-layout {
    grid-template-columns: 1fr;
  }
  
  .journal-logs {
    max-height: 500px;
  }
}

/* Mid-range (769–1399px): even with the icon-only nav, logo + nav + 5 controls
   (~1330px) is wider than the ≤1200px container here, so drop the nav onto its own
   centred second row rather than overflowing (the header would otherwise scroll the
   page sideways). Row 1 keeps the logo (left) and controls (right); row 2 is the
   centred nav. Relies on the base .header-container flex-wrap. The Dakshina label is
   hidden so row 1 stays compact down to ~770px. At ≥1400px the container widens to
   1400 and the icon header fits one line; at ≤768px the column/bottom-nav layout
   takes over instead. */
@media (min-width: 769px) and (max-width: 1399px) {
  .app-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }
  .dakshina-btn-label {
    display: none;
  }
  /* Trim horizontal padding + control spacing so the logo (left) and controls (right)
     keep to a single first row down to ~770px, rather than the controls wrapping to a
     third row. Base flex-wrap still catches any extreme case (e.g. a very wide language
     label) gracefully. */
  .header-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .header-controls {
    gap: 0.4rem;
  }
}

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  /* The five header controls can't fit one line on phones; let them wrap onto a
     centred second row instead of overflowing the viewport (horizontal scroll).
     Applied across the whole ≤768 mobile range, not just ≤480, so large phones and
     small tablets in portrait are covered too. */
  .header-controls {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  /* Icon-only Dakshina button (heart + title tooltip) keeps the control row compact. */
  .dakshina-btn-label {
    display: none;
  }

  .app-nav {
    width: 100%;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }
  
  .nav-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .hero-counsel {
    padding: 2rem 1rem;
  }
  
  .input-wrapper {
    flex-direction: column;
    border-radius: 16px;
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .search-icon {
    display: none;
  }
  
  .input-wrapper input {
    width: 100%;
    text-align: center;
  }
  
  .seek-submit-btn {
    width: 100%;
  }
  
  .deity-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-card {
    padding: 0.5rem;
  }
  
  .wisdom-modal-header, .wisdom-modal-body, .wisdom-modal-footer {
    padding: 1.2rem;
  }
  
  .shloka-sanskrit {
    font-size: 1.1rem;
  }

  /* Responsive Shrine & Chat selectors horizontal conversions */
  .shrine-container, .chat-container {
    grid-template-columns: 1fr;
    gap: 1rem;
    height: auto;
    min-height: auto;
  }
  
  .shrine-sidebar, .chat-sidebar {
    max-height: none !important;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--color-border);
    border-radius: 12px;
  }
  
  .shrine-sidebar h3, .chat-sidebar h3 {
    display: none !important;
  }
  
  .shrine-deity-selector, .chat-deity-selector {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.5rem;
    padding: 0.2rem 0;
    width: 100%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  .shrine-deity-selector::-webkit-scrollbar,
  .chat-deity-selector::-webkit-scrollbar {
    height: 4px;
  }
  
  .shrine-deity-selector::-webkit-scrollbar-thumb,
  .chat-deity-selector::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.15);
    border-radius: 2px;
  }
  
  .shrine-select-card, .chat-select-card {
    flex-direction: row;
    flex: 0 0 auto;
    padding: 0.45rem 0.8rem;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    gap: 0.25rem;
    width: auto;
    min-height: auto;
    background: rgba(18, 16, 38, 0.5);
  }
  
  .shrine-select-card h5, .chat-select-card h5 {
    font-size: 0.78rem !important;
    margin: 0 !important;
    white-space: nowrap;
  }
  
  .shrine-select-card span, .chat-select-card span {
    display: none !important;
  }
}

/* ==========================================================================
   DAILY ENGAGEMENT MODULE
   ========================================================================== */

/* Sanctuary Widgets Grid */
.sanctuary-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
  .sanctuary-widgets {
    grid-template-columns: 1fr;
  }
}

.widget-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 280px;
  justify-content: space-between;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.widget-title-box h4 {
  font-family: var(--font-divine);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 0.15rem;
}

.widget-subtitle {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.widget-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
}

/* Daily Sadhana Diyas */
.sadhana-diyas {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  margin-bottom: 0.25rem;
}

.diya-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  position: relative;
}

.diya-lamp {
  font-size: 1.6rem;
  opacity: 0.3;
  filter: grayscale(100%);
  transition: opacity var(--transition-fast), filter var(--transition-fast);
  position: relative;
  cursor: default;
}

.diya-item.completed .diya-lamp {
  opacity: 1;
  filter: grayscale(0%);
}

.diya-item.completed {
  color: var(--color-gold);
}

.diya-flame {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.diya-item.completed .diya-flame {
  opacity: 1;
  animation: flameFlicker 1.2s infinite alternate ease-in-out;
}

@keyframes flameFlicker {
  0% { transform: translateX(-50%) scale(1) rotate(-1deg); filter: drop-shadow(0 0 3px rgba(255, 152, 0, 0.6)); }
  100% { transform: translateX(-50%) scale(1.15) rotate(1deg); filter: drop-shadow(0 0 7px rgba(255, 87, 34, 0.9)); }
}

/* Daily Sadhana Checklist */
.sadhana-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.8rem;
}

.sadhana-checklist h5 {
  font-family: var(--font-divine);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  margin-bottom: 0.2rem;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
}

.checklist-item input[type="checkbox"] {
  accent-color: var(--color-gold);
  cursor: pointer;
  width: 15px;
  height: 15px;
}

/* Auto-tasks are status indicators driven by user actions, not interactive controls. */
.checklist-item.auto-task input[type="checkbox"] {
  cursor: help;
  opacity: 0.75;
}
.checklist-item.auto-task input[type="checkbox"]:checked {
  opacity: 1;
}
.checklist-item.auto-task label {
  cursor: help;
}

.checklist-item.completed {
  color: var(--color-text-muted);
}
.checklist-item.completed label {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Daily Panchang & Hora Styles */
.panchang-celestial-display {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.4rem 0;
}

.moon-phase-container, .hora-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.moon-phase-container span, .hora-gauge-container span {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.moon-phase-glow {
  font-size: 2rem;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
  animation: celestialPulse 4s infinite alternate ease-in-out;
}

.hora-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-gold);
  background: rgba(255, 215, 0, 0.05);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
  text-transform: uppercase;
  animation: celestialPulse 4s infinite alternate ease-in-out -2s;
}

@keyframes celestialPulse {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.06); opacity: 1; }
}

.panchang-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.8rem;
}

.panchang-detail {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 0.4rem;
  border-radius: 8px;
}

.detail-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.detail-val {
  font-size: 0.8rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

.text-warning { color: var(--color-rajas) !important; }
.text-success { color: var(--color-sattva) !important; }

/* Shrine Mode Toggle */
.shrine-mode-toggle {
  display: flex;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
  border-radius: 30px;
  padding: 0.2rem;
  margin-bottom: 1.2rem;
}

.mode-toggle-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  padding: 0.45rem;
  min-height: var(--btn-min-touch);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}

.mode-toggle-btn.active {
  background: var(--altar-accent-color, var(--color-gold));
  color: #070610;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Breathwork Altar styles */
.breath-counter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  text-align: center;
  width: 100%;
  margin-bottom: 1rem;
}

.breath-display {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.breath-phase {
  font-family: var(--font-divine);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--altar-accent-color, var(--color-gold));
  min-height: 1.8rem;
}

.breath-timer {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.breath-settings {
  text-align: left;
}

.small-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 0.25rem;
}

.breath-settings-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.breath-settings-row select {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  padding: 0.55rem;
  outline: none;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.breath-settings-row select:focus {
  border-color: var(--altar-accent-color, var(--color-gold));
}

#breath-mute-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  width: 35px;
  height: 35px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

#breath-mute-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--altar-accent-color, var(--color-border-hover));
  color: var(--color-text-primary);
}

#breath-mute-btn.muted {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background: rgba(255, 0, 0, 0.02);
}

.breath-controls-row {
  display: flex;
  gap: 0.5rem;
}

.mb-0 { margin-bottom: 0 !important; }

/* Guna Analytics Card Styles */
.guna-analytics-card {
  padding: 1.2rem;
  margin-bottom: 1.5rem;
  border-color: rgba(255, 255, 255, 0.05);
}

.analytics-header {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.6rem;
}

.analytics-header h4 {
  font-family: var(--font-divine);
  font-size: 1.1rem;
  color: var(--color-gold);
  font-weight: 700;
}

.analytics-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.analytics-chart-container {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.02);
  padding: 0.25rem;
  position: relative;
  margin-bottom: 0.8rem;
}

.guna-recommendation {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: rgba(255, 215, 0, 0.02);
  border: 1px solid rgba(255, 215, 0, 0.08);
  border-radius: 8px;
  padding: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.rec-icon {
  color: var(--color-gold);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.1rem;
}

.rec-link {
  color: var(--color-gold);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 215, 0, 0.4);
  font-weight: 500;
  transition: var(--transition-fast);
}

.rec-link:hover {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

/* Blessing Unlock Modal Card */
.blessing-card {
  max-width: 440px;
  padding: 2.2rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  border: 1.5px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.1), 0 10px 40px rgba(0, 0, 0, 0.8);
}

.blessing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-gold), #ff5722, var(--color-gold));
  opacity: 0.9;
}

.blessing-badge-ring {
  position: relative;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.blessing-diya {
  font-size: 2.6rem;
  z-index: 2;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.glowing-aura {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.4) 0%, transparent 70%);
  z-index: 1;
  animation: auraPulse 3s infinite alternate ease-in-out;
}

@keyframes auraPulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.1); opacity: 1; }
}

.blessing-title {
  font-family: var(--font-divine);
  font-size: 1.5rem;
  color: var(--color-gold);
  margin-bottom: 0.15rem;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

.blessing-streak-text {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.blessing-quote-box {
  background: rgba(255, 215, 0, 0.02);
  border: 1px solid rgba(255, 215, 0, 0.08);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.01);
}

.sanskrit-blessing {
  font-family: var(--font-sanskrit);
  font-size: 1.05rem;
  color: var(--color-text-primary);
  line-height: 1.4;
  text-align: center;
}

.translation-blessing {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}

.blessing-source {
  font-size: 0.7rem;
  color: var(--color-gold);
  font-family: var(--font-divine);
  align-self: center;
}

.blessing-footer {
  width: 100%;
}
.blessing-footer button {
  width: 100%;
  padding: 0.75rem 2rem;
}

/* ==========================================================================
   VISUAL JAPA BEADS SYSTEM
   ========================================================================== */
.japa-beads-container {
  position: absolute;
  width: 250px;
  height: 250px;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.japa-bead {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f6ca8a 8%, #b27329 45%, #60370b 100%);
  border: 1px solid rgba(0, 0, 0, 0.45);
  top: 50%;
  left: 50%;
  margin-top: -6.5px;
  margin-left: -6.5px;
  transform-origin: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, background 0.2s ease;
}

.japa-bead:hover {
  transform: scale(1.35);
  box-shadow: 0 0 12px var(--altar-accent-color, var(--color-gold));
  filter: brightness(1.1);
}

.japa-bead.sumeru-bead {
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  margin-left: -8.5px;
  background: radial-gradient(circle at 35% 35%, #ff8a80 10%, #d50000 60%, #4a0000 100%);
  border-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 3px 6px rgba(0,0,0,0.7), inset 0 1px 1px rgba(255,255,255,0.25);
}

.japa-bead.spacer-bead {
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  background: radial-gradient(circle at 35% 35%, #fff176 10%, #fbc02d 55%, #f57f17 100%);
  border-color: rgba(139, 110, 0, 0.5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55), 0 0 4px rgba(255, 215, 0, 0.15);
}

.japa-bead.active {
  background: radial-gradient(circle at 35% 35%, #ffffff 5%, var(--altar-accent-color, var(--color-gold)) 55%, #e65100 100%) !important;
  box-shadow: 0 0 16px var(--altar-accent-color, var(--color-gold)), 0 0 6px #fff !important;
  animation: beadPulse 1.2s infinite alternate ease-in-out;
}

@keyframes beadPulse {
  0% { transform: scale(1.15); filter: brightness(1); }
  100% { transform: scale(1.3); filter: brightness(1.25); }
}

/* ==========================================================================
   BREATHWORK OVERLAYS
   ========================================================================== */
.deity-focus-symbol {
  flex-direction: column;
}

.focus-symbol-char {
  transition: transform var(--transition-normal);
}

.breath-instruction {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  z-index: 3;
  margin-top: -0.25rem;
}

.breath-instruction-text {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--altar-accent-color, var(--color-gold));
  font-weight: 700;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.breath-instruction-timer {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.1;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* ==========================================================================
   DEVOTION BLESSINGS ALTAR CHEST
   ========================================================================== */
.blessings-chest-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.chest-box {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.chest-box:hover {
  transform: scale(1.1);
  border-color: var(--color-gold);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.25);
}

.chest-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  z-index: 1;
}

.chest-box:hover .chest-glow {
  opacity: 1;
}

.chest-icon {
  font-size: 2.2rem;
  z-index: 2;
  transition: transform 0.2s ease;
}

.chest-box:active .chest-icon {
  transform: scale(0.9);
}

@keyframes chestWiggle {
  0%, 100% { transform: scale(1) rotate(0); }
  15% { transform: scale(1.15) rotate(-12deg); }
  30% { transform: scale(1.15) rotate(10deg); }
  45% { transform: scale(1.15) rotate(-8deg); }
  60% { transform: scale(1.15) rotate(6deg); }
  75% { transform: scale(1.1) rotate(-4deg); }
  90% { transform: scale(1.05) rotate(2deg); }
}

.chest-box.wiggle {
  animation: chestWiggle 0.8s ease-in-out;
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.5) !important;
}

.chest-box.wiggle .chest-glow {
  opacity: 1 !important;
}

.chest-status-text {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 0.5rem;
}

.blessings-grid {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  padding-top: 0.8rem;
  width: 100%;
}

.blessing-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
}

.blessing-badge span.badge-lock {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.blessing-badge span.badge-diya {
  font-size: 1.25rem;
}

.blessing-badge.locked {
  filter: grayscale(100%);
  opacity: 0.4;
}

.blessing-badge.unlocked {
  background: rgba(255, 215, 0, 0.05);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.1);
}

.blessing-badge.unlocked:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

/* ==========================================================================
   SCRIPTURE LIBRARY TAB STYLE
   ========================================================================== */
.library-container {
  padding: 1.8rem;
  background: var(--color-bg-card);
  border-radius: 18px;
  border: 1px solid var(--color-border);
}

.library-search-bar {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.lib-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(18, 16, 38, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 30px;
  padding: 0 1.5rem;
}

.lib-search-input-wrapper:focus-within {
  border-color: var(--color-gold);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

.lib-search-icon {
  color: var(--color-text-muted);
  margin-right: 0.75rem;
}

.lib-search-input-wrapper input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: 0.95rem;
  padding: 0.75rem 0;
  outline: none;
}

.lib-category-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lib-filter-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 0.45rem 1.1rem;
  min-height: var(--btn-min-touch);
  border-radius: 20px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: var(--font-body);
}

.lib-filter-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
}

.lib-filter-btn.active {
  background: rgba(255, 215, 0, 0.08);
  color: var(--color-gold);
  border-color: rgba(255, 215, 0, 0.25);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.05);
}

.scriptures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.scripture-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(18, 16, 38, 0.4);
  padding: 1.5rem;
  border-radius: 12px;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.scripture-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--deity-accent, var(--color-gold));
  opacity: 0.6;
}

.scripture-card:hover {
  transform: translateY(-3px);
  border-color: var(--deity-accent, var(--color-border-hover));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 15px var(--deity-glow, rgba(255, 215, 0, 0.05));
}

.scripture-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.scripture-card-source {
  font-family: var(--font-divine);
  font-size: 0.72rem;
  color: var(--deity-accent, var(--color-gold));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.scripture-card-badge {
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  text-transform: capitalize;
}

.scripture-card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}

.scripture-sanskrit {
  font-family: var(--font-sanskrit);
  font-size: 1.05rem;
  text-align: center;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.scripture-translit {
  font-size: 0.78rem;
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.4;
}

.scripture-translation {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
  padding-top: 0.6rem;
}

.scripture-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.8rem;
  margin-top: auto;
}

.scripture-card-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 0.35rem 0.8rem;
  border-radius: 15px;
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: var(--transition-fast);
  font-family: var(--font-body);
}

.scripture-card-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--deity-accent, var(--color-text-primary));
  border-color: var(--deity-accent, var(--color-border-hover));
}

.scripture-card-btn i {
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   DYNAMIC PANCHANG CELL ALERTS
   ========================================================================== */
.panchang-detail.alert-active-rahu {
  border-color: rgba(255, 87, 34, 0.4) !important;
  background: rgba(255, 87, 34, 0.04) !important;
  box-shadow: 0 0 10px rgba(255, 87, 34, 0.1) !important;
}

.panchang-detail.alert-active-abhijit {
  border-color: rgba(76, 175, 80, 0.4) !important;
  background: rgba(76, 175, 80, 0.04) !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.1) !important;
}

/* ==========================================================================
   DEVOTIONAL MOTIVATION - AURA & SANKALPA CARD
   ========================================================================== */
#tejas-sankalpa-card {
  min-height: 280px;
}

.tejas-sankalpa-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1.2rem;
  align-items: center;
  margin-top: 0.25rem;
}

@media (max-width: 480px) {
  .tejas-sankalpa-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Logo adjustments */
  .logo-text h1 {
    font-size: 1.25rem;
  }
  .logo-text p {
    display: none !important; /* Hide sub-logo text on small mobile screens */
  }
  .app-logo {
    gap: 0.4rem;
  }
  .logo-symbol {
    font-size: 1.6rem;
  }
  
  /* Header navigation alignment */
  .app-header {
    padding: 0.5rem 0;
  }
  .header-container {
    gap: 0.75rem;
  }
  .app-nav {
    gap: 0.3rem;
  }
  .nav-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.72rem;
    gap: 0.25rem;
  }
  .nav-btn i {
    width: 13px;
    height: 13px;
  }
  
  /* Header controls */
  .header-controls {
    gap: 0.5rem;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .profile-chip {
    padding: 0.3rem 0.6rem;
    gap: 0.4rem;
  }
  .profile-avatar {
    font-size: 1rem;
  }
  .profile-name {
    font-size: 0.75rem;
  }
  .profile-deity {
    display: none !important; /* Hide active deity tag in header profile chip to save width */
  }
  .profile-arrow {
    display: none !important; /* Hide dropdown arrow on very narrow screen Profile Chips */
  }
  .header-dakshina-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
  }
  
  /* Quote ticker */
  .quote-ticker-container {
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
  }
  
  /* Daily Sadhana checklist card */
  .sadhana-checklist {
    gap: 0.4rem;
  }
  .checklist-item label {
    font-size: 0.75rem;
  }
  
  /* Sanctuary widgets details spacing */
  .panchang-celestial-display {
    gap: 1rem;
  }
  .panchang-details-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .panchang-detail {
    padding: 0.4rem;
  }
  
  /* Altar & Shrine */
  .shrine-altar {
    padding: 1rem;
    border-radius: 12px;
  }
  .shrine-header h2 {
    font-size: 1.6rem;
  }
  .shrine-header p {
    font-size: 0.72rem;
    letter-spacing: 1px;
  }
  .mandala-container {
    width: 200px;
    height: 200px;
  }
  .deity-focus-symbol {
    width: 60px;
    height: 60px;
  }
  .focus-symbol-char {
    font-size: 1.8rem;
  }
  .breath-instruction-text {
    font-size: 0.7rem;
  }
  .breath-instruction-timer {
    font-size: 0.8rem;
  }
  .shrine-mode-toggle {
    margin-bottom: 0.8rem;
    border-radius: 20px;
  }
  .mode-toggle-btn {
    font-size: 0.7rem;
    padding: 0.35rem 0.2rem;
  }
  .altar-actions {
    gap: 0.5rem;
    width: 100%;
  }
  .altar-btn {
    flex: 1;
    padding: 0.45rem 0.6rem;
    font-size: 0.75rem;
    gap: 0.3rem;
  }
  .altar-btn i {
    width: 13px;
    height: 13px;
  }
  
  /* Chat window details */
  .chat-header {
    padding: 0.75rem 1rem;
  }
  .chat-header-info h2 {
    font-size: 1.15rem;
  }
  .chat-header-info p {
    font-size: 0.7rem;
  }
  .chat-header-actions {
    gap: 0.3rem;
  }
  .chat-header-actions .altar-btn {
    padding: 0.35rem 0.5rem;
    font-size: 0; /* Hide text, show only icon on small mobile */
  }
  .chat-header-actions .altar-btn i {
    width: 14px;
    height: 14px;
  }
  .chat-header-actions .btn-text,
  .chat-header-actions #chat-voice-text {
    display: none !important; /* Force hide text nodes on mobile buttons */
  }
  
  .chat-window-wrapper {
    height: 450px;
    border-radius: 12px;
  }
  .chat-messages {
    padding: 0.8rem;
    gap: 0.6rem;
  }
  .message-bubble {
    padding: 0.6rem 0.8rem;
    font-size: 0.82rem;
    max-width: 90%;
  }
  .message-bubble.deity-msg {
    border-radius: 4px 16px 16px 16px;
  }
  .message-bubble.user-msg {
    border-radius: 16px 16px 4px 16px;
  }
  .bubble-footer {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
  }
  .bubble-btn {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
  }
  
  .chat-input-form {
    padding: 0.6rem 0.8rem;
    gap: 0.5rem;
  }
  #chat-input {
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
  }
  .chat-mic-btn, .chat-send-btn {
    width: 36px;
    height: 36px;
  }
  .chat-mic-btn i, .chat-send-btn i {
    width: 14px;
    height: 14px;
  }
  
  /* Wisdom outputs modal */
  .modal-card {
    margin: 0.5rem;
    max-height: 95vh;
  }
  .wisdom-modal-header h3 {
    font-size: 1.1rem;
  }
  .shloka-box {
    padding: 0.8rem;
    border-radius: 8px;
  }
  .shloka-sanskrit {
    font-size: 1rem;
    line-height: 1.4;
  }
  .shloka-translit {
    font-size: 0.78rem;
  }
  .shloka-translation {
    font-size: 0.8rem;
  }
  .guidance-box p {
    font-size: 0.82rem;
    line-height: 1.4;
  }
}

/* Aura / Tejas Progress Circle */
.aura-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.aura-progress-container {
  position: relative;
  width: 105px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aura-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.aura-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.03);
  stroke-width: 7;
}

.aura-ring-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease;
  stroke: var(--aura-color, var(--color-gold));
  filter: drop-shadow(0 0 6px var(--aura-glow, var(--color-gold-glow)));
}

.aura-center {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aura-symbol {
  font-family: var(--font-divine);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--aura-color, var(--color-gold));
  text-shadow: 0 0 10px var(--aura-glow, var(--color-gold-glow));
  animation: auraPulse 3s infinite alternate ease-in-out;
  user-select: none;
}

/* Removed a duplicate `@keyframes auraPulse` that animated `filter: drop-shadow`
   every frame. Being defined after the compositor-only version (transform+opacity,
   see ~line 3559) it silently won the cascade for BOTH .glowing-aura and
   #aura-symbol, forcing #aura-symbol (always visible in Sanctuary) to repaint its
   drop-shadow on every scroll frame — the cause of Sanctuary's ~42fps scroll
   (measured: removing it restores ~59fps; see scratch/perf/REPORT.md). The static
   text-shadow on .aura-symbol already supplies the glow halo and is free during
   scroll; the pulse is now scale+opacity only. Do NOT re-add an animated
   filter/box-shadow/text-shadow keyframe here (compositor guardrail). */

.aura-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.aura-title {
  font-family: var(--font-divine);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--aura-color, var(--color-text-primary));
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px var(--aura-glow);
}

.aura-points {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

/* Aura Level Dynamic Classes */
.aura-level-1 {
  --aura-color: #e05315;
  --aura-glow: rgba(224, 83, 21, 0.35);
}

.aura-level-2 {
  --aura-color: #e5b842;
  --aura-glow: rgba(229, 184, 66, 0.45);
}

.aura-level-3 {
  --aura-color: #10b981;
  --aura-glow: rgba(16, 185, 129, 0.45);
}

.aura-level-4 {
  --aura-color: #06b6d4;
  --aura-glow: rgba(6, 182, 212, 0.5);
}

.aura-level-5 {
  --aura-color: #a855f7;
  --aura-glow: rgba(168, 85, 247, 0.55);
}

/* Sankalpa Column Details */
.sankalpa-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.sankalpa-setup, .sankalpa-active, .sankalpa-completed {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: fadeIn var(--transition-normal);
}

#sankalpa-preset-select {
  background: rgba(18, 16, 38, 0.85);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  outline: none;
  width: 100%;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color var(--transition-fast);
}

#sankalpa-preset-select:focus {
  border-color: var(--color-gold);
}

#sankalpa-custom-input {
  background: rgba(18, 16, 38, 0.85);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  outline: none;
  width: 100%;
  font-family: var(--font-body);
  transition: border-color var(--transition-fast);
}

#sankalpa-custom-input:focus {
  border-color: var(--color-gold);
}

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 0.8rem; }

/* Active Sankalpa Parchment */
.sankalpa-parchment {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.04) 0%, rgba(255, 152, 0, 0.01) 100%);
  border: 1px dashed rgba(255, 215, 0, 0.22);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.6rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), inset 0 0 15px rgba(255, 215, 0, 0.01);
}

.parchment-label {
  font-size: 0.72rem;
  color: var(--color-gold);
  font-family: var(--font-divine);
  text-transform: uppercase;
  letter-spacing: 0.75px;
  margin-bottom: 0.2rem;
}

.parchment-text {
  font-size: 0.88rem;
  color: var(--color-text-primary);
  font-style: italic;
  line-height: 1.35;
}

.sankalpa-actions-row {
  display: flex;
  gap: 0.4rem;
}

.sankalpa-actions-row button {
  flex: 1;
}

/* Completed Badge */
.sankalpa-complete-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.25);
  border-radius: 20px;
  color: var(--color-sattva);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  align-self: flex-start;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.05);
}

.sankalpa-success-msg {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  line-height: 1.3;
}

/* Floating Gold Particle Overlay */
.gold-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.9));
  animation: goldFloat 1.6s ease-out forwards;
}

@keyframes goldFloat {
  100% {
    transform: translate(var(--dx, 0px), var(--dy, -120px)) scale(1.1) rotate(var(--rot, 360deg));
    opacity: 0;
  }
}

/* ==========================================================================
   PERSONALIZATION & PROFILE SYSTEM
   ========================================================================== */

/* Header controls wrapper */
.header-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Profile Chip */
.profile-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 30px;
  padding: 0.35rem 1rem 0.35rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  position: relative;
  transition: var(--transition-fast);
  user-select: none;
}

.profile-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-border-hover);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.08);
}

.profile-avatar {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.profile-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-primary);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-deity {
  font-size: 0.68rem;
  color: var(--color-gold);
  font-family: var(--font-divine);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.profile-arrow {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.profile-chip:hover .profile-arrow {
  color: var(--color-text-primary);
}

.profile-chip.active .profile-arrow {
  transform: rotate(180deg);
}

/* Profile Dropdown Menu */
.profile-dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  width: 180px;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  z-index: 100;
  border-radius: 12px;
  background: rgba(12, 11, 30, 0.96);


  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-border);
  animation: dropdownFadeIn 0.2s ease-out;
}

.profile-chip.active .profile-dropdown {
  display: flex;
}

.dropdown-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-fast);
  text-align: left;
  width: 100%;
}

.dropdown-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-gold);
}

.dropdown-btn i {
  width: 14px;
  height: 14px;
}

/* Initiation Form Styles */
.login-card {
  width: 100%;
  max-width: 480px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border: 1.5px solid rgba(255, 215, 0, 0.15);
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.08), 0 10px 40px rgba(0, 0, 0, 0.8);
  margin: auto;
}

.initiation-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.initiation-symbol {
  font-family: var(--font-divine);
  font-size: 3rem;
  background: linear-gradient(135deg, var(--color-gold), #ff5722);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.initiation-header h3 {
  font-family: var(--font-divine);
  font-size: 1.6rem;
  color: var(--color-text-primary);
  font-weight: 700;
}

.initiation-header p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-top: 0.25rem;
}

.initiation-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.initiation-form input[type="text"] {
  width: 100%;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition-fast);
}

.initiation-form input[type="text"]:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
}

/* Deity Selection Grid */
.deity-select-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.deity-select-option {
  background: rgba(18, 16, 38, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
}

.deity-select-option:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
}

.deity-select-option.active {
  border-color: var(--color-gold);
  background: rgba(255, 215, 0, 0.05);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.1);
}

.deity-opt-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.deity-opt-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.deity-select-option.active .deity-opt-name {
  color: var(--color-gold);
}

.initiation-submit-btn {
  padding: 0.8rem 2rem;
  font-size: 0.92rem;
  margin-top: 0.5rem;
}

/* Profiles List in Login */
.profiles-list-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.profiles-list-section .divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.5rem 0;
}

.profiles-list-title {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.profiles-list-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 140px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.existing-profile-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.existing-profile-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-gold);
}

.profile-card-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.profile-card-avatar {
  font-size: 1.1rem;
}

.profile-card-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.profile-card-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.profile-card-deity {
  font-size: 0.7rem;
  color: var(--color-gold);
  font-family: var(--font-divine);
  text-transform: capitalize;
}

.profile-card-streak {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Japa Mala Statistics */
.japa-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.2rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.japa-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.japa-stat-lbl {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.japa-stat-val {
  font-family: var(--font-divine);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.japa-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0 0.25rem;
}

.text-danger {
  color: #ff5252 !important;
}

.text-danger:hover {
  color: #ff8a80 !important;
  text-shadow: 0 0 10px rgba(255, 82, 82, 0.2);
}

/* --- INTERACTIVE SHRINE ROOM RITUALS & MANTRAS --- */
.ritual-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  border-radius: 50%;
}

.arati-lamp-overlay {
  position: absolute;
  font-size: 2.2rem;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 0 15px #ff9800, 0 0 30px #ff5722, 0 0 45px #ff2a00;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  animation: aratiGlow 1.5s infinite alternate ease-in-out;
}

@keyframes aratiGlow {
  0% { filter: drop-shadow(0 0 5px rgba(255, 152, 0, 0.5)); transform: translate(-50%, -50%) scale(0.95); }
  100% { filter: drop-shadow(0 0 20px rgba(255, 87, 34, 0.9)); transform: translate(-50%, -50%) scale(1.08); }
}

.rituals-panel-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: fadeIn var(--transition-normal);
}

.ritual-type-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
}

.ritual-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  font-family: var(--font-divine);
  font-weight: 600;
  font-size: 0.8rem;
  transition: var(--transition-fast);
  border-radius: 6px;
  text-align: center;
}

.ritual-tab-btn:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.ritual-tab-btn.active {
  color: var(--chat-accent-color, var(--color-gold));
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.03);
  border-bottom: 2px solid var(--chat-accent-color, var(--color-gold));
  border-radius: 6px 6px 0 0;
}

.ritual-sub-panel {
  animation: fadeIn var(--transition-normal);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.offering-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.offering-liquid-btn, .offering-fire-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 0.55rem 0.4rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  transition: var(--transition-fast);
  text-align: center;
}

.offering-liquid-btn:hover, .offering-fire-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
}

.offering-liquid-btn.active, .offering-fire-btn.active {
  border-color: var(--chat-accent-color, var(--color-gold));
  background: rgba(255, 215, 0, 0.04);
  color: var(--color-text-primary);
  box-shadow: 0 0 8px var(--chat-glow-color, rgba(255, 215, 0, 0.08));
}

.mantra-panel-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: fadeIn var(--transition-normal);
}

.mantra-display-card {
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25) !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
}

.mantra-display-sanskrit {
  color: var(--color-text-primary);
  text-shadow: 0 0 12px var(--chat-accent-color, rgba(255, 215, 0, 0.2));
  font-weight: 600;
}

.mantra-buttons-row button {
  transition: var(--transition-fast);
}

.mantra-buttons-row button:hover {
  transform: translateY(-1px);
}

/* Soundscape Selector Controls */
.soundscape-selector-container {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.soundscape-select-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}

.soundscape-dropdown {
  background: var(--color-bg-select);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.soundscape-dropdown:focus {
  border-color: var(--color-gold);
}

.custom-chant-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}

.custom-chant-input {
  background: rgba(12, 11, 30, 0.9);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  outline: none;
  transition: var(--transition-fast);
  width: 100%;
}

.custom-chant-input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}

.custom-chant-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.8;
}

/* Upgrade visual style for badges */
.blessing-badge {
  position: relative;
  overflow: hidden;
  transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal);
}

.blessing-badge.unlocked {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, rgba(255, 255, 255, 0.02) 80%);
  border-color: var(--color-gold);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
  cursor: pointer;
}

.blessing-badge.unlocked:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.35);
  border-color: #fff;
}

.blessing-badge.locked {
  background: rgba(255, 255, 255, 0.01);
  border-color: var(--color-border);
  opacity: 0.4;
  cursor: not-allowed;
}

/* Badge Visual Metaphor styles */
.badge-item-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.01);
  transition: var(--transition-fast);
  text-align: center;
}

.badge-item-display.unlocked {
  border-color: var(--color-gold);
  background: radial-gradient(circle, rgba(255, 215, 0, 0.08) 0%, rgba(255,255,255,0.01) 100%);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.1);
  cursor: pointer;
}

.badge-item-display.unlocked:hover {
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.25);
}

.badge-item-display.locked {
  opacity: 0.35;
  cursor: not-allowed;
}

.badge-item-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.1));
}

.badge-item-display.unlocked .badge-item-icon {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
}

.badge-item-title {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.badge-item-display.unlocked .badge-item-title {
  color: var(--color-text-primary);
}

.alert-active-rahu {
  border-color: rgba(255, 82, 82, 0.5) !important;
  background: rgba(255, 82, 82, 0.03) !important;
}

.detail-alert-glow-rahu {
  color: #ff5252 !important;
  text-shadow: 0 0 12px rgba(255, 82, 82, 0.7);
  animation: glowFade 2s infinite alternate;
}

.alert-active-abhijit {
  border-color: rgba(76, 175, 80, 0.5) !important;
  background: rgba(76, 175, 80, 0.03) !important;
}

.detail-alert-glow-abhijit {
  color: #4caf50 !important;
  text-shadow: 0 0 12px rgba(76, 175, 80, 0.7);
  animation: glowFade 2s infinite alternate;
}

/* Japa breath guiding pulse ring */
.breath-guide-ring {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 0, 0.15);
  pointer-events: none;
  z-index: 1;
  animation: breathPulse 8s infinite ease-in-out;
}

@keyframes breathPulse {
  0% { transform: scale(0.9); opacity: 0.1; }
  45% { transform: scale(1.25); opacity: 0.45; border-color: rgba(255, 215, 0, 0.35); }
  55% { transform: scale(1.25); opacity: 0.45; }
  100% { transform: scale(0.9); opacity: 0.1; }
}

/* ==========================================================================
   REDESIGNED FOOTER & COMPLIANCE MODALS
   ========================================================================== */
.app-footer {
  background: rgba(7, 6, 16, 0.95);
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 1.5rem;
  text-align: center;
  position: relative;
  width: 100%;
  margin-top: 4rem;
  z-index: 10;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-family: var(--font-divine);
  font-size: 0.85rem;
}

.footer-links a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
}

.footer-links .gold-link {
  color: var(--color-gold);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.45);
  animation: glowFade 3s infinite alternate ease-in-out;
}

.footer-separator {
  color: var(--color-border);
  font-size: 0.6rem;
  user-select: none;
}

.footer-copyright {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Info Modals Design */
.info-modal-card {
  max-width: 550px;
  width: 90%;
  border-radius: 18px;
  border-top: 4px solid var(--color-gold);
  padding: 2.2rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.75);
}

.info-modal-header {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.8rem;
}

.info-modal-header h3 {
  font-family: var(--font-divine);
  color: var(--color-gold);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.info-modal-header p {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-modal-body {
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-size: 0.92rem;
}

.info-modal-body p {
  margin-bottom: 1rem;
}

.info-modal-body ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.info-modal-body li {
  margin-bottom: 0.8rem;
  list-style-type: square;
}

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

/* Contact/Feedback Form */
.temple-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.temple-form .form-group {
  margin-bottom: 0;
}

.temple-form select {
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition-fast);
  cursor: pointer;
}

.temple-form select:focus {
  border-color: var(--color-gold);
  background: rgba(255, 255, 255, 0.04);
}

.temple-form select option {
  background: #0d0c22;
  color: var(--color-text-primary);
}

.temple-form button[type="submit"] {
  margin-top: 0.5rem;
}

.temple-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Virtual Dakshina Modal */
.dakshina-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
  padding-bottom: 0.1rem;
}

.dakshina-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-divine);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 0;
  cursor: pointer;
  position: relative;
  transition: var(--transition-fast);
}

.dakshina-tab-btn:hover {
  color: var(--color-text-primary);
}

.dakshina-tab-btn.active {
  color: var(--color-gold);
}

.dakshina-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-gold);
  box-shadow: 0 0 8px var(--color-gold);
}

.qr-code-card {
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  border: 3px double var(--color-gold);
  margin-bottom: 1.5rem;
}

.qr-code-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.qr-subtext {
  color: #333333;
  font-size: 0.76rem;
  text-align: center;
  line-height: 1.4;
  margin: 0;
  font-weight: 500;
}

.upi-copy-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  margin-bottom: 1.5rem;
  gap: 0.75rem;
}

.upi-id-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.upi-id-value {
  flex-grow: 1;
  font-family: monospace;
  font-size: 0.95rem;
  color: var(--color-gold);
  font-weight: 600;
}

.copy-toast {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-sattva);
  opacity: 0;
  transform: translateY(-5px);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  height: 0;
  overflow: hidden;
}

.copy-toast.show {
  opacity: 1;
  transform: translateY(0);
  height: auto;
  margin-top: -1rem;
  margin-bottom: 1rem;
}

.global-donate-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.donate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: var(--transition-fast);
  color: #ffffff;
}

.bmac-btn {
  background: #ffdd00;
  color: #000000;
}

.bmac-btn:hover {
  background: #ffea55;
  box-shadow: 0 0 15px rgba(255, 221, 0, 0.4);
  transform: translateY(-2px);
}

.paypal-btn {
  background: #003087;
}

.paypal-btn:hover {
  background: #0045c3;
  box-shadow: 0 0 15px rgba(0, 48, 135, 0.4);
  transform: translateY(-2px);
}

.dakshina-quote-box {
  background: rgba(255, 215, 0, 0.02);
  border: 1px solid rgba(255, 215, 0, 0.08);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-top: 1.5rem;
  text-align: center;
}

.sanskrit-quote {
  font-family: var(--font-sanskrit);
  color: var(--color-text-primary);
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.quote-translation {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.quote-source {
  font-size: 0.68rem;
  color: var(--color-gold);
  text-transform: uppercase;
  font-weight: 600;
}

/* Header Dakshina Button */
.dakshina-header-control {
  margin-right: 0.75rem;
}

.header-dakshina-btn {
  background: rgba(255, 215, 0, 0.05) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
  padding: 0.45rem 1rem !important;
  height: 34px !important;
  font-size: 0.75rem !important;
  font-family: var(--font-divine);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.header-dakshina-btn:hover {
  background: var(--color-gold) !important;
  color: #070610 !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   SPEECH & VOICE INTERACTION SYSTEM
   ========================================================================== */

/* Microphone Dictate Button */
.chat-mic-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.chat-mic-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--chat-accent-color, var(--color-gold));
  color: var(--color-text-primary);
}

.chat-mic-btn.listening {
  background: rgba(239, 83, 80, 0.2);
  border-color: #ef5350;
  color: #ef5350;
  animation: pulse-red 1.5s infinite alternate ease-in-out;
}

@keyframes pulse-red {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.4); }
  100% { transform: scale(1.08); box-shadow: 0 0 10px 4px rgba(239, 83, 80, 0.15); }
}

/* Active State for Voice Toggle Button */
.altar-btn.active-voice {
  border-color: var(--chat-accent-color, var(--color-gold)) !important;
  color: var(--chat-accent-color, var(--color-gold)) !important;
  background: rgba(255, 215, 0, 0.06) !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
}

/* Divine Voice Wave Visualizer */
.divine-voice-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  width: 24px;
  height: 16px;
  margin-left: 0.25rem;
}

.wave-bar {
  width: 3px;
  height: 100%;
  background-color: var(--chat-accent-color, var(--color-gold));
  border-radius: 2px;
  animation: bounce-wave 0.8s infinite ease-in-out alternate;
  transform-origin: bottom;
}

.wave-bar.bar-1 { animation-delay: 0.1s; height: 30%; }
.wave-bar.bar-2 { animation-delay: 0.3s; height: 80%; }
.wave-bar.bar-3 { animation-delay: 0s; height: 50%; }
.wave-bar.bar-4 { animation-delay: 0.4s; height: 90%; }

@keyframes bounce-wave {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

/* Cosmic Speaking Glow Aura on Containers.
   The outer halo is a STATIC element box-shadow (painted once when .speaking
   toggles; the existing box-shadow transitions fade it in). The breathing
   effect is an inset-glow pseudo pulsing opacity only — these containers have
   overflow:hidden, which would clip an outer-glow pseudo, and animating
   box-shadow itself repaints every frame. */
.chat-window-wrapper.speaking {
  box-shadow: 0 0 45px var(--chat-glow-color, rgba(255, 215, 0, 0.35));
}

/* glass-card ::after is the sheen — use ::before on glass-card containers */
.chat-window-wrapper.speaking::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 45px var(--chat-glow-color, rgba(255, 215, 0, 0.25));
  opacity: 0.35;
  pointer-events: none;
  animation: glowFade 2s infinite alternate ease-in-out;
}

/* The speak-shloka button toggles .speaking on #wisdom-card (modal-card) */
#wisdom-card.speaking {
  border-color: var(--color-gold);
  box-shadow: 0 0 45px var(--chat-glow-color, rgba(255, 215, 0, 0.35));
}

#wisdom-card.speaking::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 45px var(--chat-glow-color, rgba(255, 215, 0, 0.25));
  opacity: 0.35;
  pointer-events: none;
  animation: glowFade 2s infinite alternate ease-in-out;
}

.scripture-card.speaking {
  border-color: var(--chat-accent-color, var(--color-gold));
  box-shadow: 0 0 35px var(--chat-glow-color, rgba(255, 215, 0, 0.3));
}

/* scripture-card ::before is its accent strip — use ::after here */
.scripture-card.speaking::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 30px var(--chat-glow-color, rgba(255, 215, 0, 0.25));
  opacity: 0.35;
  pointer-events: none;
  animation: glowFade 2s infinite alternate ease-in-out;
}

/* ==========================================================================
   Advanced Core UI & Aesthetic Enhancements
   ========================================================================== */

/* Shrine Customization Grid */
.shrine-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.theme-selector-container {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Shrine Altar Themes */
.shrine-altar.theme-cosmic {
  background: linear-gradient(135deg, #030208 0%, #0c081f 100%) !important;
  border-color: rgba(0, 229, 255, 0.2) !important;
  box-shadow: inset 0 0 30px rgba(0, 229, 255, 0.08), 0 10px 40px rgba(0,0,0,0.5) !important;
}

.shrine-altar.theme-himalaya {
  background: linear-gradient(135deg, #040807 0%, #0f1c18 100%) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
  box-shadow: inset 0 0 30px rgba(16, 185, 129, 0.08), 0 10px 40px rgba(0,0,0,0.5) !important;
}

.shrine-altar.theme-sunset {
  background: linear-gradient(135deg, #080204 0%, #240911 100%) !important;
  border-color: rgba(229, 57, 53, 0.22) !important;
  box-shadow: inset 0 0 35px rgba(229, 57, 53, 0.08), 0 10px 40px rgba(0,0,0,0.5) !important;
}

.shrine-altar.theme-golden {
  background: linear-gradient(135deg, #0e0705 0%, #2c160c 100%) !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
  box-shadow: inset 0 0 35px rgba(212, 175, 55, 0.08), 0 10px 40px rgba(0,0,0,0.5) !important;
}

/* Premium Medallions Styling */
.badge-badge {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast) !important;
  cursor: pointer;
}

.badge-badge:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.15);
  filter: brightness(1.1);
}

.badge-badge.completed {
  animation: goldShimmer 3s infinite alternate ease-in-out;
}

@keyframes goldShimmer {
  0% { filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.3)); }
  100% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7)); }
}

/* Mobile responsive rules */
@media (max-width: 768px) {
  /* Premium Glassmorphic Bottom Navigation Bar */
  .app-nav {
    position: fixed !important;
    bottom: 1.25rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92% !important;
    max-width: 540px !important;
    background: rgba(12, 11, 30, 0.78) !important;


    border: 1px solid rgba(255, 215, 0, 0.22) !important;
    border-radius: 30px !important;
    padding: 0.55rem 0.8rem !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.06) !important;
    z-index: 999 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  
  .nav-btn {
    flex-direction: column !important;
    gap: 3px !important;
    font-size: 0.64rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0.3rem 0.5rem !important;
    color: var(--color-text-secondary) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: color var(--transition-fast), text-shadow var(--transition-fast) !important;
  }
  
  .nav-btn.active {
    color: var(--color-gold) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.45) !important;
  }
  
  .nav-btn i {
    width: 20px !important;
    height: 20px !important;
  }
  
  .app-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    /* backdrop-filter establishes a containing block, which would trap the
       position:fixed bottom navbar inside the header (pinning it to the top).
       Drop it on mobile so the navbar anchors to the viewport bottom. */


  }

  /* Make room at bottom of page for floating navbar */
  body {
    padding-bottom: 6rem !important;
  }
  
  .shrine-options-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* The 8-item floating bottom nav fits labels down to ~520px (the 540px-max pill holds
   the ~475px of labelled items). Below that the labels overflow the pill and push the
   last 3 destinations (Satsang, Chat, My Shrine) off-screen & unreachable, so collapse
   to icon-only on phones — every section stays visible and tappable. The label stays in
   the DOM (screen-reader-only) and the button title remains, so the accessible name is
   preserved. */
@media (max-width: 520px) {
  .app-nav .nav-btn span {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .app-nav {
    gap: 0.1rem !important;
    padding: 0.5rem 0.45rem !important;
  }
  .app-nav .nav-btn {
    padding: 0.45rem 0.35rem !important;
  }
  .app-nav .nav-btn i {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Subscription tier grid stacks on small screens */
@media (max-width: 560px) {
  #premium-tiers-container {
    grid-template-columns: 1fr !important;
  }
  .tier-card {
    padding: 1rem !important;
  }
  /* Two-column header layout in the gift modal sankalpa, etc, also stacks */
  .sankalpa-actions-row,
  .breath-controls-row,
  .global-donate-buttons {
    flex-direction: column !important;
    width: 100%;
  }
  .global-donate-buttons .donate-btn {
    width: 100%;
  }
}

/* Festival & Vrat Calendar widget */
.festival-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.festival-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.festival-item:hover {
  background: rgba(255, 215, 0, 0.05);
  border-color: rgba(255, 215, 0, 0.25);
}
.festival-emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.festival-meta { flex: 1; min-width: 0; }
.festival-name {
  font-family: var(--font-divine);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.festival-date {
  font-size: 0.72rem;
  color: var(--color-gold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.festival-eta {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: rgba(255, 215, 0, 0.08);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.festival-eta.today {
  background: var(--color-gold);
  color: #070610;
}
.festival-significance {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: rgba(0, 0, 0, 0.15);
  border-left: 2px solid var(--color-gold);
  border-radius: 6px;
  display: none;
}
.festival-item.expanded .festival-significance {
  display: block;
}

/* First-launch onboarding hint — bottom-anchored toast, dismissable */
.onboarding-hint {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 998;
  max-width: 520px;
  width: calc(100% - 2rem);
  background: rgba(12, 11, 30, 0.92);


  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 215, 0, 0.08);
  padding: 0.85rem 1rem;
  animation: onboardSlideUp 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboarding-hint[hidden] { display: none; }
.onboarding-hint-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.onboarding-icon {
  font-size: 1.7rem;
  flex-shrink: 0;
}
.onboarding-text {
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.onboarding-text strong {
  display: block;
  color: var(--color-gold);
  font-family: var(--font-divine);
  font-weight: 700;
  margin-bottom: 0.1rem;
}
.onboarding-dismiss {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-fast);
}
.onboarding-dismiss:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-gold);
}
@keyframes onboardSlideUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 768px) {
  /* Sit above the floating bottom nav */
  .onboarding-hint {
    bottom: 6rem;
  }
}

/* Mobile Modal Bottom Sheets */
@media (max-width: 480px) {
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: translateY(100%) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 1.8rem 1rem 3rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(255, 215, 0, 0.25) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6) !important;
    z-index: 1001 !important;
  }
  
  .modal-overlay.active .modal-card {
    transform: translateY(0) !important;
  }
  
  /* Mobile drag indicator handle */
  .modal-card::before {
    content: '' !important;
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 45px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border-radius: 2px !important;
  }

  .close-modal-btn {
    top: 12px !important;
    right: 12px !important;
  }
}

/* Voice Call Mode Overlay and Animations */
@keyframes callPulse {
  0% { transform: scale(0.95); opacity: 0.15; }
  50% { transform: scale(1.18); opacity: 0.45; }
  100% { transform: scale(1.35); opacity: 0; }
}

#voice-call-overlay .call-glow-ring {
  pointer-events: none;
}

#voice-call-overlay .call-avatar-portrait.speaking {
  animation: callSpeakPulse 1.5s infinite alternate ease-in-out;
  border-color: var(--chat-accent-color, var(--color-gold)) !important;
}

@keyframes callSpeakPulse {
  0% { transform: scale(1); box-shadow: 0 0 10px var(--chat-glow-color, rgba(255, 215, 0, 0.1)); }
  100% { transform: scale(1.06); box-shadow: 0 0 25px var(--chat-glow-color, rgba(255, 215, 0, 0.4)); }
}

.pulse-dot {
  animation: pulseDotGreen 1.5s infinite alternate ease-in-out;
}

@keyframes pulseDotGreen {
  0% { opacity: 0.4; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.1); }
}

#call-mute-btn.muted {
  background: rgba(239, 83, 80, 0.2) !important;
  border-color: rgba(239, 83, 80, 0.4) !important;
  color: #ef5350 !important;
}

#call-transcript-toggle.active {
  background: rgba(212, 175, 55, 0.15) !important;
  border-color: var(--color-gold) !important;
  border-radius: 50% !important;
  color: var(--color-gold) !important;
}

.alert-active-brahma {
  border-color: rgba(212, 175, 55, 0.5) !important;
  background: rgba(212, 175, 55, 0.03) !important;
}

.detail-alert-glow-brahma {
  color: #d4af37 !important;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
  animation: glowFade 2s infinite alternate;
}

/* ==========================================================================
   DIVYA PREMIUM MEMBERSHIP & SIMULATED CHECKOUT
   ========================================================================== */
.premium-badge {
  background: linear-gradient(135deg, #d4af37 0%, #f25e1c 100%);
  color: #070610;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.35rem;
  font-family: var(--font-body);
  animation: glowFade 2s infinite alternate ease-in-out;
}

/* Premium Card custom visual highlights */
.profile-chip.premium-user {
  border-color: rgba(255, 215, 0, 0.4) !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.15) !important;
  background: rgba(255, 215, 0, 0.03) !important;
}

.tier-card {
  transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal);
  background: rgba(255, 255, 255, 0.02);
}

.tier-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04);
}

.premium-tier-card:hover {
  border-color: rgba(255, 215, 0, 0.4) !important;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.1) !important;
  background: radial-gradient(circle at top right, rgba(255,215,0,0.06) 0%, rgba(12,11,30,0.6) 100%) !important;
}

.checkout-tab-btn {
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  font-family: var(--font-body);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}

.checkout-tab-btn:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.checkout-tab-btn.active {
  background: rgba(255, 215, 0, 0.1) !important;
  color: var(--color-gold) !important;
  font-weight: bold;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.divine-spinner {
  border-right-color: transparent !important;
}

.locked-feature-msg {
  font-size: 0.78rem;
  color: var(--color-gold);
  margin-top: 0.25rem;
  display: block;
}

/* Soundscape Audio Mixer Slider Thumbs */
#vol-drone-slider::-webkit-slider-thumb,
#vol-flute-slider::-webkit-slider-thumb,
#vol-river-slider::-webkit-slider-thumb,
#vol-chant-slider::-webkit-slider-thumb {
  background: var(--color-gold) !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
#vol-drone-slider::-moz-range-thumb,
#vol-flute-slider::-moz-range-thumb,
#vol-river-slider::-moz-range-thumb,
#vol-chant-slider::-moz-range-thumb {
  background: var(--color-gold) !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* Guna Quiz Styles */
.quiz-option-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.quiz-option-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 215, 0, 0.25);
  transform: translateY(-2px);
}

.quiz-option-btn.selected {
  background: rgba(255, 215, 0, 0.05);
  border-color: var(--color-gold);
  color: var(--color-gold);
  font-weight: 500;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
}

.quiz-option-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.75rem;
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.quiz-option-btn.selected .quiz-option-badge {
  background: var(--color-gold);
  color: #070610;
  border-color: var(--color-gold);
}

/* Auspicious Sadhana Tools Affiliate Section */
.tool-card {
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal) !important;
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 12px var(--color-gold-glow) !important;
}

/* Divine Satsang Section Styles */
.satsang-container {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 0;
}

@media (max-width: 992px) {
  .satsang-container {
    grid-template-columns: 1fr;
  }
}

.satsang-featured-card {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.satsang-video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-neon);
}

.satsang-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.satsang-featured-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.satsang-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 215, 0, 0.1);
  color: var(--color-gold);
  border-radius: 20px;
  border: 1px solid rgba(255, 215, 0, 0.15);
}

.satsang-featured-info h3 {
  font-family: var(--font-divine);
  color: var(--color-text-primary);
  font-size: 1.35rem;
  margin: 0;
}

.satsang-featured-info p {
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

.satsang-gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.satsang-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.satsang-filter-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal);
}

.satsang-filter-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.satsang-filter-btn.active {
  background: var(--color-gold-glow);
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* Light themes: an "active pill" recipe (gold text on a translucent gold tint)
   recurs across the app. On cream the tint darkens to tan and the gold text
   drops below AA — 3.8–4.4:1, worst on saraswati's pink-gold. Swap the tint for
   a light fill so the dark-gold text keeps its on-cream contrast; the doubled
   gold edge is the active affordance. Dark themes keep the original tint (gold
   on near-black already passes). */
body.light-theme .satsang-filter-btn.active,
body.light-theme .med-preset-btn.active,
body.light-theme .med-sound-btn.active,
body.light-theme .med-mode-btn.active,
body.light-theme .med-session-card.active,
body.light-theme .lib-filter-btn.active {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px var(--color-gold);
}
/* .checkout-tab-btn.active sets its tint with !important, so match it. */
body.light-theme .checkout-tab-btn.active {
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: inset 0 0 0 1px var(--color-gold);
}

.satsang-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* Custom scrollbar for video grid */
.satsang-grid::-webkit-scrollbar {
  width: 4px;
}
.satsang-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.01);
}
.satsang-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.15);
  border-radius: 2px;
}

.satsang-card {
  display: flex;
  gap: 0.85rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal);
  text-align: left;
}

.satsang-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--color-gold-glow);
  transform: translateX(4px);
}

.satsang-card.active {
  background: rgba(255, 215, 0, 0.04);
  border-color: var(--color-gold);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.05);
}

.satsang-thumb {
  position: relative;
  width: 110px;
  height: 62px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.satsang-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.satsang-thumb-play {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.satsang-card:hover .satsang-thumb-play,
.satsang-card.active .satsang-thumb-play {
  opacity: 1;
}

.satsang-thumb-play i {
  color: var(--color-gold);
  width: 20px;
  height: 20px;
}

.satsang-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  overflow: hidden;
}

.satsang-card-info h5 {
  font-family: var(--font-divine);
  color: var(--color-text-primary);
  font-size: 0.88rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.satsang-card-info p {
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.satsang-card-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.68rem;
}

.satsang-card-tag {
  color: var(--color-gold);
  font-weight: 600;
}

.satsang-card-dur {
  color: var(--color-text-muted);
}

/* --- SADHAKA WEEKLY PROGRESS CHART STYLES --- */
.sadhaka-chart-svg {
  font-family: var(--font-sans);
  overflow: visible;
}

.chart-grid-line {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1px;
}

.chart-grid-line.dashed {
  stroke-dasharray: 2 2;
}

.chart-bar {
  transition: transform 0.3s ease, fill 0.3s ease;
  transform-origin: bottom;
  cursor: pointer;
}

.chart-bar:hover {
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
  opacity: 0.9;
}

.chart-axis-label {
  fill: var(--color-text-muted);
  font-size: 9px;
  font-weight: 500;
  text-anchor: middle;
}

.chart-axis-label.y-label {
  text-anchor: end;
}

.chart-japa-bead {
  fill: var(--color-gold);
  stroke: #070610;
  stroke-width: 1px;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
  animation: glowFade 2s infinite alternate ease-in-out;
  cursor: pointer;
}

.chart-japa-bead:hover {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9));
  transform: scale(1.2);
  transform-origin: center;
}

/* ==========================================================================
   DEVOTIONAL POLISH & PREMIUM VISUAL ADDITIONS
   ========================================================================== */

.altar-audio-visualizer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 50%;
  z-index: 1;
  transition: opacity 0.5s ease;
}

.devotional-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: 16px;
  background: rgba(13, 10, 30, 0.75);
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(255, 215, 0, 0.05);


  width: 100%;
  color: var(--color-text-primary);
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.devotional-toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-gold), #ff5722);
}

.devotional-toast.show {
  transform: translateX(0);
}

.devotional-toast.hide {
  transform: translateX(120%);
  opacity: 0;
}

.devotional-toast-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
  font-size: 1.25rem;
  flex-shrink: 0;
  animation: floatDiya 3s infinite ease-in-out;
}

.devotional-toast-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.devotional-toast-title {
  font-family: var(--font-divine);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-gold);
  margin: 0;
  letter-spacing: 0.3px;
}

.devotional-toast-desc {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}

.devotional-toast-action-btn {
  background: none;
  border: none;
  color: var(--color-gold);
  text-decoration: underline;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 0.25rem;
  transition: color var(--transition-fast);
}

.devotional-toast-action-btn:hover {
  color: #ff5722;
}

.devotional-toast-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.devotional-toast-close:hover {
  color: var(--color-text-primary);
}

@keyframes floatDiya {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* ─── Meditation Room (Pillar B) ─── */
.meditation-room {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.med-header h2 { font-family: var(--font-divine, 'Cinzel', serif); margin-bottom: 0.25rem; }
.med-subtitle { color: var(--color-text-secondary); margin-bottom: 0.5rem; }
.med-tip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; color: var(--color-gold);
  opacity: 0.85; margin-bottom: 1.5rem;
}
.med-tip i { width: 15px; height: 15px; }

.med-timer-wrap { position: relative; width: 280px; height: 280px; margin: 0.5rem auto 1.5rem; }
.med-ring-svg { width: 100%; height: 100%; display: block; }
.med-ring-track { stroke: rgba(255, 255, 255, 0.08); }
.med-ring-progress {
  stroke: var(--color-gold, #d4af37);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.95s linear;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.5));
}
.med-timer-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
}
.med-focus-symbol { font-size: 2rem; color: var(--color-gold); opacity: 0.7; }
.med-timer-display { font-size: 3rem; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.med-status { font-size: 0.8rem; color: var(--color-text-secondary); min-height: 1.1rem; max-width: 230px; }

.med-presets, .med-sounds {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: center; align-items: center; margin-bottom: 1rem;
}
.med-sounds-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--color-text-secondary); margin-right: 0.25rem;
}
.med-preset-btn, .med-sound-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  color: var(--color-text-secondary);
  padding: 0.5rem 0.9rem; border-radius: 999px; cursor: pointer;
  font-size: 0.82rem; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.med-preset-btn:hover, .med-sound-btn:hover { border-color: var(--color-gold); color: var(--color-text-primary); }
.med-preset-btn.active, .med-sound-btn.active {
  background: rgba(212, 175, 55, 0.15); border-color: var(--color-gold); color: var(--color-gold);
}
.med-custom-min {
  width: 84px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  color: var(--color-text-primary); border-radius: 999px;
  padding: 0.5rem 0.8rem; font-size: 0.82rem; text-align: center;
}

.med-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin: 0.5rem 0 1rem; }
.med-start-btn, .med-reset-btn, .med-dim-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 1.4rem; border-radius: 999px; cursor: pointer;
  font-size: 0.9rem; border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.med-start-btn {
  background: linear-gradient(135deg, var(--color-gold, #d4af37), #b8860b);
  color: #1a1206; border: none; font-weight: 600;
}
.med-start-btn:hover { filter: brightness(1.08); }
.med-reset-btn, .med-dim-toggle { background: rgba(255, 255, 255, 0.04); color: var(--color-text-secondary); }
.med-reset-btn:hover, .med-dim-toggle:hover { color: var(--color-text-primary); border-color: var(--color-gold); }
.med-dim-toggle.active { background: rgba(212, 175, 55, 0.15); border-color: var(--color-gold); color: var(--color-gold); }
.med-start-btn i, .med-reset-btn i, .med-dim-toggle i { width: 16px; height: 16px; }
.med-stats { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 0.5rem; }

/* Pulsing focus symbol while a sitting is running */
.meditation-room.med-active .med-focus-symbol { animation: medPulse 4s ease-in-out infinite; }
@keyframes medPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.12); }
}

/* Dim-screen mode: gently darken everything but the timer (suggested, not forced) */
body.meditation-dim { background: #000; }
body.meditation-dim .app-header,
body.meditation-dim .app-footer,
body.meditation-dim .stars-bg,
body.meditation-dim .glow-orb { opacity: 0.06; transition: opacity 0.6s ease; }
body.meditation-dim .meditation-room .med-presets,
body.meditation-dim .meditation-room .med-sounds,
body.meditation-dim .meditation-room .med-header { opacity: 0.25; transition: opacity 0.6s ease; }
@media (prefers-reduced-motion: reduce) {
  .meditation-room.med-active .med-focus-symbol { animation: none; }
}

/* Meditation hub: Guided/Silent toggle, guided-session picker, breath pacer, quick-links */
.med-mode {
  display: inline-flex; gap: 0.25rem; padding: 0.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 999px; margin-bottom: 1.25rem;
}
.med-mode-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--color-text-secondary);
  padding: 0.4rem 1.15rem; border-radius: 999px;
  font-size: 0.82rem; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.med-mode-btn:hover { color: var(--color-text-primary); }
.med-mode-btn.active { background: rgba(212, 175, 55, 0.18); color: var(--color-gold); }

.med-session-picker {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center; width: 100%; margin-bottom: 1.25rem;
}
.med-session-card {
  flex: 1 1 150px; max-width: 210px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 14px; padding: 0.8rem 0.9rem;
  cursor: pointer; text-align: left; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.med-session-card:hover { border-color: var(--color-gold); transform: translateY(-2px); }
.med-session-card.active {
  border-color: var(--color-gold);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: inset 0 0 0 1px var(--color-gold);
}
.med-session-name { display: block; font-weight: 600; color: var(--color-text-primary); font-size: 0.9rem; margin-bottom: 0.2rem; }
.med-session-meta { display: block; font-size: 0.72rem; color: var(--color-text-secondary); }
/* Silent mode hides the guided picker */
.meditation-room.med-silent .med-session-picker { display: none; }

.med-breath-phase {
  font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--color-gold); min-height: 1.1rem; opacity: 0; transition: opacity 0.3s ease;
}
.meditation-room.med-breathing .med-breath-phase { opacity: 0.9; }
/* Breath pacer scales the focus glyph via inline transform; suppress the idle pulse so they don't fight */
.meditation-room.med-breathing .med-focus-symbol {
  animation: none !important;
  transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out;
}

.med-quicklinks { margin-top: 1.75rem; width: 100%; }
.med-quicklinks-label {
  display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--color-text-secondary); margin-bottom: 0.6rem;
}
.med-quicklinks-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.med-quicklink {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  color: var(--color-text-secondary);
  padding: 0.5rem 0.9rem; border-radius: 999px; cursor: pointer;
  font-size: 0.8rem; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.med-quicklink:hover { border-color: var(--color-gold); color: var(--color-gold); }
.med-quicklink i { width: 14px; height: 14px; }
/* Dim mode also softens the new hub chrome */
body.meditation-dim .meditation-room .med-mode,
body.meditation-dim .meditation-room .med-session-picker,
body.meditation-dim .meditation-room .med-quicklinks { opacity: 0.25; transition: opacity 0.6s ease; }

/* Claim-prompt dismiss ("Maybe later") on the initiation/login card */
.login-card { position: relative; }
.initiation-dismiss {
  position: absolute; top: 0.75rem; right: 0.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  color: var(--color-text-secondary); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.initiation-dismiss:hover { color: var(--color-text-primary); border-color: var(--color-gold); }
.initiation-dismiss i { width: 16px; height: 16px; }

/* Phased rollout: features deferred to a later phase are hidden in v1.
   To ship a phase, delete its selector here (or remove the data-phase attribute). */
[data-phase="2"], [data-phase="3"] { display: none !important; }

/* ==========================================================================
   Visual Theme Swatches & Header Popover Styles
   ========================================================================== */

/* Header Theme Toggle */
.theme-control-header {
  position: relative;
}

.theme-dropdown-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 48px;
  width: 290px;
  padding: 1.25rem;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: themeMenuEnter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top right;
}

.theme-dropdown-menu.active {
  display: flex !important;
}

@keyframes themeMenuEnter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Header sound popover (shares .theme-dropdown-menu base) */
.sound-dropdown-menu {
  width: min(300px, calc(100vw - 24px));
  gap: 0.75rem;
}
.sound-menu-title {
  font-family: var(--font-divine);
  color: var(--color-gold);
  font-size: 1rem;
  font-weight: bold;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}
.sound-master-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sound-master-label {
  font-size: 0.85rem;
  color: var(--color-text-primary);
}
@media (max-width: 560px) {
  /* The header button can sit mid-row on phones; clamp the panel to the
     viewport instead of right-anchoring so it can never overflow. */
  .sound-dropdown-menu {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    top: var(--sound-pop-top, 120px);
    transform-origin: top center;
  }
}

/* Theme Options Switch Container in Shrine Room & Header */
.theme-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.theme-menu-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Theme Swatch Button */
.theme-swatch-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
  position: relative;
  width: 100%;
}

.theme-swatch-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-primary);
}

.theme-swatch-btn.active {
  background: rgba(212, 175, 55, 0.08);
  border-color: var(--color-gold);
  color: var(--color-gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
}

/* Circular Color Badge showing the color accents */
.theme-swatch-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.theme-swatch-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

.theme-swatch-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-swatch-desc {
  font-size: 0.68rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-swatch-lock {
  margin-left: auto;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-swatch-btn.active .theme-swatch-lock {
  color: var(--color-gold);
}

.theme-swatch-btn.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.theme-swatch-btn.locked:hover {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* Free Customizer Switch styles */
.theme-switch-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
}

.theme-switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.08);
  transition: 0.3s;
  border-radius: 22px;
  border: 1px solid var(--color-border);
}

.theme-switch-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: var(--color-text-secondary);
  transition: 0.3s;
  border-radius: 50%;
}

.theme-switch-toggle input:checked + .theme-switch-slider {
  background-color: rgba(212, 175, 55, 0.2);
  border-color: var(--color-gold);
}

.theme-switch-toggle input:checked + .theme-switch-slider:before {
  transform: translateX(16px);
  background-color: var(--color-gold);
}

/* Shrine specific grid */
.shrine-theme-grid {
  /* Responsive: one full-width, fully-legible card per row in the narrow
     side panel; more columns automatically when there's room. The 210px min
     keeps the longest names ("Saraswati Shveta" / "Vermilion & Amber Red")
     from being clipped — the old fixed 2-column layout chopped them to "M…". */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.5rem;
}

/* In the in-shrine picker, never ellipsis-truncate the theme name/description.
   Wrap to a second line if a card is narrow so every theme stays readable. */
.shrine-theme-grid .theme-swatch-name,
.shrine-theme-grid .theme-swatch-desc {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}