:root {
  --bg: #f6f7f9; --surface: #fff; --text: #1b1f24; --muted: #5b6573; --line: #d8dde4;
  --brand: #0b5cad; --brand-contrast: #fff; --danger: #b3261e; --ok: #1a7f37; --warn: #9a6700;
  --space: 1rem; --radius: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--brand); }
:focus-visible { outline: 3px solid #f4b400; outline-offset: 2px; }
header.top { background: var(--surface); border-bottom: 1px solid var(--line); display: flex; gap: var(--space); align-items: center; padding: .5rem var(--space); }
header.top nav { display: flex; gap: var(--space); flex: 1; }
main { max-width: 64rem; margin: 0 auto; padding: var(--space); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space); margin-bottom: var(--space); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--line); }
button, .btn { background: var(--brand); color: var(--brand-contrast); border: 0; border-radius: 6px; padding: .5rem .9rem; cursor: pointer; font: inherit; }
button.danger { background: var(--danger); }
button.secondary { background: var(--surface); color: var(--brand); border: 1px solid var(--brand); }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { font: inherit; padding: .45rem; border: 1px solid var(--line); border-radius: 6px; width: 100%; max-width: 28rem; }
label { display: block; margin: .6rem 0 .2rem; font-weight: 600; }
.flash { padding: .6rem 1rem; border-radius: 6px; margin-bottom: var(--space); }
.flash.error { background: #fdecea; color: var(--danger); }
.flash.ok { background: #e6f4ea; color: var(--ok); }
.flash.warn, .banner { background: #fff4ce; color: var(--warn); }
.banner { padding: .6rem 1rem; border-radius: 6px; margin-bottom: var(--space); }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .85rem; background: #e8ecf1; }
.badge.on { background: #e6f4ea; color: var(--ok); } .badge.off { background: #eceff3; } .badge.na { background: #fff4ce; color: var(--warn); }
.empty { text-align: center; color: var(--muted); padding: 2rem; }
dialog { border: 1px solid var(--line); border-radius: var(--radius); max-width: 32rem; }
.htmx-request { opacity: .6; }
.console-box { min-height: 480px; background: #000; }