:root{
  --bg:#070707; --fg:#e9e9e9; --muted:#7a7a7a; --card:#101010; --line:#242424;
  --ok:#22c55e; --bad:#ef4444; --warn:#f59e0b; --accent:#60a5fa;
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  display:flex; justify-content:center; align-items:center;
}
.wrap{width:min(1100px,92vw); padding:26px 0 40px}
header{display:flex; gap:14px; justify-content:space-between; align-items:flex-start; margin-bottom:14px}
h1{margin:0; font-size:20px; letter-spacing:.3px}
.sub{margin-top:6px; color:var(--muted); font-size:13px; line-height:1.45}
.pillrow{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:var(--card);
  border-radius:999px; padding:8px 12px; font-size:12px;
}
.dot{width:8px; height:8px; border-radius:50%}
.dot.ok{background:var(--ok)}
.dot.bad{background:var(--bad)}
.dot.warn{background:var(--warn)}
.dot.ac{background:var(--accent)}
.grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px}
@media (max-width:900px){ .grid{grid-template-columns:1fr} .pillrow{justify-content:flex-start}}
.card{border:1px solid var(--line); background:var(--card); border-radius:16px; padding:16px}
.card h2{margin:0 0 10px 0; font-size:13px; letter-spacing:1.8px; color:#cfcfcf}
.actions{display:flex; flex-wrap:wrap; gap:10px}
a.btn, button.btn{
  appearance:none; cursor:pointer; text-decoration:none;
  border:1px solid var(--line); background:#0b0b0b; color:var(--fg);
  padding:10px 12px; border-radius:12px; font-size:13px;
  display:inline-flex; align-items:center; gap:9px;
  transition:transform .05s ease, border-color .1s ease;
  user-select:none;
}
a.btn:hover, button.btn:hover{border-color:#343434}
a.btn:active, button.btn:active{transform:scale(.98)}
.sep{height:1px; background:var(--line); margin:14px 0}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.kv{min-width:180px; display:flex; flex-direction:column; gap:4px}
.k{color:var(--muted); font-size:11px; letter-spacing:1.6px}
.v{font-size:14px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.small{font-size:12px}
.log{
  border:1px solid var(--line); background:#0b0b0b; border-radius:14px;
  padding:12px; max-height:260px; overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px; line-height:1.5; color:#d6d6d6;
}
.log .mut{color:#8a8a8a}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:#0b0b0b;
  border-radius:999px; padding:6px 10px; font-size:12px; color:var(--muted);
}
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:#0b0b0b; border:1px solid var(--line); color:var(--fg);
  padding:10px 12px; border-radius:12px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}

/* optional blocks */
.widgets{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.widget{
  border:1px solid var(--line); background:#0b0b0b; border-radius:14px;
  padding:12px; min-height:86px;
  display:flex; flex-direction:column; gap:6px;
}
.wname{font-size:13px; display:flex; align-items:center; gap:8px}
.wdesc{font-size:12px; color:var(--muted); line-height:1.35}
.wval{font-size:12px; color:#d8d8d8}