:root{--navy:#001F54;--bg:#f3f5f8;--line:#dfe3ea;--tx:#1b2430}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;font:14px/1.5 system-ui,sans-serif;color:var(--tx);background:var(--bg)}
#app{display:flex;min-height:100vh}
aside{width:210px;background:var(--navy);color:#fff;padding:18px 0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
aside h1{font-size:16px;margin:0 16px 20px;letter-spacing:.06em;line-height:1.3}
aside a{display:block;padding:10px 16px;color:#cfd8ea;cursor:pointer;text-decoration:none}
aside a.on,aside a:hover{background:#0a3170;color:#fff}
aside .me{margin-top:auto;padding:12px 16px;font-size:12px;color:#9fb0cf;border-top:1px solid #0a3170}
aside .me a{color:#cfd8ea;padding:6px 0;display:block}
main{flex:1;padding:20px;min-width:0}
h2{margin:0 0 14px;color:var(--navy)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin-bottom:16px}
.card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:6px;padding:12px 14px}
.card b{display:block;font-size:28px;color:var(--navy);margin:4px 0}
.card.on{border-left-color:#16a34a}.card.st{border-left-color:#d97706}.card.off{border-left-color:#6b7280}
#map{height:360px;border-radius:6px;border:1px solid var(--line);margin-bottom:16px}
.wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;font-size:13px}
th{background:#e9edf4;color:var(--navy);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
button{background:var(--navy);color:#fff;border:0;border-radius:6px;padding:8px 14px;cursor:pointer;font:inherit;font-size:13px}
button.ghost{background:#e9edf4;color:var(--navy)}
button.danger{background:#b91c1c}
button.sm{padding:4px 9px;font-size:12px}
input,select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;margin:4px 0 10px;font:inherit;font-size:13px}
label{display:block;font-weight:600;font-size:12px;margin-bottom:0}
dialog{border:0;border-radius:10px;padding:24px;width:min(480px,94vw);max-height:90vh;overflow-y:auto}
dialog::backdrop{background:#0008}
.row{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.err{color:#b91c1c;min-height:1.2em;font-size:13px;margin:0 0 8px}
.bar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.bar label{min-width:160px}.bar button{margin-bottom:10px}
.tag{padding:2px 10px;border-radius:10px;font-size:12px;color:#fff;display:inline-block}
.tag.online{background:#16a34a}.tag.stale{background:#d97706}.tag.offline{background:#6b7280}
.tok{background:#e9edf4;padding:4px 8px;border-radius:4px;word-break:break-all;display:block;margin:6px 0 12px;font-size:13px;user-select:all;font-family:monospace}
#login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
#login{background:#fff;padding:28px;border-radius:10px;width:min(340px,92vw);border-top:5px solid var(--navy)}
#login h2{margin:0 0 20px;color:var(--navy)}
footer{font-size:11px;color:#9fb0cf;margin-top:20px;padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:760px){aside{width:160px}main{padding:12px}}