/* ===== CSS RESET & BASE STYLES ===== */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            :root {
                --primary: #6fb4ff;
                --primary-dark: #4f46e5;
                --secondary: #ec4899;
                --accent: #06b6d4;
                --dark: #0f172a;
                --darker: #020617;
                --light: #f8fafc;
                --gray: #64748b;
                --gray-light: #b8b8b8;
                --success: #10b981;
                --warning: #f59e0b;
                --error: #ef4444;
                --border: #e3e4e6;
                --card-bg: rgba(0, 0, 0, 0.7);
                --glass: rgba(255, 255, 255, 0.05);
                --glass-border: rgba(255, 255, 255, 0.1);
                
                /* Theme variables */
                --bg-color: #000000;
                --text-color: #f8fafc;
                --accent-color: #6fb4ff;
                --secondary-bg: #0b0d11;
                --border-color: #3f3f3f;
                --gray-light: #b8b8b8;
            }

            html {
                scroll-behavior: smooth;
            }

            body {
                font-family: 'Plus Jakarta Sans', sans-serif;
                font-size: 16px;
                line-height: 1.7;
                background: var(--bg-color);
                color: var(--text-color);
                min-height: 100vh;
                overflow-x: hidden;
                transition: background-color 0.3s ease, color 0.3s ease;
            }

            /* ===== TYPOGRAPHY ===== */
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-weight: 700;
                line-height: 1.2;
                margin-bottom: 1rem;
                color: var(--text-color);
            }

            h1 {
                font-size: clamp(38px, 5.6vw, 38px);
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-bottom: 1.5rem;
            }

            h2 {
                font-size: 2.5rem;
                margin-bottom: 1.5rem;
            }

            h3 {
                font-size: 1.8rem;
                margin-bottom: 1rem;
            }

            p {
                margin-bottom: 1rem;
                color: var(--text-color);
            }

            .highlight {
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: 800;
            }
            a.wan-sub-link {
                color:#ffd700;
            }
            /* ===== LAYOUT & CONTAINERS ===== */
            .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 20px;
            }

            .section {
                padding: 80px 0;
            }

            .section-title {
                text-align: center;
                margin-bottom: 3rem;
            }

            /* ===== HEADER & NAVIGATION ===== */
            .header {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                background: var(--secondary-bg);
                backdrop-filter: blur(20px);
                border-bottom: 1px solid var(--border-color);
                z-index: 1000;
                padding: 5px 0;
                transition: all 0.3s ease;
            }

            .header.scrolled {
                padding: 7px 0;
                background: var(--secondary-bg);
            }

            .header-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;    
                /* flex-direction: row-reverse; */
            }

            .logo-link {
                text-decoration: none;
                display: inline-block;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .logo-link:hover {
                transform: scale(1.05) translateY(-2px);
            }

            .logo-link:active {
                transform: scale(0.98);
            }

            .logo {
                display: flex;
                align-items: center;
                gap: 10px;
                transition: all 0.3s ease;
                /* flex-wrap: wrap; */
            }

            .logo-link:hover .logo-img {
                filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3));
                transform: rotate(-5deg);
            }

            .logo-link:hover .logo-text {
                background: linear-gradient(135deg, var(--secondary), var(--accent-color));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .logo-img {
                height: 40px;
                width: auto;
                border-radius: 8px;
                transition: all 0.3s ease;
                flex-shrink: 0;
            }

            .logo-text {
                font-size: 1.5rem;
                font-weight: 800;
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                transition: all 0.3s ease;
                white-space: nowrap;
            }

            .pro-crown {
                margin-left: 8px;
                font-size: 1.2rem;
                color: #FFD700;
                filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
                animation: crownGlow 2s ease-in-out infinite alternate;
            }

            .pro-crown i {
                color: #FFD700;
            }

            @keyframes crownGlow {
                from {
                    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
                }
                to {
                    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
                }
            }

            .user-info {
                display: flex;
                align-items: center;
                margin-left: auto;
                margin-right: 2rem;
            }

            .user-greeting {
                display: flex;
                align-items: center;
                gap: 8px;
                color: var(--text-color);
                font-weight: 500;
                font-size: 0.9rem;
            }

            .user-greeting i {
                color: var(--accent-color);
                font-size: 1.1rem;
            }

            /* Mobile styles */
            @media (max-width: 768px) {
                .user-info {
                    display: none;
                    /* Hide on mobile to save space */
                }

                /* Mobile auth tabs */
                .auth-tab {
                    padding: 0.875rem 1rem;
                    font-size: 0.9rem;
                }

                /* Adjust offer badge for mobile */
                .offer-badge {
                    right: -40px;
                    font-size: 0.6rem;
                    padding: 2px 5px;
                }

                .pulse-dot {
                    width: 5px;
                    height: 5px;
                    margin-right: 3px;
                }
            }

            .nav {
                display: flex;
                gap: 0.8rem;
                align-items: center;
            }

            .nav-link {
                color: var(--text-color);
                text-decoration: none;
                font-weight: 600;
                transition: all 0.3s ease;
                position: relative;
                display: flex;
                align-items: center;
                font-size: 13px;
                white-space: nowrap;
            }

            .nav-link:hover {
                color: var(--accent-color);
            }

            /* Sitewide "Generate" entry point. Tinted rather than a full button so
               it reads as the emphasised nav item without competing with Login. */
            .nav-link.nav-generate-link {
                gap: 6px;
                padding: 7px 14px;
                border-radius: 999px;
                color: var(--primary);
                background: rgba(111, 180, 255, 0.10);
                border: 1px solid rgba(111, 180, 255, 0.30);
            }

            .nav-link.nav-generate-link:hover {
                color: var(--text-color);
                background: rgba(111, 180, 255, 0.20);
                border-color: var(--primary);
            }

            /* The shared underline pseudo-element would draw under the pill. */
            .nav-link.nav-generate-link::after {
                display: none;
            }

            .nav-link::after {
                content: '';
                position: absolute;
                bottom: -5px;
                left: 0;
                width: 0;
                height: 2px;
                background: linear-gradient(90deg, var(--accent-color), var(--secondary));
                transition: width 0.3s ease;
            }

            .nav-link:hover::after {
                width: 100%;
            }

            /* ---- Tools Dropdown ---- */
            .tools-dropdown { position: relative; }
            .tools-dropdown-btn {
                display: inline-flex; align-items: center; gap: 5px;
                background: none; border: none; cursor: pointer;
                color: var(--text-color); font-size: inherit; font-family: inherit;
                padding: 0; position: relative;
            }
            .tools-dropdown-btn:hover { color: var(--accent-color); }
            .tools-chevron {
                font-size: 0.65rem; transition: transform 0.2s;
                margin-left: 1px;
            }
            .tools-dropdown.open .tools-chevron { transform: rotate(180deg); }
            .tools-dropdown-menu {
                display: none;
                position: absolute;
                top: calc(100% + 10px);
                left: 50%;
                transform: translateX(-50%);
                background: var(--card-bg, #1a1a2e);
                border: 1px solid rgba(99,102,241,0.25);
                border-radius: 12px;
                padding: 6px;
                min-width: 200px;
                box-shadow: 0 12px 32px rgba(0,0,0,0.45);
                z-index: 9999;
                white-space: nowrap;
            }
            .tools-dropdown.open .tools-dropdown-menu { display: block; }
            .tools-dropdown-item {
                display: flex; align-items: center; gap: 10px;
                padding: 9px 12px; border-radius: 8px;
                text-decoration: none; color: var(--text-color);
                transition: background 0.15s, color 0.15s;
            }
            .tools-dropdown-item:hover { background: rgba(99,102,241,0.12); color: var(--accent-color); }
            .tools-item-icon {
                width: 30px; height: 30px; border-radius: 7px;
                background: rgba(99,102,241,0.12);
                display: grid; place-items: center;
                color: var(--accent-color); font-size: 0.85rem;
                flex-shrink: 0;
            }
            .tools-dropdown-item span:last-child { display: flex; flex-direction: column; gap: 1px; }
            .tools-dropdown-item strong { font-size: 0.88rem; font-weight: 600; }
            .tools-dropdown-item small { font-size: 0.72rem; color: var(--gray-light, #aaa); }

            /* Subscribe Link with Offer Badge */
            .subscribe-link {
                position: relative;
                padding: 6px 14px !important;
                background: rgba(255, 215, 0, 0.1);
                border: 1px solid rgba(255, 215, 0, 0.3);
                border-radius: 20px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                margin-right: 12px;
                font-weight: 600 !important;
                color: #ffd700 !important;
            }

            .subscribe-link:hover {
                background: rgba(255, 215, 0, 0.2);
                border-color: #ffd700;
                transform: translateY(-1px);
                box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
                color: #fff !important;
            }

            .subscribe-link::after {
                display: none; /* Remove the default underline */
            }

            .header-offer-badge {
                position: absolute;
                top: -14px;
                right: -10px;
                background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%);
                color: #000;
                padding: 2px 8px;
                border-radius: 12px;
                font-size: 0.7rem;
                font-weight: 800;
                box-shadow: 0 4px 15px rgba(245, 158, 11, 0.5);
                animation: headerOfferFloat 3s ease-in-out infinite;
                white-space: nowrap;
                z-index: 10;
                border: 1px solid rgba(255, 255, 255, 0.4);
                display: flex;
                align-items: center;
                overflow: hidden;
            }

            /* Shimmer effect for badge */
            .header-offer-badge::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 50%;
                height: 100%;
                background: linear-gradient(
                    120deg,
                    transparent,
                    rgba(255, 255, 255, 0.6),
                    transparent
                );
                animation: headerShimmer 2s infinite;
            }

            .header-pulse-dot {
                display: inline-block;
                width: 6px;
                height: 6px;
                background: #ff4444;
                border-radius: 50%;
                margin-right: 5px;
                box-shadow: 0 0 8px #ff4444;
                animation: headerPulseDot 1.5s ease-in-out infinite;
            }

            .header-offer-timer {
                font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
                letter-spacing: -0.01em;
                font-weight: 800;
            }

            @keyframes headerOfferFloat {
                0%, 100% { transform: translateY(0) scale(1); }
                50% { transform: translateY(-4px) scale(1.05); }
            }

            @keyframes headerShimmer {
                0% { left: -100%; }
                100% { left: 200%; }
            }

            @keyframes headerPulseDot {
                0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); }
                70% { transform: scale(1.2); opacity: 0.8; box-shadow: 0 0 0 6px rgba(255, 68, 68, 0); }
                100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
            }

            .mobile-menu-btn {
                display: none;
                background: none;
                border: none;
                color: var(--text-color);
                font-size: 1.5rem;
                cursor: pointer;
                padding: 8px;
                transition: all 0.3s ease;
            }

            /* Desktop: mobile-only Login lives in .nav; hide the bar version.
               'button.' prefix beats the later .btn rule's display:inline-flex */
            .mobile-actions { display: flex; align-items: center; }
            button.mobile-login-btn { display: none; }
            /* Hidden whenever the user is logged in (mirrors #loginBtn state) */
            button.mobile-login-btn[data-auth-hidden="1"] { display: none !important; }

            .mobile-menu-btn:hover {
                color: var(--accent-color);
            }

            /* ===== MODAL STYLES ===== */
            .modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.9);
                backdrop-filter: blur(15px);
                -webkit-backdrop-filter: blur(15px);
                z-index: 10000;
                justify-content: center;
                align-items: center;
                /* padding: 1.5rem; */
                overflow-y: auto;
                animation: fadeIn 0.2s ease-out;
            }

            .modal.active {
                display: flex;
            }

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

            .modal-content {
                background: var(--secondary-bg);
                border: 1px solid var(--border-color);
                border-radius: 20px;
                box-shadow: 
                    0 25px 50px -12px rgba(0, 0, 0, 0.8),
                    0 0 0 1px rgba(255, 255, 255, 0.05),
                    inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
                max-width: 600px;
                width: 100%;
                max-height: 90vh;
                overflow: hidden;
                position: relative;
                animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                transform-origin: center;
                margin: 1rem;
            }

            @media (max-width: 768px) {
                .modal-content {
                    max-width: calc(100% - 2rem);
                    max-height: 95vh;
                    margin: 1rem;
                    border-radius: 16px;
                }
            }

            @media (max-width: 480px) {
                .modal-content {
                    max-width: calc(100% - 1rem);
                    width: 95%;
                    max-height: 95vh;
                    margin: 0.5rem;
                    border-radius: 12px;
                }

                .modal-header {
                    padding: 1.5rem;
                }

                .modal-header h3 {
                    font-size: 1.25rem;
                }

                .modal-body {
                    padding: 1.5rem;
                    max-height: calc(95vh - 110px);
                }
            }

            @keyframes modalSlideIn {
                from {
                    opacity: 0;
                    transform: translateY(-40px) scale(0.95);
                }
                to {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }

            .modal-header {
                padding: 2rem;
                background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(236, 72, 153, 0.15));
                border-bottom: 1px solid var(--border-color);
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                overflow: hidden;
            }

            .modal-header::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 2px;
                background: linear-gradient(90deg, 
                    transparent,
                    var(--accent-color),
                    var(--secondary),
                    transparent
                );
                animation: shimmer 3s ease-in-out infinite;
            }

            @keyframes shimmer {
                0%, 100% {
                    opacity: 0.5;
                    transform: translateX(-100%);
                }
                50% {
                    opacity: 1;
                    transform: translateX(100%);
                }
            }

            .modal-header h3 {
                margin: 0;
                color: var(--text-color);
                font-size: 1.5rem;
                font-weight: 700;
                display: flex;
                align-items: center;
                gap: 0.75rem;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }

            .modal-header h3 i {
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                font-size: 1.75rem;
            }

            .modal-body {
                padding: 2rem;
                overflow-y: auto;
                max-height: calc(90vh - 140px);
            }

            .modal-body::-webkit-scrollbar {
                width: 8px;
            }

            .modal-body::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 4px;
            }

            .modal-body::-webkit-scrollbar-thumb {
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                border-radius: 4px;
            }

            .modal .btn-link {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: var(--gray-light);
                font-size: 1.25rem;
                cursor: pointer;
                padding: 0;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                border-radius: 10px;
            }

            .modal .btn-link:hover {
                background: rgba(239, 68, 68, 0.2);
                border-color: rgba(239, 68, 68, 0.5);
                color: #ef4444;
                transform: rotate(90deg) scale(1.1);
            }

            .modal .btn-link:active {
                transform: rotate(90deg) scale(0.95);
            }

            /* ===== GOOGLE ONE TAP Z-INDEX FIX ===== */
            /* Ensure Google One Tap appears above modals */
            #credential_picker_container,
            #credential_picker_iframe,
            [id^="gsi_"],
            .ns1blnkt,
            iframe[src*="accounts.google.com"] {
                z-index: 99999 !important;
            }

            /* ===== AUTH MODAL STYLES ===== */
            .auth-modal-content {
                max-width: 480px;
            }

            .auth-modal-header {
                background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.2));
                border-bottom: 1px solid rgba(124, 58, 237, 0.3);
                position: relative;
            }

            .auth-close-btn {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: var(--gray-light);
                font-size: 1.25rem;
                cursor: pointer;
                padding: 0;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                border-radius: 10px;
            }

            .auth-close-btn:hover {
                background: rgba(239, 68, 68, 0.2);
                border-color: rgba(239, 68, 68, 0.5);
                color: #ef4444;
                transform: rotate(90deg) scale(1.1);
            }

            .auth-modal-body {
                padding: 2rem;
            }

            /* Google Auth Section */
            .google-auth-section {
                margin-bottom: 2rem;
            }

            .google-auth-btn {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1rem;
                padding: 1rem;
                background: white;
                border: 1px solid #dadce0;
                border-radius: 12px;
                font-size: 13px;
                font-weight: 600;
                color: #3c4043;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }

            .google-auth-btn:hover {
                background: #f8f9fa;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                transform: translateY(-1px);
            }

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

            /* ===== TRIAL ALERT NOTIFICATION ===== */
            .trial-alert-notification {
                position: fixed;
                top: 20px;
                right: 20px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                padding: 15px 20px;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                z-index: 10000;
                max-width: 350px;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                font-size: 14px;
                line-height: 1.4;
                animation: slideInRight 0.3s ease-out;
            }

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

            .trial-alert-notification button {
                position: absolute;
                top: 5px;
                right: 10px;
                background: none;
                border: none;
                color: white;
                font-size: 20px;
                cursor: pointer;
                opacity: 0.8;
            }

            .trial-alert-notification button:hover {
                opacity: 1;
            }

            .google-icon {
                width: 24px;
                height: 24px;
            }

            .auth-divider {
                display: flex;
                align-items: center;
                text-align: center;
                margin: 2rem 0;
                color: var(--gray-light);
            }

            .auth-divider::before,
            .auth-divider::after {
                content: '';
                flex: 1;
                border-bottom: 1px solid rgba(148, 163, 184, 0.2);
            }

            .auth-divider span {
                padding: 0 1rem;
                font-size: 0.875rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }

            /* Auth Tabs */
            .auth-tabs {
                display: flex;
                margin-bottom: 2rem;
                border-bottom: 2px solid var(--glass-border);
                position: relative;
            }

            .auth-tab {
                flex: 1;
                padding: 1rem 1.5rem;
                background: transparent;
                border: none;
                border-bottom: 3px solid transparent;
                color: var(--gray-light);
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                font-size: 0.95rem;
                text-align: center;
                position: relative;
            }

            .auth-tab:hover:not(.active) {
                color: var(--text-color);
                background: var(--glass);
            }

            .auth-tab.active {
                color: var(--accent-color);
                border-bottom-color: var(--accent-color);
                background: var(--glass);
            }

            /* Auth Forms */
            .auth-form {
                display: flex;
                flex-direction: column;
                gap: 1.25rem;
            }

            .form-label {
                display: block;
                margin-bottom: 0.5rem;
                color: var(--text-color);
                font-weight: 600;
                font-size: 0.9rem;
            }

            .form-input {
                width: 100%;
                padding: 0.875rem 1rem;
                background: var(--secondary-bg);
                border: 1.5px solid var(--border-color);
                border-radius: 10px;
                color: var(--text-color);
                font-size: 13px;
                transition: all 0.3s ease;
                box-sizing: border-box;
            }

            .form-input:focus {
                outline: none;
                border-color: var(--accent-color);
                background: var(--bg-color);
                box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
            }

            .form-input::placeholder {
                color: var(--gray-light);
                opacity: 0.6;
            }

            /* Form Options */
            .form-options {
                display: flex;
                justify-content: flex-end;
                margin-top: -0.5rem;
                margin-bottom: 0.5rem;
            }

            .forgot-password-link {
                color: var(--accent-color);
                font-size: 0.875rem;
                text-decoration: none;
                font-weight: 500;
                transition: all 0.2s ease;
            }

            .forgot-password-link:hover {
                color: var(--accent);
                text-decoration: underline;
            }

            /* Forgot Password Form */
            .forgot-password-notice {
                background: rgba(59, 130, 246, 0.1);
                border: 1px solid rgba(59, 130, 246, 0.3);
                border-radius: 10px;
                padding: 1rem;
                margin-bottom: 1.5rem;
            }

            .forgot-password-notice p {
                margin: 0;
                color: var(--gray-light);
                font-size: 0.9rem;
                line-height: 1.5;
            }

            .form-actions {
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
            }

            .auth-secondary-btn {
                width: 100%;
                padding: 0.875rem 1.5rem;
                background: transparent;
                border: 1.5px solid var(--border-color);
                color: var(--text-primary);
                border-radius: 10px;
                font-weight: 600;
                font-size: 0.95rem;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .auth-secondary-btn:hover {
                background: var(--secondary-bg);
                border-color: var(--accent-color);
                color: var(--accent-color);
            }

            /* Auth Status Messages */
            #auth-status, #login-status {
                margin-top: 1rem;
                padding: 1rem 1.25rem;
                border-radius: 12px;
                font-size: 0.95rem;
                text-align: center;
                font-weight: 600;
                display: none;
                animation: slideDown 0.3s ease-out;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }

            #auth-status:not(:empty), #login-status:not(:empty) {
                display: block;
            }

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

            #auth-status.error, #login-status.error {
                background: rgba(239, 68, 68, 0.15);
                border: 2px solid rgba(239, 68, 68, 0.5);
                color: #fee;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }

            #auth-status.success, #login-status.success {
                background: rgba(16, 185, 129, 0.15);
                border: 2px solid rgba(16, 185, 129, 0.5);
                color: #d1fae5;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }

            #auth-status.warning, #login-status.warning {
                background: rgba(245, 158, 11, 0.15);
                border: 2px solid rgba(245, 158, 11, 0.5);
                color: #fef3c7;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }

            #auth-status.info, #login-status.info {
                background: rgba(59, 130, 246, 0.15);
                border: 2px solid rgba(59, 130, 246, 0.5);
                color: #dbeafe;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }

    /* ===== FEEDBACK STAR RATING ===== */
    .feedback-stars {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .feedback-stars .fb-star {
        background: none;
        border: none;
        padding: 0 0.1rem;
        font-size: 1.75rem;
        line-height: 1;
        cursor: pointer;
        color: #4a4a58;
        transition: color 0.12s ease, transform 0.12s ease;
    }

    .feedback-stars .fb-star:hover,
    .feedback-stars .fb-star.is-on {
        color: #ffc531;
    }

    .feedback-stars .fb-star:hover {
        transform: scale(1.12);
    }

    .feedback-stars .fb-star:focus-visible {
        outline: 2px solid #a3ff12;
        outline-offset: 2px;
        border-radius: 4px;
    }

    .feedback-stars .fb-star-label {
        margin-left: 0.6rem;
        font-size: 0.82rem;
        color: var(--gray-light, #9aa0a6);
    }

    @media (prefers-reduced-motion: reduce) {
        .feedback-stars .fb-star { transition: none; }
        .feedback-stars .fb-star:hover { transform: none; }
    }

    .floating-care-btn {
        position: fixed;
        right: 30px;
        bottom: 116px;
        z-index: 9998;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid rgba(163,255,18,0.35);
        background: #14171a;
        color: #a3ff12;
        font-size: 1.15rem;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(0,0,0,0.35);
        transition: transform 0.15s ease, background 0.15s ease;
    }
    .floating-care-btn:hover { transform: translateY(-2px); background: #1c2026; }
    .floating-care-btn:focus-visible { outline: 2px solid #a3ff12; outline-offset: 3px; }
    @media (prefers-reduced-motion: reduce) {
        .floating-care-btn { transition: none; }
        .floating-care-btn:hover { transform: none; }
    }

            /* ===== FEEDBACK MODAL ===== */
            #feedbackModal .modal-content {
                max-width: 550px;
            }

            #feedbackModal .modal-header {
                background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
                border-bottom: 1px solid rgba(245, 158, 11, 0.3);
            }

            #feedbackModal .modal-header h3 {
                color: white;
            }

            #feedbackModal .modal-header h3 i {
                background: linear-gradient(135deg, #f59e0b, #d97706);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

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

            .form-group label {
                display: block;
                margin-bottom: 0.75rem;
                color: var(--text-primary);
                font-weight: 600;
                font-size: 0.95rem;
                letter-spacing: 0.01em;
            }

            .form-input,
            textarea.form-input,
            select.form-input,
            input[type="text"].form-input,
            input[type="email"].form-input,
            input[type="number"].form-input {
                width: 100%;
                padding: 1rem 1.25rem;
                background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.6));
                border: 1.5px solid rgba(148, 163, 184, 0.25);
                border-radius: 12px;
                color: var(--text-primary);
                font-size: 0.95rem;
                font-family: inherit;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                box-shadow: 
                    inset 0 1px 2px rgba(0, 0, 0, 0.1),
                    0 1px 0 rgba(255, 255, 255, 0.05);
            }

            textarea.form-input {
                resize: vertical;
                min-height: 140px;
                line-height: 1.6;
            }

            .form-input:hover,
            textarea.form-input:hover,
            select.form-input:hover {
                border-color: rgba(124, 58, 237, 0.4);
                background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7));
            }

            .form-input:focus,
            textarea.form-input:focus,
            select.form-input:focus {
                outline: none;
                border-color: var(--accent-color);
                background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
                box-shadow: 
                    0 0 0 4px rgba(124, 58, 237, 0.15),
                    inset 0 1px 2px rgba(0, 0, 0, 0.1),
                    0 4px 12px rgba(124, 58, 237, 0.2);
                transform: translateY(-1px);
            }

            .form-input::placeholder,
            textarea.form-input::placeholder {
                color: var(--gray-light);
                opacity: 0.6;
                font-style: italic;
            }

            /* Select dropdown styling */
            select.form-input {
                cursor: pointer;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0aec0' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 1rem center;
                background-size: 16px;
                padding-right: 3rem;
            }

            select.form-input:hover {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237c3aed' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
            }

            select.form-input option {
                background: rgba(15, 23, 42, 0.98);
                color: var(--text-primary);
                padding: 0.75rem;
            }

            /* Input with icons */
            .input-with-icon {
                position: relative;
            }

            .input-with-icon .form-input {
                padding-left: 3rem;
            }

            .input-with-icon i {
                position: absolute;
                left: 1rem;
                top: 50%;
                transform: translateY(-50%);
                color: var(--gray-light);
                pointer-events: none;
                transition: color 0.3s ease;
            }

            .input-with-icon .form-input:focus + i,
            .input-with-icon:hover i {
                color: var(--accent-color);
            }

            /* Disabled state */
            .form-input:disabled,
            textarea.form-input:disabled,
            select.form-input:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                background: rgba(15, 23, 42, 0.3);
            }

            #feedbackSuccess {
                text-align: center;
                padding: 2rem 1rem;
            }

            #feedbackSuccess .success-icon {
                font-size: 4rem;
                margin-bottom: 1.5rem;
                display: inline-block;
                animation: successPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

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

            #feedbackSuccess h3 {
                background: linear-gradient(135deg, var(--accent-color), var(--accent));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                margin-bottom: 1rem;
                font-size: 1.75rem;
                font-weight: 800;
            }

            #feedbackSuccess p {
                color: var(--gray-light);
                margin-bottom: 1rem;
                line-height: 1.6;
            }

            #auth-status, #login-status {
                margin-top: 1rem;
                padding: 0.75rem 1rem;
                border-radius: 8px;
                font-size: 0.9rem;
                text-align: center;
            }

            #auth-status.error, #login-status.error {
                background: rgba(239, 68, 68, 0.1);
                border: 1px solid rgba(239, 68, 68, 0.3);
                color: #ef4444;
            }

            #auth-status.success, #login-status.success {
                background: rgba(16, 185, 129, 0.1);
                border: 1px solid rgba(16, 185, 129, 0.3);
                color: #10b981;
            }

            /* ===== UPGRADE OVERLAY STYLES ===== */
            .upgrade-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 10000;
                display: flex;
                align-items: center;
                justify-content: center;
                backdrop-filter: blur(10px);
                padding: 1rem;
                box-sizing: border-box;
            }

            .upgrade-popup {
                background: #000000;
                border: 2px solid rgba(255, 61, 0, 0.4);
                border-radius: 20px;
                padding: 2rem;
                max-width: 450px;
                width: 90%;
                max-height: 90vh;
                overflow-y: auto;
                text-align: center;
                box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 61, 0, 0.2);
                animation: popupFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                position: relative;
            }

            .upgrade-popup.nsfw {
                max-width: 550px;
            }

            /* Upgrade popup content styles */
            .upgrade-popup-content {
                position: relative;
                z-index: 1;
            }

            .upgrade-popup-header {
                margin-bottom: 1.5rem;
            }

            .upgrade-popup-icon {
                font-size: 3rem;
                color: #FF3D00;
                margin-bottom: 1rem;
                display: block;
                filter: drop-shadow(0 0 10px rgba(255, 61, 0, 0.5));
            }

            .upgrade-popup-title {
                color: var(--light);
                margin-bottom: 0.5rem;
                font-size: 1.6rem;
                font-weight: 800;
            }

            .upgrade-popup-description {
                color: var(--gray-light);
                margin-bottom: 1rem;
                font-size: 13px;
            }

            .upgrade-popup-features {
            }

            .upgrade-popup-features-title {
                color: var(--light);
                font-weight: 700;
                margin-bottom: 12px;
                font-size: 13px;
            }

            .upgrade-popup-features-title i {
                color: #FFD700;
            }

            .upgrade-popup-features-title span {
                background: linear-gradient(135deg, #FFD700, #FFA500);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                font-weight: 900;
                text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            }

            .upgrade-popup-sfw-tips {
                /* background: rgba(255, 61, 0, 0.1); */
                padding: 10px;
                border-radius: 6px;
                margin-bottom: 12px;
                border: 1px solid rgba(255, 61, 0, 0.3);
            }

            .upgrade-popup-sfw-tips-title {
                /* color: #FF6B35;
                font-weight: 700;
                font-size: 0.9rem; */
                margin-bottom: 6px;
            }

            .upgrade-popup-sfw-tips-content {
                /* color: var(--gray-light);
                font-size: 0.8rem; */
                line-height: 1.4;
            }

            .upgrade-popup-feature-item {
                color: var(--gray-light);
                font-size: 0.85rem;
                line-height: 1.8;
                text-align: left;
            }

            .upgrade-popup-learn-more {
                text-align: center;
                margin-top: 0.8rem;
            }

            .upgrade-popup-learn-more a {
                color: var(--gray-light);
                font-size: 0.85rem;
                text-decoration: none;
                transition: color 0.3s ease;
                display: inline-flex;
                align-items: center;
                gap: 5px;
            }

            .upgrade-popup-actions {
                display: flex;
                gap: 1rem;
                justify-content: center;
                margin-top: 1.5rem;
                position: relative;
                z-index: 1;
            }

            .upgrade-popup-upgrade-btn {
                background: linear-gradient(135deg, #FF3D00, #FF6D00);
                color: white;
                border: none;
                padding: 1rem 2.5rem;
                border-radius: 12px;
                font-weight: 800;
                font-size: 1.1rem;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 6px 20px rgba(255, 61, 0, 0.4);
                text-transform: uppercase;
                letter-spacing: 0.5px;
                animation: buttonPulse 2s ease-in-out infinite;
                text-decoration: none;
                display: inline-block;
            }

            .upgrade-popup-maybe-later-btn {
                background: transparent;
                color: var(--gray-light);
                border: 2px solid var(--border);
                padding: 1rem 1.5rem;
                border-radius: 12px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            /* NSFW Warning Section */
            .upgrade-popup-nsfw-warning {
                background: rgba(255, 61, 0, 0.08);
                border-left: 3px solid #FF3D00;
                padding: 12px;
                border-radius: 8px;
                margin: 1rem 0;
                text-align: left;
            }

            .upgrade-popup-nsfw-title {
                color: var(--light);
                font-weight: 700;
                margin-bottom: 8px;
                font-size: 0.95rem;
            }

            .upgrade-popup-nsfw-title i {
                color: #FF3D00;
            }

            .upgrade-popup-nsfw-keywords {
                color: var(--gray-light);
                font-size: 0.85rem;
                margin-bottom: 8px;
            }

            .upgrade-popup-nsfw-keyword-tag {
                background: rgba(255, 61, 0, 0.2);
                padding: 2px 6px;
                border-radius: 4px;
                margin: 2px;
            }

            .upgrade-popup-nsfw-reason {
                color: var(--gray-light);
                font-size: 0.8rem;
                font-style: italic;
            }

            /* SFW Suggestion Section */
            .upgrade-popup-sfw-suggestion {
                background: rgba(0, 255, 0, 0.08);
                border-left: 3px solid #00FF00;
                padding: 12px;
                border-radius: 8px;
                margin: 1rem 0;
                text-align: left;
            }

            .upgrade-popup-sfw-title {
                color: var(--light);
                font-weight: 700;
                margin-bottom: 8px;
                font-size: 0.95rem;
            }

            .upgrade-popup-sfw-title i {
                color: #00FF00;
            }

            .upgrade-popup-sfw-code {
                background: rgba(255, 255, 255, 0.05);
                padding: 8px;
                border-radius: 6px;
                margin-bottom: 8px;
            }

            .upgrade-popup-sfw-code code {
                color: var(--gray-light);
                font-size: 0.8rem;
                word-break: break-word;
            }

            .upgrade-popup-removed-words {
                color: #FF3D00;
                text-decoration: line-through;
            }

            .upgrade-popup-removed-words-section {
                color: var(--gray-light);
                font-size: 0.75rem;
                margin-bottom: 8px;
            }

            .upgrade-popup-copy-sfw-btn {
                background: rgba(0, 255, 0, 0.2);
                color: #00FF00;
                border: 1px solid #00FF00;
                padding: 6px 12px;
                border-radius: 6px;
                font-size: 0.8rem;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            /* ===== HERO SECTION ===== */
            .hero {
                padding: 80px 0 0px;
                text-align: center;
                position: relative;
            }

            .hero::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
                pointer-events: none;
            }

            .hero-subtitle {
                font-size: clamp(15px, 1.6vw, 62px);
                color: var(--gray-light);
                margin-bottom: 2rem;
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
            }

            .features-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 1.5rem;
                margin: 3rem 0;
            }

            .feature-card {
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 16px;
                padding: 1.5rem;
                text-align: center;
                transition: all 0.3s ease;
            }

            .feature-card:hover {
                transform: translateY(-5px);
                border-color: var(--accent-color);
                box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.2);
            }

            .feature-icon {
                font-size: 2.5rem;
                margin-bottom: 1rem;
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .feature-title {
                font-size: 1.2rem;
                font-weight: 600;
                margin-bottom: 0.5rem;
            }

            /* ===== LIVE STATS BAR ===== */
            .stats-bar {
                background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--secondary-rgb), 0.08));
                border: 1px solid var(--border-color);
                border-radius: 12px;
                padding: 1rem 1rem;
                margin: 2rem 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
                gap: 1rem;
            }

            .stat-item {
                /* display: flex;
                align-items: center; */
                gap: 0.5rem;
                font-weight: 600;
            }

            .stat-icon {
                color: var(--accent-color);
                font-size: 1.2rem;
            }

            .stat-value {
                color: var(--accent-color);
                font-weight: 700;
            }

            /* Skeletal loader for stats */
            .stat-value.loading {
                display: inline-block;
                min-width: 30px;
                height: 20px;
                background: linear-gradient(90deg,
                        rgba(255, 255, 255, 0.1) 25%,
                        rgba(255, 255, 255, 0.2) 50%,
                        rgba(255, 255, 255, 0.1) 75%);
                background-size: 200% 100%;
                animation: shimmer 2s infinite;
                border-radius: 4px;
                vertical-align: middle;
            }

            /* ===== GENERATION FORM ===== */
            .generation-section {
                background: var(--bg-color);
                border-radius: 20px;
                padding: 3rem;
                margin: 3rem 0;
                border: 1px solid rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
            }

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

            .form-label {
                display: block;
                margin-bottom: 0.75rem;
                font-weight: 600;
                color: var(--accent);
                font-size: 0.95rem;
                letter-spacing: 0.01em;
            }

            .form-control,
            input.form-control,
            textarea.form-control,
            select.form-control {
                width: 100%;
                padding: 10px;
                background: var(--secondary-bg);
                border: 1.5px solid var(--border-color);
                border-radius: 12px;
                color: var(--text-color);
                font-size: 13px;
                font-family: inherit;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 
                    inset 0 1px 3px rgba(0, 0, 0, 0.2),
                    0 1px 0 rgba(255, 255, 255, 0.05);
            }

            .form-control:hover {
                border-color: var(--accent-color);
                /* background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(10, 15, 30, 0.9)); */
            }

            .form-control:focus {
                outline: none;
                border-color: var(--accent-color);
                /* background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(10, 15, 30, 0.95)); */
                box-shadow: 
                    0 0 0 4px rgba(var(--accent-rgb), 0.2),
                    inset 0 1px 3px rgba(0, 0, 0, 0.2),
                    0 4px 16px rgba(var(--accent-rgb), 0.25);
                transform: translateY(-1px);
            }

            .form-control::placeholder {
                color: var(--gray-light);
                font-style: italic;
            }

            /* Select styling */
            select.form-control {
                cursor: pointer;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23a0aec0' d='M12 4L7 9 2 4'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 1.25rem center;
                background-size: 18px;
                padding-right: 3rem;
            }

            /* Only apply hover effect to generation form selects, not auth modal */
            #generationForm select.form-control:hover,
            .generation-section select.form-control:hover {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%237c3aed' d='M12 4L7 9 2 4'/%3E%3C/svg%3E");
            }

            select.form-control option {
                background: var(--secondary-bg);
                color: var(--text-color);
                padding: 0.75rem;
            }

            select.form-control optgroup {
                background: var(--bg-color);
                color: var(--accent-color);
                font-weight: 700;
                font-size: 0.9rem;
                padding: 0.5rem 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }

            /* Quick Start Guide */
            .quick-start-guide {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
                border: 1px solid rgba(99, 102, 241, 0.25);
                border-radius: 12px;
                padding: 16px 20px;
                margin-bottom: 20px;
                animation: fadeIn 0.4s ease;
            }
            .quick-start-guide.dismissed { display: none; }
            .quick-start-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
            }
            .quick-start-title {
                font-weight: 600;
                font-size: 0.95rem;
                color: var(--accent-color);
            }
            .quick-start-title i { margin-right: 6px; }
            .quick-start-dismiss {
                background: none;
                border: none;
                color: var(--gray-light);
                cursor: pointer;
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 0.85rem;
                transition: all 0.2s;
            }
            .quick-start-dismiss:hover {
                background: rgba(255,255,255,0.1);
                color: var(--text-color);
            }
            .quick-start-steps {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                flex-wrap: wrap;
            }
            .quick-start-step {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 8px 14px;
                background: rgba(255,255,255,0.05);
                border-radius: 8px;
                flex: 1;
                min-width: 140px;
            }
            .step-number {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                background: var(--accent-color);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                font-size: 0.85rem;
                flex-shrink: 0;
            }
            .step-content strong {
                display: block;
                font-size: 0.85rem;
                color: var(--text-color);
                line-height: 1.3;
            }
            .step-content span {
                font-size: 0.75rem;
                color: var(--gray-light);
                line-height: 1.3;
            }
            .quick-start-arrow {
                color: var(--gray-light);
                font-size: 0.7rem;
                opacity: 0.5;
            }
            @media (max-width: 600px) {
                .quick-start-steps { flex-direction: column; gap: 6px; }
                .quick-start-arrow { transform: rotate(90deg); }
                .quick-start-step { min-width: auto; }
            }

            /* Step Progress Bar */
            .step-progress-bar {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0;
                margin-bottom: 20px;
                padding: 12px 0;
            }
            .step-progress-item {
                display: flex;
                align-items: center;
                gap: 6px;
                opacity: 0.4;
                transition: opacity 0.3s;
            }
            .step-progress-item.active { opacity: 1; }
            .step-progress-item.completed { opacity: 0.7; }
            .step-progress-item.completed .step-dot {
                background: #10b981;
                border-color: #10b981;
            }
            .step-dot {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                border: 2px solid var(--accent-color);
                color: var(--accent-color);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.7rem;
                font-weight: 700;
                transition: all 0.3s;
            }
            .step-progress-item.active .step-dot {
                background: var(--accent-color);
                color: #fff;
            }
            .step-progress-item span {
                font-size: 0.8rem;
                font-weight: 500;
                color: var(--text-color);
            }
            .step-progress-line {
                width: 40px;
                height: 2px;
                background: var(--border-color);
                margin: 0 8px;
            }
            @media (max-width: 480px) {
                .step-progress-item span { display: none; }
                .step-progress-line { width: 24px; }
            }

            /* Form field help tooltips */
            .field-help {
                display: inline-block;
                margin-left: 6px;
            }
            .field-help summary {
                cursor: pointer;
                color: var(--accent-color);
                font-size: 0.8rem;
                font-weight: 500;
                list-style: none;
                display: inline-flex;
                align-items: center;
                gap: 3px;
                opacity: 0.7;
                transition: opacity 0.2s;
            }
            .field-help summary:hover { opacity: 1; }
            .field-help summary::-webkit-details-marker { display: none; }
            .upload-legal-note {
                display: flex;
                align-items: flex-start;
                gap: 6px;
                margin-top: 8px;
                font-size: 0.75rem;
                line-height: 1.45;
                color: var(--gray-light);
                opacity: 0.65;
            }
            .upload-legal-note i { margin-top: 2px; }
            .upload-legal-note a {
                color: inherit;
                text-decoration: underline;
                text-underline-offset: 2px;
            }
            .upload-legal-note:hover { opacity: 0.9; }
            .field-help-text {
                margin-top: 6px;
                padding: 8px 12px;
                background: rgba(99, 102, 241, 0.08);
                border-left: 3px solid var(--accent-color);
                border-radius: 0 6px 6px 0;
                font-size: 0.8rem;
                color: var(--gray-light);
                line-height: 1.5;
            }

            /* Workflow category headers */
            .workflow-category-header {
                grid-column: 1 / -1;
                font-size: 0.75rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--gray-light);
                padding: 8px 0 2px;
                border-bottom: 1px solid rgba(255,255,255,0.06);
                margin-top: 4px;
            }
            .workflow-category-header:first-child { margin-top: 0; }
            .workflow-category-header i {
                margin-right: 6px;
                font-size: 0.7rem;
                opacity: 0.7;
            }

            /* Workflow card input requirements hint */
            .workflow-card-needs {
                font-size: 0.65rem;
                color: var(--gray-light);
                opacity: 0.6;
                margin-top: 4px;
                display: flex;
                align-items: center;
                gap: 3px;
                justify-content: center;
            }
            .workflow-card-needs i { font-size: 0.6rem; }
            .workflow-grid.list-view .workflow-card-needs {
                justify-content: flex-start;
                margin-top: 2px;
            }

            /* Unified workflow info card */
            .workflow-info-card {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
                border: 1px solid rgba(99, 102, 241, 0.25);
                border-radius: 10px;
                padding: 14px 16px;
                margin: 12px 0;
                position: relative;
                font-size: 0.85rem;
                line-height: 1.5;
                color: var(--text-color);
                animation: fadeIn 0.3s ease;
            }
            .workflow-info-card.hidden { display: none; }
            .workflow-info-close {
                position: absolute;
                top: 8px;
                right: 10px;
                background: none;
                border: none;
                color: var(--text-secondary);
                cursor: pointer;
                padding: 4px 6px;
                border-radius: 4px;
                font-size: 0.8rem;
                transition: background 0.2s, color 0.2s;
            }
            .workflow-info-close:hover {
                background: rgba(255,255,255,0.15);
                color: var(--text-color);
            }
            .workflow-info-header {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 6px;
                padding-right: 24px;
            }
            .workflow-info-header i {
                color: var(--accent-color);
                flex-shrink: 0;
            }
            .workflow-info-header strong { color: var(--accent-color); font-size: 0.9rem; }
            .workflow-info-desc {
                margin: 0 0 8px 0;
                color: var(--text-secondary);
            }
            .workflow-info-fields {
                display: flex;
                gap: 16px;
                flex-wrap: wrap;
                margin-bottom: 4px;
            }
            .workflow-info-field-group {
                font-size: 0.82rem;
            }
            .workflow-info-field-group:empty { display: none; }
            .workflow-info-field-label {
                font-weight: 600;
                margin-bottom: 2px;
                font-size: 0.78rem;
                text-transform: uppercase;
                letter-spacing: 0.3px;
            }
            .workflow-info-field-label.required { color: #f87171; }
            .workflow-info-field-label.optional { color: #a3e635; }
            .workflow-info-field-list {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .workflow-info-field-list li::before {
                content: '•';
                margin-right: 5px;
                color: var(--accent-color);
            }
            .workflow-info-uploads {
                font-size: 0.82rem;
                color: var(--text-secondary);
                margin-top: 4px;
            }
            .workflow-info-uploads:empty { display: none; }
            .workflow-info-uploads i { color: var(--accent-color); margin-right: 4px; }

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

            /* Visually hidden but accessible to screen readers and SEO */
            .visually-hidden {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }

            /* Workflow Grid Styles */
            .workflow-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: 12px;
                margin-top: 12px;
            }

            .workflow-card {
                background: var(--secondary-bg);
                border: 1px solid var(--border-color);
                border-radius: 12px;
                padding: 16px;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                text-align: center;
                position: relative;
                overflow: hidden;
            }

            .workflow-card:hover:not(.disabled) {
                border-color: var(--accent-color);
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.2);
                background: var(--secondary-bg);
            }

            .workflow-card.selected {
                border-color: var(--accent-color);
                background: var(--secondary-bg);
                box-shadow: inset 0 0 0 0px var(--accent-color), 0 0 0 1px var(--accent-color), 0 0px 2px var(--accent-color);
            }

            .workflow-card.selected::before {
                content: '✓';
                position: absolute;
                top: 8px;
                right: 8px;
                background: #ffd700;
                color: #000;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 14px;
            }

            .workflow-card.disabled {
                opacity: 0.5;
                cursor: not-allowed;
                border-color: var(--border-color);
            }

            .workflow-card-icon {
                display: none;
                font-size: 2rem;
                margin-bottom: 8px;
                filter: grayscale(0.3);
            }

            .workflow-card.selected .workflow-card-icon {
                filter: grayscale(0);
            }

            .model-avatar {
                width: 32px;
                height: 32px;
                border-radius: 8px;
                display: grid;
                place-items: center;
                font: 600 13px monospace;
                color: white;
                margin-bottom: 8px;
                flex-shrink: 0;
            }

            .model-tile {
                background: var(--secondary-bg);
                border: 1px solid var(--border-color);
                border-radius: 12px;
                padding: 12px;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .model-tile:hover:not(.disabled) {
                border-color: var(--accent-color);
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.2);
            }

            .model-tile.selected {
                border-color: var(--accent-color);
                box-shadow: inset 0 0 0 0px var(--accent-color), 0 0 0 1px var(--accent-color), 0 0px 2px var(--accent-color);
            }

            .model-tile.selected::before {
                content: '✓';
                position: absolute;
                top: 8px;
                right: 8px;
                background: #ffd700;
                color: #000;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 14px;
            }

            .model-tile.disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            /* Deep-link pulse: draws the eye to a workflow tile that was
               pre-selected from a tool/guide page (?workflow=<id>#generation). */
            .model-tile.workflow-deeplink-pulse {
                animation: workflowDeeplinkPulse 0.8s ease-in-out 3;
            }

            @keyframes workflowDeeplinkPulse {
                0%, 100% { box-shadow: inset 0 0 0 0px var(--accent-color), 0 0 0 1px var(--accent-color), 0 0px 2px var(--accent-color); }
                50% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.55), 0 0 22px 4px rgba(var(--accent-rgb), 0.5); }
            }

            .model-tile-head {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: 8px;
            }

            .model-tile-head > div {
                display: flex;
                gap: 8px;
                align-items: center;
                flex: 1;
                min-width: 0;
            }

            .model-tile-name {
                font-weight: 600;
                color: var(--text-color);
                font-size: 13px;
                line-height: 1.3;
            }

            .model-tile-desc {
                font-size: 11px;
                color: var(--gray-light);
                opacity: 0.8;
                line-height: 1.4;
            }

            .model-tile-meta {
                display: flex;
                gap: 6px;
                font-size: 0.75rem;
                color: var(--gray-light);
                opacity: 0.7;
                flex-wrap: wrap;
            }

            /* List view styles for model-tile */
            .workflow-grid.list-view .model-tile {
                flex-direction: row;
                align-items: flex-start;
                padding: 12px 16px;
                gap: 12px;
                min-height: auto;
            }

            .workflow-grid.list-view .model-tile .model-tile-head {
                flex: 1;
                flex-direction: column;
                align-items: flex-start;
            }

            .workflow-grid.list-view .model-tile .model-tile-head > div {
                width: 100%;
            }

            .workflow-grid.list-view .model-tile .model-tile-name {
                font-size: 0.9rem;
                margin-bottom: 2px;
            }

            .workflow-grid.list-view .model-tile .model-tile-desc {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 11px;
                margin-top: 2px;
            }

            .workflow-grid.list-view .model-tile .model-tile-meta {
                margin-top: 2px;
            }

            .workflow-grid.list-view .model-tile.selected::before {
                top: 50%;
                right: 12px;
                transform: translateY(-50%);
                width: 20px;
                height: 20px;
                font-size: 12px;
            }

            .workflow-card-title {
                font-weight: 600;
                color: var(--text-color);
                font-size: 12px;
                margin-bottom: 4px;
                line-height: 1.3;
            }

            .workflow-card-description {
                font-size: 0.75rem;
                color: var(--gray-light);
                opacity: 0.8;
                line-height: 1.3;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .workflow-card-status {
                position: absolute;
                top: 8px;
                left: 8px;
                font-size: 13px;
            }

            /* Workflow error state styles */
            .workflow-error-state {
                grid-column: 1 / -1;
                background: var(--secondary-bg);
                border: 2px solid #ef4444;
                border-radius: 12px;
                padding: 24px;
                text-align: center;
                color: var(--text-color);
            }

            .workflow-error-icon {
                font-size: 3rem;
                margin-bottom: 16px;
                opacity: 0.8;
            }

            .workflow-error-title {
                font-size: 1.25rem;
                font-weight: 600;
                color: #ef4444;
                margin-bottom: 8px;
            }

            .workflow-error-description {
                font-size: 0.9rem;
                color: var(--gray-light);
                margin-bottom: 16px;
                line-height: 1.5;
            }

            .workflow-retry-btn {
                background: var(--accent-color);
                color: var(--bg-color);
                border: none;
                padding: 8px 16px;
                border-radius: 6px;
                cursor: pointer;
                font-size: 0.9rem;
                font-weight: 500;
                transition: all 0.2s ease;
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }

            .workflow-retry-btn:hover {
                opacity: 0.9;
                transform: translateY(-1px);
            }

            /* View Toggle Buttons */
            .view-toggle-buttons {
                display: flex;
                gap: 4px;
                align-items: center;
            }

            .view-toggle-btn {
                background: var(--secondary-bg);
                border: 1px solid var(--border-color);
                color: var(--text-color);
                padding: 6px 8px;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
                font-size: 0.8rem;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 32px;
            }

            .view-toggle-btn:hover {
                background: var(--accent-color);
                color: var(--bg-color);
                border-color: var(--accent-color);
            }

            .view-toggle-btn.active {
                background: var(--accent-color);
                color: var(--bg-color);
                border-color: var(--accent-color);
            }

            /* List View Styles */
            .workflow-grid.list-view {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .workflow-grid.list-view .workflow-card {
                display: flex;
                align-items: flex-start;
                padding: 12px 16px;
                gap: 12px;
                text-align: left;
                min-height: auto;
            }

            .workflow-grid.list-view .workflow-card .workflow-card-icon {
                font-size: 1.5rem;
                margin-bottom: 0;
                flex-shrink: 0;
            }

            .workflow-grid.list-view .workflow-card .workflow-card-text {
                flex: 1;
                display: flex;
                flex-direction: column;
                min-width: 0; /* Allow text to wrap */
            }

            .workflow-grid.list-view .workflow-card .workflow-card-title {
                font-size: 0.9rem;
                margin-bottom: 2px;
                line-height: 1.2;
            }

            .workflow-grid.list-view .workflow-card .workflow-card-description {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 0.75rem;
                color: var(--gray-light);
                opacity: 0.8;
                line-height: 1.3;
                margin-top: 2px;
            }

            .workflow-grid.list-view .workflow-card.selected::before {
                content: '✓';
                position: absolute;
                top: 50%;
                right: 12px;
                transform: translateY(-50%);
                background: #ffd700;
                color: #000;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 12px;
            }

            .workflow-grid.list-view .workflow-new-badge {
                position: absolute;
                top: 8px;
                right: 8px;
                background: #ff6b6b;
                color: white;
                padding: 2px 6px;
                border-radius: 4px;
                font-size: 0.7rem;
                font-weight: bold;
                z-index: 1;
            }

            @media (max-width: 768px) {
                .workflow-grid {
                    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                    gap: 10px;
					max-height: none!important;
                }

                .workflow-card {
                    padding: 12px;
                }

                .workflow-card-icon {
                    font-size: 1.5rem;
                }

                .workflow-card-title {
                    font-size: 0.85rem;
                }

                .view-toggle-buttons {
                    gap: 2px;
                }

                .view-toggle-btn {
                    padding: 4px 6px;
                    min-width: 28px;
                    font-size: 0.75rem;
                }

                .workflow-grid.list-view .workflow-card {
                    padding: 10px 12px;
                    gap: 10px;
                }

                .workflow-grid.list-view .workflow-card .workflow-card-icon {
                    font-size: 1.3rem;
                }

                .workflow-grid.list-view .workflow-card .workflow-card-title {
                    font-size: 0.85rem;
                }

                .workflow-grid.list-view .workflow-card .workflow-card-description {
                    font-size: 0.7rem;
                    -webkit-line-clamp: 2;
                }
            }

            .textarea-container {
                position: relative;
            }

            .prompt-textarea,
            textarea.form-control {
                min-height: 130px;
                resize: vertical;
                line-height: 1.6;
            }


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

            /* ===== BUTTONS ===== */
            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 10px 18px;
                border: none;
                border-radius: 12px;
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                text-decoration: none;
                -webkit-appearance: none;
                -webkit-tap-highlight-color: transparent;
                user-select: none;
                -webkit-user-select: none;
            }

            .btn-primary {
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                color: white;
                box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
            }

            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
            }

            .btn-primary:active {
                transform: translateY(0);
                box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.3);
            }

            .btn-primary:disabled {
                background: var(--border-color);
                cursor: not-allowed;
                transform: none;
                box-shadow: none;
                -webkit-transform: none;
            }

            /* Auth Submit Button - Enhanced for Feedback Forms */
            .auth-submit-btn {
                width: 100%;
                padding: 1rem 1.5rem;
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                color: white;
                border: none;
                border-radius: 12px;
                font-weight: 700;
                font-size: 13px;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.4);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                position: relative;
                overflow: hidden;
            }

            .auth-submit-btn::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                transition: left 0.5s;
            }

            .auth-submit-btn:hover::before {
                left: 100%;
            }

            .auth-submit-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.6);
            }

            .auth-submit-btn:active {
                transform: translateY(0);
                box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.4);
            }

            .auth-submit-btn:disabled {
                background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
                cursor: not-allowed;
                transform: none;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                opacity: 0.7;
            }

            .auth-submit-btn:disabled::before {
                display: none;
            }

            /* Loading spinner animation */
            .auth-submit-btn .fa-spinner {
                animation: spin 1s linear infinite;
            }

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

            .btn-outline {
                background: transparent;
                border: 2px solid var(--border-color);
                color: var(--text);
                padding: 12px 24px;
            }

            .btn-outline:hover {
                background: rgba(255, 255, 255, 0.05);
                border-color: var(--accent-color);
                color: var(--accent-color);
                transform: translateY(-2px);
            }

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

            /* Delete button variants */
            .btn-outline[style*="var(--error)"] {
                border-color: var(--error) !important;
                color: var(--error) !important;
            }

            .btn-outline[style*="var(--error)"]:hover {
                background: rgba(239, 68, 68, 0.1) !important;
                border-color: #dc2626 !important;
                color: #dc2626 !important;
            }

            /* Job delete button specific */
            .job-delete-btn {
                min-width: 80px;
                padding: 8px 16px !important;
                font-size: 0.875rem !important;
                border-radius: 8px;
                transition: all 0.3s ease;
            }

            .job-delete-btn i {
                font-size: 0.875rem;
            }

            /* Safari mobile specific fixes */
            @media screen and (max-width: 768px) {
                .btn {
                    -webkit-user-select: none;
                    -webkit-touch-callout: none;
                    -webkit-tap-highlight-color: rgba(0,0,0,0);
                    min-height: 48px; /* Minimum touch target size */
                }

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

                .btn:disabled:active {
                    transform: none;
                    -webkit-transform: none;
                }
            }

            .btn-secondary {
                background: var(--secondary-bg);
                border: 1px solid var(--border-color);
                color: var(--text-color);
            }

            .btn-secondary:hover {
                background: var(--accent-color);
                border-color: var(--accent-color);
                color: white;
            }

            .btn-full {
                width: 100%;
            }

            /* Clear Button */
            .clear-btn {
                background: rgba(239, 68, 68, 0.1);
                border: 1.5px solid rgba(239, 68, 68, 0.3);
                color: #ef4444;
                padding: 0.75rem 1.5rem;
                border-radius: 10px;
                font-weight: 600;
                font-size: 0.95rem;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
            }

            .clear-btn:hover {
                background: rgba(239, 68, 68, 0.2);
                border-color: #dc2626;
                color: #dc2626;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
            }

            .clear-btn:active {
                transform: translateY(0);
                box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
            }

            .clear-btn i {
                font-size: 13px;
            }

            /* ===== QUEUE & STATUS ===== */
            .queue-info {
                background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
                border: 1px solid rgba(59, 130, 246, 0.3);
                border-radius: 12px;
                padding: 1.5rem;
                margin: 1.5rem 0;
            }

            .queue-status-container {
                margin-top: 1.5rem;
                padding: 1rem 1.5rem;
                background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--secondary-rgb), 0.1));
                border: 1px solid rgba(var(--accent-rgb), 0.3);
                border-radius: 12px;
                display: none;
            }

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

            .stat-card {
                background: rgba(255, 255, 255, 0.05);
                border-radius: 10px;
                padding: 1rem;
                text-align: center;
            }

            .stat-value {
                font-size: 2rem;
                font-weight: 700;
                color: var(--accent-color);
                margin-bottom: 0.5rem;
            }

            .stat-label {
                font-size: 0.9rem;
                color: var(--gray-light);
            }

            .progress-container {
                margin: 1rem 0;
            }

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

            .progress-fill {
                height: 100%;
                background: linear-gradient(90deg, var(--accent-color), var(--secondary));
                border-radius: 4px;
                width: 0%;
                transition: width 0.5s ease;
            }

            .status-text {
                text-align: center;
                font-weight: 600;
                color: var(--accent);
            }

            /* ===== LOADING INDICATOR ===== */
            .loading-container {
                text-align: center;
                padding: 3rem 0rem 0rem 0rem;
            }

            .spinner {
                width: 60px;
                height: 60px;
                border: 4px solid rgba(255, 255, 255, 0.1);
                border-left: 4px solid var(--accent-color);
                border-radius: 50%;
                animation: spin 1s linear infinite;
                margin: 0 auto 1.5rem;
            }

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

                100% {
                    transform: rotate(360deg);
                }
            }

            .loading-text {
                font-size: 1.2rem;
                font-weight: 600;
                color: var(--accent);
            }

            /* ===== IMAGE RESULTS ===== */
            .result-container {
                text-align: center;
                padding: 2rem 0rem;
            }

            .generated-image {
                max-width: 100%;
                border-radius: 16px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                border: 2px solid rgba(255, 255, 255, 0.1);
                margin-bottom: 1.5rem;
                /* Mobile responsive sizing */
                width: auto;
                height: auto;
            }

            .action-buttons {
                display: flex;
                gap: 1rem;
                justify-content: center;
                flex-wrap: wrap;
            }

            /* ===== FAQ SECTION ===== */
            .faq-container {
                max-width: 800px;
                margin: 0 auto;
            }

            .faq-item {
                background: var(--secondary-bg);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 12px;
                margin-bottom: 1rem;
                overflow: hidden;
            }

            .faq-question {
                padding: 1.5rem;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: all 0.3s ease;
            }

            .faq-question:hover {
                background: rgba(255, 255, 255, 0.05);
            }

            .faq-answer {
                padding: 0 1.5rem 1.5rem;
                color: var(--gray-light);
                display: none;
            }

            .faq-item.active .faq-answer {
                display: block;
            }

            .faq-icon {
                transition: transform 0.3s ease;
            }

            .faq-item.active .faq-icon {
                transform: rotate(180deg);
            }

            /* ===== FOOTER ===== */
            .footer {
                background: var(--secondary-bg);
                border-top: 1px solid var(--border-color);
                padding: 4rem 0 2rem;
                margin-top: 4rem;
            }

            .footer-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 2rem;
                margin-bottom: 3rem;
            }

            .footer-column h3 {
                margin-bottom: 1.5rem;
                color: var(--text-color);
            }

            .footer-links {
                list-style: none;
            }

            .footer-links li {
                margin-bottom: 0.8rem;
            }

            .footer-links a {
                color: var(--gray-light);
                text-decoration: none;
                transition: color 0.3s ease;
            }

            .footer-links a:hover {
                color: var(--accent-color);
            }

            .footer-bottom {
                text-align: center;
                padding-top: 2rem;
                border-top: 1px solid var(--border-color);
                color: var(--gray);
            }

            .social-links {
                display: flex;
                gap: 1rem;
                margin-top: 1rem;
            }

            .social-link {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 50%;
                color: var(--text-color);
                text-decoration: none;
                transition: all 0.3s ease;
            }

            .social-link:hover {
                background: var(--accent-color);
                transform: translateY(-3px);
            }

            /* ===== UTILITY CLASSES ===== */
            .hidden {
                display: none !important;
            }

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

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

            .mt-2 {
                margin-top: 2rem;
            }

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

            .mb-1 {
                margin-bottom: 1rem;
            }

            .mb-2 {
                margin-bottom: 2rem;
            }

            .mb-3 {
                margin-bottom: 3rem;
            }

            /* ===== RESPONSIVE DESIGN ===== */
            @media (max-width: 768px) {
                h1 {
                    font-size: 1.8rem;
                }

                h2 {
                    font-size: 2rem;
                }

                .header {
                    padding: 5px 0;
                }

                .header-container {
                    padding: 0 15px;
                    gap: 0.5rem;
                }

                .logo-text {
                    font-size: 1.1rem;
                }

                .logo-img {
                    height: 32px;
                }

                .pro-crown {
                    font-size: 0.9rem;
                    margin-left: 4px;
                }

                .user-info {
                    display: none;
                    /* Hide on mobile to save space */
                }

                .nav {
                    display: none;
                    width: 100%;
                    flex-direction: column;
                    gap: 1rem;
                    margin-top: 1rem;
                    position: absolute;
                    top: 60px;
                    left: 0;
                    right: 0;
                    background: var(--secondary-bg);
                    padding: 1rem;
                    border-bottom: 1px solid var(--border-color);
                    z-index: 999;
                }

                .nav.open {
                    display: flex;
                }

                .nav-link {
                    font-size: 0.9rem;
                    padding: 0.75rem 1rem;
                    width: 100%;
                    border-radius: 8px;
                    transition: all 0.3s ease;
                }

                .nav-link:hover {
                    background: rgba(99, 102, 241, 0.1);
                }

                .nav-link::after {
                    display: none;
                }

                .mobile-actions {
                    order: -1;
                    margin-left: auto;
                    gap: 0.5rem;
                }

                .mobile-menu-btn {
                    display: block;
                }

                /* Show a compact Login button in the bar when logged out */
                button.mobile-login-btn {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.4rem;
                    width: auto;
                    padding: 0.45rem 0.85rem;
                    font-size: 0.85rem;
                    margin: 0;
                    white-space: nowrap;
                }

                /* The in-bar Login replaces the nav Login on mobile — hide the
                   nav copy so the burger menu doesn't show a second Login button.
                   (JS reads #loginBtn's inline style, so this !important is safe.) */
                #loginBtn { display: none !important; }

                .nav .btn {
                    width: 100%;
                    padding: 0.75rem 1rem;
                    font-size: 0.9rem;
                    margin-left: 0 !important;
                    margin-bottom: 0.5rem;
                }

                .theme-switcher-btn {
                    width: 100%;
                    padding: 0.75rem 1rem;
                    border-radius: 8px;
                    background: rgba(99, 102, 241, 0.1);
                    border: 1px solid rgba(99, 102, 241, 0.3);
                    color: var(--text-color);
                    transition: all 0.3s ease;
                    font-size: 0.9rem;
                }

                .theme-switcher-btn:hover {
                    background: rgba(99, 102, 241, 0.2);
                }

                .form-row {
                    grid-template-columns: 1fr;
                }

                .stats-grid {
                    grid-template-columns: 1fr;
                }

                .generation-section {
                    padding: 1rem;
                }

                .action-buttons {
                    flex-direction: column;
                }

                .stats-bar {
                    flex-direction: column;
                    text-align: center;
                }
                .stat-value {
                    font-size: 1.2rem;
                }
                /* Mobile image sizing */
                .generated-image {
                    max-width: 90% !important;
                    height: auto;
                }

                .result-container {
                    padding: 1rem 0rem;
                }
            }

            @media (max-width: 480px) {
                .logo-text {
                    font-size: 0.95rem;
                }

                .logo-img {
                    height: 28px;
                }

                .pro-crown {
                    display: none;
                }

                .nav-link {
                    font-size: 0.85rem;
                }

                .generated-image {
                    width: 95% !important;
                    max-width: 95% !important;
                }

                .generation-section {
                    padding: 1rem;
                }

                .hero {
                    padding: 80px 0 0px;
                }
            }

            /* ===== ANIMATIONS ===== */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }

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

            .fade-in {
                animation: fadeIn 0.5s ease forwards;
            }

            .pulse {
                animation: pulse 2s infinite;
            }

            @keyframes pulse {
                0% {
                    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
                }

                70% {
                    box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
                }

                100% {
                    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
                }
            }

            /* ===== ERROR & SUCCESS STATES ===== */
            .error-message {
                /* background: rgba(239, 68, 68, 0.1); */
                border: 1px solid var(--error);
                border-radius: 10px;
                padding: 10px 30px;
                margin: 1rem 0;
                color: #ffffff;
                background-color: red;
                z-index: 100000;
                position: fixed;
                bottom: 0px;
                font-size: 12px;
            }

            .success-message {
                background: rgba(16, 185, 129, 0.1);
                border: 1px solid var(--success);
                border-radius: 10px;
                padding: 1.5rem;
                margin: 1rem 0;
                color: var(--success);
            }

            /* ===== STRANGER THINGS LIGHTNING ANIMATION ===== */
            @keyframes lightning {
                0%, 2% {
                    background-image:
                        url('images/images.jpeg?v=1'),
                        radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.2) 0%, transparent 60%),
                        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.2) 0%, transparent 60%),
                        linear-gradient(180deg, #111111 0%, #2a2a2a 50%, #111111 100%);
                    background-size: 100% auto, auto, auto, auto;
                    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
                    background-position: center, auto, auto, auto;
                }
                3%, 15% {
                    background-image:
                        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                        linear-gradient(180deg, #000000 0%, #1a1a1a 50%, #000000 100%);
                }
                16%, 18% {
                    background-image:
                        url('images/images.jpeg?v=1'),
                        radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.2) 0%, transparent 60%),
                        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.2) 0%, transparent 60%),
                        linear-gradient(180deg, #111111 0%, #2a2a2a 50%, #111111 100%);
                    background-size: 100% auto, auto, auto, auto;
                    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
                    background-position: center, auto, auto, auto;
                }
                19%, 35% {
                    background-image:
                        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                        linear-gradient(180deg, #000000 0%, #1a1a1a 50%, #000000 100%);
                }
                36%, 38% {
                    background-image:
                        url('images/images.jpeg?v=1'),
                        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
                        linear-gradient(180deg, #111111 0%, #2a2a2a 50%, #111111 100%);
                    background-size: 100% auto, auto, auto, auto;
                    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
                    background-position: center, auto, auto, auto;
                }
                39%, 50% {
                    background-image:
                        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                        linear-gradient(180deg, #000000 0%, #1a1a1a 50%, #000000 100%);
                }
                51% {
                    background-image:
                        url('images/images.jpeg?v=1'),
                        radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.2) 0%, transparent 60%),
                        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.2) 0%, transparent 60%),
                        linear-gradient(180deg, #111111 0%, #2a2a2a 50%, #111111 100%);
                    background-size: 100% auto, auto, auto, auto;
                    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
                    background-position: center, auto, auto, auto;
                }
                52%, 70% {
                    background-image:
                        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                        linear-gradient(180deg, #000000 0%, #1a1a1a 50%, #000000 100%);
                }
                71%, 75% {
                    background-image:
                        url('images/images.jpeg?v=1'),
                        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
                        linear-gradient(180deg, #111111 0%, #2a2a2a 50%, #111111 100%);
                    background-size: 100% auto, auto, auto, auto;
                    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
                    background-position: center, auto, auto, auto;
                }
                76%, 100% {
                    background-image:
                        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                        linear-gradient(180deg, #000000 0%, #1a1a1a 50%, #000000 100%);
                }
            }

            /* ===== STRANGER THINGS MONSTER FLASH ANIMATION ===== */
            @keyframes monsterFlash {
                0%, 2% {
                    opacity: 0.6;
                }
                3%, 15% {
                    opacity: 0;
                }
                16%, 18% {
                    opacity: 0.6;
                }
                19%, 35% {
                    opacity: 0;
                }
                36%, 38% {
                    opacity: 0.6;
                }
                39%, 50% {
                    opacity: 0;
                }
                51% {
                    opacity: 0.6;
                }
                52%, 70% {
                    opacity: 0;
                }
                71%, 75% {
                    opacity: 0.6;
                }
                76%, 100% {
                    opacity: 0;
                }
            }

            /* ===== CUSTOM SCROLLBAR ===== */
            ::-webkit-scrollbar {
                width: 8px;
            }

            ::-webkit-scrollbar-track {
                background: var(--secondary-bg);
            }

            ::-webkit-scrollbar-thumb {
                background: var(--accent-color);
                border-radius: 4px;
            }

            ::-webkit-scrollbar-thumb:hover {
                background: var(--primary-dark);
            }

            /* ===== FLOATING ANNOUNCEMENT BANNER ===== */
            .announcement-banner {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background: linear-gradient(135deg, #f59e0b, #d97706);
                color: white;
                padding: 15px 20px;
                z-index: 9999;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
                animation: slideDown 0.5s ease-out;
                border-bottom: 2px solid rgba(255, 255, 255, 0.2);
            }

            .announcement-content {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20px;
            }

            .announcement-text {
                flex: 1;
                display: flex;
                align-items: center;
                gap: 12px;
                font-weight: 600;
            }

            .announcement-icon {
                font-size: 1.4rem;
                flex-shrink: 0;
            }

            .announcement-message {
                margin: 0;
                font-size: 13px;
                line-height: 1.4;
            }

            .announcement-message strong {
                color: #1e293b;
            }

            .close-announcement {
                background: rgba(255, 255, 255, 0.2);
                border: 2px solid rgba(255, 255, 255, 0.3);
                color: white;
                border-radius: 50%;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s ease;
                flex-shrink: 0;
                font-size: 1.1rem;
            }

            .close-announcement:hover {
                background: rgba(255, 255, 255, 0.3);
                transform: scale(1.1);
            }

            /* Animation for banner */
            @keyframes slideDown {
                from {
                    transform: translateY(-100%);
                    opacity: 0;
                }

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

            /* Adjust body padding when banner is visible */
            body.has-announcement {
                padding-top: 70px;
            }

            /* Different banner types */
            .announcement-maintenance {
                background: linear-gradient(135deg, #f59e0b, #d97706);
            }

            .announcement-info {
                background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            }

            .announcement-success {
                background: linear-gradient(135deg, #10b981, #047857);
            }

            .announcement-warning {
                background: linear-gradient(135deg, #ef4444, #dc2626);
            }

            /* Responsive design */
            @media (max-width: 768px) {
                .announcement-banner {
                    padding: 12px 15px;
                }

                .announcement-content {
                    flex-direction: column;
                    gap: 10px;
                    text-align: center;
                }

                .announcement-text {
                    flex-direction: column;
                    gap: 8px;
                }

                body.has-announcement {
                    padding-top: 120px;
                }

                .announcement-message {
                    font-size: 0.9rem;
                }
            }

            @media (max-width: 480px) {
                .announcement-banner {
                    padding: 10px 12px;
                }

                .announcement-message {
                    font-size: 0.85rem;
                }

                body.has-announcement {
                    padding-top: 130px;
                }
            }


            /* Enhanced progress bar styles */
            .progress-container {
                margin: 1rem 0;
            }

            .progress-bar {
                width: 100%;
                height: 12px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 6px;
                overflow: hidden;
                position: relative;
            }

            .progress-fill {
                height: 100%;
                background: linear-gradient(90deg, var(--accent-color), var(--secondary));
                border-radius: 6px;
                transition: width 0.3s ease;
                position: relative;
            }

            /* Animated pulse effect for active generation */
            .progress-fill.generating::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                animation: shimmer 2s infinite;
            }

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

                100% {
                    transform: translateX(100%);
                }
            }

            /* Step counter styling */
            .step-counter {
                font-size: 0.9rem;
                color: var(--gray-light);
                text-align: center;
                margin-top: 0.5rem;
            }

            .job-item {
                background: var(--secondary-bg);
                border: 1px solid var(--border-color);
                border-radius: 8px;
                padding: 1rem;
                margin-bottom: 0.5rem;
                color: var(--text-color);
                transition: all 0.3s ease;
            }

            .job-item:hover {
                border-color: var(--accent-color);
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            /* Mobile responsive styles for job history */
            @media (max-width: 400px) {
                .job-item {
                    padding: 0.75rem !important;
                    margin-bottom: 0.75rem !important;
                    font-size: 0.85rem !important;
                }

                .job-item strong {
                    font-size: 0.85rem !important;
                    line-height: 1.2 !important;
                }

                .job-item .btn {
                    padding: 0.35rem 0.6rem !important;
                    font-size: 0.75rem !important;
                    min-width: auto !important;
                }

                .job-item .btn.job-delete-btn {
                    padding: 0.2rem 0.4rem !important;
                    font-size: 0.65rem !important;
                }

                .job-item code {
                    font-size: 0.75rem !important;
                    padding: 2px 4px !important;
                }

                .job-item small {
                    font-size: 0.75rem !important;
                }

                /* Ensure job history container doesn't overflow */
                #userJobsContainer {
                    width: 100% !important;
                    max-width: 100% !important;
                    overflow-x: hidden !important;
                }

                /* Mobile styles for delete all button */
                #deleteAllJobsBtn {
                    font-size: 0.85rem !important;
                    padding: 8px 16px !important;
                    white-space: nowrap;
                    background: transparent;
                    border: 2px solid var(--error) !important;
                    color: var(--error) !important;
                }

                #deleteAllJobsBtn:hover {
                    background: rgba(239, 68, 68, 0.1) !important;
                    border-color: #dc2626 !important;
                    color: #dc2626 !important;
                }

                .section-title h2 {
                    font-size: 1.5rem !important;
                    margin-bottom: 0.25rem !important;
                }

                .section-title p {
                    font-size: 0.85rem !important;
                }
            }

            /* Enhancement Indicator Styles */
            .enhancement-indicator {
                animation: fadeIn 0.5s ease;
            }

            .enhancement-indicator .revert-btn {
                background: rgba(239, 68, 68, 0.1);
                border: 1px solid rgba(239, 68, 68, 0.3);
                color: var(--error);
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 0.8rem;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .enhancement-indicator .revert-btn:hover {
                background: rgba(239, 68, 68, 0.2);
            }

            /* Animation for the indicator */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(-10px);
                }

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


            /* ===== FULL-SCREEN IMAGE VIEWER ===== */
            .image-viewer-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.95);
                backdrop-filter: blur(20px);
                z-index: 9999;
                display: none;
                opacity: 0;
                transition: opacity 0.3s ease;
                cursor: pointer;
            }

            .image-viewer-overlay.active {
                display: flex;
                opacity: 1;
            }

            .image-viewer-container {
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px;
            }

            .image-viewer-content {
                position: relative;
                max-width: 95%;
                max-height: 95%;
                display: flex;
                align-items: center;
                justify-content: center;
                transform: scale(0.8);
                opacity: 0;
                transition: all 0.3s ease;
            }

            .image-viewer-overlay.active .image-viewer-content {
                transform: scale(1);
                opacity: 1;
            }

            .image-viewer-img {
                max-width: 100%;
                max-height: 100vh;
                object-fit: contain;
                border-radius: 12px;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
                cursor: default;
            }

            /* Close button */
            .image-viewer-close {
                position: absolute;
                top: 20px;
                right: 20px;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                color: white;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                z-index: 10000;
                transition: all 0.3s ease;
                font-size: 1.5rem;
            }

            .image-viewer-close:hover {
                background: rgba(255, 255, 255, 0.2);
                transform: scale(1.1);
            }

            /* Download button in viewer */
            .image-viewer-download {
                position: absolute;
                bottom: 30px;
                right: 90px;
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                color: white;
                padding: 12px 24px;
                border-radius: 25px;
                text-decoration: none;
                font-weight: 600;
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                transition: all 0.3s ease;
                z-index: 10000;
                box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
            }

            .image-viewer-download:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
            }

            /* Image info */
            .image-viewer-info {
                position: absolute;
                bottom: 30px;
                left: 30px;
                background: rgba(0, 0, 0, 0.7);
                backdrop-filter: blur(10px);
                padding: 15px 20px;
                border-radius: 12px;
                color: white;
                max-width: 400px;
                border: 1px solid rgba(255, 255, 255, 0.1);
            }

            .image-viewer-prompt {
                font-size: 0.9rem;
                line-height: 1.4;
                margin: 0;
                color: var(--gray-light);
            }

            /* Loading indicator for viewer */
            .image-viewer-loading {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 1.2rem;
                display: none;
            }

            .image-viewer-loading.active {
                display: block;
            }

            /* Mobile optimizations */
            @media (max-width: 768px) {
                .image-viewer-container {
                    padding: 10px;
                }

                .image-viewer-content {
                    max-width: 100%;
                    max-height: 100%;
                }

                .image-viewer-close {
                    top: 10px;
                    right: 10px;
                    width: 40px;
                    height: 40px;
                    font-size: 1.2rem;
                }

                .image-viewer-download {
                    bottom: 20px;
                    right: 70px;
                    padding: 10px 20px;
                    font-size: 0.9rem;
                }

                .image-viewer-info {
                    bottom: 20px;
                    left: 20px;
                    right: 20px;
                    max-width: none;
                }

                .image-viewer-prompt {
                    font-size: 0.8rem;
                }
            }

            @media (max-width: 480px) {
                .image-viewer-download {
                    bottom: 15px;
                    right: 60px;
                    padding: 8px 16px;
                    font-size: 0.8rem;
                }

                .image-viewer-info {
                    bottom: 15px;
                    left: 15px;
                    right: 15px;
                    padding: 12px 15px;
                }

                .image-viewer-close {
                    top: 5px;
                    right: 5px;
                    width: 35px;
                    height: 35px;
                }
            }

            /* Touch device optimizations */
            @media (hover: none) and (pointer: coarse) {
                .image-viewer-close {
                    width: 44px;
                    height: 44px;
                }

                .image-viewer-download {
                    padding: 14px 20px;
                }
            }

            /* Animation for image loading */
            @keyframes fadeInScale {
                from {
                    opacity: 0;
                    transform: scale(0.9);
                }

                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            /* Swipe to close hint */
            .image-viewer-swipe-hint {
                position: absolute;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                color: rgba(255, 255, 255, 0.7);
                font-size: 0.8rem;
                display: none;
            }

            @media (max-width: 768px) {
                .image-viewer-swipe-hint {
                    display: block;
                }
            }

            /* Workflow Selection Styles */
            .workflow-option {
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                padding: 1rem;
                margin-bottom: 0.5rem;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .workflow-option:hover {
                border-color: var(--accent-color);
                background: rgba(99, 102, 241, 0.05);
            }

            .workflow-option.selected {
                border-color: var(--accent-color);
                background: rgba(99, 102, 241, 0.1);
            }

            .workflow-option.disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }

            .workflow-option.disabled:hover {
                border-color: rgba(255, 255, 255, 0.1);
                background: transparent;
            }

            .workflow-badge {
                background: var(--accent-color);
                color: white;
                padding: 0.25rem 0.5rem;
                border-radius: 4px;
                font-size: 0.8rem;
                margin-left: 0.5rem;
            }

            .workflow-badge.coming-soon {
                background: var(--warning);
            }

            .workflow-badge.enabled {
                background: var(--success);
            }

            /* Session Status Indicator */
            .session-status {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.5rem 1rem;
                background: rgba(16, 185, 129, 0.1);
                border: 1px solid rgba(16, 185, 129, 0.3);
                border-radius: 8px;
                font-size: 0.9rem;
                color: var(--success);
            }

            .session-status.inactive {
                background: rgba(107, 114, 128, 0.1);
                border-color: rgba(107, 114, 128, 0.3);
                color: var(--gray);
            }

            /* Image Upload Area */
            .image-upload-area {
                border: 2px dashed var(--border-color);
                border-radius: 10px;
                padding: 2rem;
                text-align: center;
                background: rgba(255, 255, 255, 0.05);
                transition: all 0.3s ease;
                cursor: pointer;
            }

            .image-upload-area:hover {
                border-color: var(--accent-color);
                background: rgba(99, 102, 241, 0.05);
            }

            .image-upload-area.dragover {
                border-color: var(--accent-color);
                background: rgba(99, 102, 241, 0.1);
            }

            .uploaded-image-preview {
                position: relative;
                display: inline-block;
                margin: 0.5rem;
            }

            .uploaded-image-preview img {
                width: 100px;
                /* height: 100px; */
                object-fit: cover;
                border-radius: 8px;
                border: 2px solid rgba(255, 255, 255, 0.1);
            }

            .remove-image {
                position: absolute;
                top: -8px;
                right: -8px;
                background: var(--error);
                color: white;
                border: none;
                border-radius: 50%;
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                font-size: 0.8rem;
            }

            /* Image Upload Styles */
            .image-upload-area {
                margin: 20px 0;
                padding: 20px;
                border: 2px dashed #ddd;
                border-radius: 10px;
                background: #fafafa;
            }

            .upload-zone {
                position: relative;
                cursor: pointer;
                transition: all 0.3s ease;
                min-height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .upload-zone:hover {
                border-color: #007bff;
            }

            .upload-zone.drag-over {
                border-color: #007bff;
                background: #e3f2fd;
            }

            .upload-zone.uploading {
                opacity: 0.6;
                pointer-events: none;
            }

            .upload-zone.has-image {
                border-style: solid;
                border-color: #28a745;
            }

            .upload-placeholder {
                text-align: center;
                color: #666;
            }

            .upload-icon {
                font-size: 2em;
                margin-bottom: 10px;
            }

            .image-preview {
                text-align: center;
            }

            #preview-img {
                max-width: 200px;
                max-height: 200px;
                border-radius: 5px;
                margin-bottom: 10px;
            }

            #remove-image {
                background: #dc3545;
                color: white;
                border: none;
                padding: 5px 10px;
                border-radius: 3px;
                cursor: pointer;
            }

            #remove-image:hover {
                background: #c82333;
            }

            /* Disabled state for generate button */
            #generate-btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }

            /* Add these styles to your existing CSS */

            /* Image Upload Styles - Fixed */
            .image-upload-area {
                border: 2px dashed var(--border-color);
                border-radius: 10px;
                padding: 2rem;
                text-align: center;
                background: var(--secondary-bg);
                transition: all 0.3s ease;
                margin: 1rem 0;
            }

            .image-upload-area:hover {
                border-color: var(--accent-color);
                background: rgba(99, 102, 241, 0.05);
            }

            .image-upload-area.dragover {
                border-color: var(--accent-color);
                background: rgba(99, 102, 241, 0.1);
                transform: scale(1.02);
            }

            .upload-zone {
                position: relative;
                cursor: pointer;
                transition: all 0.3s ease;
                min-height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }

            .upload-placeholder {
                text-align: center;
                color: var(--gray-light);
                transition: all 0.3s ease;
            }

            .upload-placeholder .upload-icon {
                font-size: 3rem;
                margin-bottom: 1rem;
                color: var(--accent-color);
                opacity: 0.7;
            }

            .upload-placeholder p {
                margin-bottom: 0.5rem;
                font-weight: 600;
                color: var(--text-color);
            }

            .upload-placeholder small {
                color: var(--gray);
            }

            .upload-loading {
                text-align: center;
                padding: 1rem;
            }

            .upload-loading p {
                color: var(--accent);
                font-weight: 600;
            }

            .image-preview {
                text-align: center;
                animation: fadeIn 0.5s ease;
            }

            #preview-img {
                max-width: 200px;
                max-height: 200px;
                border-radius: 8px;
                margin-bottom: 1rem;
                border: 2px solid rgba(255, 255, 255, 0.1);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            }

            #remove-image {
                background: var(--error);
                color: white;
                border: none;
                padding: 0.5rem 1rem;
                border-radius: 6px;
                cursor: pointer;
                font-size: 0.9rem;
                transition: all 0.3s ease;
            }

            #remove-image:hover {
                background: #dc2626;
                transform: translateY(-2px);
            }

            /* Upload states */
            .upload-zone.uploading .upload-placeholder,
            .upload-zone.has-image .upload-placeholder {
                display: none;
            }

            .upload-zone.uploading .upload-loading {
                display: block;
            }

            .upload-zone.has-image .image-preview {
                display: block;
            }

            /* Generate button disabled state */
            #generate-btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
                transform: none !important;
                box-shadow: none !important;
            }

            #generate-btn:disabled:hover {
                transform: none !important;
            }

            /* Make sure hidden class works properly */
            .hidden {
                display: none !important;
            }

            /* ===== FACE SWAP INSTRUCTIONS STYLES ===== */
            .face-swap-instructions {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
                border: 1px solid rgba(99, 102, 241, 0.3);
                border-radius: 10px;
                padding: 1rem;
                margin-top: 1rem;
            }

            .face-swap-header {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 0.5rem;
            }

            .face-swap-header i {
                color: #3b82f6;
                font-size: 1.2rem;
            }

            .face-swap-header strong {
                color: var(--text-color);
            }

            .face-swap-text {
                color: var(--gray-light);
                margin: 0;
                font-size: 0.9rem;
            }

            .face-swap-details {
                color: var(--accent);
            }

            /* ===== UPLOAD ACTIONS STYLES ===== */
            .upload-actions {
                margin-top: 1rem;
                text-align: center;
            }

            /* ===== SHOW UPLOADED CONTENT LINK ===== */
            .show-uploaded-content-link {
                margin-top: 0.75rem;
                text-align: center;
            }

            .show-uploaded-link {
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
                padding: 0.45rem 1rem;
                background: linear-gradient(135deg, rgba(212, 160, 23, 0.12), rgba(255, 200, 50, 0.08));
                border: 1px solid rgba(212, 160, 23, 0.5);
                border-radius: 8px;
                color: #d4a017;
                text-decoration: none;
                font-size: 0.78rem;
                font-weight: 600;
                letter-spacing: 0.01em;
                transition: all 0.25s ease;
                box-shadow: 0 0 8px rgba(212, 160, 23, 0.12);
            }

            .show-uploaded-link:hover {
                background: linear-gradient(135deg, rgba(212, 160, 23, 0.22), rgba(255, 200, 50, 0.15));
                border-color: #f0c040;
                color: #f5c842;
                transform: translateY(-1px);
                box-shadow: 0 3px 14px rgba(212, 160, 23, 0.35);
            }

            .show-uploaded-link i {
                font-size: 0.8rem;
                color: #c89a10;
            }

            .show-uploaded-link:hover i {
                color: #f5c842;
            }

            .add-more-btn {
                margin-right: 0.5rem;
            }

            .upload-spinner {
                width: 40px;
                height: 40px;
                margin: 0 auto 1rem;
            }

            /* Animation for smooth transitions */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(10px);
                }

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

            @keyframes i2vQualityPulse {
                0%, 100% {
                    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
                }
                20% {
                    box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.16);
                }
                60% {
                    box-shadow: 0 0 0 14px rgba(251, 191, 36, 0.08);
                }
            }

            #i2vQuality.i2v-quality-highlight {
                border-color: #fbbf24 !important;
                box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.35);
                animation: i2vQualityPulse 2s ease-in-out forwards;
            }

            #i2vQualitySection.i2v-quality-highlight label {
                color: #fbbf24;
            }

            .fade-in {
                animation: fadeIn 0.5s ease forwards;
            }

            /* ===== SKELETAL LOADER ===== */
            .skeletal-loader {
                width: 100%;
                max-width: 100%;
                border-radius: 16px;
                background: linear-gradient(90deg,
                        rgba(255, 255, 255, 0.1) 25%,
                        rgba(255, 255, 255, 0.2) 50%,
                        rgba(255, 255, 255, 0.1) 75%);
                background-size: 200% 100%;
                animation: shimmer 2s infinite;
                position: relative;
                overflow: hidden;
            }

            .skeletal-loader::before {
                content: '';
                display: block;
                padding-top: 100%;
                /* Default 1:1 aspect ratio */
            }

            /* Aspect ratio variations */
            .skeletal-loader[data-aspect-ratio="1:1"]::before {
                padding-top: 100%;
            }

            .skeletal-loader[data-aspect-ratio="3:4"]::before {
                padding-top: 133.33%;
            }

            .skeletal-loader[data-aspect-ratio="4:3"]::before {
                padding-top: 75%;
            }

            .skeletal-loader[data-aspect-ratio="16:9"]::before {
                padding-top: 56.25%;
            }

            .skeletal-loader[data-aspect-ratio="9:16"]::before {
                padding-top: 177.78%;
            }

            .skeletal-loader-content {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--gray-light);
                font-size: 13px;
            }

            .skeletal-loader.hidden {
                display: none;
            }

            /* Enhanced shimmer animation */
            @keyframes shimmer {
                0% {
                    background-position: -200% 0;
                }

                100% {
                    background-position: 200% 0;
                }
            }

            /* Loading dots animation */
            .loading-dots {
                display: inline-block;
                position: relative;
                width: 80px;
                height: 80px;
            }

            .loading-dots div {
                position: absolute;
                top: 33px;
                width: 13px;
                height: 13px;
                border-radius: 50%;
                background: var(--accent);
                animation-timing-function: cubic-bezier(0, 1, 1, 0);
            }

            .loading-dots div:nth-child(1) {
                left: 8px;
                animation: loading-dots1 0.6s infinite;
            }

            .loading-dots div:nth-child(2) {
                left: 8px;
                animation: loading-dots2 0.6s infinite;
            }

            .loading-dots div:nth-child(3) {
                left: 32px;
                animation: loading-dots2 0.6s infinite;
            }

            .loading-dots div:nth-child(4) {
                left: 56px;
                animation: loading-dots3 0.6s infinite;
            }

            @keyframes loading-dots1 {
                0% {
                    transform: scale(0);
                }

                100% {
                    transform: scale(1);
                }
            }

            @keyframes loading-dots3 {
                0% {
                    transform: scale(1);
                }

                100% {
                    transform: scale(0);
                }
            }

            @keyframes loading-dots2 {
                0% {
                    transform: translate(0, 0);
                }

                100% {
                    transform: translate(24px, 0);
                }
            }

            /* Image container for proper sizing */
            .image-container {
                position: relative;
                display: inline-block;
                max-width: 100%;
            }

            .generated-image {
                transition: opacity 0.3s ease;
            }

            .generated-image.loading {
                opacity: 0;
            }

            .generated-image.loaded {
                opacity: 1;
            }

            /* ===== FLOATING PROGRESS BAR ===== */
            .floating-progress-bar {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                background: rgba(15, 23, 42, 0.95);
                backdrop-filter: blur(20px);
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                padding: 15px 20px;
                z-index: 9998;
                box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3);
                transition: transform 0.3s ease;
            }

            .progress-content {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20px;
                flex-wrap: wrap;
            }

            .progress-info {
                display: flex;
                align-items: center;
                gap: 15px;
                flex: 1;
                min-width: 300px;
            }

            .progress-text {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .progress-title {
                font-weight: 700;
                font-size: 13px;
                color: var(--text-color);
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .progress-title i {
                color: var(--accent);
            }

            .progress-goal {
                font-size: 0.9rem;
                color: var(--gray-light);
            }

            .progress-container {
                flex: 1;
                min-width: 200px;
                max-width: 400px;
            }

            .progress-bar-wrapper {
                width: 100%;
                height: 12px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 6px;
                overflow: hidden;
                position: relative;
            }

            .progress-fill {
                height: 100%;
                background: linear-gradient(90deg, var(--accent-color), var(--secondary));
                border-radius: 6px;
                transition: width 0.5s ease;
                position: relative;
                box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
                animation: glow 2s ease-in-out infinite alternate;
            }

            @keyframes glow {
                from {
                    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
                }

                to {
                    box-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 30px rgba(99, 102, 241, 0.6);
                }
            }

            .progress-stats {
                display: flex;
                align-items: center;
                gap: 10px;
                font-weight: 600;
            }

            .progress-amount {
                color: var(--accent);
                font-size: 1.1rem;
            }

            .progress-percentage {
                color: var(--gray-light);
                font-size: 0.9rem;
            }

            .donation-actions {
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .donate-btn {
                background: linear-gradient(135deg, #FFDD00, #FFAA00);
                color: #000;
                border: none;
                padding: 10px 20px;
                border-radius: 25px;
                font-weight: 700;
                text-decoration: none;
                display: flex;
                align-items: center;
                gap: 8px;
                transition: all 0.3s ease;
                box-shadow: 0 4px 15px rgba(255, 221, 0, 0.3);
            }

            .donate-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(255, 221, 0, 0.4);
                color: #000;
            }

            .close-progress {
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.2);
                color: var(--gray-light);
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s ease;
                flex-shrink: 0;
            }

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

            /* Responsive design */
            @media (max-width: 768px) {
                .floating-progress-bar {
                    padding: 12px 15px;
                }

                .progress-content {
                    flex-direction: column;
                    gap: 15px;
                    text-align: center;
                }

                .progress-info {
                    flex-direction: column;
                    gap: 10px;
                }

                .progress-container {
                    max-width: 100%;
                }

                .donation-actions {
                    width: 100%;
                    justify-content: center;
                }
            }

            @media (max-width: 480px) {
                .floating-progress-bar {
                    padding: 10px 12px;
                }

                .progress-title {
                    font-size: 0.9rem;
                }

                .donate-btn {
                    padding: 8px 16px;
                    font-size: 0.9rem;
                }
            }


            /* ===== SUPPORTERS SECTION ===== */
            .supporters-section {
                padding: 80px 0;
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(236, 72, 153, 0.05));
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }

            .supporters-container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 20px;
            }

            .supporters-title {
                text-align: center;
                margin-bottom: 3rem;
            }

            .supporters-title h2 {
                font-size: 2.5rem;
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-bottom: 1rem;
            }

            .supporters-title p {
                color: var(--gray-light);
                font-size: 1.1rem;
                max-width: 600px;
                margin: 0 auto;
            }

            .supporters-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 2rem;
                margin-bottom: 3rem;
            }

            .supporter-card {
                background: var(--secondary-bg);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 16px;
                padding: 2rem;
                text-align: center;
                transition: all 0.3s ease;
                backdrop-filter: blur(10px);
                position: relative;
                overflow: hidden;
            }

            .supporter-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
                transition: left 0.5s ease;
            }

            .supporter-card:hover::before {
                left: 100%;
            }

            .supporter-card:hover {
                transform: translateY(-5px);
                border-color: var(--accent-color);
                box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
            }

            .supporter-avatar {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                margin: 0 auto 1.5rem;
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 2rem;
                color: white;
                border: 3px solid rgba(255, 255, 255, 0.1);
            }

            .supporter-name {
                font-size: 1.3rem;
                font-weight: 700;
                color: var(--text-color);
                margin-bottom: 0.5rem;
            }

            .supporter-role {
                color: var(--accent);
                font-weight: 600;
                margin-bottom: 1rem;
                font-size: 0.9rem;
            }

            .supporter-bio {
                color: var(--gray-light);
                font-size: 0.95rem;
                line-height: 1.6;
                margin-bottom: 1.5rem;
            }

            .supporter-link {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                color: var(--accent-color);
                text-decoration: none;
                font-weight: 600;
                transition: all 0.3s ease;
                padding: 8px 16px;
                border: 1px solid var(--accent-color);
                border-radius: 25px;
                font-size: 0.9rem;
            }

            .supporter-link:hover {
                background: var(--accent-color);
                color: white;
                transform: translateY(-2px);
            }

            .support-stats {
                background: var(--secondary-bg);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 16px;
                padding: 2rem;
                text-align: center;
                backdrop-filter: blur(10px);
            }

            .stats-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 2rem;
                margin-bottom: 2rem;
            }

            .stat-item {
                text-align: center;
            }

            .stat-number {
                font-size: 2.5rem;
                font-weight: 800;
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-bottom: 0.5rem;
            }

            .stat-label {
                font-size: 0.9rem;
                color: var(--gray-light);
            }

            .cta-box {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
                border: 1px solid rgba(99, 102, 241, 0.3);
                border-radius: 12px;
                padding: 2rem;
                text-align: center;
            }

            .cta-box h3 {
                color: var(--text-color);
                margin-bottom: 1rem;
                font-size: 1.5rem;
            }

            .cta-box p {
                color: var(--gray-light);
                margin-bottom: 1.5rem;
            }

            .donate-btn {
                background: linear-gradient(135deg, #FFDD00, #FFAA00);
                color: #000;
                border: none;
                padding: 12px 30px;
                border-radius: 25px;
                font-weight: 700;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                transition: all 0.3s ease;
                box-shadow: 0 4px 15px rgba(255, 221, 0, 0.3);
            }

            .donate-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(255, 221, 0, 0.4);
                color: #000;
            }

            /* Badge styles for supporter tiers */
            .supporter-badge {
                position: absolute;
                top: 15px;
                right: 15px;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.7rem;
                font-weight: 700;
                text-transform: uppercase;
            }

            .badge-gold {
                background: linear-gradient(135deg, #FFD700, #FFA500);
                color: #000;
            }

            .badge-silver {
                background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
                color: #000;
            }

            .badge-bronze {
                background: linear-gradient(135deg, #CD7F32, #8B4513);
                color: #fff;
            }

            /* Responsive Design */
            @media (max-width: 768px) {
                .supporters-grid {
                    grid-template-columns: 1fr;
                    gap: 1.5rem;
                }

                .supporters-title h2 {
                    font-size: 2rem;
                }

                .stats-grid {
                    grid-template-columns: 1fr;
                    gap: 1.5rem;
                }

                .stat-number {
                    font-size: 2rem;
                }
            }

            @media (max-width: 480px) {
                .supporters-section {
                    padding: 60px 0;
                }

                .supporter-card {
                    padding: 1.5rem;
                }

                .support-stats {
                    padding: 1.5rem;
                }

                .cta-box {
                    padding: 1.5rem;
                }
            }

            .generated-video {
                max-width: 100%;
                border-radius: 16px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                border: 2px solid rgba(255, 255, 255, 0.1);
                margin-bottom: 1.5rem;
            }

            .video-container {
                position: relative;
                display: inline-block;
                max-width: 100%;
            }

            .video-info {
                background: rgba(99, 102, 241, 0.1);
                border: 1px solid rgba(99, 102, 241, 0.3);
                border-radius: 8px;
                padding: 0.5rem 1rem;
                margin-bottom: 1rem;
            }

            .video-info i {
                color: var(--accent);
                margin-right: 0.5rem;
            }

            .hidden {
                display: none !important;
            }

            .info-message {
                transition: all 0.3s ease;
            }

            .info-message.hidden {
                opacity: 0;
                transform: translateY(-10px);
            }

            /* Add to your existing CSS */
            .info-message {
                transition: all 0.3s ease;
            }

            .info-message.hidden {
                opacity: 0;
                transform: translateY(-10px);
            }

            /* ===== VIDEO WORKFLOW INFO STYLES ===== */
            #videoWorkflowInfo {
                background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--secondary-rgb), 0.1));
                border: 1px solid rgba(var(--accent-rgb), 0.3);
                border-radius: 10px;
                padding: 1rem;
                margin: 1rem 0;
                text-align: center;
            }

            .video-workflow-header {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin-bottom: 0.5rem;
            }

            .video-workflow-header i {
                color: var(--accent-color);
                font-size: 1.2rem;
            }

            .video-workflow-header strong {
                color: var(--text-color);
            }

            .video-workflow-text {
                color: var(--gray-light);
                margin: 0;
                font-size: 0.9rem;
            }

            .video-workflow-details {
                color: var(--accent);
            }

            /* ===== PRIVACY NOTICE STYLES ===== */
            .privacy-notice {
                background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
                border: 2px solid rgba(16, 185, 129, 0.3);
                border-radius: 12px;
                padding: 1.2rem;
                margin-top: 1.5rem;
            }

            .privacy-notice-title {
                color: #10b981;
                margin-bottom: 0.8rem;
            }

            /* ===== LORA STYLES ===== */
            #lora-user-limits {
                display: none;
                background: rgba(59, 130, 246, 0.1);
                border-left: 3px solid #3b82f6;
                padding: 10px;
                margin-bottom: 15px;
                border-radius: 4px;
            }

            .lora-limits-title {
                color: var(--text-color);
            }

            .lora-limits-info {
                margin-top: 5px;
                font-size: 14px;
                color: var(--gray-light);
            }

            .warning-box {
                display: none;
                background: #fef3c7;
                border-left: 3px solid #f59e0b;
                padding: 10px;
                margin-bottom: 10px;
                border-radius: 4px;
            }

            .warning-box i {
                color: #f59e0b;
            }

            #lora-limit-text {
                color: #92400e;
            }

            .no-loras-text {
                color: #9ca3af;
                font-size: 14px;
            }

            .lora-loading {
                grid-column: 1/-1;
                text-align: center;
                padding: 40px;
                color: #9ca3af;
            }

            .lora-loading i {
                font-size: 24px;
            }

            .lora-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;
            }

            .lora-title {
                margin: 0;
                font-size: 13px;
                color: var(--text-color);
            }

            .badge {
                background: #6fb4ff;
                color: white;
                padding: 2px 8px;
                border-radius: 12px;
                font-size: 12px;
                margin-left: 8px;
            }

            /* ===== PILL STYLES ===== */
            .pill {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 4px 10px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 600;
                white-space: nowrap;
                gap: 4px;
            }

            .pill-dot {
                background: rgba(99, 102, 241, 0.15);
                color: #6366f1;
                padding: 4px 10px;
            }

            .pill-dot::before {
                content: '';
                display: inline-block;
                width: 6px;
                height: 6px;
                background: #6366f1;
                border-radius: 50%;
            }

            .pill-amber {
                background: rgba(251, 146, 60, 0.15);
                color: #ea580c;
            }

            .pill-badge {
                background: linear-gradient(135deg, #ff4d8d 0%, #ff7a18 100%);
                color: #fff;
                border: none;
                padding: 3px 9px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                box-shadow:
                    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
                    0 4px 14px rgba(255, 77, 141, 0.45),
                    0 2px 6px rgba(255, 122, 24, 0.35);
                animation: pillBadgePulse 2.2s ease-in-out infinite;
            }
            @keyframes pillBadgePulse {
                0%, 100% {
                    box-shadow:
                        0 0 0 1px rgba(255, 255, 255, 0.18) inset,
                        0 4px 14px rgba(255, 77, 141, 0.45),
                        0 2px 6px rgba(255, 122, 24, 0.35);
                    transform: scale(1);
                }
                50% {
                    box-shadow:
                        0 0 0 1px rgba(255, 255, 255, 0.22) inset,
                        0 6px 22px rgba(255, 77, 141, 0.7),
                        0 3px 10px rgba(255, 122, 24, 0.55);
                    transform: scale(1.05);
                }
            }
            @media (prefers-reduced-motion: reduce) {
                .pill-badge { animation: none; }
            }

            .pill-updated {
                background: rgba(255, 136, 0, 0.12);
                color: #ff5100;
                border: 1px solid #ff5100;
            }

            /* ===== ANNOUNCEMENT STYLES ===== */
            .announcement-title {
                color: var(--text-color);
            }

            .announcement-item {
                color: var(--gray-light);
                margin-left: 8px;
            }

            .announcement-item i {
                color: #f59e0b;
                font-size: 1.2rem;
            }

            .announcement-close-btn {
                background: none;
                border: none;
                color: var(--gray-light);
                cursor: pointer;
                padding: 5px;
                border-radius: 50%;
                position: absolute;
                top: 36px;
                right: 40px;
            }

            .announcement-close-btn:hover {
                background: rgba(239, 68, 68, 0.1);
                color: var(--error);
            }

            /* ===== FORM STYLES ===== */
            .required-asterisk {
                color: #ef4444;
            }

            /* ===== MODAL STYLES ===== */
            .auto-trigger-info {
                background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.1));
                border: 1px solid rgba(34, 197, 94, 0.3);
                border-radius: 8px;
                padding: 12px;
                margin: 0 20px 15px 20px;
                font-size: 0.9rem;
            }

            .auto-trigger-header {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 4px;
            }

            .auto-trigger-header i {
                color: #22c55e;
            }

            .auto-trigger-header strong {
                color: var(--success);
            }

            .auto-trigger-text {
                color: var(--gray-light);
                margin: 0;
                line-height: 1.4;
            }

            #lora-base-model-info {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
                border: 1px solid rgba(99, 102, 241, 0.3);
                border-radius: 8px;
                padding: 12px;
                margin-bottom: 15px;
                display: none;
            }

            .lora-base-model-header {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .lora-base-model-header i {
                color: #6fb4ff;
            }

            .lora-base-model-header strong {
                color: var(--text-color);
            }

            #lora-base-model-name {
                color: #a78bfa;
                font-weight: 600;
            }

            .lora-base-model-hint {
                color: var(--gray-light);
                display: block;
                margin-top: 4px;
            }

            /* ===== FLOATING DONATE BUTTON ===== */
            .floating-donate-btn {
                position: fixed;
                bottom: 30px;
                right: 30px;
                z-index: 9997;
                animation: float 3s ease-in-out infinite;
            }

            .donate-btn-circle {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 70px;
                height: 70px;
                background: linear-gradient(135deg, #FFDD00, #FFAA00);
                border-radius: 50%;
                color: #000;
                text-decoration: none;
                box-shadow: 0 8px 25px rgba(255, 221, 0, 0.4);
                transition: all 0.3s ease;
                position: relative;
                border: 3px solid rgba(255, 255, 255, 0.2);
            }

            .donate-btn-circle:hover {
                transform: scale(1.1);
                box-shadow: 0 12px 35px rgba(255, 221, 0, 0.6);
                animation: none;
            }

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

            .donate-btn-circle i {
                font-size: 1.8rem;
                font-weight: 900;
            }

            .donate-tooltip {
                position: absolute;
                bottom: 100%;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(15, 23, 42, 0.95);
                backdrop-filter: blur(10px);
                color: white;
                padding: 8px 12px;
                border-radius: 8px;
                font-size: 0.8rem;
                font-weight: 600;
                white-space: nowrap;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
                margin-bottom: 10px;
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            }

            .donate-tooltip::after {
                content: '';
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                border: 6px solid transparent;
                border-top-color: rgba(15, 23, 42, 0.95);
            }

            .donate-btn-circle:hover .donate-tooltip {
                opacity: 1;
                visibility: visible;
                bottom: calc(100% + 5px);
            }

            /* Floating animation */
            @keyframes float {

                0%,
                100% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(-10px);
                }
            }

            /* Pulse animation for attention */
            @keyframes pulse-glow {

                0%,
                100% {
                    box-shadow: 0 8px 25px rgba(255, 221, 0, 0.4);
                }

                50% {
                    box-shadow: 0 8px 30px rgba(255, 221, 0, 0.7), 0 0 20px rgba(255, 221, 0, 0.4);
                }
            }

            .donate-btn-circle.pulse {
                animation: pulse-glow 2s ease-in-out infinite;
            }

            /* Mobile responsiveness */
            @media (max-width: 768px) {
                .floating-donate-btn {
                    bottom: 20px;
                    right: 20px;
                }

                .donate-btn-circle {
                    width: 60px;
                    height: 60px;
                }

                .donate-btn-circle i {
                    font-size: 1.5rem;
                }

                .donate-tooltip {
                    font-size: 0.7rem;
                    padding: 6px 10px;
                }
            }

            @media (max-width: 480px) {
                .floating-donate-btn {
                    bottom: 15px;
                    right: 15px;
                }

                .donate-btn-circle {
                    width: 55px;
                    height: 55px;
                }
            }

            /* Ensure it doesn't interfere with other floating elements */
            @media (max-width: 768px) {
                .floating-donate-btn {
                    /* bottom: 90px; */
                    /* Adjust if you have other floating elements */
                }
            }

            /* High contrast mode support */
            @media (prefers-contrast: high) {
                .donate-btn-circle {
                    border: 3px solid #000;
                }
            }

            /* Reduced motion support */
            @media (prefers-reduced-motion: reduce) {
                .floating-donate-btn {
                    animation: none;
                }

                .donate-btn-circle {
                    transition: none;
                }

                .donate-btn-circle.pulse {
                    animation: none;
                }
            }

            /* ===== MULTIPLE IMAGE UPLOAD STYLES ===== */

            .images-preview-container {
                margin-top: 1rem;
                padding: 1rem;
                background: rgba(15, 23, 42, 0.4);
                border: 1px solid rgba(124, 58, 237, 0.3);
                border-radius: 12px;
            }

            .uploaded-images-list {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: 1rem;
                margin-bottom: 1rem;
            }

            .uploaded-image-item {
                position: relative;
                background: var(--secondary-bg);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                padding: 0.5rem;
                text-align: center;
                transition: all 0.3s ease;
            }

            .uploaded-image-item:hover {
                border-color: var(--accent-color);
                box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
            }

            .uploaded-image-preview {
                width: 100%;
                height: 100px;
                object-fit: cover;
                border-radius: 6px;
                margin-bottom: 0.5rem;
            }

            .uploaded-image-info {
                font-size: 0.8rem;
                color: var(--gray-light);
                margin-bottom: 0.5rem;
                word-break: break-all;
            }

            .uploaded-image-actions {
                display: flex;
                gap: 0.25rem;
                justify-content: center;
            }

            .remove-single-image {
                background: var(--error);
                color: white;
                border: none;
                border-radius: 4px;
                padding: 0.25rem 0.5rem;
                font-size: 0.7rem;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .remove-single-image:hover {
                background: #dc2626;
                transform: scale(1.05);
            }

            .image-number-badge {
                position: absolute;
                top: -5px;
                left: -5px;
                background: var(--accent-color);
                color: white;
                border-radius: 50%;
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.75rem;
                font-weight: bold;
                box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
            }

            .upload-actions {
                margin-top: 1rem;
                text-align: center;
                display: flex;
                gap: 0.5rem;
                justify-content: center;
                flex-wrap: wrap;
            }

            /* Mobile responsiveness for image upload */
            @media (max-width: 768px) {
                .uploaded-images-list {
                    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                    gap: 0.75rem;
                }

                .uploaded-image-preview {
                    height: 80px;
                }

                .uploaded-image-info {
                    font-size: 0.7rem;
                }

                .upload-actions {
                    flex-direction: column;
                }

                .upload-actions button {
                    width: 100%;
                }
            }

            @media (max-width: 480px) {
                .uploaded-images-list {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 0.5rem;
                }

                .uploaded-image-preview {
                    height: 70px;
                }

                .images-preview-container {
                    padding: 0.75rem;
                }

                .image-number-badge {
                    width: 20px;
                    height: 20px;
                    font-size: 0.65rem;
                }
            }

            /* ===== ADMIN NOTIFICATION SYSTEM ===== */

            /* Notification Icon in Header */
            .notification-icon-container {
                position: relative;
                margin-left: 1rem;
            }

            .notification-bell-btn {
                background: none;
                border: none;
                color: var(--gray-light);
                font-size: 1.2rem;
                cursor: pointer;
                padding: 0.5rem;
                border-radius: 50%;
                transition: all 0.3s ease;
                position: relative;
            }

            .notification-bell-btn:hover {
                background: rgba(255, 255, 255, 0.1);
                color: var(--text-color);
            }

            .notification-dot {
                position: absolute;
                top: 6px;
                right: 6px;
                width: 8px;
                height: 8px;
                background: #ffd700;
                border-radius: 50%;
                border: 2px solid var(--bg-color);
                animation: notification-pulse 2s infinite;
            }

            @keyframes notification-pulse {
                0% { opacity: 1; transform: scale(1); }
                50% { opacity: 0.7; transform: scale(1.2); }
                100% { opacity: 1; transform: scale(1); }
            }

            /* Admin Notification Banner */
            .admin-notification-banner {
                position: fixed;
                top: 80px;
                left: 50%;
                transform: translateX(-50%);
                background: linear-gradient(135deg, var(--accent-color), var(--primary-dark));
                border-radius: 12px;
                box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
                z-index: 10000;
                min-width: 400px;
                max-width: 600px;
                animation: slideDown 0.5s ease;
            }

            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translateX(-50%) translateY(-20px);
                }
                to {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0);
                }
            }

            .notification-content {
                display: flex;
                align-items: center;
                padding: 1rem 1.5rem;
                gap: 1rem;
            }

            .notification-icon {
                color: white;
                font-size: 1.5rem;
                flex-shrink: 0;
            }

            .notification-text {
                flex: 1;
                color: white;
            }

            .notification-title {
                font-weight: 600;
                font-size: 13px;
                margin-bottom: 0.25rem;
            }

            .notification-message {
                font-size: 0.9rem;
                line-height: 1.4;
                opacity: 0.95;
            }

            .notification-close {
                background: none;
                border: none;
                color: white;
                cursor: pointer;
                padding: 0.25rem;
                border-radius: 50%;
                transition: all 0.3s ease;
                flex-shrink: 0;
            }

            .notification-close:hover {
                background: rgba(255, 255, 255, 0.2);
            }

            /* Mobile Responsive */
            @media (max-width: 768px) {
                .admin-notification-banner {
                    left: 1rem;
                    right: 1rem;
                    transform: none;
                    min-width: auto;
                    max-width: none;
                }

                .notification-content {
                    padding: 1rem;
                    gap: 0.75rem;
                }

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

                .notification-title {
                    font-size: 0.9rem;
                }

                .notification-message {
                    font-size: 0.8rem;
                }
            }

            /* ===== END ADMIN NOTIFICATION SYSTEM ===== */

            /* ===== FLOATING STATUS BAR ===== */
            .floating-status-bar {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                background: #000000;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                padding: 8px 15px;
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
                z-index: 9999;
                opacity: 0;
                transform: translateY(100%);
                transition: all 0.3s ease-in-out;
                pointer-events: none;
            }

            .floating-status-bar.visible {
                opacity: 1;
                transform: translateY(0);
                pointer-events: all;
            }

            /* ===== SLIDING BAR LOADER ===== */
            .floating-status-bar .sliding-bar-loader {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 30%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                animation: slide 7s ease-in-out infinite;
                pointer-events: none;
                z-index: 1;
            }

            .floating-status-bar .sliding-bar-loader.hidden {
                display: none;
            }

            /* Sliding bar loader for currentUserJob in queue */
            #currentUserJob {
                position: relative;
                overflow: hidden;
            }

            #currentUserJob .sliding-bar-loader {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 30%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                animation: slide 7s ease-in-out infinite;
                pointer-events: none;
                z-index: 1;
            }

            #currentUserJob .sliding-bar-loader.hidden {
                display: none;
            }

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

            .status-close-btn {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 10px;
                background: none;
                border: none;
                color: var(--gray-light);
                cursor: pointer;
                font-size: 13px;
                padding: 4px;
                transition: all 0.3s ease;
                border-radius: 50%;
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .status-close-btn:hover {
                background: rgba(255, 255, 255, 0.1);
                color: var(--text-color);
            }

            .status-content {
                display: flex;
                align-items: center;
                gap: 12px;
                max-width: 1400px;
                margin: 0 auto;
                padding-right: 35px;
            }

            .status-info {
                display: flex;
                gap: 10px;
                align-items: center;
                flex: 1;
                min-width: 0;
            }

            .status-icon {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .status-icon.processing {
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                color: white;
            }

            .status-icon.completed {
                background: linear-gradient(135deg, #10b981, #059669);
                color: white;
            }

            .status-icon i {
                font-size: 0.9rem;
            }

            .status-text {
                flex: 1;
                min-width: 0;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .status-title {
                font-weight: 600;
                color: var(--text-color);
                font-size: 0.85rem;
                white-space: nowrap;
            }

            .status-description {
                color: var(--gray-light);
                font-size: 0.75rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .status-description a {
                color: rgb(255, 215, 0);
                text-decoration: none;
            }

            .status-description a:hover {
                text-decoration: underline;
            }

            .status-actions {
                display: flex;
                gap: 6px;
                flex-shrink: 0;
            }

            .status-download-btn {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 6px 12px;
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                color: white;
                border: none;
                border-radius: 4px;
                font-weight: 600;
                cursor: pointer;
                text-decoration: none;
                transition: all 0.2s ease;
                font-size: 0.8rem;
            }

            .status-download-btn:hover {
                opacity: 0.9;
            }

            .status-download-btn i {
                font-size: 0.8rem;
            }

            .status-view-btn {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 6px 12px;
                background: linear-gradient(135deg, #10b981, #059669);
                color: white;
                border: none;
                border-radius: 4px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.2s ease;
                font-size: 0.8rem;
            }

            .status-view-btn:hover {
                opacity: 0.9;
            }

            .status-view-btn i {
                font-size: 0.8rem;
            }

            .status-delete-btn {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 6px 12px;
                background: linear-gradient(135deg, #ef4444, #dc2626);
                color: white;
                border: none;
                border-radius: 4px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.2s ease;
                font-size: 0.8rem;
            }

            .status-delete-btn:hover {
                opacity: 0.9;
                background: linear-gradient(135deg, #dc2626, #b91c1c);
            }

            .status-delete-btn i {
                font-size: 0.8rem;
            }

            @media (max-width: 768px) {
                .floating-status-bar {
                    padding: 6px 10px;
                }

                .status-content {
                    gap: 8px;
                    padding-right: 30px;
                }

                .status-info {
                    gap: 8px;
                }

                .status-icon {
                    width: 24px;
                    height: 24px;
                }

                .status-icon i {
                    font-size: 0.75rem;
                }

                .status-title {
                    font-size: 0.75rem;
                }

                .status-description {
                    display: none;
                }

                .status-progress {
                    flex: 0 0 80px;
                }

                .status-download-btn,
                .status-view-btn {
                    padding: 5px 10px;
                    font-size: 0.75rem;
                    gap: 3px;
                }

                .status-download-btn i,
                .status-view-btn i {
                    font-size: 0.7rem;
                }
            }
            /* ===== END FLOATING STATUS BAR ===== */

            /* ===== SERVER STATUS MESSAGE ===== */
            .server-status-message {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.95);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                z-index: 99999;
                justify-content: center;
                align-items: center;
                padding: 1.5rem;
                animation: fadeIn 0.3s ease-out;
            }

            .server-status-message.active {
                display: flex;
            }

            .server-status-message > div {
                background: #000000;
                border: 1px solid rgba(124, 58, 237, 0.3);
                border-radius: 24px;
                padding: 3rem 2.5rem;
                max-width: 550px;
                width: 100%;
                text-align: center;
                box-shadow: 
                    0 30px 60px rgba(0, 0, 0, 0.8),
                    0 0 0 1px rgba(255, 255, 255, 0.05),
                    inset 0 2px 4px rgba(255, 255, 255, 0.05);
                position: relative;
                overflow: hidden;
                animation: popupSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            @keyframes popupSlideIn {
                from {
                    opacity: 0;
                    transform: translateY(-50px) scale(0.9);
                }
                to {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }

            .server-status-message > div::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 3px;
                background: linear-gradient(90deg, transparent, var(--accent-color), var(--accent), transparent);
                animation: slideLight 3s ease-in-out infinite;
            }

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

            .server-status-icon {
                font-size: 5rem;
                margin-bottom: 2rem;
                position: relative;
                display: inline-block;
            }

            .server-status-icon i {
                background: linear-gradient(135deg, var(--accent-color), var(--accent));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                filter: drop-shadow(0 4px 8px rgba(124, 58, 237, 0.5));
                animation: iconPulse 2s ease-in-out infinite;
            }

            @keyframes iconPulse {
                0%, 100% {
                    transform: scale(1);
                    filter: drop-shadow(0 4px 8px rgba(124, 58, 237, 0.5));
                }
                50% {
                    transform: scale(1.1);
                    filter: drop-shadow(0 6px 12px rgba(124, 58, 237, 0.7));
                }
            }

            .server-status-title {
                font-size: 1.75rem;
                font-weight: 800;
                background: linear-gradient(135deg, var(--text-primary), var(--gray-light));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                margin-bottom: 1.25rem;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }

            .server-status-description {
                color: var(--gray-light);
                line-height: 1.8;
                margin-bottom: 2rem;
                font-size: 1.05rem;
            }

            .server-status-donation {
                background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
                border: 1px solid rgba(16, 185, 129, 0.4);
                border-radius: 16px;
                padding: 2rem;
                margin: 2rem 0;
                position: relative;
                overflow: hidden;
            }

            .server-status-donation::before {
                content: '';
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
                animation: rotateBg 10s linear infinite;
            }

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

            .server-status-donation h4 {
                color: var(--success);
                margin-bottom: 0.75rem;
                font-size: 1.25rem;
                font-weight: 700;
                position: relative;
                z-index: 1;
            }

            .server-status-donation h4 i {
                color: #10b981;
                margin-right: 0.5rem;
                animation: heartbeat 1.5s ease-in-out infinite;
            }

            @keyframes heartbeat {
                0%, 100% {
                    transform: scale(1);
                }
                10%, 30% {
                    transform: scale(1.2);
                }
                20%, 40% {
                    transform: scale(1);
                }
            }

            .server-status-donation p {
                color: var(--gray-light);
                font-size: 0.95rem;
                margin: 0;
                position: relative;
                z-index: 1;
            }

            .server-status-actions {
                display: flex;
                gap: 1rem;
                justify-content: center;
                margin-top: 2rem;
                flex-wrap: wrap;
            }

            .server-status-close,
            .server-status-donate {
                padding: 1rem 2rem;
                border-radius: 12px;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                border: none;
                font-size: 13px;
                position: relative;
                overflow: hidden;
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
            }

            .server-status-close {
                background: rgba(71, 85, 105, 0.3);
                color: var(--text-primary);
                border: 1px solid rgba(148, 163, 184, 0.3);
            }

            .server-status-close::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.1);
                transform: translate(-50%, -50%);
                transition: width 0.6s, height 0.6s;
            }

            .server-status-close:hover::before {
                width: 300px;
                height: 300px;
            }

            .server-status-close:hover {
                background: rgba(100, 116, 139, 0.4);
                border-color: rgba(148, 163, 184, 0.5);
                transform: translateY(-2px);
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            }

            .server-status-donate {
                background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
                color: white;
                border: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
                text-decoration: none;
            }

            .server-status-donate::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                transition: left 0.5s;
            }

            .server-status-donate:hover::before {
                left: 100%;
            }

            .server-status-donate:hover {
                transform: translateY(-3px);
                box-shadow: 0 12px 24px rgba(124, 58, 237, 0.6);
            }

            .server-status-donate:active {
                transform: translateY(-1px);
                box-shadow: 0 6px 12px rgba(124, 58, 237, 0.4);
            }

            @media (max-width: 640px) {
                .server-status-message > div {
                    padding: 2rem 1.5rem;
                }

                .server-status-icon {
                    font-size: 4rem;
                }

                .server-status-title {
                    font-size: 1.5rem;
                }

                .server-status-actions {
                    flex-direction: column;
                }

                .server-status-close,
                .server-status-donate {
                    width: 100%;
                }
            }

            /* ===== 401 ERROR POPUP ===== */
            .error-401-popup {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.95);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                z-index: 99999;
                justify-content: center;
                align-items: center;
                padding: 1.5rem;
                animation: fadeIn 0.3s ease-out;
            }

            .error-401-popup.visible {
                display: flex;
            }

            .error-401-popup > div {
                background: #000000;
                border: 1px solid rgba(124, 58, 237, 0.3);
                border-radius: 24px;
                padding: 3rem 2.5rem;
                max-width: 550px;
                width: 100%;
                text-align: center;
                box-shadow: 
                    0 30px 60px rgba(0, 0, 0, 0.8),
                    0 0 0 1px rgba(255, 255, 255, 0.05),
                    inset 0 2px 4px rgba(255, 255, 255, 0.05);
                position: relative;
                overflow: hidden;
                animation: popupSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .error-401-icon {
                font-size: 4rem;
                margin-bottom: 1.5rem;
                color: var(--accent-color);
            }

            .error-401-icon i {
                background: linear-gradient(135deg, var(--accent-color), var(--secondary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .error-401-title {
                font-size: 1.8rem;
                font-weight: 700;
                margin-bottom: 1rem;
                color: var(--text-color);
            }

            .error-401-description {
                color: var(--gray-light);
                margin-bottom: 2rem;
                line-height: 1.6;
            }

            .error-401-actions {
                display: flex;
                gap: 1rem;
                justify-content: center;
            }

            .error-401-close,
            .error-401-refresh {
                background: transparent;
                border: 2px solid var(--border-color);
                color: var(--text-color);
                padding: 0.75rem 1.5rem;
                border-radius: 12px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                text-decoration: none;
                display: inline-block;
            }

            .error-401-close:hover,
            .error-401-refresh:hover {
                background: var(--accent-color);
                border-color: var(--accent-color);
                color: white;
            }

            @media (max-width: 640px) {
                .error-401-popup > div {
                    padding: 2rem 1.5rem;
                }

                .error-401-icon {
                    font-size: 3rem;
                }

                .error-401-title {
                    font-size: 1.5rem;
                }

                .error-401-actions {
                    flex-direction: column;
                }

                .error-401-close,
                .error-401-refresh {
                    width: 100%;
                }
            }

            /* ===== END SERVER STATUS MESSAGE & ERROR POPUPS ===== */

            /* ===== THEME SWITCHER STYLES ===== */
            .theme-switcher-btn {
                background: var(--secondary-bg);
                border: 1px solid var(--border-color);
                color: var(--text-color);
                padding: 8px 12px;
                border-radius: 8px;
                cursor: pointer;
                font-size: 0.9rem;
                display: flex;
                align-items: center;
                gap: 6px;
                transition: all 0.3s ease;
                margin-left: 8px;
            }

            .theme-switcher-btn:hover {
                background: var(--accent-color);
                border-color: var(--accent-color);
                color: white;
            }

            /* ===== THEME BUTTON ATTRACTION ANIMATIONS ===== */
            @keyframes themeBtnSubtleGlow {
                0%, 100% {
                    box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.3);
                    transform: scale(1);
                }
                50% {
                    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.6), 0 0 25px rgba(var(--accent-rgb), 0.4);
                    transform: scale(1.02);
                }
            }

            @keyframes themeBtnGentlePulse {
                0%, 100% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.9;
                }
            }

            @keyframes themeBtnSoftBounce {
                0%, 20%, 50%, 80%, 100% {
                    transform: translateY(0);
                }
                40% {
                    transform: translateY(-3px);
                }
                60% {
                    transform: translateY(-2px);
                }
            }

            .theme-switcher-btn.attract-attention {
                animation:
                    themeBtnSubtleGlow 3s ease-in-out infinite,
                    themeBtnGentlePulse 2s ease-in-out infinite;
            }

            .theme-switcher-btn.attract-attention:hover {
                animation:
                    themeBtnSoftBounce 0.8s ease-in-out,
                    themeBtnSubtleGlow 1s ease-in-out;
            }

            .theme-modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.8);
                backdrop-filter: blur(10px);
                z-index: 10001;
                justify-content: center;
                align-items: center;
                animation: fadeIn 0.3s ease-out;
            }

            .theme-modal.active {
                display: flex;
            }

            .theme-modal-content {
                background: var(--secondary-bg);
                border: 1px solid var(--border-color);
                border-radius: 16px;
                max-width: 800px;
                width: 90%;
                max-height: 80vh;
                overflow: hidden;
                position: relative;
                animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

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

            .theme-modal-header h3 {
                margin: 0;
                color: var(--text-color);
                font-size: 1.5rem;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .theme-modal-close {
                background: none;
                border: none;
                color: var(--text-color);
                font-size: 1.5rem;
                cursor: pointer;
                padding: 4px;
                border-radius: 50%;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
            }

            .theme-modal-close:hover {
                background: rgba(239, 68, 68, 0.2);
                color: #ef4444;
            }

            .theme-modal-body {
                padding: 24px;
                max-height: calc(80vh - 80px);
                overflow-y: auto;
            }

            .theme-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 16px;
            }

            .theme-option {
                background: var(--bg-color);
                border: 2px solid var(--border-color);
                border-radius: 12px;
                padding: 16px;
                cursor: pointer;
                transition: all 0.3s ease;
                position: relative;
            }

            .theme-option:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            }

            .theme-option.selected {
                border-color: var(--accent-color);
                box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
            }

            .theme-option h4 {
                margin: 0 0 12px 0;
                color: var(--accent-color);
                font-size: 1.1rem;
            }

            .theme-colors {
                display: flex;
                gap: 8px;
                margin-bottom: 12px;
            }

            .theme-color {
                width: 24px;
                height: 24px;
                border-radius: 4px;
                border: 1px solid var(--border-color);
            }

            .theme-info {
                font-size: 0.85rem;
                opacity: 0.8;
                line-height: 1.4;
            }

            .theme-selected-indicator {
                position: absolute;
                top: 8px;
                right: 8px;
                width: 16px;
                height: 16px;
                background: var(--accent-color);
                border-radius: 50%;
                display: none;
            }

            .theme-option.selected .theme-selected-indicator {
                display: block;
            }

            @media (max-width: 768px) {
                .theme-grid {
                    grid-template-columns: 1fr;
                }
                
                .theme-modal-content {
                    width: 95%;
                    max-height: 90vh;
                }
            }
            /* ===== END THEME SWITCHER STYLES ===== */