:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-card:#1e293bb3;--bg-card-hover:#1e293be6;--bg-elevated:#33415580;--border-color:#94a3b81a;--border-glow:#06b6d44d;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-cyan:#06b6d4;--accent-cyan-dim:#06b6d426;--accent-blue:#3b82f6;--accent-purple:#8b5cf6;--accent-green:#10b981;--accent-green-dim:#10b98126;--accent-yellow:#f59e0b;--accent-yellow-dim:#f59e0b26;--accent-red:#ef4444;--accent-red-dim:#ef444426;--accent-orange:#f97316;--gradient-cyan:linear-gradient(135deg, #06b6d4, #3b82f6);--gradient-green:linear-gradient(135deg, #10b981, #06b6d4);--gradient-purple:linear-gradient(135deg, #8b5cf6, #ec4899);--gradient-orange:linear-gradient(135deg, #f97316, #ef4444);--gap-xs:4px;--gap-sm:8px;--gap-md:16px;--gap-lg:24px;--gap-xl:32px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--shadow-card:0 4px 24px #0000004d;--shadow-glow-cyan:0 0 20px #06b6d426;--shadow-glow-green:0 0 20px #10b98126;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);height:100vh;overflow:hidden}#root{height:100vh;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.card{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--gap-lg);box-shadow:var(--shadow-card);transition:all .3s cubic-bezier(.4,0,.2,1)}.card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-card), var(--shadow-glow-cyan)}.card-header{margin-bottom:var(--gap-md);justify-content:space-between;align-items:center;display:flex}.card-title{align-items:center;gap:var(--gap-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;font-weight:600;display:flex}.card-title svg{width:16px;height:16px;color:var(--accent-cyan)}.metric-value{font-family:var(--font-mono);color:var(--text-primary);font-size:2rem;font-weight:700;line-height:1}.metric-value.small{font-size:1.4rem}.metric-unit{color:var(--text-secondary);margin-left:4px;font-size:.85rem;font-weight:400}.metric-label{color:var(--text-muted);margin-top:var(--gap-xs);font-size:.75rem}.badge{border-radius:var(--radius-full);font-size:.7rem;font-weight:600;font-family:var(--font-mono);align-items:center;gap:4px;padding:2px 8px;display:inline-flex}.badge-success{background:var(--accent-green-dim);color:var(--accent-green)}.badge-warning{background:var(--accent-yellow-dim);color:var(--accent-yellow)}.badge-danger{background:var(--accent-red-dim);color:var(--accent-red)}.badge-info{background:var(--accent-cyan-dim);color:var(--accent-cyan)}.status-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.status-dot.live{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green);animation:2s infinite pulse}.status-dot.offline{background:var(--accent-red);box-shadow:0 0 8px var(--accent-red)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.gauge-container{width:120px;height:120px;margin:0 auto;position:relative}.gauge-svg{transform:rotate(-90deg)}.gauge-bg{fill:none;stroke:var(--bg-elevated);stroke-width:8px}.gauge-fill{fill:none;stroke-width:8px;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}.gauge-text{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.gauge-value{font-family:var(--font-mono);color:var(--text-primary);font-size:1.5rem;font-weight:700}.gauge-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.65rem}.progress-bar{background:var(--bg-elevated);border-radius:var(--radius-full);width:100%;height:6px;overflow:hidden}.progress-fill{border-radius:var(--radius-full);height:100%;transition:width .8s cubic-bezier(.4,0,.2,1)}.dashboard-grid{gap:var(--gap-md);padding:var(--gap-md);display:grid}.stat-cards{gap:var(--gap-md);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.charts-grid,.panels-grid{gap:var(--gap-md);grid-template-columns:1fr 1fr;display:grid}@media (width<=1024px){.charts-grid,.panels-grid{grid-template-columns:1fr}}@media (width<=640px){.stat-cards{grid-template-columns:1fr 1fr}.dashboard-grid{padding:var(--gap-sm)}}.data-table{border-collapse:collapse;width:100%}.data-table th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;padding:var(--gap-sm) var(--gap-md);border-bottom:1px solid var(--border-color);font-size:.7rem;font-weight:600}.data-table td{padding:var(--gap-sm) var(--gap-md);vertical-align:middle;border-bottom:1px solid #94a3b80d;font-size:.8rem}.data-table tr{transition:background .2s}.data-table tbody tr:hover{background:#06b6d40d}.method-badge{font-family:var(--font-mono);letter-spacing:.02em;border-radius:4px;padding:2px 6px;font-size:.65rem;font-weight:700}.method-GET{color:#10b981;background:#10b98126}.method-POST{color:#3b82f6;background:#3b82f626}.method-PUT{color:#f59e0b;background:#f59e0b26}.method-DELETE{color:#ef4444;background:#ef444426}.method-PATCH{color:#8b5cf6;background:#8b5cf626}.status-2xx{color:var(--accent-green)}.status-3xx{color:var(--accent-cyan)}.status-4xx{color:var(--accent-yellow)}.status-5xx{color:var(--accent-red)}.btn{align-items:center;gap:var(--gap-sm);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;padding:8px 16px;font-size:.8rem;font-weight:500;transition:all .2s;display:inline-flex}.btn:hover{background:var(--bg-card-hover);border-color:var(--accent-cyan);color:var(--text-primary)}.btn-primary{background:var(--accent-cyan-dim);border-color:var(--accent-cyan);color:var(--accent-cyan)}.btn-primary:hover{background:#06b6d44d}.input{background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);outline:none;padding:8px 12px;font-size:.8rem;transition:border-color .2s}.input:focus{border-color:var(--accent-cyan)}.input::placeholder{color:var(--text-muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.fade-in{animation:.5s cubic-bezier(.4,0,.2,1) forwards fadeIn}.navbar{padding:6px var(--gap-md);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);z-index:100;background:#0f172ae6;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.navbar-brand{align-items:center;gap:var(--gap-sm);display:flex}.navbar-logo{border-radius:var(--radius-sm);width:28px;height:28px}.navbar-title{background:var(--gradient-cyan);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:.95rem;font-weight:700}.navbar-status{align-items:center;gap:var(--gap-sm);color:var(--text-secondary);font-size:.75rem;display:flex}.navbar-uptime{font-family:var(--font-mono);color:var(--text-muted);font-size:.65rem}.auth-screen{min-height:100vh;padding:var(--gap-xl);justify-content:center;align-items:center;display:flex}.auth-card{text-align:center;width:100%;max-width:400px}.auth-card .auth-icon{border-radius:var(--radius-lg);width:80px;height:80px;margin:0 auto var(--gap-lg)}.auth-card h1{margin-bottom:var(--gap-sm);background:var(--gradient-cyan);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700}.auth-card p{color:var(--text-muted);margin-bottom:var(--gap-lg);font-size:.85rem}.auth-input-group{gap:var(--gap-sm);display:flex}.auth-input-group .input{flex:1}.auth-error{color:var(--accent-red);margin-top:var(--gap-sm);font-size:.8rem}.overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;background:#0009;justify-content:flex-end;display:flex;position:fixed;inset:0}.slide-panel{background:var(--bg-primary);border-left:1px solid var(--border-color);flex-direction:column;width:85%;max-width:900px;animation:.3s cubic-bezier(.4,0,.2,1) slideIn;display:flex;overflow:hidden}.panel-header{padding:var(--gap-lg);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;display:flex}.panel-header h2{font-size:1.1rem;font-weight:700}.panel-body{padding:var(--gap-lg);flex:1;overflow-y:auto}.panel-close{background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;transition:all .2s;display:flex}.panel-close:hover{border-color:var(--accent-red);color:var(--accent-red)}.filter-row{gap:var(--gap-sm);margin-bottom:var(--gap-sm);display:flex}.filters-bar{gap:var(--gap-sm);margin-bottom:var(--gap-lg);flex-wrap:wrap;display:flex}.filter-group{align-items:center;gap:var(--gap-xs);display:flex}.filter-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}.filter-chip{border-radius:var(--radius-full);cursor:pointer;border:1px solid var(--border-color);color:var(--text-secondary);background:0 0;padding:4px 10px;font-size:.7rem;font-weight:600;transition:all .2s}.filter-chip:hover,.filter-chip.active{border-color:var(--accent-cyan);color:var(--accent-cyan);background:var(--accent-cyan-dim)}.skeleton{background:linear-gradient(90deg, var(--bg-elevated) 25%, #334155cc 50%, var(--bg-elevated) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite shimmer}.counter-animate{transition:all .3s ease-out}.dashboard-container{background:var(--bg-primary);flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.dashboard-main-content{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.compact-stats-bar{gap:var(--gap-md);padding:var(--gap-md);border-bottom:1px solid var(--border-color);background:#0f172a66;flex-shrink:0;grid-template-columns:repeat(6,1fr);display:grid}.compact-card{background:var(--bg-card);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--gap-sm) var(--gap-md);box-shadow:var(--shadow-card);flex-direction:column;justify-content:center;height:72px;transition:all .3s;display:flex}.compact-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-card), var(--shadow-glow-cyan)}.compact-card-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.compact-card-title{color:var(--text-secondary);text-transform:uppercase;align-items:center;gap:6px;font-size:.75rem;font-weight:600;display:flex}.compact-card-title svg{color:var(--accent-cyan)}.compact-card-value{font-family:var(--font-mono);color:var(--text-primary);font-size:1.15rem;font-weight:700}.compact-progress-bar{background:var(--bg-elevated);border-radius:var(--radius-full);width:100%;height:4px;margin-bottom:3px;overflow:hidden}.compact-card-detail{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.65rem;display:block;overflow:hidden}.split-dashboard-layout{gap:var(--gap-md);padding:0 var(--gap-md) var(--gap-md) var(--gap-md);min-height:0;margin-top:var(--gap-md);flex:1;grid-template-columns:1fr 1.2fr;display:grid;overflow:hidden}.nav-tabs{gap:var(--gap-xs);background:var(--bg-elevated);border-radius:var(--radius-sm);border:1px solid var(--border-color);padding:4px;display:flex}.nav-tab-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;gap:6px;padding:6px 12px;font-size:.8rem;font-weight:600;transition:all .2s;display:flex}.nav-tab-btn:hover{color:var(--text-primary)}.nav-tab-btn.active{background:var(--bg-secondary);color:var(--accent-cyan);box-shadow:0 2px 8px #0003}.sidebar-tabbed-card{flex-direction:column;height:100%;display:flex;overflow:hidden;padding:var(--gap-md)!important}.sidebar-tab-header{border-bottom:1px solid var(--border-color);padding-bottom:var(--gap-sm);margin-bottom:var(--gap-sm);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.sidebar-tabs{gap:var(--gap-xs);display:flex}.sidebar-tab-btn{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:.75rem;font-weight:700;transition:all .2s}.sidebar-tab-btn:hover{color:var(--text-secondary)}.sidebar-tab-btn.active{color:var(--accent-cyan);background:var(--accent-cyan-dim)}.sidebar-tab-content{flex:1;min-height:0;overflow-y:auto}.right-requests-card{flex-direction:column;height:100%;display:flex;overflow:hidden;padding:var(--gap-md)!important}.right-requests-card .card-header{margin-bottom:var(--gap-sm);flex-shrink:0}.right-requests-container{flex:1;min-height:0;overflow-y:auto}.analytics-tab-layout{gap:var(--gap-md);padding:var(--gap-md);flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.analytics-tab-layout .stat-cards{gap:var(--gap-md);flex-shrink:0;grid-template-columns:repeat(3,1fr);display:grid}.analytics-charts-grid{gap:var(--gap-md);flex:1;grid-template-columns:repeat(3,1fr);min-height:0;display:grid}@media (width<=1024px){.split-dashboard-layout{grid-template-columns:1fr;overflow-y:auto}.compact-stats-bar{grid-template-columns:repeat(3,1fr)}.analytics-tab-layout{overflow-y:auto}.analytics-tab-layout .stat-cards{grid-template-columns:repeat(3,1fr)}.analytics-charts-grid{flex:none;grid-template-columns:1fr;grid-auto-rows:220px;height:auto;min-height:auto}}@media (width<=768px){.dashboard-container{width:100vw!important;height:100vh!important;overflow:hidden!important}.dashboard-main-content{flex-direction:column!important;flex:1!important;min-height:0!important;display:flex!important;overflow:hidden!important}.split-dashboard-layout{gap:var(--gap-sm)!important;padding:var(--gap-sm)!important;flex-direction:column!important;flex:1!important;min-height:0!important;margin-top:0!important;display:flex!important;overflow:hidden!important}.left-sidebar-card,.right-requests-card{flex:1!important;height:auto!important;min-height:0!important}.compact-stats-bar{grid-template-columns:repeat(3,1fr)!important;gap:6px!important;padding:6px!important}.compact-card{height:48px!important;padding:4px 8px!important}.compact-card-title{font-size:.65rem!important}.compact-card-value{font-size:.95rem!important}.compact-progress-bar{height:2px!important;margin-bottom:1px!important}.compact-card-detail{font-size:.55rem!important}.analytics-tab-layout{min-height:0!important;padding:var(--gap-sm)!important;gap:var(--gap-sm)!important;flex-direction:column!important;flex:1!important;display:flex!important;overflow:hidden!important}.analytics-tab-layout .stat-cards{flex-shrink:0!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;display:grid!important}.stat-card{padding:6px var(--gap-xs)!important;gap:2px!important}.stat-card .card-header{margin-bottom:2px!important}.stat-card .card-title{font-size:.65rem!important}.stat-card .badge{padding:0 4px!important;font-size:.55rem!important}.stat-card .metric-value{font-size:.8rem!important}.stat-card .metric-label{font-size:.55rem!important}.analytics-charts-grid{flex:1!important;grid-template-rows:repeat(3,1fr)!important;grid-template-columns:1fr!important;gap:6px!important;min-height:0!important;display:grid!important}.analytics-charts-grid .card{padding:6px var(--gap-sm)!important}.analytics-charts-grid .card-header{margin-bottom:2px!important}.analytics-charts-grid .card-title{font-size:.7rem!important}.panel-body,.right-requests-container,.sidebar-tab-content{overflow-x:auto!important}}@media (width<=640px){.navbar-brand>div:last-child,.navbar-status .navbar-uptime,.navbar-status .badge{display:none!important}.navbar{padding:6px var(--gap-sm)!important}.navbar-status{gap:var(--gap-sm)!important}.slide-panel{border-left:none!important;width:100%!important}.filter-row{flex-direction:column!important}}@media (width<=480px){.navbar-status .navbar-uptime{display:none!important}}.dim-mode{--bg-primary:#000;--bg-secondary:#0a0a0c;--bg-card:#0d0d11;--bg-card-hover:#121217;--bg-elevated:#16161c;--border-color:#1a1a24;--border-glow:#d9770640;--text-primary:#a1a1aa;--text-secondary:#71717a;--text-muted:#52525b;--accent-cyan:#d97706;--accent-cyan-dim:#d977061a;--accent-blue:#b45309;--accent-purple:#a21caf;--accent-green:#15803d;--accent-green-dim:#15803d1a;--accent-yellow:#a16207;--accent-yellow-dim:#a162071a;--accent-red:#991b1b;--accent-red-dim:#991b1b1a;--accent-orange:#c2410c;--gradient-cyan:linear-gradient(135deg, #d97706, #b45309);--gradient-green:linear-gradient(135deg, #15803d, #a16207);--gradient-purple:linear-gradient(135deg, #a21caf, #991b1b);--gradient-orange:linear-gradient(135deg, #c2410c, #991b1b);--shadow-card:none;--shadow-glow-cyan:none;--shadow-glow-green:none}.dim-mode body{background-color:#000!important}.dim-mode .chart-tooltip{background-color:#050505!important;border-color:#222!important}.dim-mode .card,.dim-mode .navbar,.dim-mode .sidebar,.dim-mode table,.dim-mode th,.dim-mode td{border-color:#1a1a24!important}.dim-mode input,.dim-mode select,.dim-mode textarea{color:#a1a1aa!important;background-color:#0a0a0c!important;border-color:#1a1a24!important}