/* --- THEME & COLOR VARIABLES (Patreon Themed - Light Mode) --- */
        :root {
            --color-bg-primary: #FFFFFF;
            --color-bg-secondary: #F3F4F6;
            --color-bg-secondary-rgb: 243, 244, 246;
            --color-bg-input: #E5E7EB;
            --color-border: #D1D5DB;
            --color-border-rgb: 209, 213, 219;
            --color-accent: #FF424D; /* Patreon Coral/Red */
            --color-accent-rgb: 255, 66, 77;
            --color-text-primary: #111827;
            --color-text-secondary: #4B5563;
            --color-success: #16a34a;
            --color-error: #ef4444;
            --color-warning: #facc15;
            --color-danger: #dc2626;
            --color-accent-start: #F96854; /* Patreon Gradient Start */
            --color-accent-end: #FF424D;   /* Patreon Gradient End */
        }

        /* --- BASE & LAYOUT STYLES --- */
        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: 'Poppins', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
            background: #FFFFFF radial-gradient(circle at 100% 100%, rgba(var(--color-accent-rgb), 0.05), transparent 30%),
                        radial-gradient(circle at 0% 0%, rgba(249, 104, 84, 0.05), transparent 30%);
        }
        main {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        header {
            background-color: rgba(255,255,255, 0.8);
            transition: background-color 0.3s ease;
        }
        
        /* --- MODAL STYLES --- */
        .mfp-bg {
            background: rgba(18, 18, 18, 0.8);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        #modal-container .modal-content-box {
             background-color: var(--color-bg-primary);
             color: var(--color-text-primary);
        }
        .mfp-zoom-in .mfp-content {
            opacity: 0;
            transform: scale(0.95);
            transition: all 0.45s 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: transparent;
            border: none;
            box-shadow: none;
            transition: opacity 0.3s ease-in-out, max-width 0.3s ease;
        }
        #modal-container.is-hiding { opacity: 0; }
        
        /* --- FINAL VERIFICATION MODAL STYLES --- */
        .modal-outline-container {
            --login-box-color: #272727;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            background: var(--login-box-color);
            border-radius: 24px;
            width: 100%;
            max-width: 420px;
            margin: 0 auto;
            z-index: 8;
            transition: opacity 0.45s ease-in-out;
        }
        .modal-outline-container::before {
            content: "";
            position: absolute;
            inset: -80px;
            z-index: -2;
            background: conic-gradient(from 45deg, transparent 75%, var(--color-accent-start), transparent 100%);
            animation: spin 4s ease-in-out infinite;
        }
        @keyframes spin { 100% { transform: rotate(360deg); } }
        .modal-inner-box {
            background: var(--login-box-color);
            border-radius: 24px;
            padding: 28px;
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            position: relative;
            z-index: 10;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            box-shadow: inset 0 20px 40px -8px rgba(255, 255, 255, 0.08);
        }
        /* Override for Verification modal text */
        .modal-inner-box h2, .modal-inner-box p {
            color: #F5F5F5;
        }
        .modal-inner-box #countdown-timer {
             color: #FFFFFF;
        }
        .modal-inner-box .text-\[\var\(--color-text-secondary\)\] {
             color: #A8A8A8 !important;
        }

        @keyframes icon-pulse-animation {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        .icon-pulse {
            animation: icon-pulse-animation 2s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97);
        }
        #countdown-timer.urgent { color: var(--color-danger); animation: pulse-urgent 1s infinite; }
        @keyframes pulse-urgent { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
        
        /* --- LOADER STYLES --- */
        .generic-loader {
            height: 55px;
            width: 200px;
            margin-top: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .generic-spinner {
            width: 48px;
            height: 48px;
            border: 5px solid var(--color-text-secondary);
            border-bottom-color: var(--color-accent);
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
        }
        @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


        /* --- PACKAGE CARD STYLES --- */
        .package-item {
            background-color: var(--color-bg-secondary);
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .package-item:hover {
            border-color: var(--color-accent);
            transform: translateY(-2px);
        }
        .package-item.selected {
             border-color: var(--color-accent);
             box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.4);
             transform: scale(1.02);
        }
         .package-item.selected.premium {
            border-color: #f59e0b; /* amber color for selected premium */
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
        }
        
        /* --- CHECKMARK ANIMATION --- */
        .checkmark {
            opacity: 0;
            transform: scale(0.5);
            transition: all .3s ease-in-out;
            color: var(--color-success);
        }
        .checklist-item.completed .checkmark {
            opacity: 1;
            transform: scale(1);
        }
        .checklist-item.completed .step-icon { color: var(--color-success); }


        /* --- NEW LOADER/SPINNER STYLES --- */
        .loader {
            display: block;
            --height-of-loader: 6px;
            width: 100%;
            height: var(--height-of-loader);
            border-radius: 30px;
            background-color: var(--color-bg-input);
            position: relative;
            border: 1px solid var(--color-border);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        .loader::before {
            content: "";
            position: absolute;
            background: var(--color-accent);
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            border-radius: 30px;
            animation: moving 2s ease-in-out infinite;
        }
        @keyframes moving {
            50% {
                width: 100%;
            }
            100% {
                width: 0;
                right: 0;
                left: unset;
            }
        }