/* ===== CSS VARIABLES ===== */
:root {
    --primary-color: #6B5B95;
    --secondary-color: #8E7AB5;
    --accent-color: #B8860B;
    --accent-warm: #D4A574;
    --text-dark: #2C3E50;
    --text-light: #7F8C8D;
    --bg-light: #FAFBFC;
    --border-color: #E8E8E8;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Crimson Text', Georgia, serif;
    line-height: 1.7;
    color: var(--text-dark);
    min-height: 100vh;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
}

/* ===== AMBIENT BACKGROUNDS ===== */
.ambient-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100svh; /* stable on iOS Safari — avoids resize as address bar shows/hides */
    z-index: -2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background 1.5s ease;
    will-change: transform;  /* force GPU layer — prevents iOS repaint/zoom on scroll */
    transform: translateZ(0);
}

/* Dark overlay for readability */
.ambient-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.35) 100%
    );
    pointer-events: none;
}

/* Background Themes with Images */
body[data-theme="rome"] .ambient-background {
    background-image: url('/static/backgrounds/rome.jpg');
}

body[data-theme="amber-fort"] .ambient-background {
    background-image: url('/static/backgrounds/amber_fort.jpg');
}

body[data-theme="orthodox-church"] .ambient-background {
    background-image: url('/static/backgrounds/orthodox_church.jpg');
}

body[data-theme="turkish-tile"] .ambient-background {
    background-image: url('/static/backgrounds/turkish_tile.jpg');
}

body[data-theme="arab-tile"] .ambient-background {
    background-image: url('/static/backgrounds/arab_tile.jpg');
}

body[data-theme="mountain-valley"] .ambient-background {
    background-image: url('/static/backgrounds/mountain_valley.jpg');
}

body[data-theme="misty-valley"] .ambient-background {
    background-image: url('/static/backgrounds/misty_valley.jpg');
}

body[data-theme="bali-beach"] .ambient-background {
    background-image: url('/static/backgrounds/bali_beach.jpg');
}

body[data-theme="minimal"] .ambient-background {
    background: #000000;
}

/* Minimal mode - hide candles and particles */
body.minimal-mode .candle-container {
    display: none !important;
}

body.minimal-mode .particles {
    display: none !important;
}


/* ===== FLOATING PARTICLES - INDISTINCT WISPS ===== */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.7;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    animation: float 20s infinite ease-in-out;
    /* Heavy blur makes them indistinct wisps rather than shapes */
    filter: blur(4px);
    /* Irregular blob shape - no symmetry */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    50% {
        transform: translateY(-50vh) translateX(25px) scale(1.2);
        opacity: 0.5;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100vh) translateX(50px) scale(0.8);
        opacity: 0;
    }
}

/* ===== AMBIENT SIDE GLOWS ===== */
.candle-container {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 220px;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.candle-left {
    left: 0;
}

.candle-right {
    right: 0;
}

body.hide-candles .candle-container {
    opacity: 0;
    pointer-events: none;
}

/* Full-height side glow with corner intensification */
.ambient-glow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    /* Side edge wash */
    background:
        /* Top corner hotspot */
        radial-gradient(
            ellipse at left top,
            rgba(212, 175, 55, 0.41) 0%,
            rgba(255, 140, 0, 0.22) 25%,
            transparent 60%
        ),
        /* Bottom corner hotspot */
        radial-gradient(
            ellipse at left bottom,
            rgba(212, 175, 55, 0.41) 0%,
            rgba(255, 140, 0, 0.22) 25%,
            transparent 60%
        ),
        /* Full-height side wash */
        linear-gradient(
            to right,
            rgba(212, 175, 55, 0.26) 0%,
            rgba(255, 140, 0, 0.11) 40%,
            transparent 100%
        );
    filter: blur(30px);
    animation: glow-flicker 5s ease-in-out infinite;
}

/* Mirror the gradients for the right side */
.candle-right .ambient-glow {
    background:
        radial-gradient(
            ellipse at right top,
            rgba(212, 175, 55, 0.41) 0%,
            rgba(255, 140, 0, 0.22) 25%,
            transparent 60%
        ),
        radial-gradient(
            ellipse at right bottom,
            rgba(212, 175, 55, 0.41) 0%,
            rgba(255, 140, 0, 0.22) 25%,
            transparent 60%
        ),
        linear-gradient(
            to left,
            rgba(212, 175, 55, 0.26) 0%,
            rgba(255, 140, 0, 0.11) 40%,
            transparent 100%
        );
}

.ambient-glow-alt {
    animation: glow-flicker 5s ease-in-out infinite 2.5s;
}

@keyframes glow-flicker {
    0%, 100% {
        opacity: 0.7;
        transform: scaleX(1);
    }
    30% {
        opacity: 1;
        transform: scaleX(1.08);
    }
    60% {
        opacity: 0.6;
        transform: scaleX(0.95);
    }
    80% {
        opacity: 0.9;
        transform: scaleX(1.03);
    }
}

/* ===== SETTINGS BUTTON & PANEL ===== */
.settings-button {
    position: fixed;
    top: 72px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 3px;
    border: 1px solid rgba(180, 140, 70, 0.38);
    background: rgba(8, 5, 2, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: rgba(180, 140, 70, 0.75);
}

.settings-icon {
    width: 22px;
    height: 22px;
    color: rgba(200, 165, 80, 0.85);
    transition: color 0.2s ease;
}

.settings-button:hover {
    border-color: rgba(180, 140, 70, 0.72);
    box-shadow: 0 0 14px rgba(180, 140, 70, 0.18);
    color: rgba(210, 170, 90, 1);
}

.settings-panel {
    position: fixed;
    top: 128px;
    right: 20px;
    background: rgba(8, 5, 2, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(180, 140, 70, 0.35);
    border-radius: 3px;
    padding: 20px 22px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    min-width: 230px;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.settings-panel.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.settings-panel h3 {
    margin-bottom: 16px;
    color: rgba(210, 175, 100, 0.9);
    font-size: 0.72rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(180, 140, 70, 0.22);
    padding-bottom: 10px;
}

.setting-group {
    margin-bottom: 14px;
}

.setting-group label {
    display: block;
    margin-bottom: 6px;
    color: rgba(180, 155, 100, 0.80);
    font-family: 'Crimson Text', serif;
    font-size: 0.95rem;
    font-style: italic;
}

.setting-group select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(180, 140, 70, 0.35);
    border-radius: 2px;
    background: rgba(20, 12, 5, 0.8);
    color: rgba(200, 165, 80, 0.9);
    font-family: 'Crimson Text', serif;
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
    outline: none;
}

.setting-group select:focus {
    border-color: rgba(180, 140, 70, 0.65);
}

.setting-group input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
    accent-color: #c9a84c;
}

.setting-group input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.setting-group input[type="checkbox"]:disabled + span,
.setting-group label:has(input:disabled) {
    opacity: 0.5;
}

/* ===== USER BUTTON & AUTH PANEL ===== */
.user-button {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 3px;
    border: 1px solid rgba(180, 140, 70, 0.38);
    background: rgba(8, 5, 2, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 1000;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.user-button:hover {
    border-color: rgba(180, 140, 70, 0.72);
    box-shadow: 0 0 14px rgba(180, 140, 70, 0.18);
}

.user-button.authenticated {
    border-color: rgba(180, 140, 70, 0.65);
    box-shadow: 0 0 10px rgba(180, 140, 70, 0.15);
}

.user-button.authenticated:hover {
    border-color: rgba(210, 170, 90, 0.9);
    box-shadow: 0 0 18px rgba(180, 140, 70, 0.28);
}

.user-icon {
    width: 22px;
    height: 22px;
    color: rgba(200, 165, 80, 0.85);
    transition: color 0.2s ease;
}

.user-button.authenticated .user-icon {
    color: rgba(220, 185, 100, 1);
}

.auth-panel {
    position: fixed;
    top: 76px;
    right: 20px;
    background: rgba(20, 18, 25, 0.95);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    min-width: 280px;
    max-width: 320px;
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.auth-panel.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.auth-panel h3 {
    margin-bottom: 18px;
    color: rgba(255, 215, 0, 0.95);
    font-size: 1.3em;
    font-family: 'Cinzel', serif;
    text-align: center;
    letter-spacing: 0.06em;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-form input {
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.95em;
    transition: border-color 0.3s ease;
}

.auth-form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.auth-form input:focus {
    outline: none;
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.15);
}

.auth-submit {
    padding: 12px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8) 0%, rgba(218, 165, 32, 0.9) 100%);
    color: #1a1a1a;
    border: none;
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.auth-submit:hover {
    background: linear-gradient(135deg, rgba(255, 223, 0, 0.9) 0%, rgba(255, 193, 7, 1) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.auth-error {
    color: rgba(255, 130, 100, 0.9);
    font-size: 0.85em;
    text-align: center;
    min-height: 0;
    text-shadow: 0 0 6px rgba(255, 130, 100, 0.3);
}

.auth-toggle {
    text-align: center;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88em;
}

.auth-toggle a {
    color: rgba(255, 215, 0, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
}

.auth-toggle a:hover {
    color: rgba(255, 235, 100, 1);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.auth-tos-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
    cursor: pointer;
}

.auth-tos-check input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: rgba(255, 215, 0, 0.85);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.auth-tos-check a {
    color: rgba(255, 215, 0, 0.75);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-tos-check a:hover {
    color: rgba(255, 235, 100, 1);
}

.journal-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 9px 18px;
    background: transparent;
    border: 1px solid rgba(200, 165, 80, 0.45);
    border-radius: 6px;
    color: rgba(210, 175, 100, 0.85);
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.journal-btn:hover {
    border-color: rgba(210, 175, 100, 0.75);
    color: rgba(230, 200, 130, 1);
    background: rgba(180, 140, 70, 0.08);
}

.header-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 4px;
}

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

#login-prompt-link {
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Cinzel', serif;
    font-style: normal;
    font-size: 1.1rem;
    color: rgba(212, 175, 55, 0.88);
    text-shadow: 0 1px 3px rgba(0,0,0,1);
    background: rgba(0,0,0,0.45);
    padding: 10px 28px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    letter-spacing: 0.04em;
    display: inline-block;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

#login-prompt-link:hover {
    color: rgba(255, 235, 100, 1);
    border-color: rgba(212, 175, 55, 0.65);
    background: rgba(212, 175, 55, 0.08);
    transform: translateY(-1px);
}

.auth-forgot-link {
    text-align: center;
    margin-top: 8px;
}

.auth-forgot-link a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: 0.82em;
    transition: color 0.3s ease;
}

.auth-forgot-link a:hover {
    color: rgba(255, 215, 0, 0.85);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.auth-success {
    color: rgba(100, 255, 150, 0.9);
    font-size: 0.85em;
    text-align: center;
    min-height: 0;
    text-shadow: 0 0 6px rgba(100, 255, 150, 0.3);
}

/* User info (logged in state) */
.user-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.user-display-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: rgba(255, 215, 0, 0.95);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.plan-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72em;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plan-badge.plan-free {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.plan-badge.plan-patron {
    background: rgba(255, 215, 0, 0.15);
    color: rgba(255, 215, 0, 0.95);
    border: 1px solid rgba(255, 215, 0, 0.4);
}

.plan-badge.plan-promo {
    background: rgba(100, 255, 150, 0.1);
    color: rgba(100, 255, 150, 0.9);
    border: 1px solid rgba(100, 255, 150, 0.3);
}

.user-email {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85em;
    margin-bottom: 14px;
}

.user-credits {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    margin-bottom: 16px;
    font-style: italic;
}

.user-credits strong {
    color: rgba(100, 255, 150, 0.9);
    font-weight: 600;
}

.auth-logout {
    width: 100%;
    padding: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.04em;
}

.auth-logout:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

/* Hide auth during consultation */
body.consulting .user-button,
body.consulting .auth-panel {
    display: none !important;
}

/* ===== MAIN CONTAINER - DECORATIVE FRAME ===== */
.container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    background: rgba(5, 3, 1, 0.42);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: fadeInUp 0.6s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(180, 140, 70, 0.28);
}

/* Inner border frame - classic double-border manuscript look */
.container::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(180, 140, 70, 0.15);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

/* Corner flourishes - L-shaped brackets with ornamental dots */
.container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    z-index: 2;
    background-image:
        /* Top-left corner bracket */
        linear-gradient(to right, rgba(212, 175, 55, 0.7), transparent),
        linear-gradient(to bottom, rgba(212, 175, 55, 0.7), transparent),
        /* Top-right corner bracket */
        linear-gradient(to left, rgba(212, 175, 55, 0.7), transparent),
        linear-gradient(to bottom, rgba(212, 175, 55, 0.7), transparent),
        /* Bottom-left corner bracket */
        linear-gradient(to right, rgba(212, 175, 55, 0.7), transparent),
        linear-gradient(to top, rgba(212, 175, 55, 0.7), transparent),
        /* Bottom-right corner bracket */
        linear-gradient(to left, rgba(212, 175, 55, 0.7), transparent),
        linear-gradient(to top, rgba(212, 175, 55, 0.7), transparent),
        /* Corner dot ornaments at each vertex */
        radial-gradient(circle, rgba(212, 175, 55, 0.8) 45%, transparent 46%),
        radial-gradient(circle, rgba(212, 175, 55, 0.8) 45%, transparent 46%),
        radial-gradient(circle, rgba(212, 175, 55, 0.8) 45%, transparent 46%),
        radial-gradient(circle, rgba(212, 175, 55, 0.8) 45%, transparent 46%);
    background-size:
        50px 2px, 2px 50px,
        50px 2px, 2px 50px,
        50px 2px, 2px 50px,
        50px 2px, 2px 50px,
        10px 10px, 10px 10px, 10px 10px, 10px 10px;
    background-position:
        left 16px top 16px, left 16px top 16px,
        right 16px top 16px, right 16px top 16px,
        left 16px bottom 16px, left 16px bottom 16px,
        right 16px bottom 16px, right 16px bottom 16px,
        left 11px top 11px, right 11px top 11px,
        left 11px bottom 11px, right 11px bottom 11px;
    background-repeat: no-repeat;
}

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

/* ===== HEADER ===== */
header {
    background: radial-gradient(ellipse 70% 130% at 50% 40%, rgba(5,3,2,0.78) 0%, rgba(5,3,2,0.35) 55%, transparent 100%);
    padding: 50px 40px 40px;
    text-align: center;
}

header h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.9rem, 5vw, 3.2rem);
    font-weight: 400;
    color: #f0deb0;
    margin-bottom: 10px;
    text-shadow:
        0 0 2px rgba(0,0,0,1),
        0 0 6px rgba(0,0,0,1),
        0 0 18px rgba(0,0,0,0.95),
        0 0 45px rgba(0,0,0,0.7),
        0 0 80px rgba(180, 140, 70, 0.25);
    letter-spacing: 0.15em;
}

.tagline {
    font-family: 'Crimson Text', serif;
    color: #c8a96e;
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    font-style: italic;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
    text-shadow:
        0 0 2px rgba(0,0,0,1),
        0 0 8px rgba(0,0,0,1),
        0 0 20px rgba(0,0,0,0.9);
}

.tagline-ornament {
    color: rgba(180, 140, 70, 0.7);
    font-style: normal;
    font-size: 0.75em;
    vertical-align: middle;
    margin: 0 8px;
    text-shadow: none;
}

.hub-back-link {
    display: inline-block;
    color: rgba(212, 175, 55, 0.8);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    padding: 5px 14px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 6px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.hub-back-link:hover {
    color: rgba(212, 175, 55, 1);
    border-color: rgba(212, 175, 55, 0.55);
}

.header-rule {
    width: 220px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(180, 140, 70, 0.55), transparent);
    margin: 0 auto 14px;
}

/* ===== MAIN CONTENT ===== */
main {
    padding: 40px;
    background: rgba(0, 0, 0, 0.12);
}

h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.3em;
    color: rgba(255, 215, 0, 0.95);
    margin-bottom: 12px;
    font-weight: 500;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.3), 1px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-text {
    color: rgba(200, 169, 110, 0.88);
    margin-bottom: 20px;
    font-size: 1.05em;
    font-family: 'Crimson Text', serif;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    font-style: italic;
}

/* ===== TRADITION CARDS ===== */
.tradition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.tradition-card {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    padding-left: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    position: relative;
}

/* Elegant checkbox - empty circle that becomes filled star when selected */
.tradition-card::before {
    content: '☆';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    color: rgba(255, 215, 0, 0.5);
    transition: all 0.3s ease;
}

.tradition-card.selected::before {
    content: '★';
    color: rgba(255, 215, 0, 1);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.tradition-card.selected {
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(0, 0, 0, 0.15);
}

.tradition-card:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.tradition-card:hover::before {
    color: rgba(255, 215, 0, 0.8);
}

.tradition-card h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: rgba(255, 215, 0, 0.95);
    margin-bottom: 8px;
    font-weight: 500;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.tradition-card p {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== CITATION DEPTH SELECTOR ===== */
.depth-selector {
    margin-bottom: 10px;
}

.depth-options {
    display: flex;
    gap: 12px;
}

.depth-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.depth-option:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.depth-option input[type="radio"] {
    display: none;
}

.depth-option input[type="radio"]:checked ~ .depth-label {
    color: rgba(255, 215, 0, 1);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.depth-option:has(input:checked) {
    border-color: rgba(255, 215, 0, 0.4);
}

.depth-label {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: 500;
    color: rgba(255, 215, 0, 0.7);
    margin-bottom: 6px;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.depth-desc {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Question Input */
#question-input {
    width: 100%;
    padding: 20px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    font-size: 1.05em;
    font-family: 'Crimson Text', Georgia, serif;
    resize: vertical;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    line-height: 1.6;
    color: #FFFFFF;
}

#question-input:focus {
    outline: none;
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

#question-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Seek Button */
.seek-button {
    width: 100%;
    padding: 18px 32px;
    margin-top: 22px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(212, 175, 55, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 1.05em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.12em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.seek-button:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.75);
    color: rgba(212, 175, 55, 1);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.15);
}

.seek-button:active {
    background: rgba(212, 175, 55, 0.15);
}

.seek-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Response Section */
.response-section {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 16px;
    padding: 35px;
    margin-top: 35px;
    border-left: 4px solid rgba(255, 215, 0, 0.7);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.5s ease;
}

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

.response-content {
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.9;
    white-space: pre-wrap;
    font-size: 1.05em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.response-content strong:first-of-type {
    display: block;
    font-size: 1.15em;
    color: rgba(255, 215, 0, 0.95);
    background: rgba(255, 215, 0, 0.1);
    padding: 18px 22px;
    border-radius: 12px;
    margin-bottom: 25px;
    border-left: 3px solid rgba(255, 215, 0, 0.6);
}

.response-content strong {
    color: rgba(255, 215, 0, 0.95);
    font-weight: 600;
}

.response-content em {
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

/* ===== FOOTER ===== */
footer {
    text-align: center;
    padding: 30px 40px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
    line-height: 1.6;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    max-width: 700px;
    margin: 8px auto;
}

footer a {
    color: rgba(255, 215, 0, 0.95);
    text-decoration: none;
    transition: all 0.3s ease;
}

footer a:hover {
    color: rgba(255, 235, 100, 1);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

footer strong {
    color: rgba(255, 215, 0, 0.95);
}

/* ===== LOADING INDICATOR ===== */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

.loading::after {
    content: '';
    width: 24px;
    height: 24px;
    margin-left: 15px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 215, 0, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    header {
        padding: 30px 20px;
    }

    header h1 {
        letter-spacing: 0.1em;
    }

    .tagline {
        font-size: 1em;
    }

    main {
        padding: 25px 20px;
    }

    .tradition-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Compact tradition cards on mobile - hide descriptions */
    .tradition-card {
        padding: 12px 12px 12px 38px;
    }

    .tradition-card::before {
        left: 12px;
        font-size: 1.1em;
    }

    .tradition-card h3 {
        font-size: 0.85em;
        margin-bottom: 0;
    }

    .tradition-card p {
        display: none;
    }

    .depth-options {
        flex-direction: column;
        gap: 8px;
    }

    .depth-option {
        flex-direction: row;
        padding: 12px 16px;
        gap: 10px;
        text-align: left;
    }

    .depth-label {
        font-size: 0.9em;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .depth-desc {
        font-size: 0.8em;
    }

    .user-button {
        width: 40px;
        height: 40px;
        right: 12px;
        top: 12px;
    }

    .settings-button {
        width: 40px;
        height: 40px;
        right: 12px;
        top: 60px;
        font-size: 16px;
    }

    .user-icon {
        width: 18px;
        height: 18px;
    }

    .auth-panel {
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }

    .settings-panel {
        right: 10px;
        left: 10px;
        min-width: auto;
    }


    /* Remove blur on mobile so background image is visible */
    .container {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    main {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Narrow candlelight glow on mobile so middle third is clear */
    .candle-container {
        width: 100px;
    }

    .ambient-glow {
        background:
            radial-gradient(
                ellipse at left top,
                rgba(212, 175, 55, 0.41) 0%,
                rgba(255, 140, 0, 0.18) 20%,
                transparent 45%
            ),
            radial-gradient(
                ellipse at left bottom,
                rgba(212, 175, 55, 0.41) 0%,
                rgba(255, 140, 0, 0.18) 20%,
                transparent 45%
            ),
            linear-gradient(
                to right,
                rgba(212, 175, 55, 0.26) 0%,
                rgba(255, 140, 0, 0.08) 30%,
                transparent 70%
            );
        filter: blur(20px);
    }

    .candle-right .ambient-glow {
        background:
            radial-gradient(
                ellipse at right top,
                rgba(212, 175, 55, 0.41) 0%,
                rgba(255, 140, 0, 0.18) 20%,
                transparent 45%
            ),
            radial-gradient(
                ellipse at right bottom,
                rgba(212, 175, 55, 0.41) 0%,
                rgba(255, 140, 0, 0.18) 20%,
                transparent 45%
            ),
            linear-gradient(
                to left,
                rgba(212, 175, 55, 0.26) 0%,
                rgba(255, 140, 0, 0.08) 30%,
                transparent 70%
            );
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* ===== CONSULTATION MODE ===== */

/* Darken the background 30% when consulting */
body.consulting .ambient-background::after {
    background: rgba(0, 0, 0, 0.55);
}

/* Hide settings during consultation */
body.consulting .settings-button,
body.consulting .settings-panel {
    display: none !important;
}

/* The consultation area lives inside .container */
.consultation-area {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 60px 40px;
}

/* Loading state — centered in the cleared container */
.consultation-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: fadeInUp 0.8s ease;
    padding: 80px 20px;
}

.consultation-loading .loading-text {
    font-family: 'Cinzel', serif;
    font-size: 2.4em;
    font-weight: 600;
    color: rgba(255, 215, 0, 0.95);
    text-shadow:
        0 0 20px rgba(255, 215, 0, 0.4),
        0 0 40px rgba(255, 215, 0, 0.2),
        2px 4px 10px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
}

.consultation-loading .loading-dots {
    font-size: 3em;
    color: rgba(255, 215, 0, 0.8);
    margin-top: 20px;
    letter-spacing: 0.3em;
}

.consultation-loading .loading-dots span {
    animation: dotPulse 1.5s infinite;
    display: inline-block;
}

.consultation-loading .loading-dots span:nth-child(2) {
    animation-delay: 0.3s;
}

.consultation-loading .loading-dots span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes dotPulse {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* Section pages */
.consultation-section {
    display: none;
    width: 100%;
    animation: sectionFadeIn 0.6s ease;
}

.consultation-section.active {
    display: block;
}

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

.section-body {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.25em;
    line-height: 2;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    white-space: pre-wrap;
}

.section-body strong {
    color: rgba(255, 215, 0, 0.95);
    font-weight: 600;
}

.section-body em {
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

/* Citation + author grouped tight, with breathing room below */
.citation-group {
    white-space: normal;
    line-height: 1.4;
    margin-bottom: 1.4em;
}

.citation-group strong {
    display: block;
}

.citation-group em {
    display: block;
    font-size: 0.9em;
    opacity: 0.75;
}

/* Section navigation */
.section-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 50px;
    padding-bottom: 20px;
}

.page-nav-arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 20px 0 10px;
}

.page-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: rgba(212, 175, 55, 0.75);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    padding: 0;
    flex-shrink: 0;
}

.page-arrow svg {
    width: 18px;
    height: 18px;
}

.page-arrow:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.65);
    color: rgba(212, 175, 55, 1);
}

.page-arrow:disabled {
    opacity: 0.2;
    cursor: default;
}

.page-counter {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: rgba(212, 175, 55, 0.45);
    letter-spacing: 0.18em;
    min-width: 56px;
    text-align: center;
    user-select: none;
}

.skip-btn {
    padding: 10px 24px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.04em;
}

.skip-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.return-btn {
    padding: 16px 40px;
    background: transparent;
    color: rgba(255, 215, 0, 0.8);
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 14px;
    font-family: 'Cinzel', serif;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
}

.return-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.8);
    transform: translateY(-2px);
}

/* Section title label */
.section-label {
    font-family: 'Cinzel', serif;
    font-size: 1.2em;
    color: rgba(255, 225, 50, 1);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    text-shadow:
        0 0 15px rgba(255, 215, 0, 0.6),
        0 0 30px rgba(255, 215, 0, 0.3),
        1px 2px 4px rgba(0, 0, 0, 0.8);
}

/* ===== TRADITION ACCENT COLORS ===== */
:root {
    --tradition-stoic: #CD7F32;
    --tradition-buddhist: #E8A317;
    --tradition-christian: #4A7FB5;
    --tradition-catholic: #7B68AE;
    --tradition-hindu: #C74B50;
    --tradition-islamic: #2E8B57;
    --tradition-sufi: #D4A03C;
    --tradition-taoist: #5B9A6F;
    --tradition-confucian: #B5485D;
    --tradition-western: #A9927D;
    --tradition-modern: #8FA5B2;
    --tradition-skeptical: #9CAAB7;
    --tradition-agnostic: #B0A090;
    --tradition-native: #4DBDAC;
    --tradition-african: #C67D3E;
    --tradition-default: #D4AF37;
}

/* Per-tradition top border glow and label color */
.consultation-section.tradition-stoic    { --accent: var(--tradition-stoic); }
.consultation-section.tradition-buddhist { --accent: var(--tradition-buddhist); }
.consultation-section.tradition-christian { --accent: var(--tradition-christian); }
.consultation-section.tradition-catholic { --accent: var(--tradition-catholic); }
.consultation-section.tradition-hindu    { --accent: var(--tradition-hindu); }
.consultation-section.tradition-islamic  { --accent: var(--tradition-islamic); }
.consultation-section.tradition-sufi     { --accent: var(--tradition-sufi); }
.consultation-section.tradition-taoist   { --accent: var(--tradition-taoist); }
.consultation-section.tradition-confucian { --accent: var(--tradition-confucian); }
.consultation-section.tradition-western  { --accent: var(--tradition-western); }
.consultation-section.tradition-modern   { --accent: var(--tradition-modern); }
.consultation-section.tradition-skeptical { --accent: var(--tradition-skeptical); }
.consultation-section.tradition-agnostic { --accent: var(--tradition-agnostic); }
.consultation-section.tradition-native   { --accent: var(--tradition-native); }
.consultation-section.tradition-african  { --accent: var(--tradition-african); }
.consultation-section.tradition-default  { --accent: var(--tradition-default); }

/* Tradition windows get a colored top border with subtle glow */
.consultation-section[class*="tradition-"] {
    border-top: 3px solid var(--accent, var(--tradition-default));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1), inset 0 3px 12px -6px var(--accent);
    padding-top: 20px;
    margin-top: 0;
}

/* Tradition label uses accent color instead of uniform gold */
.consultation-section[class*="tradition-"] .section-label {
    color: var(--accent);
    text-shadow:
        0 0 15px var(--accent),
        0 0 30px color-mix(in srgb, var(--accent) 40%, transparent),
        1px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Decorative diamond divider between label and body */
.section-divider {
    text-align: center;
    font-size: 0.7em;
    color: rgba(255, 215, 0, 0.5);
    letter-spacing: 1em;
    margin-bottom: 18px;
    line-height: 1;
}

.consultation-section[class*="tradition-"] .section-divider {
    color: var(--accent);
    opacity: 0.6;
}

/* Blockquote-style left border on actual quotes within traditions */
.consultation-section[class*="tradition-"] .section-body strong + br,
.consultation-section[class*="tradition-"] .section-body strong {
    display: block;
}

/* Section page counter */
.section-counter {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
    font-style: italic;
    margin-top: 20px;
    letter-spacing: 0.1em;
}

/* ===== DISCLAIMER STYLING ===== */
.disclaimer-separator {
    width: 60%;
    height: 1px;
    margin: 30px auto 16px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent);
}

.disclaimer-text {
    font-size: 0.85em;
    opacity: 0.6;
    font-style: italic;
    text-align: center;
    line-height: 1.6;
    padding-top: 4px;
}

/* Mobile adjustments for consultation */
@media (max-width: 768px) {
    .consultation-area {
        padding: 30px 20px;
    }

    .consultation-loading {
        padding: 40px 10px;
    }

    .consultation-loading .loading-text {
        font-size: 1.6em;
    }

    .section-body {
        font-size: 1.1em;
        line-height: 1.8;
    }

    .skip-btn,
    .return-btn {
        width: 100%;
    }

    .page-arrow {
        width: 52px;
        height: 52px;
    }
}

/* ===== TAROT SECTION ===== */
.tarot-section {
    margin-top: 60px;
    text-align: center;
}

.tarot-divider {
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    margin: 0 auto 40px;
}

.query-log-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: 20px;
    border: 3px solid var(--accent-color);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.query-log-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
    background: rgba(0, 0, 0, 0.5);
}

.query-log-img {
    width: 150px;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.tarot-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: 20px;
    border: 3px solid var(--accent-color);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.tarot-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
    background: rgba(0, 0, 0, 0.5);
}

.tarot-button-img {
    width: 150px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.tarot-button-text {
    margin-top: 15px;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--accent-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* ===== TIER LOCKED STATE ===== */
.depth-option.tier-locked {
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}

.depth-option.tier-locked .depth-label,
.depth-option.tier-locked .depth-desc {
    opacity: 0.62;
}

.tier-lock {
    display: block;
    font-size: 0.8em;
    color: rgba(255, 215, 0, 0.95);
    margin-top: 6px;
    font-style: italic;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4), 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* ===== PROMO CODE ===== */
.promo-section {
    margin-top: 16px;
    text-align: center;
}

.promo-input-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.promo-input-row input {
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.95em;
    width: 180px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.promo-input-row input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.promo-input-row input:focus {
    outline: none;
    border-color: rgba(255, 215, 0, 0.6);
}

.promo-input-row button {
    padding: 10px 20px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 10px;
    color: rgba(255, 215, 0, 0.9);
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.promo-input-row button:hover {
    background: rgba(255, 215, 0, 0.25);
    border-color: rgba(255, 215, 0, 0.7);
}

.promo-input-row button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.promo-message {
    margin-top: 8px;
    font-size: 0.85em;
    min-height: 1.2em;
}

.promo-success {
    color: rgba(100, 255, 150, 0.9);
    text-shadow: 0 0 6px rgba(100, 255, 150, 0.3);
}

.promo-error {
    color: rgba(255, 130, 100, 0.9);
    text-shadow: 0 0 6px rgba(255, 130, 100, 0.3);
}

/* ===== LIBRARIAN OPTIONS ===== */
.librarian-options {
    text-align: center;
    margin-top: 12px;
}

.result-count-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.result-count-label select {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.95em;
    cursor: pointer;
    margin-left: 6px;
}

.result-count-label select:focus {
    outline: none;
    border-color: rgba(255, 215, 0, 0.6);
}

/* ===== CREDIT COUNTER ===== */
.credit-counter {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    margin-top: 8px;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.credit-counter #credit-balance {
    color: rgba(100, 255, 150, 0.9);
    font-weight: 600;
}

/* ===== BUY CREDITS ===== */
.credits-section {
    margin-top: 16px;
    text-align: center;
}

.credits-label {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: rgba(255, 215, 0, 0.8);
    margin-bottom: 10px;
    letter-spacing: 0.06em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.credits-options {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.credit-pack-btn {
    padding: 10px 18px;
    background: rgba(100, 255, 150, 0.1);
    border: 1px solid rgba(100, 255, 150, 0.3);
    border-radius: 10px;
    color: rgba(100, 255, 150, 0.9);
    font-family: 'Cinzel', serif;
    font-size: 0.82em;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
}

.credit-pack-btn:hover {
    background: rgba(100, 255, 150, 0.2);
    border-color: rgba(100, 255, 150, 0.6);
    transform: translateY(-1px);
}

.credit-pack-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.credits-message {
    margin-top: 8px;
    font-size: 0.85em;
    min-height: 1.2em;
}

.credits-error {
    color: rgba(255, 130, 100, 0.9);
    text-shadow: 0 0 6px rgba(255, 130, 100, 0.3);
}

/* ===== USAGE COUNTER ===== */
.usage-counter {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    margin-top: 8px;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.usage-counter #usage-remaining {
    color: rgba(255, 215, 0, 0.9);
    font-weight: 600;
}

/* ===== BILLING TOAST ===== */
.billing-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(10, 6, 2, 0.90);
    color: rgba(220, 185, 105, 0.96);
    font-family: 'Cinzel', serif;
    font-size: 1em;
    padding: 14px 28px;
    border-radius: 3px;
    border: 1px solid rgba(180, 140, 70, 0.38);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-shadow: 0 0 10px rgba(180, 140, 70, 0.25);
    pointer-events: none;
    letter-spacing: 0.04em;
}

.billing-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== LIBRARIAN RESULTS ===== */
.librarian-results {
    display: block;
}

.librarian-intro {
    font-style: italic;
    opacity: 0.8;
    margin-bottom: 30px;
    font-size: 1.1em !important;
    white-space: normal;
}

.librarian-tradition-group {
    margin-bottom: 30px;
    padding: 20px;
    border-top: 2px solid var(--accent, var(--tradition-default));
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 0 12px 12px;
}

.librarian-tradition-group.tradition-stoic    { --accent: var(--tradition-stoic); }
.librarian-tradition-group.tradition-buddhist { --accent: var(--tradition-buddhist); }
.librarian-tradition-group.tradition-christian { --accent: var(--tradition-christian); }
.librarian-tradition-group.tradition-catholic { --accent: var(--tradition-catholic); }
.librarian-tradition-group.tradition-hindu    { --accent: var(--tradition-hindu); }
.librarian-tradition-group.tradition-islamic  { --accent: var(--tradition-islamic); }
.librarian-tradition-group.tradition-sufi     { --accent: var(--tradition-sufi); }
.librarian-tradition-group.tradition-taoist   { --accent: var(--tradition-taoist); }
.librarian-tradition-group.tradition-confucian { --accent: var(--tradition-confucian); }
.librarian-tradition-group.tradition-western  { --accent: var(--tradition-western); }
.librarian-tradition-group.tradition-modern   { --accent: var(--tradition-modern); }
.librarian-tradition-group.tradition-skeptical { --accent: var(--tradition-skeptical); }
.librarian-tradition-group.tradition-agnostic { --accent: var(--tradition-agnostic); }
.librarian-tradition-group.tradition-native   { --accent: var(--tradition-native); }
.librarian-tradition-group.tradition-african  { --accent: var(--tradition-african); }
.librarian-tradition-group.tradition-default  { --accent: var(--tradition-default); }

.librarian-tradition-label {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: var(--accent, rgba(255, 215, 0, 0.9));
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    text-shadow: 0 0 10px var(--accent), 1px 2px 4px rgba(0, 0, 0, 0.8);
}

.librarian-passage {
    margin-bottom: 20px;
    padding-left: 16px;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
}

.librarian-source {
    color: rgba(255, 215, 0, 0.85);
    font-size: 0.95em;
    margin-bottom: 6px;
}

.librarian-source strong {
    font-weight: 600;
}

.librarian-text {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.1em;
    line-height: 1.8;
    font-style: italic;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .librarian-tradition-group {
        padding: 15px;
    }

    .librarian-text {
        font-size: 1em;
    }
}


/* ===== WIZARD STEP FLOW ===== */
.step-indicator {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 18px 0 6px;
}

.step-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(180, 140, 70, 0.38);
    background: transparent;
    transition: background 0.3s, border-color 0.3s;
}

.step-dot.active {
    background: rgba(180, 140, 70, 0.80);
    border-color: rgba(180, 140, 70, 0.80);
}

.step-panel {
    display: none;
}

.step-panel.active {
    display: block;
    animation: stepFadeIn 320ms ease forwards;
}

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

.step-label {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    color: rgba(180, 140, 70, 0.55);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding: 0 2px;
}

.step-nav-right {
    justify-content: flex-end;
}

.step-back-btn {
    background: none;
    border: none;
    color: rgba(180, 140, 70, 0.52);
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.10em;
    cursor: pointer;
    padding: 8px 4px;
    transition: color 0.2s;
}

.step-back-btn:hover {
    color: rgba(180, 140, 70, 0.88);
}

.step-continue-btn {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(180, 140, 70, 0.48);
    color: rgba(180, 140, 70, 0.90);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    padding: 10px 28px;
    border-radius: 4px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.step-continue-btn:hover:not(:disabled) {
    border-color: rgba(180, 140, 70, 0.85);
    color: #c9a84c;
    background: rgba(0, 0, 0, 0.48);
}

.step-continue-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.step-select-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.step-select-all {
    background: none;
    border: 1px solid rgba(180, 140, 70, 0.28);
    color: rgba(180, 140, 70, 0.60);
    font-family: 'Cinzel', serif;
    font-size: 0.67rem;
    letter-spacing: 0.10em;
    padding: 5px 14px;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.step-select-all:hover {
    border-color: rgba(180, 140, 70, 0.60);
    color: rgba(180, 140, 70, 0.92);
}

/* Seek button within step nav: override full-width default */
.step-nav .seek-button {
    width: auto;
    margin-top: 0;
}

/* Larger, more inviting question textarea */
#step-0 #question-input {
    min-height: 160px;
    font-size: 1.05rem;
    padding: 20px 22px;
    line-height: 1.7;
}


/* ===== WIZARD FASHION SWEEP ===== */

/* Warm the textarea borders and placeholder to match site palette */
#question-input {
    border-color: rgba(180, 140, 70, 0.25);
}

#question-input:focus {
    border-color: rgba(180, 140, 70, 0.65);
    box-shadow: 0 0 0 3px rgba(180, 140, 70, 0.12);
    background: rgba(0, 0, 0, 0.22);
}

#question-input::placeholder {
    color: rgba(200, 169, 110, 0.48);
}

/* Remove double-gap: textarea already has margin-bottom;
   step-nav already has margin-top — zero out the textarea's in step 0 */
#step-0 #question-input {
    margin-bottom: 0;
}

/* Step label: brighter, ornament-flanked, more ceremonial */
.step-label {
    font-size: 0.70rem;
    color: rgba(180, 140, 70, 0.75);
    margin-top: 8px;
    margin-bottom: 28px;
}

.step-label::before { content: '✦\00a0\00a0'; }
.step-label::after  { content: '\00a0\00a0✦'; }

/* Progress dots: a touch larger and more present */
.step-dot {
    width: 8px;
    height: 8px;
}

.step-dot.active {
    background: rgba(180, 140, 70, 0.88);
    border-color: rgba(180, 140, 70, 0.88);
    box-shadow: 0 0 6px rgba(180, 140, 70, 0.35);
}

/* Center the question and depth steps for intimacy on wide screens */
#step-0,
#step-2 {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

/* Give the seek button in the step-nav a bit more substance */
.step-nav .seek-button {
    padding: 12px 36px;
    font-size: 0.88rem;
}