*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#1a1a2e;color:#e0e0e0}
header{background:#16213e;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
h1{font-size:1.4rem;color:#00d4ff}
h3{margin-bottom:.5rem;color:#aaa;font-size:.9rem}
.controls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
select,button,input{padding:.4rem .8rem;border-radius:4px;border:1px solid #333;background:#0f3460;color:#e0e0e0;cursor:pointer;font-size:.85rem}
button:hover{background:#1a5276}
#charts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 2rem}
.chart-box{background:#16213e;border-radius:8px;padding:1rem}
@media(max-width:900px){#charts{grid-template-columns:1fr}}
.user-badge{background:#0f3460;padding:.3rem .7rem;border-radius:4px;font-size:.8rem;color:#00d4ff}
#vm-controls{background:#16213e;padding:.7rem 2rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.status-badge{padding:.3rem .7rem;border-radius:4px;font-size:.8rem;font-weight:bold;text-transform:uppercase}
.status-running{background:#2d6a4f;color:#b7e4c7}
.status-stopped{background:#6a2d2d;color:#e4b7b7}
.status-paused{background:#6a5a2d;color:#e4dab7}
.login-wrap{max-width:340px;margin:15vh auto;background:#16213e;padding:2rem;border-radius:8px;text-align:center}
.login-wrap h1{margin-bottom:1.5rem}
.login-wrap input,.login-wrap button{width:100%;margin-bottom:.8rem;padding:.6rem}