:root{font:15px system-ui;color:#172033;background:#f4f7fb}*{box-sizing:border-box}body{margin:0}main{max-width:1100px;margin:auto;padding:20px}header{display:flex;justify-content:space-between;align-items:center;background:#0866ff;color:white;padding:16px 22px;border-radius:14px}header b{font-size:20px}header small,.status+small{display:block}button{border:0;border-radius:8px;padding:10px 14px;background:#0866ff;color:white;cursor:pointer}header button{background:white;color:#0866ff}#login{display:grid;place-items:center;height:70vh}#login[hidden],#dash[hidden]{display:none}form{display:flex;gap:10px}#login form{width:360px;flex-direction:column;background:white;padding:30px;border-radius:16px;box-shadow:0 8px 32px #2342}input{border:1px solid #ccd4e0;border-radius:8px;padding:11px}.error{color:#c22}.notice{margin:20px 0;padding:14px;background:#fff4d8;border-left:4px solid #e8a600}.top{display:flex;justify-content:space-between;align-items:center}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.cards article{background:white;padding:18px;border-radius:12px;display:flex;flex-direction:column;gap:5px}.cards strong{font-size:25px;color:#0866ff}table{width:100%;border-collapse:collapse;background:white;border-radius:12px;overflow:hidden}th,td{text-align:left;padding:12px;border-bottom:1px solid #e8edf4}.status{display:inline-block;padding:4px 8px;border-radius:20px;background:#dde3eb}.status.online{background:#d8f5e1;color:#08772b}.status.error{background:#ffe0e0;color:#a00}#modal{position:fixed;inset:0;background:#0008;display:grid;place-items:center}#modal[hidden]{display:none}.dialog{position:relative;background:white;padding:28px;border-radius:16px;text-align:center;max-width:420px}.dialog img{max-width:300px}.dialog #close{position:absolute;right:8px;top:8px;background:#eee;color:#222}@media(max-width:650px){.top,form{align-items:stretch;flex-direction:column}table{font-size:12px;display:block;overflow:auto}}