/* ========================================
   ZodiacAtlas - Mobile Onboarding Styles
   ======================================== */

:root {
    --gold: #D4AF37;
    --gold-light: #F4E4B2;
    --gold-dim: rgba(212, 175, 55, 0.3);
    --deep-space: #070B14;
    --nebula: #0D1321;
    --cosmic-purple: #1A1033;
    --mystic-blue: #0F1729;
    --starlight: #E8E6F0;
    --text-dim: rgba(232, 230, 240, 0.6);
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(212, 175, 55, 0.15);
    --gradient-gold: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Raleway', sans-serif;
    background: var(--deep-space);
    color: var(--starlight);
    line-height: 1.6;
}

.app {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 430px;
    margin: 0 auto;
    overflow: hidden;
}

/* ========================================
   Starry Background
   ======================================== */

.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 230px 80px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 300px 150px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 370px 60px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 120px 200px, rgba(255,255,255,0.8), transparent);
    background-size: 400px 250px;
    animation: starsMove 100s linear infinite;
}

.stars-2 {
    background-size: 300px 200px;
    opacity: 0.5;
    animation: starsMove 150s linear infinite reverse;
}

.stars-3 {
    background-size: 500px 300px;
    opacity: 0.3;
    animation: starsMove 200s linear infinite;
}

@keyframes starsMove {
    from { transform: translateY(0); }
    to { transform: translateY(-1000px); }
}

.cosmic-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 50%, rgba(26, 16, 51, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 80%, rgba(15, 23, 41, 0.6) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* ========================================
   Progress Bar
   ======================================== */

.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 16px 20px 12px;
    z-index: 100;
    background: linear-gradient(to bottom, var(--deep-space) 0%, transparent 100%);
}

.progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 8.33%;
    background: var(--gradient-gold);
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px var(--gold);
}

.progress-text {
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 8px;
}

/* ========================================
   Screens Container
   ======================================== */

.screens-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}

.screen.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.screen.exit {
    opacity: 0;
    transform: translateX(-30px);
}

.screen-content {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: visible;
    pointer-events: none; /* Disable clicks on container */
}

/* Enable clicks only on interactive elements */
.screen-content button,
.screen-content input,
.screen-content select,
.screen-content a,
.screen-content .city-input-container,
.screen-content .city-suggestions {
    pointer-events: auto;
}

/* ========================================
   Screen Icon
   ======================================== */

.screen-icon {
    margin-bottom: 24px;
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid var(--gold-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.icon-circle::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.zodiac-symbol {
    font-size: 36px;
    color: var(--gold);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

/* ========================================
   Typography
   ======================================== */

.screen-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 500;
    color: var(--starlight);
    margin-bottom: 12px;
    line-height: 1.3;
}

.screen-subtitle {
    font-size: 15px;
    color: var(--text-dim);
    margin-bottom: 32px;
    max-width: 280px;
}

/* ========================================
   Option Cards - Gender
   ======================================== */

.options-grid {
    display: grid;
    gap: 12px;
    width: 100%;
}

.gender-options {
    grid-template-columns: repeat(3, 1fr);
}

.option-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    color: var(--starlight);
    font-family: inherit;
}

.option-card:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
}

.option-card.selected {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.option-card .option-icon {
    font-size: 32px;
    color: var(--gold);
}

.option-card span {
    font-size: 13px;
    color: var(--text-dim);
}

.option-card.selected span {
    color: var(--starlight);
}

/* ========================================
   Option Cards - Vertical List
   ======================================== */

.options-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.option-card-wide {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    color: var(--starlight);
    font-family: inherit;
    text-align: left;
    width: 100%;
}

.option-card-wide:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateX(4px);
}

.option-card-wide.selected {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.option-icon-small {
    font-size: 24px;
    width: 40px;
    text-align: center;
}

.option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.option-title {
    font-size: 16px;
    font-weight: 500;
}

.option-desc {
    font-size: 13px;
    color: var(--text-dim);
}

/* ========================================
   Date Picker
   ======================================== */

.date-picker {
    width: 100%;
    margin-bottom: 32px;
}

.date-scroll-container {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.date-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.date-column label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.date-select {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--starlight);
    font-size: 18px;
    font-family: 'Cormorant Garamond', serif;
    cursor: pointer;
    min-width: 80px;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.date-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

/* ========================================
   Time Input
   ======================================== */

.time-input-container,
.time-period-container {
    width: 100%;
    margin-top: 20px;
    animation: fadeIn 0.4s ease;
}

.time-input-container label {
    display: block;
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.time-input {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px 24px;
    color: var(--starlight);
    font-size: 24px;
    font-family: 'Cormorant Garamond', serif;
    text-align: center;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

.time-input:focus {
    outline: none;
    border-color: var(--gold);
}

.time-periods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.time-period {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    color: var(--starlight);
    font-family: inherit;
    font-size: 12px;
}

.time-period:hover,
.time-period.selected {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold);
}

.time-period span:first-child {
    font-size: 24px;
}

/* ========================================
   City Input
   ======================================== */

.city-input-container {
    width: 100%;
    margin-bottom: 32px;
    position: relative;
}

.city-input-wrapper {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
}

.city-input {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 16px 16px 16px 48px;
    color: var(--starlight);
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.city-input::placeholder {
    color: var(--text-dim);
}

.city-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
}

.city-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--nebula);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.city-suggestions.active {
    display: block;
}

.city-suggestion {
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.city-suggestion:last-child {
    border-bottom: none;
}

.city-suggestion:hover {
    background: rgba(212, 175, 55, 0.1);
}

.city-suggestion-name {
    font-size: 15px;
    color: var(--starlight);
}

.city-suggestion-country {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ========================================
   Primary Button
   ======================================== */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--gradient-gold);
    color: var(--deep-space);
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    margin-top: auto;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

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

.btn-primary svg {
    transition: transform 0.3s ease;
}

.btn-primary:hover:not(:disabled) svg {
    transform: translateX(4px);
}

.btn-glow {
    animation: buttonGlow 2s ease-in-out infinite;
}

@keyframes buttonGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); }
    50% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.5); }
}

/* ========================================
   Loading Screen - Zodiac Wheel
   ======================================== */

.loading-screen {
    justify-content: center;
}

.zodiac-wheel {
    width: 220px;
    height: 220px;
    position: relative;
    margin-bottom: 40px;
}

.wheel-ring {
    position: absolute;
    border-radius: 50%;
}

.outer-ring {
    inset: 0;
    border: 2px solid var(--gold);
    animation: rotateWheel 20s linear infinite;
}

.inner-ring {
    inset: 30px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    animation: rotateWheel 15s linear infinite reverse;
}

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

.wheel-symbol {
    position: absolute;
    font-size: 18px;
    color: var(--gold);
    left: 50%;
    top: 50%;
    transform-origin: 0 0;
    --angle: calc(var(--i) * 30deg - 90deg);
    transform: rotate(var(--angle)) translateX(95px) rotate(calc(var(--angle) * -1)) translate(-50%, -50%);
}

.wheel-center {
    position: absolute;
    inset: 70px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-symbol {
    font-size: 40px;
    color: var(--gold);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.loading-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    margin-bottom: 12px;
    color: var(--gold-light);
}

.loading-text {
    font-size: 14px;
    color: var(--text-dim);
    animation: fadeText 2s ease-in-out infinite;
}

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

/* ========================================
   Result Screen
   ======================================== */

.result-screen {
    padding-top: 60px;
}

.result-card {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.02) 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 24px;
    padding: 32px 24px;
    width: 100%;
    margin-bottom: 24px;
    animation: resultReveal 0.8s ease-out;
}

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

.result-zodiac-symbol {
    font-size: 72px;
    color: var(--gold);
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.5));
    margin-bottom: 16px;
    animation: symbolFloat 3s ease-in-out infinite;
}

@keyframes symbolFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.result-zodiac-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    font-weight: 600;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.result-zodiac-dates {
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 24px;
}

.result-details {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.result-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.detail-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.detail-value {
    font-size: 16px;
    color: var(--starlight);
}

.revelation-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    margin-bottom: 32px;
    animation: fadeIn 0.5s ease 0.5s backwards;
}

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

.revelation-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.revelation-text {
    font-size: 15px;
    color: var(--text-dim);
    line-height: 1.6;
}

.revelation-text strong {
    color: var(--gold-light);
}

/* ========================================
   Color Options
   ======================================== */

.color-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}

.color-option {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    color: var(--starlight);
    font-family: inherit;
}

.color-option:hover {
    transform: translateY(-4px);
}

.color-option.selected {
    border-color: var(--color);
    box-shadow: 0 0 25px color-mix(in srgb, var(--color) 40%, transparent);
}

.color-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color) 50%, transparent);
    transition: transform 0.3s ease;
}

.color-option:hover .color-circle,
.color-option.selected .color-circle {
    transform: scale(1.1);
}

.color-option span {
    font-size: 13px;
    color: var(--text-dim);
}

.color-option.selected span {
    color: var(--starlight);
}

/* ========================================
   Season Options
   ======================================== */

.season-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
}

.season-option {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    color: var(--starlight);
    font-family: inherit;
}

.season-option:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-4px);
}

.season-option.selected {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
}

.season-icon {
    font-size: 40px;
    margin-bottom: 4px;
}

.season-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 500;
}

.season-desc {
    font-size: 12px;
    color: var(--text-dim);
}

/* ========================================
   Numerology Screen
   ======================================== */

.numerology-screen {
    padding-top: 60px;
}

.glow-title {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3)); }
    50% { filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6)); }
}

.numerology-card {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 24px;
    padding: 24px 20px;
    width: 100%;
    margin-bottom: 24px;
}

.numerology-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.num-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: scale(0.8);
    animation: numReveal 0.5s ease forwards;
    animation-delay: calc(var(--delay, 0) * 0.15s);
}

.num-item[data-delay="0"] { --delay: 0; }
.num-item[data-delay="1"] { --delay: 1; }
.num-item[data-delay="2"] { --delay: 2; }
.num-item[data-delay="3"] { --delay: 3; }
.num-item[data-delay="4"] { --delay: 4; }
.num-item[data-delay="5"] { --delay: 5; }

@keyframes numReveal {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.num-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    font-weight: 600;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.num-label {
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.4;
}

.analysis-message {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    margin-bottom: 24px;
}

.sparkle-icon {
    font-size: 28px;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(10deg); }
}

.analysis-message p {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.6;
}

.analysis-message strong {
    color: var(--gold-light);
}

/* ========================================
   Accuracy Screen - Advanced Analysis
   ======================================== */

.accuracy-screen {
    padding-top: 40px;
    overflow: visible;
}

.analysis-phase {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: phaseIn 0.6s ease;
    overflow: visible;
}

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

/* ==========================================
   Phase 1: Cosmos Scanner - New Design
   ========================================== */

.cosmos-scanner {
    width: 180px;
    height: 180px;
    position: relative;
    margin-bottom: 24px;
}

/* Orbits */
.orbit {
    position: absolute;
    border: 1px dashed rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    animation: orbitRotate linear infinite;
}

.orbit-1 {
    inset: 10px;
    animation-duration: 8s;
}

.orbit-2 {
    inset: -5px;
    animation-duration: 12s;
    animation-direction: reverse;
}

.orbit-3 {
    inset: -20px;
    animation-duration: 16s;
}

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

.orbit-planet {
    position: absolute;
    font-size: 16px;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    filter: drop-shadow(0 0 5px var(--gold));
}

/* Scanner Core */
.scanner-core {
    position: absolute;
    inset: 35px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, rgba(10, 14, 26, 0.9) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gold);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3), inset 0 0 20px rgba(212, 175, 55, 0.1);
}

.core-pulse {
    position: absolute;
    inset: -10px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    animation: corePulse 2s ease-out infinite;
}

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

.user-zodiac {
    font-size: 42px;
    color: var(--gold);
    animation: zodiacGlow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 15px var(--gold));
}

@keyframes zodiacGlow {
    0%, 100% { filter: drop-shadow(0 0 10px var(--gold)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 25px var(--gold)); transform: scale(1.1); }
}

/* Scan Beam */
.scan-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    transform-origin: left center;
    animation: beamRotate 3s linear infinite;
}

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

.analysis-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    color: var(--gold-light);
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

/* Live Analysis Items */
.live-analysis {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analysis-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 14px;
    padding: 12px 14px;
    opacity: 0;
    transform: translateY(10px);
    animation: itemAppear 0.5s ease forwards;
}

.analysis-item:nth-child(1) { animation-delay: 0.2s; }
.analysis-item:nth-child(2) { animation-delay: 0.5s; }
.analysis-item:nth-child(3) { animation-delay: 0.8s; }
.analysis-item:nth-child(4) { animation-delay: 1.1s; }

@keyframes itemAppear {
    to { opacity: 1; transform: translateY(0); }
}

.item-icon {
    font-size: 22px;
    width: 36px;
    text-align: center;
}

.item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-value {
    font-size: 14px;
    color: var(--starlight);
    font-weight: 500;
}

.item-status {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.item-status.loading {
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-top-color: var(--gold);
    animation: statusSpin 1s linear infinite;
}

.item-status.done {
    background: rgba(76, 175, 80, 0.2);
    border: none;
}

.item-status.done::after {
    content: '✓';
    color: #4CAF50;
}

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

/* Phase 2: Calculations */
.calc-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    color: var(--gold-light);
    margin-bottom: 24px;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.calculations-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px;
    padding: 16px 18px;
    opacity: 0;
    transform: translateX(-20px);
    animation: calcSlideIn 0.4s ease forwards;
    backdrop-filter: blur(5px);
}

.calc-item[data-delay="0"] { animation-delay: 0s; }
.calc-item[data-delay="1"] { animation-delay: 0.3s; }
.calc-item[data-delay="2"] { animation-delay: 0.6s; }
.calc-item[data-delay="3"] { animation-delay: 0.9s; }
.calc-item[data-delay="4"] { animation-delay: 1.2s; }

@keyframes calcSlideIn {
    to { opacity: 1; transform: translateX(0); }
}

.calc-icon {
    font-size: 22px;
    width: 36px;
    text-align: center;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.4));
}

.calc-label {
    flex: 1;
    font-size: 15px;
    color: var(--starlight);
    font-weight: 500;
}

.calc-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--gold);
    min-width: 90px;
    text-align: right;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.calc-status {
    font-size: 14px;
    color: #4CAF50;
    opacity: 0;
    animation: checkAppear 0.3s ease forwards;
}

.calc-item[data-delay="0"] .calc-status { animation-delay: 0.5s; }
.calc-item[data-delay="1"] .calc-status { animation-delay: 0.8s; }
.calc-item[data-delay="2"] .calc-status { animation-delay: 1.1s; }
.calc-item[data-delay="3"] .calc-status { animation-delay: 1.4s; }
.calc-item[data-delay="4"] .calc-status { animation-delay: 1.7s; }

@keyframes checkAppear {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

/* Phase 3: Preview Cards */
.preview-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--gold-light);
    margin-bottom: 20px;
}

.preview-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.preview-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: previewSlideUp 0.5s ease forwards;
}

.preview-card[data-delay="0"] { animation-delay: 0s; }
.preview-card[data-delay="1"] { animation-delay: 0.2s; }
.preview-card[data-delay="2"] { animation-delay: 0.4s; }

@keyframes previewSlideUp {
    to { opacity: 1; transform: translateY(0); }
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.preview-icon {
    font-size: 20px;
}

.preview-category {
    font-size: 14px;
    font-weight: 600;
    color: var(--starlight);
}

.preview-content {
    position: relative;
}

.preview-content p {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.5;
}

.preview-content.blurred p {
    filter: blur(6px);
    user-select: none;
}

.preview-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    opacity: 0.8;
}

/* Insight Box */
.insight-box {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 16px;
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.insight-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 50%);
    animation: insightRotate 5s linear infinite;
}

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

.insight-text {
    position: relative;
    font-size: 15px;
    color: var(--starlight);
    display: flex;
    align-items: center;
    gap: 10px;
}

.insight-icon {
    font-size: 20px;
    animation: sparkle 1.5s ease-in-out infinite;
}

.insight-text strong {
    color: var(--gold);
    font-size: 20px;
}

/* Phase 3.5: Rare Discoveries */
.rare-discovery-header {
    text-align: center;
    margin-bottom: 24px;
}

.rare-icon-container {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
}

.rare-icon-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: rareGlow 1.5s ease-in-out infinite;
}

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

.rare-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    animation: rarePulse 0.8s ease-in-out infinite;
}

@keyframes rarePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.rare-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    animation: titleShine 2s ease-in-out infinite;
}

@keyframes titleShine {
    0%, 100% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
    50% { text-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4); }
}

.rare-findings {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.rare-finding {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%);
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 16px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-30px) scale(0.95);
    animation: findingSlideIn 0.6s ease forwards;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.2),
        inset 0 0 30px rgba(255, 215, 0, 0.05);
}

.rare-finding[data-delay="0"] { animation-delay: 0s; }
.rare-finding[data-delay="1"] { animation-delay: 0.5s; }
.rare-finding[data-delay="2"] { animation-delay: 1s; }

@keyframes findingSlideIn {
    to { 
        opacity: 1; 
        transform: translateX(0) scale(1); 
    }
}

.rare-finding::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.25), transparent);
    animation: findingShine 3s infinite 1s;
}

@keyframes findingShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.rare-finding::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.6), transparent, rgba(255, 215, 0, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
}

.finding-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #FF6B6B, #EE5A5A);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(255, 107, 107, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.finding-badge.special {
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    box-shadow: 0 2px 10px rgba(155, 89, 182, 0.4);
}

.finding-badge.golden {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
}

.finding-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.finding-icon {
    font-size: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
    animation: iconGlow 2s ease-in-out infinite;
}

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

.finding-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.finding-title {
    font-size: 16px;
    font-weight: 600;
    color: #FFE082;
    text-shadow: 0 0 10px rgba(255, 224, 130, 0.3);
}

.finding-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.rare-warning {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 14px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    margin-top: 8px;
}

.warning-pulse {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
    animation: warningShine 3s ease-in-out infinite;
}

@keyframes warningShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.rare-warning p {
    position: relative;
    font-size: 14px;
    color: #FFE082;
    text-align: center;
    font-weight: 500;
}

/* ==========================================
   Phase 4: Magic Portal - New Design
   ========================================== */

.magic-portal {
    position: relative;
    width: 220px;
    height: 220px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Zodiac Ring */
.portal-zodiac-ring {
    position: absolute;
    inset: -10px;
    animation: zodiacSpin 60s linear infinite;
}

.portal-zodiac-ring span {
    position: absolute;
    font-size: 12px;
    color: var(--gold);
    opacity: 0.6;
    left: 50%;
    top: 50%;
    --angle: calc(var(--i) * 30deg);
    transform: rotate(var(--angle)) translateY(-120px) rotate(calc(-1 * var(--angle)));
}

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

/* Portal Waves */
.portal-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
}

.p-wave {
    position: absolute;
    inset: 0;
    border: 2px solid var(--gold);
    border-radius: 50%;
    opacity: 0;
    animation: waveExpand 3s ease-out infinite;
}

.p-wave:nth-child(2) { animation-delay: 1s; }
.p-wave:nth-child(3) { animation-delay: 2s; }

@keyframes waveExpand {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* SVG Progress */
.portal-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 170px;
    height: 170px;
}

.progress-track {
    fill: none;
    stroke: rgba(255, 100, 100, 0.25);
    stroke-width: 10;
}

.progress-fill {
    fill: none;
    stroke: url(#goldProgress);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 471;
    stroke-dashoffset: 471;
    transform: rotate(-90deg);
    transform-origin: center;
    filter: drop-shadow(0 0 8px var(--gold));
    transition: stroke-dashoffset 3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Portal Core */
.portal-core-new {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 14, 26, 0.95) 0%, rgba(10, 14, 26, 0.8) 100%);
}

.core-glow-effect {
    position: absolute;
    inset: -25px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    animation: coreBreath 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes coreBreath {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0.8; }
}

.percent-box {
    display: flex;
    align-items: baseline;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.big-percent {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 600;
    color: var(--gold);
    line-height: 1;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
}

.percent-sign {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--gold);
    margin-left: 2px;
}

/* Flying Particles */
.flying-particles {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.flying-particles i {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    left: var(--x);
    top: var(--y);
    animation: particleFly 4s ease-in-out infinite;
    animation-delay: var(--s);
    box-shadow: 0 0 6px var(--gold);
}

@keyframes particleFly {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-30px) scale(1.5); opacity: 1; }
}

/* Portal Title */
.portal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    color: var(--starlight);
    margin-bottom: 20px;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

/* Data Gap Box */
.data-gap-box {
    width: 100%;
    max-width: 280px;
    background: rgba(255, 100, 100, 0.08);
    border: 1px solid rgba(255, 100, 100, 0.25);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.gap-visual {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    margin-bottom: 10px;
}

.gap-filled {
    width: 55%;
    background: linear-gradient(90deg, var(--gold), #FFD700);
    border-radius: 4px;
}

.gap-empty {
    flex: 1;
    background: rgba(255, 100, 100, 0.4);
    animation: emptyPulse 2s ease-in-out infinite;
}

@keyframes emptyPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

.gap-text {
    font-size: 14px;
    color: #FF8A8A;
    text-align: center;
}

.gap-text span {
    font-weight: 700;
    font-size: 18px;
}

/* Hidden Treasures */
.hidden-treasures {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

.treasure {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--gold-light);
}

/* Mega Button */
.mega-btn {
    position: relative;
    background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
    border: none;
    border-radius: 30px;
    padding: 18px 40px;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4);
    animation: megaBtnPulse 2s ease-in-out infinite;
}

@keyframes megaBtnPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4); }
    50% { transform: scale(1.03); box-shadow: 0 12px 40px rgba(255, 215, 0, 0.6); }
}

.mega-btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: btnShine 3s infinite;
}

@keyframes btnShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.mega-btn-text {
    position: relative;
    z-index: 1;
    display: block;
}

.mega-btn-sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.75;
    margin-top: 3px;
}

.accuracy-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 600;
    color: var(--gold);
    line-height: 1;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.accuracy-percent {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--gold);
    margin-left: 2px;
}

.accuracy-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    margin-bottom: 16px;
    color: var(--starlight);
}

.accuracy-warning-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    animation: warningBlink 2s ease-in-out infinite;
}

@keyframes warningBlink {
    0%, 100% { border-color: rgba(255, 80, 80, 0.3); }
    50% { border-color: rgba(255, 80, 80, 0.6); }
}

.warning-icon {
    font-size: 18px;
}

.accuracy-warning-box p {
    font-size: 13px;
    color: #FF8A8A;
}

.accuracy-warning-box strong {
    color: #FF6B6B;
}

.accuracy-details {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.accuracy-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    border-radius: 12px;
}

.accuracy-stat.good {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.accuracy-stat.warning {
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.3);
}

.accuracy-stat.good .stat-value {
    color: var(--gold);
}

.accuracy-stat.warning .stat-value {
    color: #FF6B6B;
}

.stat-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 600;
}

.stat-label {
    font-size: 11px;
    color: var(--text-dim);
}

.accuracy-message {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 20px;
    text-align: center;
}

.accuracy-message p {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.5;
}

.accuracy-message strong {
    color: var(--gold-light);
}

.btn-urgent {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, #F39C12 100%);
    animation: urgentPulse 2s ease-in-out infinite;
}

@keyframes urgentPulse {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 35px rgba(212, 175, 55, 0.6);
        transform: scale(1.02);
    }
}

/* ========================================
   Utilities
   ======================================== */

.hidden {
    display: none !important;
}

/* Smooth scroll for iOS */
.screens-container {
    -webkit-overflow-scrolling: touch;
}

/* Fix for iOS input zoom */
@media screen and (max-width: 430px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* ========================================
   Additional Animations
   ======================================== */

@keyframes valuePop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Glowing text effect */
.glow-text {
    text-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold), 0 0 30px var(--gold);
}

/* Pulsing border effect */
@keyframes borderPulse {
    0%, 100% { border-color: var(--gold-dim); }
    50% { border-color: var(--gold); }
}

/* Floating particles in analysis */
.analysis-phase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(212, 175, 55, 0.3), transparent),
        radial-gradient(2px 2px at 80% 20%, rgba(212, 175, 55, 0.2), transparent),
        radial-gradient(1px 1px at 40% 70%, rgba(212, 175, 55, 0.4), transparent),
        radial-gradient(2px 2px at 70% 80%, rgba(212, 175, 55, 0.2), transparent);
    animation: floatParticles 10s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes floatParticles {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-100px) rotate(360deg); }
}

/* Enhanced preview card hover state */
.preview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    animation: cardShine 3s infinite;
}

@keyframes cardShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* Typing cursor effect for stream lines */
.stream-line::after {
    border-right: 2px solid var(--gold);
    animation: blink 0.7s step-end infinite;
}

@keyframes blink {
    0%, 100% { border-color: var(--gold); }
    50% { border-color: transparent; }
}

/* ==========================================
   Palm Scanning Screen
   ========================================== */

.palm-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 100%;
}

.palm-screen .palm-phase#palmPhaseCamera {
    width: 100%;
    padding: 0;
}

.palm-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    animation: fadeInUp 0.5s ease;
}

.palm-phase.hidden {
    display: none;
}

.palm-icon-large {
    font-size: 80px;
    margin-bottom: 20px;
    animation: palmFloat 3s ease-in-out infinite;
}

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

.palm-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    color: var(--starlight);
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.3;
}

.palm-subtitle {
    font-size: 14px;
    color: var(--text-dim);
    text-align: center;
    max-width: 280px;
    margin-bottom: 30px;
    line-height: 1.5;
}

.palm-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 280px;
    margin-bottom: 24px;
}

.palm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    pointer-events: auto;
}

.palm-btn.primary {
    background: linear-gradient(135deg, var(--gold) 0%, #B8962E 100%);
    color: #1a1a2e;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
}

.palm-btn.primary:active {
    transform: scale(0.98);
}

.palm-btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--starlight);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.palm-btn.small {
    padding: 12px 20px;
    font-size: 14px;
    margin-top: 16px;
}

.palm-btn-icon {
    font-size: 20px;
}

.palm-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-dim);
    background: rgba(212, 175, 55, 0.1);
    padding: 10px 16px;
    border-radius: 10px;
}

.hint-icon {
    font-size: 16px;
}

/* Camera Fullscreen */
.camera-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 100;
}

#palmVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#palmOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Back button */
.camera-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
}

/* Palm frame - PNG image */
.palm-frame {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 340px;
    height: auto;
    pointer-events: none;
    opacity: 0.9;
}

/* Bottom panel */
.camera-bottom-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    padding-bottom: 40px;
    background: linear-gradient(to top, rgba(30, 40, 50, 0.95) 0%, rgba(30, 40, 50, 0.8) 70%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.camera-instruction {
    font-size: 15px;
    color: #fff;
    text-align: center;
    margin: 0;
}

.camera-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
}

/* Flash button */
.flash-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
}

.flash-btn.active {
    background: rgba(255, 255, 255, 0.9);
    border-color: #fff;
}

.flash-btn.active svg path {
    stroke: #000;
}

/* Capture button */
.capture-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: transparent;
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
    pointer-events: auto;
    transition: transform 0.1s ease;
}

.capture-btn:active {
    transform: scale(0.95);
}

.capture-btn-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
}

/* Scanning state */
.scanning-container {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3/4;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.3);
}

.scanning-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#palmLinesCanvas,
#finalLinesCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    height: 100%;
    pointer-events: none;
}

.magic-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(212, 175, 55, 0.3) 20%,
        var(--gold) 50%,
        rgba(212, 175, 55, 0.3) 80%,
        transparent 100%
    );
    box-shadow: 
        0 0 20px var(--gold),
        0 0 40px rgba(212, 175, 55, 0.5),
        0 0 60px rgba(212, 175, 55, 0.3);
    opacity: 0;
    z-index: 5;
}

.magic-scan-line.scanning {
    animation: magicScan 2.5s ease-in-out forwards;
}

@keyframes magicScan {
    0% { top: 0; opacity: 1; }
    100% { top: 100%; opacity: 0.5; }
}

.scanning-text {
    margin-top: 20px;
    font-size: 16px;
    color: var(--gold-light);
    animation: textPulse 1.5s ease-in-out infinite;
}

/* Zodiac overlay in scanning */
.scanning-container .zodiac-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

.scanning-container .zodiac-overlay.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.scanning-container .zodiac-symbol-palm {
    font-size: 80px;
    color: var(--gold);
    text-shadow: 0 0 40px var(--gold), 0 0 80px rgba(212, 175, 55, 0.5);
    animation: zodiacGlow 2s ease-in-out infinite;
}

@keyframes zodiacGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}

/* Processing State */
.processing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.palm-result-img {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3/4;
    border-radius: 20px;
    overflow: visible;
    margin-bottom: 20px;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
}

.palm-result-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

#palmLinesCanvas, #finalLinesCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 20px;
}

.zodiac-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zodiac-overlay.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.zodiac-symbol-palm {
    font-size: 100px;
    color: var(--gold);
    text-shadow: 0 0 40px var(--gold), 0 0 80px rgba(212, 175, 55, 0.5);
    animation: zodiacGlow 2s ease-in-out infinite;
}

@keyframes zodiacGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.processing-text {
    font-size: 16px;
    color: var(--gold-light);
    animation: textPulse 1.5s ease-in-out infinite;
}

@keyframes textPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Error State */
.error-icon {
    font-size: 60px;
    margin-bottom: 16px;
}

.error-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    color: var(--starlight);
    margin-bottom: 12px;
}

.error-text {
    font-size: 14px;
    color: var(--text-dim);
    text-align: center;
    max-width: 280px;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Result State */
.result-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    color: var(--starlight);
    margin-bottom: 16px;
}

.palm-result-display {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 3/4;
    border-radius: 20px;
    overflow: visible;
    margin-bottom: 16px;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.25);
}

.palm-result-display img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 20px;
}

.zodiac-badge {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--gold) 0%, #B8962E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.5);
    animation: badgeBounce 2s ease-in-out infinite;
}

@keyframes badgeBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

.zodiac-symbol-final {
    font-size: 32px;
}

.palm-lines-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 280px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-dim);
}

.legend-color {
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

/* Camera scanning mode - new elements */
.captured-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.captured-photo.hidden {
    display: none;
}

.camera-overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.camera-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.3) 20%,
        rgba(212, 175, 55, 0.8) 50%,
        rgba(212, 175, 55, 0.3) 80%,
        transparent 100%
    );
    box-shadow: 
        0 0 15px var(--gold),
        0 0 30px rgba(212, 175, 55, 0.5);
    z-index: 15;
    top: 0;
}

.camera-scan-line.hidden {
    display: none;
}

.camera-scan-line.scanning {
    animation: cameraScan 2s ease-in-out forwards;
}

@keyframes cameraScan {
    0% { top: 0; opacity: 1; }
    50% { top: 100%; opacity: 1; }
    100% { top: 0; opacity: 0; }
}

.camera-continue-btn {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    min-width: 200px;
}

.camera-continue-btn.hidden {
    display: none;
}

/* Hide controls during scanning */
.camera-bottom-panel.hidden {
    display: none;
}

/* ========================================
   Email Screen (Step 14)
   ======================================== */

.email-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 100%;
}

.email-success-badge {
    position: relative;
    margin-bottom: 2rem;
}

.success-icon-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.2) 0%, rgba(39, 174, 96, 0.1) 100%);
    border: 3px solid #27AE60;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: successPulse 2s ease-in-out infinite;
}

.success-icon {
    font-size: 3rem;
    color: #27AE60;
    font-weight: bold;
}

.success-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.success-particles span {
    position: absolute;
    font-size: 1.2rem;
    animation: particleFloat 3s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.4s);
    opacity: 0;
}

.success-particles span:nth-child(1) { transform: translate(-60px, -40px); }
.success-particles span:nth-child(2) { transform: translate(50px, -50px); }
.success-particles span:nth-child(3) { transform: translate(-70px, 30px); }
.success-particles span:nth-child(4) { transform: translate(60px, 40px); }
.success-particles span:nth-child(5) { transform: translate(0, -60px); }

@keyframes successPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 20px 10px rgba(39, 174, 96, 0.1);
    }
}

@keyframes particleFloat {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
    50% { opacity: 1; transform: translateY(-20px) scale(1); }
}

.email-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--starlight);
    text-align: center;
    margin-bottom: 0.75rem;
}

.email-subtitle {
    font-size: 0.95rem;
    color: var(--text-dim);
    text-align: center;
    max-width: 320px;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.email-input-container {
    width: 100%;
    max-width: 340px;
    margin-bottom: 2rem;
}

.email-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 0 1rem;
    transition: all 0.3s ease;
}

.email-input-wrapper:focus-within {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
}

.email-input-wrapper.valid {
    border-color: #27AE60;
}

.email-input-wrapper.invalid {
    border-color: #E74C3C;
}

.email-icon {
    color: var(--text-dim);
    flex-shrink: 0;
    margin-right: 0.75rem;
    transition: color 0.3s ease;
}

.email-input-wrapper:focus-within .email-icon {
    color: var(--gold);
}

.email-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 1rem 0;
    font-size: 1rem;
    color: var(--starlight);
    outline: none;
    font-family: inherit;
}

.email-input::placeholder {
    color: var(--text-dim);
}

.email-hint {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-align: center;
    margin-top: 0.75rem;
    opacity: 0.7;
}

.email-btn {
    width: 100%;
    max-width: 340px;
}

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

/* ========================================
   Dashboard Screen (Step 15)
   ======================================== */

.dashboard-screen {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    min-height: 100%;
}

.dashboard-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.user-zodiac-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-dim) 0%, rgba(212, 175, 55, 0.1) 100%);
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-zodiac-symbol {
    font-size: 1.8rem;
}

.dashboard-greeting h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.greeting-subtitle {
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* Dashboard Header New */
.dashboard-header-new {
    margin-bottom: 1rem;
    text-align: center;
}

.user-mini-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.user-mini-profile h2 {
    font-size: 1.1rem;
    margin-bottom: 0.15rem;
}

/* Cosmic Progress (Gamification) */
.cosmic-progress {
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
}

.cosmic-level {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.level-badge {
    font-size: 0.8rem;
    color: var(--gold);
}

.cosmic-points {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.cosmic-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.cosmic-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Dashboard Navigation */
.dashboard-nav {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 0.25rem;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.nav-btn {
    flex: 1;
    padding: 0.7rem 0.3rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-dim);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.nav-btn.active {
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold);
}

.nav-btn.premium-nav {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 215, 0, 0.05));
}

.dashboard-tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 2rem;
    max-height: calc(100vh - 200px);
}

.dashboard-tab-content.active {
    display: block;
}

/* Fix dashboard scroll */
.screen[data-step="15"] {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.dashboard-screen {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
    height: auto !important;
    min-height: 100%;
    padding-bottom: 2rem;
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dashboard-screen * {
    pointer-events: auto;
}

.dashboard-screen > * {
    width: 100%;
    max-width: 420px;
}

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* Daily Insights */
.daily-insights {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.insight-card {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--gold);
}

.insight-card.morning { border-left-color: #FF9500; }
.insight-card.advice { border-left-color: #007AFF; }
.insight-card.energy { border-left-color: #34C759; }

.insight-icon {
    font-size: 1.5rem;
}

.insight-content {
    flex: 1;
}

.insight-content h4 {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    color: var(--starlight);
}

.insight-content p {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.4;
}

.energy-meter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
}

.energy-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: #34C759;
}

.energy-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.energy-fill {
    height: 100%;
    background: linear-gradient(90deg, #34C759, #30D158);
    border-radius: 3px;
}

/* Compatibility Widget */
.compatibility-widget {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.compatibility-widget h4 {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.compat-input-row {
    display: flex;
    gap: 0.5rem;
}

.compat-input {
    flex: 1;
    padding: 0.7rem 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--starlight);
    font-size: 0.9rem;
}

.compat-btn {
    padding: 0.7rem 1rem;
    background: var(--gold);
    border: none;
    border-radius: 8px;
    color: var(--deep-space);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.compat-result {
    margin-top: 1rem;
    text-align: center;
}

.compat-percent {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.compat-text {
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* Rituals Section */
.rituals-section {
    margin-bottom: 1rem;
}

.rituals-section h4 {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.rituals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.ritual-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ritual-card:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
}

.ritual-card.completed {
    background: rgba(52, 199, 89, 0.1);
    border-color: rgba(52, 199, 89, 0.3);
}

.ritual-card.completed::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 5px;
    color: #34C759;
}

.ritual-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.3rem;
}

.ritual-name {
    font-size: 0.8rem;
    font-weight: 500;
    display: block;
    color: var(--starlight);
}

.ritual-desc {
    font-size: 0.7rem;
    color: var(--text-dim);
    display: block;
}

/* Zodiac Grid */
.zodiac-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    max-width: 400px;
    margin: 0 auto;
}

.zodiac-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.zodiac-card:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold);
    transform: translateY(-2px);
}

.zodiac-card-symbol {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.3rem;
}

.zodiac-card-name {
    font-size: 0.75rem;
    color: var(--starlight);
}

/* Zodiac Detail */
.zodiac-detail {
    animation: fadeIn 0.3s ease;
}

.zodiac-detail.hidden {
    display: none;
}

.back-btn {
    background: transparent;
    border: none;
    color: var(--gold);
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: 1rem;
    padding: 0;
}

.zodiac-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.zodiac-detail-symbol {
    font-size: 3rem;
}

.zodiac-detail-header h3 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.zodiac-detail-header p {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.zodiac-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.zodiac-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 1rem;
}

.zodiac-section h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--gold);
}

.zodiac-section p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-dim);
}

/* Tarot Types */
.tarot-types {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.tarot-type-btn {
    flex: 1;
    min-width: 70px;
    padding: 0.5rem 0.3rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.tarot-type-btn span {
    font-size: 1rem;
}

.tarot-type-btn:hover {
    border-color: var(--gold);
}

.tarot-type-btn.active {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

.tarot-limit {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-align: center;
    margin-top: 0.5rem;
}

/* Moon & Calendar */
.moon-today {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.moon-phase {
    font-size: 3rem;
}

.moon-info h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.moon-info p {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.moon-energy {
    font-size: 0.8rem;
    color: var(--accent);
    margin-top: 0.5rem;
    font-style: italic;
}

/* Daily Insight */
.daily-insight {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.insight-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.insight-icon {
    font-size: 1.5rem;
}

.insight-header h4 {
    font-size: 1rem;
    color: var(--gold);
    margin: 0;
}

.insight-focus {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.insight-weather {
    font-size: 0.9rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 1rem;
    font-style: italic;
}

.insight-advice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.75rem;
    border-radius: 10px;
}

.insight-advice span {
    font-size: 1.2rem;
}

.insight-advice p {
    font-size: 0.85rem;
    color: var(--text);
    margin: 0;
    line-height: 1.5;
}

/* Zodiac Tip & Lucky */
.zodiac-tip {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.tip-text {
    font-weight: 500;
    color: var(--gold) !important;
}

.zodiac-lucky {
    display: flex;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.zodiac-lucky span {
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* Astro Card Lite */
.astro-card-lite {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.astro-card-lite h4 {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.astro-positions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.astro-position {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.position-icon {
    font-size: 1.2rem;
}

.position-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.position-value {
    font-size: 0.85rem;
    color: var(--gold);
    font-weight: 500;
}

.premium-unlock-btn {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(255, 215, 0, 0.1));
    border: 1px solid var(--gold);
    border-radius: 8px;
    color: var(--gold);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.premium-unlock-btn:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(255, 215, 0, 0.2));
}

/* Calendar Events */
.calendar-events {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1rem;
}

.calendar-events h4 {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.event-item.good { border-left: 3px solid #34C759; }
.event-item.warning { border-left: 3px solid #FF9500; }
.event-item.neutral { border-left: 3px solid #8E8E93; }

.event-date {
    font-size: 0.75rem;
    color: var(--gold);
    min-width: 45px;
}

.event-text {
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* Premium Tab */
.premium-header {
    text-align: center;
    padding: 1.5rem 0;
}

.premium-crown {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
}

.premium-header h3 {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
}

.premium-header p {
    font-size: 0.9rem;
    color: var(--text-dim);
}

.premium-features-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.premium-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.premium-feature:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
}

.premium-feature.locked {
    opacity: 0.8;
}

.pf-icon {
    font-size: 1.5rem;
}

.pf-info {
    flex: 1;
}

.pf-info h4 {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.pf-info p {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.pf-lock {
    font-size: 1rem;
    opacity: 0.5;
}

.upgrade-premium-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border: none;
    border-radius: 12px;
    color: var(--deep-space);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.3s ease;
}

.upgrade-premium-btn:hover {
    transform: scale(1.02);
}

/* Prediction Card */
.prediction-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.prediction-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.prediction-icon {
    font-size: 2rem;
}

.prediction-header h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.prediction-focus {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.prediction-focus span {
    color: var(--gold);
}

.prediction-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--starlight);
    margin-bottom: 1.25rem;
}

.prediction-aspects {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aspect-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.aspect-icon {
    font-size: 1rem;
    width: 24px;
    text-align: center;
}

.aspect-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    width: 70px;
}

.aspect-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.aspect-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    border-radius: 3px;
    transition: width 1s ease;
}

/* Lucky Card */
.lucky-card {
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
}

.lucky-card h4 {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 0.75rem;
}

.lucky-numbers {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.lucky-numbers span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid var(--gold);
    border-radius: 50%;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold);
}

/* Tarot */
.tarot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
}

.tarot-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.tarot-subtitle {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 2rem;
}

.tarot-deck {
    width: 160px;
    height: 240px;
    perspective: 1000px;
    margin-bottom: 1.5rem;
    position: relative;
}

.tarot-card-back, .tarot-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    transition: all 0.8s ease;
    backface-visibility: hidden;
}

.tarot-card-back {
    background: linear-gradient(135deg, #1a1033 0%, #2d1b4e 100%);
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.card-pattern {
    font-size: 3rem;
    color: var(--gold);
    opacity: 0.5;
}

.tarot-card-front {
    background: linear-gradient(180deg, #0f0f23 0%, #1a1033 100%);
    border: 2px solid var(--gold);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.3);
}

.tarot-card-front.hidden {
    display: none;
}

.tarot-deck.flipped .tarot-card-back {
    transform: rotateY(180deg);
}

.tarot-deck.flipped .tarot-card-front {
    transform: rotateY(0);
    display: flex;
}

.card-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
    animation: cardGlow 2s ease-in-out infinite;
}

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

.card-content {
    position: relative;
    text-align: center;
    z-index: 1;
}

.card-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: var(--gold);
    display: block;
    margin-bottom: 0.5rem;
}

.card-symbol {
    font-size: 4rem;
    margin-bottom: 0.75rem;
}

.card-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: var(--starlight);
}

.tarot-meaning {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    max-width: 300px;
    text-align: center;
    margin-bottom: 1rem;
}

.tarot-meaning.hidden {
    display: none;
}

.tarot-meaning p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.tarot-draw-btn {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border: none;
    border-radius: 12px;
    color: var(--deep-space);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarot-draw-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
}

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

.tarot-note {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-top: 1rem;
}

.tarot-note.hidden {
    display: none;
}

/* Chat */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - 250px);
    max-width: 420px;
    margin: 0 auto;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
}

.advisor-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cosmic-purple), var(--mystic-blue));
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.advisor-info h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.advisor-status {
    font-size: 0.8rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27AE60;
}

.status-dot.connecting {
    background: #F39C12;
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-message {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    animation: messageAppear 0.3s ease;
}

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

.chat-message.user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--gold-dim), rgba(212, 175, 55, 0.2));
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--starlight);
}

.chat-message.advisor {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--starlight);
}

.chat-message.typing {
    color: var(--text-dim);
}

.typing-dots {
    display: inline-flex;
    gap: 4px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-dim);
    animation: typingDot 1.4s ease-in-out infinite;
}

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

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

.chat-input-container {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-input {
    flex: 1;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--starlight);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.chat-input:focus {
    border-color: var(--gold);
}

.chat-input::placeholder {
    color: var(--text-dim);
}

.chat-send-btn {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border: none;
    border-radius: 12px;
    color: var(--deep-space);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.chat-send-btn:hover {
    transform: scale(1.05);
}

.chat-send-btn:active {
    transform: scale(0.95);
}

/* ========================================
   Paywall Modal (Fullscreen)
   ======================================== */

.paywall-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        var(--deep-space) 0%, 
        #0a0f1a 50%,
        var(--cosmic-purple) 100%
    );
    z-index: 1000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.4s ease;
    overflow-y: auto;
}

.paywall-overlay.hidden {
    display: none;
}

.paywall-overlay.visible {
    opacity: 1;
}

.paywall-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    max-width: 430px;
    margin: 0 auto;
    width: 100%;
}

.paywall-header {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
}

.paywall-stars {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    opacity: 0.6;
}

.paywall-stars span {
    font-size: 0.9rem;
    color: var(--gold);
    animation: twinkle 2s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.paywall-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 1.5rem auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paywall-icon-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 70%);
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

.paywall-icon span {
    font-size: 3rem;
    position: relative;
    z-index: 1;
}

.paywall-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--starlight);
    margin-bottom: 0.5rem;
}

.paywall-subtitle {
    font-size: 0.9rem;
    color: var(--text-dim);
    max-width: 300px;
    margin: 0 auto;
    line-height: 1.5;
}

.paywall-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    color: var(--text-dim);
}

.feature-icon {
    font-size: 1.1rem;
}

/* Plan Cards */
.paywall-plans {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.plan-card {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.plan-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
}

.plan-card.selected {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.plan-badge {
    position: absolute;
    top: -10px;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-badge.gold {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    color: var(--deep-space);
}

.plan-name {
    font-weight: 600;
    color: var(--starlight);
    flex: 1;
    font-size: 0.95rem;
}

.plan-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 1rem;
}

.price-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gold);
}

.price-period {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.plan-desc {
    display: none;
}

.plan-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.plan-check svg {
    color: transparent;
    transition: color 0.3s ease;
}

.plan-card.selected .plan-check {
    border-color: var(--gold);
    background: var(--gold);
}

.plan-card.selected .plan-check svg {
    color: var(--deep-space);
}

/* Paywall Button */
.paywall-btn {
    position: relative;
    width: 100%;
    padding: 1.1rem 2rem;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, #c9a227 100%);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 1rem;
}

.paywall-btn .btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.paywall-btn .btn-text {
    position: relative;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--deep-space);
    z-index: 1;
}

.paywall-terms {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-dim);
    opacity: 0.7;
}

/* ========================================
   Payment Processing Modal
   ======================================== */

.payment-processing {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 11, 20, 0.95);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-processing.hidden {
    display: none;
}

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

.processing-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--gold);
}

.spinner-ring:nth-child(1) {
    animation: spin 1s linear infinite;
}

.spinner-ring:nth-child(2) {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    border-top-color: rgba(212, 175, 55, 0.6);
    animation: spin 1.5s linear infinite reverse;
}

.spinner-ring:nth-child(3) {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    border-top-color: rgba(212, 175, 55, 0.3);
    animation: spin 2s linear infinite;
}

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

.processing-text {
    color: var(--text-dim);
    font-size: 1rem;
}

/* ========================================
   Payment Success Modal
   ======================================== */

.payment-success {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 11, 20, 0.95);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.payment-success.hidden {
    display: none;
}

.payment-success.visible {
    opacity: 1;
}

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

.success-checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    color: #27AE60;
}

.success-checkmark svg {
    width: 100%;
    height: 100%;
}

.success-checkmark circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: strokeCircle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-checkmark path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards;
}

@keyframes strokeCircle {
    100% { stroke-dashoffset: 0; }
}

@keyframes strokeCheck {
    100% { stroke-dashoffset: 0; }
}

.success-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.75rem;
    color: var(--starlight);
    margin-bottom: 0.5rem;
}

.success-content p {
    color: var(--text-dim);
}

/* ========================================
   Mobile Full-Screen Adaptation
   ======================================== */

/* Remove max-width restriction for full screen */
.app {
    max-width: 100% !important;
    width: 100% !important;
}

/* Base mobile styles */
@media screen and (max-width: 768px) {
    .app {
        max-width: 100% !important;
    }
    
    .screen {
        padding: 60px 16px 24px !important;
    }
    
    .screen-content {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 4px;
    }
    
    /* Dashboard specific */
    .screen[data-step="15"] {
        padding: 16px !important;
        padding-top: 24px !important;
        display: flex;
        justify-content: center;
    }
    
    .dashboard-screen {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .dashboard-screen > * {
        width: 100%;
        max-width: 100%;
    }
    
    /* Header */
    .dashboard-header-new {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .user-mini-profile {
        gap: 0.75rem;
    }
    
    .profile-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .profile-info h2 {
        font-size: 1.25rem;
    }
    
    .profile-meta {
        font-size: 0.9rem;
    }
    
    /* Cosmic Progress */
    .cosmic-progress {
        padding: 0.6rem 0.8rem;
        margin-top: 0.75rem;
    }
    
    .cosmic-level {
        font-size: 0.75rem;
    }
    
    /* Navigation */
    .dashboard-nav {
        padding: 0.2rem;
        margin: 0 -4px 0.75rem;
        border-radius: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-btn {
        padding: 0.75rem 0.4rem;
        font-size: 1.3rem;
        min-width: 52px;
    }
    
    /* Tab Content */
    .dashboard-tab-content {
        max-height: none !important;
        padding-bottom: 100px;
    }
    
    /* Daily Insights */
    .daily-insights {
        gap: 0.5rem;
    }
    
    .insight-card {
        padding: 0.75rem;
        gap: 0.6rem;
    }
    
    .insight-icon {
        font-size: 1.5rem;
    }
    
    .insight-content h4 {
        font-size: 0.95rem;
    }
    
    .insight-content p {
        font-size: 0.85rem;
    }
    
    /* Predictions Card */
    .predictions-card {
        padding: 1.1rem;
    }
    
    .predictions-card h3 {
        font-size: 1.2rem;
    }
    
    .predictions-card p {
        font-size: 0.95rem;
    }
    
    .prediction-focus {
        font-size: 0.95rem;
    }
    
    /* Compatibility */
    .compatibility-widget {
        padding: 1rem;
    }
    
    .compatibility-widget h4 {
        font-size: 1rem;
    }
    
    .compat-input-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .compat-input {
        width: 100%;
        padding: 0.65rem 0.8rem;
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    .compat-btn {
        width: 100%;
        padding: 0.65rem;
    }
    
    .compat-result {
        padding: 0.85rem;
        margin-top: 0.75rem;
    }
    
    .compat-percent {
        font-size: 2rem;
    }
    
    /* Rituals */
    .rituals-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .ritual-card {
        padding: 0.75rem 0.5rem;
    }
    
    .ritual-icon {
        font-size: 1.6rem;
    }
    
    .ritual-name {
        font-size: 0.8rem;
    }
    
    /* Lucky Numbers */
    .lucky-numbers {
        padding: 0.85rem;
    }
    
    .numbers-grid {
        gap: 0.4rem;
    }
    
    .number-ball {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    
    /* Zodiac Grid */
    .zodiac-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .zodiac-card {
        padding: 0.75rem 0.4rem;
    }
    
    .zodiac-card-symbol {
        font-size: 2rem;
    }
    
    .zodiac-card-name {
        font-size: 0.85rem;
    }
    
    /* Zodiac Detail */
    .zodiac-detail {
        padding: 1rem;
    }
    
    .zodiac-detail-header h2 {
        font-size: 1.6rem;
    }
    
    .zodiac-sections {
        gap: 0.75rem;
    }
    
    .zodiac-section {
        padding: 1rem;
    }
    
    .zodiac-section h4 {
        font-size: 1rem;
    }
    
    .zodiac-section p {
        font-size: 0.9rem;
    }
    
    .back-btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.85rem;
    }
    
    /* Tarot */
    .tarot-types {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    
    .tarot-type-btn {
        padding: 0.6rem 0.85rem;
        font-size: 0.9rem;
        flex: 1 1 calc(50% - 0.2rem);
    }
    
    .tarot-card-container {
        margin: 1rem auto;
    }
    
    .tarot-card {
        width: 160px;
        height: 240px;
    }
    
    .tarot-meaning h3 {
        font-size: 1.2rem;
    }
    
    .tarot-meaning p {
        font-size: 0.95rem;
    }
    
    .tarot-limit {
        font-size: 0.85rem;
        padding: 0.6rem;
    }
    
    /* Calendar */
    .moon-today {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .moon-phase {
        font-size: 2.5rem;
    }
    
    .moon-info h4 {
        font-size: 1.1rem;
    }
    
    .moon-sign {
        font-size: 0.95rem;
    }
    
    .astro-card-lite {
        padding: 1rem;
    }
    
    .astro-positions {
        flex-direction: column;
        gap: 0.6rem;
    }
    
    .astro-position {
        padding: 0.6rem;
    }
    
    .position-symbol {
        font-size: 1.2rem;
    }
    
    .position-label {
        font-size: 0.8rem;
    }
    
    .position-value {
        font-size: 0.9rem;
    }
    
    .calendar-events {
        padding: 1rem;
    }
    
    .event-item {
        padding: 0.7rem 0.85rem;
        font-size: 0.9rem;
    }
    
    /* Chat */
    .chat-container {
        height: auto;
        max-height: 50vh;
        min-height: 250px;
    }
    
    .chat-messages {
        padding: 0.75rem;
        flex: 1;
        min-height: 150px;
        max-height: 35vh;
    }
    
    .chat-bubble {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        max-width: 85%;
    }
    
    .chat-input-area {
        padding: 0.6rem;
        position: sticky;
        bottom: 0;
        background: var(--deep-space);
    }
    
    .chat-input {
        padding: 0.6rem 0.85rem;
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    .chat-send {
        padding: 0.6rem 0.85rem;
        font-size: 0.85rem;
    }
    
    /* Premium */
    .premium-header {
        padding: 1.25rem;
    }
    
    .premium-icon {
        font-size: 2.5rem;
    }
    
    .premium-header h2 {
        font-size: 1.3rem;
    }
    
    .premium-features-list {
        gap: 0.5rem;
    }
    
    .premium-feature {
        padding: 0.85rem;
    }
    
    .feature-icon {
        font-size: 1.3rem;
    }
    
    .feature-name {
        font-size: 0.95rem;
    }
    
    .feature-desc {
        font-size: 0.85rem;
    }
    
    .upgrade-premium-btn {
        padding: 1rem;
        font-size: 1rem;
    }
    
    /* Paywall */
    .paywall-content {
        padding: 1.5rem 1rem;
        margin: 1rem;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .paywall-title {
        font-size: 1.5rem;
    }
    
    .paywall-subtitle {
        font-size: 0.9rem;
    }
    
    .pricing-cards {
        gap: 0.75rem;
    }
    
    .pricing-card {
        padding: 1rem;
    }
    
    .pricing-card.featured {
        padding: 1.25rem 1rem;
    }
    
    .plan-name {
        font-size: 1rem;
    }
    
    .plan-price {
        font-size: 1.75rem;
    }
    
    .plan-period {
        font-size: 0.75rem;
    }
    
    .plan-features {
        font-size: 0.8rem;
    }
    
    /* Section titles */
    .section-title {
        font-size: 1.25rem;
        margin-bottom: 0.85rem;
    }
    
    /* Onboarding screens */
    .screen-title {
        font-size: 1.5rem;
    }
    
    .screen-subtitle {
        font-size: 0.9rem;
    }
    
    /* Gender selection */
    .gender-options {
        gap: 0.75rem;
    }
    
    .gender-btn {
        padding: 1rem 0.5rem;
        min-width: 90px;
    }
    
    .gender-icon {
        font-size: 1.75rem;
    }
    
    .gender-label {
        font-size: 0.8rem;
    }
    
    /* Date picker */
    .date-picker {
        gap: 0.5rem;
    }
    
    .date-select {
        padding: 0.75rem 0.5rem;
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    /* Goal selection */
    .goal-options {
        gap: 0.5rem;
    }
    
    .goal-btn {
        padding: 0.85rem 0.75rem;
    }
    
    .goal-icon {
        font-size: 1.3rem;
    }
    
    .goal-label {
        font-size: 0.85rem;
    }
    
    /* Continue button */
    .btn-continue {
        padding: 0.9rem 1.5rem;
        font-size: 1rem;
    }
    
    /* Progress bar */
    .progress-container {
        padding: 0.75rem 1rem;
    }
    
    .progress-text {
        font-size: 0.75rem;
    }
}

/* Extra small devices */
@media screen and (max-width: 375px) {
    .screen {
        padding: 50px 12px 20px !important;
    }
    
    .screen[data-step="15"] {
        padding: 12px !important;
        padding-top: 20px !important;
    }
    
    .profile-avatar {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }
    
    .profile-info h2 {
        font-size: 1rem;
    }
    
    .nav-btn {
        font-size: 0.9rem;
        padding: 0.5rem 0.2rem;
    }
    
    .zodiac-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }
    
    .zodiac-card {
        padding: 0.6rem 0.3rem;
    }
    
    .zodiac-card-symbol {
        font-size: 1.5rem;
    }
    
    .tarot-card {
        width: 140px;
        height: 210px;
    }
    
    .rituals-grid {
        gap: 0.4rem;
    }
    
    .ritual-card {
        padding: 0.6rem 0.4rem;
    }
    
    .paywall-content {
        padding: 1.25rem 0.85rem;
        margin: 0.75rem;
    }
    
    .paywall-title {
        font-size: 1.3rem;
    }
    
    .plan-price {
        font-size: 1.5rem;
    }
}

/* Landscape orientation */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .screen {
        padding: 40px 16px 16px !important;
    }
    
    .paywall-content {
        max-height: 95vh;
        padding: 1rem;
    }
    
    .pricing-cards {
        flex-direction: row;
        overflow-x: auto;
    }
    
    .pricing-card {
        min-width: 200px;
        flex-shrink: 0;
    }
    
    .chat-container {
        height: calc(100vh - 200px);
        min-height: 200px;
    }
}

/* Safe area for notched phones */
@supports (padding-top: env(safe-area-inset-top)) {
    .screen {
        padding-top: calc(60px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    }
    
    .screen[data-step="15"] {
        padding-top: calc(16px + env(safe-area-inset-top)) !important;
    }
    
    .paywall-overlay {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .dashboard-tab-content {
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
}

/* Prevent horizontal scroll */
html, body, .app {
    overflow-x: hidden !important;
}

/* ========================================
   Tutorial / Onboarding Overlay
   ======================================== */

.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
}

.tutorial-overlay.hidden {
    display: none;
}

.tutorial-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
}

.tutorial-step {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    animation: tutorialSlideUp 0.4s ease;
}

.tutorial-step.hidden {
    display: none;
}

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

.tutorial-card {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.98), rgba(20, 20, 35, 0.98));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    padding: 1.75rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(212, 175, 55, 0.1);
}

.tutorial-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.tutorial-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 0.75rem;
}

.tutorial-card p {
    font-size: 1rem;
    color: var(--starlight);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.tutorial-card strong {
    color: var(--gold);
}

.tutorial-list {
    list-style: none;
    text-align: left;
    margin: 1rem 0;
    padding: 0;
}

.tutorial-list li {
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: var(--starlight);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tutorial-list li:last-child {
    border-bottom: none;
}

.tutorial-progress {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
}

.tutorial-btn {
    width: 100%;
    padding: 1rem 2rem;
    background: var(--gradient-gold);
    border: none;
    border-radius: 12px;
    color: var(--deep-space);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tutorial-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

.tutorial-btn.tutorial-finish {
    background: linear-gradient(135deg, #27AE60, #2ECC71);
}

/* Tutorial Highlight */
.tutorial-highlight {
    position: fixed;
    z-index: 1999;
    border: 3px solid var(--gold);
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85), 0 0 30px rgba(212, 175, 55, 0.5);
    pointer-events: none;
    transition: all 0.4s ease;
    animation: highlightPulse 2s ease-in-out infinite;
}

.tutorial-highlight.hidden {
    display: none;
}

@keyframes highlightPulse {
    0%, 100% {
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85), 0 0 20px rgba(212, 175, 55, 0.4);
    }
    50% {
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85), 0 0 40px rgba(212, 175, 55, 0.7);
    }
}

/* Tarot Time Lock Styles */
.tarot-time-lock {
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    margin: 1rem 0;
}

.tarot-time-lock .lock-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.tarot-time-lock h4 {
    font-size: 1.1rem;
    color: var(--starlight);
    margin-bottom: 0.5rem;
}

.tarot-time-lock .time-info {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
}

.tarot-time-lock .countdown {
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: 600;
}

.tarot-slots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.tarot-slot {
    flex: 1;
    max-width: 120px;
    padding: 0.75rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-align: center;
}

.tarot-slot.available {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
}

.tarot-slot.used {
    opacity: 0.5;
}

.tarot-slot.locked {
    opacity: 0.4;
}

.tarot-slot-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.tarot-slot-time {
    font-size: 0.7rem;
    color: var(--text-dim);
}

.tarot-slot-status {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    color: var(--gold);
}

/* Tarot Card Flip Animation */
.tarot-card {
    width: 180px;
    height: 280px;
    perspective: 1000px;
    margin: 1.5rem auto;
    cursor: pointer;
}

.tarot-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
}

.tarot-card.flipping .tarot-card-inner {
    animation: cardFlip 1s ease;
}

@keyframes cardFlip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(180deg); }
}

.tarot-card-back,
.tarot-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tarot-card-back {
    background: linear-gradient(145deg, #1a1033, #0d0820);
    border: 2px solid var(--gold);
}

.tarot-card-back .card-pattern {
    font-size: 3rem;
    color: var(--gold);
    opacity: 0.6;
}

.tarot-card-front {
    background: linear-gradient(145deg, #2a1a43, #1a0d30);
    border: 2px solid var(--gold);
    transform: rotateY(180deg);
}

.tarot-card-front .card-content {
    text-align: center;
    padding: 1rem;
}

.tarot-card-front .card-number {
    font-size: 1rem;
    color: var(--gold);
    display: block;
    margin-bottom: 0.5rem;
}

.tarot-card-front .card-symbol {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.tarot-card-front .card-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: var(--starlight);
}

.tarot-card-front .card-glow {
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: linear-gradient(45deg, var(--gold), transparent, var(--gold));
    opacity: 0.3;
    animation: glowRotate 3s linear infinite;
}

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

.tarot-meaning {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-top: 1rem;
}

.tarot-meaning h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.tarot-meaning p {
    font-size: 0.95rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.tarot-draw-btn {
    width: 100%;
    max-width: 300px;
    margin: 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--gradient-gold);
    border: none;
    border-radius: 12px;
    color: var(--deep-space);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tarot-draw-btn:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

.tarot-draw-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(212, 175, 55, 0.3);
    color: var(--text-dim);
}

.tarot-limit {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-top: 0.5rem;
}

/* ==========================================
   TAROT 7-SECOND ANIMATION
   ========================================== */

/* Фаза 1: Подготовка - свечение */
.tarot-card.tarot-preparing {
    animation: tarotPrepare 1s ease-out forwards;
}

@keyframes tarotPrepare {
    0% { 
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
        transform: scale(1);
    }
    100% { 
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.6), 0 0 80px rgba(138, 43, 226, 0.4);
        transform: scale(1.02);
    }
}

/* Фаза 2: Лёгкая тряска */
.tarot-card.tarot-shaking {
    animation: tarotShake 0.15s ease-in-out infinite;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.6), 0 0 80px rgba(138, 43, 226, 0.4);
}

@keyframes tarotShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-3px) rotate(-0.5deg); }
    75% { transform: translateX(3px) rotate(0.5deg); }
}

/* Фаза 3: Интенсивная тряска */
.tarot-card.tarot-intense-shake {
    animation: tarotIntenseShake 0.1s ease-in-out infinite;
    box-shadow: 0 0 60px rgba(212, 175, 55, 0.8), 0 0 100px rgba(138, 43, 226, 0.6), 0 0 150px rgba(255, 0, 128, 0.3);
}

@keyframes tarotIntenseShake {
    0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
    20% { transform: translateX(-5px) translateY(-2px) rotate(-1deg); }
    40% { transform: translateX(5px) translateY(2px) rotate(1deg); }
    60% { transform: translateX(-4px) translateY(-3px) rotate(-0.5deg); }
    80% { transform: translateX(4px) translateY(1px) rotate(0.5deg); }
}

/* Фаза 4: Левитация */
.tarot-card.tarot-levitate {
    animation: tarotLevitate 2s ease-in-out forwards;
    box-shadow: 0 0 80px rgba(212, 175, 55, 1), 0 0 120px rgba(138, 43, 226, 0.8), 0 0 180px rgba(255, 215, 0, 0.5);
}

@keyframes tarotLevitate {
    0% { 
        transform: translateY(0) scale(1);
    }
    50% { 
        transform: translateY(-30px) scale(1.1);
    }
    100% { 
        transform: translateY(-15px) scale(1.05);
    }
}

/* Финал: Карта открыта */
.tarot-card.tarot-revealed {
    animation: tarotReveal 0.5s ease-out forwards;
    box-shadow: 0 0 100px rgba(255, 215, 0, 1), 0 0 150px rgba(138, 43, 226, 0.8);
}

@keyframes tarotReveal {
    0% { 
        transform: translateY(-15px) scale(1.05);
        filter: brightness(2);
    }
    100% { 
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}

/* Мистический фон секции */
.tarot-section.tarot-mystical-bg {
    animation: mysticalBg 7s ease-in-out;
}

@keyframes mysticalBg {
    0%, 100% { 
        background: rgba(26, 26, 46, 0.95);
    }
    30% {
        background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.2) 0%, rgba(26, 26, 46, 0.95) 70%);
    }
    60% {
        background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.2) 0%, rgba(26, 26, 46, 0.95) 70%);
    }
}

/* Анимация появления значения */
.tarot-meaning.tarot-meaning-reveal {
    animation: meaningReveal 0.8s ease-out forwards;
}

@keyframes meaningReveal {
    0% { 
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    100% { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================
   PREMIUM SECTION ANIMATIONS
   ========================================== */

/* Подсветка и тряска премиум блоков */
.premium-feature.locked.premium-shake {
    animation: premiumGlow 3s ease-in-out infinite, premiumShake 4s ease-in-out infinite;
    cursor: pointer;
}

@keyframes premiumGlow {
    0%, 100% {
        box-shadow: 0 2px 15px rgba(212, 175, 55, 0.15);
        border-color: rgba(212, 175, 55, 0.3);
    }
    50% {
        box-shadow: 0 4px 25px rgba(212, 175, 55, 0.35), 0 0 40px rgba(138, 43, 226, 0.2);
        border-color: rgba(212, 175, 55, 0.6);
    }
}

@keyframes premiumShake {
    0%, 90%, 100% { 
        transform: translateX(0); 
    }
    92% { 
        transform: translateX(-2px) rotate(-0.3deg); 
    }
    94% { 
        transform: translateX(2px) rotate(0.3deg); 
    }
    96% { 
        transform: translateX(-2px) rotate(-0.3deg); 
    }
    98% { 
        transform: translateX(2px) rotate(0.3deg); 
    }
}

.premium-feature.locked.premium-shake:hover {
    animation: premiumHover 0.3s ease-out forwards;
    box-shadow: 0 6px 30px rgba(212, 175, 55, 0.5), 0 0 50px rgba(138, 43, 226, 0.3);
}

@keyframes premiumHover {
    0% { transform: scale(1); }
    100% { transform: scale(1.02); }
}

/* Замочек пульсирует */
.premium-feature.locked .pf-lock {
    animation: lockPulse 2s ease-in-out infinite;
}

@keyframes lockPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: scale(1.15);
        opacity: 1;
    }
}

/* ==========================================
   RITUAL COMPLETED STATE
   ========================================== */

.ritual-card.completed {
    opacity: 0.6;
    background: rgba(46, 204, 113, 0.15) !important;
    border-color: rgba(46, 204, 113, 0.5) !important;
    pointer-events: none;
}

.ritual-card.completed::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1rem;
    color: #2ecc71;
}

.ritual-card {
    position: relative;
}