:root{--bg:#090b12;--panel:#111827;--text:#f4f7fb;--muted:#94a3b8;--accent:#b3132f;--accent2:#ff335c;--green:#22c55e;--red:#ef4444;--border:rgba(255,255,255,.08)}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,rgba(179,19,47,.28),transparent 35%),linear-gradient(135deg,#070910,#101522 55%,#070910);color:var(--text);min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:28px;border-bottom:1px solid var(--border);background:rgba(9,11,18,.75);backdrop-filter:blur(14px)}
.topbar h1{margin:0;font-size:28px}.topbar p{margin:5px 0 0;color:var(--muted)}
.logout,.service-actions a,button{background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;text-decoration:none;border:0;border-radius:12px;padding:11px 16px;font-weight:700;cursor:pointer}
.container{width:min(1100px,calc(100% - 28px));margin:28px auto}
.hero{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:24px;padding:24px;margin-bottom:20px}
.hero h2{margin:0;font-size:24px}.hero p{color:var(--muted);margin-bottom:0}
.service-list{display:grid;gap:14px}
.service-card{display:grid;grid-template-columns:16px 1fr auto;gap:18px;align-items:center;background:rgba(17,24,39,.86);border:1px solid var(--border);border-radius:18px;padding:18px}
.status{width:14px;height:14px;border-radius:999px;box-shadow:0 0 16px currentColor}.online{background:var(--green);color:var(--green)}.offline{background:var(--red);color:var(--red)}
.service-main h3{margin:0 0 4px;font-size:19px}.service-main p{margin:0 0 8px;color:var(--muted)}.service-main span{font-size:12px;background:rgba(255,255,255,.08);padding:4px 9px;border-radius:999px}
.service-actions{text-align:right;display:grid;gap:10px}.service-actions strong{font-size:13px;letter-spacing:.08em}
.login-body{display:grid;place-items:center}.login-box{width:min(420px,calc(100% - 28px));background:rgba(17,24,39,.92);border:1px solid var(--border);border-radius:26px;padding:32px}
.login-box h1{margin:0;font-size:30px}.login-box p{color:var(--muted);margin-bottom:24px}
input{width:100%;padding:14px;margin-bottom:12px;border-radius:12px;border:1px solid var(--border);background:#070b13;color:white;font-size:16px}
button{width:100%;font-size:16px}.error{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.35);color:#fecaca;padding:12px;border-radius:12px;margin-bottom:14px}
@media(max-width:720px){.topbar{padding:20px}.topbar h1{font-size:23px}.service-card{grid-template-columns:14px 1fr}.service-actions{grid-column:2;text-align:left;display:flex;justify-content:space-between;align-items:center}}


.success{
background:rgba(34,197,94,.16);
border:1px solid rgba(34,197,94,.35);
color:#bbf7d0;
padding:12px;
border-radius:12px;
margin-bottom:14px
}