/* Layout styles */
.hero-video {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
}

body.light .hero-video video { opacity: 0.00; }

.hero-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(18,65,112,0.55) 0%, rgba(38,102,127,0.8) 0%);
}

body.light .hero-overlay { background: radial-gradient(ellipse at center, rgba(101,207,186,0.60) 0%, rgba(101,207,186,0.40) 0%); }

.topbar { position: fixed; top: 16px; left: 8px; right: 8px; z-index: 10; display: flex; align-items: center; justify-content: space-between; }
.container {
    width: 100%;
    max-width: 1600px; /* Increased max-width for more horizontal space */
    padding: 40px; /* Added more padding for better spacing */
    text-align: center;
}

.chart-container {
    /* Default styles for desktop, overridden by media query for mobile */
    width: 1000px; /* Larger default width */
    height: 700px; /* Larger default height */
    margin: 100px auto; /* More vertical spacing above and below */
}

/* Remove extra spacing when exporting to PDF */
body.pdf-export .chart-container {
    margin-top: 0;
    margin-bottom: 0;
}

.screen {
    display: none;
    animation: fadeIn 0.5s ease-in;
}

.screen.active {
    display: block;
}

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

@media (max-width: 768px) {
    .container {
        padding: 100px 15px;
    }

    .register-container {
        padding: 25px 15px;
    }

    .topbar { top: 18px; }

    .progress-fill {
        padding-top: 100px!important;
    }
    
    .landing-screen h1 {
        font-size: 2rem;
    }
    
    .chart-container {
        width: 300px;
        height: 300px;
        margin: 16px auto; /* Tight margins on mobile */
    }
    
    .rating-container { grid-template-columns: 1fr; }
}