:root {
  --colors-bg: #080a0d;
  --colors-bg-elev: #0b0e12;
  --colors-surface: #0f1217;
  --colors-surface-solid: #0f1217;
  --colors-border: #1d222b;
  --colors-border-strong: #2a313c;
  --colors-text: #e8ebf0;
  --colors-text-muted: #79828f;
  --colors-text-dim: #4a525e;
  --colors-accent: #ffa028;
  --colors-accent-dim: #c47a1d;
  --colors-accent-soft: rgba(255,160,40,0.13);
  --colors-accent2: #39d4e6;
  --colors-long: #2ed47a;
  --colors-short: #ff5562;
  --colors-warn: #ffb454;
  --fonts-display: 'IBM Plex Sans', system-ui, sans-serif;
  --fonts-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --fonts-mono: 'JetBrains Mono', ui-monospace, monospace;
  --sizing-radius: 5px;
  --sizing-radius-lg: 6px;
  --sizing-gap: 12px;
  --sizing-maxw: 1200px;
  --fx-shadow: 0 1px 0 rgba(0,0,0,.3);
  --fx-shadow-lg: 0 1px 0 rgba(0,0,0,.3);
  --fx-blur: 0px;
  --fx-ring: 0 0 0 1px rgba(255,160,40,.5);
  --fx-glow: 0 0 8px rgba(255,160,40,.4);
}
/* Sygnl — "Terminal Pro" aesthetic. Solid panels, sharp corners, monospace
   numbers, amber accent, high contrast. Theme tokens (--colors-*, --fonts-*,
   --sizing-*, --fx-*) are prepended by /styles.css from config.THEME. */

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--colors-bg); color: var(--colors-text);
  font-family: var(--fonts-sans); font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--sizing-maxw); margin: 0 auto; padding: 0 18px 50px; }

/* ── header ── */
header { display: flex; align-items: center; gap: 14px; height: 56px; border-bottom: 1px solid var(--colors-border); }
.logo { font-family: var(--fonts-mono); font-weight: 700; font-size: 20px; letter-spacing: 1px; }
.logo b { color: var(--colors-accent); }
.tag { color: var(--colors-text-dim); font-size: 12px; font-family: var(--fonts-mono); }
.spacer { margin-left: auto; }
.badge {
  font-family: var(--fonts-mono); font-size: 12px; font-weight: 600; letter-spacing: .5px;
  color: var(--colors-accent); padding: 5px 11px; border-radius: var(--sizing-radius);
  background: var(--colors-accent-soft); border: 1px solid rgba(255,160,40,.3);
}

/* ── nav (underline tabs) ── */
nav { display: flex; gap: 0; border-bottom: 1px solid var(--colors-border); margin-bottom: 16px; flex-wrap: wrap; }
nav a {
  font-family: var(--fonts-mono); font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--colors-text-muted); padding: 12px 16px; border-bottom: 2px solid transparent;
  cursor: pointer; transition: color .15s;
}
nav a:hover { color: var(--colors-text); }
nav a.active { color: var(--colors-accent); border-bottom-color: var(--colors-accent); }

/* ── LED status dot ── */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 1px; margin-right: 7px; vertical-align: middle; }
.live { background: var(--colors-long); box-shadow: 0 0 6px var(--colors-long); }
.paused { background: var(--colors-warn); box-shadow: 0 0 6px var(--colors-warn); }
.off { background: var(--colors-text-dim); }

/* ── panels / cards ── */
.cards { display: flex; gap: var(--sizing-gap); flex-wrap: wrap; margin: 0 0 var(--sizing-gap); }
.card {
  flex: 1; min-width: 156px;
  background: var(--colors-surface); border: 1px solid var(--colors-border);
  border-radius: var(--sizing-radius); padding: 14px 16px; transition: border-color .15s;
}
.card:hover { border-color: var(--colors-border-strong); }
.card .k { font-family: var(--fonts-mono); color: var(--colors-text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; }
.card .v { font-family: var(--fonts-mono); font-size: 24px; font-weight: 700; margin-top: 6px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.card.sm .v { font-size: 20px; font-weight: 500; }

h3 {
  font-family: var(--fonts-mono); margin: 26px 0 12px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--colors-text);
  padding-left: 11px; border-left: 3px solid var(--colors-accent); line-height: 1.1;
}
.muted { color: var(--colors-text-muted); font-size: 13px; }
.pos { color: var(--colors-long); } .neg { color: var(--colors-short); } .warn { color: var(--colors-warn); }

/* ── tables ── */
table { width: 100%; border-collapse: collapse; background: var(--colors-surface); border: 1px solid var(--colors-border); border-radius: var(--sizing-radius); overflow: hidden; }
th, td { text-align: right; padding: 9px 13px; font-family: var(--fonts-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
th { color: var(--colors-text-dim); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; border-bottom: 1px solid var(--colors-border); }
td { border-top: 1px solid var(--colors-bg-elev); }
td:first-child, th:first-child { text-align: left; }
tbody tr:hover td { background: var(--colors-bg-elev); }

/* ── pills, buttons, inputs ── */
.pill { font-family: var(--fonts-mono); font-size: 11px; padding: 2px 8px; border-radius: var(--sizing-radius); border: 1px solid var(--colors-border-strong); display: inline-block; color: var(--colors-text-muted); }
button, select, input {
  font-family: var(--fonts-mono); font-size: 11px; letter-spacing: .5px;
  background: var(--colors-surface); color: var(--colors-text-muted);
  border: 1px solid var(--colors-border-strong); border-radius: var(--sizing-radius);
  padding: 7px 12px; cursor: pointer; transition: border-color .15s, color .15s;
}
button:hover { border-color: var(--colors-accent); color: var(--colors-text); }
button.primary { background: var(--colors-accent); color: #0a0b0e; font-weight: 700; border-color: var(--colors-accent); }
button.primary:hover { box-shadow: var(--fx-glow); color: #0a0b0e; }
button.danger { color: var(--colors-short); border-color: #3a2226; }
button.danger:hover { border-color: var(--colors-short); }
input { color: var(--colors-text); cursor: text; width: 118px; font-family: var(--fonts-mono); }
input:focus, select:focus { outline: none; border-color: var(--colors-accent); box-shadow: var(--fx-ring); }
.controls { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.row { display: flex; gap: var(--sizing-gap); flex-wrap: wrap; }

/* ── rules ── */
.rule { background: var(--colors-surface); border: 1px solid var(--colors-border); border-radius: var(--sizing-radius); padding: 16px; margin-bottom: 12px; transition: border-color .15s; }
.rule:hover { border-color: var(--colors-border-strong); }
.rule h4 { margin: 0; font-family: var(--fonts-mono); font-size: 14px; font-weight: 600; }
.rule .desc { color: var(--colors-text-muted); font-size: 13px; margin: 4px 0 13px; line-height: 1.5; }
.params { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
.param { display: flex; flex-direction: column; gap: 5px; }
.param label, .field label { font-family: var(--fonts-mono); font-size: 10px; color: var(--colors-text-dim); text-transform: uppercase; letter-spacing: .6px; }
.param input { width: 92px; }
/* aligned parameter grid (rule detail) */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; margin: 4px 0 16px; }
.pgrid .param { width: auto; }
.pgrid .param input { width: 100%; }
.toggle {
  font-family: var(--fonts-mono); font-size: 10px; padding: 5px 12px;
  border-radius: var(--sizing-radius); letter-spacing: .5px; cursor: pointer;
  background: var(--colors-surface); border: 1px solid var(--colors-border-strong);
  color: var(--colors-text-muted); transition: border-color .15s, color .15s, background .15s;
}
.toggle:hover { border-color: var(--colors-accent); color: var(--colors-text); }
.toggle.on {
  background: var(--colors-accent); color: #0a0b0e;
  border-color: var(--colors-accent); font-weight: 700;
}
.toggle.on:hover { color: #0a0b0e; }
.toggle.off { color: var(--colors-text-muted); }

/* ── settings sub-tabs ── */
.stabs { display: flex; gap: 0; border-bottom: 1px solid var(--colors-border); margin-bottom: 18px; flex-wrap: wrap; }
.stab { font-family: var(--fonts-mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--colors-text-muted); background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 11px 18px; cursor: pointer; }
.stab:hover { color: var(--colors-text); border-color: transparent; }
.stab.on { color: var(--colors-accent); border-bottom-color: var(--colors-accent); }

/* ── rules dense table ── */
.rtbl { border: 1px solid var(--colors-border); border-radius: var(--sizing-radius); overflow: hidden; }
.rhd, .rrow { display: grid; grid-template-columns: 22px 2.1fr 1fr .8fr .8fr .9fr .7fr 92px 24px; align-items: center; gap: 10px; padding: 11px 14px; }
.rhd { font-family: var(--fonts-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--colors-text-dim); background: var(--colors-bg-elev); border-bottom: 1px solid var(--colors-border); }
.rrow { border-top: 1px solid var(--colors-border); background: var(--colors-surface); cursor: pointer; }
.rrow:hover { background: var(--colors-bg-elev); }
.led { width: 7px; height: 7px; border-radius: 1px; display: inline-block; }
.led.on { background: var(--colors-long); box-shadow: 0 0 6px var(--colors-long); }
.led.idle { background: var(--colors-text-dim); }
.rid { font-family: var(--fonts-mono); font-size: 10px; color: var(--colors-accent); border: 1px solid rgba(255,160,40,.3); padding: 1px 5px; border-radius: 3px; margin-right: 8px; }
.rnm { font-weight: 600; }
.rcat { font-family: var(--fonts-mono); font-size: 10px; color: var(--colors-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.rnum { font-family: var(--fonts-mono); text-align: right; font-variant-numeric: tabular-nums; }
.rexp { justify-self: end; color: var(--colors-text-dim); font-family: var(--fonts-mono); }
.rrow.open { background: var(--colors-accent-soft); }
.rdetail {
  background: var(--colors-bg);
  border-top: 1px solid var(--colors-border-strong);
  border-left: 2px solid var(--colors-accent);
  padding: 18px 16px;
  box-shadow: inset 0 9px 14px -12px rgba(0,0,0,.9);
}
.rdoc { white-space: pre-wrap; font-family: var(--fonts-mono); font-size: 11px; color: var(--colors-text-muted); background: var(--colors-bg); border: 1px solid var(--colors-border); border-radius: var(--sizing-radius); padding: 12px; max-height: 280px; overflow: auto; margin-top: 12px; line-height: 1.5; }

/* ── misc ── */
canvas { width: 100%; height: 120px; display: block; }
.banner { padding: 11px 14px; border-radius: var(--sizing-radius); margin-bottom: 13px; font-size: 13px; border: 1px solid rgba(255,180,84,.3); background: rgba(255,180,84,.06); color: var(--colors-warn); font-family: var(--fonts-mono); }
.phase { font-family: var(--fonts-mono); color: var(--colors-text-dim); font-size: 11px; letter-spacing: .3px; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }