/* Unit page (device-unit.js). Palette + resets + .btn* + .lf-skel* come from
   theme.css. The Certificate panel's table and pills come from
   run-table.css, the session log viewer from ota-session-log.css, and the beta
   switch (.bc-toggle) from beta-toggle.css; the unit page loads all three, and
   so do the views they were taken from. No other view's sheet is loaded here. */

.du-root {
  display: flex;
  flex-direction: column;
  /* Minus the Devices tab strip when it is shown (admin-subnav.css). */
  height: calc(100dvh - var(--lf-nav-h) - var(--lf-strip-h, 0px));
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* The history chart and outcome colours: dark is the default theme. */
  --du-line: #6da7ec;
  --du-ok: #3987e5;
  --du-bad: #e66767;
  --du-none: #6b7280;
  --du-unknown: #e0912f;
}
html[data-theme="light"] .du-root {
  --du-line: #184f95;
  --du-ok: #2a78d6;
  --du-bad: #d03b3b;
  --du-none: #a8adb5;
  --du-unknown: #c26b12;
}
.du-wrap { width: 100%; max-width: 1280px; margin: 0 auto; box-sizing: border-box; }

.du-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 18px 20px 6px;
  flex-shrink: 0;
}
.du-top h1 { font-size: 20px; font-weight: 700; color: var(--lf-text); margin: 4px 0 0; }
.du-top-search { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }

.du-search {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.du-query {
  background: var(--lf-panel);
  border: 1px solid var(--lf-border);
  border-radius: 8px;
  color: var(--lf-text);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 8px 10px;
  width: 300px;
  max-width: 100%;
  min-width: 0;
}
.du-query:focus { outline: 2px solid var(--lf-accent); outline-offset: -1px; }

.du-hint {
  color: var(--lf-text-muted);
  font-size: 12px;
  flex-shrink: 0;
}
.du-hint-error { color: var(--lf-error); }

.du-body {
  flex: 0 0 auto;
  padding: 14px 20px 32px;
}

.du-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.du-dim { color: var(--lf-text-muted); font-size: 12px; }

.du-error {
  color: var(--lf-error);
  background: var(--lf-error-bg);
  border: 1px solid var(--lf-error-border);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 14px;
  max-width: 760px;
}
.du-error .btn { margin-left: 8px; }

.du-empty, .du-chooser {
  background: var(--lf-panel);
  border: 1px solid var(--lf-border);
  border-radius: 10px;
  padding: 16px 18px;
  max-width: 760px;
}
.du-empty-head { color: var(--lf-text); font-size: 14px; font-weight: 600; }
.du-empty-detail { color: var(--lf-text-muted); font-size: 12px; line-height: 1.6; margin-top: 8px; }

.du-choice-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.du-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 10px 12px;
  border: 1px solid var(--lf-border);
  border-radius: 8px;
  color: var(--lf-text);
  font-size: 12px;
  text-decoration: none;
}
.du-choice:hover { border-color: var(--lf-accent); }
.du-choice-model { font-weight: 600; }

/* Recent lookups */
.du-recent { max-width: 760px; }
.du-recent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.du-recent-head h2 { font-size: 14px; font-weight: 700; color: var(--lf-text); }
.du-recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.du-recent-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--lf-panel);
  border: 1px solid var(--lf-border);
  border-radius: 8px;
  color: var(--lf-text);
  font-size: 13px;
  text-decoration: none;
}
.du-recent-item:hover { border-color: var(--lf-accent); }

/* Header card: the unit's id, model and status chips. */
.du-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  background: var(--lf-panel);
  border: 1px solid var(--lf-border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.du-hero:empty { display: none; }
.du-hero-main { min-width: 0; flex: 1 1 360px; }
.du-hero-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.du-hero-name { font-size: 24px; font-weight: 600; color: var(--lf-text); overflow-wrap: anywhere; }
.du-hero-model { font-size: 15px; font-weight: 700; color: var(--lf-text); }
.du-hero-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.du-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.du-chip {
  font-size: 12px; font-weight: 600; line-height: 1.4; padding: 3px 10px; border-radius: 999px;
  color: var(--lf-text); background: var(--lf-panel-alt); border: 1px solid var(--lf-border);
}
.du-chip-ok { color: var(--lf-accent); background: color-mix(in srgb, var(--lf-accent) 12%, transparent); border-color: color-mix(in srgb, var(--lf-accent) 35%, transparent); }
.du-chip-warn { background: var(--lf-warn-bg); border-color: var(--lf-warn-border); }
.du-chip-bad { color: var(--lf-error); background: var(--lf-error-bg); border-color: var(--lf-error-border); }
.du-chip-test { border-style: dashed; }

/* Panels: a wide main column and a side column; a phone stacks them. */
.du-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 16px;
  align-items: start;
}
.du-panels-one { grid-template-columns: minmax(0, 760px); }
.du-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.du-panel {
  background: var(--lf-panel);
  border: 1px solid var(--lf-border);
  border-radius: 10px;
  padding: 16px 18px;
  min-width: 0;
}
.du-panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; margin-bottom: 12px;
}
.du-panel-acts:empty { display: none; }
.du-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--lf-text);
  margin: 0;
}
.du-panel-body { min-width: 0; overflow-x: auto; }
.du-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.du-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 16px;
  margin: 0;
  font-size: 13px;
}
.du-facts dt { color: var(--lf-text-muted); font-size: 12px; }
.du-facts dd { margin: 0; color: var(--lf-text); min-width: 0; overflow-wrap: anywhere; }

.du-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lf-text);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--lf-warn-bg);
  border: 1px solid var(--lf-warn-border);
}
.du-not-linked, .du-coming {
  font-size: 12px;
  line-height: 1.5;
  color: var(--lf-text-muted);
}
.du-last-known {
  color: var(--lf-text); background: var(--lf-warn-bg); border: 1px solid var(--lf-warn-border);
  border-radius: 4px; padding: 0 4px; font-style: italic; font-size: 11px;
}

/* Version pin, under the firmware facts. A pin is drawn as a .du-note (it
   overrides the normal update path for this unit); none, or a failed read, is
   one quiet line. */
.du-pin { margin-top: 10px; }
.du-pin-head { font-weight: 600; margin-bottom: 4px; }
.du-pin-list { list-style: none; margin: 0 0 6px; padding: 0; font-size: 13px; }
.du-pin-list li { padding: 1px 0; overflow-wrap: anywhere; }

/* OTA sessions: a table, quiet runs folded into one row. */
.du-seg { display: inline-flex; }
.du-seg-btn {
  font: inherit; font-size: 12px; min-height: 30px; padding: 4px 12px; cursor: pointer;
  color: var(--lf-text); background: var(--lf-panel); border: 1px solid var(--lf-border); margin-left: -1px;
}
.du-seg-btn:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.du-seg-btn:last-child { border-radius: 0 8px 8px 0; }
.du-seg-btn[aria-pressed="true"] { background: var(--lf-text); color: var(--lf-panel); border-color: var(--lf-text); position: relative; }
.du-tablewrap { overflow-x: auto; }
/* The sessions table scrolls inside its panel with the header held in place. */
.du-sess-scroll {
  max-height: min(560px, 70vh);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--lf-border);
  border-radius: 10px;
}
.du-sess-scroll:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }
.du-sess-scroll .du-sess-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--lf-panel);
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--lf-border);
}
.du-sess-scroll .du-sess-table tbody tr:last-child td { border-bottom: none; }
.du-sess-more td { color: var(--lf-text-muted); font-size: 12px; text-align: center; padding: 10px; }
.du-sess-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--lf-text); }
.du-sess-table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--lf-text-muted);
  padding: 6px 10px; border-bottom: 1px solid var(--lf-border); white-space: nowrap;
}
.du-sess-table td { padding: 8px 10px; border-bottom: 1px solid var(--lf-border); white-space: nowrap; }
.du-sess-table .du-num { text-align: right; font-variant-numeric: tabular-nums; }
.du-grp td { color: var(--lf-text-muted); }
.du-grp-child td { background: var(--lf-panel-alt); }
.du-row-active td { background: color-mix(in srgb, var(--lf-accent) 10%, transparent); }
.du-out { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.du-out-ok { color: var(--lf-accent); background: color-mix(in srgb, var(--lf-accent) 12%, transparent); }
.du-out-bad { color: var(--lf-error); background: var(--lf-error-bg); }
.du-out-none { color: var(--lf-text-muted); padding-left: 0; }
.du-out-unknown { color: var(--lf-text); background: var(--lf-warn-bg); }
.du-linkbtn {
  font: inherit; font-size: 13px; background: none; border: none; padding: 4px 2px; cursor: pointer;
  color: var(--lf-accent);
}
.du-linkbtn:hover, .du-linkbtn.active { text-decoration: underline; }

/* Firmware history: CPU1's version as a step line, a tick per session. */
.du-hist-chart { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding-top: 26px; }
.du-hist-dlab.du-hist-dlab-r { transform: translate(-100%, -160%); }
.du-hist-dlab.du-hist-dlab-l { transform: translate(0, -160%); }
.du-hist-y { position: relative; }
.du-hist-ylab {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: 11px; color: var(--lf-text-muted); white-space: nowrap;
}
/* Room for the newest dot and tick, which sit on the right edge. */
.du-hist-plot { min-width: 0; padding-right: 6px; }
.du-hist-area { position: relative; }
.du-hist-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.du-hist-grid { stroke: var(--lf-border); stroke-width: 1; stroke-dasharray: 3 4; }
.du-hist-line { fill: none; stroke: var(--du-line); stroke-width: 2; stroke-linejoin: round; }
.du-hist-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--du-line); box-shadow: 0 0 0 2px var(--lf-panel);
}
.du-hist-dlab {
  position: absolute; transform: translate(-50%, -160%);
  font-size: 11px; color: var(--lf-text-muted); white-space: nowrap; pointer-events: none;
}
.du-hist-ticks { position: relative; height: 14px; margin-top: 10px; }
.du-tk { position: absolute; top: 0; width: 3px; height: 14px; border-radius: 1px; transform: translateX(-50%); }
.du-tk-ok { background: var(--du-ok); }
.du-tk-bad { background: var(--du-bad); }
.du-tk-none { background: var(--du-none); }
.du-tk-unknown { background: var(--du-unknown); }
.du-hist-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--lf-text-muted); margin-top: 6px; }
.du-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--lf-text); margin-top: 12px; }
.du-lg { display: inline-flex; align-items: center; gap: 6px; }
.du-tk-sw { display: inline-block; width: 3px; height: 12px; border-radius: 1px; }

/* Test unit: a real switch (role="switch", aria-checked) and a note. */
.du-test-status { font-size: 13px; line-height: 1.5; color: var(--lf-text); }
.du-test-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.du-test-note {
  flex: 1 1 160px; min-width: 0; font: inherit; font-size: 13px; padding: 6px 9px; min-height: 32px; box-sizing: border-box;
  color: var(--lf-text); background: var(--lf-panel); border: 1px solid var(--lf-border); border-radius: 8px;
}
.du-switch {
  font: inherit; font-size: 13px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer;
  min-height: 32px; padding: 4px 12px 4px 6px; box-sizing: border-box; color: var(--lf-text);
  background: var(--lf-panel); border: 1px solid var(--lf-border); border-radius: 999px;
}
.du-switch:disabled { opacity: 0.55; cursor: default; }
.du-switch-track { position: relative; width: 30px; height: 18px; border-radius: 9px; flex: none; background: var(--lf-border); transition: background 0.15s; }
.du-switch-dot { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--lf-panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
.du-switch[aria-checked="true"] { border-color: var(--lf-accent); }
.du-switch[aria-checked="true"] .du-switch-track { background: var(--lf-accent); }
.du-switch[aria-checked="true"] .du-switch-dot { transform: translateX(12px); }
@media (prefers-reduced-motion: reduce) { .du-switch-track, .du-switch-dot { transition: none; } }
.du-log-viewer {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lf-border);
  border-radius: 10px;
  overflow: hidden;
}
.du-log-viewer[hidden] { display: none; }
.du-log-viewer .log-stream { max-height: 420px; }

/* Owner: the CRM customer card under the app account. */
.du-owner-card { margin-top: 12px; }
.du-owner-card:empty { display: none; }
/* The side column shows the owner's three newest chats; the section head keeps the full count and the CRM has the rest. */
.du-owner-card.lf-cust-card .cust-conv-list .cust-conv-row:nth-child(n+4) { display: none; }
.du-owner-note { margin-top: 10px; font-size: 12px; }
.du-owner-rma-list { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; }
.du-owner-rma-list li { padding: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.du-owner-rma-list a { color: var(--lf-accent); text-decoration: none; }
.du-owner-rma-list a:hover { text-decoration: underline; }

/* Beta */
.du-beta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--lf-text);
}
.du-beta-foot { margin-top: 8px; }

/* Pairing PIN card (moved from the retired pairing-pins.css; the class names
   and data-pins-* attributes are the ones that view used). */
.pins-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pins-unit {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--lf-text-muted);
}
.pins-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--lf-text);
}
.pins-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin-top: 16px;
  font-size: 12px;
}
.pins-meta-k {
  color: var(--lf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  align-self: center;
}
.pins-meta-v { color: var(--lf-text); }
.pins-empty-head { color: var(--lf-text); font-size: 14px; font-weight: 600; }
.pins-empty-detail {
  color: var(--lf-text-muted);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 8px;
}

/* Phone width: a 16px gutter, one column, nothing wider than the screen. */
@media (max-width: 960px) {
  .du-panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .du-top { padding: 12px 16px 4px; }
  .du-top-search { align-items: stretch; flex: 1 1 100%; }
  .du-search { flex-wrap: wrap; }
  .du-query { flex: 1 1 200px; width: auto; }
  .du-body { padding: 12px 16px 24px; }
  .du-panel { padding: 14px; }
  .du-hero { padding: 14px; }
  .du-hero-name { font-size: 19px; }
  .du-hist-chart { grid-template-columns: 52px minmax(0, 1fr); }
}


/* Unit log panel (views/unit-log-panel.js). */
.ul-factory {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--lf-border);
  font-size: 13px;
  color: var(--lf-text);
}
.ul-factory-replaced { background: var(--lf-warn-bg); border-color: var(--lf-warn-border); }
.ul-factory-head { font-weight: 600; }
.ul-factory-lines { margin: 6px 0 0; padding-left: 18px; color: var(--lf-text-muted); font-size: 12px; }
.ul-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0 8px;
  font-size: 12px;
  color: var(--lf-text-muted);
}
.ul-control { display: inline-flex; align-items: center; gap: 6px; }
.ul-control select, .ul-uploader {
  background: var(--lf-panel);
  border: 1px solid var(--lf-border);
  border-radius: 6px;
  color: var(--lf-text);
  font-size: 12px;
  padding: 4px 6px;
}
.ul-uploader { width: 260px; max-width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ul-status { color: var(--lf-text-muted); font-size: 12px; margin-bottom: 8px; }
/* The records scroll inside the panel, header held; the next page loads near the end (unit-log-panel.js). */
.ul-scroll {
  max-height: min(560px, 70vh);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--lf-border);
  border-radius: 10px;
}
.ul-scroll:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }
.ul-scroll .ul-table th { position: sticky; top: 0; z-index: 1; background: var(--lf-panel); border-bottom: none; box-shadow: inset 0 -1px 0 var(--lf-border); }
.ul-scroll .ul-table tbody tr:last-child td { border-bottom: none; }
.ul-more-row { padding: 8px; text-align: center; border-top: 1px solid var(--lf-border); }
.ul-more-row .ul-more { margin-top: 0; }
.ul-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ul-table th {
  text-align: left;
  color: var(--lf-text-muted);
  font-weight: 600;
  padding: 4px 8px;
  border-bottom: 1px solid var(--lf-border);
}
.ul-table td { padding: 4px 8px; border-bottom: 1px solid var(--lf-border); color: var(--lf-text); vertical-align: top; }
.ul-table td:first-child { white-space: nowrap; }
.ul-unanchored { color: var(--lf-text-muted); font-style: italic; }
.ul-detail { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ul-row-owner td { border-top: 2px solid var(--lf-accent); font-weight: 600; }
.ul-row-reset td { border-top: 1px dashed var(--lf-border); }
.ul-row-service td:first-child { box-shadow: inset 3px 0 0 var(--lf-accent); } /* spec D-SERVICE: the band */
.ul-row-crash td { background: var(--lf-error-bg); }
.ul-row-startup td { font-weight: 600; }
.ul-row-raw td { color: var(--lf-text-muted); }
.ul-conflict {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 10px;
  color: var(--lf-text);
  background: var(--lf-warn-bg);
  border: 1px solid var(--lf-warn-border);
}
.ul-more { margin-top: 8px; }
.ul-none { color: var(--lf-text-muted); font-size: 13px; }
.ul-snapshot { margin-top: 12px; font-size: 12px; color: var(--lf-text); }
.ul-snapshot summary { cursor: pointer; color: var(--lf-text-muted); }
.ul-snap-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin-top: 8px; }
.ul-snap-k { color: var(--lf-text-muted); }

@media (max-width: 640px) {
  .ul-uploader { width: 100%; }
  .ul-control { flex: 1 1 100%; }
}

/* The Unit log panel's RMA card (plan 04b): facts from the whole ring, above the timeline. */
.ul-rma {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--lf-border);
  border-radius: 8px;
  background: var(--lf-panel);
  font-size: 13px;
  color: var(--lf-text);
}
.ul-rma-wait { color: var(--lf-text-muted); font-style: italic; }
.ul-rma-head { font-weight: 600; margin-bottom: 6px; }
.ul-rma-facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 0; }
.ul-rma-facts dt { color: var(--lf-text-muted); }
.ul-rma-facts dd { margin: 0; }
.ul-rma-sub { margin-top: 8px; color: var(--lf-text-muted); font-size: 12px; }
.ul-rma-lines { margin: 4px 0 0; padding-left: 18px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
@media (max-width: 640px) { .ul-rma-facts { grid-template-columns: 1fr; } }

/* Unit log: the subsystem scorecard and the health lanes (unit-log-vitals.js). Dark is the default theme; the
   categorical hues are the admin's validated set, the clipping and volume ramps one hue each, darker meaning more
   in light and brighter meaning more in dark. Status (good, warning, serious) keeps the theme's own colors and
   always carries an icon and a word. */
.du-root {
  --ulv-blue: #3987e5; --ulv-orange: #d95926; --ulv-green: #199e70; --ulv-amber: #c98500;
  --ulv-pink: #d55181; --ulv-purple: #9085e9;
  --ulv-h0: #2c2640; --ulv-h1: #1d3557; --ulv-h2: #234a7d; --ulv-h3: #2f64a8; --ulv-h4: #3f82d3; --ulv-h5: #6aa3ea; --ulv-h6: #a8ccf7;
  --ulv-v0: #12271c; --ulv-v1: #173a28; --ulv-v2: #1d5337; --ulv-v3: #246d48; --ulv-v4: #2f8a5c; --ulv-v5: #49a876; --ulv-v6: #7cc79c;
}
html[data-theme="light"] .du-root {
  --ulv-blue: #2a78d6; --ulv-orange: #eb6834; --ulv-green: #1baf7a; --ulv-amber: #b07400;
  --ulv-pink: #e87ba4; --ulv-purple: #6250d6;
  --ulv-h0: #f1f2f5; --ulv-h1: #d6e6fb; --ulv-h2: #a9cbf5; --ulv-h3: #6fa6eb; --ulv-h4: #3a7fdc; --ulv-h5: #1f5fbf; --ulv-h6: #123f8c;
  --ulv-v0: #e8f5ee; --ulv-v1: #c7e9d5; --ulv-v2: #9fd8b8; --ulv-v3: #6fc597; --ulv-v4: #3fae76; --ulv-v5: #22915c; --ulv-v6: #0f6e43;
}
.ulv { margin-bottom: 12px; }
.ulv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; }
.ulv-head-lanes { margin-top: 14px; }
.ulv-title { font-weight: 600; font-size: 13px; color: var(--lf-text); }
.ulv-sub { font-size: 12px; color: var(--lf-text-muted); }
.ulv-score { border: 1px solid var(--lf-border); border-radius: 10px; padding: 2px 12px; }
.ulv-row {
  display: grid; grid-template-columns: 96px max-content minmax(0, 1fr) 88px; gap: 4px 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--lf-border); font-size: 12.5px;
}
.ulv-row:last-child { border-bottom: none; }
.ulv-name { font-weight: 600; color: var(--lf-text); }
.ulv-ev { color: var(--lf-text-muted); min-width: 0; }
.ulv-sp { justify-self: end; line-height: 0; }
.ulv-stat {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: 2px 9px 2px 6px; border-radius: 999px;
}
.ulv-stat svg { width: 11px; height: 11px; flex: none; }
.ulv-good { color: color-mix(in srgb, var(--lf-success) 72%, var(--lf-text)); background: var(--lf-success-bg); }
.ulv-warn { color: color-mix(in srgb, var(--lf-warn) 72%, var(--lf-text)); background: var(--lf-warn-bg); }
.ulv-bad { color: color-mix(in srgb, var(--lf-error) 72%, var(--lf-text)); background: var(--lf-error-bg); }
.ulv-none { color: var(--lf-text-muted); background: var(--lf-panel-alt); }
.ulv-spark .ulv-sline { fill: none; stroke: var(--ulv-blue); stroke-width: 1.6; stroke-linejoin: round; }
.ulv-spark .ulv-tick { fill: var(--ulv-orange); }
.ulv-spark .ulv-base { stroke: var(--lf-border); stroke-width: 1; }
.ulv-row[data-ulv-row="stability"] .ulv-tick { fill: var(--lf-text-muted); }
.ulv-row[data-ulv-row="memory"] .ulv-sline { stroke: var(--ulv-green); }
.ulv-row[data-ulv-row="wireless"] .ulv-tick { fill: var(--ulv-purple); }

.ulv-lanes { position: relative; border: 1px solid var(--lf-border); border-radius: 10px; padding: 10px 12px 6px; outline: none; }
.ulv-lanes:focus-visible { box-shadow: 0 0 0 2px var(--lf-accent); }
.ulv-lane { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 8px; }
.ulv-lab { display: flex; flex-direction: column; line-height: 1.25; }
.ulv-lname { font-size: 12px; font-weight: 600; color: var(--lf-text); }
.ulv-lunit { font-size: 10.5px; color: var(--lf-text-muted); }
.ulv-plot svg { display: block; width: 100%; }
.ulv-seg { fill: var(--lf-panel-alt); }
.ulv-div { stroke: var(--lf-text-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.ulv-div-bad { stroke: var(--lf-error); stroke-width: 1.5; stroke-dasharray: none; }
.ulv-grid { stroke: var(--lf-border); stroke-width: 1; }
.ulv-low { stroke: var(--ulv-orange); stroke-width: 1; stroke-dasharray: 3 3; }
.ulv-vband { fill: var(--ulv-blue); opacity: 0.22; }
.ulv-vline { fill: none; stroke: var(--ulv-blue); stroke-width: 2; stroke-linejoin: round; }
.ulv-pair { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.ulv-p1 { stroke: var(--ulv-blue); }
.ulv-p2 { stroke: var(--ulv-green); }
.ulv-p3 { stroke: var(--ulv-purple); }
.ulv-mem { fill: none; stroke: var(--ulv-green); stroke-width: 1.6; stroke-linejoin: round; }
.ulv-h0 { fill: var(--ulv-h0); } .ulv-h1 { fill: var(--ulv-h1); } .ulv-h2 { fill: var(--ulv-h2); } .ulv-h3 { fill: var(--ulv-h3); }
.ulv-h4 { fill: var(--ulv-h4); } .ulv-h5 { fill: var(--ulv-h5); } .ulv-h6 { fill: var(--ulv-h6); }
.ulv-vol0 { fill: var(--ulv-v0); } .ulv-vol1 { fill: var(--ulv-v1); } .ulv-vol2 { fill: var(--ulv-v2); } .ulv-vol3 { fill: var(--ulv-v3); }
.ulv-vol4 { fill: var(--ulv-v4); } .ulv-vol5 { fill: var(--ulv-v5); } .ulv-vol6 { fill: var(--ulv-v6); }
.ulv-m-crash { fill: var(--lf-error); }
.ulv-m-power { fill: var(--ulv-orange); stroke: var(--lf-panel); stroke-width: 1; }
.ulv-m-protection { fill: var(--ulv-amber); stroke: var(--lf-panel); stroke-width: 1; }
.ulv-m-links { fill: var(--ulv-pink); stroke: var(--lf-panel); stroke-width: 1; }
.ulv-m-wireless { fill: var(--ulv-purple); stroke: var(--lf-panel); stroke-width: 1; }
.ulv-m-audio { fill: var(--ulv-blue); stroke: var(--lf-panel); stroke-width: 1; }
.ulv-m-change { fill: var(--lf-text-muted); }
.ulv-axis { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.ulv-axis-row { position: relative; height: 16px; }
.ulv-axl { position: absolute; top: 0; font-size: 10.5px; color: var(--lf-text-muted); white-space: nowrap; }
.ulv-cross { position: absolute; top: 8px; bottom: 22px; width: 1px; background: var(--lf-text); pointer-events: none; }
.ulv-tip {
  position: absolute; top: 12px; z-index: 2; max-width: 260px; pointer-events: none;
  background: var(--lf-panel); border: 1px solid var(--lf-border); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); padding: 7px 9px; font-size: 11.5px; color: var(--lf-text); line-height: 1.5;
}
.ulv-tip b { font-weight: 600; }
.ulv-tl { display: flex; align-items: baseline; gap: 6px; }
.ulv-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--lf-text-muted); }
.ulv-sw-supply, .ulv-sw-p1, .ulv-sw-audio { background: var(--ulv-blue); }
.ulv-sw-clip { background: var(--ulv-h4); }
.ulv-sw-signal, .ulv-sw-p2, .ulv-sw-memory { background: var(--ulv-green); }
.ulv-sw-p3, .ulv-sw-wireless { background: var(--ulv-purple); }
.ulv-sw-volume { background: var(--ulv-v4); }
.ulv-sw-crash { background: var(--lf-error); }
.ulv-sw-power { background: var(--ulv-orange); }
.ulv-sw-protection { background: var(--ulv-amber); }
.ulv-sw-links { background: var(--ulv-pink); }
.ulv-plot { position: relative; }
.ulv-marks { position: absolute; inset: 0; pointer-events: none; }
.ulv-mk { position: absolute; top: 2px; transform: translateX(-50%); line-height: 0; pointer-events: auto; }
.ulv-ramp { display: inline-flex; gap: 1px; margin: 0 2px; }
.ulv-rs { display: inline-block; width: 12px; height: 8px; }
.ulv-rs1 { background: var(--ulv-h1); } .ulv-rs2 { background: var(--ulv-h2); } .ulv-rs3 { background: var(--ulv-h3); }
.ulv-rs4 { background: var(--ulv-h4); } .ulv-rs5 { background: var(--ulv-h5); } .ulv-rs6 { background: var(--ulv-h6); }
.ulv-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 11px; color: var(--lf-text-muted); }
.ulv-lg { display: inline-flex; align-items: center; gap: 5px; }
.ulv-divkey { display: inline-block; width: 0; height: 10px; border-left: 1px dashed var(--lf-text-muted); }
@media (max-width: 640px) {
  .ulv-row { grid-template-columns: minmax(0, 1fr) max-content; }
  .ulv-ev { grid-column: 1 / -1; }
  .ulv-sp { display: none; }
  .ulv-lane, .ulv-axis { grid-template-columns: 68px minmax(0, 1fr); }
  .ulv-lunit { display: none; }
}