:root {

            --color-bg-primary: #0a0e1a;
            --color-bg-secondary: #141a2c;
            --color-bg-secondary-rgb: 20, 26, 44;
            --color-bg-input: #0a0e1a;
            --color-border: #2a334d;
            --color-border-rgb: 42, 51, 77;
            --color-accent: #00d4d4; 
            --color-accent-rgb: 0, 212, 212;
            --color-highlight: #ffc700; 
            --color-text-primary: #e8efff;
            --color-text-secondary: #7a85a3;
            --color-success: #28a745;
            --color-error: #f87171;
            --color-warning: #facc15;
        }

        html.light-mode {
            --color-bg-primary: #FFFFFF;
            --color-bg-secondary: #F3F4F6;
            --color-bg-secondary-rgb: 243, 244, 246;
            --color-bg-input: #FFFFFF;
            --color-border: #D1D5DB;
            --color-border-rgb: 209, 213, 219;
            --color-accent: #008B8B; 
            --color-accent-rgb: 0, 139, 139;
            --color-highlight: #EAB308;
            --color-text-primary: #1F2937;
            --color-text-secondary: #6B7280;
            --color-success: #16A34A;
            --color-error: #ef4444;
            --color-warning: #fbbf24;
        }

        html, body {
            height: 100%;
            overflow: hidden; 
        }
        body {
            display: flex;
            flex-direction: column;
            background-color: var(--color-bg-primary);
            color: var(--color-text-primary);
            font-family: 'Rajdhani', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
            background-image: radial-gradient(var(--color-border) 0.5px, transparent 0.5px);
            background-size: 20px 20px;
        }
        main {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        header {
            background-color: rgba(var(--color-bg-secondary-rgb), 0.8);
            transition: background-color 0.3s ease;
        }
        footer {
            flex-shrink: 0; 
        }
        
        .mfp-bg {
            background: rgba(10, 14, 26, 0.8);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .mfp-zoom-in .mfp-content {
            opacity: 0;
            transform: scale(0.95);
            transition: all 0.3s ease-in-out;
        }
        .mfp-zoom-in.mfp-ready .mfp-content {
            opacity: 1;
            transform: scale(1);
        }
        .mfp-zoom-in.mfp-removing .mfp-content {
            opacity: 0;
            transform: scale(0.95);
        }
        #modal-container {
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            transition: opacity 0.3s ease-in-out, max-width 0.3s ease, background 2s ease;
            overflow: hidden;
        }
        #modal-container.is-hiding {
            opacity: 0;
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.4); }
            50% { box-shadow: 0 0 30px rgba(var(--color-accent-rgb), 0.6); }
        }
        #hero-cta-btn {
             animation: pulse-glow 3s infinite ease-in-out;
        }
        
        .checklist-item {
            transition: color 0.4s ease-in-out;
            overflow: hidden;
            position: relative;
        }
        .checklist-item .checkmark {
            position: absolute;
            right: 0;
            opacity: 0;
            transform: scale(0.5);
            stroke-dasharray: 24;
            stroke-dashoffset: 24;
            transition: opacity 0.3s 0.3s ease-out, transform 0.3s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), stroke-dashoffset 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .checklist-item.completed { color: var(--color-success); }
        .checklist-item.completed .checkmark {
            opacity: 1;
            stroke-dashoffset: 0;
            transform: scale(1);
        }
        #generation-progress-bar-container {
            width: 100%;
            background-color: var(--color-bg-input);
            border-radius: 9999px;
            height: 6px;
            margin-bottom: 1.5rem;
            border: 1px solid var(--color-border);
            overflow: hidden;
        }
        #generation-progress-bar {
            width: 0%;
            height: 100%;
            background-color: var(--color-accent);
            border-radius: 9999px;
            transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .resource-card {
            background-color: var(--color-bg-input);
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .resource-card:hover {
            border-color: var(--color-accent);
            transform: translateY(-4px);
            box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.4);
        }
        .resource-card.selected {
             border-color: var(--color-accent);
             box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.6);
             transform: translateY(-4px) scale(1.03);
        }
        #username-input {
             transition: all 0.2s ease-in-out;
        }
        #username-input:focus {
            box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.5);
        }
		#captcha-target {
            margin-left: auto;
            margin-right: auto;
        }
        #proceed-btn {
            transition: transform 0.2s ease-out, opacity 0.2s ease-out, box-shadow 0.2s ease-out;
        }
        #proceed-btn:not(:disabled) {
            animation: pulse-glow 2s infinite ease-in-out;
        }
        #proceed-btn:not(:disabled):hover {
            transform: scale(1.03);
            box-shadow: 0 0 25px rgba(var(--color-accent-rgb), 0.6);
        }
        #countdown-timer.urgent {
            color: var(--color-error);
            animation: pulse-urgent 1s infinite;
        }
        @keyframes pulse-urgent {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }