.login-page{min-height:100vh;display:grid;place-items:center;background:var(--gradient-app-bg);position:relative;overflow:hidden}.login-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.login-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6;animation:orbFloat 20s ease-in-out infinite}.login-orb-1{width:400px;height:400px;background:var(--color-primary);top:-100px;left:-100px;animation-delay:0s}.login-orb-2{width:300px;height:300px;background:var(--clr-teal);bottom:-50px;right:-50px;animation-delay:-10s}@keyframes orbFloat{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-20px) scale(1.05)}50%{transform:translate(-20px,30px) scale(.95)}75%{transform:translate(10px,10px) scale(1.02)}}.login-main{position:relative;z-index:1;width:100%;max-width:1040px;display:grid;grid-template-columns:1.08fr .92fr;gap:20px;padding:20px;align-items:center}.login-hero{background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:32px;padding:var(--space-8);min-height:480px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative}.login-hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at top left,rgba(25,135,84,.08),transparent 40%),radial-gradient(circle at bottom right,rgba(15,157,138,.08),transparent 30%);pointer-events:none}.login-hero-content{position:relative;z-index:1}.login-brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}.login-brand-mark{width:48px;height:48px;border-radius:14px;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #1987544d}.login-brand-mark svg{width:28px;height:28px;color:var(--white)}.login-brand-name{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:800;letter-spacing:-.02em;color:var(--slate-900);line-height:1.2}.login-brand-tagline{font-size:var(--text-sm);color:var(--slate-500);font-weight:500}.login-hero-text{font-size:var(--text-lg);line-height:1.75;color:var(--slate-600);margin-bottom:var(--space-6);max-width:400px}.login-features{display:flex;flex-direction:column;gap:var(--space-2)}.login-feature{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-base);color:var(--slate-700)}.login-feature-icon{font-size:var(--text-lg)}.login-card{background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:28px;padding:var(--space-6) var(--space-8);box-shadow:0 24px 70px #0f172a1f}.login-card-header{text-align:center;margin-bottom:var(--space-6)}.login-card-title{font-size:var(--text-xl);font-weight:800;color:var(--slate-900);margin-bottom:var(--space-1)}.login-card-subtitle{font-size:var(--text-base);color:var(--slate-500)}.login-alert{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-md);color:var(--color-red-dark);font-size:var(--text-sm);margin-bottom:var(--space-4)}.login-form{display:flex;flex-direction:column;gap:var(--space-4)}.form-input-wrapper{position:relative;display:flex;align-items:center}.form-input-icon{position:absolute;left:var(--space-3);color:var(--slate-400);pointer-events:none;z-index:1}.form-input-wrapper .form-input{padding-left:44px}.form-input-toggle{position:absolute;right:var(--space-3);background:none;border:none;color:var(--slate-400);cursor:pointer;padding:var(--space-half);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:color var(--tx-fast)}.form-input-toggle:hover{color:var(--slate-600)}.login-submit{margin-top:var(--space-2)}.login-submit .spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-card-footer{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--surface-border);text-align:center}.login-footer-text{font-size:var(--text-sm);color:var(--slate-500)}.login-footer-text strong{color:var(--slate-700)}@media (max-width: 768px){.login-main{grid-template-columns:1fr;max-width:420px}.login-hero{display:none}.login-card{padding:var(--space-5) var(--space-6);border-radius:24px}}.page-dashboard{display:flex;flex-direction:column;gap:var(--space-4)}.dashboard-header{display:flex;align-items:center;justify-content:space-between}.dashboard-header-actions{display:flex;align-items:center;gap:var(--space-2)}.dashboard-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}.stat-card{padding:var(--space-5)}.stat-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.stat-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-trend{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);font-weight:600;color:var(--slate-500);white-space:nowrap}.stat-trend.up{color:var(--color-primary)}.stat-trend.down{color:var(--color-red)}.stat-card-body{display:flex;flex-direction:column;gap:var(--space-half)}.stat-label{font-size:var(--text-sm);font-weight:500;color:var(--slate-500)}.stat-value{font-size:1.75rem;font-weight:800;letter-spacing:-.01em;color:var(--slate-900)}.stat-sub{font-size:var(--text-xs);color:var(--slate-400)}.dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.skeleton-loading{padding:var(--space-5);display:flex;flex-direction:column}.font-mono{font-family:var(--font-mono, ui-monospace, monospace)}@media (max-width: 1100px){.dashboard-grid{grid-template-columns:1fr}}.settings-sidebar{min-width:200px}.settings-content{min-width:0}.settings-nav-item:hover{background:var(--slate-100)}.settings-nav-item.active:hover{background:var(--color-primary-soft)}:root{--color-primary: #198754;--color-primary-dark: #146c43;--color-primary-hover: #157347;--color-primary-light: #ecfdf5;--color-primary-soft: rgba(25, 135, 84, .1);--clr-teal: #0f9d8a;--color-blue: #3b82f6;--color-blue-dark: #2563eb;--color-amber: #f59e0b;--color-amber-dark: #d97706;--color-red: #ef4444;--color-red-dark: #dc2626;--color-purple: #8b5cf6;--color-danger: #d95f5f;--slate-900: #0f172a;--slate-700: #334155;--slate-600: #475569;--slate-500: #64748b;--slate-400: #94a3b8;--slate-300: #cbd5e1;--slate-200: #e2e8f0;--slate-100: #f1f5f9;--white: #ffffff;--sidebar-bg: #0b1523;--sidebar-border: rgba(255, 255, 255, .06);--sidebar-accent: #0f9d8a;--sidebar-accent-dim: rgba(15, 157, 138, .13);--sidebar-accent-glow: rgba(15, 157, 138, .22);--main-bg: #f0f2f5;--topbar-bg: #ffffff;--surface-bg: #ffffff;--surface-border: #dbe5ef;--glass: rgba(255, 255, 255, .92);--glass-border: rgba(255, 255, 255, .5);--font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--text-xs: .68rem;--text-sm: .78rem;--text-base: .88rem;--text-md: 1rem;--text-lg: 1.1rem;--text-xl: 1.25rem;--space-half: 4px;--space-1: 8px;--space-2: 16px;--space-3: 24px;--space-4: 32px;--space-5: 40px;--space-6: 48px;--space-8: 64px;--radius-xs: 6px;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-pill: 999px;--shadow-sm: 0 2px 8px rgba(15, 23, 42, .05);--shadow-md: 0 4px 20px rgba(15, 23, 42, .07);--shadow-lg: 0 8px 32px rgba(15, 23, 42, .1);--shadow-xl: 0 20px 60px rgba(15, 23, 42, .18);--btn-h: 40px;--input-h: 42px;--topbar-h: 68px;--sidebar-width: 252px;--sidebar-collapsed: 68px;--tx: .18s cubic-bezier(.4, 0, .2, 1);--tx-fast: .12s ease;--gradient-primary: linear-gradient(90deg, #198754, #0f9d8a);--gradient-sidebar-logo: linear-gradient(135deg, #198754, #0f9d8a);--gradient-app-bg: radial-gradient(circle at top left, rgba(25, 135, 84, .08), transparent 28%), radial-gradient(circle at bottom right, rgba(15, 157, 138, .08), transparent 24%), #f5faf7}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.5;color:var(--slate-900);background:var(--main-bg);min-height:100vh}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;z-index:50;transition:width var(--tx),transform var(--tx)}.sidebar.collapsed{width:var(--sidebar-collapsed)}.sidebar-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--sidebar-border);display:flex;align-items:center;gap:var(--space-2);min-height:var(--topbar-h)}.sidebar-brand{display:flex;align-items:center;gap:var(--space-2);color:var(--white);text-decoration:none;white-space:nowrap;overflow:hidden}.sidebar-brand-mark{width:36px;height:36px;border-radius:10px;background:var(--gradient-sidebar-logo);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px #0f9d8a47}.sidebar-brand-mark svg{width:20px;height:20px;color:var(--white)}.sidebar-brand-name{font-size:var(--text-sm);font-weight:800;text-transform:uppercase;letter-spacing:.04em;opacity:1;transition:opacity var(--tx)}.sidebar.collapsed .sidebar-brand-name{opacity:0;width:0}.sidebar-nav{flex:1;padding:var(--space-3) var(--space-2);overflow-y:auto}.nav-section{margin-bottom:var(--space-4)}.nav-section-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--slate-500);padding:0 var(--space-3);margin-bottom:var(--space-2);white-space:nowrap;overflow:hidden}.sidebar.collapsed .nav-section-title{opacity:0}.nav-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--slate-400);text-decoration:none;font-size:var(--text-sm);font-weight:600;transition:all var(--tx-fast);white-space:nowrap}.nav-link:hover,.nav-link.active{background:var(--sidebar-accent-dim);color:var(--sidebar-accent)}.nav-link svg{width:20px;height:20px;flex-shrink:0}.nav-link-text{opacity:1;transition:opacity var(--tx),width var(--tx);overflow:hidden}.sidebar.collapsed .nav-link-text{opacity:0;width:0}.sidebar-footer{padding:var(--space-3) var(--space-4);border-top:1px solid var(--sidebar-border)}.main{flex:1;margin-left:var(--sidebar-width);min-height:100vh;background:var(--main-bg);transition:margin-left var(--tx)}.sidebar.collapsed~.main{margin-left:var(--sidebar-collapsed)}.topbar{position:sticky;top:0;height:var(--topbar-h);background:var(--topbar-bg);border-bottom:1px solid var(--surface-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);z-index:40}.topbar-left{display:flex;align-items:center;gap:var(--space-3)}.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:var(--radius-md);color:var(--slate-600);cursor:pointer;transition:all var(--tx-fast)}.sidebar-toggle:hover{background:var(--slate-100);color:var(--slate-900)}.page-title{font-size:var(--text-lg);font-weight:800;letter-spacing:-.01em;color:var(--slate-900)}.topbar-right{display:flex;align-items:center;gap:var(--space-3)}.page-content{padding:var(--space-4) var(--space-6);max-width:1480px}.page-accounts,.page-alerts,.page-cleanup,.page-costs,.page-resources,.page-settings{display:flex;flex-direction:column;gap:var(--space-4)}.page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.page-header-actions{display:flex;align-items:center;gap:var(--space-2)}.ml-auto{margin-left:auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--btn-h);padding:0 var(--space-4);border:none;border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all var(--tx-fast);text-decoration:none;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:var(--white);box-shadow:0 2px 4px #19875433}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:0 4px 12px #1987544d;transform:translateY(-1px)}.btn-secondary{background:var(--slate-100);color:var(--slate-700);border:1px solid var(--slate-200)}.btn-secondary:hover:not(:disabled){background:var(--slate-200);color:var(--slate-900)}.btn-ghost{background:transparent;color:var(--slate-600)}.btn-ghost:hover:not(:disabled){background:var(--slate-100);color:var(--slate-900)}.btn-danger{background:var(--color-red);color:var(--white)}.btn-danger:hover:not(:disabled){background:var(--color-red-dark)}.btn-sm{height:32px;padding:0 var(--space-3);font-size:var(--text-xs)}.btn-lg{height:48px;padding:0 var(--space-6);font-size:var(--text-base)}.btn-icon{width:var(--btn-h);padding:0}.btn-icon.btn-sm{width:32px}.form-group{display:flex;flex-direction:column;gap:var(--space-1)}.form-label{font-size:var(--text-sm);font-weight:600;color:var(--slate-700)}.form-input,.form-select{height:var(--input-h);padding:0 var(--space-3);border:1px solid var(--slate-300);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-sm);color:var(--slate-900);background:var(--white);transition:all var(--tx-fast);width:100%}.form-input::placeholder{color:var(--slate-400)}.form-input:hover,.form-select:hover{border-color:var(--slate-400)}.form-input:focus,.form-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}.form-input:disabled,.form-select:disabled{background:var(--slate-100);color:var(--slate-500);cursor:not-allowed}.form-error{font-size:var(--text-xs);color:var(--color-red)}.form-hint{font-size:var(--text-xs);color:var(--slate-500)}.card{background:var(--surface-bg);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}.card-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--surface-border);display:flex;align-items:center;justify-content:space-between}.card-title{font-size:var(--text-md);font-weight:700;color:var(--slate-900)}.card-content{padding:var(--space-5)}.card-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--surface-border);background:var(--slate-50);display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2)}.table-container{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--surface-border)}.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.table th,.table td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--surface-border)}.table th{background:var(--slate-50);font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--slate-600);white-space:nowrap}.table tbody tr{transition:background var(--tx-fast)}.table tbody tr:hover{background:var(--slate-50)}.table tbody tr:last-child td{border-bottom:none}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-half) var(--space-2);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.badge-success{background:var(--color-primary-light);color:var(--color-primary-dark)}.badge-warning{background:#fff4d6;color:var(--color-amber-dark)}.badge-danger{background:#fef2f2;color:var(--color-red-dark)}.badge-info{background:#eff6ff;color:var(--color-blue-dark)}.badge-neutral{background:var(--slate-100);color:var(--slate-600)}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.connected{background:var(--color-primary)}.status-dot.pending{background:var(--color-amber)}.status-dot.error{background:var(--color-red)}.status-dot.running{background:var(--color-primary)}.status-dot.stopped{background:var(--slate-400)}.status-dot.available{background:var(--color-primary)}.status-dot.unhealthy{background:var(--color-red)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:100;animation:fadeIn .2s ease}.modal{background:var(--surface-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:560px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .25s cubic-bezier(.22,.68,0,1.2)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--surface-border);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:var(--text-lg);font-weight:800;color:var(--slate-900)}.modal-close{width:32px;height:32px;border:none;background:transparent;border-radius:var(--radius-md);color:var(--slate-500);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tx-fast)}.modal-close:hover{background:var(--slate-100);color:var(--slate-900)}.modal-body{padding:var(--space-5);overflow-y:auto}.modal-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--surface-border);background:var(--slate-50);display:flex;justify-content:flex-end;gap:var(--space-2)}.dropdown{position:relative}.dropdown-menu{position:absolute;top:calc(100% + var(--space-1));right:0;min-width:200px;background:var(--surface-bg);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-1);z-index:50;animation:fadeIn .15s ease}.dropdown-menu-left{right:auto;left:0}.dropdown-item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);border:none;background:transparent;border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--slate-700);cursor:pointer;text-align:left;transition:all var(--tx-fast)}.dropdown-item:hover{background:var(--slate-100);color:var(--slate-900)}.dropdown-item.danger{color:var(--color-red)}.dropdown-item.danger:hover{background:#fef2f2}.dropdown-divider{height:1px;background:var(--surface-border);margin:var(--space-1) 0}.tabs{display:flex;border-bottom:1px solid var(--surface-border);gap:var(--space-1);padding:0 var(--space-1)}.tab{padding:var(--space-3) var(--space-4);border:none;background:transparent;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--slate-500);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--tx-fast)}.tab:hover{color:var(--slate-700)}.tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + var(--space-1));left:50%;transform:translate(-50%);padding:var(--space-1) var(--space-2);background:var(--slate-900);color:var(--white);font-size:var(--text-xs);font-weight:500;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;visibility:hidden;transition:all var(--tx-fast);z-index:50}.tooltip:hover:after{opacity:1;visibility:visible}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);text-align:center;color:var(--slate-500)}.empty-state-icon{width:64px;height:64px;color:var(--slate-300);margin-bottom:var(--space-4)}.empty-state-title{font-size:var(--text-lg);font-weight:700;color:var(--slate-700);margin-bottom:var(--space-1)}.empty-state-text{font-size:var(--text-base);max-width:320px}.skeleton{background:linear-gradient(90deg,var(--slate-200) 25%,var(--slate-100) 50%,var(--slate-200) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:var(--radius-pill)}::-webkit-scrollbar-thumb:hover{background:var(--slate-400)}*:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media print{.sidebar,.topbar,.btn,.modal-overlay{display:none!important}.main{margin-left:0}.page-content{padding:0}}