/* ============================================================
   CoffeeFortuneAI - Main Stylesheet
   Turkish Coffee Fortune Reading App
   Mobile-first, dark mystical theme with glass morphism
   ============================================================ */

/* ============================================================
   0. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    /* Primary Palette */
    --color-primary: #6B21A8;
    --color-primary-light: #7C3AED;
    --color-primary-dark: #581C87;
    --color-primary-glow: rgba(107, 33, 168, 0.4);

    /* Secondary / Gold */
    --color-secondary: #D4A843;
    --color-secondary-light: #E0BE6E;
    --color-secondary-dark: #B8922F;
    --color-secondary-glow: rgba(212, 168, 67, 0.3);

    /* Background */
    --color-bg: #1A1A2E;
    --color-bg-secondary: #16213E;
    --color-bg-elevated: #1E2A47;
    --color-bg-card: rgba(22, 33, 62, 0.7);
    --color-bg-card-solid: #16213E;

    /* Text */
    --color-text: #F0E6D3;
    --color-text-heading: #FFFFFF;
    --color-text-muted: #8B9DC3;
    --color-text-dim: #5C6F94;

    /* Accent */
    --color-accent: #0DCAF0;
    --color-accent-dark: #0AA2C0;

    /* Status */
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #3B82F6;

    /* Borders */
    --color-border: rgba(139, 157, 195, 0.15);
    --color-border-light: rgba(139, 157, 195, 0.25);

    /* Glass */
    --glass-bg: rgba(22, 33, 62, 0.65);
    --glass-border: rgba(139, 157, 195, 0.12);
    --glass-blur: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow-purple: 0 0 20px rgba(107, 33, 168, 0.3);
    --shadow-glow-gold: 0 0 20px rgba(212, 168, 67, 0.25);

    /* Layout */
    --max-width: 1200px;
    --nav-height: 64px;
    --sidebar-width: 260px;

    /* Typography */
    --font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3.5rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.35s ease;
}

/* ============================================================
   1. BLAZOR DEFAULTS (preserved from original)
   ============================================================ */
h1:focus {
    outline: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem rgba(107, 33, 168, 0.3), 0 0 0 0.25rem rgba(107, 33, 168, 0.2);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: 0.25rem;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Loading Container */
.loading-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

/* Animated Coffee Cup */
.loading-coffee-cup {
    width: 8rem;
    height: 8rem;
    animation: coffeeFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

@keyframes coffeeFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(-5deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) rotate(5deg);
    }
}

.loading-progress-text {
    position: relative;
    text-align: center;
    font-weight: bold;
    margin-top: 1.5rem;
    color: var(--color-primary);
    font-size: 1.1rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Falınız Hazırlanıyor...");
    }

code {
    color: var(--color-secondary);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* ============================================================
   2. GLOBAL RESETS & BASE STYLES
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

html, body {
    font-family: var(--font-family);
    background-color: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(107, 33, 168, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(22, 33, 62, 0.5) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(212, 168, 67, 0.04) 0%, transparent 50%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-heading);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-secondary-light);
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    padding-left: 1.25rem;
}

li {
    margin-bottom: 0.5rem;
}

.lead {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    line-height: 1.7;
}


/* ============================================================
   3. FORM OVERRIDES (Dark theme Bootstrap)
   ============================================================ */
.form-control,
.form-select,
select.form-control {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control:focus,
.form-select:focus,
select.form-control:focus {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-primary-light);
    color: var(--color-text);
    box-shadow: 0 0 0 0.2rem var(--color-primary-glow);
    outline: none;
}

.form-control::placeholder {
    color: var(--color-text-dim);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(22, 33, 62, 0.4);
    color: var(--color-text-muted);
    opacity: 0.7;
}

.form-control-sm {
    padding: 0.35rem 0.6rem;
    font-size: var(--font-size-sm);
}

textarea.form-control {
    resize: vertical;
}

label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

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

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
    min-width: 200px;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.form-range {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-full);
    outline: none;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-base);
    color: var(--color-text);
    cursor: pointer;
}


/* ============================================================
   4. BUTTON OVERRIDES
   ============================================================ */
.btn {
    font-weight: 500;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.25rem;
    transition: all var(--transition-base);
    border: 1px solid transparent;
    font-size: var(--font-size-base);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    line-height: 1.5;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

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

.btn:active {
    transform: translateY(0);
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-glow-purple);
    color: #fff;
}

.btn-secondary {
    background-color: var(--color-bg-elevated);
    color: var(--color-text);
    border-color: var(--color-border-light);
}

.btn-secondary:hover {
    background-color: rgba(30, 42, 71, 0.9);
    border-color: var(--color-text-muted);
    color: var(--color-text-heading);
}

/* Social sign-in buttons container */
.social-signin-buttons {
    width: 100%;
}

.social-signin-buttons #google-signin-btn-login {
    width: 100% !important;
}

.social-signin-buttons #google-signin-btn-login iframe,
.social-signin-buttons #google-signin-btn-login > div {
    width: 100% !important;
}

/* Apple Sign-In Button - Official Apple branding */
.btn-apple {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #000000;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px; /* Mobile-first: touch-friendly */
    transition: all var(--transition-base);
}

.btn-apple:hover {
    background-color: #1a1a1a;
    border-color: #333333;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.btn-apple:active {
    background-color: #000000;
    transform: scale(0.98);
}

.btn-apple::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 814 1000'%3E%3Cpath fill='%23ffffff' d='M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-success {
    background-color: var(--color-success);
    color: #fff;
    border-color: var(--color-success);
}

.btn-success:hover {
    background-color: #16A34A;
    color: #fff;
}

.btn-danger {
    background-color: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}

.btn-danger:hover {
    background-color: #DC2626;
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-light);
}

.btn-outline:hover {
    background: rgba(107, 33, 168, 0.15);
    border-color: var(--color-primary-light);
    color: var(--color-text-heading);
}

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: var(--font-size-lg);
    border-radius: var(--radius-md);
}

.btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: var(--font-size-sm);
}

.btn-link {
    background: transparent;
    border: none;
    color: var(--color-accent);
    padding: 0;
    text-decoration: underline;
}


/* ============================================================
   5. ALERT OVERRIDES
   ============================================================ */
.alert {
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm);
    border: 1px solid;
    margin-bottom: 1rem;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #FCA5A5;
}

.alert-success {
    background-color: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86EFAC;
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93C5FD;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #FCD34D;
}

/* Validation rejection card */
.validation-rejection-card {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-top: 1rem;
    animation: fadeInDown 0.35s ease;
}
.rejection-icon-row {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}
.rejection-message {
    color: #FCD34D;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 0.6rem 0;
}
.rejection-detected-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.rejection-detected-label {
    font-size: 0.9rem;
    opacity: 0.7;
    flex-shrink: 0;
}
.rejection-detected-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    letter-spacing: 0.01em;
}

/* Validation instructions - vertical timeline */
.validation-instructions-box {
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 14px;
    padding: 1.1rem 1.25rem 0.8rem;
    margin-top: 1.25rem;
    animation: fadeInDown 0.4s ease;
}
.validation-instructions-box .instructions-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: #93C5FD;
    font-weight: 600;
}
.instructions-timeline {
    display: flex;
    flex-direction: column;
}
.timeline-step {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.step-icon-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 120px;
}
.step-icon-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.step-icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.step-icon-circle .step-icon-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #A5B4FC;
}
.step-connector {
    width: 2px;
    height: 16px;
    background: linear-gradient(to bottom, rgba(99, 102, 241, 0.35), rgba(99, 102, 241, 0.1));
    flex-shrink: 0;
}
.step-content {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0 0.5rem;
    min-height: 120px;
}
.step-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #A5B4FC;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.step-text {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    line-height: 1.4;
}
.timeline-step.last .step-content {
    padding-bottom: 0.2rem;
}

.insufficient-tokens-alert {
    text-align: center;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    animation: fadeInDown 0.4s ease;
}
.insufficient-tokens-alert .alert-icon {
    margin-right: 0.5rem;
    font-size: 1.3rem;
}

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


/* ============================================================
   6. UTILITY CLASSES
   ============================================================ */
.w-100 {
    width: 100%;
}

.mt-3 {
    margin-top: 1rem;
}


/* ============================================================
   7. ANIMATIONS / KEYFRAMES
   ============================================================ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}


/* ============================================================
   8. SPINNER / LOADING
   ============================================================ */
.spinner {
    width: 64px;
    height: 64px;
    border: none;
    background: url('/images/crystalball.png') center/contain no-repeat;
    animation: spin 3s linear infinite;
    margin: 0 auto;
}

.spinner-sm {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
    color: var(--color-text-muted);
}

.loading-state .spinner {
    width: 80px;
    height: 80px;
    border: none;
    background: url('/images/crystalball.png') center/contain no-repeat;
    animation: spin 2s linear infinite;
    filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.5));
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
    color: var(--color-text-muted);
}

.loading-crystal {
    width: 80px;
    height: 80px;
    object-fit: contain;
    animation: spin 2s linear infinite;
    filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.5));
}

.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
    text-align: center;
}

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

.empty-state-message {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
}

.success-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
    text-align: center;
}

.success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-success), #16A34A);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
}

.error-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-danger), #DC2626);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
}


/* ============================================================
   9. LAYOUT: APP LAYOUT
   ============================================================ */
.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    padding-top: var(--nav-height);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
}


/* ============================================================
   10. TOP NAVIGATION
   ============================================================ */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-container {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 100%;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    border-radius: 0 0 12px 12px;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    z-index: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    border-radius: 2px;
    transition: all var(--transition-base);
}

.nav-toggle:hover span {
    background-color: var(--color-secondary);
}

.nav-logo-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.nav-logo-center:hover {
    opacity: 0.9;
}

.nav-logo-img {
    height: 40px;
    width: auto;
    display: block;
    transition: opacity 0.2s;
    object-fit: contain;
}

@media (max-width: 768px) {
    .nav-logo-img {
        height: 32px;
    }
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    z-index: 1;
}
.nav-token-balance {
    text-decoration: none;
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.85rem;
}

/* ============================================================
   10b. SIDEBAR MENU
   ============================================================ */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1100;
    animation: fadeIn 0.2s ease;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: rgba(22, 33, 62, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--glass-border);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.sidebar.open {
    transform: translateX(0);
}

@media (min-width: 768px) {
    .sidebar {
        width: 300px;
    }
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.sidebar-close:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-content {
    flex: 1;
    padding: 0 1.25rem;
}

.sidebar-user {
    padding: 0.75rem 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-username {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-heading);
}

.sidebar-user .token-balance {
    font-size: var(--font-size-sm);
}

.sidebar-auth {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.75rem;
}

.sidebar-btn {
    flex: 1;
    text-align: center;
    padding: 0.6rem 1rem;
    font-size: var(--font-size-sm);
}

.sidebar-section {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
}

.sidebar-section-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.75rem 0.25rem;
    font-weight: 600;
}

.sidebar-link {
    display: block;
    width: 100%;
    padding: 0.65rem 0.75rem;
    color: var(--color-text) !important;
    text-decoration: none !important;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sidebar-link:hover {
    background: rgba(107, 33, 168, 0.12);
    color: var(--color-text-heading) !important;
}

/* Sidebar product menu items */
.sidebar-product {
    display: flex;
    flex-direction: column;
}

.sidebar-product-link {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
}

.sidebar-product-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-sublink {
    display: block;
    padding: 0.35rem 0.75rem 0.35rem 3.2rem;
    color: var(--color-text-dim) !important;
    text-decoration: none !important;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.sidebar-sublink:hover {
    background: rgba(107, 33, 168, 0.08);
    color: var(--color-text) !important;
}

.sidebar-coming-soon {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.sidebar-soon-badge {
    font-size: 0.6rem;
    background: var(--color-border);
    color: var(--color-text-dim);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: auto;
}

.sidebar-logout {
    color: var(--color-error) !important;
}

.sidebar-logout:hover {
    background: rgba(239, 68, 68, 0.1);
}


.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.sidebar-footer p {
    color: var(--color-text-dim);
    font-size: var(--font-size-xs);
    margin: 0;
    text-align: center;
}

.sidebar-recaptcha {
    margin-top: 0.35rem !important;
    opacity: 0.7;
}

/* RTL sidebar: slide from right instead of left */
[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--glass-border);
    transform: translateX(100%);
}

[dir="rtl"] .sidebar.open {
    transform: translateX(0);
}

[dir="rtl"] .sidebar-link {
    text-align: right;
}

[dir="rtl"] .sidebar-close {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .sidebar-header {
    justify-content: flex-start;
}


/* ============================================================
   12. ADMIN LAYOUT
   ============================================================ */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--color-bg-card-solid);
    border-right: 1px solid var(--color-border);
    display: none;
    flex-direction: column;
    overflow-y: auto;
    z-index: 1001;
}

.admin-sidebar-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.admin-sidebar-header h2 {
    font-size: var(--font-size-lg);
    color: var(--color-secondary);
    margin: 0;
}

.admin-nav {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    flex: 1;
}

.admin-nav li {
    margin: 0;
}

.admin-nav-link {
    display: block;
    padding: 0.65rem 1.5rem;
    color: var(--color-text-muted) !important;
    text-decoration: none !important;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.admin-nav-link:hover {
    background: rgba(107, 33, 168, 0.1);
    color: var(--color-text) !important;
    border-left-color: var(--color-primary-light);
}

.admin-nav-link.active {
    background: rgba(107, 33, 168, 0.15);
    color: var(--color-text-heading) !important;
    border-left-color: var(--color-primary);
    font-weight: 500;
}

.admin-sidebar-footer {
    margin-top: auto;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
}

.admin-content {
    flex: 1;
    width: 100%;
    min-height: 100vh;
}

.admin-page {
    padding: 1.5rem 1rem;
}

@media (min-width: 768px) {
    .admin-sidebar {
        display: flex;
    }

    .admin-content {
        margin-left: var(--sidebar-width);
    }

    .admin-page {
        padding: 2rem;
    }
}


/* ============================================================
   13. AUTH PAGES (Login, Register)
   ============================================================ */
.auth-page {
    max-width: 420px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.auth-page h1 {
    text-align: center;
    font-size: var(--font-size-2xl);
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    font-size: var(--font-size-sm);
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    gap: 1rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-light);
}

.auth-divider span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.btn-google {
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
    font-weight: 500;
}

.btn-google:hover {
    background-color: #f5f5f5;
    color: #333;
    border-color: #ccc;
}

.auth-link {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-top: 1.5rem;
}

.auth-link a {
    color: var(--color-accent);
    font-weight: 500;
}


/* ============================================================
   14. HOME PAGE
   ============================================================ */

/* Hero */
.hero {
    min-height: calc(100vh - var(--nav-height));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    gap: 2rem;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(107, 33, 168, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 80%, rgba(212, 168, 67, 0.08) 0%, transparent 50%);
    margin: calc(-1 * var(--nav-height)) -1rem 0;
    padding-top: calc(var(--nav-height) + 1rem);
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.hero h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    background: linear-gradient(135deg, #fff 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero p {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    max-width: 520px;
    margin-bottom: 2rem;
}

.hero .btn-lg {
    padding: 0.85rem 2.5rem;
    font-size: var(--font-size-lg);
    box-shadow: var(--shadow-glow-purple);
}

/* Hero image */
.hero-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-cup-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(139,92,246,0.35) 0%, rgba(212,168,67,0.15) 50%, transparent 70%);
    filter: blur(32px);
    pointer-events: none;
}

.hero-cup-img {
    width: 260px;
    height: 260px;
    object-fit: cover;
    border-radius: 1.25rem;
    position: relative;
    animation: heroFloat 5s ease-in-out infinite;
    box-shadow: 0 8px 40px rgba(139,92,246,0.3), 0 2px 12px rgba(0,0,0,0.5);
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%       { transform: translateY(-10px) rotate(0.5deg); }
}

@media (min-width: 768px) {
    .hero {
        flex-direction: row;
        text-align: left;
        gap: 3rem;
        padding: 0 3rem;
        margin: calc(-1 * var(--nav-height)) -1rem 0;
    }

    .hero-content {
        align-items: flex-start;
        max-width: 520px;
    }

    .hero h1 {
        font-size: var(--font-size-4xl);
    }

    .hero-image-wrap {
        flex: 0 0 420px;
    }

    .hero-cup-img {
        width: 380px;
        height: 380px;
    }

    .hero-cup-glow {
        width: 420px;
        height: 420px;
    }
}

/* Hero Language Picker */
.hero-languages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    max-width: 520px;
    margin-top: 2rem;
    padding: 1rem 0 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

@media (min-width: 768px) {
    .hero-languages {
        justify-content: flex-start;
    }
}

.hero-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 2rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.hero-lang-btn:hover {
    background: rgba(139,92,246,0.2);
    border-color: rgba(139,92,246,0.4);
    color: var(--color-text);
}

.hero-lang-btn.active {
    background: rgba(139,92,246,0.3);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.hero-lang-flag {
    font-size: 1rem;
    line-height: 1;
}

.hero-lang-flag-img {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
}

.hero-lang-name {
    font-size: 0.72rem;
}

/* Character Showcase */
.character-showcase {
    padding: 3rem 1rem;
    text-align: center;
}

.character-showcase h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: 0.5rem;
}

.showcase-subtitle {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    font-size: var(--font-size-base);
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto 2rem;
}

.showcase-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.showcase-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-purple);
}

.showcase-card.expanded {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-purple);
    transform: none;
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

/* Chevron indicator */
.showcase-chevron {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
    line-height: 1;
}

.showcase-card.expanded .showcase-chevron {
    opacity: 1;
    color: var(--color-primary);
}

.showcase-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.75rem;
    border: 2px solid var(--color-primary);
}

.showcase-card h3 {
    font-size: var(--font-size-base);
    margin: 0 0 0.5rem;
    color: var(--color-text);
}

.showcase-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Mini stats in collapsed state */
.showcase-mini-stats {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 0.6rem;
    opacity: 0.6;
}

/* Expanded panel */
.showcase-expanded {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    animation: scExpandIn 0.22s ease;
}

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

.showcase-avatar-xl {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 0.85rem;
    display: block;
    border: 3px solid var(--color-primary);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.showcase-full-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 0.85rem;
    text-align: center;
}

/* Stats row */
.showcase-stats {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.stat-badge.stat-positive {
    background: rgba(46, 213, 115, 0.12);
    color: #2ed573;
    border: 1px solid rgba(46, 213, 115, 0.2);
}

.stat-badge.stat-neutral {
    background: rgba(255, 165, 2, 0.12);
    color: #ffa502;
    border: 1px solid rgba(255, 165, 2, 0.2);
}

.stat-badge.stat-dislike {
    background: rgba(255, 71, 87, 0.12);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.2);
}

.showcase-total {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    opacity: 0.7;
    margin-top: 0.25rem;
}

.showcase-cta {
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .character-showcase {
        padding: 4rem 2rem;
    }

    .showcase-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .showcase-avatar {
        width: 80px;
        height: 80px;
    }

    .showcase-avatar-xl {
        width: 160px;
        height: 160px;
    }

    .showcase-card h3 {
        font-size: var(--font-size-lg);
    }
}

/* How It Works */
.how-it-works {
    padding: 4rem 0;
    text-align: center;
}

.how-it-works h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: 2.5rem;
}

.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: var(--max-width);
    margin: 0 auto;
}

.step {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.step-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
    color: var(--color-bg);
    font-size: var(--font-size-xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: var(--shadow-glow-gold);
}

.step h3 {
    font-size: var(--font-size-lg);
    margin-bottom: 0.5rem;
}

.step p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

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

/* Features */
.features {
    padding: 4rem 0;
    text-align: center;
}

.features h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: 2.5rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: var(--max-width);
    margin: 0 auto;
}

.feature-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: left;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-glow);
}

.feature-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: 0.5rem;
    color: var(--color-secondary);
}

.feature-card p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CTA Section */
.cta-section {
    padding: 4rem 1rem;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(107, 33, 168, 0.15) 0%, transparent 70%);
    border-radius: var(--radius-xl);
    margin: 2rem 0;
}

.cta-section h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: 1rem;
}

.cta-section p {
    color: var(--color-text-muted);
    max-width: 500px;
    margin: 0 auto 2rem;
    font-size: var(--font-size-lg);
}


/* Cookie Consent Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 1rem;
    z-index: 10000;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.cookie-content {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
}

.cookie-content p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.cookie-content a {
    color: var(--color-primary);
}

.cookie-actions {
    display: flex;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .cookie-content {
        flex-direction: row;
        text-align: left;
    }

    .cookie-content p {
        flex: 1;
    }
}

/* ============================================================
   15. ABOUT PAGE
   ============================================================ */
.about-page {
    max-width: 900px;
    margin: 0 auto;
}

.about-hero {
    text-align: center;
    padding: 2rem 0 3rem;
}

.about-hero h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: 1rem;
}

.about-history,
.about-methodology,
.about-characters,
.about-technology {
    margin-bottom: 3rem;
}

.about-history h2,
.about-methodology h2,
.about-characters h2,
.about-technology h2 {
    font-size: var(--font-size-xl);
    color: var(--color-secondary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.about-history p,
.about-methodology p,
.about-technology p {
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.methodology-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.methodology-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.methodology-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.methodology-card h3 {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
}

.methodology-card p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

@media (min-width: 768px) {
    .methodology-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.character-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.character-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.character-item h3 {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    margin-bottom: 0.35rem;
}

.character-item p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

@media (min-width: 768px) {
    .character-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.about-cta {
    text-align: center;
    padding: 3rem 1rem;
    background: radial-gradient(ellipse at 50% 50%, rgba(107, 33, 168, 0.12) 0%, transparent 70%);
    border-radius: var(--radius-xl);
    margin-top: 2rem;
}

.about-cta h2 {
    margin-bottom: 0.75rem;
}

.about-cta p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}


/* ============================================================
   16. UPLOAD WIZARD
   ============================================================ */
.upload-wizard {
    max-width: 800px;
    margin: 1rem auto;
}

.wizard-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
    position: relative;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* Connecting lines between steps */
.wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 2px;
    background: var(--color-border);
    z-index: -1;
}

.wizard-step.active:not(:last-child)::after {
    background: var(--color-primary);
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-border-light);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
}

.wizard-step.active .step-number {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary-dark));
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-glow-purple);
}

.step-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    text-align: center;
}

.wizard-step.active .step-label {
    color: var(--color-text);
    font-weight: 500;
}

.wizard-content {
    padding: 1rem 0;
}

.wizard-content h2 {
    font-size: var(--font-size-xl);
    margin-bottom: 0.5rem;
}

.wizard-content > p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

/* Analysis Status Frame - elliptical design */
.analysis-status-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem auto;
    width: 220px;
    height: 160px;
    border-radius: 50%;
    border: 3px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    transition: all 0.5s ease;
}

.analysis-status-frame.analysis-complete {
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 0 40px rgba(34, 197, 94, 0.1);
}

.analysis-status-frame.analysis-failed {
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.analysis-status-frame.analysis-running {
    border-color: var(--accent-gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    animation: analysis-pulse 2s ease-in-out infinite;
}

@keyframes analysis-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); }
    50% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.4); }
}

.analysis-status-inner {
    text-align: center;
    padding: 0.5rem;
}

.analysis-icon {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.analysis-icon-done {
    color: #22c55e;
}

.analysis-icon-fail {
    color: #ef4444;
}

.analysis-percent {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.analysis-complete .analysis-percent {
    color: #22c55e;
}

.analysis-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.15rem;
}

.analysis-detail {
    font-size: 0.75rem;
    color: var(--accent-gold);
    margin-top: 0.25rem;
}

.analysis-wait {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    opacity: 0.7;
}

/* Spinning ring for in-progress */
.analysis-spinner-ring {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    margin: 0 auto 0.25rem;
    animation: spin 1s linear infinite;
}

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

.wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* Reading Loading Overlay - full screen while AI generates fortune */
/* Inline upload loading card (Step 1 — while uploading & validating) */
.upload-loading-card {
    text-align: center;
    padding: 2rem 1rem;
    animation: fadeInDown 0.3s ease;
}
.upload-loading-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}
.logo-spinner-sm {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 1rem !important;
    filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.5)) !important;
}

.analysis-status-inner .logo-spinner-sm {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 0.25rem !important;
}

.reading-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 5, 25, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reading-loading-content {
    text-align: center;
    padding: 2rem;
    max-width: 480px;
}

.logo-spinner {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto 2rem;
    display: block;
    animation: spin 2s linear infinite;
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.6));
}

.reading-loading-content h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-text-heading);
    margin-bottom: 1rem;
}

.reading-loading-content p {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.loading-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 1.5rem 0;
}

.loading-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: dotPulse 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}

.loading-funfact {
    font-style: italic;
    color: var(--color-secondary) !important;
    font-size: var(--font-size-sm) !important;
    max-width: 360px;
    margin: 0 auto;
    opacity: 0.9;
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 0.9; }
}

/* Step 3 blocking overlay while vision processing */
.step3-processing-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 5, 25, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step3-processing-content {
    text-align: center;
    padding: 2rem;
    max-width: 480px;
}

.step3-analysis-label {
    font-size: var(--font-size-lg);
    color: var(--color-text-heading);
    margin: 0 0 0.25rem;
}

.step3-analysis-percent {
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    font-weight: 600;
    margin: 0;
}

/* ===== Coffee Cup (Fincan) Loader Animation ===== */
.fincan-loader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 1rem auto;
}

.fincan-svg { display: block; }

/* Size variants */
.fincan-sm .fincan-svg { width: 150px; height: auto; }
.fincan-md .fincan-svg { width: 190px; height: auto; }
.fincan-lg .fincan-svg { width: 230px; height: auto; }

/* Cup rocking motion - like a fortune teller examining the cup */
.fincan-cup-group {
    animation: fincan-rock 4s ease-in-out infinite;
    transform-origin: 55px 70px;
}

@keyframes fincan-rock {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(-4deg); }
    70% { transform: rotate(4deg); }
}

/* Coffee grounds pattern slowly rotates inside the cup */
.fincan-grounds {
    animation: fincan-grounds-spin 10s linear infinite;
    transform-origin: 55px 43px;
}

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

/* Mystical glow pulse behind the cup */
.fincan-glow {
    animation: fincan-glow-pulse 3s ease-in-out infinite;
}

@keyframes fincan-glow-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Progress arc smooth fill transition */
.fincan-progress-arc {
    transition: stroke-dashoffset 0.8s ease;
}

/* Steam wisps rising and fading */
.fincan-steam {
    fill: none;
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 1.5;
    stroke-linecap: round;
    animation: fincan-steam-rise 3s ease-in-out infinite;
}

.fincan-steam-2 { animation-delay: 1s; }
.fincan-steam-3 { animation-delay: 2s; }

@keyframes fincan-steam-rise {
    0% { opacity: 0; transform: translateY(0) scaleX(1); }
    20% { opacity: 0.4; }
    60% { opacity: 0.2; transform: translateY(-8px) scaleX(1.3); }
    100% { opacity: 0; transform: translateY(-18px) scaleX(0.6); }
}

/* Percentage text */
.fincan-percent {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-gold, #D4AF37);
    text-align: center;
    margin-top: 0.25rem;
}

.fincan-sm .fincan-percent { font-size: 1.25rem; }
.fincan-lg .fincan-percent { font-size: 1.75rem; }

/* Label text */
.fincan-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    text-align: center;
}

.fincan-sm .fincan-label { font-size: 0.75rem; }

/* Image Dropzone */
.image-dropzone {
    border: 2px dashed var(--color-border-light);
    border-radius: var(--radius-lg);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    background: rgba(30, 42, 71, 0.3);
    padding: 0;
}
.dropzone-label {
    display: block;
    width: 100%;
    padding: 3rem 1.5rem;
    cursor: pointer;
}

.image-dropzone:hover {
    border-color: var(--color-primary-light);
    background: rgba(107, 33, 168, 0.08);
}

.image-dropzone p {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.image-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.image-preview {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--color-bg-elevated);
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-danger);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    line-height: 1;
}

.btn-remove:hover {
    background: #DC2626;
}

/* Invalid image remove button - bright red, larger, pulsing */
.btn-remove-invalid {
    background: #EF4444 !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
    animation: pulse-red 2s infinite;
}

.btn-remove-invalid:hover {
    background: #DC2626 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.5);
}

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.5);
    }
}

/* Image validation overlay animation */
.image-validation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    transition: background 0.4s ease;
    z-index: 2;
}

.image-validation-overlay.validated {
    background: rgba(16, 185, 129, 0.35);
}

.validation-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.validation-check {
    width: 48px;
    height: 48px;
    background: #10B981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Image upload preview */
.image-preview-item {
    margin-bottom: 20px;
}

.image-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.validation-status {
    margin-top: 10px;
    padding: 12px;
    border-radius: 6px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.validation-status.validating {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.validation-status.valid {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #6EE7B7;
}

.validation-status.invalid {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #FCA5A5;
}

.validation-status.invalid .status-text p {
    font-size: 0.82rem;
    line-height: 1.45;
    opacity: 0.85;
}

.validation-status.invalid .rejection-detected-chip {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    margin-top: 0.3rem;
}

.validation-status .status-icon {
    font-size: 24px;
    line-height: 1;
}

.validation-status .status-text {
    flex: 1;
}

.validation-status .status-text strong {
    display: block;
    margin-bottom: 4px;
}

.validation-status .status-text p {
    margin: 8px 0 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.validation-status .status-text small {
    display: block;
    margin-top: 8px;
    opacity: 0.8;
}

/* Character Grid */
.character-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.character-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;
}

.character-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-glow);
}

.character-card.selected {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-glow-gold);
    background: rgba(212, 168, 67, 0.06);
}

.character-card.disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.7);
}

.character-unsupported {
    color: var(--color-error, #e74c3c);
    font-size: 0.75rem;
    font-style: italic;
}

.character-avatar {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-border-light);
    transition: border-color var(--transition-base);
}

.character-info {
    flex: 1;
    min-width: 0;
}

.character-desc {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0.25rem 0 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.character-card.selected .character-avatar {
    border-color: var(--color-secondary);
}

.character-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.character-engine-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--color-bg-elevated, #1a1a2e);
    border: 2px solid var(--glass-border);
    padding: 3px;
}

.character-card h3 {
    font-size: var(--font-size-base);
    margin: 0;
}

.token-info {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .character-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .character-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Character card expand/collapse */
.character-card {
    position: relative;
}

.character-chevron {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    opacity: 0.5;
}

.character-card.expanded {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.character-expanded {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.character-expanded-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.character-avatar-xl {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-secondary);
}

.character-engine-badge-xl {
    width: 30px;
    height: 30px;
    bottom: -4px;
    right: -4px;
}

.character-full-desc {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

.character-select-btn {
    margin-top: 0.25rem;
    padding: 0.5rem 2rem;
    font-size: var(--font-size-sm);
}

.character-grid.has-expanded {
    grid-template-columns: 1fr;
}


/* ============================================================
   17. RESULT PAGE
   ============================================================ */
.result-page {
    max-width: 900px;
    margin: 1rem auto;
}

/* Top bar: New Reading button aligned right */
.result-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* Reader Header Card */
.result-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.result-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.reader-avatar {
    width: 144px;
    height: 144px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-primary);
    flex-shrink: 0;
    box-shadow: 0 0 24px rgba(var(--color-primary-rgb, 139, 92, 246), 0.4);
}

.reader-avatar-stack {
    position: relative;
    flex-shrink: 0;
}

.reader-engine-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(20, 10, 30, 0.85);
    border: 2px solid var(--color-secondary);
    padding: 3px;
}

.reader-avatar-placeholder {
    width: 144px;
    height: 144px;
    border-radius: 50%;
    background: var(--color-bg-elevated);
    border: 3px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.reader-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.reader-name {
    font-weight: 700;
    font-size: var(--font-size-2xl);
    color: var(--color-text-heading);
}

.reader-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.result-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.reading-subject {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-heading);
}

.reading-signs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sign-badge {
    font-size: var(--font-size-sm);
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-full);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sign-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

.sign-badge.sun-sign {
    background: rgba(255, 200, 50, 0.15);
    color: #f0c040;
    border: 1px solid rgba(255, 200, 50, 0.3);
}

.sign-badge.rising-sign {
    background: rgba(130, 180, 255, 0.15);
    color: #82b4ff;
    border: 1px solid rgba(130, 180, 255, 0.3);
}

/* Rating section */
.rating-section {
    text-align: center;
}

.rating-prompt {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.rating-thumbs {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.rating-thumb-btn {
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: 50%;
    width: 72px;
    height: 72px;
    padding: 0;
    cursor: pointer;
    transition: all var(--transition-base);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.rating-thumb-btn:hover {
    transform: scale(1.12);
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-glow-gold);
}

.rating-thumb-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.rating-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.rating-submitted {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
}

.rating-thumb-submitted {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Bottom actions */
.result-bottom-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* Legacy .result-actions kept for compatibility */
.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.result-provider {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

/* Share Panel */
.share-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.share-panel label {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.share-url-row {
    display: flex;
    gap: 0.5rem;
}

.share-url-row .form-control {
    flex: 1;
}

.share-duration-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.share-expiry {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* History Share Row */
.history-share-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: background 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-shared {
    color: var(--accent-gold);
}

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

.history-private-badge {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Shared Fortune Reader Info */
.shared-reader-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.shared-reader-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

/* Fortune Sections */
.fortune-section {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--color-primary);
    animation: fadeInUp 0.3s ease;
}

.fortune-section h2 {
    font-size: var(--font-size-lg);
    margin-bottom: 0.75rem;
}

.fortune-section p {
    color: var(--color-text);
    line-height: 1.8;
    margin: 0;
}

.fortune-section.main-message {
    border-left-color: var(--color-secondary);
    padding: 2rem;
}

.fortune-section.main-message h2 {
    color: var(--color-secondary);
}

.fortune-section.main-message p {
    font-size: var(--font-size-lg);
    line-height: 1.9;
}

/* Cup Reading - Main Fortune Text */
.fortune-section.main-reading {
    border-left-color: var(--color-secondary);
    padding: 2rem;
}

.fortune-section.main-reading h2 {
    color: var(--color-secondary);
}

/* TTS play/pause button */
.reading-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.reading-title-row h2 {
    margin: 0;
    flex: 1;
}

.tts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--color-secondary);
    background: transparent;
    color: var(--color-secondary);
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
    flex-shrink: 0;
}

.tts-btn:hover {
    background: var(--color-secondary);
    color: #fff;
}

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

.tts-btn--playing {
    background: var(--color-secondary);
    color: #fff;
}

.tts-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.7s linear infinite;
}

.fortune-text p {
    color: var(--color-text);
    line-height: 1.9;
    margin-bottom: 1rem;
    font-size: var(--font-size-base);
    text-align: left; /* mobile: natural */
}

@media (min-width: 768px) {
    .fortune-text p {
        text-align: justify;
        hyphens: auto;
    }
}

.fortune-text p:last-child {
    margin-bottom: 0;
}

/* Detected Symbols */
.fortune-section.symbols {
    border-left-color: #c4b5fd;
}

.fortune-section.symbols h2 {
    color: #ddd6fe;
}

/* Mobile: single column of horizontal cards */
.symbols-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Desktop: 2-column grid of horizontal cards */
@media (min-width: 768px) {
    .symbols-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* Symbol card: always horizontal (image left, text right) */
.symbol-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    transition: border-color 0.2s ease;
}

.symbol-card:hover {
    border-color: var(--color-primary);
}

.symbol-card-dominant {
    border-color: rgba(var(--color-primary-rgb, 139, 92, 246), 0.5);
    box-shadow: 0 0 12px rgba(var(--color-primary-rgb, 139, 92, 246), 0.15);
}

/* Symbol image: fixed square on the left */
.symbol-img-wrap {
    width: 80px;
    min-width: 80px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.symbol-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.symbol-img-placeholder {
    width: 80px;
    min-width: 80px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    opacity: 0.5;
}

.symbol-body {
    padding: 0.75rem;
    flex: 1;
    min-width: 0;
}

.symbol-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.symbol-name {
    font-weight: 700;
    color: #f5f0ff;
    font-size: 1rem;
    text-transform: capitalize;
}

.symbol-category {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #f6d365 0%, #d4a017 50%, #c8962e 100%);
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.02em;
}
/* Per-category colors for detected symbol badges */
.symbol-category.cat-animals    { background: linear-gradient(135deg, #f97316, #c2410c); }
.symbol-category.cat-insects    { background: linear-gradient(135deg, #f97316, #c2410c); }
.symbol-category.cat-nature     { background: linear-gradient(135deg, #22c55e, #15803d); }
.symbol-category.cat-objects    { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.symbol-category.cat-human      { background: linear-gradient(135deg, #ec4899, #be185d); }
.symbol-category.cat-household  { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.symbol-category.cat-structures { background: linear-gradient(135deg, #64748b, #475569); }
.symbol-category.cat-mythical   { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.symbol-category.cat-geometric  { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.symbol-category.cat-food       { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.symbol-category.cat-spiritual  { background: linear-gradient(135deg, #d946ef, #a21caf); }
.symbol-category.cat-musical    { background: linear-gradient(135deg, #f59e0b, #b45309); }
.symbol-category.cat-travel     { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.symbol-category.cat-emotions   { background: linear-gradient(135deg, #f43f5e, #be123c); }
.cat-icon {
    height: 14px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.symbol-position {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.pos-tag {
    font-size: 0.8rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.18);
    color: #f0ebff;
    text-transform: capitalize;
}

.pos-tag-handle {
    background: rgba(var(--color-secondary-rgb, 245, 158, 11), 0.2);
    color: var(--color-secondary);
}

.symbol-interpretation {
    font-size: 0.875rem;
    color: #b8acd4;
    line-height: 1.5;
    margin: 0;
}

.fortune-section.advice {
    border-left-color: var(--color-success);
}

.fortune-section.advice h2 {
    color: var(--color-success);
}

.fortune-section.warning {
    border-left-color: var(--color-danger);
}

.fortune-section.warning h2 {
    color: var(--color-danger);
}

.fortune-section.astrology {
    border-left-color: var(--color-primary-light);
}

.fortune-section.astrology h2 {
    color: var(--color-primary-light);
}

.fortune-section.lucky {
    border-left-color: var(--color-secondary);
}

.fortune-section.lucky h2 {
    color: var(--color-secondary);
}

.fortune-section.horoscope {
    border-left-color: var(--color-accent);
}

.fortune-section.horoscope h2 {
    color: var(--color-accent);
}

.fortune-section.mood {
    border-left-color: var(--color-info);
}

.fortune-section.mood h2 {
    color: var(--color-info);
}

/* Astrology Grid */
.astrology-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.astrology-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.astrology-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.astrology-value {
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--color-text-heading);
}

.astrology-traits {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

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

/* Lucky Grid */
.lucky-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.lucky-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.lucky-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lucky-value {
    font-weight: 600;
    color: var(--color-secondary);
}

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

/* Mood Meter */
.mood-meter {
    width: 100%;
    height: 12px;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: 1rem;
}

.mood-bar {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-danger) 0%, var(--color-warning) 40%, var(--color-success) 100%);
    transition: width 0.5s ease;
    min-width: 4px;
}

.mood-score {
    display: block;
    text-align: center;
    margin-top: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}


/* ============================================================
   18. HISTORY PAGE
   ============================================================ */
.history-page {
    max-width: var(--max-width);
    margin: 0 auto;
}

.history-page h1 {
    margin-bottom: 0.5rem;
}

.history-summary {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: 1.5rem;
}

.history-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.history-card {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.history-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(107, 33, 168, 0.3);
}

.history-thumbnails {
    display: flex;
    gap: 2px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg-elevated);
}

.history-thumb-img {
    flex: 1;
    min-width: 0;
    height: 100%;
    object-fit: cover;
}

.thumbnail-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-card-content {
    padding: 1rem;
}

.history-summary-text {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.history-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.history-character-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.history-character {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.history-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    margin-left: auto;
}

.history-mood {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.mood-mini-bar {
    width: 60px;
    height: 6px;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.mood-mini-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-danger) 0%, var(--color-warning) 40%, var(--color-success) 100%);
    min-width: 2px;
}

.history-readfor {
    display: inline-block;
    font-size: var(--font-size-xs);
    background: rgba(107, 33, 168, 0.15);
    color: var(--color-primary-light);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
}

.history-rating-thumb {
    width: 24px;
    height: 24px;
    object-fit: contain;
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
}

@media (min-width: 768px) {
    .history-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.page-btn {
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--font-size-sm);
    padding: 0 0.5rem;
    transition: all var(--transition-fast);
}

.page-btn:hover:not(:disabled):not(.active) {
    background: rgba(107, 33, 168, 0.15);
    border-color: var(--color-primary-light);
}

.page-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}


/* ============================================================
   19. PROFILE PAGE
   ============================================================ */
.profile-page {
    max-width: 700px;
    margin: 0 auto;
}

.profile-section {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.profile-section h2 {
    font-size: var(--font-size-lg);
    margin-bottom: 1.25rem;
    color: var(--color-secondary);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.referral-code-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

.referral-code {
    font-size: var(--font-size-xl);
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 2px;
    color: var(--color-primary);
}

.referral-stats {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-secondary);
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 0.25rem;
}

@media (max-width: 480px) {
    .profile-stats {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   20. PRICING PAGE
   ============================================================ */
.pricing-page {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

.pricing-page h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: 0.5rem;
}

.pricing-page > .lead {
    margin-bottom: 2.5rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.pricing-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.pricing-card.best-value {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-glow-gold);
}

.best-value-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
    color: var(--color-bg);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 0.3rem 1rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.package-name {
    font-size: var(--font-size-xl);
    margin-bottom: 1rem;
}

.package-tokens {
    margin-bottom: 1rem;
}

.package-tokens .token-count {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-secondary);
    display: block;
    line-height: 1;
}

.package-tokens .token-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.package-price {
    margin-bottom: 1.5rem;
}

.price-amount {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-heading);
}

.price-per-token {
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
}

.package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
}

.package-features li {
    padding: 0.4rem 0;
    padding-left: 1.25rem;
    position: relative;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.package-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
}

@media (min-width: 768px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
    }

    .pricing-card.best-value {
        transform: scale(1.03);
    }

    .pricing-card.best-value:hover {
        transform: scale(1.03) translateY(-4px);
    }
}

/* Pricing FAQ */
.pricing-faq {
    text-align: left;
    max-width: 700px;
    margin: 0 auto;
}

.pricing-faq h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.pricing-faq-item {
    margin-bottom: 1.5rem;
}

.pricing-faq-item h3 {
    font-size: var(--font-size-base);
    color: var(--color-text-heading);
    margin-bottom: 0.35rem;
}

.pricing-faq-item p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}


/* ============================================================
   21. FAQ PAGE
   ============================================================ */
.faq-page {
    max-width: 800px;
    margin: 0 auto;
}

.faq-page h1 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.faq-page > .lead {
    text-align: center;
    margin-bottom: 2rem;
}

.faq-accordion {
    margin-bottom: 3rem;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
}

.faq-item.expanded {
    border-bottom-color: var(--color-primary-glow);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--color-text-heading);
    font-size: var(--font-size-base);
    font-weight: 500;
    padding: 1.25rem 0;
    cursor: pointer;
    text-align: left;
    gap: 1rem;
    transition: color var(--transition-base);
}

.faq-question:hover {
    color: var(--color-secondary);
}

.faq-toggle {
    font-size: var(--font-size-xl);
    color: var(--color-text-muted);
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    transition: color var(--transition-base);
}

.faq-item.expanded .faq-toggle {
    color: var(--color-secondary);
}

.faq-answer {
    padding: 0 0 1.25rem;
    animation: fadeIn 0.2s ease;
}

.faq-answer p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    margin: 0;
}

.faq-contact {
    text-align: center;
    padding: 2.5rem 1rem;
    background: radial-gradient(ellipse at 50% 50%, rgba(107, 33, 168, 0.1) 0%, transparent 70%);
    border-radius: var(--radius-xl);
}

.faq-contact h2 {
    margin-bottom: 0.5rem;
}

.faq-contact p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}


/* ============================================================
   22. CONTACT PAGE
   ============================================================ */
.contact-page {
    max-width: var(--max-width);
    margin: 0 auto;
}

.contact-page h1 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.contact-page > .lead {
    text-align: center;
    margin-bottom: 2rem;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.contact-form-section {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.contact-info-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-section h2 {
    font-size: var(--font-size-lg);
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
}

.contact-info-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.contact-info-item h3 {
    font-size: var(--font-size-sm);
    color: var(--color-text-heading);
    margin-bottom: 0.35rem;
}

.contact-info-item p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

.success-message {
    text-align: center;
    padding: 2rem 1rem;
}

.success-message h2 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--color-success);
}

.success-message p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .contact-content {
        grid-template-columns: 3fr 2fr;
    }
}


/* ============================================================
   23. LEGAL PAGES (Privacy, Terms)
   ============================================================ */
.legal-page {
    max-width: 800px;
    margin: 0 auto;
}

.legal-page h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: 0.5rem;
}

.legal-updated {
    color: var(--color-text-dim);
    font-size: var(--font-size-sm);
    margin-bottom: 2rem;
}

.legal-section {
    margin-bottom: 2rem;
}

.legal-section h2 {
    font-size: var(--font-size-lg);
    color: var(--color-secondary);
    margin-bottom: 0.75rem;
}

.legal-section p {
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: 0.75rem;
}

.legal-section ul {
    color: var(--color-text-muted);
    line-height: 1.8;
}

.legal-section li {
    margin-bottom: 0.5rem;
}


/* ============================================================
   24. SHARED FORTUNE PAGE
   ============================================================ */
.shared-fortune-page {
    max-width: 900px;
    margin: 0 auto;
}

.shared-fortune-content {
    animation: fadeInUp 0.4s ease;
}

.shared-header {
    text-align: center;
    margin-bottom: 2rem;
}

.shared-header h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: 0.5rem;
}

.shared-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.shared-by {
    color: var(--color-text-dim);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.shared-image {
    margin-bottom: 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.shared-image img {
    width: 100%;
    display: block;
}

.shared-cta {
    text-align: center;
    padding: 3rem 1rem;
    background: radial-gradient(ellipse at 50% 50%, rgba(107, 33, 168, 0.12) 0%, transparent 70%);
    border-radius: var(--radius-xl);
    margin-top: 2rem;
}

.shared-cta h2 {
    margin-bottom: 0.5rem;
}

.shared-cta p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}


/* ============================================================
   25. CONFIRM EMAIL PAGE
   ============================================================ */
.confirm-email-page {
    max-width: 500px;
    margin: 3rem auto;
    text-align: center;
}


/* ============================================================
   26. PAYMENT SUCCESS PAGE
   ============================================================ */
.payment-success-page {
    max-width: 600px;
    margin: 2rem auto;
    text-align: center;
}

.token-balance-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 2rem;
    margin: 1.5rem auto;
    max-width: 300px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.balance-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.balance-value {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1;
}

.balance-unit {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.payment-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

@media (min-width: 480px) {
    .payment-actions {
        flex-direction: row;
        justify-content: center;
    }
}


/* ============================================================
   27. LANGUAGE SELECTOR COMPONENT
   ============================================================ */
.language-selector {
    position: relative;
}

.language-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.language-toggle:hover {
    border-color: var(--color-primary-light);
    background: rgba(107, 33, 168, 0.1);
}

.lang-flag {
    font-size: var(--font-size-base);
}

.lang-flag-img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.lang-code {
    font-weight: 600;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1050;
    background: var(--color-bg-card-solid);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow-y: auto;
    width: 260px;
    animation: fadeIn 0.15s ease;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--color-text);
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    text-align: left;
    transition: background var(--transition-fast);
}

.language-option:hover {
    background: rgba(107, 33, 168, 0.12);
}

.language-option.active {
    background: rgba(107, 33, 168, 0.2);
    color: var(--color-primary-light);
    font-weight: 500;
}

.lang-opt-flag {
    flex-shrink: 0;
    font-size: 1.1rem;
}

.lang-opt-flag-img {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.lang-opt-native {
    flex: 1;
    font-size: 0.88rem;
}

.lang-opt-english {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.8;
    flex-shrink: 0;
}

/* Scrollbar style for language dropdown */
.language-dropdown::-webkit-scrollbar {
    width: 6px;
}

.language-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.language-dropdown::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}


/* ============================================================
   28. TOKEN BALANCE COMPONENT
   ============================================================ */
.token-balance {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(212, 168, 67, 0.1);
    border: 1px solid rgba(212, 168, 67, 0.2);
    border-radius: var(--radius-full);
    padding: 0.3rem 0.75rem;
    font-size: var(--font-size-sm);
}

.token-icon {
    font-size: var(--font-size-base);
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.token-balance .token-count {
    font-weight: 600;
    color: var(--color-secondary);
}

.token-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 500;
}

.token-buy {
    font-size: var(--font-size-xs);
    color: var(--color-accent) !important;
    margin-left: 0.25rem;
    font-weight: 500;
}


/* User menu removed - replaced by sidebar */


/* ============================================================
   30. TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
    position: fixed;
    top: calc(var(--nav-height) + 1rem);
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 380px;
    width: calc(100% - 2rem);
}

.toast {
    background: var(--color-bg-card-solid);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--color-text-muted);
}

.toast.show {
    animation: slideIn 0.3s ease forwards;
}

.toast.hide {
    animation: slideOut 0.3s ease forwards;
}

.toast-info, .toast.toast-info {
    border-left-color: var(--color-info);
}

.toast-success, .toast.toast-success {
    border-left-color: var(--color-success);
}

.toast-warning, .toast.toast-warning {
    border-left-color: var(--color-warning);
}

.toast-error, .toast.toast-error {
    border-left-color: var(--color-danger);
}

.toast-message {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    flex: 1;
    line-height: 1.5;
}

.toast-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: var(--font-size-xs);
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
    transition: color var(--transition-fast);
}

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


/* ============================================================
   31. MODAL
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s ease;
}

.modal-content {
    background: var(--color-bg-card-solid);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.2s ease;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: var(--font-size-lg);
    padding: 0;
    transition: color var(--transition-fast);
}

.modal-close:hover {
    color: var(--color-text-heading);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
}


/* ============================================================
   32. ADMIN DASHBOARD
   ============================================================ */
.admin-dashboard {
    padding: 0;
}

.admin-dashboard h1 {
    margin-bottom: 1.5rem;
}

.metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.metric-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.metric-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-secondary);
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.metric-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
}

@media (min-width: 768px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Dashboard Sections */
.dashboard-section {
    margin-top: 2rem;
}

.dashboard-section h2 {
    font-size: var(--font-size-lg);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

/* Provider Health */
.provider-health-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.provider-health-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.provider-health-card h3 {
    font-size: var(--font-size-base);
    margin-bottom: 0.75rem;
    color: var(--color-text-heading);
}

.health-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.health-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.health-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.health-value {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.health-good {
    color: var(--color-success);
}

.health-warn {
    color: var(--color-warning);
}

.health-bad {
    color: var(--color-danger);
}

@media (min-width: 768px) {
    .provider-health-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .provider-health-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ============================================================
   33. ADMIN TABLE
   ============================================================ */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.admin-table th {
    background: rgba(22, 33, 62, 0.9);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-heading);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.admin-table td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background: rgba(107, 33, 168, 0.05);
}

.admin-table tbody tr:nth-child(even) {
    background: rgba(22, 33, 62, 0.3);
}

.admin-table tbody tr:nth-child(even):hover {
    background: rgba(107, 33, 168, 0.08);
}

.admin-table-compact td {
    padding: 0.45rem 0.75rem;
    font-size: var(--font-size-xs);
}

.admin-table-compact th {
    padding: 0.55rem 0.75rem;
    font-size: var(--font-size-xs);
}

/* Responsive table wrapper */
.language-dist-table {
    overflow-x: auto;
}

/* Table cell types */
.key-cell {
    font-family: monospace;
    font-size: var(--font-size-xs);
    color: var(--color-accent);
}

.translation-value {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.path-cell {
    font-family: monospace;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-cell {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flag-cell {
    font-size: var(--font-size-lg);
}

.sort-input {
    width: 80px;
}


/* ============================================================
   34. ADMIN TOOLBAR & FILTERS
   ============================================================ */
.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: flex-end;
}

.search-group {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-width: 200px;
}

.search-group .form-control {
    flex: 1;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.filter-group .form-control {
    min-width: 140px;
}


/* ============================================================
   35. STATUS BADGES
   ============================================================ */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-badge.active {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-success);
}

.status-badge.inactive {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger);
}

/* Method badges for logs */
.method-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    font-family: monospace;
}

.method-get {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-success);
}

.method-post {
    background: rgba(59, 130, 246, 0.15);
    color: var(--color-info);
}

.method-put {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
}

.method-delete {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger);
}

/* Status codes */
.status-code {
    font-family: monospace;
    font-weight: 600;
}

.status-ok {
    color: var(--color-success);
}

.status-warn {
    color: var(--color-warning);
}

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

/* Slow response */
.slow-response {
    color: var(--color-warning);
    font-weight: 600;
}

/* Log row states */
.log-error {
    background: rgba(239, 68, 68, 0.06) !important;
}

.log-warn {
    background: rgba(245, 158, 11, 0.04) !important;
}

/* Type badges for token transactions */
.type-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.type-purchase {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-success);
}

.type-consumption {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger);
}

.type-refund {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
}

.type-bonus {
    background: rgba(59, 130, 246, 0.15);
    color: var(--color-info);
}

/* Amount colors */
.amount-positive {
    color: var(--color-success);
    font-weight: 600;
}

.amount-negative {
    color: var(--color-danger);
    font-weight: 600;
}

/* Best value badge */
.badge-best {
    color: var(--color-secondary);
    font-weight: 600;
}

/* RTL badge */
.rtl-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: rgba(107, 33, 168, 0.15);
    color: var(--color-primary-light);
}

/* Inactive row */
.inactive-row {
    opacity: 0.55;
}


/* ============================================================
   36. TOGGLE SWITCH
   ============================================================ */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

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

.toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--color-text-muted);
    border-radius: 50%;
    transition: all var(--transition-base);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: rgba(34, 197, 94, 0.2);
    border-color: var(--color-success);
}

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


/* ============================================================
   37. ACTION BUTTONS
   ============================================================ */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
}


/* ============================================================
   38. ANALYTICS PAGE
   ============================================================ */
.admin-analytics,
.admin-feature-flags,
.admin-tokens,
.admin-logs,
.admin-languages,
.admin-users,
.admin-providers,
.admin-characters,
.admin-translations,
.admin-prompts {
    /* Page container */
}

.analytics-section,
.admin-section {
    margin-top: 2rem;
}

.analytics-section h2,
.admin-section h2 {
    font-size: var(--font-size-lg);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.analytics-total {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-sm);
    color: var(--color-secondary);
    text-align: right;
}

/* Bar chart cells in analytics tables */
.bar-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bar-cell .bar {
    height: 18px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--radius-sm);
    min-width: 4px;
    transition: width 0.3s ease;
}

.bar-cell span {
    font-weight: 600;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}


/* ============================================================
   39. FEATURE FLAGS PAGE
   ============================================================ */
.rollout-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rollout-bar {
    width: 80px;
    height: 8px;
    background: var(--color-bg);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.rollout-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.rollout-editor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rollout-editor span {
    font-weight: 600;
    font-size: var(--font-size-sm);
    min-width: 40px;
}


/* ============================================================
   40. PROMPTS PAGE
   ============================================================ */
.prompt-selectors {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.prompt-selectors .form-group {
    flex: 1;
    min-width: 200px;
}

.prompt-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.prompt-character,
.prompt-language {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.prompt-editor {
    margin-bottom: 2rem;
}

.prompt-textarea {
    font-family: monospace;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    min-height: 200px;
}

.prompt-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.prompt-help {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.prompt-help h3 {
    font-size: var(--font-size-base);
    margin-bottom: 1rem;
}

.variables-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    align-items: center;
}

.variables-grid code {
    background: var(--color-bg);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
}

.variables-grid span {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}


/* ============================================================
   41. ADMIN ADD TRANSLATION FORM
   ============================================================ */
.add-translation-form {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.add-translation-form h3 {
    font-size: var(--font-size-base);
    margin-bottom: 1rem;
}


/* ============================================================
   42. LANGUAGES SUMMARY
   ============================================================ */
.languages-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}


/* ============================================================
   43. RTL SUPPORT
   ============================================================ */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .nav-right {
    flex-direction: row-reverse;
}

[dir="rtl"] .language-dropdown {
    right: auto;
    left: 0;
}

[dir="rtl"] .toast-container {
    right: auto;
    left: 1rem;
}

[dir="rtl"] .toast {
    border-left: none;
    border-right: 4px solid var(--color-text-muted);
}

[dir="rtl"] .toast-info, [dir="rtl"] .toast.toast-info {
    border-right-color: var(--color-info);
}

[dir="rtl"] .toast-success, [dir="rtl"] .toast.toast-success {
    border-right-color: var(--color-success);
}

[dir="rtl"] .toast-warning, [dir="rtl"] .toast.toast-warning {
    border-right-color: var(--color-warning);
}

[dir="rtl"] .toast-error, [dir="rtl"] .toast.toast-error {
    border-right-color: var(--color-danger);
}

[dir="rtl"] .fortune-section {
    border-left: none;
    border-right: 4px solid var(--color-primary);
}

[dir="rtl"] .fortune-section.main-message {
    border-right-color: var(--color-secondary);
}

[dir="rtl"] .fortune-section.advice {
    border-right-color: var(--color-success);
}

[dir="rtl"] .fortune-section.warning {
    border-right-color: var(--color-danger);
}

[dir="rtl"] .fortune-section.astrology {
    border-right-color: var(--color-primary-light);
}

[dir="rtl"] .fortune-section.lucky {
    border-right-color: var(--color-secondary);
}

[dir="rtl"] .fortune-section.horoscope {
    border-right-color: var(--color-accent);
}

[dir="rtl"] .fortune-section.mood {
    border-right-color: var(--color-info);
}

[dir="rtl"] .admin-sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--color-border);
}

[dir="rtl"] .admin-nav-link {
    border-left: none;
    border-right: 3px solid transparent;
}

[dir="rtl"] .admin-nav-link:hover {
    border-right-color: var(--color-primary-light);
}

[dir="rtl"] .admin-nav-link.active {
    border-right-color: var(--color-primary);
}

@media (min-width: 768px) {
    [dir="rtl"] .admin-content {
        margin-left: 0;
        margin-right: var(--sidebar-width);
    }
}

[dir="rtl"] .admin-table th,
[dir="rtl"] .admin-table td {
    text-align: right;
}

[dir="rtl"] .wizard-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .result-actions {
    justify-content: flex-start;
}

[dir="rtl"] .btn-remove {
    right: auto;
    left: 6px;
}

[dir="rtl"] .package-features li {
    padding-left: 0;
    padding-right: 1.25rem;
}

[dir="rtl"] .package-features li::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .history-date {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .modal-footer {
    justify-content: flex-start;
}

[dir="rtl"] .faq-question {
    text-align: right;
}

/* ============================================================
   43.5 TOKEN MANAGEMENT MODAL
   ============================================================ */
.token-balance-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.token-amount {
    font-weight: 600;
    color: var(--color-primary);
}

.btn-xs {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: none;
}

.btn-link:hover {
    opacity: 0.8;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-dim);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

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

.modal-body {
    padding: 1.25rem;
}

.user-info {
    background: var(--color-bg);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.user-info p {
    margin: 0.5rem 0;
}

.user-info .badge {
    background: var(--color-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: 600;
}

.token-adjustment-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: var(--color-text);
}

.form-group input,
.form-group textarea {
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1rem;
}

.form-text {
    font-size: 0.875rem;
    color: var(--color-text-dim);
}

.quick-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.btn-success {
    background-color: #10b981;
    color: white;
}

.btn-success:hover {
    background-color: #059669;
}

.btn-danger {
    background-color: #ef4444;
    color: white;
}

.btn-danger:hover {
    background-color: #dc2626;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 1rem;
    }

    .quick-actions {
        justify-content: space-between;
    }

    .quick-actions button {
        flex: 1;
        min-width: calc(33.333% - 0.5rem);
    }
}


/* ============================================================
   44. SCROLLBAR STYLING (WebKit)
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-dim);
}


/* ============================================================
   45. SELECTION HIGHLIGHT
   ============================================================ */
::selection {
    background: rgba(107, 33, 168, 0.35);
    color: #fff;
}


/* ============================================================
   46. PRINT STYLES
   ============================================================ */
@media print {
    /* ── STEP 1: Override all CSS custom properties at root ─── */
    /* This ensures var(--color-text) etc. resolve to print colors */
    :root {
        --color-bg: #ffffff !important;
        --color-bg-secondary: #f8f8f8 !important;
        --color-bg-elevated: #f0f0f0 !important;
        --color-bg-card: #f5f5f5 !important;
        --color-bg-card-solid: #f5f5f5 !important;
        --color-text: #000000 !important;
        --color-text-heading: #000000 !important;
        --color-text-muted: #333333 !important;
        --color-text-dim: #555555 !important;
        --color-border: rgba(0,0,0,0.2) !important;
        --color-border-light: rgba(0,0,0,0.15) !important;
        --color-primary: #4a0e8f !important;
        --color-primary-glow: transparent !important;
        --color-secondary-glow: transparent !important;
    }

    /* ── STEP 2: Hide UI chrome ─────────────────────────────── */
    .top-nav, .sidebar, .sidebar-backdrop,
    .result-actions, .share-panel, .wizard-actions,
    .admin-sidebar, .result-topbar, .result-bottom-actions {
        display: none !important;
    }

    /* ── STEP 3: Page setup ─────────────────────────────────── */
    html, body {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 11pt !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .main-content { padding-top: 0 !important; }
    .result-page  { padding: 0 !important; background: #fff !important; }
    .shared-fortune-page { padding: 0 !important; }

    /* ── STEP 4: Kill all visual effects globally ───────────── */
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        text-shadow: none !important;
        box-shadow: none !important;
        background-image: none !important;
        animation: none !important;
        transition: none !important;
    }

    /* ── STEP 5: Force text black, backgrounds white/light ──── */
    *, *::before, *::after {
        color: #000000 !important;
        background-color: transparent !important;
    }

    /* ── HEADER CARD ────────────────────────────────────────── */
    .result-header-card {
        background-color: #f5f5f5 !important;
        border: 1px solid #ccc !important;
        border-left: 4px solid #444 !important;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .sign-badge {
        background-color: #eeeeee !important;
        border: 1px solid #ccc !important;
    }
    .reader-avatar { border: 2px solid #ccc !important; }

    /* ── FORTUNE SECTIONS ───────────────────────────────────── */
    .fortune-section {
        background-color: #ffffff !important;
        border: 1px solid #ddd !important;
        border-left: 4px solid #444 !important;
        border-radius: 6px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        page-break-inside: avoid;
    }
    .fortune-section h2 { font-size: 13pt; font-weight: 700; margin-bottom: 0.5rem; }
    .fortune-section p  { line-height: 1.6; margin-bottom: 0.5rem; }
    .fortune-text p     { line-height: 1.7; margin-bottom: 0.5rem; }

    /* ── SYMBOL CARDS ───────────────────────────────────────── */
    .symbols-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .symbol-card {
        background-color: #f9f9f9 !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
        display: flex !important;
        flex-direction: row !important;
    }
    .symbol-card-dominant {
        border-left: 3px solid #4a0e8f !important;
    }
    .symbol-img-wrap { width: 60px !important; min-width: 60px !important; }
    .symbol-img      { width: 100% !important; height: 100% !important; object-fit: contain !important; }
    .symbol-name     { font-weight: 700; }
    .pos-tag { background: linear-gradient(135deg, #f6d365, #d4a017) !important; color: #3d2200 !important; border: none !important; }

    /* ── LUCKY GRID ─────────────────────────────────────────── */
    .lucky-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }
    .lucky-item {
        background-color: #f5f5f5 !important;
        border: 1px solid #ccc !important;
        padding: 0.4rem;
        border-radius: 4px;
    }
    .lucky-label { font-weight: 600; }

    /* ── SHARED FORTUNE PAGE ────────────────────────────────── */
    .shared-fortune-content { padding: 0 !important; }
}

/* ============================================================
   READING FOR TOGGLE (Segmented Pill)
   ============================================================ */
.reading-for-toggle {
    display: flex;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    padding: 3px;
    gap: 0;
    width: 100%;
    max-width: 400px;
}

.reading-for-toggle .toggle-option {
    flex: 1;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
}

.reading-for-toggle .toggle-option:hover {
    color: var(--color-text);
}

.reading-for-toggle .toggle-option.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* RTL support for toggle */
[dir="rtl"] .reading-for-toggle {
    direction: rtl;
}


/* ============================================================
   Hide reCAPTCHA badge (Google allows this with proper disclosure)
   Must mention "This site is protected by reCAPTCHA" in privacy policy
   ============================================================ */
.grecaptcha-badge {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}


/* ============================================================
   SECTION TITLE WITH ICON (Lucky Elements, Horoscope)
   ============================================================ */
.section-title-with-icon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.section-title-with-icon h2 {
    margin-bottom: 0;
}

.section-title-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.section-title-icon-lg {
    width: 56px;
    height: 56px;
}

.section-title-icon-xl {
    width: 110px;
    height: 110px;
}

.section-title-icon-circle {
    border-radius: 50%;
    object-fit: cover;
}

/* Horoscope sign name under the title */
.horoscope-sign-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-accent);
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Zodiac emoji in sign badges and horoscope */
.sign-emoji {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}

.horoscope-sign-name .sign-emoji {
    font-size: 1.6rem;
}

/* Zodiac PNG images in sign badges and horoscope */
.sign-zodiac-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.horoscope-sign-name .sign-zodiac-img {
    width: 36px;
    height: 36px;
}


/* ============================================================
   LUCKY NUMBERS — Colored Circles (matching PDF style)
   ============================================================ */
.lucky-numbers {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Lucky header row: [small dice + title] on left | [clover + numbers] on right */
.lucky-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
}

.lucky-title-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lucky-dice-sm {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.lucky-numbers-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lucky-numbers-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lucky-clover-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.lucky-number-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

.circle-color-0 { background: #C9A84C; }
.circle-color-1 { background: #8B5E3C; }
.circle-color-2 { background: #4A1A2C; }
.circle-color-3 { background: #B8860B; }
.circle-color-4 { background: #7A6A5E; }
.circle-color-5 { background: #6B4226; }


/* ============================================================
   CUP READING TITLE BLOCK (logo + avatar + title + name)
   ============================================================ */
.reading-title-block {
    text-align: center;
    margin-bottom: 1rem;
}

.reading-title-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.reading-title-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-secondary);
}

.reading-title-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-secondary);
}

.reading-title-engine {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--glass-border);
    padding: 4px;
}

.avatar-hover-wrap {
    position: relative;
    display: inline-block;
}

.avatar-hover-name {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.avatar-hover-wrap:hover .avatar-hover-name {
    opacity: 1;
}

.reading-title-block h2 {
    margin-bottom: 0;
}

.reading-title-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-heading);
    margin-top: 0.25rem;
}

/* Fortune heading (# lines from AI) */
.fortune-heading {
    font-size: var(--font-size-lg);
    color: var(--color-secondary);
    margin: 1rem 0 0.5rem;
    font-weight: 600;
}

.fortune-text em {
    font-style: italic;
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .reading-title-logo,
    .reading-title-avatar,
    .reading-title-engine {
        width: 76px;
        height: 76px;
    }

    .lucky-number-circle {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }

    .section-title-icon {
        width: 40px;
        height: 40px;
    }

    .section-title-icon-lg {
        width: 64px;
        height: 64px;
    }

    .section-title-icon-xl {
        width: 130px;
        height: 130px;
    }
}

/* ===================================================================
   SECTION 19b: SERVICES (Index Page - Coffee + Tarot)
   =================================================================== */
.services-section {
    padding: 3rem 1rem;
    text-align: center;
}

.services-section h2 {
    font-size: 1.6rem;
    color: var(--color-secondary);
    margin-bottom: 2rem;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.service-card {
    background: var(--color-bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform 0.3s, border-color 0.3s;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-secondary-glow);
}

.service-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.service-card h3 {
    font-size: 1.3rem;
    color: var(--color-text);
    margin-bottom: 0.8rem;
}

.service-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.service-card .btn {
    min-width: 160px;
}

/* Coming Soon cards */
.service-card.coming-soon {
    position: relative;
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

.service-card.coming-soon:hover {
    transform: none;
    border-color: rgba(255,255,255,0.08);
}

.coming-soon-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-secondary);
    color: var(--color-bg);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 1;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .services-section {
        padding: 4rem 2rem;
    }

    .services-section h2 {
        font-size: 1.8rem;
    }
}

/* ===================================================================
   SECTION 20: TAROT READING
   =================================================================== */

/* --- Tarot Landing Page --- */
.tarot-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.tarot-page h1 {
    text-align: center;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.tarot-subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

.tarot-section {
    margin-bottom: 2rem;
}

.tarot-section h2 {
    color: var(--color-text);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Deck selector */
.tarot-deck-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.tarot-deck-card {
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.tarot-deck-card:hover {
    border-color: var(--color-primary);
    background: rgba(139,92,246,0.06);
}

.tarot-deck-card.selected {
    border-color: var(--color-primary);
    background: rgba(139,92,246,0.12);
    box-shadow: 0 0 20px rgba(139,92,246,0.15);
}

.deck-card-back {
    width: 80px;
    height: 124px;
    border-radius: 6px;
    object-fit: cover;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    transition: transform 0.2s;
}

.tarot-deck-card.selected .deck-card-back {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(139,92,246,0.3);
}

.tarot-deck-card h3 {
    color: var(--color-text);
    font-size: 0.85rem;
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.tarot-deck-card p {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

/* Deck compact preview (replaces full grid on main page) */
.deck-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
}

.deck-preview:hover {
    background: rgba(139,92,246,0.08);
}

.deck-preview-img {
    width: 52px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

.deck-preview-info {
    flex: 1;
    min-width: 0;
}

.deck-preview-info h3 {
    color: var(--color-text);
    font-size: 0.9rem;
    margin: 0 0 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deck-preview-info p {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.deck-preview-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border: 1px solid rgba(139,92,246,0.6);
    color: #fff;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(139,92,246,0.3);
}

.deck-preview-btn:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(139,92,246,0.4);
}

/* Deck selector modal grid */
.deck-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.deck-modal-card {
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.deck-modal-card:hover {
    border-color: var(--color-primary);
    background: rgba(139,92,246,0.06);
}

.deck-modal-card.selected {
    border-color: var(--color-primary);
    background: rgba(139,92,246,0.12);
    box-shadow: 0 0 16px rgba(139,92,246,0.15);
}

.deck-modal-card .deck-card-back {
    width: 60px;
    height: 93px;
    margin-bottom: 0.5rem;
}

.deck-modal-card h3 {
    color: #fff;
    font-size: 0.78rem;
    margin: 0 0 0.35rem;
    line-height: 1.3;
    background: linear-gradient(135deg, rgba(139,92,246,0.25) 0%, rgba(109,40,217,0.2) 100%);
    padding: 0.22rem 0.65rem;
    border-radius: 50px;
    display: inline-block;
    border: 1px solid rgba(139,92,246,0.3);
}

.deck-modal-card p {
    color: var(--color-text-secondary);
    font-size: 0.65rem;
    margin: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Spread selector */
.tarot-spread-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.tarot-spread-card {
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.tarot-spread-card:hover {
    border-color: var(--color-primary);
    background: rgba(139,92,246,0.06);
}

.tarot-spread-card.selected {
    border-color: var(--color-primary);
    background: rgba(139,92,246,0.12);
    box-shadow: 0 0 20px rgba(139,92,246,0.15);
}

.spread-card-icons {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

.spread-card-placeholder {
    width: 52px;
    height: 80px;
    border-radius: 5px;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    flex-shrink: 0;
}

.tarot-spread-card.selected .spread-card-placeholder {
    opacity: 1;
}

.tarot-spread-card h3 {
    color: var(--color-text);
    font-size: 1rem;
    margin: 0 0 0.35rem;
}

.tarot-spread-card p {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}

.spread-card-count {
    display: inline-block;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
    padding: 0.3rem 0.85rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
    box-shadow: 0 2px 8px rgba(139,92,246,0.3);
    border: 1px solid rgba(139,92,246,0.5);
}

/* Question textarea */
.tarot-question-input {
    width: 100%;
    min-height: 80px;
    resize: vertical;
}

.tarot-question-hint {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

/* Draw button area */
.tarot-action {
    text-align: center;
    padding: 1.5rem 0;
}

.tarot-draw-btn {
    min-width: 200px;
    font-size: 1.1rem;
    padding: 0.85rem 2rem;
}

.spinner-sm {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* --- Tarot Draw Page (Card Flip Animation) --- */
.tarot-draw-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    text-align: center;
}

.tarot-draw-heading {
    margin-bottom: 2rem;
    color: var(--color-text);
}

.tarot-card-table {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    perspective: 1200px;
}

.tarot-card-slot {
    text-align: center;
}

.tarot-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #3d2200;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #f6d365 0%, #d4a017 50%, #c8962e 100%);
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    display: inline-block;
    box-shadow: 0 1px 4px rgba(180, 140, 20, 0.35);
}

/* Draw page position-specific colors (3-card spread) */
.tarot-card-label.pos-past,
.tarot-card-label.pos-past_influence {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.4);
}

.tarot-card-label.pos-present,
.tarot-card-label.pos-present_action {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 50%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(139, 92, 246, 0.4);
}

.tarot-card-label.pos-future,
.tarot-card-label.pos-future_outcome {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    color: #422006;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.4);
}

/* Draw page position-specific colors (5-card spread) */
.tarot-card-label.pos-situation {
    background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.4);
}

.tarot-card-label.pos-challenge {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(249, 115, 22, 0.4);
}

.tarot-card-label.pos-advice {
    background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 50%, #06b6d4 100%);
    color: #083344;
    box-shadow: 0 1px 4px rgba(6, 182, 212, 0.4);
}

.tarot-card-label.pos-outcome {
    background: linear-gradient(135deg, #f0abfc 0%, #d946ef 50%, #c026d3 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(217, 70, 239, 0.4);
}

.tarot-card-label.pos-potential {
    background: linear-gradient(135deg, #86efac 0%, #4ade80 50%, #22c55e 100%);
    color: #052e16;
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.4);
}

/* 3D Card flip */
.tarot-card-flip {
    width: 120px;
    height: 192px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarot-card-flip.revealed {
    transform: rotateY(180deg);
}

.tarot-card-flip.revealed.reversed-card {
    transform: rotateY(180deg);
}

.tarot-card-flip.revealed.reversed-card .tarot-card-img {
    transform: rotate(180deg);
}

.tarot-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.tarot-card-back,
.tarot-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}

.tarot-card-back {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
    border: 2px solid rgba(139,92,246,0.3);
}

.tarot-card-back-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarot-card-face {
    transform: rotateY(180deg);
    background: linear-gradient(180deg, #2d1f5e 0%, #1a1035 100%);
    border: 2px solid rgba(139,92,246,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tarot-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder face (when no image) */
.tarot-card-placeholder-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    text-align: center;
    width: 100%;
    height: 100%;
}

.tarot-card-placeholder-face.result {
    background: linear-gradient(180deg, #2d1f5e 0%, #1a1035 100%);
    border-radius: 8px;
    border: 2px solid rgba(139,92,246,0.3);
}

.tarot-card-arcana {
    font-size: 1.5rem;
}

.tarot-card-name {
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    line-height: 1.2;
}

.tarot-reversed-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: linear-gradient(135deg, rgba(239,68,68,0.2) 0%, rgba(190,18,60,0.2) 100%);
    color: #fb7185;
    font-size: 0.6rem;
    padding: 0.15rem 0.45rem;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid rgba(239,68,68,0.25);
}

/* Interpreting state */
.tarot-interpreting {
    padding: 2.5rem 1.5rem;
    text-align: center;
    margin-top: 1rem;
}

/* Tarot card spinner — spinning card with rays */
.tarot-spinner-wrap {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 160px;
    margin-bottom: 0.75rem;
}

.tarot-spinner-card {
    width: 80px;
    height: 128px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid rgba(212,175,55,0.5);
    box-shadow: 0 0 20px rgba(139,92,246,0.4), 0 0 40px rgba(139,92,246,0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: tarot-spin 3s ease-in-out infinite;
    z-index: 2;
}

.tarot-spinner-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(212,175,55,0.15) 30deg,
        transparent 60deg,
        rgba(139,92,246,0.12) 90deg,
        transparent 120deg,
        rgba(212,175,55,0.15) 150deg,
        transparent 180deg,
        rgba(139,92,246,0.12) 210deg,
        transparent 240deg,
        rgba(212,175,55,0.15) 270deg,
        transparent 300deg,
        rgba(139,92,246,0.12) 330deg,
        transparent 360deg
    );
    animation: tarot-rays-spin 8s linear infinite;
    z-index: 1;
}

@keyframes tarot-spin {
    0%, 100% {
        transform: translate(-50%, -50%) rotateY(0deg) scale(1);
        box-shadow: 0 0 20px rgba(139,92,246,0.4), 0 0 40px rgba(139,92,246,0.2);
    }
    25% {
        transform: translate(-50%, -50%) rotateY(90deg) scale(0.95);
        box-shadow: 0 0 30px rgba(212,175,55,0.5), 0 0 60px rgba(212,175,55,0.2);
    }
    50% {
        transform: translate(-50%, -50%) rotateY(180deg) scale(1);
        box-shadow: 0 0 20px rgba(139,92,246,0.4), 0 0 40px rgba(139,92,246,0.2);
    }
    75% {
        transform: translate(-50%, -50%) rotateY(270deg) scale(0.95);
        box-shadow: 0 0 30px rgba(212,175,55,0.5), 0 0 60px rgba(212,175,55,0.2);
    }
}

@keyframes tarot-rays-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.tarot-interpreting h2 {
    color: var(--color-text);
    margin-top: 0;
    font-size: 1.3rem;
}

.tarot-interpreting p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

.tarot-interpreting .loading-dots {
    margin-top: 0;
}

.tarot-error {
    text-align: center;
    padding: 1.5rem;
}

/* --- Tarot Result Page --- */
.tarot-result-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.tarot-question-section {
    background: rgba(139,92,246,0.06);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.tarot-question-text {
    font-style: italic;
    color: var(--color-text);
    font-size: 1.1rem;
}

/* Result cards row */
.tarot-result-cards {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tarot-result-card-slot {
    text-align: center;
    max-width: 140px;
}

.tarot-result-card {
    width: 110px;
    height: 176px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(139,92,246,0.3);
    background: linear-gradient(180deg, #2d1f5e 0%, #1a1035 100%);
    margin: 0 auto 0.5rem;
}

.tarot-result-card.reversed-card .tarot-card-img {
    transform: rotate(180deg);
}

.tarot-result-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.tarot-position-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #f6d365 0%, #d4a017 50%, #c8962e 100%);
    color: #3d2200;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 4px rgba(180, 140, 20, 0.35);
    display: inline-block;
}

/* Position-specific colors (3-card spread) */
.tarot-position-label.pos-past,
.tarot-position-label.pos-past_influence {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.4);
}

.tarot-position-label.pos-present,
.tarot-position-label.pos-present_action {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 50%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(139, 92, 246, 0.4);
}

.tarot-position-label.pos-future,
.tarot-position-label.pos-future_outcome {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    color: #422006;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.4);
}

/* 5-card spread specific positions */
.tarot-position-label.pos-situation {
    background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.4);
}

.tarot-position-label.pos-challenge {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(249, 115, 22, 0.4);
}

.tarot-position-label.pos-advice {
    background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 50%, #06b6d4 100%);
    color: #083344;
    box-shadow: 0 1px 4px rgba(6, 182, 212, 0.4);
}

.tarot-position-label.pos-outcome {
    background: linear-gradient(135deg, #f0abfc 0%, #d946ef 50%, #c026d3 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(217, 70, 239, 0.4);
}

.tarot-position-label.pos-potential {
    background: linear-gradient(135deg, #86efac 0%, #4ade80 50%, #22c55e 100%);
    color: #052e16;
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.4);
}

.tarot-card-title {
    font-size: 0.8rem;
    color: var(--color-text);
    font-weight: 500;
}

.tarot-reversed-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    color: #fff;
    font-size: 0.78rem;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid rgba(239,68,68,0.5);
    box-shadow: 0 2px 8px rgba(239,68,68,0.35);
    text-align: center;
}

.tarot-reversed-tag.sm {
    font-size: 0.68rem;
    padding: 0.18rem 0.6rem;
    vertical-align: middle;
    margin-left: 0.35rem;
}

/* Interpretation cards */
.tarot-interp-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.tarot-interp-card h3 {
    color: var(--color-text);
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.interp-position {
    font-size: 0.72rem;
    font-weight: 600;
    color: #3d2200;
    background: linear-gradient(135deg, #f6d365 0%, #d4a017 50%, #c8962e 100%);
    padding: 0.18rem 0.6rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 4px rgba(180, 140, 20, 0.35);
}

/* Position colors for interpretation cards */
.interp-position.pos-past,
.interp-position.pos-past_influence {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.4);
}

.interp-position.pos-present,
.interp-position.pos-present_action {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 50%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(139, 92, 246, 0.4);
}

.interp-position.pos-future,
.interp-position.pos-future_outcome {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    color: #422006;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.4);
}

.interp-position.pos-situation {
    background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.4);
}

.interp-position.pos-challenge {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(249, 115, 22, 0.4);
}

.interp-position.pos-advice {
    background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 50%, #06b6d4 100%);
    color: #083344;
    box-shadow: 0 1px 4px rgba(6, 182, 212, 0.4);
}

.interp-position.pos-outcome {
    background: linear-gradient(135deg, #f0abfc 0%, #d946ef 50%, #c026d3 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(217, 70, 239, 0.4);
}

.interp-position.pos-potential {
    background: linear-gradient(135deg, #86efac 0%, #4ade80 50%, #22c55e 100%);
    color: #052e16;
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.4);
}

.interp-card-name {
    color: var(--color-text);
}

.tarot-interp-card p {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Affirmation section */
.affirmation-section {
    background: rgba(139,92,246,0.08);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}

.affirmation-text {
    font-size: 1.15rem;
    font-style: italic;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.5;
}

/* Warning section */
.warning-section h2 {
    color: #f59e0b;
}

/* Card name overlay on image — elliptic pill frame */
.tarot-card-face,
.tarot-result-card {
    position: relative;
}

.tarot-card-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.85) 100%);
    padding: 1.4rem 0.3rem 0.4rem;
    text-align: center;
    pointer-events: none;
    display: flex;
    justify-content: center;
}

.tarot-card-name-overlay span {
    color: #fef3c7;
    font-size: 0.68rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    letter-spacing: 0.04em;
    line-height: 1.2;
    background: linear-gradient(135deg, rgba(120,80,10,0.85) 0%, rgba(80,50,5,0.9) 100%);
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    border: 1px solid rgba(212,175,55,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 6px rgba(180,140,20,0.3), inset 0 1px 0 rgba(255,223,100,0.15);
}

/* Result card clickable */
.tarot-result-card-slot {
    cursor: pointer;
    transition: transform 0.2s;
}
.tarot-result-card-slot:hover {
    transform: scale(1.05);
}

/* Card Lightbox */
.tarot-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s ease;
}

.tarot-lightbox-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-height: 90vh;
}

.tarot-lightbox-close {
    position: absolute;
    top: -2.5rem;
    right: -0.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    z-index: 1;
}

.tarot-lightbox-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(139,92,246,0.3);
    border: 3px solid rgba(139,92,246,0.4);
    position: relative;
}

/* Reversed card in lightbox: show upside-down first, then animate to correct */
.tarot-lightbox-card.was-reversed .tarot-lightbox-img {
    transform: rotate(180deg);
    animation: unflip-card 0.8s ease-out 0.6s both;
}

@keyframes unflip-card {
    0% { transform: rotate(180deg); }
    100% { transform: rotate(0deg); }
}

.tarot-lightbox-img {
    display: block;
    max-height: 70vh;
    max-width: 85vw;
    width: auto;
    height: auto;
}

.tarot-lightbox-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    padding: 2.5rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    pointer-events: none;
}

.tarot-lightbox-name {
    color: #fef3c7;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, rgba(120,80,10,0.85) 0%, rgba(80,50,5,0.9) 100%);
    padding: 0.3rem 1rem;
    border-radius: 50px;
    border: 1px solid rgba(212,175,55,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(180,140,20,0.3), inset 0 1px 0 rgba(255,223,100,0.15);
}

.tarot-lightbox-overlay .tarot-position-label {
    font-size: 0.9rem;
}

.tarot-lightbox-overlay .tarot-reversed-tag {
    margin-top: 0.1rem;
}

@media (min-width: 768px) {
    .tarot-lightbox-img {
        max-height: 80vh;
        max-width: 50vw;
    }
    .tarot-lightbox-name {
        font-size: 1.5rem;
    }
    .tarot-lightbox-overlay .tarot-position-label {
        font-size: 1rem;
    }
    .tarot-card-name-overlay span {
        font-size: 0.78rem;
        padding: 0.2rem 0.6rem;
    }
}

/* --- Tarot History --- */
.tarot-history-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.tarot-history-page h1 {
    text-align: center;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

.tarot-history-card {
    cursor: pointer;
}

.tarot-history-cards-row {
    display: flex;
    gap: 0.35rem;
    padding: 0.75rem;
    justify-content: center;
    overflow: hidden;
}

.tarot-history-mini-card {
    width: 36px;
    height: 54px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(139,92,246,0.2);
    background: linear-gradient(180deg, #2d1f5e 0%, #1a1035 100%);
    flex-shrink: 0;
}

.tarot-history-mini-card.reversed-card img {
    transform: rotate(180deg);
}

.tarot-history-mini-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarot-mini-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--color-primary);
}

.tarot-history-spread {
    font-size: 0.75rem;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.tarot-history-question {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 0 0 0.25rem;
}

/* --- Tarot Desktop Breakpoints --- */
@media (min-width: 768px) {
    .tarot-page,
    .tarot-draw-page,
    .tarot-result-page,
    .tarot-history-page {
        padding: 2rem;
    }

    .tarot-deck-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .tarot-deck-card h3 {
        font-size: 0.95rem;
    }

    .tarot-deck-card p {
        font-size: 0.8rem;
    }

    .deck-card-back {
        width: 100px;
        height: 155px;
    }

    .deck-preview-img {
        width: 64px;
        height: 99px;
    }

    .deck-preview-info h3 {
        font-size: 1rem;
    }

    .deck-preview-info p {
        font-size: 0.8rem;
    }

    .deck-modal-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .deck-modal-card .deck-card-back {
        width: 80px;
        height: 124px;
    }

    .deck-modal-card h3 {
        font-size: 0.85rem;
    }

    .deck-modal-card p {
        font-size: 0.72rem;
    }

    .spread-card-placeholder {
        width: 70px;
        height: 108px;
    }

    .spread-card-icons {
        gap: 0.6rem;
    }

    .tarot-card-flip {
        width: 150px;
        height: 240px;
    }

    .tarot-result-card {
        width: 130px;
        height: 208px;
    }

    .tarot-result-card-slot {
        max-width: 160px;
    }

    .tarot-history-mini-card {
        width: 44px;
        height: 66px;
    }

    .tarot-interp-card {
        padding: 1.25rem 1.5rem;
    }

    .fortune-text {
        text-align: justify;
    }
}

@media (min-width: 1200px) {
    .tarot-spread-grid {
        gap: 1.5rem;
    }

    .tarot-card-flip {
        width: 170px;
        height: 272px;
    }

    .tarot-result-card {
        width: 150px;
        height: 240px;
    }
}


/* ========================================
   SECTION 21: PALM READING
   ======================================== */

.palm-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.palm-title {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.palm-subtitle {
    text-align: center;
    color: rgba(255,255,255,0.6);
    margin-bottom: 2rem;
}

/* Palm uses shared .wizard-steps and .image-dropzone/.image-preview-grid from cup reading upload section */

.palm-instruction-strip {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
    opacity: 0.5;
}

.palm-instruction-strip img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

/* Details Section */
.palm-details-section {
    max-width: 500px;
    margin: 0 auto;
}

.toggle-group {
    display: flex;
    gap: 0.5rem;
}

/* Character Section */
.palm-character-section {
    text-align: center;
}

.token-cost-display {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
}

/* Error & Loading */
.palm-error {
    text-align: center;
    padding: 2rem;
    color: #ef4444;
}

/* ---- Result Page ---- */
.palm-result-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.palm-section {
    margin-bottom: 2rem;
}

.palm-section h2 {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.palm-section h3 {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    margin: 1rem 0 0.5rem;
}

/* Themed palm reading sections */
.palm-themed-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
}
.palm-themed-section h3 {
    display: inline-block;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.9rem;
    padding: 0.35rem 1rem;
    border-radius: 50px;
    background: linear-gradient(135deg, #6B21A8, #9333EA);
}
/* Per-section colorful pill headers */
.sec-personality h3 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.sec-vitality h3 { background: linear-gradient(135deg, #059669, #34D399); }
.sec-emotional h3 { background: linear-gradient(135deg, #E11D48, #FB7185); }
.sec-career h3 { background: linear-gradient(135deg, #2563EB, #60A5FA); }
.sec-talents h3 { background: linear-gradient(135deg, #D97706, #FBBF24); }
.sec-comparison h3 { background: linear-gradient(135deg, #0891B2, #22D3EE); }
.sec-guidance h3 { background: linear-gradient(135deg, #4F46E5, #818CF8); }
.sec-warning h3 { background: linear-gradient(135deg, #DC2626, #F87171); }
.palm-themed-section .reading-content p {
    line-height: 1.7;
    margin-bottom: 0.75rem;
}
.palm-themed-section .reading-content p:last-child { margin-bottom: 0; }
/* Overall reading section (main flowing narrative) */
.palm-overall-reading {
    background: rgba(212,175,55,0.04);
    border-color: rgba(212,175,55,0.15);
}
.palm-overall-reading h2 {
    display: inline-block;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    background: linear-gradient(135deg, #B45309, #D4AF37);
    border-bottom: none;
    margin-bottom: 1rem;
}
.palm-overall-reading .reading-content {
    text-align: justify;
}
.palm-overall-reading .reading-content p {
    line-height: 1.75;
    margin-bottom: 0.85rem;
}
.palm-affirmation {
    text-align: center;
    background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(139,92,246,0.08));
    border-color: rgba(212,175,55,0.15);
}
.palm-affirmation .affirmation-text {
    font-style: italic;
    font-size: 1.05rem;
    color: #D4AF37;
    margin: 0;
}

/* Hand Shape Card */
.hand-shape-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1.2rem;
}

.hand-shape-type {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

/* Features Grid */
.palm-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

/* Compact feature chips */
.palm-feature-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.palm-chip {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(139,92,246,0.12);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.06);
}
.palm-chip.cat-major_line { background: rgba(212,175,55,0.15); color: #d4af37; border-color: rgba(212,175,55,0.2); }
.palm-chip.cat-minor_line { background: rgba(139,92,246,0.15); color: #a78bfa; border-color: rgba(139,92,246,0.2); }
.palm-chip.cat-mount { background: rgba(52,211,153,0.12); color: #34d399; border-color: rgba(52,211,153,0.2); }
.palm-chip.cat-finger { background: rgba(251,146,60,0.12); color: #fb923c; border-color: rgba(251,146,60,0.2); }
.palm-chip.cat-hand_shape { background: rgba(96,165,250,0.12); color: #60a5fa; border-color: rgba(96,165,250,0.2); }
.palm-chip.cat-marking { background: rgba(244,114,182,0.12); color: #f472b6; border-color: rgba(244,114,182,0.2); }
.feature-count {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
}

.palm-feature-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 1rem;
}

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

.feature-name {
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.feature-category {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(139,92,246,0.15);
    color: var(--color-primary);
}

/* Category-specific colors */
.feature-category.cat-major_line {
    background: rgba(212,175,55,0.2);
    color: #d4af37;
}
.feature-category.cat-minor_line {
    background: rgba(139,92,246,0.2);
    color: #a78bfa;
}
.feature-category.cat-mount {
    background: rgba(52,211,153,0.2);
    color: #34d399;
}
.feature-category.cat-finger {
    background: rgba(251,146,60,0.2);
    color: #fb923c;
}
.feature-category.cat-hand_shape {
    background: rgba(96,165,250,0.2);
    color: #60a5fa;
}
.feature-category.cat-marking {
    background: rgba(244,114,182,0.2);
    color: #f472b6;
}

/* Comparison */
.comparison-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comparison-item {
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--color-primary);
    padding: 0.75rem 1rem;
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}

/* Dominant hand badge */
.dominant-hand-badge {
    font-size: 0.8rem;
    padding: 2px 10px;
    border-radius: 10px;
    background: rgba(139,92,246,0.12);
    color: rgba(255,255,255,0.7);
    display: inline-block;
    margin-top: 0.3rem;
}

/* Palm analysis card (step 2 inline loading, matches full-screen overlay style) */
.palm-analysis-card {
    text-align: center;
    padding: 1.5rem 1rem;
    margin: 1.5rem auto;
    max-width: 320px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
}
.palm-analysis-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    margin: 0 auto 1rem;
    filter: drop-shadow(0 0 20px rgba(212,175,55,0.4));
}
.palm-analysis-done {
    animation: none;
    filter: drop-shadow(0 0 20px rgba(34,197,94,0.4));
}
.palm-analysis-fail {
    animation: none;
    filter: drop-shadow(0 0 20px rgba(239,68,68,0.4)) grayscale(0.5);
}
.palm-analysis-card.analysis-complete {
    border-color: rgba(34,197,94,0.3);
}
.palm-analysis-card.analysis-failed {
    border-color: rgba(239,68,68,0.3);
}
.palm-analysis-status {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.palm-analysis-percent {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 0.25rem;
}
.palm-analysis-detail {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}

/* History Grid */
.palm-history-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.palm-history-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.palm-history-card:hover {
    border-color: rgba(139,92,246,0.3);
    transform: translateY(-2px);
}

.history-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.history-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.history-meta {
    flex: 1;
}

.history-character {
    font-weight: 600;
    font-size: 0.9rem;
}

.history-date {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.history-rating {
    font-size: 1.2rem;
}

.history-thumb {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.history-summary {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
}

/* Share URL */
.share-url-display {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.share-url-display input {
    flex: 1;
}

/* Shared Reading */
.shared-reading .shared-cta {
    text-align: center;
    margin-top: 2rem;
    padding: 1.5rem;
}

.shared-by {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

/* Reading Loading Overlay */
.reading-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.reading-loading-content {
    text-align: center;
    padding: 2rem;
}

.reading-loading-content h2 {
    margin: 1rem 0 0.5rem;
}

.reading-loading-content p {
    color: rgba(255,255,255,0.6);
}

.spinner-large {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

/* ---- Desktop ---- */
@media (min-width: 768px) {
    .palm-features-grid {
        grid-template-columns: 1fr 1fr;
    }

    .palm-history-grid {
        grid-template-columns: 1fr 1fr;
    }

    .reading-content {
        text-align: justify;
    }
}

@media (min-width: 1200px) {
    .palm-history-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ========================================
   SECTION 22: ASTROLOGY (ASTRAL BIRTH CHART READING)
   ======================================== */

.astrology-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 1rem;
}

.astrology-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.astrology-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.astrology-error {
    text-align: center;
    padding: 2rem;
}

.astrology-error p {
    color: var(--danger);
    margin-bottom: 1rem;
}

.astrology-section {
    margin-bottom: 1.5rem;
}

.astrology-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.astrology-form-grid .form-group.full-width {
    grid-column: 1 / -1;
}

.form-warning {
    display: block;
    font-size: 0.8rem;
    color: var(--warning, #e67e22);
    margin-top: 0.25rem;
}

.required-badge {
    color: var(--danger, #e74c3c);
    font-weight: bold;
}

.astrology-submit {
    text-align: center;
    padding: 1rem 0 2rem;
}

/* Result page */
.astrology-result-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

/* Celestial Trinity - 3 sign badges */
.astrology-signs-section {
    text-align: center;
}

.astrology-signs-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.astrology-sign-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    min-width: 100px;
    transition: transform 0.2s;
}

.astrology-sign-badge:hover {
    transform: translateY(-2px);
}

.sun-sign-badge {
    background: linear-gradient(135deg, rgba(255, 200, 50, 0.15), rgba(255, 150, 0, 0.1));
    border: 1px solid rgba(255, 200, 50, 0.3);
}

.moon-sign-badge {
    background: linear-gradient(135deg, rgba(180, 200, 255, 0.15), rgba(100, 150, 255, 0.1));
    border: 1px solid rgba(180, 200, 255, 0.3);
}

.rising-sign-badge {
    background: linear-gradient(135deg, rgba(200, 100, 255, 0.15), rgba(150, 50, 200, 0.1));
    border: 1px solid rgba(200, 100, 255, 0.3);
}

.astrology-sign-img {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
}

.astrology-sign-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.astrology-sign-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

/* Category sections — unique color per category */
.astrology-category {
    border-left: 3px solid rgba(150, 100, 255, 0.3);
    padding-left: 1rem;
}
.astrology-category.cat-love          { border-left-color: #f43f5e; }
.astrology-category.cat-love h2       { color: #fb7185; }
.astrology-category.cat-career        { border-left-color: #3b82f6; }
.astrology-category.cat-career h2     { color: #60a5fa; }
.astrology-category.cat-finance       { border-left-color: #f59e0b; }
.astrology-category.cat-finance h2    { color: #fbbf24; }
.astrology-category.cat-health        { border-left-color: #10b981; }
.astrology-category.cat-health h2     { color: #34d399; }
.astrology-category.cat-personal_growth { border-left-color: #8b5cf6; }
.astrology-category.cat-personal_growth h2 { color: #a78bfa; }
.astrology-category.cat-family        { border-left-color: #f97316; }
.astrology-category.cat-family h2     { color: #fb923c; }
.astrology-category.cat-spirituality  { border-left-color: #a855f7; }
.astrology-category.cat-spirituality h2 { color: #c084fc; }
.astrology-category.cat-travel        { border-left-color: #06b6d4; }
.astrology-category.cat-travel h2     { color: #22d3ee; }
.astrology-category.cat-creativity    { border-left-color: #ec4899; }
.astrology-category.cat-creativity h2 { color: #f472b6; }
.astrology-category.cat-overall       { border-left-color: #d4a017; }
.astrology-category.cat-overall h2    { color: var(--color-secondary); }

.astrology-category h2 {
    font-size: 1.15rem;
}

/* Affirmation */
.astrology-affirmation .affirmation-quote {
    font-style: italic;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    border-left: 4px solid rgba(200, 100, 255, 0.4);
    background: rgba(200, 100, 255, 0.05);
    border-radius: 0 8px 8px 0;
    margin: 0.5rem 0;
    color: var(--text);
}

/* Lucky elements row */
.astrology-lucky .lucky-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.astrology-lucky .lucky-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: rgba(150, 100, 255, 0.08);
    border: 1px solid rgba(150, 100, 255, 0.15);
    font-size: 0.9rem;
}

.astrology-lucky .lucky-icon {
    font-size: 1.1rem;
}

/* Question text */
.astrology-question-text {
    font-style: italic;
    color: var(--text-muted);
    font-size: 1.05rem;
}

/* Desktop */
@media (min-width: 768px) {
    .astrology-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .astrology-sign-badge {
        padding: 1.25rem 1.5rem;
        min-width: 130px;
    }

    .astrology-sign-img {
        width: 48px;
        height: 48px;
    }

    .astrology-sign-name {
        font-size: 1.1rem;
    }

    .astrology-category {
        padding-left: 1.5rem;
    }

    .astrology-result-page .fortune-text {
        text-align: justify;
    }
}