@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";
:root{--ink:#192638;--muted:#8692a3;--line:#e8ecf1;--paper:#fff;--bg:#f7f8fa;--purple:#685ce7;--navy:#142139}*{box-sizing:border-box}html,body{min-height:100%;color:var(--ink);background:var(--bg);margin:0;font-family:DM Sans,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}.app-shell{min-height:100vh;display:flex}.sidebar{border-right:1px solid var(--line);background:#fff;flex-direction:column;flex:none;width:250px;height:100vh;padding:28px 16px;display:flex;position:sticky;top:0}.logo{letter-spacing:-.8px;align-items:center;gap:10px;padding:0 13px;font:800 19px Manrope,sans-serif;display:flex}.logo strong{color:var(--purple);margin-left:3px}.logo-mark{background:var(--purple);color:#fff;border-radius:10px;place-items:center;width:34px;height:34px;display:grid}.sidebar-caption{letter-spacing:1.5px;color:#a4afbc;margin:54px 13px 13px;font-size:10px;font-weight:800}.sidebar nav{gap:5px;display:grid}.sidebar nav button{color:#647287;text-align:left;background:0 0;border:0;border-radius:10px;align-items:center;gap:13px;padding:13px 14px;font-size:13px;font-weight:700;display:flex}.sidebar nav button.selected{color:var(--purple);background:#f0efff}.sidebar-bottom{border-top:1px solid var(--line);color:#8996a5;gap:12px;margin-top:auto;padding:22px 12px 4px;font-size:12px;line-height:1.55;display:flex}.sidebar-bottom svg{color:#44b697;flex:none}.main-content{flex:1;min-width:0}.topbar{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;height:76px;padding:0 38px;display:flex}.breadcrumb{color:#9aa5b2;gap:12px;font-size:13px;display:flex}.breadcrumb strong{color:#3d4d61}.top-actions{align-items:center;gap:14px;display:flex}.refresh,.logout{border:1px solid var(--line);color:#718096;background:#fff;border-radius:9px;justify-content:center;align-items:center;gap:5px;height:36px;display:flex}.refresh{width:36px}.logout{padding:0 13px;font-size:12px;font-weight:700}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.content{max-width:1530px;margin:auto;padding:42px 38px 38px}.page-intro{justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;display:flex}.eyebrow{color:var(--purple);letter-spacing:2px;margin:0 0 13px;font-size:10px;font-weight:800}.page-intro h1{letter-spacing:-1.6px;margin:0;font:800 clamp(28px,3vw,39px)/1.2 Manrope,sans-serif}.page-intro h1 em{color:var(--purple);font-style:normal}.page-intro p:last-child{color:#8995a4;margin:14px 0 0;font-size:14px}.live-badge{color:#328d6d;white-space:nowrap;background:#f3fbf7;border:1px solid #d9efe7;border-radius:30px;align-items:center;gap:8px;padding:10px 13px;font-size:11px;font-weight:700;display:flex}.pulse,.host-state i,.status i,.native-state i{background:#34ba88;border-radius:50%;width:7px;height:7px;display:inline-block}.pulse{box-shadow:0 0 0 4px #d9f5e9}.overview-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:34px;display:grid}.overview-card{border:1px solid var(--line);background:#fff;border-radius:16px;flex-direction:column;min-height:190px;padding:22px;display:flex}.overview-icon{border-radius:11px;place-items:center;width:36px;height:36px;margin-bottom:17px;display:grid}.overview-icon.purple{color:#6c62e9;background:#f0efff}.overview-icon.blue{color:#5e9bec;background:#e9f3ff}.overview-icon.green{color:#3ebf89;background:#e9f8f1}.overview-icon.amber{color:#edab5a;background:#fff4e8}.overview-card>span{color:#79879a;font-size:12px;font-weight:600}.overview-card strong{letter-spacing:-1px;margin:6px 0 0;font:800 30px Manrope,sans-serif}.overview-card strong small{color:#a7b0bc;font-size:16px}.overview-card strong.memory-number{font-size:25px}.overview-card p{color:#a2acb8;margin:auto 0 0;padding-top:10px;font-size:10px}.server-tabs{border-bottom:1px solid var(--line);gap:4px;margin-bottom:26px;display:flex}.server-tabs button{color:#8d9bab;background:0 0;border:0;border-bottom:2px solid #0000;padding:12px 18px;font-size:12px;font-weight:700}.server-tabs button.active{color:var(--purple);border-color:var(--purple)}.host-panel{margin-bottom:54px}.host-heading{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.host-label{letter-spacing:-.4px;align-items:center;gap:9px;font:800 19px Manrope,sans-serif;display:flex}.host-label>svg{color:var(--purple)}.host-heading p{color:#a0aab6;margin:5px 0 0 28px;font-size:11px}.host-count{color:#98a3b1;font-size:11px;font-weight:700}.host-state{letter-spacing:0;color:#429e7a;background:#e8f8f0;border-radius:20px;align-items:center;gap:6px;margin-left:8px;padding:5px 9px;font:700 10px DM Sans,sans-serif;display:flex}.host-state.offline{color:#b17940;background:#fff2e3}.host-state.offline i{background:#d99a4a}.host-summary{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px;display:grid}.gauge{border:1px solid var(--line);background:#fff;border-radius:13px;padding:17px 19px}.gauge-top{justify-content:space-between;align-items:center;font-size:12px;font-weight:700;display:flex}.gauge-top span{color:#7b899a;align-items:center;gap:9px;display:flex}.gauge-top svg{color:#7e77e9}.gauge-top strong{font:800 18px Manrope,sans-serif}.track{background:#eef0f5;border-radius:8px;height:6px;margin:15px 0 9px;overflow:hidden}.fill{background:linear-gradient(90deg,#a49af4,#665de7);border-radius:8px;height:100%}.gauge p{color:#9aa5b2;margin:0;font-size:11px}.section-row{justify-content:space-between;align-items:center;margin:0 0 16px;display:flex}.section-row h2,.native-services h2{margin:0;font:800 16px Manrope,sans-serif}.section-row span{color:#a3adba;font-size:11px}.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.project-card{border:1px solid var(--line);background:#fff;border-radius:14px;flex-direction:column;min-height:272px;padding:19px;display:flex}.project-head{justify-content:space-between;align-items:flex-start;display:flex}.project-icon{width:37px;height:37px;color:var(--purple);background:#f0efff;border-radius:10px;place-items:center;display:grid}.status{border-radius:20px;align-items:center;gap:6px;padding:5px 9px;font-size:10px;font-weight:700;display:flex}.status.good{color:#3a9e70;background:#e9f8f0}.status.warn{color:#b57833;background:#fff2e5}.status.warn i{background:#e8a247}.status.off{color:#929cad;background:#f1f2f5}.status.off i,.service-dot.off{background:#aeb7c3}.project-category{color:#938af0;letter-spacing:.7px;text-transform:uppercase;margin:17px 0 4px;font-size:10px;font-weight:800}.project-card h3{letter-spacing:-.25px;margin:0;font:800 15px Manrope,sans-serif}.project-description{color:#97a3b2;min-height:32px;margin:7px 0 14px;font-size:11px;line-height:1.5}.project-meta{color:#708096;border-bottom:1px solid #f0f2f5;flex-wrap:wrap;align-items:center;gap:12px;padding-bottom:12px;font-size:10px;font-weight:700;display:flex}.project-meta span{align-items:center;gap:4px;display:flex}.project-services{margin:10px 0}.service-line{color:#788699;align-items:center;gap:6px;margin:5px 0;font-size:10px;display:flex}.service-line span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.service-line span:last-child{color:#9ba6b4;margin-left:auto}.service-dot{background:#49ba8a;border-radius:50%;flex:none;width:6px;height:6px}.project-tech{color:#9da8b5;border-top:1px solid #f0f2f5;margin-top:auto;padding-top:10px;font-size:10px}.native-services{margin-top:29px}.native-services h2{margin-bottom:15px}.native-line{border:1px solid var(--line);background:#fff;border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:14px 18px;display:flex}.native-line>div{align-items:center;gap:13px;display:flex}.native-line svg{color:var(--purple)}.native-line strong{font-size:12px}.native-line small{color:#a7b0bc;margin-top:3px;font-size:10px;display:block}.native-state{color:#42a47a;align-items:center;gap:6px;font-size:10px;font-weight:700;display:flex}.empty{text-align:center;color:#9ca8b7;background:#fff;border:1px dashed #d9dfea;border-radius:15px;justify-items:center;gap:9px;padding:45px;display:grid}.empty strong{color:#647287;font-size:13px}.empty p{margin:0;font-size:11px}footer{color:#a6b0bd;border-top:1px solid var(--line);align-items:center;gap:8px;padding:23px 0 0;font-size:11px;display:flex}.native-state.inactive{color:#a6aeba}.native-state.inactive i{background:#a6aeba}.login-wrap{background:radial-gradient(circle at 10% 15%,#eceaff,#0000 30%),radial-gradient(circle at 90% 85%,#edf7ff,#0000 25%),#f7f8fa;place-items:center;min-height:100vh;padding:20px;display:grid}.login-card{border:1px solid var(--line);background:#fff;border-radius:20px;width:min(100%,420px);padding:40px;box-shadow:0 20px 55px #26335d12}.brand-icon{width:48px;height:48px;color:var(--purple);background:#f0efff;border-radius:14px;place-items:center;margin-bottom:24px;display:grid}.login-card h1{letter-spacing:-.9px;margin:0;font:800 25px Manrope,sans-serif}.muted{color:#8e9bab;margin:8px 0 30px;font-size:13px;line-height:1.6}.login-form{gap:10px;display:grid}.login-form label{font-size:12px;font-weight:800}.input-wrap{color:#a1adbb;border:1px solid #dce2eb;border-radius:9px;align-items:center;gap:9px;height:44px;padding:0 12px;display:flex}.input-wrap:focus-within{border-color:var(--purple)}.input-wrap input{border:0;outline:0;flex:1;min-width:0;font-size:13px}.login-form button{background:var(--purple);color:#fff;border:0;border-radius:9px;justify-content:center;align-items:center;gap:8px;height:45px;margin-top:8px;font-size:12px;font-weight:800;display:flex}.form-message{color:#6058c9;background:#f1f0ff;border-radius:8px;padding:10px;font-size:12px}.login-note{color:#a5b0bd;text-align:center;margin:24px 0 0;font-size:11px;line-height:1.5}@media (max-width:1100px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:760px){.sidebar{display:none}.topbar{height:60px;padding:0 18px}.content{padding:25px 18px}.page-intro{display:block}.live-badge{margin-top:20px;display:inline-flex}.host-summary,.project-grid{grid-template-columns:1fr}.host-label{flex-wrap:wrap}.overview-grid{gap:9px}.overview-card{min-height:154px;padding:15px}.overview-card strong{font-size:25px}.overview-card strong.memory-number{font-size:19px}.overview-icon{margin-bottom:9px}.section-row{align-items:flex-start;gap:10px}.section-row span{text-align:right}.server-tabs button{padding:12px 10px}.host-heading{align-items:flex-start}.host-count{white-space:nowrap}.login-card{padding:28px}}