*{box-sizing:border-box}body{margin:0;background:#08111f;color:#e7edf7;font:16px system-ui,-apple-system,Segoe UI,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:18px max(5vw,24px);border-bottom:1px solid #24344c;background:#0b1728}header strong{font-size:20px;display:block}header span,.seen,header a{color:#9db0ca;font-size:14px}header a{color:#77c8ff}main{max-width:1200px;margin:auto;padding:42px 24px}.hero h1{margin:0 0 8px}.hero p{color:#9db0ca}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:28px 0}article,.guide,.login form{background:#101e32;border:1px solid #263a57;border-radius:14px;padding:20px;box-shadow:0 12px 35px #0002}.device-head{display:flex;justify-content:space-between}.device-head h2{margin:0;font-size:19px}.device-head p{margin:5px 0;color:#9db0ca;font-size:13px}.dot{height:11px;width:11px;border-radius:50%;background:#617084}.dot.on{background:#3fdf9b;box-shadow:0 0 10px #3fdf9b}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.metric{background:#0a1627;border-radius:9px;padding:11px}.metric span{display:block;color:#9db0ca;font-size:12px}.metric b{font-size:19px}.metric small{font-size:12px;color:#9db0ca}.guide{margin-top:28px}.guide h2{margin-top:0}code,pre{background:#07101d;padding:4px 7px;border-radius:5px}pre{padding:14px;white-space:pre-wrap;overflow:auto}.login{min-height:100vh;display:grid;place-items:center}.login form{width:min(390px,90vw)}.login h1{margin-top:0}.login p{color:#9db0ca}.login label{display:block;margin:14px 0;color:#b8c7db;font-size:14px}.login input{width:100%;margin-top:6px;padding:11px;border:1px solid #354c6e;border-radius:7px;background:#07101d;color:white}button{width:100%;padding:12px;border:0;border-radius:7px;background:#2e9de7;color:white;font-weight:700;cursor:pointer}@media(max-width:600px){main{padding:26px 16px}.metrics{grid-template-columns:1fr}}
nav a{margin-left:14px}.create{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;background:#101e32;border:1px solid #263a57;border-radius:14px;padding:20px}.create label{color:#b8c7db;font-size:14px}.create input{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #354c6e;border-radius:7px;background:#07101d;color:white}.create button{height:42px}.notice,.error{padding:16px;border-radius:10px;margin:20px 0}.notice{background:#123d34;border:1px solid #277a68}.error{background:#4b2027;border:1px solid #a14552}@media(max-width:800px){.create{grid-template-columns:1fr}}
.device-head h2 a{color:#e7edf7;text-decoration:none}.device-head h2 a:hover{color:#77c8ff}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:650px}th,td{text-align:left;padding:10px;border-bottom:1px solid #263a57;font-size:14px}th{color:#9db0ca;font-weight:600}
.dot.online{background:#3fdf9b;box-shadow:0 0 10px #3fdf9b}.dot.delayed{background:#f5c542;box-shadow:0 0 10px #f5c542}.dot.offline{background:#ef5b65;box-shadow:0 0 10px #ef5b65}
.current,.history-section{margin-top:26px}.current h2,.history-heading h2{margin-bottom:8px}.current .metric small{display:block;color:#9db0ca;font-size:11px;margin-top:6px}.history-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:28px 0 8px}.history-heading h2{margin-top:0}.history-heading p{margin-top:0;color:#9db0ca}.ranges{display:flex;gap:7px;flex-wrap:wrap}.ranges button{width:auto;padding:8px 12px;background:#14233a;border:1px solid #314765;color:#b7c9df}.ranges button.active{background:#1979b5;border-color:#39a6ea;color:#fff}.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.chart-card{min-width:0;background:#101e32;border:1px solid #263a57;border-radius:14px;padding:17px}.chart-title{display:flex;justify-content:space-between;align-items:start;gap:12px}.chart-title h3{margin:0;font-size:16px}.chart-title p{margin:6px 0 0;color:#9db0ca;font-size:12px}.chart-unit{color:#9db0ca;font-size:12px}.chart-wrap{position:relative;margin-top:12px;min-height:210px}.chart-svg{display:block;width:100%;height:auto;overflow:visible}.chart-svg[hidden]{display:none}.gridline{stroke:#293a51;stroke-width:1}.axis-label{fill:#9db0ca;font:11px system-ui,sans-serif}.line{fill:none;stroke:var(--chart-color);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.point{fill:var(--chart-color);stroke:#101e32;stroke-width:1.5}.chart-empty{min-height:180px;display:grid;place-items:center;text-align:center;color:#8296b2;font-size:13px;padding:20px}.chart-empty[hidden]{display:none}.seen{color:#9db0ca}@media(max-width:780px){.chart-grid{grid-template-columns:1fr}.history-heading{align-items:flex-start;flex-direction:column}}
.device-list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid #263a57}.device-list-row span{display:flex;gap:14px}.device-list-row a,.records-link a{color:#77c8ff;text-decoration:none}.device-list-row a:hover,.records-link a:hover{text-decoration:underline}.records-link{margin:26px 0 4px}.hero>a{display:inline-block;margin-bottom:18px;color:#77c8ff;text-decoration:none}#records-table{min-width:760px}#records-table tbody tr:hover{background:#172b44}#records-table th{white-space:nowrap}