@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--primary:#6366f1;--primary-dim:#4f46e5;--primary-glow:#6366f126;--accent:#10b981;--accent-glow:#10b98126;--purple:#8b5cf6;--amber:#f59e0b;--danger:#ef4444;--danger-glow:#ef444426;--success:#10b981;--success-glow:#10b98126;--warning:#f59e0b;--bg-base:#080e1e;--bg-surface:#0d1424;--bg-card:#111827;--bg-card-hover:#162033;--bg-elevated:#1a2340;--bg-input:#0d1933;--bg-surface-adaptive-opacity:#080e1ed9;--border:#1e2d4a;--border-subtle:#162033;--border-bright:#2a3f5f;--text-primary:#f0f4ff;--text-secondary:#94a3b8;--text-muted:#4a5a7a;--text-accent:#818cf8;--sidebar-width:240px;--topbar-height:64px;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--shadow-sm:0 1px 3px #0006, 0 1px 2px #0000004d;--shadow-md:0 10px 25px #0f172a08;--shadow-lg:0 20px 40px #0f172a0d;--shadow-glow-blue:0 0 24px #6366f133;--shadow-glow-teal:0 0 24px #10b98133;--nav-item-active-bg:#6366f126;--nav-item-active-text:#818cf8;--transition:all .18s ease;--transition-slow:all .35s ease}.light{--bg-base:#f8fafc;--bg-surface:#fff;--bg-card:#fff;--bg-card-hover:#f1f5f9;--bg-elevated:#f8fafc;--bg-input:#f8fafc;--bg-surface-adaptive-opacity:#ffffffd9;--border:#f1f5f9;--border-subtle:#f8fafc;--border-bright:#cbd5e1;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--text-accent:#6366f1;--shadow-sm:0 1px 2px #0f172a0d;--shadow-md:0 4px 12px #0f172a08;--shadow-lg:0 12px 24px #0f172a0d;--nav-item-active-bg:#f1f5f9;--nav-item-active-text:#0f172a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,textarea,select{font-family:inherit}img{max-width:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3a4f6f}h1{letter-spacing:-.02em;font-size:2.5rem;font-weight:800;line-height:1.1}h2{letter-spacing:-.015em;font-size:1.875rem;font-weight:700;line-height:1.2}h3{font-size:1.375rem;font-weight:600;line-height:1.3}h4{font-size:1.125rem;font-weight:600}h5{font-size:.9375rem;font-weight:600}p{color:var(--text-secondary);line-height:1.7}.mono{font-family:JetBrains Mono,monospace}.text-sm{font-size:.8125rem}.text-xs{font-size:.75rem}.text-lg{font-size:1.0625rem}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-accent{color:var(--text-accent)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.text-primary-color{color:var(--primary)}.btn{border-radius:var(--radius-md);transition:var(--transition);white-space:nowrap;border:1px solid #0000;outline:none;align-items:center;gap:8px;padding:9px 18px;font-size:.875rem;font-weight:600;display:inline-flex}.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 0 0 0 var(--primary-glow)}.btn-primary:hover{background:var(--primary-dim);box-shadow:var(--shadow-glow-blue);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-ghost{color:var(--text-secondary);border-color:var(--border);background:0 0}.btn-ghost:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border-bright)}.btn-danger{color:var(--danger);background:#d80e5326;border-color:#d80e534d}.btn-danger:hover{box-shadow:var(--shadow-glow-teal);background:#d80e5340}.btn-success{color:var(--success);background:#10b98126;border-color:#10b9814d}.btn-success:hover{background:#10b98140}.btn-sm{border-radius:var(--radius-sm);padding:6px 12px;font-size:.8125rem}.btn-lg{border-radius:var(--radius-lg);padding:12px 28px;font-size:.9375rem}.btn-xl{border-radius:var(--radius-lg);padding:16px 36px;font-size:1rem}.btn-icon{border-radius:var(--radius-md);justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:inline-flex}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition);padding:20px}.card:hover{border-color:var(--border-bright)}.card-glass{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-lg);background:#0d1424b3;border:1px solid #1e2d4acc}.card-glow-blue{border-color:#0669fd40;box-shadow:inset 0 0 30px #0669fd0d}.card-glow-teal{border-color:#07938b40;box-shadow:inset 0 0 30px #07938b0d}.badge{letter-spacing:.01em;border-radius:100px;align-items:center;gap:5px;padding:3px 9px;font-size:.75rem;font-weight:600;display:inline-flex}.badge-success{color:var(--success);background:#10b98126;border:1px solid #10b98140}.badge-danger{color:var(--danger);background:#d80e5326;border:1px solid #d80e5340}.badge-warning{color:var(--warning);background:#f59e0b26;border:1px solid #f59e0b40}.badge-info{color:var(--primary);background:#0669fd26;border:1px solid #0669fd40}.badge-purple{color:var(--purple);background:#8b5cf626;border:1px solid #8b5cf640}.badge-neutral{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border)}.status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-dot.healthy{background:var(--success);box-shadow:0 0 6px var(--success)}.status-dot.warning{background:var(--warning);box-shadow:0 0 6px var(--warning)}.status-dot.critical{background:var(--danger);box-shadow:0 0 6px var(--danger);animation:1.5s infinite pulse-dot}.status-dot.offline{background:var(--text-muted)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.toggle-wrapper{align-items:center;gap:10px;display:flex}.toggle{flex-shrink:0;width:44px;height:24px;position:relative}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle-slider{background:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;transition:var(--transition);border-radius:100px;position:absolute;inset:0}.toggle-slider:before{content:"";background:var(--text-muted);width:18px;height:18px;transition:var(--transition);border-radius:50%;position:absolute;top:50%;left:2px;transform:translateY(-50%);box-shadow:0 1px 3px #0006}.toggle input:checked+.toggle-slider{border-color:var(--primary);background:#0669fd33}.toggle input:checked+.toggle-slider:before{background:var(--primary);box-shadow:0 0 8px var(--primary-glow);transform:translate(20px,-50%)}.input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text-primary);transition:var(--transition);outline:none;padding:10px 14px;font-size:.875rem}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.input-group{flex-direction:column;gap:6px;display:flex}.input-label{color:var(--text-secondary);font-size:.8125rem;font-weight:500}.table-wrapper{overflow-x:auto}table{border-collapse:collapse;width:100%}th{text-align:left;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);padding:10px 16px;font-size:.75rem;font-weight:600}td{color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);padding:13px 16px;font-size:.8125rem}tr:last-child td{border-bottom:none}tr:hover td{background:var(--bg-card-hover);color:var(--text-primary)}.progress-bar{background:var(--bg-elevated);border-radius:100px;height:6px;overflow:hidden}.progress-fill{border-radius:100px;height:100%;transition:width .5s}.progress-fill.blue{background:var(--primary)}.progress-fill.teal{background:var(--accent)}.progress-fill.green{background:var(--success)}.progress-fill.red{background:var(--danger)}.progress-fill.amber{background:var(--amber)}.kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition);flex-direction:column;gap:12px;padding:22px;display:flex}.kpi-card:hover{border-color:var(--border-bright);box-shadow:var(--shadow-md);transform:translateY(-2px)}.kpi-header{justify-content:space-between;align-items:center;display:flex}.kpi-icon{border-radius:var(--radius-md);justify-content:center;align-items:center;width:40px;height:40px;display:flex}.kpi-value{letter-spacing:-.02em;color:var(--text-primary);font-size:2rem;font-weight:800;line-height:1}.kpi-label{color:var(--text-muted);font-size:.8125rem;font-weight:500}.kpi-change{align-items:center;gap:4px;font-size:.75rem;font-weight:600;display:inline-flex}.kpi-change.up{color:var(--success)}.kpi-change.down{color:var(--danger)}.node-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;display:grid}.node-cell{aspect-ratio:1;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:1px solid #0000;justify-content:center;align-items:center;font-size:.65rem;font-weight:600;display:flex;position:relative}.node-cell.running{color:var(--success);background:#10b9811f;border-color:#10b98140}.node-cell.running:hover{border-color:var(--success);background:#10b98138;transform:scale(1.08)}.node-cell.critical{color:var(--danger);background:#d80e5326;border-color:#d80e5366;animation:1.5s ease-in-out infinite node-pulse}.node-cell.pending{color:var(--warning);background:#f59e0b1a;border-color:#f59e0b4d}.node-cell.draining{color:var(--primary);background:#0669fd1a;border-color:#0669fd4d}.node-cell.stopped{background:var(--bg-elevated);border-color:var(--border);color:var(--text-muted)}@keyframes node-pulse{0%,to{box-shadow:0 0 #d80e5366}50%{box-shadow:0 0 0 4px #d80e5300}}.skeleton{background:linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card-hover) 50%, var(--bg-elevated) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.divider{background:var(--border);height:1px;margin:16px 0}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.grid-2{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.w-full{width:100%}.mt-auto{margin-top:auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px var(--primary-glow)}50%{box-shadow:0 0 40px var(--primary-glow), 0 0 60px #0669fd1a}}.animate-fade-in{animation:.35s both fadeIn}.animate-slide-in{animation:.3s both slideIn}.animate-scale-in{animation:.25s both scaleIn}.animate-float{animation:4s ease-in-out infinite float}.animate-glow{animation:3s ease-in-out infinite glow-pulse}.tooltip-wrapper{display:inline-flex;position:relative}.tooltip-content{background:var(--bg-elevated);border:1px solid var(--border-bright);color:var(--text-primary);border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;opacity:0;z-index:999;padding:6px 10px;font-size:.75rem;transition:opacity .15s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-wrapper:hover .tooltip-content{opacity:1}.gradient-text{background:linear-gradient(135deg,#60a5fa 0%,#07938b 50%,#818cf8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text-blue{background:linear-gradient(135deg,#60a5fa 0%,#0669fd 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glass{-webkit-backdrop-filter:blur(16px);background:#0d142499;border:1px solid #1e2d4a99}@media (max-width:1024px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}h1{font-size:1.875rem}h2{font-size:1.5rem}}