:root{font-family:system-ui;color:#e8eef3;background:#0d1720}
body{margin:0}
.site-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem 1.5rem;padding:1rem 2rem;background:#142632}
.brand-group{display:flex;align-items:baseline;flex-wrap:wrap;gap:.45rem 1rem}
.brand{color:#e8eef3;font-size:1.05rem;font-weight:700;text-decoration:none}
a.brand:hover{text-decoration:underline}
.mode-label{color:#aab7c1;font-size:.9rem}
.global-nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.4rem}
.nav-button{display:inline-block;padding:.52rem .75rem;border:1px solid #3c6176;border-radius:6px;color:#d9efff;text-decoration:none}
.nav-button:hover{background:#203a4a}
.current-user{padding:.45rem .55rem;color:#aee7cb;font-weight:600}
.logout-form{display:inline;margin:0}
.logout-button{padding:.52rem .75rem;margin:0;background:#bd3f45;font-size:.95rem}
main{padding:2rem;max-width:1200px;margin:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.card{background:#172a37;border:1px solid #294557;border-radius:10px;padding:1rem}
.narrow{max-width:420px;margin:4rem auto}
label{display:block;margin:1rem 0}
input,select{display:block;width:100%;padding:.65rem;box-sizing:border-box;background:#f7fafc}
button{padding:.6rem .9rem;margin:.2rem;border:0;border-radius:6px;background:#24a36a;color:white;cursor:pointer}
.danger{background:#bd3f45}
.status{font-weight:bold}
.online{color:#52d48a}.offline{color:#ff6970}.degraded{color:#ffcb61}.unknown{color:#aab7c1}.maintenance{color:#7fb5ff}
img{width:100%;background:#111}
table{width:100%;border-collapse:collapse}
td,th{padding:.6rem;border-bottom:1px solid #294557;text-align:left}
a{color:#7fc8ff}.error{color:#ff6970}
.success,.success-message{color:#52d48a}.error-message{color:#ff6970}.muted{color:#aab7c1}.warning{color:#ffcb61;font-weight:700}
.action-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.action-row form{margin:0}
.checkbox-label{display:flex;align-items:center;gap:.6rem}.checkbox-label input,.channel-select input{width:auto;margin:0}
.table-scroll{overflow-x:auto;margin-bottom:1rem}
@media (max-width:640px){.site-header{align-items:flex-start;padding:1rem}.global-nav{justify-content:flex-start;width:100%}main{padding:1rem}.narrow{margin:2rem auto}.current-user{width:100%;padding-left:0}}