body {
  font-family: system-ui, sans-serif;
  margin: 0;
  background: #0f1b2d;
  color: #e6edf3;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #16273f;
  border-bottom: 1px solid #22395a;
}
h1 { font-size: 18px; margin: 0; }
h2 { font-size: 15px; margin: 18px 0 6px; }
main { padding: 16px 20px; max-width: 1100px; }
.view { display: none; }
.view.active { display: block; }
.btn {
  display: inline-block;
  border: 1px solid #34608c;
  background: #1d3352;
  color: #e6edf3;
  padding: 6px 12px;
  margin: 4px 4px 4px 0;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
}
.btn.danger { border-color: #7a2f2f; background: #4a1d1d; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.card {
  background: #14243c;
  border: 1px solid #22395a;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
}
.name { color: #8aa5c5; font-size: 12px; text-transform: uppercase; }
.val { font-size: 16px; }
.badge.on { color: #7ee2a8; }
.badge.off { color: #e27e7e; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #22395a; }
th { color: #8aa5c5; font-weight: 600; }
input, select {
  background: #0f1b2d;
  color: #e6edf3;
  border: 1px solid #34608c;
  border-radius: 6px;
  padding: 6px;
  margin: 4px;
  min-width: 160px;
}
label { display: inline-flex; flex-direction: column; font-size: 12px; color: #8aa5c5; }
.hidden { display: none; }
#msg { color: #7ee2a8; font-size: 13px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.nav .btn { margin: 2px; }
.nav .btn.active { border-color: #7ee2a8; background: #234a33; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.meta { color: #8aa5c5; font-size: 12px; }
.mono { font-family: ui-monospace, monospace; font-size: 12px; }
.floatBtn { float: right; }
.name a { color: #9cc3e8; text-decoration: none; }
.name a:hover { text-decoration: underline; }