/* ==========================================
           ORIGINAL STYLES (unchanged)
        ========================================== */
        * { box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .glass-panel {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(148, 163, 184, 0.1);
        }
        
        .card-hover { transition: all 0.3s ease; }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #60a5fa 0%, #34d399 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .score-ring { position: relative; width: 80px; height: 80px; }
        .score-ring svg { transform: rotate(-90deg); }
        .score-ring circle { fill: none; stroke-width: 8; }
        .score-ring .bg { stroke: rgba(148, 163, 184, 0.2); }
        .score-ring .progress { stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
        
        .tooltip { position: relative; }
        .tooltip:hover .tooltip-content { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
        .tooltip-content {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            background: rgba(15, 23, 42, 0.95);
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 8px;
            padding: 12px;
            font-size: 12px;
            color: #e2e8f0;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            z-index: 100;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        
        .nav-item { transition: all 0.2s ease; }
        .nav-item:hover, .nav-item.active {
            background: rgba(59, 130, 246, 0.15);
            border-left: 3px solid #3b82f6;
        }
        
        .slider-thumb { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: rgba(148, 163, 184, 0.3); outline: none; }
        .slider-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #3b82f6; cursor: pointer; transition: all 0.2s ease; }
        .slider-thumb::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
        
        .tab-content { display: none; }
        .tab-content.active { display: block; animation: fadeIn 0.3s ease; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .loading-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(15, 23, 42, 0.9);
            display: flex; align-items: center; justify-content: center;
            z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.3s ease;
        }
        .loading-overlay.show { opacity: 1; visibility: visible; }
        
        .spinner {
            width: 50px; height: 50px;
            border: 3px solid rgba(59, 130, 246, 0.3);
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        
        .alert-pulse { animation: pulse 2s infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
        
        .drag-zone { border: 2px dashed rgba(148, 163, 184, 0.3); transition: all 0.3s ease; }
        .drag-zone.dragover { border-color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
        
        .modal {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex; align-items: center; justify-content: center;
            z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease;
        }
        .modal.show { opacity: 1; visibility: visible; }
        .modal-content {
            background: #1e293b; border-radius: 16px;
            max-width: 90vw; max-height: 90vh; overflow: auto;
            transform: scale(0.9); transition: all 0.3s ease;
        }
        .modal.show .modal-content { transform: scale(1); }
        
        .metric-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; }
        .metric-badge.green { background: rgba(16, 185, 129, 0.15); color: #34d399; }
        .metric-badge.amber { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
        .metric-badge.red { background: rgba(244, 63, 94, 0.15); color: #fb7185; }
        
        .sparkline { width: 60px; height: 24px; }
        
        .quadrant-grid {
            position: relative;
            background: linear-gradient(to right, rgba(148, 163, 184, 0.1) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
            background-size: 50% 50%;
        }
        .quadrant-label { position: absolute; font-size: 11px; color: rgba(148, 163, 184, 0.6); font-weight: 500; }
        
        /* Access Control Styles */
        #authOverlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            z-index: 10000; display: flex; align-items: center; justify-content: center;
        }
        .auth-container {
            background: rgba(30, 41, 59, 0.9); backdrop-filter: blur(12px);
            border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 16px;
            padding: 2rem; width: 100%; max-width: 400px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }
        .auth-input {
            width: 100%; background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px;
            padding: 0.75rem 1rem; color: white; font-size: 0.875rem; transition: all 0.2s;
        }
        .auth-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
        .app-hidden { display: none !important; }

        /* ==========================================
           macOS VISUAL LAYER - Added
        ========================================== */

        /* macOS Background: deep space with subtle noise */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: 
                radial-gradient(ellipse 80% 60% at 20% 20%, rgba(59,130,246,0.06) 0%, transparent 60%),
                radial-gradient(ellipse 60% 80% at 80% 80%, rgba(16,185,129,0.04) 0%, transparent 60%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 0;
        }

        /* macOS Window Shadow - the iconic multi-layer shadow */
        .glass-panel {
            box-shadow: 
                0 0 0 0.5px rgba(255,255,255,0.06),
                0 2px 4px rgba(0,0,0,0.25),
                0 8px 24px rgba(0,0,0,0.2),
                0 32px 64px rgba(0,0,0,0.15) !important;
            backdrop-filter: blur(40px) saturate(180%) !important;
            background: rgba(22, 32, 48, 0.72) !important;
        }

        /* macOS Sidebar - Finder-like */
        aside {
            background: rgba(12, 18, 28, 0.85) !important;
            backdrop-filter: blur(40px) saturate(180%) !important;
            border-right: 0.5px solid rgba(255,255,255,0.08) !important;
            box-shadow: 2px 0 24px rgba(0,0,0,0.3) !important;
        }

        /* macOS Sidebar Header - Finder title area */
        .sidebar-header-macos {
            height: 52px;
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
        }

        /* macOS Traffic Light Buttons */
        .macos-traffic-lights {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-shrink: 0;
        }
        .macos-traffic-lights .tl-btn {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            transition: filter 0.15s ease;
            flex-shrink: 0;
        }
        .macos-traffic-lights .tl-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: rgba(0,0,0,0.15);
            opacity: 0;
            transition: opacity 0.1s;
        }
        .macos-traffic-lights .tl-btn:hover::after { opacity: 1; }
        .tl-close  { background: #ff5f57; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.2); }
        .tl-min    { background: #febc2e; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.2); }
        .tl-max    { background: #28c840; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.2); }

        /* macOS Traffic lights on modals */
        .modal-content .modal-header-bar {
            display: flex;
            align-items: center;
            padding: 12px 16px 0 16px;
        }
        .modal-content .p-6.border-b {
            padding-top: 8px;
        }

        /* macOS nav item - Finder sidebar style */
        .nav-item {
            border-radius: 8px !important;
            margin: 1px 8px !important;
            padding: 8px 12px !important;
            border-left: none !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            color: rgba(210, 220, 235, 0.85) !important;
            letter-spacing: -0.01em;
        }
        .nav-item:hover {
            background: rgba(255,255,255,0.08) !important;
            border-left: none !important;
        }
        .nav-item.active {
            background: rgba(59, 130, 246, 0.25) !important;
            border-left: none !important;
            color: #60a5fa !important;
        }
        .nav-item.active i { color: #60a5fa !important; }
        .nav-item i { width: 18px; font-size: 13px; }

        /* macOS Menu Bar */
        header {
            background: rgba(10, 15, 25, 0.88) !important;
            backdrop-filter: blur(40px) saturate(180%) !important;
            border-bottom: 0.5px solid rgba(255,255,255,0.08) !important;
            height: 48px !important;
        }
        header .text-xl { font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.02em; }

        /* macOS Button Styles */
        button {
            -webkit-font-smoothing: antialiased;
            letter-spacing: -0.01em;
        }

        /* macOS pill buttons (toolbar) */
        header button {
            border-radius: 8px !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            padding: 5px 12px !important;
            height: 28px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        }
        header button:hover { filter: brightness(1.15); }
        header button:active { transform: scale(0.97); }

        /* macOS Card hover - spring physics */
        .card-hover {
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
        }
        .card-hover:hover {
            transform: translateY(-6px) scale(1.01) !important;
            box-shadow: 
                0 0 0 0.5px rgba(255,255,255,0.08),
                0 4px 12px rgba(0,0,0,0.3),
                0 16px 40px rgba(0,0,0,0.25),
                0 40px 80px rgba(0,0,0,0.2) !important;
        }

        /* macOS Modal - sheet animation from top */
        .modal { background: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(8px) !important; }
        .modal-content {
            background: rgba(20, 28, 44, 0.95) !important;
            backdrop-filter: blur(60px) saturate(200%) !important;
            border: 0.5px solid rgba(255,255,255,0.12) !important;
            border-radius: 14px !important;
            box-shadow: 
                0 0 0 0.5px rgba(255,255,255,0.06),
                0 8px 32px rgba(0,0,0,0.4),
                0 32px 80px rgba(0,0,0,0.5),
                0 80px 160px rgba(0,0,0,0.4) !important;
        }
        .modal { transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
        .modal-content {
            transform: scale(0.94) translateY(-8px) !important;
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }
        .modal.show .modal-content {
            transform: scale(1) translateY(0) !important;
        }

        /* macOS Tab switching - spring */
        .tab-content.active {
            animation: macosTabIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }
        @keyframes macosTabIn {
            from { opacity: 0; transform: scale(0.98) translateY(6px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }

        /* macOS Loading overlay */
        .loading-overlay {
            background: rgba(10, 15, 25, 0.85) !important;
            backdrop-filter: blur(20px) !important;
        }

        /* macOS Spinner - system spinner style */
        .spinner {
            width: 28px !important;
            height: 28px !important;
            border: 2.5px solid rgba(255,255,255,0.15) !important;
            border-top-color: rgba(255,255,255,0.85) !important;
            border-radius: 50% !important;
            animation: spin 0.7s linear infinite !important;
        }

        /* macOS Scrollbars - thin, auto-hide */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.25);
            border-radius: 100px;
            transition: background 0.2s;
        }
        ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.45); }

        /* macOS Input focus ring */
        input:focus, select:focus, textarea:focus {
            outline: none !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35) !important;
            border-color: rgba(59, 130, 246, 0.6) !important;
        }

        /* macOS Auth overlay */
        #authOverlay {
            background: 
                radial-gradient(ellipse 100% 80% at 50% 0%, rgba(30,58,138,0.25) 0%, transparent 60%),
                linear-gradient(160deg, #0a0f1a 0%, #0f172a 40%, #111827 100%) !important;
        }
        .auth-container {
            background: rgba(20, 28, 44, 0.92) !important;
            backdrop-filter: blur(60px) saturate(180%) !important;
            border: 0.5px solid rgba(255,255,255,0.12) !important;
            border-radius: 18px !important;
            box-shadow: 
                0 0 0 0.5px rgba(255,255,255,0.06),
                0 16px 48px rgba(0,0,0,0.5),
                0 48px 120px rgba(0,0,0,0.4) !important;
            animation: macosWindowDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }
        @keyframes macosWindowDrop {
            from { opacity: 0; transform: scale(0.88) translateY(-20px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }
        .auth-input {
            background: rgba(8, 12, 20, 0.7) !important;
            border: 0.5px solid rgba(255,255,255,0.12) !important;
            border-radius: 10px !important;
            font-size: 14px !important;
        }

        /* macOS Sidebar brand */
        .sidebar-brand {
            padding: 0 16px 12px;
            border-bottom: 0.5px solid rgba(255,255,255,0.06);
        }
        .sidebar-brand h1 { font-size: 12px !important; letter-spacing: 0.04em; color: rgba(255,255,255,0.75) !important; }
        .sidebar-brand p { font-size: 11px !important; color: rgba(148,163,184,0.6) !important; }

        /* macOS Section labels in sidebar */
        .sidebar-section-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: rgba(148, 163, 184, 0.45);
            padding: 12px 20px 4px;
        }

        /* macOS Portfolio widget in sidebar */
        .glass-panel.rounded-lg {
            background: rgba(255,255,255,0.05) !important;
            border: 0.5px solid rgba(255,255,255,0.08) !important;
            border-radius: 10px !important;
        }

        /* macOS Score rings */
        .score-ring .progress { transition: stroke-dashoffset 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }

        /* macOS table row hover */
        tbody tr:hover { background: rgba(255,255,255,0.04) !important; transition: background 0.15s ease; }

        /* macOS Drag zone */
        .drag-zone {
            border-radius: 14px !important;
            border-color: rgba(148, 163, 184, 0.2) !important;
            background: rgba(255,255,255,0.02) !important;
        }
        .drag-zone.dragover {
            border-color: rgba(59, 130, 246, 0.5) !important;
            background: rgba(59, 130, 246, 0.06) !important;
        }

        /* macOS Notification Toast */
        #macos-toast-container {
            position: fixed;
            top: 60px;
            right: 16px;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }
        .macos-toast {
            min-width: 320px;
            max-width: 380px;
            background: rgba(28, 36, 54, 0.92);
            backdrop-filter: blur(40px) saturate(180%);
            border: 0.5px solid rgba(255,255,255,0.12);
            border-radius: 14px;
            padding: 14px 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.2);
            transform: translateX(120%);
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: all;
        }
        .macos-toast.show {
            transform: translateX(0);
            opacity: 1;
        }
        .macos-toast.hide {
            transform: translateX(120%);
            opacity: 0;
            transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .macos-toast .toast-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 16px;
        }
        .macos-toast .toast-title { font-size: 13px; font-weight: 600; color: white; margin-bottom: 2px; }
        .macos-toast .toast-msg { font-size: 12px; color: rgba(148,163,184,0.9); line-height: 1.4; }

        /* macOS Dock ripple effect on click */
        @keyframes macosClickPop {
            0%   { transform: scale(1); }
            40%  { transform: scale(0.93); }
            70%  { transform: scale(1.04); }
            100% { transform: scale(1); }
        }
        .macos-click-pop { animation: macosClickPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

        /* macOS window controls icon symbols (appear on group hover) */
        .macos-traffic-lights:hover .tl-close::before  { content: '×'; }
        .macos-traffic-lights:hover .tl-min::before    { content: '−'; }
        .macos-traffic-lights:hover .tl-max::before    { content: '+'; }
        .tl-btn::before {
            position: absolute; inset: 0; display: flex; align-items: center;
            justify-content: center; font-size: 8px; font-weight: 900;
            color: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.1s;
        }
        .macos-traffic-lights:hover .tl-btn::before { opacity: 1; }

        /* macOS Genie effect placeholder on modal close */
        @keyframes macosSheetDrop {
            from { opacity: 0; transform: scale(0.92) translateY(-24px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }

        /* macOS progress bars */
        .bg-gradient-to-r {
            border-radius: 100px !important;
        }

        /* macOS Focus mode: dim non-focused */
        .tab-content:not(.active) { display: none; }

        /* macOS sidebar nav */
        nav { padding: 8px 0 !important; }
        nav .nav-item { transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
        nav .nav-item:active { transform: scale(0.97) !important; }

        /* macOS page content padding */
        .flex-1.overflow-auto.p-6 { padding: 20px !important; }

        /* macOS round corners everywhere */
        .glass-panel { border-radius: 14px !important; }

        /* macOS Select dropdowns */
        select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            background-size: 14px;
            -webkit-appearance: none;
            appearance: none;
            border-radius: 8px !important;
        }

        /* macOS range slider thumb */
        .slider-thumb::-webkit-slider-thumb {
            width: 20px !important;
            height: 20px !important;
            background: white !important;
            box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
        }

        /* macOS Spotlight-style search input */
        #searchCounterparties {
            border-radius: 10px !important;
            background: rgba(255,255,255,0.06) !important;
            border-color: rgba(255,255,255,0.1) !important;
            font-size: 13px !important;
        }
        #searchCounterparties::placeholder { color: rgba(148,163,184,0.5); }

        /* macOS checkbox */
        input[type="checkbox"] {
            accent-color: #3b82f6;
            width: 14px;
            height: 14px;
            border-radius: 4px;
        }

        /* macOS badge */
        .metric-badge {
            border-radius: 6px !important;
            font-size: 10px !important;
            letter-spacing: 0.01em;
        }

        /* macOS separator lines */
        .border-b { border-color: rgba(255,255,255,0.07) !important; }
        .border-t { border-color: rgba(255,255,255,0.07) !important; }
        .divide-y > * + * { border-color: rgba(255,255,255,0.05) !important; }

        /* macOS status bar glow on sidebar bottom */
        aside .p-4.border-t { 
            border-color: rgba(255,255,255,0.06) !important;
        }

        /* macOS window boot fade-in */
        #mainAppContainer {
            animation: macosAppLaunch 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        @keyframes macosAppLaunch {
            from { opacity: 0; transform: scale(0.98); }
            to   { opacity: 1; transform: scale(1); }
        }

        /* macOS button active states */
        button:active:not(:disabled) {
            transform: scale(0.97) !important;
            transition: transform 0.1s ease !important;
        }

        /* macOS condensed table text */
        table { font-size: 13px !important; }
        th { font-size: 11px !important; letter-spacing: 0.03em; }

        /* macOS card - rounded rect widgets */
        .bg-slate-800\/50 {
            border-radius: 10px !important;
            background: rgba(255,255,255,0.04) !important;
        }

        /* macOS pill labels */
        .bg-blue-500\/20, .bg-emerald-500\/20, .bg-rose-500\/20, .bg-amber-500\/20, .bg-slate-700 {
            border-radius: 6px !important;
        }

        /* PDF Import specific styles */
        .pdf-metric-item {
            background: rgba(59, 130, 246, 0.1);
            border: 0.5px solid rgba(59, 130, 246, 0.3);
            border-radius: 8px;
            padding: 8px 12px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .pdf-metric-label {
            font-size: 12px;
            color: rgba(148, 163, 184, 0.9);
        }
        .pdf-metric-value {
            font-size: 13px;
            font-weight: 600;
            color: #60a5fa;
        }
    

*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:-apple-system, BlinkMacSystemFont, SF Pro Display, SF Pro Text, Inter, sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.right-0{right:0px}.z-50{z-index:50}.col-span-2{grid-column:span 2 / span 2}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:0.25rem}.mb-1\.5{margin-bottom:0.375rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:0.25rem}.ml-2{margin-left:0.5rem}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mt-0\.5{margin-top:0.125rem}.mt-1{margin-top:0.25rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-5{margin-top:1.25rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-1\.5{height:0.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-3{height:0.75rem}.h-48{height:12rem}.h-64{height:16rem}.h-8{height:2rem}.h-80{height:20rem}.h-9{height:2.25rem}.h-screen{height:100vh}.h-6{height:1.5rem}.max-h-64{max-height:16rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-3{width:0.75rem}.w-5{width:1.25rem}.w-64{width:16rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.w-32{width:8rem}.w-52{width:13rem}.w-6{width:1.5rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-5 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-slate-700 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity:1;border-color:rgb(51 65 85 / var(--tw-divide-opacity, 1))}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-l-2{border-left-width:2px}.border-amber-500\/30{border-color:rgb(245 158 11 / 0.3)}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250 / var(--tw-border-opacity, 1))}.border-blue-500\/20{border-color:rgb(59 130 246 / 0.2)}.border-blue-500\/50{border-color:rgb(59 130 246 / 0.5)}.border-rose-500\/20{border-color:rgb(244 63 94 / 0.2)}.border-rose-500\/30{border-color:rgb(244 63 94 / 0.3)}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105 / var(--tw-border-opacity, 1))}.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-700\/50{border-color:rgb(51 65 85 / 0.5)}.border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-amber-500{--tw-border-opacity:1;border-color:rgb(245 158 11 / var(--tw-border-opacity, 1))}.border-rose-500{--tw-border-opacity:1;border-color:rgb(244 63 94 / var(--tw-border-opacity, 1))}.border-rose-400{--tw-border-opacity:1;border-color:rgb(251 113 133 / var(--tw-border-opacity, 1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11 / var(--tw-bg-opacity, 1))}.bg-amber-500\/10{background-color:rgb(245 158 11 / 0.1)}.bg-amber-500\/20{background-color:rgb(245 158 11 / 0.2)}.bg-blue-500\/10{background-color:rgb(59 130 246 / 0.1)}.bg-blue-500\/20{background-color:rgb(59 130 246 / 0.2)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-blue-600\/20{background-color:rgb(37 99 235 / 0.2)}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))}.bg-emerald-500\/20{background-color:rgb(16 185 129 / 0.2)}.bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(5 150 105 / var(--tw-bg-opacity, 1))}.bg-emerald-600\/20{background-color:rgb(5 150 105 / 0.2)}.bg-purple-500\/20{background-color:rgb(168 85 247 / 0.2)}.bg-purple-600\/20{background-color:rgb(147 51 234 / 0.2)}.bg-rose-500{--tw-bg-opacity:1;background-color:rgb(244 63 94 / var(--tw-bg-opacity, 1))}.bg-rose-500\/10{background-color:rgb(244 63 94 / 0.1)}.bg-rose-500\/20{background-color:rgb(244 63 94 / 0.2)}.bg-rose-600{--tw-bg-opacity:1;background-color:rgb(225 29 72 / var(--tw-bg-opacity, 1))}.bg-rose-600\/20{background-color:rgb(225 29 72 / 0.2)}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.bg-slate-700\/50{background-color:rgb(51 65 85 / 0.5)}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-800\/30{background-color:rgb(30 41 59 / 0.3)}.bg-slate-800\/50{background-color:rgb(30 41 59 / 0.5)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-emerald-500{--tw-gradient-from:#10b981 var(--tw-gradient-from-position);--tw-gradient-to:rgb(16 185 129 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-amber-500{--tw-gradient-to:#f59e0b var(--tw-gradient-to-position)}.to-emerald-500{--tw-gradient-to:#10b981 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pt-2{padding-top:0.5rem}.pt-3{padding-top:0.75rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-serif{font-family:Playfair Display, serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity:1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-rose-400{--tw-text-opacity:1;color:rgb(251 113 133 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-blue-600\/20{--tw-shadow-color:rgb(37 99 235 / 0.2);--tw-shadow:var(--tw-shadow-colored)}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:bg-amber-500\/30:hover{background-color:rgb(245 158 11 / 0.3)}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-600\/30:hover{background-color:rgb(37 99 235 / 0.3)}.hover\:bg-emerald-500:hover{--tw-bg-opacity:1;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))}.hover\:bg-emerald-600\/30:hover{background-color:rgb(5 150 105 / 0.3)}.hover\:bg-purple-600\/30:hover{background-color:rgb(147 51 234 / 0.3)}.hover\:bg-rose-500:hover{--tw-bg-opacity:1;background-color:rgb(244 63 94 / var(--tw-bg-opacity, 1))}.hover\:bg-rose-600\/30:hover{background-color:rgb(225 29 72 / 0.3)}.hover\:bg-slate-600:hover{--tw-bg-opacity:1;background-color:rgb(71 85 105 / var(--tw-bg-opacity, 1))}.hover\:bg-slate-700:hover{--tw-bg-opacity:1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.hover\:bg-slate-800:hover{--tw-bg-opacity:1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\:bg-slate-800\/50:hover{background-color:rgb(30 41 59 / 0.5)}.hover\:text-slate-300:hover{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.hover\:text-rose-300:hover{--tw-text-opacity:1;color:rgb(253 164 175 / var(--tw-text-opacity, 1))}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}


/* ===== PORTAL-THEMED LOGIN ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
.portal-login-bg-blob-1 {
  position: fixed; top: -200px; left: -200px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,209,0,0.08) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.portal-login-bg-blob-2 {
  position: fixed; bottom: -200px; right: -200px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,209,0,0.05) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.portal-login-grid {
  position: fixed; inset: 0;
  background-image: linear-gradient(rgba(255,209,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,209,0,0.03) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none; z-index: 0;
}
.portal-login-card {
  position: relative; z-index: 10;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px; padding: 52px 48px; width: 100%; max-width: 440px;
  display: flex; flex-direction: column; align-items: center;
  font-family: 'Inter', sans-serif;
}
.portal-login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #FFD100, transparent);
  border-radius: 24px 24px 0 0;
}
.portal-login-icon {
  width: 64px; height: 64px; background: rgba(255,209,0,0.12);
  border: 1px solid rgba(255,209,0,0.25); border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 24px;
}
.portal-login-sep {
  width: 80px; height: 2px;
  background: linear-gradient(90deg, transparent, #FFD100, transparent);
  margin: 0 auto 16px;
}
.portal-login-title {
  font-size: 26px; font-weight: 700; color: #fff;
  text-align: center; margin-bottom: 6px; letter-spacing: -0.3px;
}
.portal-login-title span { color: #FFD100; }
.portal-login-subtitle {
  font-size: 13px; color: rgba(255,255,255,0.4);
  text-align: center; margin-bottom: 36px; letter-spacing: 0.3px;
}
.portal-login-label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 8px;
}
.portal-login-input-wrap { position: relative; margin-bottom: 20px; }
.portal-login-input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: rgba(255,255,255,0.3);
}
.portal-login-input {
  width: 100%; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  padding: 13px 16px 13px 42px; font-size: 14px; color: #fff;
  outline: none; transition: all 0.2s ease;
  font-family: 'Inter', sans-serif; box-sizing: border-box;
}
.portal-login-input:focus {
  border-color: rgba(255,209,0,0.5); background: rgba(255,209,0,0.04);
  box-shadow: 0 0 0 3px rgba(255,209,0,0.08);
}
.portal-login-input::placeholder { color: rgba(255,255,255,0.2); }
.portal-login-btn {
  width: 100%; padding: 14px; background: #FFD100; color: #000;
  border: none; border-radius: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.3px;
  margin-top: 8px; font-family: 'Inter', sans-serif;
}
.portal-login-btn:hover {
  background: #ffe033; transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,209,0,0.25);
}
.portal-login-error {
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);
  color: #f87171; font-size: 13px; padding: 10px 14px; border-radius: 10px;
  margin-bottom: 16px; text-align: center; display: none;
}
.portal-login-footer {
  margin-top: 28px; font-size: 11px;
  color: rgba(255,255,255,0.18); text-align: center; letter-spacing: 0.3px;
}
/* ===== END PORTAL LOGIN ===== */




      /* ── Body & Background ──────────────────────────────────────────── */
      body {
        background: #0a0a0a !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      }
      body::before {
        background:
          radial-gradient(ellipse 80% 60% at 20% 20%, rgba(255,209,0,0.04) 0%, transparent 60%),
          radial-gradient(ellipse 60% 80% at 80% 80%, rgba(255,209,0,0.02) 0%, transparent 60%) !important;
      }

      /* ── Sidebar ────────────────────────────────────────────────────── */
      aside {
        background: #0d0d0d !important;
        backdrop-filter: none !important;
        border-right: 1px solid rgba(255,255,255,0.07) !important;
        box-shadow: none !important;
      }
      .sidebar-brand h1 { color: rgba(255,255,255,0.9) !important; }
      .sidebar-section-label { color: rgba(255,255,255,0.3) !important; }

      /* Sidebar logo icon: blue/emerald → gold */
      .w-9.h-9.rounded-xl.bg-gradient-to-br {
        background: rgba(255,209,0,0.12) !important;
        border: 1px solid rgba(255,209,0,0.25) !important;
        box-shadow: none !important;
      }
      .w-9.h-9.rounded-xl.bg-gradient-to-br i {
        color: #FFD100 !important;
      }

      /* Nav items */
      .nav-item {
        color: rgba(255,255,255,0.55) !important;
        border-left: none !important;
      }
      .nav-item:hover {
        background: rgba(255,255,255,0.06) !important;
        color: rgba(255,255,255,0.85) !important;
        border-left: none !important;
      }
      .nav-item.active {
        background: rgba(255,209,0,0.12) !important;
        color: #FFD100 !important;
        border-left: 3px solid #FFD100 !important;
      }
      .nav-item.active i { color: #FFD100 !important; }
      .nav-item i { color: rgba(255,255,255,0.4) !important; }

      /* Portfolio risk bar in sidebar footer */
      .glass-panel.rounded-lg {
        background: rgba(255,255,255,0.04) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
      }
      .bg-gradient-to-r.from-emerald-500.to-amber-500 {
        background: linear-gradient(to right, #FFD100, #ff9900) !important;
      }

      /* ── Header / Topbar ────────────────────────────────────────────── */
      header {
        background: rgba(10,10,10,0.97) !important;
        backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        box-shadow: none !important;
      }
      header .text-xl, header h1 {
        color: #fff !important;
        letter-spacing: -0.02em !important;
      }
      /* Primary action buttons in header */
      header button.bg-blue-600,
      header button.bg-blue-600\/20 {
        background: rgba(255,209,0,0.12) !important;
        color: #FFD100 !important;
        border: 1px solid rgba(255,209,0,0.25) !important;
      }
      header button.bg-blue-600:hover { background: rgba(255,209,0,0.2) !important; }

      /* ── Glass Panels / Cards ───────────────────────────────────────── */
      .glass-panel {
        background: rgba(255,255,255,0.04) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        box-shadow:
          0 2px 4px rgba(0,0,0,0.3),
          0 8px 24px rgba(0,0,0,0.2) !important;
        backdrop-filter: blur(20px) !important;
      }
      .bg-slate-800\/50,
      .bg-slate-800\/30,
      .bg-slate-800 {
        background: rgba(255,255,255,0.04) !important;
      }
      .bg-slate-700\/50,
      .bg-slate-700 {
        background: rgba(255,255,255,0.07) !important;
      }
      .border-slate-700,
      .border-slate-800,
      .divide-slate-700 > :not([hidden]) ~ :not([hidden]) {
        border-color: rgba(255,255,255,0.08) !important;
      }

      /* ── Blue → Gold accent replacements ───────────────────────────── */
      /* Text colors */
      .text-blue-400,
      .text-blue-500 { color: #FFD100 !important; }
      .text-blue-300 { color: #ffe566 !important; }

      /* Background colors */
      .bg-blue-500\/10,
      .bg-blue-500\/20,
      .bg-blue-600\/20 { background: rgba(255,209,0,0.08) !important; }
      .bg-blue-600    { background: rgba(255,209,0,0.15) !important; }
      .bg-blue-500    { background: rgba(255,209,0,0.15) !important; }

      /* Border colors */
      .border-blue-500\/20 { border-color: rgba(255,209,0,0.2) !important; }
      .border-blue-500\/50 { border-color: rgba(255,209,0,0.4) !important; }
      .border-blue-400     { border-color: rgba(255,209,0,0.5) !important; }

      /* Hover states */
      .hover\:bg-blue-500:hover,
      .hover\:bg-blue-600\/30:hover { background: rgba(255,209,0,0.2) !important; }
      .hover\:text-blue-300:hover   { color: #ffe566 !important; }

      /* Gradient stops */
      .from-blue-500 {
        --tw-gradient-from: #FFD100 !important;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
      }
      .to-emerald-500 {
        --tw-gradient-to: #ff9900 !important;
      }

      /* ── Buttons ────────────────────────────────────────────────────── */
      button.bg-blue-600,
      button.bg-blue-600.hover\:bg-blue-500 {
        background: #FFD100 !important;
        color: #000 !important;
        border: none !important;
      }
      button.bg-blue-600:hover { background: #ffe033 !important; }

      /* Inline-styled "Add User" type buttons */
      button[style*="background:rgba(96,165,250"] {
        background: rgba(255,209,0,0.12) !important;
        border-color: rgba(255,209,0,0.3) !important;
        color: #FFD100 !important;
      }

      /* ── Score Rings ────────────────────────────────────────────────── */
      .score-ring .progress[stroke="#3b82f6"],
      .score-ring .progress[stroke="#10b981"],
      .score-ring .progress[stroke="#f59e0b"],
      .score-ring .progress[stroke="#ef4444"],
      .score-ring .progress { stroke: #FFD100 !important; }

      /* Inline SVG score ring colours applied via JS — override with filter */
      .score-ring svg circle.progress {
        stroke: #FFD100 !important;
      }

      /* ── Input focus rings ──────────────────────────────────────────── */
      input:focus, select:focus, textarea:focus {
        border-color: rgba(255,209,0,0.5) !important;
        box-shadow: 0 0 0 3px rgba(255,209,0,0.1) !important;
        outline: none !important;
      }
      .focus\:border-blue-500:focus { border-color: rgba(255,209,0,0.5) !important; }

      /* ── Auth overlay ───────────────────────────────────────────────── */
      #authOverlay {
        background: #0a0a0a !important;
      }
      .auth-input:focus {
        border-color: rgba(255,209,0,0.5) !important;
        box-shadow: 0 0 0 3px rgba(255,209,0,0.08) !important;
      }

      /* ── Modal ──────────────────────────────────────────────────────── */
      .modal-content {
        background: rgba(13,13,13,0.98) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important;
      }
      .modal { background: rgba(0,0,0,0.7) !important; }

      /* Modal Admin Profile section */
      .bg-blue-500\/10.border.border-blue-500\/20 {
        background: rgba(255,209,0,0.05) !important;
        border-color: rgba(255,209,0,0.15) !important;
      }

      /* ── Loading overlay & spinner ──────────────────────────────────── */
      .loading-overlay { background: rgba(10,10,10,0.9) !important; }
      .spinner {
        border-color: rgba(255,255,255,0.1) !important;
        border-top-color: #FFD100 !important;
      }

      /* ── Toast notifications ────────────────────────────────────────── */
      .macos-toast {
        background: rgba(18,18,18,0.96) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
      }

      /* ── Scrollbars — match cashflow style ──────────────────────────── */
      ::-webkit-scrollbar { width: 6px; height: 6px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.12);
        border-radius: 100px;
      }
      ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

      /* ── Metric badges ──────────────────────────────────────────────── */
      .metric-badge.green { background: rgba(34,197,94,0.12) !important; color: #22c55e !important; }
      .metric-badge.amber { background: rgba(251,191,36,0.12) !important; color: #fbbf24 !important; }
      .metric-badge.red   { background: rgba(239,68,68,0.12) !important;  color: #ef4444 !important; }

      /* ── Drag zone ──────────────────────────────────────────────────── */
      .drag-zone { border-color: rgba(255,255,255,0.12) !important; }
      .drag-zone.dragover {
        border-color: rgba(255,209,0,0.4) !important;
        background: rgba(255,209,0,0.04) !important;
      }

      /* ── Tables ─────────────────────────────────────────────────────── */
      thead { background: rgba(255,255,255,0.04) !important; }
      tbody tr:hover { background: rgba(255,255,255,0.03) !important; }
      th { color: rgba(255,255,255,0.4) !important; }

      /* ── PDF metric items ───────────────────────────────────────────── */
      .pdf-metric-item {
        background: rgba(255,209,0,0.06) !important;
        border-color: rgba(255,209,0,0.2) !important;
      }
      .pdf-metric-value { color: #FFD100 !important; }

      /* ── Usage analytics stat cards ─────────────────────────────────── */
      #statTotalLogins  { color: #FFD100 !important; }
      #usageStatsCards > div:first-child,
      #usageStatsCards > div:nth-child(4),
      #usageStatsCards > div:nth-child(5) {
        background: rgba(255,209,0,0.06) !important;
        border-color: rgba(255,209,0,0.2) !important;
      }

      /* ── Gradient text (title) ──────────────────────────────────────── */
      .gradient-text {
        background: linear-gradient(135deg, #FFD100 0%, #ff9900 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
      }

      /* ── Checkbox accent ────────────────────────────────────────────── */
      input[type="checkbox"] { accent-color: #FFD100 !important; }

      /* ── App launch animation ───────────────────────────────────────── */
      #mainAppContainer {
        animation: macosAppLaunch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
      }

    


#cpTogKimi:checked ~ span:first-of-type { background: rgba(245,158,11,0.5) !important; }
#cpTogKimi:checked ~ span:first-of-type + span { transform: translateX(18px) !important; }
#cpTogGeminiPro:checked ~ span:first-of-type { background: rgba(96,165,250,0.5) !important; }
#cpTogGeminiPro:checked ~ span:first-of-type + span { transform: translateX(18px) !important; }



#tpai-btn{position:fixed;bottom:28px;right:28px;z-index:99999;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#c9a84c,#f0c040);border:none;cursor:pointer;font-size:24px;box-shadow:0 4px 20px rgba(201,168,76,0.6);display:flex;align-items:center;justify-content:center}
#tpai-btn:hover{transform:scale(1.1)}
#tpai-panel{position:fixed;bottom:96px;right:28px;z-index:99998;width:360px;height:500px;background:#1a1a1a;border:1px solid #c9a84c55;border-radius:16px;display:none;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,0.8)}
#tpai-head{padding:12px 14px;border-bottom:1px solid #2a2a2a;display:flex;align-items:center;gap:10px;flex-shrink:0}
#tpai-head h4{margin:0;font-size:14px;font-weight:600;color:#f0c040;flex:1}
#tpai-head small{font-size:11px;color:#22c55e;display:block}
#tpai-close{background:none;border:none;color:#888;cursor:pointer;font-size:18px}
#tpai-close:hover{color:#fff}
#tpai-qbtns{padding:8px 10px;display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid #2a2a2a;flex-shrink:0}
.tpai-q{padding:4px 9px;border-radius:20px;border:1px solid #c9a84c44;background:#222;color:#c9a84c;font-size:11px;cursor:pointer}
.tpai-q:hover{background:#c9a84c22;border-color:#c9a84c}
#tpai-msgs{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:8px}
.tpai-m{display:flex;max-width:100%}
.tpai-m.u{flex-direction:row-reverse}
.tpai-b{padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.5;max-width:85%;word-break:break-word}
.tpai-m.b .tpai-b{background:#252525;color:#e0e0e0}
.tpai-m.u .tpai-b{background:#c9a84c22;border:1px solid #c9a84c44;color:#f0f0f0}
.tpai-dot{display:flex;gap:4px;padding:8px 12px;align-items:center}
.tpai-dot span{width:7px;height:7px;border-radius:50%;background:#c9a84c;animation:tpbounce 1s infinite}
.tpai-dot span:nth-child(2){animation-delay:.2s}
.tpai-dot span:nth-child(3){animation-delay:.4s}
@keyframes tpbounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
#tpai-foot{padding:8px 10px;border-top:1px solid #2a2a2a;display:flex;gap:6px;flex-shrink:0}
#tpai-inp{flex:1;background:#222;border:1px solid #333;border-radius:8px;color:#fff;padding:7px 10px;font-size:13px;resize:none;font-family:inherit;outline:none}
#tpai-inp:focus{border-color:#c9a84c55}
#tpai-send{background:linear-gradient(135deg,#c9a84c,#f0c040);border:none;border-radius:8px;color:#111;cursor:pointer;width:34px;font-size:16px;font-weight:bold;flex-shrink:0}
#tpai-send:disabled{opacity:0.4;cursor:default}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Counterparty Dashboard v20260322
   ═══════════════════════════════════════════════════════════════ */

/* Mobile hamburger button */
.cp-mob-btn{
  display:none;position:fixed;top:14px;left:14px;z-index:500;
  width:38px;height:38px;border-radius:10px;
  background:rgba(30,41,59,0.95);border:1px solid rgba(255,255,255,0.15);
  cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;padding:9px;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.cp-mob-btn span{display:block;width:18px;height:2px;background:rgba(255,255,255,0.8);border-radius:2px}

/* Sidebar overlay */
.cp-sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.65);z-index:399;backdrop-filter:blur(2px);
}
.cp-sidebar-overlay.open{display:block}

/* ── Tablet ──────────────────────────────────────────────────── */
@media(max-width:1024px){
  .grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ── Mobile: ≤768px ──────────────────────────────────────────── */
@media(max-width:768px){
  /* Show hamburger */
  .cp-mob-btn{display:flex}

  /* Sidebar becomes slide-over */
  #mainAppContainer aside{
    position:fixed!important;left:0;top:0;bottom:0;
    z-index:400;height:100vh;
    transform:translateX(-100%);
    transition:transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
    box-shadow:4px 0 24px rgba(0,0,0,0.5);
    min-width:220px!important;width:220px!important;
  }
  #mainAppContainer aside.open{transform:translateX(0)}

  /* Main content fills full width */
  #mainAppContainer > div.flex-1{margin-left:0!important;width:100%!important}

  /* Grid overrides — 2 cols on tablet, 1 col on mobile */
  .grid-cols-4,.grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* AI panel fits screen */
  #tpai-panel{width:calc(100vw - 32px)!important;right:16px!important;bottom:90px!important}
}

@media(max-width:480px){
  .grid-cols-4,.grid-cols-3,.grid-cols-2{grid-template-columns:repeat(1,minmax(0,1fr))!important}
  .cp-mob-btn{top:12px;left:12px}
}