:root {
  --bg: #070b14;
  --panel: #101826;
  --panel2: #161f30;
  --line: #243044;
  --text: #eef3fb;
  --muted: #93a0b8;
  --blue: #2f7bff;
  --blue2: #4ea2ff;
  --glow: rgba(47,123,255,.45);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 1280px; height: 720px; overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
body { background: radial-gradient(900px 420px at 80% 10%, rgba(47,123,255,.18), transparent 55%), var(--bg); }
.nav { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid var(--line); }
a { color: inherit; text-decoration: none; }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--text); }
.logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg,#2f7bff,#6aa8ff); }
.links { display: flex; gap: 28px; color: var(--muted); font-size: 14px; }
.links a:hover { color: #fff; }
.links a.active { color: #fff; }
.btn { border: 0; border-radius: 10px; padding: 11px 18px; font-weight: 700; cursor: pointer; display: inline-block; text-align: center; }
.pager { position: fixed; right: 24px; bottom: 14px; display: flex; gap: 8px; z-index: 30; }
.pager a { font-size: 12px; padding: 8px 12px; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-primary { background: linear-gradient(180deg,#4ea2ff,#2f7bff); color: white; box-shadow: 0 8px 24px var(--glow); }
.wrap { padding: 28px 36px 24px; }
h1 { font-size: 48px; line-height: 1.08; letter-spacing: -1px; }
h1 span { color: var(--blue2); }
p.sub { color: var(--muted); margin-top: 14px; font-size: 16px; max-width: 520px; line-height: 1.5; }
.card { background: linear-gradient(180deg, #141d2c, #0e1624); border: 1px solid var(--line); border-radius: 16px; }
.grid { display: grid; gap: 14px; }
.app{display:grid;grid-template-columns:220px 1fr;height:656px;}
.side{border-right:1px solid var(--line);padding:16px;}
.side a{display:block;color:var(--muted);padding:9px 10px;border-radius:8px;font-size:14px;}
.side a:hover{color:#fff;}
.side a.on{background:#17233a;color:#fff;}
.main{padding:18px 20px;overflow:auto;}
.k{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0;}
.k .card{padding:12px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);color:var(--muted);}
td b{color:#fff;font-weight:600;}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;background:#12351f;color:#3dff9a;font-size:11px;}
.pill.warn{background:#3a2a10;color:#ffc857;}
.pill.bad{background:#3a1518;color:#ff7b86;}
.pill.blue{background:#132a4a;color:#7eb6ff;}
.toolbar{display:flex;gap:8px;align-items:center;margin:10px 0 14px;}
.search{flex:1;height:38px;border-radius:10px;border:1px solid var(--line);background:#0b1220;color:#fff;padding:0 12px;}
.tree{font-size:14px;line-height:1.9;color:var(--muted);}
.tree b{color:#fff;}
.alert-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;margin-bottom:8px;}
.set-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);}
.set-row span{color:var(--muted);font-size:13px;}
.toggle{width:40px;height:22px;border-radius:99px;background:#2f7bff;position:relative;}
.toggle:after{content:"";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;}
.toggle.off{background:#2a3548;}
.toggle.off:after{right:auto;left:3px;}