:root{
  --bg:#0b0b0b; --panel:#111; --line:#242424; --line2:#333;
  --fg:#e8e8e8; --dim:#8a8a8a; --mute:#5a5a5a;
  --ok:#e8e8e8; --warn:#b9b9b9;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--fg);
  font:13px/1.6 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:#ddd}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#2a2a2a}
::-webkit-scrollbar-track{background:#0f0f0f}

/* 登录 */
.boot{display:flex;align-items:center;justify-content:center;height:100vh;color:var(--mute)}
.gate{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.gate-box{width:360px;border:1px solid var(--line);background:var(--panel);padding:34px 30px}
.gate-mark{font-size:11px;letter-spacing:.55em;color:var(--mute);margin-bottom:22px}
.gate-title{font-size:17px;font-weight:500;letter-spacing:.06em;margin-bottom:6px}
.gate-sub{color:var(--dim);font-size:12px;margin-bottom:24px}
.gate-step{font-size:10px;letter-spacing:.3em;color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;letter-spacing:.18em;color:var(--dim);margin-bottom:6px}
.field input{width:100%;background:#0a0a0a;border:1px solid var(--line2);padding:10px 12px;outline:none}
.field input:focus{border-color:#666}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);
  background:#161616;padding:9px 16px;cursor:pointer;letter-spacing:.08em;font-size:12px;transition:.15s}
.btn:hover{background:#1e1e1e;border-color:#555}
.btn:disabled{opacity:.4;cursor:default}
.btn.primary{background:#e8e8e8;color:#0b0b0b;border-color:#e8e8e8}
.btn.primary:hover{background:#fff}
.btn.block{width:100%;display:flex}
.btn.small{padding:4px 9px;font-size:11px}
.gate-msg{margin-top:16px;font-size:12px;color:var(--dim);min-height:18px;line-height:1.7}
.gate-msg.err{color:#cf8f8f}
.qqline{display:flex;gap:8px;align-items:center;margin-top:10px;color:var(--mute);font-size:11px;letter-spacing:.1em}

/* 主框架 */
.shell{display:grid;grid-template-columns:196px 1fr;min-height:100vh}
.side{border-right:1px solid var(--line);background:#0d0d0d;display:flex;flex-direction:column}
.brand{padding:22px 20px 18px;border-bottom:1px solid var(--line)}
.brand b{display:block;font-size:14px;letter-spacing:.34em;font-weight:600}
.brand span{display:block;font-size:10px;color:var(--mute);letter-spacing:.22em;margin-top:6px}
.nav{padding:12px 0;flex:1}
.nav a{display:block;padding:9px 20px;color:var(--dim);text-decoration:none;font-size:12px;letter-spacing:.12em;border-left:2px solid transparent}
.nav a:hover{color:var(--fg);background:#121212}
.nav a.on{color:#fff;border-left-color:#e8e8e8;background:#141414}
.side-foot{padding:14px 20px;border-top:1px solid var(--line);font-size:10px;color:var(--mute);letter-spacing:.1em}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:52px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:0 24px;background:#0d0d0d}
.topbar .crumb{font-size:12px;letter-spacing:.24em;color:var(--dim)}
.topbar .meta{display:flex;gap:18px;align-items:center;font-size:11px;color:var(--mute)}
.dot{display:inline-block;width:6px;height:6px;background:#e8e8e8;margin-right:6px;border-radius:50%}
.dot.off{background:#4a4a4a}
.content{padding:24px;overflow:auto}

.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:1fr 1fr}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g2,.g3{grid-template-columns:1fr}}

.card{border:1px solid var(--line);background:var(--panel);padding:16px}
.card h3{font-size:10px;letter-spacing:.28em;color:var(--mute);font-weight:500;margin-bottom:12px}
.kpi{font-size:26px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.kpi small{font-size:11px;color:var(--mute);letter-spacing:.1em;margin-left:6px}
.sub{font-size:11px;color:var(--dim);margin-top:6px}

.bar{height:3px;background:#1c1c1c;margin-top:10px;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;background:#cfcfcf}

table{width:100%;border-collapse:collapse;font-size:12px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid #1b1b1b;white-space:nowrap}
th{color:var(--mute);font-weight:500;font-size:10px;letter-spacing:.18em;background:#0e0e0e;
  position:sticky;top:0}
tbody tr:hover{background:#131313}
td.mono,.mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.04em}
.tag{display:inline-block;border:1px solid var(--line2);padding:1px 6px;font-size:10px;color:var(--dim);letter-spacing:.1em}
.tag.ok{border-color:#4d4d4d;color:#e8e8e8}
.tag.bad{border-color:#3a2a2a;color:#a97f7f}
.tag.warn{border-color:#3f3f3f;color:#cfcfcf}

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar input[type=text],.toolbar input[type=number],.toolbar select{
  background:#0a0a0a;border:1px solid var(--line2);padding:7px 10px;outline:none;min-width:90px}
.toolbar input:focus{border-color:#555}
.spacer{flex:1}
.scroll{max-height:calc(100vh - 230px);overflow:auto;border:1px solid var(--line)}

.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{width:520px;max-width:92vw;border:1px solid var(--line2);background:#121212;padding:22px}
.modal h4{font-size:13px;letter-spacing:.2em;margin-bottom:14px;font-weight:500}
.modal .row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
textarea{width:100%;min-height:110px;background:#0a0a0a;border:1px solid var(--line2);
  padding:10px;outline:none;resize:vertical;line-height:1.7}
textarea:focus{border-color:#555}

#map{width:100%;height:430px;display:block;border:1px solid var(--line);background:#0a0a0a}
.legend{display:flex;gap:20px;font-size:11px;color:var(--mute);margin-top:10px;letter-spacing:.1em}
.legend i{display:inline-block;width:14px;height:1px;background:#bbb;vertical-align:middle;margin-right:6px}

.empty{padding:34px;text-align:center;color:var(--mute);font-size:12px}
.toast{position:fixed;right:22px;bottom:22px;background:#161616;border:1px solid var(--line2);
  padding:12px 16px;font-size:12px;z-index:99;max-width:340px}
.muted{color:var(--mute)}
.right{text-align:right}
.nowrap{white-space:nowrap}