:root{--bk:#111;--bk2:#1b1b1b;--bk3:#2a2a2a;--ye:#ffc400;--wh:#fff;--mut:#9a9a9a;--ok:#2ecc71;--warn:#ff9800;--bad:#e53935}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,sans-serif;background:var(--bk);color:var(--wh);display:flex;min-height:100vh}
.side{width:230px;background:var(--bk);border-right:1px solid var(--bk3);padding:20px 0;flex-shrink:0}
.logo{font-size:26px;font-weight:800;padding:0 22px 22px}.logo span{color:var(--ye)}
.side nav a{display:flex;gap:12px;padding:11px 22px;color:var(--wh);text-decoration:none;border-left:4px solid transparent}
.side nav a:hover{background:var(--bk2)}
.side nav a.on{background:var(--ye);color:var(--bk);font-weight:700;border-left-color:var(--wh)}
.side nav i{font-style:normal;width:20px;text-align:center}
main{flex:1;background:var(--bk2);min-width:0}
.top{display:flex;gap:16px;align-items:center;padding:14px 28px;background:var(--bk);border-bottom:3px solid var(--ye)}
.search{flex:1;max-width:460px;background:var(--bk2);border:1px solid var(--bk3);color:var(--wh);padding:9px 14px;border-radius:8px}
.user{margin-left:auto;color:var(--ye);font-weight:600}
#content{padding:28px}
h1{margin:0 0 20px;font-size:24px}h1:after{content:"";display:block;width:48px;height:4px;background:var(--ye);margin-top:8px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:24px}
.card{background:var(--bk);border:1px solid var(--bk3);border-radius:10px;padding:18px}
.card.y{background:var(--ye);color:var(--bk)}.card.w{background:var(--wh);color:var(--bk)}
.card .n{font-size:32px;font-weight:800}.card .l{font-size:13px;opacity:.7}
table{width:100%;border-collapse:collapse;background:var(--bk);border-radius:10px;overflow:hidden}
th{background:var(--ye);color:var(--bk);text-align:left;padding:10px 14px}
td{padding:10px 14px;border-bottom:1px solid var(--bk3)}tr:hover td{background:var(--bk2)}
.btn{background:var(--ye);color:var(--bk);border:0;padding:9px 18px;border-radius:8px;font-weight:700;cursor:pointer;text-decoration:none}
.btn.w{background:var(--wh)}
.badge{padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700}
.badge.ok{background:var(--ok);color:#000}.badge.warn{background:var(--warn);color:#000}.badge.bad{background:var(--bad)}
.map{background:var(--bk);border:1px solid var(--bk3);border-radius:10px;padding:10px}
.map line{stroke-width:3}.map text{fill:var(--wh);font-size:12px}
.ok-c{fill:var(--ok)}.warn-c{fill:var(--warn)}.bad-c{fill:var(--bad)}
@media(max-width:800px){.side{width:64px}.side nav a{font-size:0}.side nav i{font-size:18px}.logo{font-size:12px;padding:0 8px 16px}}
.bar{display:flex;gap:12px;margin-bottom:16px;align-items:center}
.bar .search{max-width:none}
form.f{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));background:var(--bk);padding:20px;border-radius:10px;border:1px solid var(--bk3);margin-bottom:20px}
form.f label{display:grid;gap:4px;font-size:13px;color:var(--mut)}
form.f .full{grid-column:1/-1}
input,select,textarea{background:var(--bk2);border:1px solid var(--bk3);color:var(--wh);padding:9px 12px;border-radius:8px;font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ye)}
.btn.d{background:var(--bad);color:#fff}.btn.s{padding:4px 12px;font-size:12px}
.msg{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-weight:600}
.msg.ok{background:var(--ok);color:#000}.msg.bad{background:var(--bad)}.msg.warn{background:var(--warn);color:#000}
h2{margin:24px 0 12px;font-size:18px;color:var(--ye)}
tr.click{cursor:pointer}
.muted{color:var(--mut)}