:root {
  color-scheme: dark;
  --bg: #090d10;
  --surface: #10161b;
  --surface-raised: #151d23;
  --surface-soft: #0c1216;
  --line: #263139;
  --line-bright: #34424c;
  --text: #eef4f1;
  --muted: #89969e;
  --green: rgb(0 132 131);
  --green-deep: rgb(0 58 58);
  --cyan: #5fc9e8;
  --amber: #f2b457;
  --red: #ff766e;
  --voltage: #62d6ff;
  --current: #6fe49d;
  --power: #f6bd60;
  --radius: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 0; background: var(--bg); font-size: 17px; }
body { min-width: 0; margin: 0; color: var(--text); background: radial-gradient(circle at 58% -20%, #16302b 0, transparent 32rem), var(--bg); }
button, input, select { min-width: 0; max-width: 100%; font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .42; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 1.12rem; letter-spacing: -.02em; }
h2 { margin-bottom: 0; font-size: 1.06rem; letter-spacing: -.02em; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.status-bar {
  position: sticky; z-index: 20; top: 0; display: grid;
  grid-template-columns: auto auto minmax(180px, 1fr) auto auto;
  gap: 13px; align-items: center; height: 42px; padding: 0 14px;
  color: #dce7e2; background: rgb(8 12 15 / 96%); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px);
}
.brand { display: inline-flex; gap: 7px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 26px; height: 26px; place-items: center; color: #07100c; background: var(--green); border-radius: 7px 7px 7px 2px; font-size: .64rem; font-weight: 900; letter-spacing: .06em; }
.brand strong { font-size: .84rem; letter-spacing: .03em; }
.connection-state, .status-message, .terminal-tools, .toolbar-actions { display: flex; align-items: center; }
.connection-state { gap: 7px; font-size: .75rem; color: var(--muted); }
.connection-actions { display: flex; align-items: center; gap: 8px; }
.auto-reconnect { display: flex; gap: 5px; align-items: center; font-size: .65rem; white-space: nowrap; }
.auto-reconnect input { width: auto; height: auto; accent-color: var(--green); }
.status-dot { width: 7px; height: 7px; background: #5e6a71; border-radius: 50%; box-shadow: 0 0 0 3px rgb(94 106 113 / 12%); }
.status-dot.connected { background: var(--green); box-shadow: 0 0 0 3px rgb(82 211 145 / 13%); }
.status-message { min-width: 0; gap: 5px; font-size: .73rem; }
.status-message > span:first-child, .status-message > span:last-child { color: var(--muted); }
.status-message > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-message strong { color: var(--green); }
.status-message.warning strong { color: var(--amber); }
.status-message.error strong { color: var(--red); }
.device-chip { max-width: 150px; overflow: hidden; color: var(--muted); font-family: "Cascadia Code", Consolas, monospace; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-shell { width: min(1760px, calc(100% - 20px)); margin: 10px auto 18px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(550px, .92fr) minmax(650px, 1.08fr); gap: 10px; align-items: stretch; }
.panel { min-width: 0; background: linear-gradient(150deg, rgb(22 29 35 / 98%), rgb(13 19 23 / 98%)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 50px rgb(0 0 0 / 18%); }
.power-panel, .monitor-panel { height: 610px; padding: 14px; overflow: hidden; }
.panel-heading, .monitor-toolbar, .terminal-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compact-heading { min-height: 31px; margin-bottom: 9px; }
.eyebrow { margin-bottom: 2px; color: var(--green); font-size: .62rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.source-summary-line { display: flex; min-width: 0; gap: 7px; align-items: center; color: var(--muted); font-size: .71rem; }
.source-summary-line strong { color: var(--text); }
.source-summary-line > span:not(.pill) { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { padding: 3px 7px; color: var(--green); background: rgb(0 132 131 / 9%); border: 1px solid rgb(0 132 131 / 28%); border-radius: 999px; font-size: .64rem; font-weight: 800; white-space: nowrap; }

.request-bar { display: grid; grid-template-columns: .72fr .72fr 1.15fr auto; gap: 7px; align-items: end; padding: 8px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; }
label > span:first-child { display: block; margin-bottom: 3px; color: var(--muted); font-size: .67rem; font-weight: 750; }
input, select { width: 100%; height: 32px; padding: 0 9px; color: var(--text); background: #0b1014; border: 1px solid var(--line-bright); border-radius: 7px; outline: none; }
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgb(82 211 145 / 12%); }
.field-with-unit { position: relative; display: block; }
.field-with-unit input { padding-right: 27px; }
.field-with-unit b { position: absolute; right: 9px; top: 50%; color: var(--muted); font-size: .69rem; transform: translateY(-50%); }
.button { height: 34px; padding: 0 11px; color: var(--text); background: var(--surface-raised); border: 1px solid var(--line-bright); border-radius: 7px; font-size: .72rem; font-weight: 780; transition: border-color .12s ease, background .12s ease, transform .08s ease; }
.button:not(:disabled):active { transform: translateY(1px); }
.button:not(:disabled):hover { border-color: #53636d; background: #1b252c; }
.button-primary { color: #06100b; background: var(--green); border-color: var(--green); }
.button-primary:not(:disabled):hover { background: #70e5a8; border-color: #70e5a8; }
.button-secondary { color: #b8f2f1; background: var(--green-deep); border-color: #08706f; }
.button-quiet { height: 29px; padding: 0 8px; background: #10171b; }
.button-toggle[aria-pressed="true"] { color: #b8f2f1; background: var(--green-deep); border-color: #08706f; }
.button-compact { height: 29px; }
.request-feedback { display: flex; gap: 7px; align-items: center; min-height: 27px; padding: 0 3px; color: var(--muted); font-size: .7rem; }
.request-feedback .feedback-dot { width: 6px; height: 6px; background: #69767d; border-radius: 50%; }
.request-feedback.pending { color: var(--amber); }
.request-feedback.pending .feedback-dot { background: var(--amber); box-shadow: 0 0 0 3px rgb(242 180 87 / 12%); }
.request-feedback.success { color: var(--green); }
.request-feedback.success .feedback-dot { background: var(--green); }
.request-feedback.error { color: var(--red); }
.request-feedback.error .feedback-dot { background: var(--red); }

.pd-flow-note { margin: 1px 3px 7px; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.pd-flow-note strong { color: #cdd8d3; }
.capability-table-wrap { height: 420px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
table { width: 100%; border-spacing: 0; border-collapse: collapse; }
.capability-table { table-layout: fixed; font-size: .73rem; }
.capability-table th { height: 26px; padding: 0 7px; color: #77868e; background: #0d1317; border-bottom: 1px solid var(--line); font-size: .61rem; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.capability-table abbr { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.capability-table th:nth-child(1) { width: 45px; }.capability-table th:nth-child(2) { width: 88px; }.capability-table th:nth-child(3) { width: 145px; }.capability-table th:nth-child(4) { width: 110px; }.capability-table th:nth-child(5) { width: 150px; }
.capability-table td { height: 32px; padding: 2px 7px; overflow: hidden; border-bottom: 1px solid #1e282e; text-overflow: ellipsis; white-space: nowrap; }
.capability-table tbody tr:last-child td { border-bottom: 0; }
.capability-table tbody tr { transition: background .12s ease; }
.capability-table tbody tr:hover { background: rgb(95 201 232 / 5%); }
.capability-table tbody tr.is-selected { background: linear-gradient(90deg, rgb(82 211 145 / 15%), rgb(82 211 145 / 3%)); box-shadow: inset 2px 0 var(--green); }
.capability-table tbody tr.is-pending { background: linear-gradient(90deg, rgb(242 180 87 / 16%), transparent); box-shadow: inset 2px 0 var(--amber); }
.pdo-index { color: var(--green); font-family: "Cascadia Code", Consolas, monospace; font-weight: 800; }
.supply-type { display: inline-flex; align-items: center; gap: 5px; font-weight: 750; }
.supply-type::before { width: 5px; height: 5px; content: ""; background: #62717a; border-radius: 50%; }
.supply-type.pps::before { background: var(--cyan); }.supply-type.avs::before { background: var(--amber); }.supply-type.fixed::before { background: var(--green); }
.capability-actions { display: flex; gap: 4px; justify-content: flex-end; }
.capability-actions .button { height: 25px; padding: 0 7px; font-size: .64rem; }
.empty-row td { height: 388px; color: var(--muted); text-align: center; }

.monitor-toolbar { min-height: 35px; margin-bottom: 8px; }
.toolbar-actions { flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.compact-select { width: 76px; height: 29px; padding: 0 6px; font-size: .68rem; }
.average-control { display: inline-flex; align-items: center; overflow: hidden; height: 29px; border: 1px solid var(--line-bright); border-radius: 7px; }
.average-control > span { padding: 0 7px; color: var(--muted); font-size: .64rem; font-weight: 750; }
.average-button { align-self: stretch; padding: 0 7px; color: var(--muted); background: #10171b; border: 0; border-left: 1px solid var(--line); font-size: .64rem; font-weight: 750; }
.average-button[aria-pressed="true"] { color: #b8f2f1; background: var(--green-deep); }
.average-button:hover { color: var(--text); background: #1b252c; }
.contract-strip { display: grid; grid-template-columns: .9fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.contract-strip > span { min-width: 0; padding: 7px 9px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; }
.contract-strip small, .contract-strip strong, .contract-strip em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contract-strip small { color: var(--muted); font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.contract-strip strong { margin: 2px 0 1px; font-size: .87rem; }
.contract-strip em { color: var(--muted); font-size: .64rem; font-style: normal; }
.chart-wrap { position: relative; height: 444px; overflow: hidden; background: linear-gradient(180deg, #0a0f13, #0c1216); border: 1px solid var(--line); border-radius: 8px; }
#power-chart { display: block; width: 100%; height: 100%; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #65737b; font-size: .76rem; pointer-events: none; }
.chart-cursor { position: absolute; top: 9px; right: 9px; padding: 6px 8px; color: #dfe8e4; background: rgb(8 13 16 / 88%); border: 1px solid var(--line-bright); border-radius: 6px; font: .69rem/1.45 "Cascadia Code", Consolas, monospace; pointer-events: none; }
.chart-legend { display: flex; gap: 14px; align-items: center; justify-content: flex-end; height: 25px; color: var(--muted); font-size: .65rem; }
/* Live readouts beside the graph, one per band. The padding lines each tile
   up with its band: the chart draws 7 px below its 1 px border and leaves
   20 px for the time axis, with 6 px between bands. */
.chart-area { display: grid; grid-template-columns: minmax(0, 1fr) 156px; gap: 8px; }
.live-readings { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 0 21px; }
.reading { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 12px; background: linear-gradient(90deg, rgb(255 255 255 / 3%), transparent), var(--surface-soft); border: 1px solid var(--line); border-left: 3px solid currentColor; border-radius: 8px; }
.reading > span { color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reading strong { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; white-space: nowrap; }
.reading b { font: 650 1.5rem/1.1 "Cascadia Code", Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.reading small { color: currentColor; font-size: .78rem; font-weight: 800; opacity: .75; }
.reading-voltage { color: var(--voltage); }.reading-current { color: var(--current); }.reading-power { color: var(--power); }

.actions-panel { margin-top: 10px; padding: 11px 14px 13px; }
.action-groups { display: grid; gap: 7px; }
.action-group { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 7px; align-items: center; }
.action-group > span { margin: 0; color: var(--muted); font-size: .65rem; font-weight: 750; }
.action-group > div { display: flex; flex-wrap: wrap; gap: 5px; }
.action-group .button { flex: 1 1 90px; height: 30px; padding: 0 8px; }
.button-warning { color: #ffd7c4; background: #342019; border-color: #80503f; }
.telemetry-note { margin: 7px 2px 0; color: var(--muted); font-size: .62rem; line-height: 1.4; }

.terminal-panel { margin-top: 10px; padding: 11px 14px 13px; }
.terminal-heading { min-height: 30px; margin-bottom: 7px; }
.terminal-tools { flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.black-box-action { display: grid; justify-items: center; gap: 2px; }
.black-box-action small { color: var(--muted); font-size: .58rem; white-space: nowrap; }
.auto-scroll { display: flex; gap: 5px; align-items: center; color: var(--muted); font-size: .69rem; }
.auto-scroll input { width: auto; height: auto; accent-color: var(--green); }
.terminal { height: 220px; overflow: auto; padding: 8px 11px; color: #cbd8d2; background: #070b0d; border: 1px solid var(--line); border-radius: 8px 8px 0 0; font: .71rem/1.48 "Cascadia Code", Consolas, monospace; }
.terminal-line { display: grid; grid-template-columns: 68px 12px minmax(0, 1fr); gap: 4px; }
.terminal-time { color: #4f6069; }.terminal-direction { color: #788b82; }.terminal-line.outgoing .terminal-text, .terminal-line.outgoing .terminal-direction { color: #6fe49d; }.terminal-line.error .terminal-text { color: #ff918b; }.terminal-line.diagnostic .terminal-text, .terminal-line.diagnostic .terminal-direction { color: var(--amber); }.terminal-line.raw-transport .terminal-text, .terminal-line.raw-transport .terminal-direction { color: #98b4ff; }
.terminal-text { overflow-wrap: anywhere; white-space: pre-wrap; }.terminal-update-count { margin-left: 6px; color: var(--green); }
.raw-command-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 5px 6px 5px 11px; background: #10161a; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; }
.raw-command-form > span { color: var(--green); }.raw-command-form input { height: 29px; }
.reference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.reference-card { background: #0c1216; border: 1px solid var(--line); border-radius: 7px; }
.reference-card summary { padding: 8px 10px; color: #b8c4be; font-size: .7rem; font-weight: 750; cursor: pointer; }
.reference-content { padding: 0 10px 9px; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.reference-content dl { margin: 0; }.reference-content dl > div { display: grid; grid-template-columns: minmax(100px, .4fr) 1fr; gap: 9px; padding: 4px 0; border-top: 1px solid #1d272d; }.reference-content dt { color: #cdd8d3; font-weight: 750; }.reference-content dd { margin: 0; }.reference-content p { margin: 6px 0 0; }
.reference-wide { grid-column: 1 / -1; }
.pd-primer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pd-primer-grid section { padding-top: 7px; border-top: 1px solid #1d272d; }
.pd-primer-grid h3 { margin: 0 0 5px; color: #cdd8d3; font-size: .73rem; }
code { color: #8be1b0; font-family: "Cascadia Code", Consolas, monospace; }
.notice { margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; font-size: .76rem; }.notice-error { color: #ffd2cf; background: #3d1b1c; border: 1px solid #7c3635; }
.update-banner { color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); }
.update-banner.update-available { color: var(--text); background: #2c2414; border-color: #6b5325; }
.update-banner a { color: var(--cyan); }
.bug-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.bug-notice a { color: var(--cyan); }
.bug-notice-actions { display: flex; gap: 6px; }
.bug-report-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; font-size: .68rem; color: var(--muted); }
.bug-report-row label { display: flex; gap: 5px; align-items: center; color: var(--text); }
.bug-report-row input { width: auto; height: auto; accent-color: var(--green); }
.bug-report-row a { color: var(--cyan); }
.bug-dialog { width: min(520px, calc(100% - 32px)); padding: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--line-bright); border-radius: var(--radius); }
.bug-dialog::backdrop { background: rgb(0 0 0 / .6); }
.bug-dialog h2 { margin: 0 0 10px; font-size: 1rem; }
.bug-dialog label { display: block; margin-bottom: 6px; font-size: .76rem; }
.bug-dialog textarea { width: 100%; box-sizing: border-box; padding: 8px; color: var(--text); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; font: inherit; resize: vertical; }
.bug-dialog .bug-include { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.bug-dialog .bug-include input { width: auto; height: auto; accent-color: var(--green); }
.bug-note { min-height: 1.2em; color: var(--muted); font-size: .72rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 6px; }

@media (max-width: 1180px) {
  .status-bar { grid-template-columns: auto auto 1fr auto; }.device-chip { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }.power-panel, .monitor-panel { height: auto; }.capability-table-wrap { height: auto; }.chart-wrap { height: 360px; }
}
@media (max-width: 720px) {
  .auto-reconnect { display: none; }
  .dashboard-shell { width: min(100% - 10px, 1760px); margin-top: 5px; }.status-message > span:last-child { display: none; }
  /* Phone header: the logo, the connection dot, the status word, and the buttons. */
  .brand strong, #connection-label, .status-message > span:first-child { display: none; }
  .status-bar { gap: 9px; padding: 0 9px; }
  .request-bar { grid-template-columns: 1fr 1fr; }.request-bar .request-submit { width: 100%; }.preference-field { grid-column: 1 / 2; }
  .source-summary-line { display: none; }.toolbar-actions { justify-content: flex-start; }.contract-strip { grid-template-columns: 1fr; }
  /* Phone widths: the voltage column takes what is left, so the table fits. */
  .capability-table th:nth-child(4), .capability-table td:nth-child(4) { display: none; }.capability-table th:nth-child(1) { width: 38px; }.capability-table th:nth-child(2) { width: 70px; }.capability-table th:nth-child(3) { width: auto; }.capability-table th:nth-child(5) { width: 104px; }
  .terminal { height: 250px; }.reference-grid, .pd-primer-grid { grid-template-columns: 1fr; }
  .action-group { grid-template-columns: 1fr; }
  .chart-area { grid-template-columns: 1fr; }
  .live-readings { order: -1; grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
  .reading { padding: 6px 8px; }.reading b { font-size: 1.05rem; }.reading small { font-size: .65rem; }
}