:root, [data-theme="dark"] {
  --bg: #0D1117; --panel: #161B22; --border: #30363D; --text: #E6EDF3; --muted: #8B949E;
  --profit: #4ADE80; --loss: #F87171; --blocked: #FBBF24; --pending: #60A5FA;
}
[data-theme="light"] {
  --bg: #F6F8FA; --panel: #FFFFFF; --border: #D0D7DE; --text: #1F2328; --muted: #59636E;
  --profit: #15803D; --loss: #DC2626; --blocked: #B45309; --pending: #2563EB;
}
[data-density="comfortable"] { --base: 12.5px; --cell-pad: 4px 8px; --panel-pad: 12px; --gap: 16px; }
[data-density="compact"]     { --base: 11.5px; --cell-pad: 2px 6px; --panel-pad: 10px; --gap: 12px; }
[data-density="dense"]       { --base: 10.5px; --cell-pad: 1px 4px; --panel-pad: 8px;  --gap: 8px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--base); line-height: 1.5;
  font-variant-numeric: tabular-nums;
  padding: var(--gap);
}
h1 { font-size: 16px; margin: 0 0 8px 0; }
h2 { font-size: 13px; margin: 0 0 8px 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
a { color: var(--pending); }

.topbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; background: var(--panel); border: 1px solid var(--border); margin-bottom: var(--gap); }
.topbar .spacer { flex: 1; }
.chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); }
.chip.ok { color: var(--profit); border-color: var(--profit); }
.chip.bad { color: var(--loss); border-color: var(--loss); }
.chip.warn { color: var(--blocked); border-color: var(--blocked); }
.chip.info { color: var(--pending); border-color: var(--pending); }
.chip.locked { color: var(--blocked); border-color: var(--blocked); }

.panel { background: var(--panel); border: 1px solid var(--border); padding: var(--panel-pad); margin-bottom: var(--gap); }
.panel > h2 { margin-top: 0; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--cell-pad); border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 500; }
td.num, th.num { text-align: right; }
.profit { color: var(--profit); } .loss { color: var(--loss); } .blocked { color: var(--blocked); } .pending { color: var(--pending); }
.muted { color: var(--muted); }
.agent-row td { background: color-mix(in srgb, var(--pending) 12%, transparent); }

form { margin: 0; }
fieldset { border: 1px solid var(--border); margin: 0 0 8px 0; padding: 8px; }
legend { color: var(--muted); padding: 0 4px; }
label { display: block; margin-top: 8px; color: var(--muted); }
input[type="text"], input[type="password"], textarea, select {
  width: 100%; max-width: 640px; display: block; margin-top: 2px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 4px 8px;
  font: inherit;
}
textarea { min-height: 64px; }
button {
  font: inherit; margin: 8px 8px 0 0; padding: 4px 12px; cursor: pointer;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
}
button.primary { border-color: var(--pending); color: var(--pending); }
button.danger { border-color: var(--loss); color: var(--loss); }
:focus-visible { outline: 2px solid var(--pending); outline-offset: 1px; }
.help { color: var(--muted); font-size: calc(var(--base) - 1px); margin: 2px 0 0 0; }
.state-line { color: var(--muted); }
.error { color: var(--loss); }
.ok { color: var(--profit); }
.warn { color: var(--blocked); }
.login-box { max-width: 420px; margin: 10vh auto; }
.uri { word-break: break-all; background: var(--bg); border: 1px solid var(--border); padding: 8px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--panel); padding: 4px 8px; }