:root {
            --brand-emerald: #10b981;
            --emerald-dark: #062e1e;
            --dark-cockpit-bg: #041a13;

            --bg-grad-1: #000000;          /* Vercel Dark Canvas */
            --bg-grad-2: #000000;          /* Vercel Dark Base */
            --card-bg: rgba(17, 17, 17, 0.75); /* Vercel Dark Surface translucent */
            --card-border: #333333;        /* Vercel Dark Border */
            --text-primary: #ffffff;       /* Vercel Dark White Text */
            --text-secondary: #888888;     /* Vercel Dark Muted Text */
            --accent: #ffffff;             /* Vercel Dark White Accent */
            --accent-glow: rgba(255, 255, 255, 0.15);
            --accent-light: #ffffff;       /* Vercel Dark White Highlight */
            --error: #ef4444;
            --success: #10b981;
            --warning: #f59e0b;
            --white: #ffffff;
            --text-dark: #000000;
            --bg-dark: #000000;

            /* Custom Brand Colors & State Backgrounds */
            --brand-primary: #111111;      /* Vercel Dark Core surface color */
            --brand-hover: #222222;
            --success-bg: rgba(16, 185, 129, 0.15);
            --success-border: rgba(16, 185, 129, 0.4);
            --success-text: #34d399;
            --accent-soft-bg: rgba(255, 255, 255, 0.08);
            --accent-soft-border: rgba(255, 255, 255, 0.25);
            --accent-soft-text: #ffffff;

            /* Spacing Tokens */
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 12px;
            --spacing-lg: 16px;
            --spacing-xl: 20px;
            --spacing-xxl: 32px;

            /* Radius Tokens */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;

            /* Typography Tokens */
            --font-size-xs: 0.75rem;     /* 12px -> 0.75rem */
            --font-size-sm: 0.875rem;    /* 14px -> 0.875rem */
            --font-size-base: 1rem;      /* 16px -> 1rem */
            --font-size-lg: 1.125rem;    /* 18px -> 1.125rem */
            --font-size-xl: 1.25rem;     /* 20px -> 1.25rem */
            --font-size-2xl: 1.5rem;     /* 24px -> 1.5rem */
            --font-size-3xl: 1.875rem;   /* 30px -> 1.875rem */

            --font-weight-light: 300;
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;

            /* Z-Index System (Stacking Contexts) */
            --z-index-base: 1;
            --z-index-nav: 100;
            --z-index-dropdown: 1000;
            --z-index-sticky: 1020;
            --z-index-fixed: 1030;
            --z-index-backdrop: 1040;
            --z-index-modal: 1050;
            --z-index-popover: 1060;
            --z-index-tooltip: 1070;
            --z-index-toast: 1080;

            /* Standard Transition Patterns */
            --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-normal: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            /* Subtle / Premium Box Shadows */
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            --shadow-glow: 0 0 15px rgba(16, 185, 129, 0.15);
        }

        /* Keyboard Accessibility Focus State (WCAG 2.1 Compliance) */
        :focus {
            outline: none; /* Suppress browser default outline in favor of high-visibility focus-visible outline */
        }

        :focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        a:focus-visible,
        .btn:focus-visible,
        .card:focus-visible,
        [role="button"]:focus-visible,
        [tabindex]:focus-visible {
            outline: 2px solid var(--accent) !important;
            outline-offset: 2px !important;
            box-shadow: 0 0 0 4px var(--accent-glow), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
            transition: box-shadow 0.15s ease-in-out, outline-offset 0.15s ease-in-out;
        }

        /* ── CSS View Transitions & Page-Level Fluid Layout Animations ── */
        @view-transition {
            navigation: auto; /* Enable native document-to-document cross-page transitions */
        }

        /* Prevent slate-blue flashing and raw background leaks during transitions */
        ::view-transition {
            background-color: var(--bg-dark);
        }

        ::view-transition-old(root) {
            animation: 250ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out-vt;
        }
        ::view-transition-new(root) {
            animation: 250ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in-vt;
        }

        @keyframes fade-out-vt {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        @keyframes fade-in-vt {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Assign view-transition-names to major layout containers to prevent layout shifts */
        .nav-panel {
            view-transition-name: nav-panel;
        }
        .detail-panel {
            view-transition-name: detail-panel;
        }

        /* Reduced motion accessibility */
        @media (prefers-reduced-motion: reduce) {
            ::view-transition-group(*),
            ::view-transition-old(*),
            ::view-transition-new(*) {
                animation: none !important;
            }
        }

        /* ── Offline Sync Pending & Error Micro-interactions ───────────────── */

        /* .sync-pending: Pulsing amber border and glow for outstanding/pending mutations */
        .sync-pending {
            position: relative;
            border-color: rgba(245, 158, 11, 0.6) !important;
            animation: sync-pending-pulse 2s infinite ease-in-out;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.15) !important;
        }

        @keyframes sync-pending-pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.2), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                border-color: rgba(245, 158, 11, 0.4);
            }
            50% {
                box-shadow: 0 0 12px 4px rgba(245, 158, 11, 0.35), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                border-color: rgba(245, 158, 11, 0.8);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.2), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                border-color: rgba(245, 158, 11, 0.4);
            }
        }

        /* For small badges or inline elements, add a pulsing status dot */
        .sync-pending::after {
            content: '';
            position: absolute;
            top: 6px;
            right: 6px;
            width: 8px;
            height: 8px;
            background-color: var(--warning);
            border-radius: 50%;
            box-shadow: 0 0 6px var(--warning);
            animation: sync-dot-pulse 1.5s infinite ease-in-out;
            pointer-events: none;
        }

        @keyframes sync-dot-pulse {
            0%, 100% { transform: scale(0.8); opacity: 0.5; }
            50% { transform: scale(1.2); opacity: 1; }
        }

        /* .sync-error: Soft red border with a premium haptic shake animation on validation/rejection */
        .sync-error {
            border-color: rgba(239, 68, 68, 0.8) !important;
            background: rgba(239, 68, 68, 0.05) !important;
            animation: sync-error-shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
            box-shadow: 0 0 12px rgba(239, 68, 68, 0.25) !important;
        }

        /* .rollback-rejection: Horizontal wiggle representing server verification/error states */
        .rollback-rejection {
            animation: sync-error-shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
        }

        @keyframes sync-error-shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
            40%, 60% { transform: translate3d(3px, 0, 0); }
        }

        /* Error badge/icon micro-interaction */
        .sync-error-badge {
            color: var(--error);
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.8rem;
            font-weight: 500;
            animation: fadeIn 0.3s ease-out;
        }

        /* Unified Skeleton Shimmer */
        .skeleton-shimmer {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 37%, rgba(255, 255, 255, 0.03) 63%);
            background-size: 200% 100%;
            animation: shimmer 1.4s infinite ease-in-out;
            display: inline-block;
            will-change: background-position;
            transform: translate3d(0, 0, 0);
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 0.5rem;
            height: 0.5rem;
        }
        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.02);
            border-radius: 0.25rem;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--accent-soft-border);
            border-radius: var(--radius-sm, 0.25rem);
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent, #10b981);
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Outfit', sans-serif;
            background: linear-gradient(135deg, var(--bg-grad-1), var(--bg-grad-2));
            color: var(--text-primary);
            overflow: hidden; /* Important for app layout */
        }

        .app-layout {
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
            width: 100vw;
        }

        /* Navigation Panel */
        .nav-panel {
            width: 100%;
            height: 56px;
            border-right: none;
            border-bottom: 1px solid var(--card-border);
            position: relative;
            z-index: 1050;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5rem;
            box-sizing: border-box;
            background: var(--card-bg, rgba(15, 23, 42, 0.3));
            backdrop-filter: blur(0.625rem);
        }

        #nav-panel-header {
            width: 100%;
            padding: 0 !important;
            background: transparent !important;
            backdrop-filter: none !important;
            border-bottom: none !important;
            position: relative;
            z-index: 10;
            height: 100%;
            display: flex;
            align-items: center;
        }

        /* Detail Panel */
        .detail-panel {
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
            padding: 0 1.5rem 1.5rem 1.5rem;
            flex: 1;
            height: calc(100vh - 56px) !important;
            min-height: 0;
            overflow-y: auto;
            box-sizing: border-box;
            background: rgba(0, 0, 0, 0.2);
        }
        
        #detail-content {
            padding-top: 3rem;
            box-sizing: border-box;
            width: 100%;
        }

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

        header {
            width: 100%;
            padding: 2rem 0;
            text-align: center;
            background: var(--card-bg, rgba(15, 23, 42, 0.3));
            backdrop-filter: blur(0.625rem);
            border-bottom: 1px solid var(--card-border);
            position: sticky;
            top: 0;
            z-index: 10;
        }

        h1 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 600;
            background: linear-gradient(to right, #a5b4fc, #e0e7ff);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 1.25rem var(--accent-glow);
        }

        .container {
            width: 90%;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            padding-top: 2rem;
            padding-bottom: 3rem;
        }

        /* Glassmorphism Card Style */
        .card {
            background: var(--card-bg);
            backdrop-filter: blur(0.75rem);
            -webkit-backdrop-filter: blur(0.75rem);
            border: 1px solid var(--card-border);
            border-radius: 1rem;
            padding: 1.5rem 2rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            text-align: left;
            box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 25px rgba(0, 0, 0, 0.4), 0 0 0.9375rem var(--accent-glow);
            border-color: rgba(16, 185, 129, 0.5);
        }

        .card.selected {
            border-color: var(--accent);
            background: rgba(16, 185, 129, 0.2);
            box-shadow: inset 0 0 1.25rem rgba(16, 185, 129, 0.2), 0 0 0.9375rem var(--accent-glow);
        }

        .card-text {
            font-size: 1.1rem;
            font-weight: 400;
            text-align: left;
            width: 100%;
        }

        .card-list {
            width: 90%;
            margin: 2rem auto 3rem auto;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        /* Skeleton Loader */
        .skeleton {
            background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
            border-radius: 0.75rem;
            height: 60px;
            width: 100%;
        }
        
        /* Big skeleton for main panel */
        .skeleton-block {
            height: 120px;
            border-radius: 1rem;
            margin-top: 2rem;
        }

        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* Search Bar */
        .search-container {
            width: 90%;
            margin: 1rem auto 0;
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: 0.8rem 1.2rem;
            border-radius: 1.875rem;
            background: var(--card-bg, rgba(255, 255, 255, 0.05));
            border: 1px solid var(--card-border, rgba(255, 255, 255, 0.1));
            color: var(--text-primary);
            font-size: 1rem;
            font-family: 'Outfit', sans-serif;
            backdrop-filter: blur(0.625rem);
            transition: all 0.3s ease;
            box-sizing: border-box;
            outline: none;
        }

        .search-input:focus {
            background: var(--bg-grad-2, rgba(15, 23, 42, 0.8));
            border-color: var(--accent);
            box-shadow: 0 0 1.25rem var(--accent-glow, rgba(16, 185, 129, 0.4));
        }

        .search-input:focus-visible {
            outline: none !important;
            outline-offset: 0 !important;
            box-shadow: 0 0 1.25rem var(--accent-glow, rgba(16, 185, 129, 0.4)), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
        }

        .search-input::placeholder {
            color: var(--text-muted, rgba(255, 255, 255, 0.5));
        }

        .error {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            padding: 1rem;
            border-radius: 0.5rem;
            text-align: center;
        }

        /* Hero Image Banner */
        .hero-banner {
            width: 100%;
            background-color: rgba(0, 0, 0, 0.4); 
            border-radius: 1rem;
            border: 1px solid var(--card-border);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0.5rem 2rem 0 rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(0.75rem);
        }

        .hero-banner img {
            width: 100%;
            height: auto;
            max-height: 25vh;
            object-fit: contain;
            display: block;
        }

        .hero-placeholder {
            width: 80px;
            height: 80px;
            opacity: 0.2;
            fill: var(--text-primary);
        }

        /* Details View Grid */
        .detail-header-title {
            font-size: 2.2rem;
            margin: 0 0 0.5rem 0;
            color: var(--text-primary);
        }

        .detail-jobid-badge {
            display: inline-block;
            background: var(--card-bg);
            border: 1px solid var(--accent);
            color: var(--accent, #a5b4fc);
            padding: 0.3rem 0.8rem;
            border-radius: 1.25rem;
            font-size: 0.9rem;
            margin-bottom: 2rem;
        }

        /* Editable Field Styling */
        .editable-field {
            cursor: pointer;
            position: relative;
            display: inline-block;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
            transition: all 0.2s;
        }
        .editable-field:hover {
            color: #a5b4fc !important;
            border-bottom-color: var(--accent, #a5b4fc);
        }
        
        .detail-card {
            background: var(--card-bg);
            backdrop-filter: blur(0.75rem);
            border: 1px solid var(--card-border);
            border-radius: 1rem;
            padding: 2.5rem;
            box-shadow: 0 0.5rem 2rem 0 rgba(0, 0, 0, 0.3);
        }

        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
        }

        .detail-grid.compact {
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1.5rem;
        }
        
        /* v1740: .btn — section-header action buttons (View Marketing, View Budget).
           Class existed in GAS Stylesheet.html but was never ported to app.css
           after the Firebase Hosting migration; buttons rendered as plain text. */
        .btn {
            background: var(--btn-bg, var(--accent-soft, rgba(16, 185, 129, 0.15))) !important;
            border: 1px solid var(--btn-border, var(--accent-glow, rgba(16, 185, 129, 0.4))) !important;
            color: var(--btn-text, var(--accent, #a5b4fc)) !important;
            border-radius: 0.5rem;
            padding: 0.3rem 0.8rem;
            font-size: 0.85rem;
            font-family: inherit;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            transition: background 0.2s, border-color 0.2s;
            white-space: nowrap;
        }
        .btn:hover {
            background: var(--btn-hover-bg, var(--accent-glow, rgba(16, 185, 129, 0.35))) !important;
            border-color: var(--btn-text, var(--accent, rgba(16, 185, 129, 0.7))) !important;
        }
        
        .detail-grid.compact .detail-value {
            font-size: 1rem;
        }

        .detail-grid.compact .detail-item {
            padding: 0.8rem;
        }

        /* Budget Table Styling */
        /* v1697 PF-02: CSS containment — limits paint/layout invalidation to budget subtree.
           contain:layout style paint prevents full-page repaints when budget rows change. */
        #budget-container {
            contain: layout style paint;
        }
        .budget-table {
            width: 100%;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 0;
            text-align: left;
            font-family: 'Outfit', sans-serif;
            color: var(--text-primary);
        }
        
        .budget-table th {
            color: var(--text-muted, #94a3b8); font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 1rem 0.5rem;
            border-bottom: 2px solid var(--accent, rgba(16, 185, 129, 0.4));
            background: var(--card-bg, #0f172a) !important;
            position: sticky;
            top: 0;
            z-index: 100 !important;
            transform: translateZ(1px);
            -webkit-transform: translateZ(1px);
        }
        
        .budget-table th:first-child {
            border-top-left-radius: 1rem;
            padding-left: 1.5rem;
        }
        
        .budget-table th:last-child {
            border-top-right-radius: 1rem;
            padding-right: 1.5rem;
        }
        
        .budget-table td {
            padding: 1rem 0.5rem;
            border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
            font-size: 1rem;
        }
        
        .budget-table td:first-child {
            padding-left: 1.5rem;
        }
        
        .budget-table td:last-child {
            padding-right: 1.5rem;
        }
        
        .budget-table tr:hover:not(:last-child) {
            background: var(--accent-soft, rgba(255, 255, 255, 0.03));
            transition: background 0.2s;
        }
        
        /* Custom Tooltip */
        .has-tooltip {
            position: relative;
            cursor: help;
        }
        
        .has-tooltip .tooltip-content {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: translateY(0.625rem);
            background: rgba(15, 23, 42, 0.95);
            border: 1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
            color: #e2e8f0;
            text-align: center;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.85rem;
            font-weight: 300;
            white-space: normal;
            min-width: 250px;
            z-index: 50;
            transition: all 0.2s ease-in-out;
            pointer-events: none;
            box-shadow: 0 0.25rem 6px -1px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(0.625rem);
        }
        
        .has-tooltip .tooltip-content::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            height: 1.25rem;
        }
        
        .has-tooltip:hover .tooltip-content {
            visibility: visible;
            opacity: 1;
            transform: translateY(-0.5rem);
            pointer-events: auto;
        }
        /* F-05 (v1671): Duplicate .budget-table th/td/tr rules removed — the canonical
           definitions with position:sticky and z-index are at lines ~314-356 above. */

        .detail-item {
            background: var(--accent-soft, rgba(255, 255, 255, 0.03));
            padding: 1.2rem;
            border-radius: 0.625rem;
            border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        
        .detail-item.editable-item {
            cursor: text;
        }

        .detail-item.editable-item:not(.editing):hover {
            background: var(--accent-glow, rgba(255, 255, 255, 0.08));
            border-color: var(--accent, rgba(16, 185, 129, 0.4));
            box-shadow: 0 0 0.625rem var(--accent-glow, rgba(16, 185, 129, 0.2));
        }
        
        .detail-item.editing {
            background: rgba(16, 185, 129, 0.1);
            border-color: var(--accent);
            box-shadow: 0 0 0.9375rem rgba(16, 185, 129, 0.3);
        }

        .inline-edit-input {
            width: 100%;
            background: var(--card-bg, rgba(0,0,0,0.3));
            border: 1px solid var(--accent);
            color: var(--text-primary);
            font-family: 'Outfit', sans-serif;
            font-size: 1.15rem;
            padding: 0.4rem 0.6rem;
            border-radius: 6px;
            outline: none;
            box-sizing: border-box;
            margin-top: 0.3rem;
            margin-bottom: 0.2rem;
        }
        
        .inline-edit-input:focus {
            box-shadow: 0 0 0.5rem rgba(16, 185, 129, 0.5);
        }

        .inline-edit-hint {
            font-size: 0.75rem;
            color: var(--accent, #818cf8);
            opacity: 0.8;
            margin-top: 0.2rem;
        }

        .spinner-small {
            width: 1rem;
            height: 1rem;
            border: 2px solid rgba(255,255,255,0.1);
            border-top: 2px solid var(--accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .detail-label {
            font-size: 0.8rem;
            color: var(--accent, #818cf8);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .detail-value {
            font-size: 1.15rem;
            color: var(--text-primary);
            line-height: 1.4;
            word-wrap: break-word;
        }

        #react-block1-root,
        #react-block2-root {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
        }

        #react-block1-root:empty,
        #react-block2-root:empty {
            display: none !important;
        }

        /* Responsive Mobile Layout Navigation */
        @media screen and (max-width: 900px) {
            .nav-menu-content {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                overflow-y: auto;
            }
            
            .mobile-selected-label {
                font-weight: 500;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* Top Navigation Layout (Applied Globally) */
            .app-layout {
                flex-direction: column;
                height: 100vh;
                overflow: hidden;
            }
            #react-block1-root,
            #react-block2-root {
                display: flex;
                flex-direction: column;
                flex: 1;
                min-height: 0;
            }

            header {
                padding: 0.5rem 0;
                position: relative;
            }
            .mobile-top-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.5rem 1rem;
                border-bottom: 1px solid var(--card-border);
                background: var(--bg-card);
                z-index: 100;
            }
            .app-title {
                font-size: 1.5rem;
            }

            .nav-menu-content {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--bg-card);
                border-bottom: 1px solid var(--card-border);
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                z-index: 99;
                padding-top: 1rem;
                padding-bottom: 1rem;
                text-align: left;
            }
            .nav-menu-content.active {
                display: flex;
            }

            .card-list {
                width: 90%;
                margin: 0.5rem auto 1rem auto;
            }
            .detail-panel {
                width: 100%;
                padding: 0 1.5rem 1.5rem 1.5rem;
                max-width: 1600px;
                margin: 0 auto;
                flex: 1;
                 height: calc(100vh - 56px) !important;
                 min-height: 0;
            }
            #detail-content {
                padding-top: 1.5rem;
            }
            .detail-header-title {
                font-size: 2rem;
            }
            #budget-header-stats .detail-card {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
                gap: 1.5rem !important;
            }
            #budget-header-stats > div > div {
                border-right: 1px solid rgba(255,255,255,0.1) !important;
                padding-right: 1.5rem !important;
                border-bottom: none;
                padding-bottom: 0;
            }
            #budget-header-stats > div > div:last-child {
                border-right: none !important;
                padding-right: 0 !important;
            }
        }



        @keyframes pulse {
            0%, 100% { opacity: 1; text-shadow: 0 0 0.5rem rgba(165, 180, 252, 0.5); }
            50% { opacity: 0.4; }
        }
        
        .pulse-text {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            color: var(--accent, #a5b4fc);
        }

        .refresh-qb-btn {
            background: var(--btn-bg, var(--accent-soft, rgba(16, 185, 129, 0.15))) !important;
            border: 1px solid var(--btn-border, var(--accent-glow, rgba(16, 185, 129, 0.4))) !important;
            color: var(--btn-text, var(--accent, #a5b4fc)) !important;
            padding: 0.3rem 0.6rem;
            border-radius: 0.25rem;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .refresh-qb-btn:hover {
            background: var(--btn-hover-bg, var(--accent-glow, rgba(16, 185, 129, 0.35))) !important;
        }

        .map-action-btn {
            background: var(--btn-bg, var(--accent-soft, rgba(16, 185, 129, 0.15))) !important;
            border: 1px solid var(--btn-border, var(--accent-glow, rgba(16, 185, 129, 0.4))) !important;
            color: var(--btn-text, var(--accent, #a5b4fc)) !important;
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem;
            font-size: 0.85rem;
            font-weight: 500;
            font-family: 'Outfit', sans-serif;
            cursor: pointer;
            transition: all 0.2s ease;
            backdrop-filter: blur(0.5rem);
            white-space: nowrap;
        }
        
        .map-action-btn:hover {
            background: var(--btn-hover-bg, var(--accent-glow, rgba(16, 185, 129, 0.35))) !important;
            box-shadow: 0 0 0.75rem var(--btn-border, rgba(16, 185, 129, 0.3));
        }

        .map-action-btn.btn-danger {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.4);
            color: #fca5a5;
        }

        .map-action-btn.btn-danger:hover {
            background: rgba(239, 68, 68, 0.35);
            box-shadow: 0 0 0.75rem rgba(239, 68, 68, 0.3);
        }

        .map-action-btn.btn-success {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.4);
            color: #6ee7b7;
        }

        .map-action-btn.btn-success:hover {
            background: rgba(16, 185, 129, 0.35);
            box-shadow: 0 0 0.75rem rgba(16, 185, 129, 0.3);
        }

        .is-final-row {
            background: rgba(16, 185, 129, 0.05);
        }
        
        .is-final-row td {
            border-bottom: 1px solid rgba(16, 185, 129, 0.1);
        }

        /* ── Per-Line-Item Preliminary Styles ─────────────────────────────── */
        .is-preliminary-row {
            background: rgba(245, 158, 11, 0.06);
        }

        .is-preliminary-row td {
            border-bottom: 1px solid rgba(245, 158, 11, 0.12);
        }

        .is-preliminary-row td:first-child {
            border-left: 3px solid #f59e0b;
        }

        /* Preliminary toggle button — mirrors .lock-btn */
        .prelim-btn {
            background: none;
            border: none;
            padding: 0.25rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.25rem;
            transition: all 0.2s;
            outline: none;
        }

        .prelim-btn:hover {
            background: rgba(245, 158, 11, 0.15);
        }

        .prelim-btn:disabled,
        .prelim-btn[disabled] {
            cursor: not-allowed;
            opacity: 0.3;
        }
        
        .lock-cell {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .lock-btn {
            background: none;
            border: none;
            padding: 0.25rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.25rem;
            transition: all 0.2s;
            outline: none;
        }

        .lock-btn:hover {
            background: rgba(255,255,255,0.1);
        }

        .item-lock.open-lock {
            color: rgba(255,255,255,0.3);
        }
        
        .item-lock.closed-lock {
            filter: drop-shadow(0 0 0.25rem rgba(16, 185, 129, 0.5));
        }

        .lock-cell .code-text {
            flex-grow: 1;
        }
        @media print {
            @page {
                size: letter portrait;
                margin: 0.25in;
            }
            body, html {
                background: white !important;
                color: black !important;
                overflow: visible !important;
                font-family: Arial, Helvetica, sans-serif !important;
                height: auto !important;
            }
            /* Hide all interactive elements */
            .nav-panel, header#nav-panel-header, .refresh-qb-btn, .mobile-top-bar, #global-back-btn, button, .detail-jobid-badge, .lock-btn, .has-tooltip .tooltip-content, .print-hide {
                display: none !important;
            }
            .app-layout, .detail-panel {
                display: block !important;
                height: auto !important;
                overflow: visible !important;
                background: white !important;
            }
            .detail-panel[style*="display: none"],
            .detail-panel[style*="display:none"] {
                display: none !important;
            }
            .detail-panel {
                padding: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            #detail-content {
                padding-top: 0 !important;
                display: block !important;
            }
            
            /* Header sizing */
            h2.detail-header-title {
                color: black !important;
                background: none !important;
                -webkit-text-fill-color: black !important;
                text-shadow: none !important;
                margin: 0 0 0.1rem 0 !important;
                font-size: 1.1rem !important;
                font-weight: bold !important;
            }
            .detail-builder {
                color: black !important;
                font-size: 1.1rem !important;
                font-weight: bold !important;
                margin-bottom: 0 !important;
            }
            .detail-neighborhood {
                color: #555 !important;
                font-size: 0.9rem !important;
            }
            .detail-subtitle {
                color: #333 !important;
                font-size: 0.85rem !important;
                margin: 0 0 0.5rem 0 !important;
            }

            /* Remove borders and padding for compact look */
            .detail-card {
                background: white !important;
                border: none !important;
                box-shadow: none !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                padding: 0 !important;
                margin-bottom: 1rem !important;
                break-inside: avoid;
            }
            #budget-header-wrapper {
                margin-bottom: 0 !important;
                float: left !important;
                width: 48% !important;
            }
            .detail-card * {
                color: black !important;
            }

            /* Editable fields should look like flat text */
            .editable-field {
                border-bottom: none !important;
                pointer-events: none !important;
                color: black !important;
            }

            /* Budget Header Grid Flattening */
            #budget-header-stats {
                float: right !important;
                width: 48% !important;
                margin: 0 !important;
            }
            #budget-header-stats * {
                font-size: 0.65rem !important;
            }
            .profit-row {
                border-top: 1px solid black !important;
                padding-top: 0.2rem !important;
                margin-top: 0.2rem !important;
            }
            #budget-header-stats .detail-card {
                display: flex !important;
                flex-direction: row !important;
                justify-content: flex-end !important;
                gap: 1.5rem !important;
            }
            #budget-header-stats > div > div:first-child {
                display: none !important;
            }
            #budget-header-stats > div > div {
                border-right: none !important;
                padding-right: 0 !important;
                flex: 0 0 auto !important;
                width: 180px !important;
            }

            #budget-container {
                clear: both !important;
                display: block !important;
                width: 100% !important;
                page-break-before: avoid !important;
                break-before: avoid !important;
                padding-top: 0.25rem !important; /* Move table physically closer to the page header block */
            }

            /* Force table components back to native table layout roles in print */
            .budget-table, .wip-table {
                display: table !important;
                clear: both !important;
                width: 100% !important;
                border: none !important;
                border-radius: 0 !important;
                border-collapse: collapse !important;
                border-spacing: 0 !important;
                page-break-inside: auto;
                color: black !important;
                table-layout: auto !important; /* Force natural column scaling */
                font-size: 7pt !important;
            }
            .budget-table thead, .wip-table thead {
                display: table-header-group !important;
                position: static !important;
                top: auto !important;
                left: auto !important;
            }
            .budget-table tbody, .wip-table tbody {
                display: table-row-group !important;
            }
            .budget-table tr, .wip-table tr {
                display: table-row !important;
                page-break-inside: avoid;
                page-break-after: auto;
                border: none !important;
            }
            .budget-table th {
                display: table-cell !important;
                position: static !important;
                background: #4F81BD !important; /* Excel default table blue */
                color: white !important;
                font-weight: bold !important;
                border: none !important;
                border-bottom: 2px solid #4F81BD !important;
                padding: 3px 0.25rem !important;
                text-transform: uppercase !important;
                font-size: 8pt !important;
                border-radius: 0 !important;
                text-align: right !important;
                white-space: nowrap !important;
            }
            .budget-table th:first-child {
                text-align: left !important;
            }
            .budget-table td {
                display: table-cell !important;
                position: static !important;
                color: black !important;
                padding: 1px 0.25rem !important;
                border: none !important;
                vertical-align: middle !important;
                white-space: nowrap !important;
                font-size: 7pt !important;
            }
            .lock-cell {
                display: table-cell !important;
            }
            /* Zebra striping for readability */
            .budget-table tbody tr:nth-child(even) td {
                background-color: #F2F2F2 !important;
            }
            .budget-table tbody tr:nth-child(odd) td {
                background-color: #ffffff !important;
            }
            .is-final-row td {
                background-color: #D9D9D9 !important;
                font-weight: normal !important;
                border-top: 2px solid #ccc !important;
                border-bottom: 2px solid #ccc !important;
            }
            .is-preliminary-row td {
                background-color: #FFF9C4 !important;
                font-style: italic !important;
                border-left: 3px solid #f59e0b !important;
            }
            .prelim-btn {
                display: none !important;
            }
            h2, h3, div, span, td, th {
                color: black !important;
            }
            * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            .editable-field {
                border: none !important;
            }
        }

/* WIP Matrix Styles */
#wip-matrix-container {
    font-family: 'Inter', sans-serif;
}
.wip-table-wrapper {
    background: rgba(4, 26, 19, 0.7);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.75rem;
    min-width: 100%;
    width: max-content;
    box-sizing: border-box;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.wip-group-header {
    padding: 1rem 1.25rem;
    height: 56px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: -1px; /* -1px to prevent any sub-pixel gap at the top */
    z-index: 20;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
.wip-group-title {
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0;
}
.wip-group-actions button {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 6px 0.625rem;
    border-radius: 6px;
    transition: all 0.2s;
}
.wip-group-actions button:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}
.wip-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
}
.wip-table th {
    color: var(--text-muted, #94a3b8); font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem;
    border-bottom: 2px solid var(--accent, rgba(16, 185, 129, 0.4));
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    white-space: nowrap;
    position: sticky;
    top: 55px;
    z-index: 15;
}
.wip-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    font-size: 1rem;
    white-space: nowrap;
}
.wip-table tr {
    transition: background 0.2s;
}
.wip-table tbody tr:hover {
    background: var(--accent-soft, rgba(255, 255, 255, 0.03));
}
.wip-row-drag-handle, .wip-group-drag-handle {
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 0.25rem;
    color: #64748b;
    transition: background 0.2s, color 0.2s;
}
.wip-row-drag-handle:hover, .wip-group-drag-handle:hover {
    color: #94a3b8;
    background: var(--bg-alpha-05, rgba(255, 255, 255, 0.05));
}
.wip-row-drag-handle:active, .wip-group-drag-handle:active {
    cursor: grabbing;
}
.wip-job-row-remove {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 1.2rem;
    padding: 2px 6px;
    border-radius: 0.25rem;
}
.wip-table tbody tr:hover .wip-job-row-remove {
    opacity: 0.7;
}
.wip-job-row-remove:hover {
    opacity: 1 !important;
    background: rgba(239, 68, 68, 0.1);
}
.wip-sortable-ghost {
    opacity: 0.4;
    background: rgba(16, 185, 129, 0.2);
}

/* --- DATA POINT SELECTOR MODAL --- */
.dp-item {
    background: rgba(4, 26, 19, 0.8);
    border: 1px solid rgba(255,255,255,0.1);
    color: #f8fafc;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    cursor: grab;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s, background 0.2s;
}
.dp-item:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(4, 26, 19, 1);
}
.dp-item:active {
    cursor: grabbing;
}
.dp-item-tooltip {
    color: #94a3b8;
    font-size: 0.75rem;
    margin-left: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}
.dp-sortable-ghost {
    opacity: 0.4;
    background: #475569;
    border: 1px dashed rgba(16, 185, 129, 0.8);
}
#dp-available-list .dp-format-gear { display: none !important; }

/* Premium Popup Styles */
.premium-popup .leaflet-popup-content-wrapper {
    padding: 0;
    background: #111622;
    border: 1px solid #c2a66b;
    border-radius: 0.25rem;
    overflow: hidden;
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.8);
}
.premium-popup .leaflet-popup-content {
    margin: 0;
    width: 240px !important;
}
.premium-popup .leaflet-popup-tip {
    background: #111622;
    border: 1px solid #c2a66b;
    border-top: none;
    border-left: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* Leaflet Premium Tooltip styling */
.leaflet-tooltip.premium-tooltip {
    background: #111622;
    color: #ffffff;
    border: 1px solid #c2a66b;
    border-radius: 0.5rem;
    padding: 0.625rem;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 0.25rem 0.9375rem rgba(0,0,0,0.5);
    white-space: nowrap;
}
.leaflet-tooltip.premium-tooltip::before {
    border-top-color: #c2a66b;
}

/* Hero Triad (3-card top section) */
.hero-triad {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.hero-triad-card {
    border-radius: 0.75rem;
    border: 1px solid var(--card-border);
    background: var(--card-bg, rgba(0,0,0,0.3));
    overflow: hidden;
    height: 280px;
    position: relative;
    backdrop-filter: blur(0.75rem);
    box-shadow: 0 0.5rem 2rem 0 rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
}
.hero-triad-card.notes-card {
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#header-notes-card {
    height: auto !important;
    min-height: auto !important;
}
.hero-triad-card.notes-card:hover {
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0.5rem 2rem 0 rgba(16, 185, 129, 0.2);
}

/* Responsive: collapse to single column on narrow screens */
@media screen and (max-width: 900px) {
    .hero-triad { grid-template-columns: 1fr; }
    .hero-triad-card { height: 240px; }
}

/* Crop modal canvas */
#hero-crop-canvas {
    display: block;
    max-width: 100%;
    cursor: crosshair;
}

/* UI-MOBILE-01: Hybrid Grid/List (Mobile Card Views) for Job/Budget Tables */
@media screen and (max-width: 900px) {
    .budget-table, .budget-table thead, .budget-table tbody, .budget-table th, .budget-table td, .budget-table tr {
        display: block;
    }
    .wip-table, .wip-table thead, .wip-table tbody, .wip-table th, .wip-table td, .wip-table tr {
        display: block;
    }
    .budget-table thead, .wip-table thead {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .budget-table tr, .wip-table tr {
        margin-bottom: 1rem;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 0.5rem;
        background: var(--accent-soft, rgba(255, 255, 255, 0.03));
        padding: 0.5rem;
    }
    .budget-table td, .wip-table td {
        border: none;
        position: relative;
        padding-left: 50% !important;
        text-align: right !important;
        min-height: 2rem;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }
    .budget-table td::before, .wip-table td::before {
        position: absolute;
        top: 50%;
        left: 0.5rem;
        transform: translateY(-50%);
        width: 45%;
        padding-right: 0.625rem;
        white-space: nowrap;
        content: attr(data-label);
        font-weight: 600;
        color: #94a3b8;
        text-align: left;
    }
    .wip-table td:first-child {
        padding-left: 0 !important;
        justify-content: space-between;
    }
    .budget-table td.lock-cell {
        justify-content: flex-end;
        padding-left: 50% !important;
    }
}

/* --- Extracted Inline Styles --- */
.extracted-style-1 {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

.extracted-style-2 {
    background: var(--bg-card, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.15));
    color: var(--text-primary, #f8fafc);
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast, all 0.2s ease);
}
.extracted-style-2:hover {
    border-color: var(--accent, #10b981) !important;
    color: var(--accent, #10b981) !important;
    background: var(--accent-soft, rgba(16, 185, 129, 0.12)) !important;
}

.extracted-style-3 {
    align-items: center;
    background: var(--bg-card, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.15));
    color: var(--text-primary, #f8fafc);
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-fast, all 0.2s ease);
}
.extracted-style-3:hover {
    border-color: var(--accent, #10b981) !important;
    color: var(--accent, #10b981) !important;
    background: var(--accent-soft, rgba(16, 185, 129, 0.12)) !important;
}
.extracted-style-4 {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 400px;
}

/* absolute search dropdown prevents stretching and centers beautifully */
.nav-menu-content {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: var(--bg-card, rgba(4, 26, 19, 0.95));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.1));
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    z-index: 1060;
    max-height: 400px;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0.75rem;
}

.nav-menu-content.active {
    display: flex;
}

.extracted-style-5 {
    width: 100%;
    box-sizing: border-box;
    padding-left: 2.5rem;
}

.extracted-style-6 {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: color 0.2s;
}
.extracted-style-6:hover {
    color: #fff !important;
}

.extracted-style-7 {
    display:flex;
    align-items: center;
    border: 1px solid var(--accent-glow, rgba(16, 185, 129, 0.4));
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(16, 185, 129, 0.2);
    height: fit-content;
    align-self: center;
}

.extracted-style-8 {
    padding: 0.5rem 0.6rem;
    border: none;
    border-right: 1px solid rgba(16, 185, 129, 0.4);
    background: transparent;
    color: var(--accent, #a5b4fc);
    cursor: pointer;
    align-items:center;
    justify-content:center;
}
.extracted-style-8:hover {
    background: rgba(16, 185, 129, 0.4) !important;
}

.extracted-style-9 {
    display:block;
}

.extracted-style-10 {
    padding: 0.5rem 0.8rem;
    border: none;
    background: transparent;
    color: var(--accent, #a5b4fc);
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
}
.extracted-style-10:hover {
    background: rgba(16, 185, 129, 0.4) !important;
}

.extracted-style-11 {
    padding: 0.5rem 0.6rem;
    border: none;
    border-left: 1px solid rgba(16, 185, 129, 0.4);
    background: transparent;
    color: var(--accent, #a5b4fc);
    cursor: pointer;
    align-items:center;
    justify-content:center;
}
.extracted-style-11:hover {
    background: rgba(16, 185, 129, 0.4) !important;
}

.extracted-style-12 {
    display:block;
}

.extracted-style-13 {
    background: var(--bg-card, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.15));
    color: var(--text-primary, #f8fafc);
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    align-self: center;
    transition: var(--transition-fast, all 0.2s ease);
}
.extracted-style-13:hover {
    border-color: var(--accent, #10b981) !important;
    color: var(--accent, #10b981) !important;
    background: var(--accent-soft, rgba(16, 185, 129, 0.12)) !important;
}

.extracted-style-14 {
    background: var(--accent-soft, rgba(16, 185, 129, 0.15));
    border: 1px solid var(--accent, #10b981);
    color: var(--accent, #10b981);
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    align-self: center;
    margin-left: 0.5rem;
    transition: var(--transition-fast, all 0.2s ease);
}
.extracted-style-14:hover {
    background: var(--accent, #10b981) !important;
    color: var(--accent-contrast, #ffffff) !important;
    box-shadow: var(--shadow-glow, 0 0 12px rgba(16, 185, 129, 0.3));
}

.extracted-style-15 {
    padding: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100vh;
    background: #0f172a;
    box-sizing: border-box;
    flex-direction: column;
}

.extracted-style-16 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.extracted-style-17 {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin-right: auto;
}

.extracted-style-18 {
    width: 100%;
    box-sizing: border-box;
    padding-left: 2.5rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
}

.extracted-style-19 {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: color 0.2s;
}
.extracted-style-19:hover {
    color: #fff !important;
}

.extracted-style-20 {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.extracted-style-21 {
    flex-direction: column;
    gap: 2.5rem;
    align-items: stretch;
    flex-grow: 1;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 2.5rem;
    padding-right: 0.625rem;
}

.extracted-style-22 {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: stretch;
    flex-grow: 1;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 2.5rem;
    padding-right: 0.625rem;
}

.extracted-style-23 {
    padding: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100vh;
    background: #0f172a;
    box-sizing: border-box;
    flex-direction: column;
}

.extracted-style-24 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.extracted-style-25 {
    color: white;
    margin: 0;
    font-size: 1.5rem;
}

.extracted-style-26 {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.extracted-style-27 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    align-items: start;
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 2.5rem;
    padding-right: 0.625rem;
}

.extracted-style-28 {
    padding: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100vh;
    background: #0f172a;
    box-sizing: border-box;
    flex-direction: column;
}

.extracted-style-29 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.extracted-style-30 {
    color: white;
    margin: 0;
    font-size: 1.5rem;
}

.extracted-style-31 {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.extracted-style-32 {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
}
.extracted-style-32:hover {
    background: rgba(255,255,255,0.15) !important;
}

.extracted-style-33 {
    display:inline-block;
    vertical-align:middle;
    margin-top: 1px;
}

.extracted-style-34 {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: #10b981;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
}
.extracted-style-34:hover {
    background: #059669 !important;
}

.extracted-style-35 {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 2.5rem;
    padding-right: 0.625rem;
}

.extracted-style-36 {
    padding: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100vh;
    background: #0f172a;
    box-sizing: border-box;
    flex-direction: column;
}

.extracted-style-37 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.extracted-style-38 {
    color: white;
    margin: 0;
    font-size: 1.5rem;
}

.extracted-style-39 {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.extracted-style-40 {
    padding: 0.5rem 1rem;
    width: 300px;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border-radius: 0.5rem;
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
}

.extracted-style-41 {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: var(--brand-emerald, #10b981);
    color: white;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    cursor: pointer;
}

.extracted-style-42 {
    font-weight: bold;
    font-size: 1.1rem;
}

.extracted-style-43 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 2.5rem;
    padding-right: 0.625rem;
}

.extracted-style-44 {
    padding: 0;
    height: 100vh;
    background: #0f172a;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.extracted-style-45 {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 1000;
}

.extracted-style-46 {
    background: rgba(15,23,42,0.9);
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 0.25rem;
    padding: 6px 0.75rem;
    cursor: pointer;
    backdrop-filter: blur(0.25rem);
    font-weight: bold;
    font-size: 0.85rem;
    box-shadow: 0 0.25rem 6px rgba(0,0,0,0.3);
}

.extracted-style-47 {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    gap: 0.625rem;
    align-items: center;
    background: rgba(15,23,42,0.85);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(0.5rem);
    box-shadow: 0 0.625rem 25px -5px rgba(0,0,0,0.5);
}

.extracted-style-48 {
    flex-grow: 1;
    width: 100%;
    z-index: 1;
}

.extracted-style-49 {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#0f172a;
    z-index:9999;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    color:white;
}

.extracted-style-50 {
    width:2.5rem;
    height:2.5rem;
    border:0.25rem solid var(--brand-emerald, #10b981);
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin-bottom:1rem;
}

.extracted-style-51 {
    font-size:1.2rem;
    font-weight:bold;
    color: var(--accent, #a5b4fc);
}

.extracted-style-52 {
    padding: 25px;
    overflow-y: auto;
    height: 100vh;
    background: var(--bg-dark, #0f172a);
    box-sizing: border-box;
    flex-direction: column;
    gap: var(--spacing-xl, 1.5rem);
    color: var(--text-primary, #cbd5e1);
    font-family: var(--font-body, 'Inter', sans-serif);
}

.extracted-style-53 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    padding-bottom: 0.9375rem;
}

.extracted-style-54 {
    color: white;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(to right, #f87171, #f43f5e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.extracted-style-55 {
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.extracted-style-56 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 0.625rem;
}

.extracted-style-57 {
    background: rgba(4, 26, 19, 0.45);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.3);
}
.extracted-style-57:hover {
    transform: translateY(-0.25rem) !important;
}

.extracted-style-58 {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-radius: 0.75rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.extracted-style-59 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

.extracted-style-60 {
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.5;
}

.extracted-style-61 {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #34d399;
}

.extracted-style-62 {
    background: rgba(4, 26, 19, 0.45);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.3);
}
.extracted-style-62:hover {
    transform: translateY(-0.25rem) !important;
}

.extracted-style-63 {
    background: var(--accent-soft, rgba(16, 185, 129, 0.15));
    color: var(--accent, #a5b4fc);
    border-radius: 0.75rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.extracted-style-64 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

.extracted-style-65 {
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.5;
}

.extracted-style-66 {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent, #a5b4fc);
}

.extracted-style-67 {
    background: rgba(4, 26, 19, 0.45);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.3);
}
.extracted-style-67:hover {
    transform: translateY(-0.25rem) !important;
}

.extracted-style-68 {
    background: rgba(139, 92, 246, 0.15);
    color: #c084fc;
    border-radius: 0.75rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.extracted-style-69 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

.extracted-style-70 {
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.5;
}

.extracted-style-71 {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #c084fc;
}

.extracted-style-72 {
    background: rgba(4, 26, 19, 0.45);
    border: 1px solid rgba(244, 63, 94, 0.15);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.3);
}
.extracted-style-72:hover {
    transform: translateY(-0.25rem) !important;
}

.extracted-style-73 {
    background: rgba(244, 63, 94, 0.15);
    color: #fb7185;
    border-radius: 0.75rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.extracted-style-74 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

.extracted-style-75 {
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.5;
}

.extracted-style-76 {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fb7185;
}

.extracted-style-77 {
    background: rgba(4, 26, 19, 0.45);
    border: 1px solid rgba(234, 179, 8, 0.15);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.3);
}
.extracted-style-77:hover {
    transform: translateY(-0.25rem) !important;
}

.extracted-style-78 {
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
    border-radius: 0.75rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.extracted-style-79 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

.extracted-style-80 {
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.5;
}

.extracted-style-81 {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #facc15;
}

.extracted-style-82 {
    background: rgba(4, 26, 19, 0.45);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.3);
}
.extracted-style-82:hover {
    borderColor: rgba(239, 68, 68, 0.4) !important;
}

.extracted-style-83 {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-radius: 0.75rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.extracted-style-84 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

.extracted-style-85 {
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.5;
}

.extracted-style-86 {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.extracted-style-87 {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    color: white;
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
}

.extracted-style-88 {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.5rem;
    color: #f87171;
    padding: 0.625rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.extracted-style-88:hover {
    background: rgba(239, 68, 68, 0.3) !important;
}

.extracted-style-89 {
    padding: 25px;
    overflow-y: auto;
    height: 100vh;
    background: linear-gradient(135deg, var(--bg-grad-1, #050a07), var(--bg-grad-2, #09120c)) !important;
    box-sizing: border-box;
    flex-direction: column;
    gap: 1.5rem;
    color: #cbd5e1;
    font-family: 'Inter', sans-serif;
}

.extracted-style-90 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    padding-bottom: 0.9375rem;
}

.extracted-style-91 {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
}

.extracted-style-92 {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.extracted-style-92:hover {
    background: rgba(255,255,255,0.05) !important;
}

.extracted-style-93 {
    color: white;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(to right, #facc15, #eab308);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.extracted-style-94 {
    display: flex;
    gap: 0.5rem;
}

.extracted-style-95 {
    background: rgba(234, 179, 8, 0.2);
    border: 1px solid rgba(234, 179, 8, 0.4);
    color: #fef08a;
    border-radius: 0.5rem;
    padding: 6px 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.extracted-style-96 {
    background: var(--bg-alpha-05, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    color: #94a3b8;
    border-radius: 0.5rem;
    padding: 6px 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.extracted-style-97 {
    background: var(--bg-alpha-05, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    color: #94a3b8;
    border-radius: 0.5rem;
    padding: 6px 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.extracted-style-98 {
    background: var(--bg-alpha-05, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    color: #94a3b8;
    border-radius: 0.5rem;
    padding: 6px 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.extracted-style-99 {
    display: flex;
    flex: 1;
    gap: 1.5rem;
    min-height: 0;
}

.extracted-style-100 {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    padding-right: 0.5rem;
    border-right: 1px solid rgba(255,255,255,0.05);
}

.extracted-style-101 {
    text-align: center;
    color: #64748b;
    padding: 2rem;
}

.extracted-style-102 {
    flex: 2;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: rgba(4, 26, 19, 0.3);
    border-radius: 0.75rem;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    padding: 1.5rem;
}

.extracted-style-103 {
    text-align: center;
    color: #64748b;
    margin: auto;
}

.extracted-style-104 {
    padding: 25px;
    overflow-y: auto;
    height: 100vh;
    background: linear-gradient(135deg, var(--bg-grad-1, #050a07), var(--bg-grad-2, #09120c)) !important;
    box-sizing: border-box;
    flex-direction: column;
    gap: 1.5rem;
    color: #cbd5e1;
    font-family: 'Inter', sans-serif;
}

.extracted-style-105 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    padding-bottom: 0.9375rem;
}

.extracted-style-106 {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
}

.extracted-style-107 {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.extracted-style-107:hover {
    background: rgba(255,255,255,0.05) !important;
}

.extracted-style-108 {
    color: white;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(to right, #fb7185, #f43f5e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.extracted-style-109 {
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.extracted-style-110 {
    display:flex;
    align-items:center;
    gap:0.625rem;
}

.extracted-style-111 {
    position:relative;
    width:280px;
}

.extracted-style-112 {
    position:absolute;
    left:11px;
    top:50%;
    transform:translateY(-50%);
    color:#64748b;
    pointer-events:none;
}

.extracted-style-113 {
    width:100%;
    box-sizing:border-box;
    background:rgba(4, 26, 19, 0.7);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.5rem;
    padding:9px 0.75rem 9px 33px;
    color:white;
    font-size:0.85rem;
    outline:none;
    font-family:'Inter',sans-serif;
}

.extracted-style-114 {
    color:#64748b;
    font-size:0.8rem;
    white-space:nowrap;
}

.extracted-style-115 {
    background: #10b981;
    border: none;
    color: white;
    padding: 0.625rem 18px;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(16,185,129,0.3);
    transition: all 0.2s;
    white-space:nowrap;
}
.extracted-style-115:hover {
    background: #059669 !important;
}

.extracted-style-116 {
    background: rgba(4, 26, 19, 0.3);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.75rem;
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.3);
}

.extracted-style-117 {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
    min-width: 600px;
}

.extracted-style-118 {
    position:sticky;
    top:0;
    z-index:1;
}

.extracted-style-119 {
    background: rgba(15, 23, 42, 0.97);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.extracted-style-120 {
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
}
.extracted-style-120:hover {
    color: white !important;
}

.extracted-style-121 {
    opacity:0.5;
}

.extracted-style-122 {
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
}
.extracted-style-122:hover {
    color: white !important;
}

.extracted-style-123 {
    opacity:0.5;
}

.extracted-style-124 {
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
}
.extracted-style-124:hover {
    color: white !important;
}

.extracted-style-125 {
    opacity:0.5;
}

.extracted-style-126 {
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
}
.extracted-style-126:hover {
    color: white !important;
}

.extracted-style-127 {
    opacity:0.5;
}

.extracted-style-128 {
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-align: right;
}

.extracted-style-129 {
    padding: 1.875rem;
    text-align: center;
    color: #94a3b8;
}

.extracted-style-130 {
    display:inline-block;
    width:1.25rem;
    height:1.25rem;
    border:2px solid var(--brand-emerald, #10b981);
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin-right:0.5rem;
    vertical-align:middle;
}

.extracted-style-131 {
    padding: 25px;
    overflow-y: auto;
    height: 100vh;
    background: linear-gradient(135deg, var(--bg-grad-1, #050a07), var(--bg-grad-2, #09120c)) !important;
    box-sizing: border-box;
    flex-direction: column;
    gap: 1.5rem;
    color: #cbd5e1;
    font-family: 'Inter', sans-serif;
}

.extracted-style-132 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    padding-bottom: 0.9375rem;
}

.extracted-style-133 {
    color: white;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(to right, #a5b4fc, #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.extracted-style-134 {
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.extracted-style-135 {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.extracted-style-136 {
    display: flex;
    gap: 0.25rem;
    background: rgba(4, 26, 19, 0.6);
    padding: 0.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
}

.extracted-style-137 {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent, #a5b4fc);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.extracted-style-138 {
    background: transparent;
    color: #94a3b8;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.extracted-style-139 {
    background: transparent;
    color: #94a3b8;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.extracted-style-140 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 6px 0.75rem;
    border-radius: 1.25rem;
}

.extracted-style-141 {
    position: relative;
    display: flex;
    width: 0.5rem;
    height: 0.5rem;
}

.extracted-style-142 {
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: #10b981;
    opacity: 0.75;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.extracted-style-143 {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    height: 0.5rem;
    width: 0.5rem;
    background: #10b981;
}

.extracted-style-144 {
    font-size: 0.75rem;
    font-weight: 700;
    color: #34d399;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.extracted-style-145 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.extracted-style-146 {
    background: rgba(9, 18, 12, 0.6);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0.25rem 6px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.extracted-style-147 {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.extracted-style-148 {
    color: var(--accent, #10b981);
}

.extracted-style-149 {
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    margin-top: 0.5rem;
}

.extracted-style-150 {
    font-size: 0.7rem;
    color: var(--accent, #a5b4fc);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.extracted-style-151 {
    background: var(--accent-soft, rgba(16, 185, 129, 0.15));
    color: var(--accent, #34d399);
    border-radius: 0.625rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extracted-style-152 {
    background: rgba(9, 18, 12, 0.6);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0.25rem 6px rgba(0,0,0,0.2);
}

.extracted-style-153 {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.extracted-style-154 {
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    margin-top: 0.5rem;
}

.extracted-style-155 {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-radius: 0.625rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extracted-style-156 {
    background: rgba(9, 18, 12, 0.6);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0.25rem 6px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.extracted-style-157 {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.extracted-style-158 {
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    margin-top: 0.5rem;
}

.extracted-style-159 {
    font-size: 0.7rem;
    color: #34d399;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.extracted-style-160 {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-radius: 0.625rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extracted-style-161 {
    background: rgba(4, 26, 19, 0.4);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0.25rem 6px rgba(0,0,0,0.2);
}

.extracted-style-162 {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.extracted-style-163 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #f43f5e;
    margin-top: 0.5rem;
}

.extracted-style-164 {
    background: rgba(244, 63, 94, 0.15);
    color: #f43f5e;
    border-radius: 0.625rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extracted-style-165 {
    background: rgba(4, 26, 19, 0.4);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0.25rem 6px rgba(0,0,0,0.2);
}

.extracted-style-166 {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.extracted-style-167 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #f43f5e;
    margin-top: 0.5rem;
}

.extracted-style-168 {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-radius: 0.625rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extracted-style-169 {
    background: rgba(4, 26, 19, 0.3);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 0.25rem 6px rgba(0,0,0,0.2);
}

.extracted-style-170 {
    font-size: 0.95rem;
    color: white;
    font-weight: 600;
    margin-bottom: 0.9375rem;
}

.extracted-style-171 {
    min-height: 250px;
}

.extracted-style-172 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 400px;
}

.extracted-style-173 {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    padding-bottom: 0.5rem;
}

.extracted-style-174 {
    background: var(--brand-emerald, #10b981);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.extracted-style-175 {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    color: var(--text-muted, #94a3b8); font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.extracted-style-176 {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    color: var(--text-muted, #94a3b8); font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.extracted-style-177 {
    display: block;
    background: rgba(4, 26, 19, 0.2);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.75rem;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 60vh;
}

.extracted-style-178 {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.85rem;
    min-width: 600px;
}

.extracted-style-179 {
    position: sticky;
    top: 0;
    z-index: 1;
}

.extracted-style-180 {
    background: rgba(15,23,42,0.95);
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.extracted-style-181 {
    padding: 0.75rem 1rem;
}

.extracted-style-182 {
    padding: 0.75rem 1rem;
}

.extracted-style-183 {
    padding: 0.75rem 1rem;
}

.extracted-style-184 {
    padding: 0.75rem 1rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.extracted-style-185 {
    padding: 0.75rem 1rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.extracted-style-186 {
    padding: 1.5rem;
    text-align: center;
    color: #64748b;
    font-style: italic;
}

.extracted-style-187 {
    background: rgba(4, 26, 19, 0.2);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.75rem;
    overflow: hidden;
}

.extracted-style-188 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.extracted-style-189 {
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 1.5rem;
}

.extracted-style-190 {
    background: rgba(4, 26, 19, 0.2);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.75rem;
    overflow: hidden;
}

.extracted-style-191 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.8rem;
}

.extracted-style-192 {
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 1.5rem;
}

.extracted-style-193 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    height: auto;
    padding: 2rem 1rem;
    box-sizing: border-box;
    opacity: 1;
}

.extracted-style-194 {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.5rem;
    opacity: 1;
    filter: drop-shadow(0 0 1rem var(--accent-glow, rgba(16, 185, 129, 0.4)));
}

.extracted-style-195 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(to right, var(--text-primary, #ffffff), var(--accent, #10b981));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 1.5rem var(--accent-glow, rgba(16, 185, 129, 0.25));
}

.extracted-style-196 {
    font-size: 0.9rem;
    color: var(--text-secondary, #94a3b8);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    margin-top: 0.75rem;
    letter-spacing: 0.05em;
    font-weight: 600;
    text-transform: uppercase;
}

.extracted-style-197 {
    margin-top: 2rem;
    font-size: 1.1rem;
    color: var(--text-muted, #92a49d);
    font-weight: 400;
    text-align: center;
    max-width: 320px;
    line-height: 1.5;
}

.extracted-style-198 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:9999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-199 {
    background: var(--card-bg, var(--dark-cockpit-bg, #041a13));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    width:90%;
    max-width:800px;
    padding:2rem;
    box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.5);
}

.extracted-style-200 {
    margin-top:0;
    color:#fff;
    font-size:1.2rem;
}

.extracted-style-201 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    margin-bottom:1.5rem;
    font-family:'Inter', sans-serif;
}

.extracted-style-202 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    margin-bottom:1.5rem;
    resize:vertical;
    font-family:'Inter', sans-serif;
}

.extracted-style-203 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.extracted-style-204 {
    padding:0.6rem 1.2rem;
    background:rgba(239,68,68,0.1);
    color:#fca5a5;
    border:1px solid rgba(239,68,68,0.3);
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:0.5rem;
    transition:all 0.2s;
}
.extracted-style-204:hover {
    background: rgba(239,68,68,0.2) !important;
}

.extracted-style-205 {
    display:flex;
    justify-content:flex-end;
    gap:1rem;
}

.extracted-style-206 {
    padding:0.6rem 1.2rem;
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-weight:600;
}

.extracted-style-207 {
    padding:0.6rem 1.5rem;
    background:var(--brand-emerald, #10b981);
    color:#fff;
    border:none;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.extracted-style-208 {
    width:0.875rem;
    height:0.875rem;
    border:2px solid #fff;
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

.extracted-style-209 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:9999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-210 {
    background: var(--card-bg, var(--dark-cockpit-bg, #041a13));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    width:90%;
    max-width:500px;
    height:80vh;
    max-height:600px;
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.5);
}

.extracted-style-211 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
}

.extracted-style-212 {
    margin:0;
    color:#fff;
    font-size:1.2rem;
}

.extracted-style-213 {
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-size:1.5rem;
}

.extracted-style-214 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    margin-bottom:1rem;
}

.extracted-style-215 {
    flex-grow:1;
    overflow-y:auto;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.5rem;
    background:rgba(0,0,0,0.2);
}

.extracted-style-216 {
    list-style:none;
    padding:0;
    margin:0;
}

.extracted-style-217 {
    justify-content:center;
    margin-top:1rem;
}

.extracted-style-218 {
    width:1.25rem;
    height:1.25rem;
    border:2px solid var(--brand-emerald, #10b981);
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

.extracted-style-219 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:9999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-220 {
    background: var(--card-bg, var(--dark-cockpit-bg, #041a13));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    width:90%;
    max-width:500px;
    height:80vh;
    max-height:600px;
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.5);
}

.extracted-style-221 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
}

.extracted-style-222 {
    margin:0;
    color:#fff;
    font-size:1.2rem;
}

.extracted-style-223 {
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-size:1.5rem;
}

.extracted-style-224 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    margin-bottom:1rem;
}

.extracted-style-225 {
    flex-grow:1;
    overflow-y:auto;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.5rem;
    background:rgba(0,0,0,0.2);
}

.extracted-style-226 {
    list-style:none;
    padding:0;
    margin:0;
}

.extracted-style-227 {
    justify-content:center;
    margin-top:1rem;
}

.extracted-style-228 {
    width:1.25rem;
    height:1.25rem;
    border:2px solid var(--brand-emerald, #10b981);
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

.extracted-style-229 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:9999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-230 {
    background: var(--card-bg, #09120c);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    width:90%;
    max-width:450px;
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.5);
}

.extracted-style-231 {
    margin:0 0 1rem 0;
    color:#fff;
    font-size:1.2rem;
    text-align:center;
}

.extracted-style-232 {
    color:#94a3b8;
    font-size:0.9rem;
    margin-bottom:0.5rem;
}

.extracted-style-233 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    margin-bottom:1.5rem;
}

.extracted-style-234 {
    color:#94a3b8;
    font-size:0.9rem;
    margin-bottom:0.5rem;
    text-align:center;
}

.extracted-style-235 {
    color:#94a3b8;
    font-size:0.9rem;
    margin-bottom:0.5rem;
}

.extracted-style-236 {
    width:100%;
    box-sizing:border-box;
    padding:0.5rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    margin-bottom:1.5rem;
}

.extracted-style-237 {
    text-align:center;
    margin-bottom:1.5rem;
}

.extracted-style-238 {
    color:#94a3b8;
    font-size:0.9rem;
    margin-bottom:0.5rem;
}

.extracted-style-239 {
    background: var(--accent, #10b981);
    color:#fff;
    border:none;
    border-radius:0.5rem;
    padding:0.6rem 1rem;
    cursor:pointer;
    font-size:0.9rem;
    transition:background 0.2s;
}

.extracted-style-240 {
    display:flex;
    justify-content:space-between;
    margin-top:1rem;
}

.extracted-style-241 {
    background:#334155;
    color:#f8fafc;
    border:none;
    border-radius:0.5rem;
    padding:0.8rem 1.2rem;
    cursor:pointer;
    font-size:1rem;
    width:48%;
    transition:background 0.2s;
}

.extracted-style-242 {
    background: var(--accent, #10b981);
    color:#fff;
    border:none;
    border-radius:0.5rem;
    padding:0.8rem 1.2rem;
    cursor:pointer;
    font-size:1rem;
    width:48%;
    font-weight:600;
    transition:background 0.2s;
}

.extracted-style-243 {
    flex-direction:column;
    align-items:center;
}

.extracted-style-244 {
    color:#94a3b8;
    font-size:0.9rem;
    margin-bottom:1rem;
}

.extracted-style-245 {
    width:100%;
    position:relative;
    background:#0f172a;
    border-radius:0.5rem;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height: 200px;
}

.extracted-style-246 {
    width:100%;
    display:flex;
    align-items:center;
    margin-top:1rem;
    gap:1rem;
}

.extracted-style-247 {
    color:#94a3b8;
    font-size:0.9rem;
    white-space:nowrap;
}

.extracted-style-248 {
    flex:1;
    cursor:pointer;
}

.extracted-style-249 {
    display:flex;
    justify-content:space-between;
    margin-top:1.5rem;
    width:100%;
}

.extracted-style-250 {
    background:#334155;
    color:#f8fafc;
    border:none;
    border-radius:0.5rem;
    padding:0.8rem 1.2rem;
    cursor:pointer;
    font-size:1rem;
    width:48%;
    transition:background 0.2s;
}

.extracted-style-251 {
    background:#10b981;
    color:#fff;
    border:none;
    border-radius:0.5rem;
    padding:0.8rem 1.2rem;
    cursor:pointer;
    font-size:1rem;
    width:48%;
    font-weight:600;
    transition:background 0.2s;
}

.extracted-style-252 {
    justify-content:center;
    align-items:center;
    flex-direction:column;
    margin-top:1.5rem;
}

.extracted-style-253 {
    width:25px;
    height:25px;
    border:3px solid var(--brand-emerald, #10b981);
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin-bottom: 0.5rem;
}

.extracted-style-254 {
    color: var(--accent, #a5b4fc);
    font-size:0.9rem;
}

.extracted-style-255 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:99999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-256 {
    background: var(--card-bg, #09120c);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    width:90%;
    max-width:450px;
    padding:1.5rem;
    box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.5);
}

.extracted-style-257 {
    margin-top:0;
    color:#fff;
    font-size:1.2rem;
    margin-bottom: 0.5rem;
}

.extracted-style-258 {
    color:#94a3b8;
    font-size:0.9rem;
    margin-top:0;
    margin-bottom:1rem;
}

.extracted-style-259 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-260 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    margin-bottom:1.2rem;
    font-family:'Inter', sans-serif;
}

.extracted-style-261 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-262 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:0.95rem;
    outline:none;
    margin-bottom:1.5rem;
    resize:vertical;
    font-family:'Inter', sans-serif;
}

.extracted-style-263 {
    display:flex;
    justify-content:flex-end;
    gap:1rem;
}

.extracted-style-264 {
    padding:0.6rem 1.2rem;
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
}

.extracted-style-265 {
    padding:0.6rem 1.5rem;
    background:var(--brand-emerald, #10b981);
    color:#fff;
    border:none;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
}

.extracted-style-266 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:99999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-267 {
    background: var(--card-bg, #09120c);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    width:90%;
    max-width:450px;
    padding:1.5rem;
    box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.5);
}

.extracted-style-268 {
    margin-top:0;
    color:#fff;
    font-size:1.2rem;
    margin-bottom: 0.5rem;
}

.extracted-style-269 {
    color:#94a3b8;
    font-size:0.9rem;
    margin-top:0;
    margin-bottom:1rem;
}

.extracted-style-270 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    margin-bottom:1.5rem;
    font-family:'Inter', sans-serif;
}

.extracted-style-271 {
    display:flex;
    justify-content:flex-end;
    gap:1rem;
}

.extracted-style-272 {
    padding:0.6rem 1.2rem;
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
}

.extracted-style-273 {
    padding:0.6rem 1.5rem;
    background:var(--brand-emerald, #10b981);
    color:#fff;
    border:none;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
}

.extracted-style-274 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:99999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-275 {
    background: var(--card-bg, #09120c);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    width:90%;
    max-width:800px;
    height:80vh;
    max-height:800px;
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.5);
}

.extracted-style-276 {
    margin-top:0;
    color:#fff;
    font-size:1.2rem;
    margin-bottom: 1rem;
}

.extracted-style-277 {
    margin-bottom: 1.5rem;
    display:flex;
    gap: 1rem;
    align-items:flex-end;
}

.extracted-style-278 {
    flex:1;
}

.extracted-style-279 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-280 {
    color:#ef4444;
}

.extracted-style-281 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    transition: border-color 0.2s;
}

.extracted-style-282 {
    flex:1;
}

.extracted-style-283 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-284 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    appearance:auto;
    cursor:pointer;
}

.extracted-style-285 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    margin-bottom:1rem;
}

.extracted-style-286 {
    display:flex;
    flex:1;
    overflow:hidden;
    gap:1.5rem;
    margin-bottom:1.5rem;
}

.extracted-style-287 {
    flex:1;
    display:flex;
    flex-direction:column;
    background:rgba(0,0,0,0.2);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius:0.5rem;
}

.extracted-style-288 {
    padding:0.75rem 1rem;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    background:rgba(0,0,0,0.2);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.extracted-style-289 {
    margin:0;
    color:#cbd5e1;
    font-size:0.95rem;
}

.extracted-style-290 {
    flex:1;
    overflow-y:auto;
    padding:0.5rem;
    min-height:200px;
}

.extracted-style-291 {
    flex:2;
    display:flex;
    flex-direction:column;
    background:rgba(0,0,0,0.2);
    border:1px solid rgba(16, 185, 129, 0.3);
    border-radius:0.5rem;
    overflow:hidden;
}

.extracted-style-292 {
    padding:0.75rem 1rem;
    border-bottom:1px solid rgba(16, 185, 129, 0.3);
    background:rgba(16, 185, 129, 0.1);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.extracted-style-293 {
    margin:0;
    color: var(--accent, #a5b4fc);
    font-size:0.95rem;
}

.extracted-style-294 {
    padding:0.3rem 0.8rem;
    background:var(--brand-emerald, #10b981);
    color:#fff;
    border:none;
    border-radius:0.25rem;
    cursor:pointer;
    font-weight:600;
    font-size:0.8rem;
}

.extracted-style-295 {
    flex:1;
    overflow-y:auto;
    padding:1rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.extracted-style-296 {
    display:flex;
    justify-content:flex-end;
    gap:1rem;
}

.extracted-style-297 {
    padding:0.6rem 1.2rem;
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
}

.extracted-style-298 {
    padding:0.6rem 1.5rem;
    background:var(--brand-emerald, #10b981);
    color:#fff;
    border:none;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
}

.extracted-style-299 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    z-index:100001;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-300 {
    background:var(--dark-cockpit-bg, #041a13);
    border: 1px solid var(--accent-glow, rgba(16, 185, 129, 0.4));
    border-radius:0.75rem;
    width:90%;
    max-width:600px;
    max-height:80vh;
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    box-shadow:0 0.625rem 1.875rem rgba(0,0,0,0.5);
}

.extracted-style-301 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
}

.extracted-style-302 {
    margin:0;
    color:#f8fafc;
    font-size:1.1rem;
}

.extracted-style-303 {
    display:flex;
    align-items:center;
    gap:1rem;
}

.extracted-style-304 {
    background:rgba(16, 185, 129, 0.2);
    border: 1px solid var(--accent-glow, rgba(16, 185, 129, 0.4));
    color: var(--accent, #a5b4fc);
    padding:0.3rem 0.6rem;
    border-radius:6px;
    cursor:pointer;
    font-size:0.8rem;
    font-weight:600;
    transition: background 0.2s;
}

.extracted-style-305 {
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-size:1.5rem;
}

.extracted-style-306 {
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px dashed rgba(255,255,255,0.1);
    border-radius:0.5rem;
    padding:1rem;
    margin-bottom:1rem;
}

.extracted-style-307 {
    color:#94a3b8;
    font-size:0.7rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    display:block;
    margin-bottom:0.5rem;
}

.extracted-style-308 {
    min-height:1.5rem;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:2px;
}

.extracted-style-309 {
    flex-grow:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.extracted-style-310 {
    flex-grow:1;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    margin-bottom:1rem;
    padding-right:5px;
}

.extracted-style-311 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
    background:rgba(0,0,0,0.2);
    padding:0.5rem;
    border-radius:0.5rem;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
}

.extracted-style-312 {
    display:flex;
    gap:0.5rem;
    flex-wrap:wrap;
}

.extracted-style-313 {
    padding:0.4rem 0.8rem;
    background:rgba(16, 185, 129, 0.2);
    border: 1px solid var(--accent-glow, rgba(16, 185, 129, 0.4));
    color: var(--accent, #a5b4fc);
    border-radius:6px;
    cursor:pointer;
    font-size:0.85rem;
    font-weight:600;
}

.extracted-style-314 {
    padding:0.4rem 0.8rem;
    background:var(--bg-alpha-05, rgba(255, 255, 255, 0.05));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    color:#cbd5e1;
    border-radius:6px;
    cursor:pointer;
    font-size:0.85rem;
    font-weight:600;
}

.extracted-style-315 {
    padding:0.4rem 0.8rem;
    background:rgba(16,185,129,0.15);
    border:1px solid rgba(16,185,129,0.3);
    color:#34d399;
    border-radius:6px;
    cursor:pointer;
    font-size:0.85rem;
    font-weight:600;
}

.extracted-style-316 {
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.extracted-style-317 {
    color:#94a3b8;
    font-size:0.8rem;
    font-weight:600;
}

.extracted-style-318 {
    background:rgba(0,0,0,0.4);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.4rem;
    color:#f8fafc;
    font-family:'Inter', sans-serif;
    font-size:0.85rem;
    outline:none;
}

.extracted-style-319 {
    flex-grow:1;
    flex-direction:column;
    gap:0.5rem;
    margin-bottom:1rem;
}

.extracted-style-320 {
    color: var(--text-muted, #94a3b8); font-size: 0.85rem;
    font-weight:600;
}

.extracted-style-321 {
    color:#64748b;
    font-size:0.8rem;
    margin:0 0 0.5rem 0;
    line-height: 1.4;
}

.extracted-style-322 {
    flex-grow:1;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    padding:0.8rem;
    color:#f8fafc;
    font-family:monospace;
    font-size:0.95rem;
    resize:none;
    outline:none;
    min-height: 150px;
}

.extracted-style-323 {
    display:flex;
    justify-content:flex-end;
    gap:1rem;
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:1rem;
}

.extracted-style-324 {
    padding:0.5rem 1rem;
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-weight:600;
}

.extracted-style-325 {
    padding:0.5rem 1.2rem;
    background:var(--brand-emerald, #10b981);
    color:#fff;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:600;
}

.extracted-style-326 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    z-index:100002;
    justify-content:center;
    align-items:center;
}

.extracted-style-327 {
    background:var(--dark-cockpit-bg, #041a13);
    border: 1px solid var(--accent-glow, rgba(16, 185, 129, 0.4));
    border-radius:0.75rem;
    width:90%;
    max-width:500px;
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
    box-shadow:0 0.625rem 1.875rem rgba(0,0,0,0.5);
}

.extracted-style-328 {
    margin:0;
    color:#f8fafc;
    font-size:1.1rem;
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding-bottom:0.5rem;
}

.extracted-style-329 {
    color:var(--brand-emerald, #10b981);
}

.extracted-style-330 {
    display:flex;
    gap:1rem;
}

.extracted-style-331 {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}

.extracted-style-332 {
    color:#94a3b8;
    font-size:0.8rem;
    font-weight:600;
}

.extracted-style-333 {
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.5rem;
    color:#f8fafc;
    font-family:'Inter', sans-serif;
}

.extracted-style-334 {
    color:#ffffff;
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-335 {
    color:#94a3b8;
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-336 {
    color: var(--accent, #818cf8);
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-337 {
    color:#34d399;
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-338 {
    color:#f87171;
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-339 {
    color:#fbbf24;
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-340 {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}

.extracted-style-341 {
    color:#94a3b8;
    font-size:0.8rem;
    font-weight:600;
}

.extracted-style-342 {
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.5rem;
    color:#f8fafc;
    font-family:'Inter', sans-serif;
}

.extracted-style-343 {
    color:#ffffff;
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-344 {
    color:#94a3b8;
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-345 {
    color: var(--accent, #818cf8);
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-346 {
    color:#34d399;
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-347 {
    color:#f87171;
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-348 {
    color:#fbbf24;
    background:var(--dark-cockpit-bg, #041a13);
}

.extracted-style-349 {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}

.extracted-style-350 {
    color:#94a3b8;
    font-size:0.8rem;
    font-weight:600;
}

.extracted-style-351 {
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.5rem;
    color:#f8fafc;
    font-family:'Inter', sans-serif;
}

.extracted-style-352 {
    font-weight:normal;
}

.extracted-style-353 {
    font-weight:500;
}

.extracted-style-354 {
    font-weight:bold;
}

.extracted-style-355 {
    display:flex;
    gap:1rem;
}

.extracted-style-356 {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}

.extracted-style-357 {
    color:#94a3b8;
    font-size:0.8rem;
    font-weight:600;
}

.extracted-style-358 {
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.5rem;
    color:#f8fafc;
    font-family:'Inter', sans-serif;
}

.extracted-style-359 {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}

.extracted-style-360 {
    color:#94a3b8;
    font-size:0.8rem;
    font-weight:600;
}

.extracted-style-361 {
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.5rem;
    color:#f8fafc;
    font-family:'Inter', sans-serif;
}

.extracted-style-362 {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}

.extracted-style-363 {
    color:#94a3b8;
    font-size:0.8rem;
    font-weight:600;
}

.extracted-style-364 {
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.5rem;
    color:#f8fafc;
    font-family:'Inter', sans-serif;
}

.extracted-style-365 {
    font-weight:normal;
}

.extracted-style-366 {
    font-weight:500;
}

.extracted-style-367 {
    font-weight:bold;
}

.extracted-style-368 {
    display:flex;
    gap:1rem;
}

.extracted-style-369 {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}

.extracted-style-370 {
    color:#94a3b8;
    font-size:0.8rem;
    font-weight:600;
}

.extracted-style-371 {
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.5rem;
    color:#f8fafc;
    font-family:'Inter', sans-serif;
}

.extracted-style-372 {
    font-size:0.75rem;
}

.extracted-style-373 {
    font-size:0.85rem;
}

.extracted-style-374 {
    font-size:1rem;
}

.extracted-style-375 {
    font-size:1.15rem;
}

.extracted-style-376 {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}

.extracted-style-377 {
    color:#94a3b8;
    font-size:0.8rem;
    font-weight:600;
}

.extracted-style-378 {
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.5rem;
    color:#f8fafc;
    font-family:'Inter', sans-serif;
}

.extracted-style-379 {
    font-size:0.75rem;
}

.extracted-style-380 {
    font-size:0.85rem;
}

.extracted-style-381 {
    font-size:1rem;
}

.extracted-style-382 {
    font-size:1.15rem;
}

.extracted-style-383 {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-bottom:0.5rem;
    gap:0.5rem;
}

.extracted-style-384 {
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.extracted-style-385 {
    cursor:pointer;
}

.extracted-style-386 {
    color:#cbd5e1;
    font-size:0.9rem;
    cursor:pointer;
}

.extracted-style-387 {
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}

.extracted-style-388 {
    color:#94a3b8;
    font-size:0.8rem;
    font-weight:600;
}

.extracted-style-389 {
    width:100%;
    box-sizing:border-box;
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.6rem;
    color:#f8fafc;
    font-family:'Inter', sans-serif;
    outline:none;
    transition:border 0.2s;
}

.extracted-style-390 {
    margin-top:0.5rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px dashed rgba(255,255,255,0.1);
    border-radius:0.5rem;
    padding:1rem;
}

.extracted-style-391 {
    color:#94a3b8;
    font-size:0.7rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    display:block;
    margin-bottom:0.5rem;
}

.extracted-style-392 {
    min-height:1.5rem;
    display:flex;
    align-items:center;
}

.extracted-style-393 {
    width:100%;
}

.extracted-style-394 {
    color:#f8fafc;
    font-weight:500;
}

.extracted-style-395 {
    display:flex;
    justify-content:flex-end;
    gap:1rem;
    margin-top:0.5rem;
}

.extracted-style-396 {
    padding:0.5rem 1rem;
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-weight:600;
}

.extracted-style-397 {
    padding:0.5rem 1.2rem;
    background:var(--brand-emerald, #10b981);
    color:#fff;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:600;
}

.extracted-style-398 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:99999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-399 {
    background:var(--dark-cockpit-bg, #041a13);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    width:90%;
    max-width:600px;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.5);
}

.extracted-style-400 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
}

.extracted-style-401 {
    margin:0;
    color:#fff;
    font-size:1.2rem;
}

.extracted-style-402 {
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-size:1.5rem;
    align-items:center;
    justify-content:center;
    display:flex;
    width:1.875rem;
    height:1.875rem;
    border-radius:0.25rem;
    transition:color 0.2s;
}
.extracted-style-402:hover {
    color: #fff !important;
}

.extracted-style-403 {
    flex-grow:1;
    display:flex;
    flex-direction:column;
    gap:1rem;
    overflow-y:auto;
    padding-right:5px;
}

.extracted-style-404 {
    position:relative;
}

.extracted-style-405 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-406 {
    display:flex;
    flex-wrap:wrap;
    gap:0.4rem;
    width:100%;
    box-sizing:border-box;
    padding:0.4rem 0.6rem;
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    min-height:42px;
    align-items:center;
    transition:border-color 0.2s;
}

.extracted-style-407 {
    flex-grow:1;
    min-width:120px;
    background:transparent;
    border:none;
    color:#fff;
    font-size:0.95rem;
    outline:none;
    padding:0;
}

.extracted-style-408 {
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#0f172a;
    border: 1px solid var(--accent-glow, rgba(16, 185, 129, 0.4));
    border-radius:6px;
    max-height:160px;
    overflow-y:auto;
    z-index:100000;
    box-shadow:0 0.625rem 25px rgba(0,0,0,0.5);
    margin-top:0.25rem;
}

.extracted-style-409 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-410 {
    width:100%;
    box-sizing:border-box;
    padding:0.6rem;
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:#fff;
    font-size:0.95rem;
    outline:none;
}

.extracted-style-411 {
    display:flex;
    flex-direction:column;
    flex-grow:1;
}

.extracted-style-412 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-413 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:#fff;
    font-size:0.95rem;
    outline:none;
    resize:vertical;
    min-height:250px;
    font-family:'Inter', sans-serif;
}

.extracted-style-414 {
    background:rgba(0,0,0,0.2);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius:6px;
    padding:1rem;
}

.extracted-style-415 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.5rem;
    display:block;
    font-weight:500;
}

.extracted-style-416 {
    color: var(--text-muted, #94a3b8); font-size: 0.85rem;
    width:100%;
    border:1px dashed rgba(255,255,255,0.2);
    padding:1rem;
    border-radius:6px;
    cursor:pointer;
}

.extracted-style-417 {
    color:#fca5a5;
    background:rgba(239,68,68,0.1);
    padding:0.75rem;
    border-radius:6px;
    font-size:0.85rem;
    border:1px solid rgba(239,68,68,0.2);
    margin-top:1rem;
    line-height:1.4;
}

.extracted-style-418 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:1.5rem;
}

.extracted-style-419 {
    padding:0.6rem 1.2rem;
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
}

.extracted-style-420 {
    padding:0.6rem 1.5rem;
    background:var(--brand-emerald, #10b981);
    color:#fff;
    border:none;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-family:'Inter', sans-serif;
    transition:background 0.2s;
}
.extracted-style-420:hover {
    background: var(--emerald-dark, #062e1e) !important;
}

.extracted-style-421 {
    width:0.875rem;
    height:0.875rem;
    border:2px solid #fff;
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

.extracted-style-422 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:99999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-423 {
    background:var(--dark-cockpit-bg, #041a13);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    width:90%;
    max-width:450px;
    padding:1.5rem;
    box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.5);
}

.extracted-style-424 {
    margin-top:0;
    color:#fff;
    font-size:1.2rem;
    margin-bottom: 0.5rem;
}

.extracted-style-425 {
    color:#94a3b8;
    font-size:0.9rem;
    margin-top:0;
    margin-bottom:1.5rem;
}

.extracted-style-426 {
    margin-bottom: 1rem;
}

.extracted-style-427 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-428 {
    color:#f87171;
}

.extracted-style-429 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    appearance:auto;
    cursor:pointer;
}

.extracted-style-430 {
    color:#64748b;
    font-size:0.78rem;
    margin-top:0.3rem;
    min-height:1.1em;
}

.extracted-style-431 {
    margin-bottom: 1rem;
}

.extracted-style-432 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-433 {
    color:#f87171;
}

.extracted-style-434 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    appearance:auto;
    cursor:pointer;
}

.extracted-style-435 {
    color:#64748b;
    font-size:0.78rem;
    margin-top:0.3rem;
    min-height:1.1em;
}

.extracted-style-436 {
    margin-bottom: 1rem;
}

.extracted-style-437 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-438 {
    color:#64748b;
    font-weight:400;
    font-size:0.8rem;
}

.extracted-style-439 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    appearance:auto;
    cursor:pointer;
}

.extracted-style-440 {
    color:#64748b;
    font-size:0.78rem;
    margin-top:0.3rem;
    min-height:1.1em;
}

.extracted-style-441 {
    margin-bottom: 1.5rem;
}

.extracted-style-442 {
    color:#f59e0b;
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-443 {
    color:#64748b;
    font-weight:400;
    font-size:0.8rem;
}

.extracted-style-444 {
    color:#64748b;
    font-size:0.78rem;
    margin:0 0 0.4rem 0;
}

.extracted-style-445 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(245,158,11,0.3);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    appearance:auto;
    cursor:pointer;
}

.extracted-style-446 {
    color:#64748b;
    font-size:0.78rem;
    margin-top:0.3rem;
    min-height:1.1em;
}

.extracted-style-447 {
    color:#f87171;
    font-size:0.85rem;
    margin-bottom:0.75rem;
    min-height:1.2em;
}

.extracted-style-448 {
    display:flex;
    justify-content:flex-end;
    gap:1rem;
}

.extracted-style-449 {
    padding:0.6rem 1.2rem;
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
}

.extracted-style-450 {
    padding:0.6rem 1.5rem;
    background:var(--brand-emerald, #10b981);
    color:#fff;
    border:none;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
}

.extracted-style-451 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.82);
    z-index:999999;
    backdrop-filter:blur(0.5rem);
    justify-content:center;
    align-items:center;
}

.extracted-style-452 {
    background:var(--dark-cockpit-bg, #041a13);
    border:1px solid rgba(239,68,68,0.35);
    border-radius:1rem;
    width:92%;
    max-width:420px;
    padding:2rem;
    box-shadow:0 1.5rem 3rem rgba(0,0,0,0.6);
}

.extracted-style-453 {
    text-align:center;
    margin-bottom:1.5rem;
}

.extracted-style-454 {
    width:52px;
    height:52px;
    border-radius:50%;
    background:rgba(239,68,68,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1rem auto;
    font-size:1.6rem;
}

.extracted-style-455 {
    margin:0 0 0.4rem 0;
    color:#fca5a5;
    font-family:'Inter',sans-serif;
    font-size:1.15rem;
    font-weight:700;
}

.extracted-style-456 {
    margin:0;
    color:#94a3b8;
    font-family:'Inter',sans-serif;
    font-size:0.85rem;
    line-height:1.5;
}

.extracted-style-457 {
    background:rgba(239,68,68,0.07);
    border:1px solid rgba(239,68,68,0.2);
    border-radius:0.5rem;
    padding:0.75rem 1rem;
    margin-bottom:1.25rem;
    text-align:center;
}

.extracted-style-458 {
    color:#f87171;
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:0.95rem;
    word-break:break-all;
}

.extracted-style-459 {
    width:100%;
    box-sizing:border-box;
    padding:0.8rem 1rem;
    background:rgba(0,0,0,0.35);
    border:1.5px solid rgba(239,68,68,0.4);
    border-radius:0.5rem;
    color:#f8fafc;
    font-family:'Inter',sans-serif;
    font-size:0.95rem;
    outline:none;
    margin-bottom:1.5rem;
    transition:border 0.2s;
}

.extracted-style-460 {
    display:flex;
    gap:0.75rem;
    justify-content:flex-end;
}

.extracted-style-461 {
    padding:0.6rem 1.2rem;
    background:transparent;
    color:#94a3b8;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter',sans-serif;
    font-size:0.9rem;
    transition:all 0.2s;
}
.extracted-style-461:hover {
    color: #fff !important;
}

.extracted-style-462 {
    padding:0.6rem 1.5rem;
    background:#991b1b;
    color:#fca5a5;
    border:none;
    border-radius:0.5rem;
    cursor:not-allowed;
    font-weight:700;
    font-family:'Inter',sans-serif;
    font-size:0.9rem;
    opacity:0.45;
    transition:all 0.2s;
}

.extracted-style-463 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:9999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-464 {
    background:var(--dark-cockpit-bg, #041a13);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    width:90%;
    max-width:500px;
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.5);
}

.extracted-style-465 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
}

.extracted-style-466 {
    margin:0;
    color:#fff;
    font-size:1.2rem;
}

.extracted-style-467 {
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-size:1.5rem;
    align-items:center;
    justify-content:center;
    display:flex;
    width:1.875rem;
    height:1.875rem;
    border-radius:0.25rem;
    transition:color 0.2s;
}
.extracted-style-467:hover {
    color: #fff !important;
}

.extracted-style-468 {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.extracted-style-469 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-470 {
    width:100%;
    box-sizing:border-box;
    padding:0.6rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    transition:border 0.2s;
}

.extracted-style-471 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-472 {
    width:100%;
    box-sizing:border-box;
    padding:0.6rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    transition:border 0.2s;
}

.extracted-style-473 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-474 {
    width:100%;
    box-sizing:border-box;
    padding:0.6rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    transition:border 0.2s;
}

.extracted-style-475 {
    color: var(--accent, #a5b4fc);
    font-size:0.85rem;
    margin-bottom:0.3rem;
    display:block;
    font-weight:500;
}

.extracted-style-476 {
    width:100%;
    box-sizing:border-box;
    padding:0.6rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid rgba(255,255,255,0.2);
    border-radius:0.5rem;
    color:#fff;
    font-size:1rem;
    outline:none;
    transition:border 0.2s;
}

.extracted-style-477 {
    background:rgba(0,0,0,0.2);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.5rem;
    padding:1.2rem;
    display:flex;
    flex-direction:column;
    gap:0.6rem;
    font-size:0.95rem;
}

.extracted-style-478 {
    display:flex;
    justify-content:space-between;
    color:#cbd5e1;
}

.extracted-style-479 {
    display:flex;
    justify-content:space-between;
    color:#fff;
    font-weight:bold;
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:0.6rem;
    margin-top:0.2rem;
    font-size:1.1rem;
}

.extracted-style-480 {
    color:#10b981;
}

.extracted-style-481 {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1.2rem;
    margin-top:0.5rem;
    padding-top:0.5rem;
    border-top:1px solid rgba(255,255,255,0.05);
}

.extracted-style-482 {
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}

.extracted-style-483 {
    display:flex;
    justify-content:space-between;
    color:#cbd5e1;
    font-size:0.9rem;
}

.extracted-style-484 {
    color:#fff;
}

.extracted-style-485 {
    display:flex;
    justify-content:space-between;
    color:#cbd5e1;
    font-size:0.9rem;
}

.extracted-style-486 {
    color:#fff;
}

.extracted-style-487 {
    display:flex;
    flex-direction:column;
    gap:0.4rem;
    border-left:1px solid rgba(255,255,255,0.1);
    padding-left:1.2rem;
}

.extracted-style-488 {
    display:flex;
    justify-content:space-between;
    color:#cbd5e1;
    font-size:0.9rem;
}

.extracted-style-489 {
    color:#fff;
}

.extracted-style-490 {
    display:flex;
    justify-content:space-between;
    color:#cbd5e1;
    font-size:0.9rem;
}

.extracted-style-491 {
    color:#fff;
}

.extracted-style-492 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    z-index:10000;
    backdrop-filter:blur(0.5rem);
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.extracted-style-493 {
    position:absolute;
    top:1.25rem;
    right:1.875rem;
    background:rgba(0,0,0,0.5);
    border:1px solid rgba(255,255,255,0.2);
    color:#fff;
    font-size:2rem;
    width:45px;
    height:45px;
    border-radius:50%;
    cursor:pointer;
    z-index:10001;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.2s;
}

.extracted-style-494 {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    cursor:grab;
}

.extracted-style-495 {
    max-width:90%;
    max-height:90%;
    object-fit:contain;
    transition:transform 0.1s ease-out;
    user-select:none;
    pointer-events:none;
}

.extracted-style-496 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:99999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-497 {
    background:var(--dark-cockpit-bg, #041a13);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    width:90%;
    max-width:600px;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.5);
}

.extracted-style-498 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding-bottom:0.75rem;
}

.extracted-style-499 {
    margin:0;
    color:#fff;
    font-size:1.2rem;
}

.extracted-style-500 {
    background:transparent;
    color:#94a3b8;
    border:none;
    cursor:pointer;
    font-size:1.5rem;
    align-items:center;
    justify-content:center;
    display:flex;
    width:1.875rem;
    height:1.875rem;
    border-radius:0.25rem;
    transition:color 0.2s;
}
.extracted-style-500:hover {
    color: #fff !important;
}

.extracted-style-501 {
    flex-grow:1;
    overflow-y:auto;
    padding-right:5px;
    color:#cbd5e1;
}

.extracted-style-502 {
    display:flex;
    justify-content:flex-end;
    gap:0.625rem;
    margin-top:1.5rem;
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:1rem;
}

.extracted-style-503 {
    padding:0.6rem 1.5rem;
    background:rgba(16, 185, 129, 0.2);
    color: var(--accent, #a5b4fc);
    border: 1px solid var(--accent-glow, rgba(16, 185, 129, 0.4));
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    transition:background 0.2s;
}
.extracted-style-503:hover {
    background: rgba(16, 185, 129, 0.4) !important;
}

.extracted-style-504 {
    padding:0.6rem 1.5rem;
    background:var(--brand-emerald, #10b981);
    color:#fff;
    border:none;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    transition:background 0.2s;
}
.extracted-style-504:hover {
    background: var(--emerald-dark, #062e1e) !important;
}

.extracted-style-505 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:99999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-506 {
    background:var(--dark-cockpit-bg, #041a13);
    padding:2rem;
    border-radius:0.75rem;
    width:90%;
    max-width:800px;
    max-height:80vh;
    overflow-y:auto;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    box-shadow:0 0.625rem 25px rgba(0,0,0,0.5);
}

.extracted-style-507 {
    margin-top:0;
    color:white;
    font-size:1.25rem;
    font-family:'Inter', sans-serif;
    margin-bottom:1.5rem;
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding-bottom:0.75rem;
}

.extracted-style-508 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.25rem 1rem;
    margin-bottom:1.5rem;
}

.extracted-style-509 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.extracted-style-510 {
    padding:0.6rem 1.2rem;
    background:rgba(239,68,68,0.1);
    color:#fca5a5;
    border:1px solid rgba(239,68,68,0.3);
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:0.5rem;
    transition:all 0.2s;
}
.extracted-style-510:hover {
    background: rgba(239,68,68,0.2) !important;
}

.extracted-style-511 {
    display:flex;
    justify-content:flex-end;
    gap:0.625rem;
}

.extracted-style-512 {
    padding:0.6rem 1.5rem;
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    color:#cbd5e1;
    border-radius:0.5rem;
    cursor:pointer;
    font-family:'Inter', sans-serif;
    transition:background 0.2s;
}
.extracted-style-512:hover {
    background: rgba(255,255,255,0.05) !important;
}

.extracted-style-513 {
    padding:0.6rem 1.5rem;
    background:var(--emerald-dark, #062e1e);
    border:none;
    color:white;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
    transition:background 0.2s;
}
.extracted-style-513:hover {
    background: #4338ca !important;
}

.extracted-style-514 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:99999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
}

.extracted-style-515 {
    background:var(--dark-cockpit-bg, #041a13);
    padding:1.875rem;
    border-radius:0.75rem;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    width:400px;
    max-width:90%;
    color:white;
    display:flex;
    flex-direction:column;
    gap:1.25rem;
}

.extracted-style-516 {
    margin:0;
    font-size:1.25rem;
}

.extracted-style-517 {
    display:flex;
    flex-direction:column;
    gap:5px;
}

.extracted-style-518 {
    color:#94a3b8;
    font-size:0.9rem;
}

.extracted-style-519 {
    width:100%;
}

.extracted-style-520 {
    display:flex;
    flex-direction:column;
    gap:5px;
}

.extracted-style-521 {
    color:#94a3b8;
    font-size:0.9rem;
}

.extracted-style-522 {
    width:100%;
    background:#0f172a;
    color:white;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.5rem;
    padding:0.625rem;
}

.extracted-style-523 {
    display:flex;
    justify-content:space-between;
    margin-top:0.625rem;
}

.extracted-style-524 {
    padding:0.6rem 1.5rem;
    background:#ef4444;
    color:#fff;
    border:none;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
    transition:background 0.2s;
}
.extracted-style-524:hover {
    background: #dc2626 !important;
}

.extracted-style-525 {
    display:flex;
    gap:0.625rem;
}

.extracted-style-526 {
    padding:0.6rem 1.5rem;
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    color:#cbd5e1;
    border-radius:0.5rem;
    cursor:pointer;
    font-family:'Inter', sans-serif;
    transition:background 0.2s;
}
.extracted-style-526:hover {
    background: rgba(255,255,255,0.05) !important;
}

.extracted-style-527 {
    padding:0.6rem 1.5rem;
    background:var(--brand-emerald, #10b981);
    color:#fff;
    border:none;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter', sans-serif;
    transition:background 0.2s;
}
.extracted-style-527:hover {
    background: var(--emerald-dark, #062e1e) !important;
}

.extracted-style-528 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    z-index:99999;
    backdrop-filter:blur(5px);
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
}

.extracted-style-529 {
    background:var(--dark-cockpit-bg, #041a13);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.75rem;
    width:100%;
    max-width:650px;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    color:white;
    overflow:hidden;
    box-shadow:0 1.25rem 25px -5px rgba(0,0,0,0.5);
}

.extracted-style-530 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.9375rem 1.25rem;
    border-bottom:1px solid rgba(255,255,255,0.1);
    flex-shrink:0;
}

.extracted-style-531 {
    margin:0;
    font-size:1.25rem;
    font-weight:600;
    color: var(--accent, #a5b4fc);
}

.extracted-style-532 {
    background:transparent;
    border:none;
    color:#94a3b8;
    font-size:1.5rem;
    cursor:pointer;
}
.extracted-style-532:hover {
    color: #fff !important;
}

.extracted-style-533 {
    padding:1.25rem;
    overflow-y:auto;
    flex-grow:1;
    box-sizing:border-box;
}

.extracted-style-534 {
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.extracted-style-535 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.75rem;
}

.extracted-style-536 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-537 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-538 {
    color:#f43f5e;
}

.extracted-style-539 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-540 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-541 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-542 {
    color:#f43f5e;
}

.extracted-style-543 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-544 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.75rem;
}

.extracted-style-545 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-546 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-547 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-548 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-549 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-550 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-551 {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0.75rem;
}

.extracted-style-552 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-553 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-554 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-555 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-556 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-557 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-558 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-559 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-560 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-561 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-562 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-563 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-564 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.75rem;
}

.extracted-style-565 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-566 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-567 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-568 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-569 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-570 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-571 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-572 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-573 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-574 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.75rem;
}

.extracted-style-575 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-576 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-577 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-578 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-579 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-580 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
}

.extracted-style-581 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-582 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-583 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
    font-family:inherit;
    resize:vertical;
}

.extracted-style-584 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.extracted-style-585 {
    font-size:0.85rem;
    color:#94a3b8;
    font-weight:bold;
}

.extracted-style-586 {
    padding:0.5rem 0.75rem;
    background: var(--card-bg, rgba(0,0,0,0.3));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    color:white;
    font-size:0.9rem;
    font-family:inherit;
    resize:vertical;
}

.extracted-style-587 {
    padding:0.9375rem 1.25rem;
    border-top:1px solid rgba(255,255,255,0.1);
    display:flex;
    justify-content:flex-end;
    gap:0.625rem;
    flex-shrink:0;
    background:rgba(0,0,0,0.15);
}

.extracted-style-588 {
    padding:0.6rem 1.5rem;
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    color:#cbd5e1;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    font-family:inherit;
    transition:background 0.2s;
}
.extracted-style-588:hover {
    background: rgba(255,255,255,0.05) !important;
}

.extracted-style-589 {
    padding:0.6rem 1.5rem;
    background:var(--brand-emerald, #10b981);
    color:white;
    border:none;
    border-radius:0.5rem;
    cursor:pointer;
    font-weight:600;
    font-family:inherit;
    transition:background 0.2s;
}
.extracted-style-589:hover {
    background: var(--emerald-dark, #062e1e) !important;
}

.extracted-style-590 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:var(--bg-focus-alpha, rgba(15, 23, 42, 0.8));
    z-index:100000;
    backdrop-filter:blur(0.5rem);
    justify-content:center;
    align-items:center;
    flex-direction:column;
    color:white;
    box-sizing:border-box;
}

.extracted-style-591 {
    background:var(--dark-cockpit-bg, #041a13);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:1rem;
    padding:2rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
    max-width:320px;
    width:90%;
    box-shadow:0 25px 50px -0.75rem rgba(0,0,0,0.5);
    text-align:center;
}

.extracted-style-592 {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
}

.extracted-style-593 {
    position:absolute;
    width:3rem;
    height:3rem;
    border:0.25rem solid rgba(16, 185, 129, 0.2);
    border-radius:50%;
}

.extracted-style-594 {
    position:absolute;
    width:3rem;
    height:3rem;
    border:0.25rem solid var(--brand-emerald, #10b981);
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

.extracted-style-595 {
    margin:0 0 0.5rem 0;
    color:#fff;
    font-size:1.1rem;
    font-weight:600;
}

.extracted-style-596 {
    margin:0;
    color:#94a3b8;
    font-size:0.9rem;
    line-height:1.5;
}

.extracted-style-597 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    z-index:90005;
    backdrop-filter:blur(6px);
    background:rgba(0,0,0,0.6);
}

.extracted-style-598 {
    background: var(--card-bg, var(--dark-cockpit-bg, #041a13));
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg, 12px);
    width: 90%;
    max-width: 440px;
    box-shadow: var(--shadow-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.5));
    overflow: hidden;
    position: relative;
}

.extracted-style-599 {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    cursor: pointer;
    color: #94a3b8;
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.2s;
}
.extracted-style-599:hover {
    color: #f8fafc !important;
}

.extracted-style-600 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    z-index:90000;
    backdrop-filter:blur(6px);
    background:rgba(0,0,0,0.5);
}

.extracted-style-601 {
    background: var(--card-bg, var(--dark-cockpit-bg, #041a13));
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg, 12px);
    padding: 1.5rem 2rem;
    width: 95%;
    max-width: 1100px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.5));
}

.extracted-style-602 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding-bottom:1rem;
    margin-bottom:1rem;
}

.extracted-style-603 {
    margin:0;
    font-size:1.15rem;
    font-weight:600;
    color:#e2e8f0;
    letter-spacing:0.02em;
}

.extracted-style-604 {
    cursor:pointer;
    color:#94a3b8;
    font-size:1.5rem;
    line-height:1;
    transition:color 0.2s;
}
.extracted-style-604:hover {
    color: #f8fafc !important;
}

.extracted-style-605 {
    overflow-y:auto;
    flex:1;
    padding-right:0.5rem;
}

.extracted-style-606 {
    width:100%;
    font-size:0.85rem;
}

.extracted-style-607 {
    position:sticky;
    top:0;
    background:#0f172a;
    z-index:5;
}

.extracted-style-608 {
    text-align:left;
    white-space:nowrap;
    width:12%;
}

.extracted-style-609 {
    text-align:left;
    white-space:nowrap;
    width:12%;
}

.extracted-style-610 {
    text-align:left;
    white-space:nowrap;
    width:8%;
}

.extracted-style-611 {
    text-align:left;
    width:25%;
}

.extracted-style-612 {
    text-align:left;
    width:29%;
}

.extracted-style-613 {
    text-align:right;
    white-space:nowrap;
    width:9%;
}

.extracted-style-614 {
    text-align:center;
    width:5%;
}

.extracted-style-615 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    z-index:99999999;
    backdrop-filter:blur(6px);
    background:rgba(0,0,0,0.5);
}

.extracted-style-616 {
    background:linear-gradient(145deg, rgba(4, 26, 19, 0.9), rgba(15,23,42,0.9));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.75rem;
    padding:2.5rem;
    width:90%;
    max-width:480px;
    display:flex;
    flex-direction:column;
    box-shadow: 0 25px 50px -0.75rem rgba(0, 0, 0, 0.5);
    text-align:center;
}

.extracted-style-617 {
    margin:0 0 1rem 0;
    font-size:1.25rem;
    font-weight:600;
    color:#f8fafc;
    letter-spacing:0.02em;
}

.extracted-style-618 {
    color:#94a3b8;
    font-size:1rem;
    line-height:1.5;
    margin-bottom:2rem;
}

.extracted-style-619 {
    display:flex;
    justify-content:center;
    gap:1rem;
}

.extracted-style-620 {
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    color:#cbd5e1;
    padding:0.65rem 1.2rem;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
    font-size:0.9rem;
    transition:all 0.2s;
}

.extracted-style-621 {
    background:#0ea5e9;
    border:none;
    color:white;
    padding:0.65rem 1.2rem;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
    font-size:0.9rem;
    box-shadow:0 0.25rem 0.875rem 0 rgba(14,165,233,0.39);
    transition:all 0.2s;
}

.extracted-style-622 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    z-index:90000;
    backdrop-filter:blur(6px);
    background:rgba(0,0,0,0.5);
}

.extracted-style-623 {
    background:linear-gradient(145deg, rgba(4, 26, 19, 0.9), rgba(15,23,42,0.9));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.75rem;
    padding:2rem;
    width:90%;
    max-width:650px;
    max-height:85vh;
    display:flex;
    flex-direction:column;
    box-shadow: 0 25px 50px -0.75rem rgba(0, 0, 0, 0.5);
}

.extracted-style-624 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1.5rem;
}

.extracted-style-625 {
    margin:0;
    font-size:1.25rem;
    font-weight:600;
    color:white;
    letter-spacing:0.02em;
}

.extracted-style-626 {
    display:flex;
    gap:1rem;
    align-items:center;
}

.extracted-style-627 {
    padding:0.4rem 0.8rem;
    background:rgba(239,68,68,0.1);
    color:#fca5a5;
    border:1px solid rgba(239,68,68,0.3);
    border-radius:6px;
    cursor:pointer;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:0.4rem;
    font-size:0.85rem;
    transition:all 0.2s;
}
.extracted-style-627:hover {
    background: rgba(239,68,68,0.2) !important;
}

.extracted-style-628 {
    background:transparent;
    border:none;
    color:#94a3b8;
    cursor:pointer;
    padding:0.5rem;
    transition:color 0.2s;
}

.extracted-style-629 {
    width:1.25rem;
    height:1.25rem;
}

.extracted-style-630 {
    overflow-y:auto;
    overflow-x:hidden;
    flex-grow:1;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 0.5rem;
}

.extracted-style-631 {
    width:100%;
    border-collapse:collapse;
    color:#f8fafc;
    font-size:0.875rem;
    text-align:left;
}

.extracted-style-632 {
    background:var(--dark-cockpit-bg, #041a13);
    position:sticky;
    top:0;
    z-index:10;
    box-shadow: 0 0.25rem 6px -1px rgba(0, 0, 0, 0.1);
}

.extracted-style-633 {
    padding:0.75rem 1rem;
    border-bottom:1px solid rgba(255,255,255,0.1);
    font-weight:600;
    width:55%;
}

.extracted-style-634 {
    padding:0.75rem 1rem;
    border-bottom:1px solid rgba(255,255,255,0.1);
    font-weight:600;
    text-align:right;
    width:25%;
}

.extracted-style-635 {
    padding:0.75rem 1rem;
    border-bottom:1px solid rgba(255,255,255,0.1);
    font-weight:600;
    width:20%;
}

.extracted-style-636 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    z-index:90005;
    backdrop-filter:blur(6px);
    background:rgba(0,0,0,0.6);
}

.extracted-style-637 {
    background:linear-gradient(145deg, rgba(4, 26, 19, 0.98), rgba(15,23,42,0.98));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.75rem;
    padding:1.5rem 2rem;
    width:90%;
    max-width:480px;
    box-shadow: 0 25px 50px -0.75rem rgba(0, 0, 0, 0.5);
    display:flex;
    flex-direction:column;
    position: relative;
}

.extracted-style-638 {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    cursor: pointer;
    color: #94a3b8;
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.2s;
}
.extracted-style-638:hover {
    color: #f8fafc !important;
}

.extracted-style-639 {
    margin:0 0 1.25rem 0;
    font-size:1.25rem;
    font-weight:600;
    color:white;
    letter-spacing:0.02em;
}

.extracted-style-640 {
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    margin-bottom:1.5rem;
}

.extracted-style-641 {
    display:block;
    color:#94a3b8;
    font-size:0.875rem;
    margin-bottom:0.5rem;
    font-weight:500;
}

.extracted-style-642 {
    position: relative;
}

.extracted-style-643 {
    width:100%;
    background:#0f172a;
    color:#e2e8f0;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.6rem 0.8rem;
    font-size:0.9rem;
    outline:none;
    font-family: inherit;
    box-sizing: border-box;
}

.extracted-style-644 {
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    max-height:250px;
    overflow-y:auto;
    background:var(--dark-cockpit-bg, #041a13);
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    list-style:none;
    padding:0;
    margin:0.25rem 0 0 0;
    z-index:100;
    box-shadow: 0 0.625rem 0.9375rem -3px rgba(0, 0, 0, 0.5);
}

.extracted-style-645 {
    margin-top:0.75rem;
    color:#bae6fd;
    font-size:0.85rem;
    padding:0.75rem;
    background:rgba(14, 165, 233, 0.1);
    border-radius:6px;
    border:1px solid rgba(14, 165, 233, 0.2);
    line-height:1.4;
}

.extracted-style-646 {
    display:block;
    color:#94a3b8;
    font-size:0.875rem;
    margin-bottom:0.5rem;
    font-weight:500;
}

.extracted-style-647 {
    width:100%;
    height:80px;
    background:#0f172a;
    color:#e2e8f0;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.6rem 0.8rem;
    font-size:0.9rem;
    resize:none;
    outline:none;
    font-family: inherit;
    box-sizing: border-box;
}

.extracted-style-648 {
    color:#ef4444;
    font-size:0.85rem;
    margin-bottom:1rem;
    text-align:left;
}

.extracted-style-649 {
    display:flex;
    justify-content:flex-end;
    gap:0.75rem;
}

.extracted-style-650 {
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    color:#cbd5e1;
    padding:0.5rem 1rem;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
    font-size:0.875rem;
    transition:all 0.2s;
}
.extracted-style-650:hover {
    background: rgba(255,255,255,0.05) !important;
}

.extracted-style-651 {
    background:var(--emerald-dark, #062e1e);
    border:none;
    color:white;
    padding:0.5rem 1rem;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
    font-size:0.875rem;
    box-shadow:0 0.25rem 0.75rem 0 rgba(6, 46, 30, 0.3);
    transition:all 0.2s;
}
.extracted-style-651:hover {
    background: #4338ca !important;
}

.extracted-style-652 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    z-index:90005;
    backdrop-filter:blur(6px);
    background:rgba(0,0,0,0.6);
}

.extracted-style-653 {
    background:linear-gradient(145deg, rgba(4, 26, 19, 0.98), rgba(15,23,42,0.98));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.75rem;
    padding:1.5rem 2rem;
    width:90%;
    max-width:480px;
    box-shadow: 0 25px 50px -0.75rem rgba(0, 0, 0, 0.5);
    display:flex;
    flex-direction:column;
    position: relative;
}

.extracted-style-654 {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    cursor: pointer;
    color: #94a3b8;
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.2s;
}
.extracted-style-654:hover {
    color: #f8fafc !important;
}

.extracted-style-655 {
    margin:0 0 1.25rem 0;
    font-size:1.25rem;
    font-weight:600;
    color:white;
    letter-spacing:0.02em;
}

.extracted-style-656 {
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    margin-bottom:1.5rem;
}

.extracted-style-657 {
    display:block;
    color:#94a3b8;
    font-size:0.875rem;
    margin-bottom:0.5rem;
    font-weight:500;
}

.extracted-style-658 {
    width:100%;
    background:#0f172a;
    color:#e2e8f0;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.6rem 0.8rem;
    font-size:0.9rem;
    outline:none;
    font-family: inherit;
    box-sizing: border-box;
}

.extracted-style-659 {
    color: var(--text-muted, #94a3b8); font-size: 0.85rem;
    margin-bottom:1rem;
    text-align:left;
    line-height: 1.5;
}

.extracted-style-660 {
    color:#ef4444;
    font-size:0.85rem;
    margin-bottom:1rem;
    text-align:left;
}

.extracted-style-661 {
    display:flex;
    justify-content:flex-end;
    gap:0.75rem;
}

.extracted-style-662 {
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    color:#cbd5e1;
    padding:0.5rem 1rem;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
    font-size:0.875rem;
    transition:all 0.2s;
}
.extracted-style-662:hover {
    background: rgba(255,255,255,0.05) !important;
}

.extracted-style-663 {
    background:#10b981;
    border:none;
    color:white;
    padding:0.5rem 1rem;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
    font-size:0.875rem;
    box-shadow:0 0.25rem 0.75rem 0 rgba(16,185,129,0.3);
    transition:all 0.2s;
}
.extracted-style-663:hover {
    background: #059669 !important;
}

.extracted-style-664 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    z-index:90005;
    backdrop-filter:blur(6px);
    background:rgba(0,0,0,0.6);
}

.extracted-style-665 {
    background:linear-gradient(145deg, rgba(4, 26, 19, 0.98), rgba(15,23,42,0.98));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.75rem;
    padding:1.5rem 2rem;
    width:90%;
    max-width:480px;
    box-shadow: 0 25px 50px -0.75rem rgba(0, 0, 0, 0.5);
    display:flex;
    flex-direction:column;
    position: relative;
}

.extracted-style-666 {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    cursor: pointer;
    color: #94a3b8;
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.2s;
}
.extracted-style-666:hover {
    color: #f8fafc !important;
}

.extracted-style-667 {
    margin:0 0 1.25rem 0;
    font-size:1.25rem;
    font-weight:600;
    color:white;
    letter-spacing:0.02em;
}

.extracted-style-668 {
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    margin-bottom:1.5rem;
}

.extracted-style-669 {
    display:flex;
    gap:0.75rem;
}

.extracted-style-670 {
    flex:1;
}

.extracted-style-671 {
    display:block;
    color:#94a3b8;
    font-size:0.875rem;
    margin-bottom:0.5rem;
    font-weight:500;
}

.extracted-style-672 {
    width:100%;
    background:#0f172a;
    color:#e2e8f0;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.6rem 0.8rem;
    font-size:0.9rem;
    outline:none;
    font-family: inherit;
    box-sizing: border-box;
}

.extracted-style-673 {
    flex:1;
}

.extracted-style-674 {
    display:block;
    color:#94a3b8;
    font-size:0.875rem;
    margin-bottom:0.5rem;
    font-weight:500;
}

.extracted-style-675 {
    width:100%;
    background:#0f172a;
    color:#e2e8f0;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.6rem 0.8rem;
    font-size:0.9rem;
    outline:none;
    font-family: inherit;
    box-sizing: border-box;
}

.extracted-style-676 {
    display:block;
    color:#94a3b8;
    font-size:0.875rem;
    margin-bottom:0.5rem;
    font-weight:500;
}

.extracted-style-677 {
    width:100%;
    background:#0f172a;
    color:#e2e8f0;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.6rem 0.8rem;
    font-size:0.9rem;
    outline:none;
    font-family: inherit;
    box-sizing: border-box;
}

.extracted-style-678 {
    display:block;
    color:#94a3b8;
    font-size:0.875rem;
    margin-bottom:0.5rem;
    font-weight:500;
}

.extracted-style-679 {
    width:100%;
    background:#0f172a;
    color:#e2e8f0;
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:6px;
    padding:0.6rem 0.8rem;
    font-size:0.9rem;
    outline:none;
    font-family: inherit;
    box-sizing: border-box;
}

.extracted-style-680 {
    color:#ef4444;
    font-size:0.85rem;
    margin-bottom:1rem;
    text-align:left;
}

.extracted-style-681 {
    display:flex;
    justify-content:flex-end;
    gap:0.75rem;
}

.extracted-style-682 {
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    color:#cbd5e1;
    padding:0.5rem 1rem;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
    font-size:0.875rem;
    transition:all 0.2s;
}
.extracted-style-682:hover {
    background: rgba(255,255,255,0.05) !important;
}

.extracted-style-683 {
    background:#10b981;
    border:none;
    color:white;
    padding:0.5rem 1rem;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
    font-size:0.875rem;
    box-shadow:0 0.25rem 0.75rem 0 rgba(16,185,129,0.3);
    transition:all 0.2s;
}
.extracted-style-683:hover {
    background: #059669 !important;
}

.extracted-style-684 {
    display:flex;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:#0f172a;
    z-index:9999999;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.extracted-style-685 {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.extracted-style-686 {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    background: linear-gradient(to right, #a5b4fc, #e0e7ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.625rem;
}

.extracted-style-687 {
    color:#94a3b8;
    margin-bottom:1.875rem;
    font-size:1.1rem;
    letter-spacing:0.5px;
}

.extracted-style-688 {
    display:flex;
    align-items:center;
    gap:0.75rem;
    background:white;
    color:#0f172a;
    padding:0.75rem 1.5rem;
    border-radius:0.5rem;
    border:none;
    font-weight:600;
    font-size:1.1rem;
    cursor:pointer;
    box-shadow:0 0.25rem 0.9375rem rgba(0,0,0,0.3);
    transition:transform 0.2s;
}
.extracted-style-688:hover {
    transform: scale(1.05) !important;
}

.extracted-style-689 {
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,0.75);
    backdrop-filter:blur(6px);
    align-items:center;
    justify-content:center;
    padding:1.25rem;
    box-sizing:border-box;
}

.extracted-style-690 {
    background:linear-gradient(135deg,#0f172a 0%,var(--dark-cockpit-bg, #041a13) 100%);
    border:1px solid rgba(16,185,129,0.3);
    border-radius:1rem;
    width:100%;
    max-width:960px;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    box-shadow:0 25px 60px rgba(0,0,0,0.6);
}

.extracted-style-691 {
    padding:1.25rem 1.5rem 1rem;
    border-bottom:1px solid rgba(255,255,255,0.07);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
}

.extracted-style-692 {
    display:flex;
    align-items:center;
    gap:0.75rem;
}

.extracted-style-693 {
    background:rgba(16,185,129,0.15);
    color:#34d399;
    border-radius:0.625rem;
    width:2.5rem;
    height:2.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.extracted-style-694 {
    font-size:1.1rem;
    font-weight:700;
    color:white;
}

.extracted-style-695 {
    font-size:0.8rem;
    color:#64748b;
    margin-top:2px;
}

.extracted-style-696 {
    display:flex;
    align-items:center;
    gap:0.625rem;
}

.extracted-style-697 {
    position:relative;
}

.extracted-style-698 {
    position:absolute;
    left:0.625rem;
    top:50%;
    transform:translateY(-50%);
    color:#64748b;
}

.extracted-style-699 {
    background:var(--bg-alpha-05, rgba(255, 255, 255, 0.05));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.5rem;
    padding:0.5rem 0.75rem 0.5rem 2rem;
    color:white;
    font-size:0.82rem;
    width:220px;
    outline:none;
    transition:border-color 0.2s;
}

.extracted-style-700 {
    background:var(--bg-alpha-05, rgba(255, 255, 255, 0.05));
    border:1px solid var(--border-alpha-10, rgba(255, 255, 255, 0.1));
    border-radius:0.5rem;
    width:36px;
    height:36px;
    color:#94a3b8;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s;
}

.extracted-style-701 {
    overflow-y:auto;
    flex:1;
    padding:0;
}

.extracted-style-702 {
    width:100%;
    border-collapse:collapse;
    font-size:0.85rem;
}

.extracted-style-703 {
    position:sticky;
    top:0;
    z-index:1;
}

.extracted-style-704 {
    background:rgba(15,23,42,0.95);
    backdrop-filter:blur(0.25rem);
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.extracted-style-705 {
    padding:0.75rem 1rem;
    text-align:left;
    color:#64748b;
    font-weight:600;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
    white-space:nowrap;
}

.extracted-style-706 {
    padding:0.75rem 1rem;
    text-align:left;
    color:#64748b;
    font-weight:600;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.extracted-style-707 {
    padding:0.75rem 1rem;
    text-align:left;
    color:#64748b;
    font-weight:600;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.extracted-style-708 {
    padding:0.75rem 1rem;
    text-align:left;
    color:#64748b;
    font-weight:600;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.extracted-style-709 {
    padding:0.75rem 1rem;
    text-align:left;
    color:#64748b;
    font-weight:600;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.extracted-style-710 {
    padding:2rem;
    text-align:center;
    color:#64748b;
    font-style:italic;
}

.extracted-style-711 {
    padding:0.875rem 1.5rem;
    border-top:1px solid rgba(255,255,255,0.07);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
}

.extracted-style-712 {
    font-size:0.8rem;
    color:#64748b;
}

.extracted-style-713 {
    background:rgba(16,185,129,0.1);
    border:1px solid rgba(16,185,129,0.3);
    border-radius:0.5rem;
    padding:0.5rem 1.25rem;
    color:#34d399;
    font-size:0.85rem;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
}

.hamburger-dropdown-item:hover {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
}

/* Custom Orange Note Badge & Recalc Animations */
.badge-notes {
    border: 1px solid #f97316 !important;
    background: rgba(249, 115, 22, 0.1) !important;
    color: #fdba74 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    margin-left: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

@keyframes pulseRecalc {
    0% { transform: scale(1); filter: brightness(1.3); }
    50% { transform: scale(1.05); filter: brightness(1.8); }
    100% { transform: scale(1); filter: brightness(1); }
}

.pulse-recalc {
    animation: pulseRecalc 0.3s ease-out !important;
    display: inline-block;
}

/* Database Property Card premium styling */
.db-property-card {
    background: linear-gradient(145deg, #09120c, #050a07) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    color: var(--text-primary) !important;
    transition: var(--transition-normal) !important;
    position: relative !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-md) !important;
    height: 100% !important;
    min-height: 380px !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

.db-property-card:hover {
    transform: scale(1.04) translateY(-8px) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.4), 0 0 20px var(--accent-glow) !important;
    z-index: 10 !important;
}

/* Image zoom effect on card hover */
.db-property-card:hover [id^="db-card-img-container-"] {
    transform: scale(1.1) !important;
}

/* Sprint 18: Row-Level Pointer Lockout and opacity rules during mid-flight requests */
.row-locked {
    pointer-events: none !important;
    opacity: 0.7 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUG REPORTING PORTAL & CHAT POPUP MODAL STYLING
   ───────────────────────────────────────────────────────────────────────────── */

/* Trigger Button */
#report-bug-trigger-btn {
    border: 1px solid var(--accent, #00a86b) !important;
    border-radius: var(--radius-lg, 12px) !important;
    background: transparent !important;
    color: var(--accent, #00a86b) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#report-bug-trigger-btn:hover {
    background: var(--accent-glow, rgba(0, 168, 107, 0.15)) !important;
    box-shadow: 0 0 16px var(--accent-glow, rgba(0, 168, 107, 0.25)) !important;
    transform: translateY(-2px) !important;
}

/* Modal Overlay with glassmorphism and heavy backdrop blur */
.bug-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(3, 6, 4, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    animation: bugFadeIn 0.3s ease-out !important;
}

/* Modal Container card */
.bug-modal-content {
    width: 90% !important;
    max-width: 520px !important;
    height: 85vh !important;
    max-height: 680px !important;
    background: linear-gradient(145deg, var(--bg-grad-2, #09120c), var(--bg-grad-1, #050a07)) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08)) !important;
    border-radius: var(--radius-xl, 16px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px var(--accent-glow, rgba(0, 168, 107, 0.1)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    animation: bugSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Modal Header */
.bug-modal-header {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.06)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.bug-modal-header h3 {
    margin: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--text-primary, #e2ebf0) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.bug-modal-header h3 svg {
    color: var(--accent, #00a86b) !important;
}

.bug-modal-close-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary, #92a49d) !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.bug-modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--error, #ef4444) !important;
}

/* Chat container and window styling */
.bug-chat-window {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

.bug-chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

/* Custom modern scrollbar for messages */
.bug-chat-messages::-webkit-scrollbar {
    width: 6px !important;
}
.bug-chat-messages::-webkit-scrollbar-track {
    background: transparent !important;
}
.bug-chat-messages::-webkit-scrollbar-thumb {
    background: var(--accent-soft-border) !important;
    border-radius: 10px !important;
}
.bug-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--accent, #10b981) !important;
}

/* Chat Message Bubbles */
.bug-msg-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.bug-msg-wrapper.user {
    align-items: flex-end !important;
}

.bug-msg-wrapper.assistant {
    align-items: flex-start !important;
}

.bug-msg-bubble {
    max-width: 80% !important;
    padding: 0.85rem 1.1rem !important;
    border-radius: var(--radius-lg, 12px) !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.bug-msg-wrapper.user .bug-msg-bubble {
    background: linear-gradient(135deg, var(--accent, #00a86b), #007d4b) !important;
    color: var(--white, #ffffff) !important;
    border-bottom-right-radius: 2px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.bug-msg-wrapper.assistant .bug-msg-bubble {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-primary, #e2ebf0) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05)) !important;
    border-bottom-left-radius: 2px !important;
}

.bug-msg-time {
    font-size: 0.72rem !important;
    color: var(--text-secondary, #92a49d) !important;
    margin-top: 4px !important;
    opacity: 0.6 !important;
}

/* Chat Inline Images */
.bug-msg-image {
    max-width: 100% !important;
    max-height: 180px !important;
    border-radius: var(--radius-md, 8px) !important;
    margin-top: 6px !important;
    display: block !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.2s ease !important;
}

.bug-msg-image:hover {
    transform: scale(1.02) !important;
}

/* Attachment preview ribbon */
.bug-attachment-ribbon {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0.75rem 1.25rem !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.05)) !important;
    overflow-x: auto !important;
}

.bug-thumb-wrapper {
    position: relative !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: var(--radius-md, 8px) !important;
    overflow: hidden !important;
    border: 1px solid var(--accent, #00a86b) !important;
    flex-shrink: 0 !important;
}

.bug-thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.bug-thumb-remove {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: rgba(239, 68, 68, 0.85) !important;
    border: none !important;
    color: white !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.bug-thumb-loading {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Upload spinner */
.bug-spinner {
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    border-top-color: var(--accent, #00a86b) !important;
    animation: bugSpin 0.8s linear infinite !important;
}

/* Chat Input Bar area */
.bug-chat-input-area {
    padding: 1rem 1.25rem !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.05)) !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 10px !important;
}

.bug-paperclip-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.06)) !important;
    color: var(--text-secondary, #92a49d) !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: var(--radius-lg, 12px) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.bug-paperclip-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--accent, #00a86b) !important;
    border-color: var(--accent, #00a86b) !important;
}

.bug-chat-input {
    flex: 1 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.06)) !important;
    border-radius: var(--radius-lg, 12px) !important;
    color: var(--text-primary, #e2ebf0) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.92rem !important;
    resize: none !important;
    height: 42px !important;
    max-height: 120px !important;
    line-height: 1.3 !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.bug-chat-input:focus {
    border-color: var(--accent, #00a86b) !important;
    box-shadow: 0 0 0 2px var(--accent-glow, rgba(0, 168, 107, 0.15)) !important;
}

.bug-chat-send-btn {
    background: var(--accent, #00a86b) !important;
    border: none !important;
    color: var(--white, #ffffff) !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: var(--radius-lg, 12px) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
}

.bug-chat-send-btn:hover:not(:disabled) {
    transform: scale(1.05) !important;
    box-shadow: 0 0 12px var(--accent-glow, rgba(0, 168, 107, 0.3)) !important;
}

.bug-chat-send-btn:disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    cursor: not-allowed !important;
}

/* Chat finalize footer button styling */
.bug-modal-footer-btn-container {
    padding: 0.75rem 1.25rem 1.25rem !important;
    background: rgba(0,0,0,0.2) !important;
    border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.05)) !important;
    display: flex !important;
    justify-content: center !important;
}

.bug-submit-final-btn {
    width: 100% !important;
    padding: 0.85rem !important;
    background: linear-gradient(135deg, var(--accent, #00a86b), #007d4b) !important;
    border: none !important;
    border-radius: var(--radius-lg, 12px) !important;
    color: white !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 168, 107, 0.2) !important;
}

.bug-submit-final-btn:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--accent-glow, rgba(0, 168, 107, 0.35)) !important;
}

.bug-submit-final-btn:disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Lightbox Screenshot view overlay */
.bug-lightbox-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(3, 6, 4, 0.92) !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: bugFadeIn 0.2s ease-out !important;
    cursor: zoom-out !important;
}

.bug-lightbox-img {
    max-width: 90% !important;
    max-height: 90vh !important;
    object-fit: contain !important;
    border-radius: var(--radius-md, 8px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUG MANAGER ADMIN PORTAL STYLING
   ───────────────────────────────────────────────────────────────────────────── */

#bug-reports-container {
    display: none;
    flex-direction: row !important;
    gap: 1.5rem !important;
    height: calc(100vh - 120px) !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
    color: var(--text-primary, #e2ebf0) !important;
}

/* Left Master List (35%) */
.bug-master-list {
    flex: 0 0 35% !important;
    max-width: 35% !important;
    background: rgba(9, 18, 12, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05)) !important;
    border-radius: var(--radius-xl, 16px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.bug-master-header {
    padding: 1.25rem !important;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.05)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.bug-master-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Search bar styling */
.bug-search-wrapper {
    position: relative !important;
}

.bug-search-input {
    width: 100% !important;
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.06)) !important;
    border-radius: var(--radius-md, 8px) !important;
    color: var(--text-primary, #e2ebf0) !important;
    padding: 0.6rem 0.85rem 0.6rem 2.25rem !important;
    font-size: 0.88rem !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.bug-search-input:focus {
    border-color: var(--accent, #00a86b) !important;
    box-shadow: 0 0 0 2px var(--accent-glow, rgba(0, 168, 107, 0.15)) !important;
}

.bug-search-icon {
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--text-secondary, #92a49d) !important;
    pointer-events: none !important;
}

/* Tab Filters */
.bug-filter-tabs {
    display: flex !important;
    gap: 6px !important;
}

.bug-filter-tab {
    flex: 1 !important;
    padding: 6px 4px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05)) !important;
    border-radius: var(--radius-md, 8px) !important;
    color: var(--text-secondary, #92a49d) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

.bug-filter-tab:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary, #e2ebf0) !important;
}

.bug-filter-tab.active {
    background: var(--accent, #00a86b) !important;
    color: white !important;
    border-color: var(--accent, #00a86b) !important;
    box-shadow: 0 0 8px var(--accent-glow, rgba(0, 168, 107, 0.2)) !important;
}

/* Scrollable master list area */
.bug-list-scrollable {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

/* Custom scrollbar for scrollable area */
.bug-list-scrollable::-webkit-scrollbar {
    width: 5px !important;
}
.bug-list-scrollable::-webkit-scrollbar-thumb {
    background: var(--accent-soft-border) !important;
    border-radius: 10px !important;
}
.bug-list-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--accent, #10b981) !important;
}

/* Item card inside list */
.bug-item-card {
    padding: 1rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.04)) !important;
    border-radius: var(--radius-lg, 12px) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.bug-item-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(4px) !important;
}

.bug-item-card.active {
    background: rgba(0, 168, 107, 0.06) !important;
    border-color: var(--accent, #00a86b) !important;
    box-shadow: inset 0 0 10px rgba(0, 168, 107, 0.05) !important;
}

.bug-item-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0.5rem !important;
}

.bug-item-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--text-primary, #e2ebf0) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 70% !important;
}

/* Status Badges */
.bug-badge {
    padding: 3px 8px !important;
    border-radius: 20px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
}

.bug-badge.new {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.bug-badge.progress {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.bug-badge.resolved {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.bug-item-meta {
    font-size: 0.78rem !important;
    color: var(--text-secondary, #92a49d) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    opacity: 0.8 !important;
}

.bug-item-reporter {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Right Detail Panel (65%) */
.bug-detail-pane {
    flex: 0 0 65% !important;
    max-width: 65% !important;
    background: rgba(9, 18, 12, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05)) !important;
    border-radius: var(--radius-xl, 16px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.bug-detail-empty {
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    opacity: 0.5 !important;
}

.bug-detail-empty h4 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    color: var(--text-secondary, #92a49d) !important;
}

/* Full Bug Detail rendering styles */
.bug-detail-header {
    padding: 1.5rem !important;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.05)) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    background: rgba(0,0,0,0.15) !important;
}

.bug-detail-header-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    max-width: 65% !important;
}

.bug-detail-id {
    font-size: 0.78rem !important;
    color: var(--accent, #00a86b) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.bug-detail-title-text {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: var(--text-primary, #e2ebf0) !important;
    word-break: break-word !important;
}

.bug-detail-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Action dropdown and buttons in detail panel */
.bug-action-select {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08)) !important;
    color: var(--text-primary, #e2ebf0) !important;
    padding: 0.45rem 1rem !important;
    border-radius: var(--radius-md, 8px) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    outline: none !important;
    cursor: pointer !important;
}

.bug-action-select option {
    background: var(--bg-dark, #030604) !important;
    color: var(--text-primary, #e2ebf0) !important;
}

.bug-delete-btn {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: var(--radius-md, 8px) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.bug-delete-btn:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    color: white !important;
}

/* Detail Split View (Transcript left, Metadata right) */
.bug-detail-body-split {
    flex: 1 !important;
    display: flex !important;
    overflow: hidden !important;
}

.bug-detail-transcript-area {
    flex: 1 !important;
    border-right: 1px solid var(--card-border, rgba(255, 255, 255, 0.04)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 1.5rem !important;
    gap: 1.25rem !important;
}

.bug-detail-transcript-area::-webkit-scrollbar {
    width: 5px !important;
}
.bug-detail-transcript-area::-webkit-scrollbar-thumb {
    background: var(--accent-soft-border) !important;
    border-radius: 10px !important;
}
.bug-detail-transcript-area::-webkit-scrollbar-thumb:hover {
    background: var(--accent, #10b981) !important;
}

/* Metadata panel inside detail view */
.bug-detail-metadata-sidebar {
    width: 280px !important;
    flex-shrink: 0 !important;
    background: rgba(0, 0, 0, 0.08) !important;
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.bug-meta-section h5 {
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-secondary, #92a49d) !important;
    margin: 0 0 0.75rem 0 !important;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.04)) !important;
    padding-bottom: 4px !important;
}

.bug-meta-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
}

.bug-meta-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.bug-meta-label {
    font-size: 0.75rem !important;
    color: var(--text-secondary, #92a49d) !important;
    opacity: 0.7 !important;
}

.bug-meta-value {
    font-size: 0.85rem !important;
    color: var(--text-primary, #e2ebf0) !important;
    word-break: break-all !important;
    line-height: 1.3 !important;
}

/* Image Thumbnails inside Sidebar */
.bug-meta-screenshot-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

.bug-meta-screenshot-wrapper {
    position: relative !important;
    aspect-ratio: 1 !important;
    border-radius: var(--radius-md, 8px) !important;
    overflow: hidden !important;
    border: 1px solid var(--card-border, rgba(255,255,255,0.06)) !important;
    cursor: zoom-in !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.bug-meta-screenshot-wrapper:hover {
    transform: scale(1.05) !important;
    border-color: var(--accent, #00a86b) !important;
}

.bug-meta-screenshot-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Keyframes */
@keyframes bugFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes bugSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Track A: Responsive Header Breakdown Queries (<1024px) --- */
#hamburger-menu-container {
    display: inline-block !important;
}

@media screen and (max-width: 1024px) {
    #hamburger-menu-container {
        display: inline-block !important;
    }
    .matrix-btn-group,
    #neighborhoods-btn,
    #admin-btn {
        display: none !important;
    }
}

/* v1985: High-clearance touch targets for detail header controls (Spec B) */
.matrix-btn-group button {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s;
}

/* v1985: Firebase Hosting tab-btn active states (Spec C) */
.tab-btn-active {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: var(--accent) !important;
    color: #ffffff !important;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.tab-btn-inactive {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: transparent !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

/* Custom UI buttons for Bug Reporting / Admin Panel */
.btn-primary-custom {
    background: var(--accent, #10b981) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 12px 0 rgba(16, 185, 129, 0.3) !important;
    cursor: pointer;
    transition: var(--transition-normal, all 0.25s ease);
}
.btn-primary-custom:hover {
    background: #059669 !important;
    box-shadow: 0 4px 16px 0 rgba(5, 150, 101, 0.4) !important;
}

.btn-outline-custom {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #cbd5e1 !important;
    cursor: pointer;
    transition: var(--transition-normal, all 0.25s ease);
}
.btn-outline-custom:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Active tab state for filter buttons */
.btn-outline-custom.active-tab {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: var(--accent, #10b981) !important;
    color: white !important;
    font-weight: 700 !important;
}

/* --- Premium Communicator Inbox Styles (v2092 Upgrade) --- */
.comm-split-panel {
    display: flex;
    flex: 1;
    gap: 1.5rem;
    min-height: 0;
    margin-top: 1rem;
}

/* Left list pane card items */
.comm-inbox-card {
    background: var(--card-bg, rgba(4, 26, 19, 0.45));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    user-select: none;
}
.comm-inbox-card:hover {
    transform: translateY(-2px) scale(1.015);
    background: var(--bg-alpha-03, rgba(255, 255, 255, 0.03));
    border-color: var(--accent, #10b981);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.comm-inbox-card.active {
    background: var(--bg-alpha-05, rgba(255, 255, 255, 0.05));
    border-color: var(--accent, #10b981) !important;
    box-shadow: 0 0 15px var(--accent-glow, rgba(16, 185, 129, 0.15));
}

/* Dynamic left-status border accents */
.comm-inbox-card.status-pending {
    border-left: 4px solid #facc15 !important; /* Warning Amber */
}
.comm-inbox-card.status-blocked {
    border-left: 4px solid #ef4444 !important; /* Danger Red */
}
.comm-inbox-card.status-in_progress {
    border-left: 4px solid var(--accent, #10b981) !important; /* Dynamic Accent */
}
.comm-inbox-card.status-completed {
    border-left: 4px solid #10b981 !important; /* Clean Green */
}

/* Left card details styling */
.comm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.comm-card-topic {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75%;
}
.comm-card-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.comm-badge-pending { background: rgba(250, 204, 21, 0.15); color: #facc15; }
.comm-badge-blocked { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.comm-badge-in_progress { background: rgba(16, 185, 129, 0.15); color: var(--accent, #10b981); }
.comm-badge-completed { background: rgba(16, 185, 129, 0.15); color: #10b981; }

.comm-card-meta {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
}

/* Breadcrumbs pill style */
.comm-breadcrumb {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 1.25rem;
    width: fit-content;
}
.comm-breadcrumb span.active-node {
    color: var(--text-primary, #ffffff);
    font-weight: 600;
}

/* Header Action buttons Row */
.comm-action-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

/* Premium Glass Action CTAs */
.comm-btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #cbd5e1);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    text-decoration: none;
}
.comm-btn-glass:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #ffffff);
    transform: translateY(-1px);
}
.comm-btn-glass:active {
    transform: translateY(1px);
}

/* Detail view high-contrast info card */
.comm-description-card {
    background: var(--card-bg, rgba(4, 26, 19, 0.3));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-left: 4.5px solid var(--accent, #10b981);
    padding: 1.25rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}
.comm-description-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent, #10b981);
    margin-bottom: 0.5rem;
}
.comm-description-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary, #cbd5e1);
}

/* Vertical Timeline Track */
.comm-timeline {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2.5rem;
}
.comm-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 0;
    width: 2px;
    background: var(--card-border, rgba(255, 255, 255, 0.06));
}
.comm-timeline-node {
    position: relative;
    margin-bottom: 1.75rem;
}
.comm-timeline-node:last-child {
    margin-bottom: 0;
}
.comm-timeline-dot {
    position: absolute;
    left: -29px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-grad-1, #0f172a); /* Dynamic Solid base */
    border: 2px solid var(--accent, #10b981);
    box-shadow: 0 0 10px var(--accent-glow, rgba(16, 185, 129, 0.3));
    z-index: 1;
}
.comm-timeline-dot.system-event {
    border-color: var(--text-muted, #64748b);
    box-shadow: none;
}
.comm-timeline-content {
    background: var(--bg-grad-2, rgba(255, 255, 255, 0.01));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.03));
    border-radius: 8px;
    padding: 0.85rem 1.15rem;
}
.comm-timeline-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
}
.comm-timeline-user {
    font-weight: 700;
    color: var(--text-primary, #ffffff);
}
.comm-timeline-time {
    color: var(--text-muted, #64748b);
}
.comm-timeline-msg {
    font-size: 0.9rem;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.5;
    word-break: break-word;
}

/* Premium Glass Reply Area */
.comm-reply-container {
    background: var(--card-bg, rgba(4, 26, 19, 0.2));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.05));
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: auto;
}
.comm-textarea-premium {
    width: 100%;
    min-height: 110px;
    background: var(--bg-grad-2, rgba(15, 23, 42, 0.3));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-primary, #ffffff);
    resize: vertical;
    transition: all 0.2s ease;
}
.comm-textarea-premium:focus {
    outline: none !important;
    border-color: var(--accent, #10b981) !important;
    box-shadow: 0 0 12px var(--accent-glow, rgba(16, 185, 129, 0.25)) !important;
    background: var(--bg-grad-2, rgba(15, 23, 42, 0.5));
}

/* Custom Styled File Upload Button */
.comm-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #cbd5e1);
    background: var(--bg-grad-1, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
}
.comm-upload-label:hover {
    background: var(--bg-grad-2, rgba(255, 255, 255, 0.08));
    border-color: var(--accent, #10b981);
    color: var(--text-primary, #ffffff);
}
.comm-upload-label:focus-within {
    outline: 2px solid var(--accent, #10b981);
}