/* ===================================================================
   ZoharAI — Cosmic theme (space · astrology · planets)
   =================================================================== */

:root {
    --space-0: #05050f;
    --space-1: #0a0a1f;
    --space-2: #120b2e;
    --violet: #8b5cf6;
    --violet-2: #a78bfa;
    --indigo: #6366f1;
    --cyan: #22d3ee;
    --gold: #f5d76e;
    --text: #e9e9f5;
    --muted: #9aa0c4;
    --card-bg: rgba(18, 16, 42, 0.55);
    --card-brd: rgba(139, 92, 246, 0.28);
    --glow: rgba(139, 92, 246, 0.45);
}

* { box-sizing: border-box; }

/* No fixed background-attachment / height traps here — the page scrolls naturally. */
html { height: auto; }

body {
    margin: 0;
    color: var(--text);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--space-0);
    min-height: 100vh;
    overflow-x: hidden;              /* never allow horizontal scrolling on any device */
}

/* Answer text fields: always stretchable from the bottom-right corner. */
.zohar-answer {
    resize: both;
    overflow: auto;
    min-height: 2.6em;
    max-width: 100%;
    padding-bottom: 8px;            /* keep text clear of the drag handle */
    border-radius: 8px;
    transition: box-shadow .15s;
}
.zohar-answer:hover { box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.22); }
.zohar-answer::-webkit-resizer { background: transparent; }

/* ===================================================================
   Answer surface — the unified look for every result box (AI answers
   inline, modal popups, gallery detail popups, and the fetched-scripture
   / recognised-speech fields).
   On-brand cosmic panel: a rich indigo/violet surface — clearly lighter
   and more saturated than the near-black base cards — with a soft violet
   glow, a gold accent rail and bright, cool near-white text. Fits the
   site's night-sky theme while standing out as "this is the answer".
   =================================================================== */
.answer-surface {
    background:
        radial-gradient(130% 120% at 0% 0%, rgba(139, 92, 246, 0.24) 0%, rgba(0, 0, 0, 0) 55%),
        linear-gradient(165deg, #251d57 0%, #1a1442 55%, #150f37 100%);
    border: 1px solid rgba(167, 139, 250, 0.30);
    border-left: 3px solid var(--gold);
    border-radius: 14px;
    padding: 22px 26px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(139, 92, 246, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Win over the base .card background/border when the answer is a card. */
.card.answer-surface {
    background:
        radial-gradient(130% 120% at 0% 0%, rgba(139, 92, 246, 0.24) 0%, rgba(0, 0, 0, 0) 55%),
        linear-gradient(165deg, #251d57 0%, #1a1442 55%, #150f37 100%);
    border: 1px solid rgba(167, 139, 250, 0.30);
    border-left: 3px solid var(--gold);
}
/* Bright, cool near-white body text — high contrast on the deep violet. */
.answer-surface,
.answer-surface p, .answer-surface li, .answer-surface .ver-sum,
.answer-surface .zohar-rich, .answer-surface.zohar-rich,
.answer-surface .zohar-rich p, .answer-surface.zohar-rich p,
.answer-surface .zohar-rich li, .answer-surface.zohar-rich li {
    color: #ecedfb;
}
/* Roomier line-height and paragraph rhythm for long-form readability. */
.answer-surface .zohar-rich p, .answer-surface.zohar-rich p { line-height: 1.75; margin: 0 0 .9rem; }
.answer-surface .zohar-rich li, .answer-surface.zohar-rich li { line-height: 1.62; margin: .4rem 0; }
.answer-surface .zohar-rich ul, .answer-surface .zohar-rich ol,
.answer-surface.zohar-rich ul, .answer-surface.zohar-rich ol { margin: .35rem 0 1rem; padding-left: 1.35rem; }
/* Section headings: gold primary (with a soft gold rule), violet sub. */
.answer-surface .zohar-rich h4, .answer-surface.zohar-rich h4 {
    color: var(--gold); font-size: 1.16rem; font-weight: 700; letter-spacing: .01em;
    margin: 1.3rem 0 .5rem; padding-bottom: .32rem;
    border-bottom: 1px solid rgba(245, 215, 110, 0.32);
    -webkit-text-fill-color: currentColor; background: none;
}
.answer-surface .zohar-rich h5, .answer-surface.zohar-rich h5 {
    color: var(--violet-2); margin: 1rem 0 .35rem;
    -webkit-text-fill-color: currentColor; background: none;
}
.answer-surface h4, .answer-surface h5, .answer-surface h6 { color: #ffffff; }
.answer-surface strong, .answer-surface .zohar-rich strong { color: #ffffff; font-weight: 700; }
.answer-surface em, .answer-surface .zohar-rich em { color: #d6c7ff; font-style: italic; }
.answer-surface a, .answer-surface .zohar-rich a { color: var(--violet-2); }
.answer-surface .zohar-rich ul li::marker { color: var(--gold); }
.answer-surface .zohar-rich ol li::marker { color: var(--violet-2); font-weight: 700; }
.answer-surface .zohar-rich code { background: rgba(139, 92, 246, 0.22); color: #e9dcff; }
.answer-surface .zohar-rich hr { border-color: rgba(167, 139, 250, 0.22); }
/* Card header (title + Listen) and helper text sit on the panel too. */
.answer-surface > .d-flex h5, .answer-surface > .d-flex h6 { color: #ffffff; letter-spacing: .01em; }
.answer-surface .text-muted { color: #b3a9dc !important; }
/* Result fields that are actual form controls (fetched verse, recognised
   speech) — same panel, comfortable caret and muted placeholder.
   Element+class specificity beats .form-control's base background. */
textarea.answer-surface, input.answer-surface {
    background:
        radial-gradient(130% 120% at 0% 0%, rgba(139, 92, 246, 0.24) 0%, rgba(0, 0, 0, 0) 55%),
        linear-gradient(165deg, #251d57 0%, #1a1442 55%, #150f37 100%);
    color: #ecedfb;
    border: 1px solid rgba(167, 139, 250, 0.30);
    border-left: 3px solid var(--gold);
    caret-color: var(--violet-2);
}
textarea.answer-surface::placeholder, input.answer-surface::placeholder { color: #8b90bd; }
textarea.answer-surface:focus, input.answer-surface:focus {
    color: #ecedfb; border-color: var(--gold);
    box-shadow: 0 0 0 .18rem rgba(245, 215, 110, 0.22);
}
/* Modal + gallery-detail bodies stretch edge-to-edge; keep the left rail. */
.zohar-modal__body.answer-surface,
#zoharDetailDesc.answer-surface { border-radius: 0; border-left: 4px solid var(--gold); }
#zoharDetailDesc.answer-surface { padding: 18px 20px; }
/* Before an answer is filled in (JS-driven pages), show no empty accent box
   (but keep parchment on empty editable fields such as the verse box). */
.answer-surface:empty:not(textarea):not(input) { background: none; border: none; box-shadow: none; padding: 0; }

/* Bible passages: one numbered verse per line, comfortably spaced. */
.scripture-text {
    line-height: 1.9;
    margin-bottom: 0;
}
.verse-chapter { color: var(--gold); font-weight: 700; margin: .7rem 0 .35rem; }
.verse-row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 3px 6px; border-radius: 8px; transition: background .12s;
}
.verse-row:hover { background: rgba(245, 215, 110, 0.08); }
.verse-row .verse-text { flex: 1 1 auto; }
/* Small per-verse "deep analysis" button — icon via ::before so it stays out of read-aloud text. */
.verse-ai {
    flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px; padding: 0;
    border-radius: 7px; cursor: pointer; line-height: 1;
    border: 1px solid rgba(245, 215, 110, 0.40); background: rgba(245, 215, 110, 0.08);
    opacity: .45; transition: opacity .15s, background .15s, border-color .15s;
}
.verse-ai::before { content: "🔍"; font-size: .8rem; }
.verse-row:hover .verse-ai { opacity: 1; }
.verse-ai:hover { background: rgba(245, 215, 110, 0.22); border-color: var(--gold); }

/* ===================================================================
   Chakras — a meditating figure with the seven vibrating energy centres
   =================================================================== */
.chakra-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: center; }
@media (max-width: 800px) { .chakra-layout { grid-template-columns: 1fr; } }

.chakra-stage { display: flex; justify-content: center; }
.chakra-svg { width: min(460px, 92vw); height: auto; }

.chakra { cursor: pointer; }
.chakra:focus { outline: none; }
.chakra-core, .chakra-ring { transform-box: fill-box; transform-origin: center; }
.chakra-core {
    animation: chakraPulse 2.6s ease-in-out infinite;
    filter: drop-shadow(0 0 8px currentColor);
}
.chakra-ring {
    animation: chakraRing 2.6s ease-out infinite;
    opacity: 0;
    pointer-events: none;
}
.chakra-bija { font-size: 13px; font-weight: 700; fill: #fff; stroke: rgba(0,0,0,0.35); stroke-width: .5px; paint-order: stroke; pointer-events: none; }
.chakra:hover .chakra-core, .chakra:focus .chakra-core { animation-play-state: paused; transform: scale(1.22); }
@keyframes chakraPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes chakraRing  { 0% { opacity: .55; transform: scale(.7); } 100% { opacity: 0; transform: scale(2.4); } }
@media (prefers-reduced-motion: reduce) { .chakra-core, .chakra-ring { animation: none; } .chakra-ring { opacity: .25; } }

/* Legend / index of the seven chakras */
.chakra-legend { display: flex; flex-direction: column; gap: 8px; }
.chakra-legend__item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 14px; border-radius: 12px; cursor: pointer; text-align: left;
    background: var(--card-bg); border: 1px solid var(--card-brd); color: var(--text);
    transition: border-color .15s, background .15s, transform .1s;
}
.chakra-legend__item:hover { border-color: var(--violet); background: rgba(139, 92, 246, 0.10); transform: translateX(2px); }
.chakra-legend__dot { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 10px currentColor; }
.chakra-legend__name { font-weight: 700; }
.chakra-legend__sub { color: var(--muted); font-size: .82rem; }

/* Chakra popup hub: facts strip, topic buttons and a swapping content panel */
.ck-pop__facts {
    display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
    padding: 10px 14px; margin-bottom: 14px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-brd);
    border-left: 4px solid var(--ck, var(--gold));
    color: var(--text); font-size: .92rem;
}
.ck-pop__facts b { color: #fff; }
.ck-pop__topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ck-topic {
    border: 1px solid var(--card-brd); background: var(--card-bg); color: var(--text);
    border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .9rem; cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
}
.ck-topic:hover { border-color: var(--ck, var(--violet)); background: rgba(139, 92, 246, 0.12); }
.ck-topic.is-active {
    border-color: var(--ck, var(--gold)); color: #fff;
    background: color-mix(in srgb, var(--ck, var(--violet)) 26%, transparent);
    box-shadow: 0 0 0 1px var(--ck, var(--gold)) inset;
}
.ck-topic--ai {
    color: #2a1a04; border-color: transparent;
    background: linear-gradient(135deg, var(--violet), var(--indigo));
    color: #fff;
}
.ck-topic--ai:hover { filter: brightness(1.1); background: linear-gradient(135deg, var(--violet), var(--indigo)); }
.ck-pop__content { min-height: 60px; }
.ck-pop__loading { color: var(--muted); font-style: italic; padding: 8px 2px; }

/* ---------- Tree of Life (Sefirot) ---------- */
.sef-svg { width: min(440px, 92vw); height: auto; }
.sef { cursor: pointer; }
.sef:focus { outline: none; }
.sef-core, .sef-ring { transform-box: fill-box; transform-origin: center; }
.sef-core { animation: chakraPulse 3.4s ease-in-out infinite; filter: drop-shadow(0 0 6px currentColor); }
.sef-ring { animation: chakraRing 3.4s ease-out infinite; opacity: 0; pointer-events: none; }
.sef:hover .sef-core, .sef:focus .sef-core { animation-play-state: paused; transform: scale(1.12); }
.sef-heb { font-size: 13px; font-weight: 700; fill: #fff; stroke: rgba(0,0,0,0.45); stroke-width: .6px; paint-order: stroke; pointer-events: none; }

/* ---------- Numerology ---------- */
.num-card { text-align: center; height: 100%; }
.num-card__num { font-size: 2.5rem; font-weight: 800; color: var(--gold); line-height: 1; }
.num-card__title { font-weight: 700; margin-top: 4px; }
.num-card__sub { color: var(--muted); font-size: .76rem; }
.num-card__mean { color: var(--text); font-size: .86rem; margin-top: 6px; }

/* ---------- Moon phase ---------- */
.moon-panel { max-width: 560px; margin: 0 auto; }
.moon-orb { font-size: 5rem; line-height: 1; filter: drop-shadow(0 0 32px rgba(245, 215, 110, 0.5)); }
.moon-phase { color: #fff; margin: .3rem 0 .6rem; }
.moon-illum { max-width: 320px; margin: 0 auto; }
.moon-illum__bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.moon-illum__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--gold)); }
.moon-illum__label { color: #cfd2ea; font-size: .85rem; margin-top: 6px; }
.moon-meta { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
.moon-meta > div { display: flex; flex-direction: column; }
.moon-meta__k { color: #b3a9dc; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.moon-meta__v { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Gematria ---------- */
.gem-input { font-size: 1.5rem; text-align: center; letter-spacing: .06em; }
.gem-value { font-size: 1.4rem; margin: .5rem 0; }
.gem-break { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gem-letter { display: inline-flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(245,215,110,0.25); border-radius: 8px; padding: 4px 9px; min-width: 36px; }
.gem-letter b { font-size: 1.35rem; line-height: 1; }
.gem-letter i { font-style: normal; color: var(--gold); font-size: .8rem; }
.gem-plus { color: var(--muted); }

/* ---------- Meditation & breathing ---------- */
.med-panel { max-width: 620px; margin: 0 auto; }
.med-stage { display: flex; justify-content: center; align-items: center; height: 340px; }
.med-orb {
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(167,139,250,0.95), rgba(99,102,241,0.6) 55%, rgba(21,15,55,0.2) 100%);
    box-shadow: 0 0 60px rgba(139,92,246,0.5), inset 0 0 40px rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    transform: scale(0.7); transition: transform .8s ease;
}
.med-cue { color: #fff; font-weight: 700; font-size: 1.15rem; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.med-count { color: var(--muted); margin-top: 10px; font-variant-numeric: tabular-nums; }

/* ---------- Hebrew calendar list ---------- */
.hcal-list { display: flex; flex-direction: column; gap: 6px; }
.hcal-item {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 10px 14px; border-radius: 12px; cursor: pointer;
    background: var(--card-bg); border: 1px solid var(--card-brd); color: var(--text);
    transition: border-color .15s, background .15s, transform .1s;
}
.hcal-item:hover { border-color: var(--violet); background: rgba(139, 92, 246, 0.10); transform: translateX(2px); }
.hcal-when { flex: 0 0 auto; min-width: 128px; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.hcal-title { flex: 1 1 auto; font-weight: 600; }
.hcal-heb { color: var(--gold); margin-inline-start: 8px; }
.hcal-go { flex: 0 0 auto; opacity: .6; }
.hcal-item:hover .hcal-go { opacity: 1; }

/* ---------- Runes ---------- */
.rune-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.rune-tile, .rune-cast {
    display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
    padding: 12px 6px; border-radius: 12px; color: var(--text);
    background: var(--card-bg); border: 1px solid var(--card-brd);
    transition: border-color .15s, background .15s, transform .1s;
}
.rune-tile:hover, .rune-cast:hover { border-color: var(--gold); background: rgba(245, 215, 110, 0.08); transform: translateY(-2px); }
.rune-glyph { font-size: 2rem; line-height: 1; color: var(--gold); text-shadow: 0 0 12px rgba(245, 215, 110, 0.4); }
.rune-glyph--lg { font-size: 3rem; }
.rune-name { font-size: .8rem; color: var(--muted); }
.rune-spread { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.rune-cast { min-width: 120px; }
.rune-cast__pos { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--violet-2); }

/* ---------- Today / cosmic dashboard ---------- */
.dash-card { transition: transform .12s, border-color .15s; }
a .dash-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.dash-card__label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.dash-card__title { font-weight: 800; font-size: 1.15rem; color: #fff; margin-top: 4px; }
.dash-card__sub { color: #b3a9dc; font-size: .85rem; }
.dash-moon { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 0 22px rgba(245, 215, 110, 0.45)); }
.dash-heb { font-size: 1.6rem; font-weight: 700; color: var(--gold); margin: 4px 0; }
.dash-verse { color: #ecedfb; font-size: 1.05rem; line-height: 1.7; }
.dash-affirm__text { font-size: 1.35rem; font-weight: 700; color: #fff; margin: 8px auto; max-width: 760px; line-height: 1.5; }

/* ---------- Journal ---------- */
.journal-entry { border-left: 3px solid var(--gold); }
.journal-entry__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.journal-badge {
    font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px;
    background: rgba(139, 92, 246, 0.18); border: 1px solid var(--card-brd); color: var(--violet-2);
}
.journal-entry__title { color: #fff; }
.journal-entry__body { color: var(--text); line-height: 1.6; }

/* ---------- Enneagram ---------- */
.ennea-card { text-align: center; width: 100%; height: 100%; cursor: pointer; transition: border-color .15s, transform .1s; }
.ennea-card:hover { border-color: var(--violet); transform: translateY(-2px); }
.ennea-num { font-size: 1.5rem; }
.ennea-num b { color: var(--gold); }
.ennea-name { font-weight: 700; margin-top: 2px; }
.ennea-sub { color: var(--muted); font-size: .82rem; margin-top: 2px; }

/* Gold outline button (e.g. "Prayer" — show the prayer text itself). */
.btn-outline-gold {
    color: var(--gold);
    border: 1px solid rgba(245, 215, 110, 0.55);
    background: rgba(245, 215, 110, 0.06);
}
.btn-outline-gold:hover, .btn-outline-gold:focus {
    color: #2a1a04;
    background: var(--gold);
    border-color: var(--gold);
}

/* Cosmic nebula background as a separate fixed layer (never affects document scrolling). */
.cosmic-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1100px 700px at 80% -10%, rgba(99, 102, 241, 0.20), transparent 60%),
        radial-gradient(900px 600px at 10% 10%, rgba(139, 92, 246, 0.18), transparent 55%),
        radial-gradient(700px 700px at 50% 120%, rgba(34, 211, 238, 0.12), transparent 60%),
        linear-gradient(180deg, var(--space-1) 0%, var(--space-0) 100%);
}

/* Star field — two tiled layers drifting slowly */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 130px 80px, #cbd5ff, transparent),
        radial-gradient(1px 1px at 210px 150px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 300px 40px, #e9d5ff, transparent),
        radial-gradient(1px 1px at 360px 200px, #ffffff, transparent);
    background-size: 400px 240px;
    opacity: 0.5;
    animation: drift 200s linear infinite;
}

body::after {
    background-image:
        radial-gradient(2px 2px at 60px 120px, #fff7d6, transparent),
        radial-gradient(1px 1px at 180px 20px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 260px 180px, #bae6fd, transparent);
    background-size: 320px 220px;
    opacity: 0.35;
    animation: drift 120s linear infinite reverse, twinkle 6s ease-in-out infinite;
}

@keyframes drift { from { background-position: 0 0; } to { background-position: 400px 240px; } }
@keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.15; } }

/* Keep content above the star layers; header (with its dropdowns) sits above main content */
main, footer { position: relative; z-index: 1; }
main { padding-bottom: 40px; }             /* breathing room so the last line is never flush at the bottom */
header { position: relative; z-index: 1030; }
.zohar-loader { z-index: 1050; }
.navbar .dropdown-menu { z-index: 1040; }

/* ---------- Navbar ---------- */
.navbar {
    background: rgba(8, 7, 24, 0.72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--card-brd) !important;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
}

.navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, var(--violet-2), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 18px var(--glow);
}

.navbar .nav-link {
    color: #cfd2ee !important;
    border-radius: 8px;
    padding: 6px 12px !important;
    transition: color .2s, background .2s;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff !important;
    background: rgba(139, 92, 246, 0.18);
}

/* Grouped nav dropdowns */
.navbar .dropdown-menu {
    background: #0b0920;
    border: 1px solid var(--card-brd);
    border-radius: 12px;
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(139, 92, 246, 0.15);
    margin-top: 0;
}

/* Open submenus on hover (desktop) and keep a bridge so the mouse can travel from toggle to menu */
@media (min-width: 576px) {
    .navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; }
    .navbar .nav-item.dropdown > .dropdown-menu { margin-top: 0; }
    .navbar .nav-item.dropdown > .dropdown-toggle { padding-bottom: 12px !important; }
}

.navbar .dropdown-item {
    color: #d6d9f4;
    border-radius: 8px;
    padding: 7px 14px;
    transition: background .15s, color .15s;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(99, 102, 241, 0.28));
    color: #fff;
}

.navbar .dropdown-toggle::after { vertical-align: 0.15em; opacity: 0.7; }

/* ---------- Headings ---------- */
h1, h2, h3 { color: #f4f3ff; font-weight: 700; letter-spacing: .3px; }

h1, h2 {
    background: linear-gradient(90deg, #ffffff 0%, var(--violet-2) 60%, var(--cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.display-5 { text-shadow: 0 0 40px var(--glow); }
.lead { color: var(--muted); }
p, label, .form-label, li { color: var(--text); }
.text-muted { color: var(--muted) !important; }
a { color: var(--violet-2); }
a:hover { color: var(--cyan); }

/* ---------- Cards (glassmorphism) ---------- */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-brd);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--text);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

a .card:hover,
.card.hoverable:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 16px 50px rgba(99, 102, 241, 0.35), 0 0 0 1px var(--glow);
}

.card-title { color: #fff; font-weight: 600; }
.card-text { color: var(--muted); }

/* Result text: never touch the edges, always wrap long tokens/URLs. */
.card-body p, .card-body li { overflow-wrap: anywhere; word-break: break-word; }
.card-body { padding: 1.1rem 1.25rem; }
.font-btn { min-width: 2.4rem; }

/* ---------- Buttons ---------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    border: none;
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary,
.btn-success {
    background-image: linear-gradient(135deg, var(--violet) 0%, var(--indigo) 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}

.btn-success {
    background-image: linear-gradient(135deg, #7c3aed 0%, var(--cyan) 130%);
}

.btn-primary:hover,
.btn-success:hover { filter: brightness(1.12); box-shadow: 0 8px 28px rgba(139, 92, 246, 0.6); color: #fff; }

.btn-danger {
    background-image: linear-gradient(135deg, #db2777 0%, #f43f5e 100%);
    color: #fff;
}

.btn-secondary {
    background: rgba(148, 163, 184, 0.18);
    color: #e5e7ff;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

/* ---------- Forms ---------- */
.form-control,
.form-select,
textarea {
    background: rgba(10, 9, 28, 0.7);
    border: 1px solid rgba(139, 92, 246, 0.28);
    color: var(--text);
    border-radius: 10px;
}

.form-control::placeholder { color: #7c82ad; }

.form-control:focus,
.form-select:focus,
textarea:focus {
    background: rgba(10, 9, 28, 0.9);
    border-color: var(--violet);
    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.28);
    color: #fff;
}

.form-select option { background: #12102a; color: var(--text); }
.form-check-input { background-color: rgba(10, 9, 28, 0.8); border-color: rgba(139, 92, 246, 0.5); }
.form-check-input:checked { background-color: var(--violet); border-color: var(--violet); }

.alert-info {
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.35);
    color: #cffafe;
}

.alert-success {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #ede9fe;
}

.alert-warning {
    background: rgba(245, 215, 110, 0.12);
    border: 1px solid rgba(245, 215, 110, 0.4);
    color: #fef3c7;
}

/* ---------- Footer ---------- */
.footer {
    border-top: 1px solid var(--card-brd);
    background: rgba(8, 7, 24, 0.6);
    color: var(--muted);
    backdrop-filter: blur(8px);
    padding: 14px 0;
}
.footer .float-end { color: var(--violet-2); font-variant-numeric: tabular-nums; }

/* ===================================================================
   Loading overlay — orbiting planet + progress bar + status
   =================================================================== */
.zohar-loader {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(10, 8, 30, 0.82), rgba(3, 3, 12, 0.92));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.zohar-loader.is-active { display: flex; }

.zohar-loader__box {
    width: min(420px, 88vw);
    padding: 34px 30px 28px;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--card-brd);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--glow);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===================================================================
   Sun with an orbiting, spinning Earth — universal "AI is loading" animation
   =================================================================== */
.zohar-se-wrap { text-align: center; padding: 22px 10px; }
.zohar-se-label { margin-top: 16px; color: var(--muted); font-size: .92rem; }

.zohar-se {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    position: relative;
}
/* Square frame with a glowing golden border — the constellation rotates inside it. */
.zohar-se-frame {
    width: max-content;
    margin: 0 auto;
    padding: 14px;
    border-radius: 18px;
    border: 1.5px solid rgba(245, 197, 66, 0.65);
    background: radial-gradient(120% 120% at 50% 40%, rgba(245, 197, 66, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
    animation: zoharGoldGlow 2.6s ease-in-out infinite;
}
@keyframes zoharGoldGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.45), 0 0 18px 3px rgba(245, 197, 66, 0.30), inset 0 0 20px rgba(245, 197, 66, 0.08); }
    50%      { box-shadow: 0 0 0 1.5px rgba(255, 216, 112, 0.95), 0 0 34px 8px rgba(245, 197, 66, 0.55), inset 0 0 26px rgba(245, 197, 66, 0.14); }
}

/* 3D-look Solar System loader (SVG fallback; real Three.js canvas overlays it when ready). */
.zohar-orrery-slot { position: relative; }
.zse-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.zse-sun { transform-box: fill-box; transform-origin: center; animation: zoharSunPulse 3s ease-in-out infinite; }
.zse-star { animation: zseTwinkle 2.6s ease-in-out infinite; }
@keyframes zseTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* The Sun in the centre, softly pulsing */
.zohar-se__sun {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #fff7cf 0%, var(--gold) 42%, #f59e0b 70%, #d97706 100%);
    box-shadow: 0 0 26px rgba(245, 215, 110, 0.85), 0 0 60px rgba(245, 158, 11, 0.45);
    animation: zoharSunPulse 3s ease-in-out infinite;
}

/* Planets orbiting the Sun — a little constellation. Each orbit turns at its own speed. */
.zohar-se__orbit {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(160, 150, 210, 0.22);
    transform-origin: center center;
}
.zohar-se__orbit.o1 { width: 88px;  height: 88px;  margin: -44px 0 0 -44px; animation: spin 4.5s linear infinite; }
.zohar-se__orbit.o2 { width: 106px; height: 106px; margin: -53px 0 0 -53px; animation: spin 7s linear infinite reverse; }
.zohar-se__orbit.o3 { width: 122px; height: 122px; margin: -61px 0 0 -61px; animation: spin 10s linear infinite; }
.zohar-se__orbit.o4 { width: 140px; height: 140px; margin: -70px 0 0 -70px; animation: spin 15s linear infinite reverse; }
.zohar-se__orbit .pl {
    position: absolute;
    top: -5px; left: 50%;
    width: 10px; height: 10px; margin-left: -5px;
    border-radius: 50%;
}
.pl1 { width: 6px;  height: 6px;  margin-left: -3px;   top: -3px;   background: radial-gradient(circle at 30% 30%, #d8d2c4, #8a8377); box-shadow: 0 0 6px rgba(200, 190, 170, 0.6); }
.pl2 { width: 9px;  height: 9px;  margin-left: -4.5px; top: -4.5px; background: radial-gradient(circle at 30% 30%, #f3d9a0, #c99a54); box-shadow: 0 0 8px rgba(230, 180, 110, 0.6); }
.pl4 { width: 8px;  height: 8px;  margin-left: -4px;   top: -4px;   background: radial-gradient(circle at 30% 30%, #e88a5a, #b23f22); box-shadow: 0 0 7px rgba(220, 90, 50, 0.6); }
.earthy {
    width: 11px; height: 11px; margin-left: -5.5px; top: -5.5px;
    overflow: hidden;
    background-color: #1d4ed8;
    background-image:
        radial-gradient(circle at 32% 40%, #4ade80 0 22%, transparent 23%),
        radial-gradient(circle at 66% 62%, #22c55e 0 17%, transparent 18%),
        linear-gradient(90deg, #2563eb, #1e3a8a);
    background-size: 200% 100%, 200% 100%, 100% 100%;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
    animation: zoharEarthSpin 2.6s linear infinite;
}

/* The orbit ring rotates, carrying the Earth around the Sun */
.zohar-se__ring {
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(167, 139, 250, 0.35);
    border-radius: 50%;
    animation: spin 7s linear infinite;
}

/* The Earth — blue oceans + green land, with continents scrolling to look like it spins */
.zohar-se__earth {
    position: absolute;
    top: -10px; left: 50%;
    width: 20px; height: 20px;
    margin-left: -10px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #1d4ed8;
    background-image:
        radial-gradient(circle at 30% 42%, #4ade80 0 20%, transparent 21%),
        radial-gradient(circle at 68% 60%, #22c55e 0 16%, transparent 17%),
        radial-gradient(circle at 50% 20%, #86efac 0 10%, transparent 11%),
        linear-gradient(90deg, #2563eb, #1e3a8a);
    background-size: 200% 100%, 200% 100%, 200% 100%, 100% 100%;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.75), inset -3px -3px 6px rgba(0, 0, 0, 0.45);
    animation: zoharEarthSpin 2.4s linear infinite;
}

/* Pulsing golden progress ring with black droplets around the Sun (shows while the voice loads). */
.zohar-se__prog {
    position: absolute;
    top: 50%; left: 50%;
    width: 96px; height: 96px;
    margin: -48px 0 0 -48px;
    pointer-events: none;
    overflow: visible;
}
.zse-ring {
    stroke-opacity: 0.6;
    animation: zseRingPulse 1.6s ease-in-out infinite;
}
.zse-arc {
    filter: drop-shadow(0 0 3px rgba(245, 197, 66, 0.85));
    transform-box: fill-box; transform-origin: center;
    animation: zseSpin 1.25s linear infinite;
}
.zse-drops {
    transform-box: fill-box; transform-origin: center;
    animation: zseSpinRev 6s linear infinite;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}
@keyframes zseSpin { to { transform: rotate(360deg); } }
@keyframes zseSpinRev { to { transform: rotate(-360deg); } }
@keyframes zseRingPulse {
    0%, 100% { stroke-opacity: 0.4; stroke-width: 2.4; }
    50%      { stroke-opacity: 1; stroke-width: 4; }
}

@keyframes zoharSunPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50%      { transform: scale(1.06); filter: brightness(1.12); }
}
@keyframes zoharEarthSpin {
    to { background-position: -40px 0, -40px 0, -40px 0, 0 0; }
}

.zohar-loader__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    letter-spacing: .3px;
}

/* Indeterminate progress bar */
.zohar-progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.15);
    overflow: hidden;
    position: relative;
}

.zohar-progress__fill {
    position: absolute;
    top: 0; left: 0; height: 100%;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--indigo), var(--violet), var(--cyan));
    box-shadow: 0 0 16px var(--glow);
    animation: indeterminate 1.5s ease-in-out infinite;
}

@keyframes indeterminate {
    0%   { left: -40%; width: 40%; }
    50%  { left: 30%;  width: 55%; }
    100% { left: 100%; width: 40%; }
}

.zohar-loader__status {
    margin-top: 14px;
    color: var(--muted);
    font-size: .92rem;
    min-height: 1.2em;
}

/* ===================================================================
   Cosmic modal (AI meanings, explanations)
   =================================================================== */
.zohar-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(ellipse at center, rgba(10, 8, 30, 0.78), rgba(3, 3, 12, 0.9));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.zohar-modal.is-active { display: flex; }

.zohar-modal__box {
    width: min(640px, 94vw);
    max-height: 86vh;
    max-width: 96vw;
    min-width: 300px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    background: #0d0b24;
    border: 1px solid var(--card-brd);
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--glow);
    overflow: hidden;
    resize: both;                    /* drag the bottom-right corner to stretch the popup */
}
.zohar-modal.is-max .zohar-modal__box { resize: none; }

.zohar-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-brd);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.12));
}

.zohar-modal__title { font-weight: 700; font-size: 1.1rem; color: #fff; }

.zohar-modal__close {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 8px;
    transition: color .15s, background .15s;
}
.zohar-modal__close:hover { color: #fff; background: rgba(139, 92, 246, 0.25); }

.zohar-modal__body {
    padding: 20px;
    flex: 1 1 auto;              /* fill the box so overflow-y can scroll inside the flex column */
    min-height: 0;              /* critical: lets the scroll area shrink instead of overflowing */
    overflow-y: auto;            /* long AI text always scrolls */
    -webkit-overflow-scrolling: touch;
    color: var(--text);
    line-height: 1.6;
}

/* Maximized modal (fill screen) — keeps all content/interaction. */
.zohar-modal.is-max { padding: 0; }
.zohar-modal.is-max .zohar-modal__box { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
.zohar-modal.is-max .zohar-modal__body { flex: 1; }

/* 3D canvas containers that grow when the modal is maximized. */
.modal-fill { width: 100%; height: 68vh; min-height: 420px; border-radius: 12px; overflow: hidden; background: #05050f; }
.zohar-modal.is-max .modal-fill { height: calc(100vh - 130px); min-height: 0; border-radius: 0; }

/* ===================================================================
   Talking face (read-aloud)
   =================================================================== */
#zohar-face {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;   /* always on top, even above the modal (1060) and loader (1050) */
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 12px 12px 10px;
    background: var(--card-bg);
    border: 1px solid var(--card-brd);
    border-radius: 16px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--glow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#zohar-face.is-active { display: flex; animation: facePop .25s ease both; }
#zohar-face .face-label { margin-top: 6px; font-size: .72rem; color: var(--muted); }
#zohar-face .ava-canvas {
    width: 168px; height: 168px;
    border-radius: 16px;
    border: 1px solid rgba(139, 92, 246, 0.5);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5), 0 0 20px rgba(139, 92, 246, 0.25);
    background: #0b0920;
    display: block;
}
@keyframes facePop { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }

/* Generic detail popup (planet / tarot card / trigram) — image + text, with maximize */
#zohar-detail {
    position: fixed;
    inset: 0;
    z-index: 1120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(ellipse at center, rgba(10, 8, 30, 0.82), rgba(3, 3, 12, 0.92));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#zohar-detail.is-active { display: flex; }
#zohar-detail.is-max { padding: 0; }
.zohar-detail__box {
    width: min(560px, 94vw);
    max-height: 88vh;
    max-width: 96vw;
    min-width: 300px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    background: #0d0b24;
    border: 1px solid var(--card-brd);
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--glow);
    overflow: hidden;
    resize: both;                    /* drag the bottom-right corner to stretch the popup */
}
#zohar-detail.is-max .zohar-detail__box { resize: none; }
#zohar-detail.is-max .zohar-detail__box { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
.zohar-detail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--card-brd);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.12));
}
.zohar-detail__title { font-weight: 700; font-size: 1.15rem; color: #fff; }
.zohar-detail__btn {
    background: transparent; border: none; color: var(--muted);
    font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: 8px; padding: 4px 8px;
    transition: color .15s, background .15s;
}
.zohar-detail__btn:hover { color: #fff; background: rgba(139, 92, 246, 0.25); }
.zohar-detail__body { padding: 18px; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.zohar-detail__img { width: 100%; border-radius: 12px; margin-bottom: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55); }
#zohar-detail.is-max .zohar-detail__img { max-width: 62vh; display: block; margin: 0 auto 14px; }
.zohar-detail__body p { color: var(--text); line-height: 1.65; overflow-wrap: anywhere; }

/* ===================================================================
   Rich-text rendering of AI answers (titles, lists, emphasis) — used
   in result boxes, the modal and detail popups (class .zohar-rich).
   =================================================================== */
.zohar-rich { overflow-wrap: anywhere; word-break: break-word; }
.zohar-rich h4 {
    font-size: 1.12rem; color: #fff; font-weight: 700; letter-spacing: .2px;
    margin: 1.05rem 0 .45rem; padding-bottom: .25rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.28);
    -webkit-text-fill-color: currentColor; background: none;
}
.zohar-rich h5 {
    font-size: 1rem; color: var(--violet-2); font-weight: 700;
    margin: .9rem 0 .35rem; -webkit-text-fill-color: currentColor; background: none;
}
.zohar-rich > :first-child { margin-top: 0; }
.zohar-rich > :last-child { margin-bottom: 0; }
.zohar-rich p { margin: 0 0 .7rem; line-height: 1.65; color: var(--text); }
.zohar-rich ul, .zohar-rich ol { margin: .25rem 0 .8rem; padding-left: 1.45rem; }
.zohar-rich li { margin: .3rem 0; line-height: 1.55; color: var(--text); }
.zohar-rich ul li::marker { color: var(--cyan); }
.zohar-rich ol li::marker { color: var(--violet-2); font-weight: 700; }
.zohar-rich strong { color: #fff; font-weight: 700; }
.zohar-rich em { color: #e9d5ff; font-style: italic; }
.zohar-rich code {
    background: rgba(139, 92, 246, 0.18); color: #e9d5ff;
    padding: 1px 6px; border-radius: 6px; font-size: .92em;
}

/* "Summoning the voice" busy indicator (spins until TTS audio starts) */
#zohar-speak-busy {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1190;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-brd);
    border-radius: 16px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--glow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#zohar-speak-busy.is-active { display: flex; }
#zohar-speak-busy .busy-label { margin-top: 6px; font-size: .72rem; color: var(--muted); }

/* Rotating constellation loader (biorhythm / planet interpretations) */
.constellation-spin { animation: constspin 9s linear infinite; transform-origin: center; }
@keyframes constspin { to { transform: rotate(360deg); } }
.constellation-star { animation: constTwinkle 2.4s ease-in-out infinite; }
.constellation-star:nth-of-type(2) { animation-delay: .3s; }
.constellation-star:nth-of-type(3) { animation-delay: .7s; }
.constellation-star:nth-of-type(4) { animation-delay: 1.1s; }
.constellation-star:nth-of-type(5) { animation-delay: 1.5s; }
.constellation-star:nth-of-type(6) { animation-delay: 1.9s; }
.constellation-star:nth-of-type(7) { animation-delay: 2.2s; }
@keyframes constTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Home hero tweaks */
.hero-sub { color: var(--muted); }

/* ---------- Tarot spread ---------- */
.tarot-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.45);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 18px rgba(139, 92, 246, 0.25);
    background: #0b0920;
    transition: transform .3s ease, box-shadow .3s ease;
    animation: cardDeal .5s ease both;
}

.tarot-card img { display: block; width: 100%; height: auto; }

.tarot-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 44px rgba(99, 102, 241, 0.5), 0 0 26px var(--glow);
}

.tarot-spread .col:nth-child(1) .tarot-card { animation-delay: .05s; }
.tarot-spread .col:nth-child(2) .tarot-card { animation-delay: .18s; }
.tarot-spread .col:nth-child(3) .tarot-card { animation-delay: .31s; }

@keyframes cardDeal {
    from { opacity: 0; transform: translateY(24px) rotateZ(-6deg); }
    to   { opacity: 1; transform: translateY(0) rotateZ(0); }
}

.tarot-pos {
    margin-top: 10px;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cyan);
}

.tarot-name { font-weight: 600; color: #fff; }

/* ---------- Vedic tile on the home page (matches the Vedic page theme) ---------- */
.vedic-tile {
    background: linear-gradient(160deg, rgba(107, 15, 26, 0.55), rgba(58, 10, 16, 0.68)) !important;
    border: 1px solid rgba(228, 180, 76, 0.55) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(228, 180, 76, 0.15) !important;
    font-family: Georgia, "Times New Roman", "Noto Serif", serif;
}
.vedic-tile .card-title {
    color: #f6d38a !important;
    -webkit-text-fill-color: #f6d38a;
    background: none !important;
    font-weight: 700;
    text-shadow: 0 0 14px rgba(228, 180, 76, 0.35);
}
.vedic-tile .card-text { color: rgba(255, 243, 214, 0.82) !important; }
.vedic-tile__om { -webkit-text-fill-color: #e4b44c; color: #e4b44c; text-shadow: 0 0 14px rgba(228, 180, 76, 0.6); }
a .vedic-tile:hover, .vedic-tile:hover {
    transform: translateY(-4px);
    border-color: #ff9933 !important;
    box-shadow: 0 16px 50px rgba(255, 153, 51, 0.35), 0 0 0 1px rgba(255, 153, 51, 0.55) !important;
}

/* ---------- Version history (changelog) ---------- */
.ver-list { display: flex; flex-direction: column; gap: 2px; }
.ver-item {
    padding: 12px 14px;
    border-left: 2px solid rgba(139, 92, 246, 0.35);
    border-radius: 0 10px 10px 0;
    transition: background .15s;
}
.ver-item + .ver-item { border-top: 1px solid rgba(139, 92, 246, 0.10); }
.ver-item:hover { background: rgba(139, 92, 246, 0.08); }
.ver-item.is-current { border-left-color: var(--gold); background: rgba(245, 215, 110, 0.06); }
.ver-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ver-badge {
    font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 2px 10px; border-radius: 999px; color: #fff;
    background: linear-gradient(135deg, var(--violet), var(--indigo));
}
.ver-item.is-current .ver-badge { background: linear-gradient(135deg, #f59e0b, var(--gold)); color: #2a1a04; }
.ver-current {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    padding: 1px 8px; border-radius: 999px; color: #2a1a04;
    background: var(--gold);
}
.card.ver-latest {
    border: 1px solid rgba(150, 130, 226, 0.22);
    border-left: 3px solid var(--gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* ---------- Activity & AI costs (admin) ---------- */
.act-stat { text-align: center; }
.act-stat__label { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.act-stat__value { font-size: 1.7rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; margin-top: 2px; }
.card.answer-surface .act-stat__value { color: var(--gold); }
.act-table { color: var(--text); font-variant-numeric: tabular-nums; }
.act-table thead th { color: var(--muted); font-weight: 600; font-size: .8rem; border-bottom: 1px solid var(--card-brd); text-transform: uppercase; letter-spacing: .03em; }
.act-table td, .act-table th { border-color: rgba(150, 130, 226, 0.14); padding: .4rem .55rem; vertical-align: middle; }
.act-table tbody tr:hover { background: rgba(139, 92, 246, 0.08); }
.act-user { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.act-user::-webkit-details-marker { display: none; }
.act-user__title { display: inline-flex; align-items: center; gap: 8px; }
.act-chevron::before {
    content: "▸"; display: inline-block; color: var(--gold); font-size: 1rem;
    transition: transform .15s ease;
}
details[open] > .act-user .act-chevron::before { transform: rotate(90deg); }
.act-user:hover .act-user__name { color: var(--gold); }
.act-user__name { font-weight: 700; font-size: 1.05rem; transition: color .15s; }
.act-user__tag {
    font-size: .7rem; color: var(--muted); border: 1px solid var(--card-brd);
    border-radius: 999px; padding: 1px 8px;
}
.act-user__meta { color: var(--muted); white-space: nowrap; }
.act-user__meta strong { color: var(--gold); }
.act-day { margin-top: 14px; }
.act-day__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--card-brd); }
.act-day__date { font-weight: 600; color: var(--violet-2); }
.act-day__meta { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }

.ver-seq {
    font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums;
    padding: 1px 7px; border-radius: 999px; border: 1px solid var(--card-brd);
}
.ver-date { color: var(--muted); font-size: .85rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.ver-sum { color: var(--text); margin-top: 4px; line-height: 1.5; }

/* ---------- Role badges (user management + navbar) ---------- */
.role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.badge-admin   { background: rgba(244, 63, 94, 0.18);  color: #fecdd3; border-color: rgba(244, 63, 94, 0.5); }
.badge-contrib { background: rgba(139, 92, 246, 0.20); color: #ddd6fe; border-color: rgba(139, 92, 246, 0.55); }
.badge-viewer  { background: rgba(34, 211, 238, 0.14); color: #cffafe; border-color: rgba(34, 211, 238, 0.45); }
.role-badge--nav { margin-left: 6px; font-size: .64rem; padding: 1px 8px; background: rgba(139, 92, 246, 0.22); color: #ede9fe; border-color: rgba(139, 92, 246, 0.5); vertical-align: middle; }

/* ===================================================================
   Responsive placement / alignment for phones & small screens
   =================================================================== */
@media (max-width: 575.98px) {
    .container { padding-left: 14px; padding-right: 14px; }
    .card-body { padding: 0.9rem 1rem; }
    h1, .display-5 { font-size: 1.7rem; }
    h2 { font-size: 1.4rem; }

    /* Talking avatar / cosmic pulse + the voice busy indicator: smaller and safely inset. */
    #zohar-face {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        padding: 8px 8px 6px;
    }
    #zohar-face .face-label { font-size: .64rem; }
    #zohar-speak-busy {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    /* Loading overlay box fits small screens. */
    .zohar-loader__box { width: min(340px, 92vw); padding: 26px 20px 22px; }

    /* Form columns that hold a control stack full-width on phones (never cramped side-by-side). */
    .col-auto:has(> select),
    .col-auto:has(> .form-select),
    .col-auto:has(> .form-control),
    .col-auto:has(> textarea) { flex: 1 1 100%; max-width: 100%; }
    .col-auto > .form-select,
    .col-auto > .form-control,
    .col-auto > select,
    .col-auto > textarea { width: 100%; }
    /* Comfortable tap targets for native pickers. */
    input[type="date"], input[type="time"], input[type="number"], .v-input, .form-select, .form-control { min-height: 42px; }
}

/* In-page media never forces the page wider than the screen (fixed widgets excluded). */
main img, main video { max-width: 100%; height: auto; }
.table-responsive { overflow-x: auto; }

.hexagram-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(34, 211, 238, 0.3));
    border: 1px solid var(--card-brd);
    box-shadow: 0 0 18px var(--glow);
}

/* ===== Vedic goddess: glowing call-button + 3D comet reveal ===== */
.goddess-wrap {
    margin: 6px 0 22px;
}
.goddess-btn {
    position: relative;
    display: inline-block;
    width: min(240px, 62vw);
    height: min(240px, 62vw);
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.goddess-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(245, 215, 110, 0.75);
    position: relative;
    z-index: 2;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.goddess-btn::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    animation: goddessPump 2.4s ease-in-out infinite;
}
@keyframes goddessPump {
    0%, 100% { box-shadow: 0 0 0 2px rgba(245, 197, 66, 0.55), 0 0 26px 6px rgba(245, 197, 66, 0.35); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 216, 112, 0.95), 0 0 52px 16px rgba(245, 197, 66, 0.65); }
}
.goddess-btn:hover img { transform: scale(1.03); filter: brightness(1.06) saturate(1.05); }
.goddess-btn:active img { transform: scale(0.98); }
.goddess-btn__hint {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    z-index: 3;
    padding: 4px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: #2a1a04;
    background: linear-gradient(135deg, #ffe08a, #f59e0b);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

.goddess-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: #d9c9a0;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}
.goddess-opt input {
    width: 16px;
    height: 16px;
    accent-color: #e4b44c;
    cursor: pointer;
}

.goddess-lock { overflow: hidden; }

.goddess-stage {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    perspective: 1600px;
    background: radial-gradient(circle at 50% 40%, rgba(30, 18, 4, 0.85), rgba(4, 4, 12, 0.97) 70%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    overflow: hidden;
}
.goddess-stage.is-active { display: flex; animation: goddessFade 0.4s ease both; }
@keyframes goddessFade { from { opacity: 0; } to { opacity: 1; } }

.goddess-scene {
    position: relative;
    width: min(88vw, 620px);
    height: min(84vh, 820px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fully flat stacking: the card flips via a pure-2D scaleX (JS), so the ring layers
       sort by plain z-index on every device — nothing bleeds through the card on iOS. */
}

.goddess-3d {
    position: relative;
    z-index: 2;
    transition: filter .5s ease;   /* only the greeting bloom eases; transform is per-frame */
    /* scaleX flip is driven by JS each frame (so we can pause for the greeting). */
}
.goddess-3d .gimg--base {
    display: block;
    position: relative;
    max-height: 76vh;
    max-width: 84vw;
    border-radius: 18px;
    box-shadow: 0 0 60px 12px rgba(245, 197, 66, 0.55),
                0 0 150px 40px rgba(245, 197, 66, 0.28);
}
/* The "looking left / right + smiling" frames crossfade over the base during the greeting. */
.goddess-3d .gimg--left,
.goddess-3d .gimg--right {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
    pointer-events: none;
}
.goddess-3d.face-left  .gimg--left  { opacity: 1; }
.goddess-3d.face-right .gimg--right { opacity: 1; }

/* Golden comet orbiting/chasing her — head + tapering flame tail */
.goddess-comet {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    z-index: 1;
    transform-origin: 0 0;
    animation: cometOrbit 8s linear infinite;
    pointer-events: none;
}
@keyframes cometOrbit { to { transform: rotate(360deg); } }
.goddess-comet__head {
    position: absolute;
    left: 36vh;
    top: -3vh;
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    background: radial-gradient(circle, #fffbe6 0%, #ffcf4a 42%, rgba(245, 197, 66, 0) 72%);
    box-shadow: 0 0 40px 14px rgba(255, 207, 74, 0.75);
}
.goddess-comet__tail {
    position: absolute;
    left: 6vh;
    top: -1.4vh;
    width: 32vh;
    height: 2.8vh;
    border-radius: 50%;
    transform-origin: right center;
    background: linear-gradient(90deg, rgba(255, 214, 120, 0) 0%, rgba(255, 214, 120, 0.5) 55%, rgba(255, 245, 200, 0.9) 100%);
    filter: blur(5px);
}

/* Two flaming golden rings orbiting the card: zodiac + Vedic grahas. Split into a BACK
   layer (behind the card) and a FRONT layer (in front) via plain 2D z-index, driven by
   JS — device-independent, so nothing bleeds through the card on iOS/mobile. */
.gorbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.gorbit--back  { z-index: 1; }
.gorbit--front { z-index: 3; }
.gorbit svg { position: absolute; left: 0; top: 0; overflow: visible; }
/* The glowing orbit line — alive: a fast, organic flame flicker plus a stroke pulse. */
.gorbit__line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    animation: flameFlicker 0.9s ease-in-out infinite;
}
.gorbit__line--zodiac { stroke: #ffe6a0; animation-duration: 0.85s; }
.gorbit__line--vedic  { stroke: #ffcf88; animation-duration: 1.15s; }
@keyframes flameFlicker {
    0%   { stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(255, 214, 120, 0.9))  drop-shadow(0 0 12px rgba(255, 140, 40, 0.55)); opacity: 0.86; }
    30%  { stroke-width: 3.1; filter: drop-shadow(0 0 10px rgba(255, 240, 180, 1))   drop-shadow(0 0 28px rgba(255, 120, 30, 0.9));  opacity: 1; }
    55%  { stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(255, 224, 140, 0.98)) drop-shadow(0 0 18px rgba(255, 150, 50, 0.7));  opacity: 0.94; }
    78%  { stroke-width: 3.0; filter: drop-shadow(0 0 9px rgba(255, 236, 170, 1))    drop-shadow(0 0 24px rgba(255, 130, 35, 0.82)); opacity: 0.99; }
    100% { stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(255, 214, 120, 0.9))  drop-shadow(0 0 12px rgba(255, 140, 40, 0.55)); opacity: 0.86; }
}
/* Orbiting glyphs — positioned by JS; front/back set via z-index each frame. Glow pulses alive. */
.gorbit__glyph {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    line-height: 1;
    color: #ffe9a8;
    /* Static glow (always present); the pulse animation is layered on top for desktop only. */
    text-shadow: 0 0 8px rgba(255, 207, 74, 0.85), 0 0 18px rgba(245, 197, 66, 0.5), 0 0 28px rgba(255, 140, 40, 0.35);
    animation: glyphGlow 1s ease-in-out infinite;
    will-change: transform, opacity;
}
.gorbit__glyph--vedic {
    color: #ffd27a;
    font-size: 34px;
    animation-duration: 1.3s;
}
@keyframes glyphGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(255, 207, 74, 0.85), 0 0 18px rgba(245, 197, 66, 0.5), 0 0 28px rgba(255, 140, 40, 0.35); }
    50%      { text-shadow: 0 0 12px rgba(255, 236, 170, 1),  0 0 28px rgba(255, 170, 60, 0.75), 0 0 42px rgba(255, 120, 30, 0.55); }
}

/* Planets orbiting her like the sun — positioned by JS; surface texture is a static
   per-planet background; the day/night shadow is the .planet__shade layer on top. */
.planet {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    box-shadow: 0 0 14px 2px rgba(0, 0, 0, 0.5), 0 0 6px rgba(255, 255, 255, 0.18) inset;
    will-change: transform;
}
.planet__shade {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    /* Fixed terminator (lit toward the RIGHT edge); JS rotates this to face her. */
    background: radial-gradient(circle at 72% 50%, rgba(0,0,0,0) 0 30%, rgba(0,0,0,0.34) 60%, rgba(0,0,0,0.8) 100%);
    will-change: transform;
}
/* ---- Surface structure (static, clipped to the sphere) ---- */
.planet--mercury {
    background:
        radial-gradient(circle at 62% 30%, rgba(0,0,0,0.28) 0 6%, transparent 8%),
        radial-gradient(circle at 40% 62%, rgba(0,0,0,0.22) 0 8%, transparent 10%),
        radial-gradient(circle at 68% 68%, rgba(0,0,0,0.2) 0 5%, transparent 7%),
        radial-gradient(circle at 38% 36%, #d2c9be, #7d766c 88%);
}
.planet--venus {
    background:
        linear-gradient(120deg, rgba(255,244,206,0.5), transparent 45%),
        repeating-linear-gradient(96deg, rgba(255,240,200,0.12) 0 6%, rgba(180,140,80,0.12) 6% 12%),
        radial-gradient(circle at 40% 38%, #f3e2b0, #c39a5a 88%);
}
.planet--earth {
    background:
        radial-gradient(circle at 30% 62%, #3f8a44 0 13%, transparent 15%),
        radial-gradient(circle at 64% 42%, #4f9a4a 0 12%, transparent 15%),
        radial-gradient(circle at 56% 74%, #3f8047 0 8%, transparent 10%),
        radial-gradient(circle at 46% 30%, #eef6ff 0 6%, transparent 9%),
        radial-gradient(circle at 40% 40%, #7fb4e8, #1f4f92 88%);
}
.planet--mars {
    background:
        radial-gradient(circle at 50% 10%, #ecdcc4 0 8%, transparent 11%),
        radial-gradient(circle at 62% 58%, rgba(70,18,2,0.5) 0 15%, transparent 18%),
        radial-gradient(circle at 34% 54%, rgba(70,18,2,0.4) 0 11%, transparent 14%),
        radial-gradient(circle at 42% 40%, #e46a38, #9c360b 88%);
}
.planet--jupiter {
    background:
        radial-gradient(ellipse 22% 14% at 66% 64%, #c2543a 0 60%, transparent 100%),
        linear-gradient(179deg,
            #e8d4b4 0 11%, #c39a63 11% 22%, #dcc094 22% 33%, #b6864f 33% 45%,
            #e3cca0 45% 56%, #bd8f57 56% 68%, #ddc59a 68% 80%, #c8a067 80% 90%, #e8d4b4 90% 100%);
}
.planet--saturn {
    background:
        linear-gradient(179deg,
            #f2e6c4 0 14%, #d9c184 14% 30%, #eaddb0 30% 45%, #cbb074 45% 60%,
            #e6d6a4 60% 76%, #d3bd82 76% 100%);
}
.planet--uranus {
    background:
        repeating-linear-gradient(179deg, rgba(255,255,255,0.05) 0 10%, rgba(0,0,0,0.05) 10% 20%),
        radial-gradient(circle at 42% 40%, #c3edf2, #6fbcc6 90%);
}
.planet--neptune {
    background:
        radial-gradient(circle at 40% 64%, rgba(8,16,54,0.65) 0 9%, transparent 12%),
        repeating-linear-gradient(179deg, rgba(255,255,255,0.05) 0 12%, rgba(0,0,0,0.06) 12% 24%),
        radial-gradient(circle at 42% 40%, #6f8ff0, #274bc4 90%);
}
/* Saturn's ring — a tilted ellipse hugging the planet. */
.planet__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 230%;
    height: 230%;
    margin: -115% 0 0 -115%;
    border-radius: 50%;
    border: 2px solid rgba(240, 225, 170, 0.65);
    border-top-color: rgba(240, 225, 170, 0.2);
    border-bottom-color: rgba(240, 225, 170, 0.2);
    transform: rotate(-18deg) scaleY(0.34);
    box-shadow: 0 0 6px rgba(240, 220, 150, 0.4);
}

/* Greeting: when she faces the viewer the card simply holds and warms — no overlays. */
.goddess-3d.is-greeting img { filter: brightness(1.12) saturate(1.08) drop-shadow(0 0 30px rgba(255, 210, 110, 0.5)); }

.goddess-close {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(245, 215, 110, 0.6);
    background: rgba(20, 14, 4, 0.6);
    color: #ffe08a;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}
.goddess-close:hover { transform: scale(1.08); background: rgba(60, 40, 8, 0.8); }

@media (prefers-reduced-motion: reduce) {
    .goddess-btn::after { animation: none; box-shadow: 0 0 0 3px rgba(255, 216, 112, 0.9), 0 0 40px 12px rgba(245, 197, 66, 0.55); }
    .goddess-comet { animation-duration: 20s; }
    .gorbit__line { animation-duration: 6s; }
}

/* On phones/tablets (no hover, coarse pointer), drop the continuously-repainting glow
   animations — the orbit-line flame filter and the glyph text-shadow pulse. Static glows
   stay (they cost nothing per frame). This is the big smoothness win on mobile. */
@media (hover: none) and (pointer: coarse) {
    .gorbit__line {
        animation: none;
        filter: drop-shadow(0 0 4px rgba(255, 220, 130, 0.9)) drop-shadow(0 0 10px rgba(255, 140, 40, 0.5));
    }
    .gorbit__glyph { animation: none; }
    .goddess-comet__head, .goddess-comet__tail { will-change: auto; }
}

/* Daily study documents (Tanya / Chumash / Tehillim / Rambam): translation shown by default,
   Hebrew hidden unless the reader ticks "Show Hebrew". Professionally set typography. */
.study-opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #d9c9a0;
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.study-opt input { width: 15px; height: 15px; accent-color: #e4b44c; cursor: pointer; }

.study-he {
    display: none;                       /* hidden by default — only the translation shows */
    font-size: 1.45rem;
    line-height: 2.1;
    color: #f4ecd8;
    text-align: right;
    font-family: "Frank Ruhl Libre", "Times New Roman", "Noto Serif Hebrew", serif;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(245, 215, 110, 0.3);
}
.study-doc.show-he .study-he { display: block; }
.study-he p { margin: 0 0 .55rem; }

.study-tr { font-size: 1.08rem; line-height: 1.78; color: var(--text, #ecedfb); }
.study-tr p { margin: 0 0 .8rem; text-align: left; }
.study-tr p:last-child { margin-bottom: 0; }

.study-rashi {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(245, 215, 110, 0.3);
    font-size: 1rem;
    line-height: 1.68;
    color: #e7dcc2;
}
.study-rashi__h { color: var(--gold); font-weight: 700; margin-bottom: 8px; letter-spacing: .3px; }

/* Section heading inside a Daily reading — Tehillim psalm ("Psalm N") or Talmud amud ("… 110a"). */
.study-sec-h { color: var(--gold); font-weight: 700; font-size: 1.12rem; letter-spacing: .01em; margin: 1.15rem 0 .45rem; }
.study-sec-h:first-child { margin-top: 0; }
.study-tr .zohar-rich h2, .study-tr h2 { color: var(--gold); font-weight: 700; font-size: 1.12rem; margin: 1.15rem 0 .45rem; }
.study-rashi p { margin: 0 0 .55rem; }

/* Nested navbar submenus under the "Mind" menu (Daily / Bible / Wisdom). */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .submenu-toggle { display: flex; align-items: center; justify-content: space-between; }
.dropdown-submenu > .submenu-toggle::after { content: "\203A"; font-weight: 700; opacity: .65; margin-left: 14px; }
/* Fly-out submenu — always opaque (inherits the navbar dropdown background) so it stays
   readable on every device, including iPad. */
.dropdown-submenu > .dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -8px;
    margin-left: 1px;
    background: #0b0920;
    border: 1px solid var(--card-brd);
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.15);
}
.dropdown-submenu > .dropdown-menu.show { display: block; }
/* The navbar expands at ≥576px (navbar-expand-sm); match that so fly-outs stay fly-outs. */
@media (min-width: 576px) {
    .dropdown-submenu:hover > .dropdown-menu { display: block; }
}
@media (max-width: 575.98px) {
    /* Collapsed (hamburger) navbar: submenus open inline and indented, toggled by tap. */
    .dropdown-submenu > .dropdown-menu { position: static; left: auto; margin: 2px 0 6px 1rem; box-shadow: none; }
    .dropdown-submenu > .submenu-toggle::after { content: "\25BE"; }
}

/* Each source segment is a <div> (not <p>) so embedded commentary blocks don't merge paragraphs. */
.study-tr .study-p { margin: 0 0 .8rem; }
.study-tr .study-p:last-child { margin-bottom: 0; }
.study-he .study-p { margin: 0 0 .55rem; }
.study-rashi .study-p { margin: 0 0 .55rem; }

/* Translation overlay — waving flag of the chosen language + status label. */
.ztr-lock { overflow: hidden; }
.ztr {
    position: fixed; inset: 0; z-index: 4200; display: none;
    align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 40%, rgba(20, 16, 40, 0.86), rgba(4, 4, 12, 0.95) 70%);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ztr.is-active { display: flex; animation: ztrFade .35s ease both; }
@keyframes ztrFade { from { opacity: 0; } to { opacity: 1; } }
.ztr__box {
    text-align: center; padding: 30px 40px; border-radius: 18px;
    background: linear-gradient(160deg, rgba(30, 24, 60, 0.6), rgba(12, 9, 32, 0.6));
    border: 1px solid rgba(139, 92, 246, 0.35);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.ztr__flag {
    font-size: 5rem; line-height: 1; display: inline-block;
    transform-origin: 50% 60%;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
    animation: ztrWave 1.5s ease-in-out infinite;
}
@keyframes ztrWave {
    0%   { transform: rotate(-9deg) skewX(4deg)  scaleY(1); }
    25%  { transform: rotate(4deg)  skewX(-5deg) scaleY(0.97); }
    50%  { transform: rotate(9deg)  skewX(4deg)  scaleY(1); }
    75%  { transform: rotate(4deg)  skewX(-5deg) scaleY(0.97); }
    100% { transform: rotate(-9deg) skewX(4deg)  scaleY(1); }
}
.ztr__label { margin-top: 18px; font-size: 1.2rem; font-weight: 700; color: #ecedfb; }
.ztr__status { margin-top: 6px; font-size: 0.95rem; color: var(--gold, #e4b44c); min-height: 1.2em; }

/* Waving language flag inside the shared cosmic waiter (shown for non-English languages). */
.zohar-loader__flag {
    font-size: 3.2rem;
    line-height: 1;
    margin-top: 16px;
    transform-origin: 50% 60%;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
    animation: ztrWave 1.5s ease-in-out infinite;
}

/* ------------------------------------------------------------------ */
/* Responsive polish — tables become stacked cards on phones so nothing */
/* is cramped or clipped, and injected action buttons wrap comfortably. */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    /* A table marked .resp-table renders each row as a labelled card. */
    .resp-table thead { display: none; }
    .resp-table, .resp-table > tbody, .resp-table > tbody > tr, .resp-table > tbody > tr > td {
        display: block; width: 100%;
    }
    .resp-table > tbody > tr {
        margin: 0 0 .75rem; padding: .55rem .8rem;
        border: 1px solid rgba(245, 215, 110, .28); border-radius: 12px;
        background: rgba(255, 255, 255, .03);
    }
    .resp-table > tbody > tr > td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
        padding: .3rem 0; border: 0 !important; text-align: right !important;
        white-space: normal !important; max-width: none !important;
    }
    .resp-table > tbody > tr > td::before {
        content: attr(data-label); font-weight: 600; color: var(--gold, #f5d76e);
        text-align: left; flex: 0 0 auto;
    }
    /* Rows/cells with no label (actions, spacer) just show their content. */
    .resp-table > tbody > tr > td.resp-actions { justify-content: flex-end; padding-top: .5rem; }
    .resp-table > tbody > tr > td.resp-actions::before { content: ""; }
    .resp-table > tbody > tr > td:empty { display: none; }
    .resp-table .table-responsive { overflow: visible; }

    /* A row of injected reading actions never crams — wrap and give room to tap. */
    .zohar-read-actions { gap: .4rem; margin-top: .4rem; }
    .zohar-read-actions .zr-act { padding: .35rem .6rem; }

    /* Shared modal header: title on its own line, tools wrap below so Close is always reachable. */
    .zohar-modal__head { flex-wrap: wrap; padding: 12px 14px; }
    .zohar-modal__title { flex: 1 1 100%; min-width: 0; font-size: 1rem; }
    .zohar-modal__head > .d-flex { flex-wrap: wrap; width: 100%; justify-content: flex-start; }

    /* Detail popup toolbar wraps too. */
    .zohar-detail__head { flex-wrap: wrap; }

    /* Page gutters a touch tighter so content breathes without side-scroll. */
    main.pb-3 { padding-left: 2px; padding-right: 2px; }
}

/* Never let a stray wide element cause the whole page to scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* "Help" item in the System menu — a subtle astro-gold echo of the guide button. */
.nav-help-item { color: #ffe0a0 !important; font-weight: 600; }
.nav-help-item:hover, .nav-help-item:focus { color: #fff4d4 !important; background-color: rgba(255, 190, 80, 0.12) !important; }

/* Far-right "?" help orb in the main navigation — a direct link to the guide, astro-gold and glowing. */
.nav-help-orb {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; padding: 0; margin-left: .35rem;
    border-radius: 50%; font-weight: 800; font-size: 1.05rem; line-height: 1;
    color: #ffe7a6 !important; -webkit-text-fill-color: #ffe7a6;
    background: radial-gradient(circle at 50% 35%, rgba(80, 60, 22, .65), rgba(34, 25, 8, .6));
    border: 1px solid rgba(255, 201, 94, .75);
    text-shadow: 0 0 8px rgba(255, 190, 80, .6);
    box-shadow: 0 0 10px rgba(255, 186, 74, .45), inset 0 0 6px rgba(255, 205, 120, .18);
    animation: navHelpOrbPulse 3.4s ease-in-out infinite;
    transition: transform .18s ease, color .18s ease, box-shadow .18s ease;
}
.nav-help-orb:hover, .nav-help-orb:focus {
    color: #fff4d4 !important; -webkit-text-fill-color: #fff4d4;
    border-color: rgba(255, 224, 142, .95); transform: translateY(-1px) scale(1.06);
    box-shadow: 0 0 22px rgba(255, 205, 95, .8), 0 0 46px rgba(255, 180, 70, .4), inset 0 0 10px rgba(255, 214, 130, .3);
    animation-play-state: paused;
}
@keyframes navHelpOrbPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 176, 66, .3), inset 0 0 6px rgba(255, 205, 120, .12); border-color: rgba(255, 201, 94, .55); }
    50%      { box-shadow: 0 0 20px rgba(255, 205, 95, .85), 0 0 40px rgba(255, 176, 66, .42), inset 0 0 12px rgba(255, 214, 130, .26); border-color: rgba(255, 224, 142, .95); }
}
@media (prefers-reduced-motion: reduce) { .nav-help-orb { animation: none; } }

/* AI-budget gauge in the top navigation. */
.nav-aigauge { display: inline-flex; align-items: center; padding: 2px; border-radius: 50%; text-decoration: none; transition: transform .15s; }
.nav-aigauge:hover { transform: scale(1.08); }
.nav-aigauge svg { display: block; }

/* Admin payment-mode switch (TEST/LIVE) in the top navigation. */
.pay-switch {
    border: 1px solid rgba(150, 170, 210, .5); background: rgba(90, 110, 150, .18);
    color: #cdd6ea; font-weight: 700; font-size: .72rem; letter-spacing: .5px;
    border-radius: 999px; padding: .28rem .7rem; cursor: pointer; line-height: 1; white-space: nowrap;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.pay-switch:hover { transform: translateY(-1px); }
.pay-switch--test { color: #b9e6c8; border-color: rgba(90, 200, 140, .5); background: rgba(60, 160, 110, .15); }
.pay-switch--live {
    color: #ffd9d9; border-color: rgba(255, 90, 90, .8); background: rgba(200, 40, 40, .28);
    box-shadow: 0 0 12px rgba(255, 70, 70, .5); animation: payLive 1.8s ease-in-out infinite;
}
@keyframes payLive {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 70, 70, .4); }
    50%      { box-shadow: 0 0 16px rgba(255, 70, 70, .75); }
}

/* Reading controls injected next to every AI answer: Font / Background / Text-colour dropdowns. */
.font-select {
    height: 31px; max-width: 160px;
    background: rgba(40, 38, 60, .92); color: #e9e6ff; -webkit-text-fill-color: #e9e6ff;
    border: 1px solid rgba(150, 130, 255, .4); border-radius: 8px;
    padding: 0 .5rem; font-size: .82rem; font-weight: 600; cursor: pointer; vertical-align: middle;
    transition: border-color .15s, box-shadow .15s;
}
.font-select:hover { border-color: rgba(185, 165, 255, .75); }
.font-select:focus { outline: none; border-color: #8a6bff; box-shadow: 0 0 0 2px rgba(120, 90, 255, .3); }
.font-select option { background: #201e30; color: #e9e6ff; font-weight: 600; }
/* When a reading background is chosen, give the answer a tidy card look. */
.zohar-reads { border-radius: 10px; padding: .7rem .95rem; }
/* Forced text colour: paragraphs/spans inside an answer carry their own theme colour, so override
   both `color` and the gradient text-fill on the box and every descendant. */
.zohar-answer-colored, .zohar-answer-colored * {
    color: var(--zohar-answer-fg) !important;
    -webkit-text-fill-color: var(--zohar-answer-fg) !important;
}

/* Language switcher (flag dropdown) in the top navigation. */
.zlang-dd { position: relative; display: inline-flex; }
.zlang-dd__btn {
    display: inline-flex; align-items: center; gap: .2rem; height: 34px; padding: 0 .55rem;
    background: rgba(40, 38, 60, .6); border: 1px solid rgba(150, 130, 255, .35); border-radius: 999px;
    color: #e9e6ff; cursor: pointer; line-height: 1; transition: border-color .15s, transform .15s;
}
.zlang-dd__btn:hover { border-color: rgba(185, 165, 255, .75); transform: translateY(-1px); }
.zlang-dd__flag { font-size: 1.15rem; }
.zlang-dd__caret { font-size: .7rem; opacity: .7; }
.zlang-dd__menu {
    display: none; position: fixed; z-index: 100000; background: #1b1930;
    border: 1px solid rgba(150, 130, 255, .45); border-radius: 12px; padding: 6px;
    max-height: 70vh; overflow-y: auto; min-width: 210px; box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
}
.zlang-dd__menu.is-open { display: block; }
.zlang-dd__opt {
    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: transparent;
    border: 0; color: #ece9ff; -webkit-text-fill-color: #ece9ff; padding: .42rem .6rem; border-radius: 8px;
    cursor: pointer; font-size: .95rem; white-space: nowrap;
}
.zlang-dd__opt:hover { background: rgba(120, 90, 255, .25); }
.zlang-dd__opt.is-cur { background: rgba(120, 90, 255, .35); font-weight: 700; }
.zlang-dd__f { font-size: 1.15rem; }

/* ---------- Promo video player popup ---------- */
.zvideo-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(ellipse at center, rgba(10, 8, 30, 0.82), rgba(3, 3, 12, 0.94));
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.zvideo-modal.is-open { display: flex; }
body.zvideo-noscroll { overflow: hidden; }

.zvideo-modal__box {
    width: min(920px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #0d0b24;
    border: 1px solid var(--card-brd);
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--glow);
    overflow: hidden;
}
.zvideo-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--card-brd);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.20), rgba(34, 211, 238, 0.12));
}
.zvideo-modal__title { font-weight: 700; font-size: 1.05rem; color: #fff; letter-spacing: .01em; }
.zvideo-modal__close {
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 9px;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.zvideo-modal__close:hover { color: #fff; background: rgba(139, 92, 246, 0.28); }

.zvideo-modal__stage {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 74vh;
}
.zvideo-el {
    display: block;
    width: 100%;
    max-height: 74vh;
    background: #000;
}
.zvideo-modal__stage:fullscreen { background: #000; }
.zvideo-modal__stage:fullscreen .zvideo-el { max-height: 100vh; height: 100vh; }

.zvideo-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--card-brd);
    background: rgba(13, 11, 36, 0.96);
    flex-wrap: wrap;
}
.zvideo-btn {
    border: 1px solid var(--card-brd);
    background: rgba(139, 92, 246, 0.14);
    color: #ecebfb;
    font-size: 1rem;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s, transform .1s;
}
.zvideo-btn:hover { background: rgba(139, 92, 246, 0.30); border-color: var(--violet); }
.zvideo-btn:active { transform: scale(0.94); }
.zvideo-btn--main { background: linear-gradient(135deg, var(--violet), var(--indigo)); border-color: transparent; color: #fff; }
.zvideo-btn--main:hover { filter: brightness(1.12); }

.zvideo-time {
    color: var(--muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.zvideo-vol-ic { cursor: pointer; user-select: none; font-size: 1.05rem; line-height: 1; }

.zvideo-range {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 6px;
    background: rgba(154, 160, 196, 0.3);
    outline: none;
    cursor: pointer;
}
.zvideo-seek { flex: 1 1 160px; min-width: 120px; }
.zvideo-vol { flex: 0 0 92px; width: 92px; }
.zvideo-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--gold);
    border: none;
    box-shadow: 0 0 8px rgba(245, 215, 110, 0.6);
}
.zvideo-range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--gold);
    border: none;
    box-shadow: 0 0 8px rgba(245, 215, 110, 0.6);
}

@media (max-width: 560px) {
    .zvideo-time { order: 10; width: 100%; text-align: center; }
    .zvideo-seek { order: 9; flex-basis: 100%; }
}