*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#f6f7f9;color:#1d2330;display:flex;flex-direction:column}
header{display:flex;justify-content:flex-end;padding:1.25rem 1.5rem}
.login{padding:.55rem 1.3rem;border-radius:6px;background:#1f6f43;color:#fff;text-decoration:none;font-weight:600}
.login:hover,.login:focus{background:#185a36}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;padding:1rem}
h1{font-size:clamp(2.5rem,8vw,5rem);font-weight:700;letter-spacing:-.02em}
.status{width:min(100%,26rem)}
.status h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#5d6675;margin-bottom:.6rem}
.status ul{list-style:none;padding:0;display:grid;gap:.5rem}
.gw{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid #dde1e7;border-radius:8px;padding:.7rem 1rem}
.gw .name{font-weight:600;flex:1}
.gw .state{font-size:.9rem;color:#5d6675}
.dot{width:.7rem;height:.7rem;border-radius:50%;background:#a0a7b2;flex:none}
.gw.up .dot{background:#1f9d55}
.gw.warn .dot{background:#d98a0b}
.gw.down .dot{background:#d0342c}
.gw.down .state{color:#b42318}
.checked{font-size:.8rem;color:#5d6675;margin-top:.6rem;text-align:right}