/* BINI — black & white. One ink, one paper, mono labels, hard edges. */
:root {
  --bg: #000; --bg1: #0b0b0b; --bg2: #141414; --line: #262626; --line2: #3a3a3a;
  --ink: #fff; --dim: #a8a8a8; --mut: #6b6b6b;
  --sans: 'Geist', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace;
  --live: #fff; --degraded: #b5b5b5; --dead: #4a4a4a;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
.mono { font-family: var(--mono); }
.lab { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font: 600 15px var(--sans); border: 1px solid var(--line2); background: var(--bg1); transition: background .15s, border-color .15s; white-space: nowrap; }
.btn:hover { border-color: var(--ink); }
.btn.solid { background: var(--ink); color: #000; border-color: var(--ink); }
.btn.solid:hover { background: #ddd; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line2); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.state { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: .04em; }
.state i { width: 8px; height: 8px; display: inline-block; }
.state.LIVE i { background: var(--live); box-shadow: 0 0 10px #fff; }
.state.DEGRADED i { background: var(--degraded); }
.state.IMPOSTOR_STATIC i, .state.UNREACHABLE i { border: 1px solid var(--dim); }
.state.PLACEHOLDER_URL i, .state.DECLARED_ONLY i, .state.UNPROBED i { background: var(--dead); }
.card { background: var(--bg1); border: 1px solid var(--line); border-radius: 16px; }
.xlink { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg1); color: var(--ink); flex: none; transition: border-color .15s, background .15s; }
.xlink:hover { border-color: var(--ink); background: var(--bg2); }
::selection { background: #fff; color: #000; }
/* no visible scrollbars anywhere: scrolling still works (wheel, trackpad, touch, keys) */
html, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; }