/* Lifted verbatim from app.blade.php.
   Inline it was 89,690 bytes of HTML on every render;
   as a file the browser fetches it once. */
        /* ========================================
           CREATE NEW CHECK MODAL - GLOBAL STYLING
           ======================================== */
        
        #startAnalysisModal {
            z-index: 2147483645 !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        /* Force sidebar/header below when startAnalysisModal is open */
        body:has(#startAnalysisModal:not(.hidden)) #header,
        body:has(#startAnalysisModal:not(.hidden)) #sidebar,
        body:has(#startAnalysisModal:not(.hidden)) #navbar {
            z-index: 1 !important;
        }
        
        #startAnalysisModal.hidden {
            display: none !important;
        }
        
        #startAnalysisModal > div {
            position: relative;
            z-index: 99999;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        /* Start Analysis Modal Grid Layout */
        #startAnalysisModal .grid {
            display: grid;
        }
        
        #startAnalysisModal .grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        
        @media (min-width: 768px) {
            #startAnalysisModal .md\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        
        /* ============================================
           UNIVERSAL FLOWBITE-STYLE MODAL CSS
           Transforms ALL kt-modals to Flowbite design
           Works with KTModal from ktui library
           ============================================ */

        /* Enhanced Flowbite styling for kt-modals - NON-INTRUSIVE */
        /* Works WITH ktui library which uses .open class to show modals */

        /* ================================================================
           SIMPLE MODAL FIX - Same pattern as createCheckModal
           ================================================================ */
        
        /* When modal is open, force sidebar below - NO overflow:hidden to prevent shift */
        body[data-modal-open="true"] #sidebar,
        body[data-modal-open="true"] #header,
        body[data-modal-open="true"] #navbar,
        body[data-modal-open="true"] .assignment-nav-modern,
        body[data-modal-open="true"] .assignment-nav-wrapper {
            z-index: 1 !important;
        }

        /* ================================================================
           GLOBAL CUSTOM MODAL STYLES
           Used by all custom modals (createCourseModal, etc.)
           ================================================================ */
        
        /* Generic modal backdrop - hidden by default */
        .cq-modal-backdrop {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 2147483645 !important;
            align-items: center !important;
            justify-content: center !important;
            background: rgba(0, 0, 0, 0.5) !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        /* When display: flex is set via JS, ensure it shows */
        .cq-modal-backdrop[style*="display: flex"] {
            display: flex !important;
        }

        /* Force sidebar below when ANY custom modal is open */
        body:has(.cq-modal-backdrop[style*="display: flex"]) #header,
        body:has(.cq-modal-backdrop[style*="display: flex"]) #sidebar,
        body:has(.cq-modal-backdrop[style*="display: flex"]) #navbar,
        body:has(.cq-modal-backdrop[style*="display: flex"]) .assignment-nav-modern,
        body:has(.cq-modal-backdrop[style*="display: flex"]) [class*="z-20"],
        body:has(.cq-modal-backdrop[style*="display: flex"]) [class*="z-50"] {
            z-index: 1 !important;
        }

        /* Generic modal container */
        .cq-modal-container {
            position: relative !important;
            max-width: 820px;
            width: 94%;
            max-height: 90vh;
            background: #ffffff !important;
            border-radius: 14px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden;
            visibility: visible !important;
            opacity: 1 !important;
            transform: none !important;
            isolation: isolate;
        }

        /* Small modal size */
        .cq-modal-container.cq-modal-sm {
            max-width: 500px;
        }

        /* Medium modal size */
        .cq-modal-container.cq-modal-md {
            max-width: 650px;
        }

        /* Large modal size */
        .cq-modal-container.cq-modal-lg {
            max-width: 900px;
        }

        [data-kt-theme-mode="dark"] .cq-modal-container {
            background: #1e293b !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        /* Generic modal header */
        .cq-modal-header {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            background: #ffffff;
        }

        [data-kt-theme-mode="dark"] .cq-modal-header {
            border-bottom-color: #334155;
            background: #1e293b;
        }

        .cq-modal-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #0f172a;
            margin: 0;
        }

        [data-kt-theme-mode="dark"] .cq-modal-title {
            color: #f1f5f9;
        }

        .cq-modal-subtitle {
            font-size: 0.8125rem;
            color: #64748b;
            margin: 0.125rem 0 0 0;
        }

        [data-kt-theme-mode="dark"] .cq-modal-subtitle {
            color: #94a3b8;
        }

        .cq-modal-close {
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 6px;
            border: none;
            background: transparent;
            color: #94a3b8;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }

        .cq-modal-close:hover {
            background: #f1f5f9;
            color: #475569;
        }

        [data-kt-theme-mode="dark"] .cq-modal-close:hover {
            background: #334155;
            color: #e2e8f0;
        }

        /* Generic modal body */
        .cq-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
            background: #ffffff;
        }

        [data-kt-theme-mode="dark"] .cq-modal-body {
            background: #1e293b;
        }

        /* Generic modal footer */
        .cq-modal-footer {
            padding: 1.25rem 2rem;
            border-top: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.75rem;
            background: #f8fafc;
        }

        [data-kt-theme-mode="dark"] .cq-modal-footer {
            border-top-color: #334155;
            background: #1e293b;
        }

        /* Form elements */
        .cq-form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .cq-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
        }

        [data-kt-theme-mode="dark"] .cq-label {
            color: #e5e7eb;
        }

        .cq-input {
            padding: 0.625rem 0.875rem;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 0.875rem;
            background: #ffffff;
            color: #1f2937;
            transition: all 0.15s;
        }

        .cq-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        [data-kt-theme-mode="dark"] .cq-input {
            background: #374151;
            border-color: #4b5563;
            color: #f9fafb;
        }

        [data-kt-theme-mode="dark"] .cq-input:focus {
            border-color: #60a5fa;
        }

        .cq-help-text {
            font-size: 0.75rem;
            color: #6b7280;
        }

        [data-kt-theme-mode="dark"] .cq-help-text {
            color: #9ca3af;
        }

        /* Buttons */
        .cq-btn {
            padding: 0.625rem 1.25rem;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border: none;
        }

        .cq-btn-primary {
            background: #3b82f6;
            color: #ffffff;
        }

        .cq-btn-primary:hover {
            background: #2563eb;
        }

        .cq-btn-secondary {
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #e2e8f0;
        }

        .cq-btn-secondary:hover {
            background: #e2e8f0;
        }

        [data-kt-theme-mode="dark"] .cq-btn-secondary {
            background: #374151;
            color: #e5e7eb;
            border-color: #4b5563;
        }

        [data-kt-theme-mode="dark"] .cq-btn-secondary:hover {
            background: #4b5563;
        }

        /* ================================================================
           KT-MODAL STYLES - CLEAN, NO BLUR
           Same pattern as the working createCheckModal
           ================================================================ */
        
        /* KTModal backdrop - NO blur, just dark overlay */
        .kt-modal.open {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 2147483645 !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.5) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            padding: 1rem;
        }

        /* KTModal content - solid background, no blur effect */
        .kt-modal.open .kt-modal-content {
            position: relative;
            background: #ffffff !important;
            border-radius: 12px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            max-height: 90vh;
            overflow-y: auto;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        [data-kt-theme-mode="dark"] .kt-modal.open .kt-modal-content {
            background: #1e293b !important;
        }

        /* Modal Header - NO blur */
        .kt-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem;
            border-bottom: 1px solid #e5e7eb;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            background: #ffffff;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        [data-kt-theme-mode="dark"] .kt-modal-header {
            background: #1e293b;
            border-bottom-color: #334155;
        }

        /* Modal Body */
        .kt-modal-body {
            padding: 1.25rem;
            background: #ffffff;
        }

        [data-kt-theme-mode="dark"] .kt-modal-body {
            background: #1e293b;
        }

        /* Modal Footer - NO blur */
        .kt-modal-footer {
            padding: 1.25rem;
            border-top: 1px solid #e5e7eb;
            background: #ffffff;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        [data-kt-theme-mode="dark"] .kt-modal-footer {
            background: #1e293b;
            border-top-color: #334155;
        }
        
        .kt-modal-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--foreground);
            line-height: 1.75rem;
        }
        
        /* Modal Body */
        .kt-modal-body {
            padding: 1.5rem;
            color: var(--foreground);
        }
        
        /* Modal Footer */
        .kt-modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.75rem;
            padding: 1.25rem;
            border-top: 1px solid var(--border);
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
        }
        
        /* Close Button Styling - Non-intrusive */
        .kt-modal button[data-kt-modal-dismiss="true"],
        .kt-modal .kt-btn-icon.kt-btn-dim {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2rem;
            min-height: 2rem;
            border-radius: 0.5rem;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        /* Only style visual aspects, not functionality */
        .kt-modal button[data-kt-modal-dismiss="true"]:hover,
        .kt-modal .kt-btn-icon.kt-btn-dim:hover {
            background: var(--muted);
        }
        
        /* Size Variants */
        .kt-modal-content.max-w-sm { max-width: 24rem; }
        .kt-modal-content.max-w-md { max-width: 28rem; }
        .kt-modal-content.max-w-lg { max-width: 32rem; }
        .kt-modal-content.max-w-xl { max-width: 36rem; }
        .kt-modal-content.max-w-2xl { max-width: 42rem; }
        .kt-modal-content.max-w-3xl { max-width: 48rem; }
        .kt-modal-content.max-w-4xl { max-width: 56rem; }
        .kt-modal-content.max-w-\[420px\] { max-width: 420px; }
        .kt-modal-content.max-w-\[500px\] { max-width: 500px; }
        .kt-modal-content.max-w-\[520px\] { max-width: 520px; }
        .kt-modal-content.max-w-\[540px\] { max-width: 540px; }
        .kt-modal-content.max-w-\[550px\] { max-width: 550px; }
        .kt-modal-content.max-w-\[600px\] { max-width: 600px; }
        .kt-modal-content.max-w-\[800px\] { max-width: 800px; }
        .kt-modal-content.max-w-\[900px\] { max-width: 900px; }
        .kt-modal-content.w-\[90%\] { width: 90%; }
        
        /* Top Positioning Variants */
        .kt-modal-content.top-\[5%\] { margin-top: 5vh; }
        .kt-modal-content.top-\[8%\] { margin-top: 8vh; }
        .kt-modal-content.top-\[10%\] { margin-top: 10vh; }
        .kt-modal-content.top-\[15%\] { margin-top: 15vh; }
        
        /* Animations - Only for custom modals, KTModal handles its own animations */
        .kt-modal.active {
            animation: modalFadeIn 0.2s ease-out;
        }
        
        .kt-modal.active .kt-modal-content {
            animation: modalSlideIn 0.3s ease-out;
        }
        
        #startAnalysisModal:not(.hidden) {
            animation: modalFadeIn 0.2s ease-out;
        }
        
        #startAnalysisModal:not(.hidden) .kt-modal-content {
            animation: modalSlideIn 0.3s ease-out;
        }
        
        @keyframes modalFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes modalSlideIn {
            from {
                transform: scale(0.95) translateY(-20px);
                opacity: 0;
            }
            to {
                transform: scale(1) translateY(0);
                opacity: 1;
            }
        }
        
        /* ============================================
           END UNIVERSAL MODAL CSS
           ============================================ */
        
        /* Engine Selection Cards */
        .engine-card input[type="radio"]:checked ~ .engine-card-inner {
            border-color: var(--primary) !important;
            background-color: var(--accent) !important;
            box-shadow: 0 0 0 3px var(--primary-foreground-10, rgba(59, 130, 246, 0.1));
        }
        
        .engine-card input[type="radio"]:checked ~ .engine-card-inner .engine-radio-indicator {
            border-color: var(--primary) !important;
            background-color: var(--primary) !important;
        }
        
        .engine-card input[type="radio"]:checked ~ .engine-card-inner .engine-radio-indicator > div {
            opacity: 1 !important;
            transform: scale(1) !important;
            background-color: white !important;
        }
        
        .engine-card:hover .engine-card-inner {
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        /* Custom scrollbar for engine list - Enhanced visibility */
        .space-y-2::-webkit-scrollbar {
            width: 8px;
        }
        
        .space-y-2::-webkit-scrollbar-track {
            background: var(--muted);
            border-radius: 4px;
        }
        
        .space-y-2::-webkit-scrollbar-thumb {
            background: #9ca3af;
            border-radius: 4px;
        }
        
        .dark .space-y-2::-webkit-scrollbar-thumb {
            background: #6b7280;
        }
        
        .space-y-2::-webkit-scrollbar-thumb:hover {
            background: #6b7280;
        }
        
        .dark .space-y-2::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }
        
        /* Scroll indicator shadow */
        #startAnalysisModal .space-y-2 {
            position: relative;
        }
        
        #startAnalysisModal .space-y-2::after {
            content: '';
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: linear-gradient(to top, var(--background) 0%, transparent 100%);
            pointer-events: none;
            display: block;
        }
        
        /* ============================================
           SCOPED FLOWBITE STYLING FOR startAnalysisModal
           ============================================ */
        
        /* Smooth scrolling for modal */
        #startAnalysisModal .kt-modal-content {
            scroll-behavior: smooth;
        }
        
        /* Form Labels */
        #startAnalysisModal label {
            color: var(--foreground);
            font-weight: 500;
        }
        
        /* Input Fields */
        #startAnalysisModal input[type="text"],
        #startAnalysisModal input[type="email"],
        #startAnalysisModal textarea,
        #startAnalysisModal select {
            width: 100%;
            border-radius: 0.5rem;
            border: 2px solid #e5e7eb;
            background-color: #f9fafb;
            color: #111827;
            padding: 0.625rem 0.75rem;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }
        
        .dark #startAnalysisModal input[type="text"],
        .dark #startAnalysisModal input[type="email"],
        .dark #startAnalysisModal textarea,
        .dark #startAnalysisModal select {
            background-color: #374151;
            border-color: #4b5563;
            color: #fff;
        }
        
        #startAnalysisModal input:focus,
        #startAnalysisModal textarea:focus,
        #startAnalysisModal select:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            background-color: #fff;
        }
        
        .dark #startAnalysisModal input:focus,
        .dark #startAnalysisModal textarea:focus,
        .dark #startAnalysisModal select:focus {
            background-color: #4b5563;
            border-color: #60a5fa;
            box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
        }
        
        /* Form sections */
        #startAnalysisModal .flex.flex-col.gap-5 > div {
            position: relative;
        }
        
        /* Label icons styling */
        #startAnalysisModal label svg {
            flex-shrink: 0;
        }
        
        /* Preset buttons styling */
        #startAnalysisModal button[type="button"]:not(.kt-btn):not([onclick*="closeStartAnalysisModal"]) {
            padding: 0.375rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 500;
            border-radius: 0.375rem;
            transition: all 0.15s ease;
        }
        
        /* Helper Text */
        #startAnalysisModal p.text-xs,
        #startAnalysisModal p.text-sm {
            color: #6b7280;
        }
        
        .dark #startAnalysisModal p.text-xs,
        .dark #startAnalysisModal p.text-sm {
            color: #9ca3af;
        }
        
        /* Required asterisk */
        #startAnalysisModal .text-red-600 {
            color: #dc2626;
        }
        
        /* Engine Cards Hover Effect */
        #startAnalysisModal .engine-card {
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        #startAnalysisModal .engine-card:hover {
            transform: translateY(-1px);
        }
        
        /* Radio button custom styling - Fix visibility */
        #startAnalysisModal .engine-radio {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        
        /* Radio button visual indicator */
        #startAnalysisModal .engine-radio + div .flex-shrink-0 > div {
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 9999px;
            border: 2px solid #d1d5db;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        
        .dark #startAnalysisModal .engine-radio + div .flex-shrink-0 > div {
            border-color: #6b7280;
            background-color: #374151;
        }
        
        /* Checked state for radio button */
        #startAnalysisModal .engine-radio:checked + div .flex-shrink-0 > div {
            border-color: #3b82f6;
            background-color: #3b82f6;
        }
        
        .dark #startAnalysisModal .engine-radio:checked + div .flex-shrink-0 > div {
            border-color: #60a5fa;
            background-color: #3b82f6;
        }
        
        /* Show checkmark when checked */
        #startAnalysisModal .engine-radio:checked + div .flex-shrink-0 > div svg {
            display: block !important;
            opacity: 1 !important;
        }
        
        #startAnalysisModal .engine-radio + div .flex-shrink-0 > div svg {
            display: none !important;
            color: white;
        }
        
        /* Card border when checked */
        #startAnalysisModal .engine-radio:checked + div {
            border-color: #3b82f6 !important;
            background-color: #eff6ff !important;
        }
        
        .dark #startAnalysisModal .engine-radio:checked + div {
            border-color: #3b82f6 !important;
            background-color: rgba(59, 130, 246, 0.1) !important;
        }
        
        /* Hover effect on engine cards */
        #startAnalysisModal .engine-card:hover > input + div {
            border-color: #3b82f6;
            background-color: #eff6ff;
        }
        
        .dark #startAnalysisModal .engine-card:hover > input + div {
            border-color: #3b82f6;
            background-color: rgba(59, 130, 246, 0.05);
        }
        
        /* Modal Header Shadow - NO blur */
        #startAnalysisModal .kt-modal-header {
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            background: #ffffff;
        }

        [data-kt-theme-mode="dark"] #startAnalysisModal .kt-modal-header {
            background: #1e293b;
        }

        /* Modal Footer Shadow - NO blur */
        #startAnalysisModal .kt-modal-footer {
            box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.1);
            background: #ffffff;
        }

        [data-kt-theme-mode="dark"] #startAnalysisModal .kt-modal-footer {
            background: #1e293b;
        }
        
        /* Button hover improvements */
        #startAnalysisModal .kt-btn:hover,
        #startAnalysisModal button:hover {
            transform: translateY(-1px);
        }
        
        #startAnalysisModal .kt-btn:active,
        #startAnalysisModal button:active {
            transform: translateY(0);
        }
        
        /* Scrollbar styling for engine selection */
        #startAnalysisModal .space-y-2 {
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }
        
        #startAnalysisModal .space-y-2::-webkit-scrollbar {
            width: 6px;
        }
        
        #startAnalysisModal .space-y-2::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 10px;
        }
        
        #startAnalysisModal .space-y-2::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
            transition: background 0.2s;
        }
        
        #startAnalysisModal .space-y-2::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
        
        .dark #startAnalysisModal .space-y-2 {
            scrollbar-color: #4b5563 transparent;
        }
        
        .dark #startAnalysisModal .space-y-2::-webkit-scrollbar-thumb {
            background: #4b5563;
        }
        
        .dark #startAnalysisModal .space-y-2::-webkit-scrollbar-thumb:hover {
            background: #6b7280;
        }
        
        /* Smooth animations */
        #startAnalysisModal * {
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Grid layout improvements */
        #startAnalysisModal .grid {
            gap: 1.5rem;
        }
        
        /* Icons color consistency */
        #startAnalysisModal label .text-blue-600 {
            color: #2563eb;
        }
        
        .dark #startAnalysisModal label .text-blue-600 {
            color: #60a5fa;
        }
        
        /* Modal content wrapper */
        #startAnalysisModal .kt-modal-content {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            background: var(--background);
            border-radius: 0.75rem;
        }
        
        /* Mobile responsive footer */
        @media (max-width: 768px) {
            #startAnalysisModal .kt-modal-footer > div {
                flex-direction: column;
                align-items: stretch !important;
            }
            
            #startAnalysisModal .kt-modal-footer .text-xs {
                text-align: center;
                margin-bottom: 0.75rem;
            }
            
            #startAnalysisModal .kt-modal-footer > div > div:last-child {
                flex-direction: column;
                width: 100%;
            }
            
            #startAnalysisModal .kt-modal-footer button {
                width: 100%;
                justify-content: center;
            }
        }
        
        /* Mobile modal adjustments */
        @media (max-width: 640px) {
            #startAnalysisModal .kt-modal-content {
                max-width: 95vw;
                margin: 0.5rem;
            }
            
            #startAnalysisModal .grid.md\:grid-cols-2 {
                grid-template-columns: 1fr;
            }
            
            #startAnalysisModal .kt-modal-body {
                padding: 1rem;
            }
            
            #startAnalysisModal .kt-modal-title > div > div:first-child {
                font-size: 1rem;
            }
        }
        
        /* Loading state for submit button */
        #startAnalysisModal #submit_btn_modal:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }
        
        #startAnalysisModal #submit_btn_modal:disabled:hover {
            transform: none !important;
        }
    
        /* =================================================================
           VERCEL-STYLE CREATE ASSIGNMENT MODAL
           Fully scoped - no theme CSS bleed
           ================================================================= */
        
        /* CSS Variables for theming */
        #createCheckModal {
            --vm-bg: #ffffff;
            --vm-bg-secondary: #fafafa;
            --vm-bg-elevated: #ffffff;
            --vm-border: #e5e5e5;
            --vm-border-hover: #b3b3b3;
            --vm-text: #171717;
            --vm-text-secondary: #525252;
            --vm-text-muted: #a3a3a3;
            --vm-accent: #171717;
            --vm-accent-hover: #404040;
            --vm-accent-light: #f5f5f5;
            --vm-success: #0070f3;
            --vm-error: #ee0000;
            --vm-shadow: 0 16px 70px rgba(0, 0, 0, 0.15);
            --vm-radius: 12px;
            --vm-radius-sm: 8px;
            --vm-transition: 150ms ease;
            --vm-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        /* Dark mode variables - softer dark, not pure black */
        [data-kt-theme-mode="dark"] #createCheckModal,
        .dark #createCheckModal {
            --vm-bg: #18181b;
            --vm-bg-secondary: #1f1f23;
            --vm-bg-elevated: #27272a;
            --vm-border: #3f3f46;
            --vm-border-hover: #52525b;
            --vm-text: #fafafa;
            --vm-text-secondary: #a1a1aa;
            --vm-text-muted: #71717a;
            --vm-accent: #fafafa;
            --vm-accent-hover: #e4e4e7;
            --vm-accent-light: #27272a;
            --vm-shadow: 0 16px 70px rgba(0, 0, 0, 0.5);
        }
        
        /* =================================================================
           FULL CSS RESET FOR MODAL - Prevents theme bleed
           ================================================================= */
        #createCheckModal,
        #createCheckModal *,
        #createCheckModal *::before,
        #createCheckModal *::after {
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            font-size: 100% !important;
            font: inherit !important;
            vertical-align: baseline !important;
            background: transparent !important;
            text-decoration: none !important;
            list-style: none !important;
            outline: none !important;
        }
        
        /* Overlay - Hidden by default */
        #createCheckModal.vercel-modal-overlay {
            all: unset !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            z-index: 2147483645 !important;
            align-items: center !important;
            justify-content: center !important;
            background: rgba(0, 0, 0, 0.5) !important;
            backdrop-filter: blur(4px) !important;
            -webkit-backdrop-filter: blur(4px) !important;
            font-family: var(--vm-font) !important;
            /* Hidden by default - only show when style="display: flex" is set via JS */
            display: none !important;
        }
        
        /* When modal is opened via JS, override with higher specificity */
        #createCheckModal.vercel-modal-overlay[style*="display: flex"] {
            display: flex !important;
            animation: vercel-fade-in 0.2s ease !important;
        }
        
        @keyframes vercel-fade-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* Force other elements below modal */
        body:has(#createCheckModal.vercel-modal-overlay[style*="display: flex"]) #header,
        body:has(#createCheckModal.vercel-modal-overlay[style*="display: flex"]) #sidebar,
        body:has(#createCheckModal.vercel-modal-overlay[style*="display: flex"]) #navbar {
            z-index: 1 !important;
        }
        
        /* Modal Container */
        #createCheckModal .vercel-modal {
            all: unset !important;
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            max-width: 820px !important;
            max-height: 90vh !important;
            margin: 16px !important;
            background: var(--vm-bg) !important;
            border: 1px solid var(--vm-border) !important;
            border-radius: var(--vm-radius) !important;
            box-shadow: var(--vm-shadow) !important;
            overflow: hidden !important;
            animation: vercel-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
            font-family: var(--vm-font) !important;
            color: var(--vm-text) !important;
            line-height: 1.5 !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
        }
        
        @keyframes vercel-slide-up {
            from { 
                opacity: 0;
                transform: translateY(10px) scale(0.98);
            }
            to { 
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        /* Header */
        #createCheckModal .vercel-modal-header {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 20px 24px !important;
            border-bottom: 1px solid var(--vm-border) !important;
            background: var(--vm-bg) !important;
            flex-shrink: 0 !important;
        }
        
        #createCheckModal .vercel-modal-header-content {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            gap: 14px !important;
        }
        
        #createCheckModal .vercel-modal-icon {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            background: var(--vm-accent-light) !important;
            border: 1px solid var(--vm-border) !important;
            border-radius: 10px !important;
            color: var(--vm-text) !important;
        }
        
        #createCheckModal .vercel-modal-icon svg {
            width: 20px !important;
            height: 20px !important;
            stroke: currentColor !important;
        }
        
        #createCheckModal .vercel-modal-title {
            all: unset !important;
            display: block !important;
            font-size: 16px !important;
            font-weight: 600 !important;
            color: var(--vm-text) !important;
            letter-spacing: -0.02em !important;
            line-height: 1.3 !important;
        }
        
        #createCheckModal .vercel-modal-subtitle {
            all: unset !important;
            display: block !important;
            font-size: 13px !important;
            font-weight: 400 !important;
            color: var(--vm-text-secondary) !important;
            margin-top: 2px !important;
            line-height: 1.4 !important;
        }
        
        #createCheckModal .vercel-modal-header-aside {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
        }

        /* HyperScan chip - the pre-scan switch + tooltip */
        #createCheckModal .hyperscan-chip {
            all: unset !important;
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 7px !important;
            padding: 5px 9px 5px 8px !important;
            border: 1px solid rgba(99, 102, 241, 0.35) !important;
            border-radius: 999px !important;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(14, 165, 233, 0.10)) !important;
            cursor: pointer !important;
            transition: border-color var(--vm-transition), box-shadow var(--vm-transition) !important;
        }

        /* The state word, so the switch is readable without relying on colour
           or on spotting which side the knob is sitting. */
        #createCheckModal .hyperscan-state {
            all: unset !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            letter-spacing: 0.04em !important;
            text-transform: uppercase !important;
            color: #4f46e5 !important;
            white-space: nowrap !important;
        }

        #createCheckModal .hyperscan-chip:hover,
        #createCheckModal .hyperscan-chip:focus-visible {
            border-color: rgba(99, 102, 241, 0.6) !important;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
        }

        #createCheckModal .hyperscan-bolt {
            width: 12px !important;
            height: 12px !important;
            stroke: #6366f1 !important;
            fill: rgba(99, 102, 241, 0.18) !important;
            flex-shrink: 0 !important;
        }

        #createCheckModal .hyperscan-label {
            all: unset !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            letter-spacing: 0.01em !important;
            color: #4f46e5 !important;
            white-space: nowrap !important;
        }

        #createCheckModal .hyperscan-switch {
            all: unset !important;
            position: relative !important;
            display: block !important;
            width: 24px !important;
            height: 14px !important;
            border-radius: 999px !important;
            background: linear-gradient(135deg, #6366f1, #0ea5e9) !important;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18) !important;
            flex-shrink: 0 !important;
        }

        #createCheckModal .hyperscan-knob {
            all: unset !important;
            position: absolute !important;
            top: 2px !important;
            left: 12px !important;
            display: block !important;
            width: 10px !important;
            height: 10px !important;
            border-radius: 50% !important;
            background: #ffffff !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
            animation: hyperscan-pulse 2.4s ease-in-out infinite !important;
        }

        @keyframes hyperscan-pulse {
            0%, 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(255, 255, 255, 0.5); }
            50% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(255, 255, 255, 0); }
        }

        @media (prefers-reduced-motion: reduce) {
            #createCheckModal .hyperscan-knob { animation: none !important; }
        }

        #createCheckModal .hyperscan-sr {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            overflow: hidden !important;
            clip: rect(0 0 0 0) !important;
            white-space: nowrap !important;
        }

        #createCheckModal .hyperscan-tooltip {
            all: unset !important;
            position: absolute !important;
            top: calc(100% + 9px) !important;
            right: 0 !important;
            z-index: 20 !important;
            display: block !important;
            width: 268px !important;
            padding: 10px 12px !important;
            border-radius: 8px !important;
            background: #18181b !important;
            color: #d4d4d8 !important;
            font-size: 11.5px !important;
            line-height: 1.5 !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
            opacity: 0 !important;
            transform: translateY(-4px) !important;
            pointer-events: none !important;
            transition: opacity var(--vm-transition), transform var(--vm-transition) !important;
        }

        #createCheckModal .hyperscan-tooltip-body {
            all: unset !important;
            display: block !important;
        }

        #createCheckModal .hyperscan-tooltip strong {
            all: unset !important;
            display: block !important;
            margin-bottom: 3px !important;
            color: #ffffff !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            letter-spacing: 0.02em !important;
            text-transform: uppercase !important;
        }

        #createCheckModal .hyperscan-tooltip::after {
            content: '' !important;
            position: absolute !important;
            top: -4px !important;
            right: 26px !important;
            width: 8px !important;
            height: 8px !important;
            background: #18181b !important;
            transform: rotate(45deg) !important;
        }

        #createCheckModal .hyperscan-chip:hover .hyperscan-tooltip,
        #createCheckModal .hyperscan-chip:focus .hyperscan-tooltip,
        #createCheckModal .hyperscan-chip:focus-within .hyperscan-tooltip {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        [data-kt-theme-mode="dark"] #createCheckModal .hyperscan-label,
        .dark #createCheckModal .hyperscan-label { color: #a5b4fc !important; }
        [data-kt-theme-mode="dark"] #createCheckModal .hyperscan-bolt,
        .dark #createCheckModal .hyperscan-bolt { stroke: #a5b4fc !important; }
        [data-kt-theme-mode="dark"] #createCheckModal .hyperscan-tooltip,
        .dark #createCheckModal .hyperscan-tooltip { background: #3f3f46 !important; color: #e4e4e7 !important; }
        [data-kt-theme-mode="dark"] #createCheckModal .hyperscan-tooltip::after,
        .dark #createCheckModal .hyperscan-tooltip::after { background: #3f3f46 !important; }

        /* HyperScan chip, OFF state - the default for every new check.
           Deliberately last in the block so it also wins over the indigo dark
           mode overrides above, which sit at the same specificity. Grey, knob
           to the left, no pulse: a chip that animates is a chip that says
           something is running, and nothing is. */
        #createCheckModal .hyperscan-chip-off {
            border-color: rgba(113, 113, 122, 0.3) !important;
            background: rgba(113, 113, 122, 0.08) !important;
        }

        #createCheckModal .hyperscan-chip-off:hover,
        #createCheckModal .hyperscan-chip-off:focus-visible {
            border-color: rgba(113, 113, 122, 0.5) !important;
            box-shadow: 0 0 0 3px rgba(113, 113, 122, 0.1) !important;
        }

        #createCheckModal .hyperscan-chip-off .hyperscan-bolt {
            stroke: #71717a !important;
            fill: rgba(113, 113, 122, 0.14) !important;
        }

        #createCheckModal .hyperscan-chip-off .hyperscan-label {
            color: #71717a !important;
        }

        #createCheckModal .hyperscan-chip-off .hyperscan-state {
            color: #a1a1aa !important;
        }

        #createCheckModal .hyperscan-chip-off .hyperscan-switch {
            background: #d4d4d8 !important;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12) !important;
        }

        #createCheckModal .hyperscan-chip-off .hyperscan-knob {
            left: 2px !important;
            animation: none !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
        }

        [data-kt-theme-mode="dark"] #createCheckModal .hyperscan-chip-off .hyperscan-label,
        .dark #createCheckModal .hyperscan-chip-off .hyperscan-label { color: #a1a1aa !important; }
        [data-kt-theme-mode="dark"] #createCheckModal .hyperscan-chip-off .hyperscan-bolt,
        .dark #createCheckModal .hyperscan-chip-off .hyperscan-bolt { stroke: #a1a1aa !important; fill: rgba(161, 161, 170, 0.14) !important; }
        [data-kt-theme-mode="dark"] #createCheckModal .hyperscan-chip-off .hyperscan-state,
        .dark #createCheckModal .hyperscan-chip-off .hyperscan-state { color: #a1a1aa !important; }
        [data-kt-theme-mode="dark"] #createCheckModal .hyperscan-chip-off .hyperscan-switch,
        .dark #createCheckModal .hyperscan-chip-off .hyperscan-switch { background: #52525b !important; }

        /* Close Button */
        #createCheckModal .vercel-modal-close {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            border: 1px solid var(--vm-border) !important;
            border-radius: 8px !important;
            background: transparent !important;
            color: var(--vm-text-muted) !important;
            cursor: pointer !important;
            transition: all var(--vm-transition) !important;
        }
        
        #createCheckModal .vercel-modal-close:hover {
            background: var(--vm-accent-light) !important;
            border-color: var(--vm-border-hover) !important;
            color: var(--vm-text) !important;
        }
        
        #createCheckModal .vercel-modal-close svg {
            width: 16px !important;
            height: 16px !important;
            stroke: currentColor !important;
        }
        
        /* Body */
        #createCheckModal .vercel-modal-body {
            all: unset !important;
            display: block !important;
            flex: 1 !important;
            overflow-y: auto !important;
            padding: 24px !important;
            background: var(--vm-bg) !important;
        }
        
        /* Form element */
        #createCheckModal form {
            all: unset !important;
            display: block !important;
        }
        
        /* Grid Layout */
        #createCheckModal .vercel-modal-grid {
            all: unset !important;
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 32px !important;
        }
        
        @media (max-width: 640px) {
            #createCheckModal .vercel-modal-grid {
                grid-template-columns: 1fr !important;
                gap: 24px !important;
            }
        }
        
        #createCheckModal .vercel-modal-section {
            all: unset !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
        }
        
        /* Form Groups */
        #createCheckModal .vercel-form-group {
            all: unset !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
        }
        
        /* Labels */
        #createCheckModal .vercel-label {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            color: var(--vm-text) !important;
            line-height: 1.4 !important;
        }
        
        #createCheckModal .vercel-lock-icon {
            font-size: 11px !important;
            color: var(--vm-text-muted) !important;
        }
        
        /* Input Fields */
        #createCheckModal .vercel-input {
            all: unset !important;
            display: block !important;
            width: 100% !important;
            padding: 10px 12px !important;
            font-size: 14px !important;
            font-family: var(--vm-font) !important;
            color: var(--vm-text) !important;
            background: var(--vm-bg) !important;
            border: 1px solid var(--vm-border) !important;
            border-radius: var(--vm-radius-sm) !important;
            transition: all var(--vm-transition) !important;
            box-sizing: border-box !important;
        }
        
        #createCheckModal .vercel-input::placeholder {
            color: var(--vm-text-muted) !important;
        }
        
        #createCheckModal .vercel-input:hover {
            border-color: var(--vm-border-hover) !important;
        }
        
        #createCheckModal .vercel-input:focus {
            border-color: var(--vm-accent) !important;
            box-shadow: 0 0 0 1px var(--vm-accent) !important;
        }
        
        /* Hint Text */
        #createCheckModal .vercel-hint {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            font-size: 12px !important;
            color: var(--vm-text-muted) !important;
            line-height: 1.4 !important;
        }
        
        #createCheckModal .vercel-hint svg {
            flex-shrink: 0 !important;
            width: 12px !important;
            height: 12px !important;
            stroke: currentColor !important;
        }
        
        /* =================================================================
           SELECT DROPDOWN - Fully scoped
           ================================================================= */
        #createCheckModal .cq-select {
            all: unset !important;
            display: block !important;
            position: relative !important;
        }
        
        #createCheckModal .vercel-select-trigger {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            width: 100% !important;
            padding: 10px 12px !important;
            font-size: 14px !important;
            font-family: var(--vm-font) !important;
            color: var(--vm-text) !important;
            background: var(--vm-bg) !important;
            border: 1px solid var(--vm-border) !important;
            border-radius: var(--vm-radius-sm) !important;
            cursor: pointer !important;
            transition: all var(--vm-transition) !important;
            box-sizing: border-box !important;
            text-align: left !important;
            gap: 8px !important;
        }
        
        #createCheckModal .vercel-select-trigger:hover {
            border-color: var(--vm-border-hover) !important;
        }
        
        #createCheckModal .vercel-select-trigger:focus,
        #createCheckModal .vercel-select-trigger.active {
            border-color: var(--vm-accent) !important;
            box-shadow: 0 0 0 1px var(--vm-accent) !important;
        }
        
        #createCheckModal .vercel-select-value {
            all: unset !important;
            flex: 1 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            font-size: 14px !important;
            color: var(--vm-text) !important;
        }
        
        #createCheckModal .vercel-select-chevron {
            flex-shrink: 0 !important;
            width: 16px !important;
            height: 16px !important;
            color: var(--vm-text-muted) !important;
            transition: transform 0.2s ease !important;
            stroke: currentColor !important;
        }
        
        /* Rotate chevron when dropdown is active */
        #createCheckModal .cq-select:has(.vercel-select-dropdown.active) .vercel-select-chevron,
        #createCheckModal .vercel-select-dropdown.active ~ .vercel-select-trigger .vercel-select-chevron {
            transform: rotate(180deg) !important;
        }
        
        /* Select Dropdown - Fixed position, fully scoped */
        #createCheckModal .vercel-select-dropdown {
            position: fixed !important;
            display: none !important;
            flex-direction: column !important;
            background: var(--vm-bg-elevated) !important;
            border: 1px solid var(--vm-border) !important;
            border-radius: var(--vm-radius-sm) !important;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
            z-index: 2147483646 !important;
            max-height: 280px !important;
            overflow: hidden !important;
            font-family: var(--vm-font) !important;
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity 150ms ease, transform 150ms ease !important;
        }
        
        [data-kt-theme-mode="dark"] #createCheckModal .vercel-select-dropdown,
        .dark #createCheckModal .vercel-select-dropdown {
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
        }
        
        #createCheckModal .vercel-select-dropdown.active {
            display: flex !important;
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        
        /* Select Search */
        #createCheckModal .vercel-select-search {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 10px 12px !important;
            border-bottom: 1px solid var(--vm-border) !important;
            background: var(--vm-bg-elevated) !important;
            flex-shrink: 0 !important;
        }
        
        #createCheckModal .vercel-select-search svg {
            flex-shrink: 0 !important;
            width: 14px !important;
            height: 14px !important;
            color: var(--vm-text-muted) !important;
            stroke: currentColor !important;
        }
        
        #createCheckModal .vercel-select-search-input {
            all: unset !important;
            flex: 1 !important;
            font-size: 13px !important;
            font-family: var(--vm-font) !important;
            color: var(--vm-text) !important;
            background: transparent !important;
        }
        
        #createCheckModal .vercel-select-search-input::placeholder {
            color: var(--vm-text-muted) !important;
        }
        
        /* Select Options */
        #createCheckModal .vercel-select-options {
            all: unset !important;
            display: block !important;
            overflow-y: auto !important;
            max-height: 220px !important;
            padding: 4px !important;
            background: var(--vm-bg-elevated) !important;
        }
        
        #createCheckModal .vercel-select-option {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 10px 12px !important;
            font-size: 13px !important;
            font-weight: 400 !important;
            color: var(--vm-text) !important;
            cursor: pointer !important;
            border-radius: 6px !important;
            transition: background 100ms ease !important;
            background: transparent !important;
        }
        
        #createCheckModal .vercel-select-option span {
            all: unset !important;
            font-size: 13px !important;
            color: var(--vm-text) !important;
        }
        
        #createCheckModal .vercel-select-option:hover {
            background: var(--vm-accent-light) !important;
        }
        
        #createCheckModal .vercel-select-option[data-selected] {
            background: var(--vm-accent-light) !important;
            font-weight: 500 !important;
        }
        
        #createCheckModal .vercel-select-check {
            display: none !important;
            width: 14px !important;
            height: 14px !important;
            color: var(--vm-success) !important;
            stroke: currentColor !important;
        }
        
        #createCheckModal .vercel-select-option[data-selected] .vercel-select-check {
            display: block !important;
        }
        
        #createCheckModal .vercel-select-empty {
            all: unset !important;
            display: block !important;
            padding: 20px !important;
            text-align: center !important;
            font-size: 13px !important;
            color: var(--vm-text-muted) !important;
        }
        
        /* Hidden input */
        #createCheckModal input[type="hidden"] {
            display: none !important;
        }
        
        /* =================================================================
           CHECKBOX - Fully scoped
           ================================================================= */
        #createCheckModal .vercel-checkbox {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            padding: 12px !important;
            background: var(--vm-accent-light) !important;
            border: 1px solid var(--vm-border) !important;
            border-radius: var(--vm-radius-sm) !important;
            cursor: pointer !important;
            transition: all var(--vm-transition) !important;
        }
        
        #createCheckModal .vercel-checkbox:hover {
            border-color: var(--vm-border-hover) !important;
        }
        
        #createCheckModal .vercel-checkbox input[type="checkbox"] {
            position: absolute !important;
            opacity: 0 !important;
            width: 0 !important;
            height: 0 !important;
            pointer-events: none !important;
        }
        
        #createCheckModal .vercel-checkbox-box {
            all: unset !important;
            width: 16px !important;
            height: 16px !important;
            min-width: 16px !important;
            border: 1px solid var(--vm-border-hover) !important;
            border-radius: 4px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all var(--vm-transition) !important;
            background: var(--vm-bg) !important;
        }
        
        #createCheckModal .vercel-checkbox-box svg {
            display: none !important;
            width: 10px !important;
            height: 10px !important;
            color: white !important;
            stroke: currentColor !important;
        }
        
        #createCheckModal .vercel-checkbox input:checked + .vercel-checkbox-box {
            background: var(--vm-accent) !important;
            border-color: var(--vm-accent) !important;
        }
        
        #createCheckModal .vercel-checkbox input:checked + .vercel-checkbox-box svg {
            display: block !important;
        }
        
        #createCheckModal .vercel-checkbox-text {
            all: unset !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            color: var(--vm-text) !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }
        
        #createCheckModal .vercel-badge-admin {
            all: unset !important;
            padding: 2px 6px !important;
            font-size: 10px !important;
            font-weight: 600 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            background: var(--vm-success) !important;
            color: white !important;
            border-radius: 4px !important;
        }
        
        /* =================================================================
           ENGINE LIST - Fully scoped
           ================================================================= */
        #createCheckModal .vercel-engine-list {
            all: unset !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            max-height: 340px !important;
            overflow-y: auto !important;
            padding: 2px 6px 2px 2px !important;
        }
        
        /* Custom scrollbar */
        #createCheckModal .vercel-engine-list::-webkit-scrollbar {
            width: 6px !important;
        }
        
        #createCheckModal .vercel-engine-list::-webkit-scrollbar-track {
            background: transparent !important;
        }
        
        #createCheckModal .vercel-engine-list::-webkit-scrollbar-thumb {
            background: var(--vm-border) !important;
            border-radius: 3px !important;
        }
        
        #createCheckModal .vercel-engine-list::-webkit-scrollbar-thumb:hover {
            background: var(--vm-border-hover) !important;
        }
        
        /* Engine Card */
        #createCheckModal .vercel-engine-card {
            all: unset !important;
            display: block !important;
            cursor: pointer !important;
        }
        
        #createCheckModal .vercel-engine-card input[type="radio"] {
            position: absolute !important;
            opacity: 0 !important;
            width: 0 !important;
            height: 0 !important;
            pointer-events: none !important;
        }
        
        #createCheckModal .vercel-engine-card-inner {
            all: unset !important;
            display: flex !important;
            align-items: flex-start !important;
            gap: 12px !important;
            padding: 14px !important;
            background: var(--vm-bg) !important;
            border: 1px solid var(--vm-border) !important;
            border-radius: var(--vm-radius-sm) !important;
            transition: all var(--vm-transition) !important;
        }
        
        #createCheckModal .vercel-engine-card-inner:hover {
            border-color: var(--vm-border-hover) !important;
        }
        
        #createCheckModal .vercel-engine-card input:checked + .vercel-engine-card-inner {
            border-color: var(--vm-accent) !important;
            box-shadow: inset 0 0 0 1px var(--vm-accent) !important;
        }
        
        /* Engine Radio */
        #createCheckModal .vercel-engine-radio {
            all: unset !important;
            width: 18px !important;
            height: 18px !important;
            min-width: 18px !important;
            border: 2px solid var(--vm-border-hover) !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin-top: 2px !important;
            transition: all var(--vm-transition) !important;
            background: transparent !important;
        }
        
        #createCheckModal .vercel-engine-radio-dot {
            all: unset !important;
            width: 8px !important;
            height: 8px !important;
            background: transparent !important;
            border-radius: 50% !important;
            transition: all var(--vm-transition) !important;
        }
        
        #createCheckModal .vercel-engine-card input:checked + .vercel-engine-card-inner .vercel-engine-radio {
            border-color: var(--vm-accent) !important;
        }
        
        #createCheckModal .vercel-engine-card input:checked + .vercel-engine-card-inner .vercel-engine-radio-dot {
            background: var(--vm-accent) !important;
        }

        /* Locked/restricted engines */
        #createCheckModal .vercel-engine-locked {
            opacity: 0.45 !important;
            cursor: not-allowed !important;
            pointer-events: none !important;
        }
        #createCheckModal .vercel-engine-locked .vercel-engine-card-inner {
            border-color: var(--vm-border) !important;
            background: var(--vm-bg-secondary) !important;
        }

        /* Engine Info */
        #createCheckModal .vercel-engine-info {
            all: unset !important;
            flex: 1 !important;
            min-width: 0 !important;
            display: block !important;
        }
        
        #createCheckModal .vercel-engine-name {
            all: unset !important;
            display: block !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            color: var(--vm-text) !important;
            margin-bottom: 4px !important;
            line-height: 1.4 !important;
        }
        
        #createCheckModal .vercel-engine-desc {
            all: unset !important;
            display: block !important;
            font-size: 12px !important;
            font-weight: 400 !important;
            color: var(--vm-text-secondary) !important;
            line-height: 1.5 !important;
        }
        
        /* Empty State */
        #createCheckModal .vercel-empty-state {
            all: unset !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 12px !important;
            padding: 40px 24px !important;
            background: var(--vm-accent-light) !important;
            border: 1px dashed var(--vm-border) !important;
            border-radius: var(--vm-radius-sm) !important;
            color: var(--vm-text-muted) !important;
        }
        
        #createCheckModal .vercel-empty-state svg {
            width: 24px !important;
            height: 24px !important;
            stroke: currentColor !important;
        }
        
        #createCheckModal .vercel-empty-state p {
            all: unset !important;
            font-size: 13px !important;
            color: var(--vm-text-muted) !important;
        }
        
        /* =================================================================
           FOOTER & BUTTONS - Fully scoped
           ================================================================= */
        #createCheckModal .vercel-modal-footer {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 12px !important;
            padding: 16px 24px !important;
            border-top: 1px solid var(--vm-border) !important;
            background: var(--vm-bg-secondary) !important;
            flex-shrink: 0 !important;
        }
        
        /* Footer hint (ESC to close) */
        #createCheckModal .vercel-footer-hint {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            font-size: 12px !important;
            color: var(--vm-text-muted) !important;
        }
        
        #createCheckModal .vercel-footer-hint span {
            all: unset !important;
            font-size: 12px !important;
            color: var(--vm-text-muted) !important;
        }
        
        /* Keyboard shortcut badge */
        #createCheckModal .vercel-kbd {
            all: unset !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-width: 20px !important;
            height: 20px !important;
            padding: 0 6px !important;
            font-size: 11px !important;
            font-weight: 500 !important;
            font-family: var(--vm-font) !important;
            color: var(--vm-text-muted) !important;
            background: var(--vm-bg) !important;
            border: 1px solid var(--vm-border) !important;
            border-radius: 4px !important;
            box-shadow: 0 1px 0 var(--vm-border) !important;
        }
        
        /* Footer actions (buttons) */
        #createCheckModal .vercel-footer-actions {
            all: unset !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }
        
        /* Buttons */
        #createCheckModal .vercel-btn {
            all: unset !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            padding: 10px 16px !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            font-family: var(--vm-font) !important;
            border-radius: var(--vm-radius-sm) !important;
            cursor: pointer !important;
            transition: all var(--vm-transition) !important;
            white-space: nowrap !important;
            box-sizing: border-box !important;
        }
        
        #createCheckModal .vercel-btn svg {
            width: 16px !important;
            height: 16px !important;
            stroke: currentColor !important;
        }
        
        #createCheckModal .vercel-btn-secondary {
            background: var(--vm-bg) !important;
            color: var(--vm-text) !important;
            border: 1px solid var(--vm-border) !important;
        }
        
        #createCheckModal .vercel-btn-secondary:hover {
            background: var(--vm-accent-light) !important;
            border-color: var(--vm-border-hover) !important;
        }
        
        #createCheckModal .vercel-btn-primary {
            background: var(--vm-accent) !important;
            color: var(--vm-bg) !important;
            border: 1px solid var(--vm-accent) !important;
        }
        
        #createCheckModal .vercel-btn-primary:hover {
            background: var(--vm-accent-hover) !important;
            border-color: var(--vm-accent-hover) !important;
        }
        
        #createCheckModal .vercel-btn:disabled {
            opacity: 0.7 !important;
            cursor: not-allowed !important;
        }
        
        /* Spinner animation */
        #createCheckModal .vercel-spinner {
            animation: vercel-spin 0.6s linear infinite !important;
            display: inline-block !important;
            vertical-align: middle !important;
            margin-right: 8px !important;
        }
        
        @keyframes vercel-spin {
            from { 
                transform: rotate(0deg); 
            }
            to { 
                transform: rotate(360deg); 
            }
        }
        
        /* Loading button state */
        #createCheckModal .vercel-btn-primary:disabled {
            opacity: 0.8 !important;
            cursor: not-allowed !important;
        }
        
        /* Disabled select */
        #createCheckModal .vercel-select-trigger:disabled {
            opacity: 0.6 !important;
            cursor: not-allowed !important;
            background: var(--vm-accent-light) !important;
        }

        /* Check setup progress and inline feedback (declared after the modal
           reset above so the component remains fully isolated from themes). */
        #createCheckModal .vercel-check-steps {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 8px !important;
            padding: 0 !important;
            margin: 0 0 20px !important;
            list-style: none !important;
        }

        #createCheckModal .vercel-check-steps li {
            display: flex !important;
            align-items: center !important;
            gap: 9px !important;
            min-width: 0 !important;
            padding: 10px !important;
            color: var(--vm-text-muted) !important;
            border: 1px solid var(--vm-border) !important;
            border-radius: var(--vm-radius-sm) !important;
            background: var(--vm-bg-secondary) !important;
        }

        #createCheckModal .vercel-check-steps li > span {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 24px !important;
            width: 24px !important;
            height: 24px !important;
            border: 1px solid var(--vm-border) !important;
            border-radius: 999px !important;
            font-size: 11px !important;
            font-weight: 700 !important;
        }

        #createCheckModal .vercel-check-steps strong,
        #createCheckModal .vercel-check-steps small { display: block !important; }
        #createCheckModal .vercel-check-steps strong { color: inherit !important; font-size: 12px !important; line-height: 1.3 !important; }
        #createCheckModal .vercel-check-steps small { margin-top: 2px !important; overflow: hidden !important; font-size: 10px !important; line-height: 1.25 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
        #createCheckModal .vercel-check-steps li.is-active { color: var(--vm-text) !important; border-color: var(--vm-text) !important; background: var(--vm-bg) !important; }
        #createCheckModal .vercel-check-steps li.is-active > span { color: var(--vm-bg) !important; border-color: var(--vm-text) !important; background: var(--vm-text) !important; }

        #createCheckModal .vercel-form-alert {
            display: block !important;
            margin: 0 0 18px !important;
            padding: 11px 13px !important;
            color: #b42318 !important;
            border: 1px solid #fecdca !important;
            border-radius: var(--vm-radius-sm) !important;
            background: #fffbfa !important;
            font-size: 12px !important;
            line-height: 1.45 !important;
        }
        #createCheckModal .vercel-form-alert[hidden] { display: none !important; }
        [data-kt-theme-mode="dark"] #createCheckModal .vercel-form-alert,
        .dark #createCheckModal .vercel-form-alert { color: #fda29b !important; border-color: #7a271a !important; background: rgba(122,39,26,.18) !important; }

        #createCheckModal .vercel-section-hint { margin: -2px 0 10px !important; color: var(--vm-text-muted) !important; font-size: 11px !important; line-height: 1.45 !important; }
        #createCheckModal .vercel-badge-recommended { display: inline-flex !important; margin-left: 5px !important; padding: 2px 6px !important; color: #175cd3 !important; border-radius: 999px !important; background: #eff8ff !important; font-size: 9px !important; font-weight: 700 !important; vertical-align: 1px !important; }
        
        /* Responsive */
        @media (max-width: 768px) {
            #createCheckModal .vercel-check-steps { grid-template-columns: 1fr !important; }
            #createCheckModal .vercel-check-steps li:not(.is-active) { display: none !important; }
            #createCheckModal .vercel-modal {
                max-width: 100% !important;
                margin: 8px !important;
                max-height: calc(100vh - 16px) !important;
            }
            
            #createCheckModal .vercel-modal-header {
                padding: 16px 20px !important;
            }
            
            #createCheckModal .vercel-modal-body {
                padding: 20px !important;
            }
            
            #createCheckModal .vercel-modal-footer {
                padding: 12px 20px !important;
                flex-direction: column-reverse !important;
                gap: 16px !important;
            }
            
            #createCheckModal .vercel-footer-hint {
                display: none !important;
            }
            
            #createCheckModal .vercel-footer-actions {
                width: 100% !important;
                flex-direction: column !important;
                gap: 8px !important;
            }
            
            #createCheckModal .vercel-btn {
                width: 100% !important;
            }
            
            #createCheckModal .vercel-modal-icon {
                width: 36px !important;
                height: 36px !important;
                min-width: 36px !important;
            }

            #createCheckModal .hyperscan-chip {
                gap: 5px !important;
                padding: 4px 8px !important;
            }

            #createCheckModal .hyperscan-tooltip {
                width: 220px !important;
            }
            
            #createCheckModal .vercel-modal-icon svg {
                width: 18px !important;
                height: 18px !important;
            }
        }
    
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        
        #upgrade_modal .upgrade-modal-content {
            max-width: 440px !important;
            width: 95% !important;
            border-radius: 16px !important;
            overflow: visible !important;
            margin: 0 auto !important;
            max-height: 90vh !important;
            display: flex !important;
            flex-direction: column !important;
            border: none !important;
            position: relative !important;
        }
        
        #upgrade_modal .upgrade-modal-body {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important;
        }
        
        @media (min-width: 1024px) {
            #upgrade_modal .upgrade-modal-content {
                width: 440px !important;
            }
        }
        
        @media (max-width: 768px) {
            #upgrade_modal .upgrade-modal-content {
                max-height: 95vh !important;
                margin-top: 0 !important;
                width: 95% !important;
                max-width: 440px !important;
            }
        }
        
        @media (max-width: 640px) {
            #upgrade_modal .upgrade-modal-content {
                max-height: 95vh !important;
                margin-top: 0 !important;
                width: 100% !important;
                border-radius: 0 !important;
            }
        }
        
        /* Smooth fade-in animation for modal */
        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        #upgrade_modal .upgrade-modal-content {
            animation: modalFadeIn 0.3s ease-out;
            will-change: opacity, transform;
            backface-visibility: hidden;
            -webkit-font-smoothing: antialiased;
        }
        
        /* Remove will-change after animation completes to free resources */
        #upgrade_modal.open .upgrade-modal-content {
            animation: modalFadeIn 0.3s ease-out forwards;
        }
        
        /* Ensure all inputs and Stripe elements in upgrade modal are clickable */
        #upgrade_modal input,
        #upgrade_modal textarea,
        #upgrade_modal select,
        #upgrade_modal button:not([data-kt-modal-dismiss="true"]) {
            position: relative !important;
            z-index: 1 !important;
            pointer-events: auto !important;
        }
        
        /* Close button positioning */
        #upgrade_modal button[data-kt-modal-dismiss="true"] {
            position: absolute !important;
            top: 0.875rem !important;
            right: 0.875rem !important;
            z-index: 100 !important;
            pointer-events: auto !important;
        }
        
        /* Stripe elements containers must be interactive */
        #upgrade_modal #upgrade-card-number,
        #upgrade_modal #upgrade-card-expiry,
        #upgrade_modal #upgrade-card-cvc {
            position: relative !important;
            z-index: 1 !important;
            pointer-events: auto !important;
            background: white !important;
            cursor: text !important;
        }
        
        /* Stripe iframes must be clickable */
        #upgrade_modal .StripeElement,
        #upgrade_modal .StripeElement iframe,
        #upgrade_modal #upgrade-card-number iframe,
        #upgrade_modal #upgrade-card-expiry iframe,
        #upgrade_modal #upgrade-card-cvc iframe {
            pointer-events: auto !important;
            z-index: 2 !important;
            cursor: text !important;
        }
        
        /* Ensure Stripe Elements are always on top and interactive */
        #upgrade_modal .StripeElement__focus {
            border-color: #2563eb !important;
        }
        
        #upgrade_modal form {
            position: relative;
            z-index: 1;
        }
        
        /* Make upgrade modal completely interactive */
        #upgrade_modal.open,
        #upgrade_modal.kt-modal-open {
            pointer-events: none !important;
        }
        
        #upgrade_modal.open .kt-modal-content,
        #upgrade_modal.kt-modal-open .kt-modal-content {
            pointer-events: auto !important;
        }
        
        #upgrade_modal.open .kt-modal-content *,
        #upgrade_modal.kt-modal-open .kt-modal-content * {
            pointer-events: auto !important;
        }

        /* ===== DARK MODE SUPPORT ===== */
        /* Using data-kt-theme-mode attribute to respect app's theme toggle (not OS preference) */
        [data-kt-theme-mode="dark"] #upgrade_modal {
            background: rgba(0, 0, 0, 0.8) !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .kt-modal-content {
            background: #1f2937 !important;
            border-color: #374151 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .kt-modal-content > div:first-child {
            background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
            border-bottom-color: #374151 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal button[data-kt-modal-dismiss="true"] {
            background: #374151 !important;
            color: #9ca3af !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal button[data-kt-modal-dismiss="true"]:hover {
            background: #4b5563 !important;
            color: #f3f4f6 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-hero-content > div:first-child {
            background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
            border-color: #dc2626 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal h1 {
            color: #f3f4f6 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-hero-content p {
            color: #d1d5db !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-hero-content > div:last-child span {
            color: #f3f4f6 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-hero-content > div:last-child p {
            color: #9ca3af !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-grid > div:first-child {
            background: #111827 !important;
            border-right-color: #374151 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-grid > div:last-child {
            background: #1f2937 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal h3 {
            color: #f3f4f6 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-grid div[style*="border: 1px solid #e5e7eb"],
        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-grid div[style*="background: white; border: 1px solid #e5e7eb"] {
            background: #1f2937 !important;
            border-color: #374151 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-grid div[style*="border: 1px solid #e5e7eb"] p {
            color: #f3f4f6 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-grid div[style*="border: 1px solid #e5e7eb"] p:last-child {
            color: #9ca3af !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal label {
            color: #d1d5db !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal input[type="text"],
        [data-kt-theme-mode="dark"] #upgrade_modal input[type="email"] {
            background: #374151 !important;
            border-color: #4b5563 !important;
            color: #f3f4f6 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal input[type="text"]:focus,
        [data-kt-theme-mode="dark"] #upgrade_modal input[type="email"]:focus {
            background: #374151 !important;
            border-color: #3b82f6 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal input[type="email"]:read-only {
            background: #1f2937 !important;
            color: #6b7280 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal #upgrade-card-number,
        [data-kt-theme-mode="dark"] #upgrade_modal #upgrade-card-expiry,
        [data-kt-theme-mode="dark"] #upgrade_modal #upgrade-card-cvc {
            background: #374151 !important;
            border-color: #4b5563 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal div[style*="background: #f0fdf4"] {
            background: #14532d !important;
            border-color: #166534 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal div[style*="background: #f0fdf4"] p {
            color: #86efac !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal div[style*="background: #f0fdf4"] a {
            color: #4ade80 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal div[style*="background: #f9fafb; border-radius: 0.375rem; border: 1px solid #e5e7eb"] {
            background: #1f2937 !important;
            border-color: #374151 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal div[style*="background: #f9fafb; border-radius: 0.375rem; border: 1px solid #e5e7eb"] p {
            color: #d1d5db !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal div[style*="background: #f9fafb; border-radius: 0.375rem; border: 1px solid #e5e7eb"] strong {
            color: #f3f4f6 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal #upgrade-card-errors {
            background: #7f1d1d !important;
            border-color: #991b1b !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal #upgrade-card-errors p {
            color: #fecaca !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal div[style*="border-top: 1px solid #e5e7eb"],
        [data-kt-theme-mode="dark"] #upgrade_modal div[style*="border-bottom: 1px solid #e5e7eb"] {
            border-color: #374151 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-grid div[style*="justify-content: center; gap: 1rem"] {
            color: #9ca3af !important;
        }

        /* Dark mode body */
        [data-kt-theme-mode="dark"] #upgrade_modal div[style*="background: linear-gradient(135deg, #f8fafc"] {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
            border-bottom-color: #475569 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal h1 {
            color: #f1f5f9 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal input {
            background: #334155 !important;
            border-color: #475569 !important;
            color: #f1f5f9 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal input::placeholder {
            color: #94a3b8 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal label {
            color: #94a3b8 !important;
        }

        /* Upgrade prompt: near-black CTA needs inverting on a dark surface. */
        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-modal-copy {
            color: #cbd5e1 !important;
        }

        [data-kt-theme-mode="dark"] #upgrade_modal .upgrade-modal-cta {
            background: #f8fafc !important;
            color: #0f172a !important;
        }
    
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        #upgrade_modal .kt-modal-content {
            max-width: 440px !important;
        }