:root {
  --bg: #0f1412;
  --panel: #1a211e;
  --ink: #e8efe9;
  --muted: #8a9a90;
  --line: #2c3832;
  --accent: #3dba7a;
  --danger: #e24b4b;
  --warn: #e2a23a;
  --btn: #24302b;
  font-family: system-ui, "Segoe UI", "Noto Sans", sans-serif;
  font-synthesis: none;
}
[data-theme="light"] {
  --bg: #f3f6f4;
  --panel: #ffffff;
  --ink: #14201a;
  --muted: #5b6b62;
  --line: #d5ddd8;
  --btn: #e7eee9;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { min-height: 100vh; padding-bottom: 2.6rem; }
body.pm-in {
  height: 100dvh; min-height: 0; padding-bottom: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
body.pm-in > header { position: static; flex: 0 0 auto; }
body.pm-in > main.screen.is-on { flex: 1 1 auto; min-height: 0; overflow: auto; }
body.pm-in > .status-bar { position: static; flex: 0 0 auto; }
a { color: var(--accent); }
header {
  position: sticky; top: 0; z-index: 20; background: var(--panel);
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  justify-content: space-between; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line);
}
header button, header select, header a.tab, .profile-btn {
  min-height: 44px;
}
.brand { font-weight: 700; letter-spacing: 0.02em; }
.brand a { color: inherit; text-decoration: none; }
.pm-home { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: inherit; }
.pm-home-hero { gap: 0.75rem; }
.pm-mark { width: 36px; height: 36px; display: block; border-radius: 8px; }
.pm-home-hero .pm-mark { width: 48px; height: 48px; }
.pm-lockup { height: 52px; width: auto; display: block; }
.shop-screen.is-on { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) {
  .shop-screen.is-on { grid-template-columns: 1fr 1fr; }
  body.operator .shop-screen.is-on { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1280px) {
  body:not(.operator) .shop-screen.is-on { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.shop-head h2 { margin: 0; }
.shop-add { display: grid; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.dir-list { display: grid; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.dir-line { display: flex; gap: 0.35rem; align-items: stretch; }
.dir-line > .row-btn { flex: 1; }
.dir-line > .row-edit { width: auto; flex: 0 0 auto; }
.dir-list button {
  width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 1rem;
}
.dir-list button.active { outline: 2px solid var(--accent); }
.dir-add { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); align-items: end; }
.dir-add button { min-height: 44px; }
.sess-list { display: grid; gap: 0.35rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
main { display: grid; gap: 1rem; padding: 1rem; }
main.screen { display: none !important; padding: 1rem; gap: 1rem; }
main.screen.is-on { display: grid !important; }
main[hidden], [hidden] { display: none !important; }
body.hub-home header .brand { display: none; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem;
}
h1 { margin: 0 0 0.4rem; font-size: 1.6rem; }
h2 { margin: 0 0 0.75rem; font-size: 1rem; color: var(--muted); font-weight: 600; }
.hub { max-width: 1100px; margin: 0 auto; }
.cards { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem; color: inherit; text-decoration: none; min-height: 8rem;
}
.card:hover { outline: 2px solid var(--accent); }
.card strong { display: block; font-size: 1.15rem; margin-bottom: 0.35rem; }
.card span { color: var(--muted); font-size: 0.92rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tab, .pills button, .modes button {
  appearance: none; border: 1px solid var(--line); background: var(--btn); color: var(--ink);
  border-radius: 10px; padding: 0.55rem 0.8rem; font-size: 0.95rem; cursor: pointer;
}
.tab.active, button.active { outline: 2px solid var(--accent); }
.gauges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 900px) {
  .gauges { grid-template-columns: 1.4fr repeat(4, 1fr); }
  .work { grid-template-columns: 1.5fr 0.9fr; }
  .setup-screen, .manager-grid { grid-template-columns: 1fr 1fr; }
}
.work, .setup-screen, .manager-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  main.docs-screen.is-on { grid-template-columns: 300px 1fr; align-items: start; }
}
.docs-nav { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow: auto; }
.docs-nav h3 { margin: 1rem 0 0.4rem; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.docs-links { display: grid; gap: 0.4rem; }
.docs-links a, .docs-links button, .docs-group button {
  display: block; width: 100%; text-align: left; padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--btn); color: var(--ink); text-decoration: none; font-size: 0.92rem; cursor: pointer;
}
.docs-group { display: grid; gap: 0.3rem; }
.docs-group button.active { outline: 2px solid var(--accent); }
.doc { line-height: 1.55; overflow-wrap: anywhere; }
.doc h2 { font-size: 1.4rem; color: var(--ink); margin-top: 0; }
.doc h3 { font-size: 1.1rem; margin: 1.4rem 0 0.5rem; }
.doc h4, .doc h5 { font-size: 1rem; margin: 1.1rem 0 0.4rem; }
.doc code { background: var(--bg); padding: 0.05rem 0.3rem; border-radius: 4px; font-size: 0.9em; }
.doc pre { background: var(--bg); padding: 0.8rem; border-radius: 8px; overflow: auto; }
.doc pre code { background: none; padding: 0; }
.doc blockquote { margin: 0.8rem 0; padding: 0.4rem 0.8rem; border-left: 3px solid var(--accent); color: var(--muted); }
.doc-table { overflow-x: auto; margin: 0.8rem 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.doc th, .doc td { border: 1px solid var(--line); padding: 0.35rem 0.5rem; text-align: left; vertical-align: top; }
.doc th { background: var(--bg); }
.tile { background: var(--bg); border-radius: 10px; padding: 0.8rem; }
.tile span { display: block; color: var(--muted); font-size: 0.8rem; }
.tile strong { display: block; font-size: clamp(1.6rem, 5vw, 2.6rem); font-variant-numeric: tabular-nums; }
.tile em { color: var(--muted); font-style: normal; font-size: clamp(1.05rem, 2.1vw, 1.55rem); }
.tile.hero strong { font-size: clamp(2rem, 6vw, 3.4rem); color: var(--accent); }
.tile.hero em { font-size: clamp(1.2rem, 2.6vw, 1.85rem); }
button, select, input[type="text"], input[type="tel"], input[type="password"], input[type="email"] {
  appearance: none; border: 1px solid var(--line); background: var(--btn); color: var(--ink);
  border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 1rem;
}
button { cursor: pointer; }
button:disabled, select:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: var(--accent); color: #062214; border-color: transparent; font-weight: 700; }
button.danger { background: var(--danger); color: #fff; border-color: transparent; font-weight: 700; min-height: 3.2rem; }
.modes, .pills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.7rem; }
.field label { color: var(--muted); font-size: 0.85rem; }
.num { display: flex; gap: 0.4rem; }
input[type="number"], input[type="password"], input[type="email"], input[type="text"], input[type="tel"], select { width: 100%; }
.num input[type="number"], input[type="number"] {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 10px; padding: 0.7rem; font-size: 1.15rem; font-variant-numeric: tabular-nums;
}
.num button { min-width: 2.6rem; font-size: 1.2rem; }
.note { color: var(--muted); font-size: 0.9rem; }
.banner {
  margin: 0; padding: 0.65rem 0.9rem; border-radius: 10px; background: #3a2a12; color: #f3d7a2;
}
[data-theme="light"] .banner { background: #fff3d6; color: #5a3d00; }
.banner.live { background: #3a1212; color: #ffd0d0; }
.banner.stale { background: #5a0f0f; color: #fff; font-weight: 700; }
[data-theme="light"] .banner.stale { background: #b3261e; color: #fff; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; }
.badge.on { background: var(--accent); color: #062214; border-color: transparent; }
.badge.warn { background: var(--warn); color: #2a1c00; border-color: transparent; }
.chart-panel canvas { width: 100%; height: 320px; display: block; background: var(--bg); border-radius: 10px; }
body:not(.operator) #screen-dashboard.is-on {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
body:not(.operator) #screen-dashboard.is-on .work {
  flex: 1 1 auto; min-height: 0; height: auto; align-items: stretch;
}
body:not(.operator) #screen-dashboard.is-on .chart-panel {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
body:not(.operator) #screen-dashboard.is-on .chart-panel canvas {
  flex: 1 1 auto; height: auto; min-height: 8rem; width: 100%;
}
body:not(.operator) #screen-dashboard.is-on .controls { min-height: 0; overflow: auto; }
.trace-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.trace-menu { position: relative; }
.trace-menu summary {
  list-style: none; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center;
  padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--btn); font-size: 1rem;
}
.trace-menu summary::-webkit-details-marker { display: none; }
.trace-cats {
  position: absolute; z-index: 8; top: calc(100% + 0.3rem); left: 0;
  display: flex; gap: 1rem; padding: 0.75rem 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  max-height: 20rem; overflow: auto; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.trace-cats section { min-width: 9rem; }
.trace-cats h4 { margin: 0 0 0.35rem; font-size: 0.85rem; color: var(--muted); font-weight: 650; }
.trace-cats label { display: flex; gap: 0.4rem; align-items: center; font-size: 1rem; padding: 0.15rem 0; white-space: nowrap; }
.trace-cats label.empty { opacity: 0.4; }
.trace-on { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.trace-on button { min-height: 36px; font-size: 1rem; }
.pills button.empty { opacity: 0.4; }
.view-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.view-bar button { min-height: 44px; }
#screen-dashboard .gauges { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#screen-dashboard .strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.view-only { display: none; }
.dash-stage { min-height: 0; display: flex; flex-direction: column; }
.stage { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 0.45rem; }
#screen-dashboard[data-view="modern"] .stage-modern,
#screen-dashboard[data-view="dynamics"] .stage-modern { display: flex; }
#screen-dashboard[data-view="mainline"] .stage-mainline { display: flex; }
.chart-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chart-host .chart-panel { flex: 1; min-height: 0; position: relative; }
.chart-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.chart-actions button, .chart-unit select { min-height: 40px; font-size: 1rem; padding: 0.35rem 0.8rem; }
.chart-actions button.active { border-color: var(--accent); color: var(--accent); }
.chart-unit { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1rem; color: var(--muted); }
.chart-sheet { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; padding: 0.6rem 0; font-size: 1rem; }
.chart-sheet label { display: inline-flex; align-items: center; gap: 0.35rem; }
.chart-sheet input[type="text"] { min-height: 40px; font-size: 1rem; }
#plot { cursor: crosshair; touch-action: none; }
.chart-panel { position: relative; }
.chart-peak-pop {
  position: absolute; z-index: 6; top: 0.4rem; left: 0.4rem;
  min-width: 16rem; padding: 0.85rem 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  cursor: grab; touch-action: none; user-select: none;
}
.chart-peak-pop:active { cursor: grabbing; }
.chart-peak-pop strong { display: block; font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.chart-peak-pop span { color: var(--muted); font-size: 0.95rem; }
.chart-peak-pop div { margin-bottom: 0.55rem; }
.gauges.showing-peaks .tile.hero strong { color: var(--accent); }
.ml-pages, .ml-grid-tools { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ml-pages button { min-height: 40px; }
.ml-page { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 0.45rem; }
#screen-dashboard[data-ml="ramp"] .ml-page[data-mlpage="ramp"],
#screen-dashboard[data-ml="grid"] .ml-page[data-mlpage="grid"],
#screen-dashboard[data-ml="linear"] .ml-page[data-mlpage="linear"],
#screen-dashboard[data-ml="nonlinear"] .ml-page[data-mlpage="nonlinear"],
#screen-dashboard[data-ml="log"] .ml-page[data-mlpage="log"] { display: flex; }
.ml-ramp { display: flex; gap: 0.6rem; flex: 1; min-height: 0; }
.ml-ramp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.ml-peaks { display: flex; gap: 1.6rem; }
.ml-peaks strong { display: block; font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ml-peaks em, .ml-peaks span { display: block; color: var(--muted); font-style: normal; font-size: 0.85rem; }
.ml-afr { height: 5.5rem; width: 100%; display: block; background: var(--bg); }
.ml-ramp-side { width: 13.5rem; flex-shrink: 0; display: grid; gap: 0.45rem; align-content: start; }
.ml-ramp-side input, .lin-fields input, .ml-grid-tools select { width: 100%; }
#ml-grid { display: grid; gap: 0.45rem; flex: 1; align-content: stretch; }
.ml-cell { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.7rem; min-height: 4.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.ml-cell span { color: var(--muted); font-size: 0.8rem; }
.ml-cell strong { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.ml-form { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 0.7rem; min-height: 0; }
.ml-profile { width: 100%; height: 150px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.lin-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.lin-summary { display: grid; gap: 0.35rem; font-variant-numeric: tabular-nums; }
.lin-summary div { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 0.3rem; }
.nl-scroll { overflow-x: auto; }
.nl-table { border-collapse: collapse; }
.nl-table th, .nl-table td { border: 1px solid var(--line); padding: 0.2rem 0.3rem; font-size: 0.8rem; font-weight: 500; }
.nl-table input { width: 4.6rem; }
.ml-logs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ml-logs canvas { flex: 1; min-height: 3.2rem; width: 100%; background: var(--bg); }
#screen-dashboard[data-view="mainline"] .chart-tools,
#screen-dashboard[data-view="mainline"] #traces,
#screen-dashboard[data-view="mainline"] #aux { display: none; }
#screen-dashboard[data-view="mainline"] .work { grid-template-columns: 1fr; }
#screen-dashboard[data-view="mainline"] .controls { display: none; }
.ml-app { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.ml-top, .ml-tabs, .ml-log-bar, .ml-people, .ml-dialog-bar { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.ml-sec { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 0.35rem; }
.ml-app[data-sec="dyno"] .ml-sec[data-sec="dyno"],
.ml-app[data-sec="log"] .ml-sec[data-sec="log"] { display: flex; }
#screen-dashboard[data-ml="main"] .ml-page[data-mlpage="main"],
#screen-dashboard[data-ml="ramp2"] .ml-page[data-mlpage="ramp2"],
#screen-dashboard[data-ml="channels"] .ml-page[data-mlpage="channels"] { display: flex; }
.ml-peaks { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ml-peaks strong { font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 0.9; font-variant-numeric: tabular-nums; }
.ml-ramp-side { width: 16rem; }
.ml-readout { font-variant-numeric: tabular-nums; }
.ml-dialog { position: absolute; inset: 2.4rem 0.3rem 0.3rem; z-index: 6; background: var(--panel); border: 1px solid var(--line); overflow: auto; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ml-dialog[hidden] { display: none !important; }
.ml-setup-top { display: grid; grid-template-columns: 1.7fr 0.9fr; gap: 0.6rem; min-height: 16rem; }
.lin-board { position: relative; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; grid-template-rows: auto auto 1fr auto auto; gap: 0.3rem; min-height: 16rem; }
.lin-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lin-board label { z-index: 1; font-size: 0.75rem; background: var(--panel); padding: 0.15rem 0.25rem; }
.at-end { grid-column: 2; grid-row: 1; }
.at-end-hold { grid-column: 3; grid-row: 1; }
.at-rate { grid-column: 1; grid-row: 2; }
.at-time { grid-column: 1; grid-row: 3; align-self: center; }
.at-start { grid-column: 1; grid-row: 4; }
.at-pre { grid-column: 1; grid-row: 5; }
.at-down { grid-column: 3; grid-row: 2; }
.at-finish { grid-column: 3; grid-row: 4; }
.at-finish-hold { grid-column: 4; grid-row: 4; }
.ml-setup-lower { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
.ml-setup-box { border: 1px solid var(--line); padding: 0.45rem; display: grid; gap: 0.3rem; }
.ml-setup-box h3 { margin: 0; font-size: 0.8rem; }
.ml-setup-box input[type="number"], .ml-setup-box input[type="text"], .ml-setup-box select { width: 100%; }
.ml-log-row { display: grid; grid-template-columns: 12rem 1fr; gap: 0.35rem; flex: 1; min-height: 0; }
.ml-log-legend { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; font-size: 0.78rem; }
.ml-logs { flex: 1; }
.ml-cell strong { font-size: clamp(1.6rem, 4vh, 3rem); }
#ml-grid { align-content: stretch; }
.ml-all { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; overflow: auto; }
.ml-all div { border: 1px solid var(--line); padding: 0.35rem 0.5rem; display: flex; justify-content: space-between; gap: 0.4rem; }
#ml-nonlinear-pane[hidden] { display: none !important; }
#screen-dashboard[data-view="mainline"] .gauges .tile strong,
#screen-dashboard[data-view="dynamics"] .gauges .tile strong {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.curve-rows { display: grid; gap: 0.35rem; }
.curve-rows .row input { width: 6rem; }
#hold-mark { font-variant-numeric: tabular-nums; }
#vh-log { white-space: pre-wrap; max-height: 10rem; overflow: auto; }
body.operator .run-actions { position: sticky; bottom: 0; z-index: 5; background: var(--panel); padding: 0.4rem 0; }
body.operator .run-actions button, body.operator #dump { min-height: 56px; }
@media (orientation: landscape) and (max-height: 900px) {
  body.operator.pm-in #screen-run.is-on { overflow: hidden; }
  body.operator #screen-run.is-on .work { min-height: 0; }
}
.peaks { margin-top: 0.7rem; color: var(--muted); gap: 1rem; }
.run-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin: 0.8rem 0; }
.fan-strip { margin: 0.8rem 0; display: grid; gap: 0.4rem; }
.fan-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.fan-row input[type="range"] { width: 7rem; }
.run-list { display: grid; gap: 0.5rem; }
.run-list button, .people button.row-btn {
  width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 1rem;
}
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.45rem 0.3rem; border-bottom: 1px solid var(--line); }
.stat { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.lobby .tile.hero strong { font-size: clamp(3rem, 12vw, 7rem); }
.stream-stage { min-height: 220px; display: grid; place-items: center; background: var(--bg); border-radius: 12px; }
.stream-stage.live { outline: 3px solid var(--danger); }
.kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.log { max-height: 280px; overflow: auto; font-size: 0.85rem; color: var(--muted); }
.log div { border-bottom: 1px solid var(--line); padding: 0.3rem 0; }
.chan-grid { display: grid; gap: 0.45rem; }
.chan { display: flex; justify-content: space-between; gap: 0.6rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  #screen-sensors.setup-screen { grid-template-columns: 1fr; }
}
.sensor-live { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.65rem; margin: 0.2rem 0 1rem; }
.sensor-tile {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.75rem 0.85rem; display: grid; gap: 0.15rem; align-content: start;
}
.sensor-tile span { color: var(--muted); font-size: 0.85rem; }
.sensor-tile strong { font-size: clamp(1.6rem, 3vw, 2.4rem); font-variant-numeric: tabular-nums; }
.sensor-tile button { justify-self: start; margin-top: 0.25rem; }
.sensor-fold { margin: 0.2rem 0 0.8rem; }
.sensor-fold summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.sensor-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.1rem 1rem; }
.devices-screen.is-on { display: grid !important; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) {
  .devices-screen.is-on { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .devices-screen.is-on > .panel:first-child { grid-column: 1 / -1; }
}
#iot-list { display: grid; gap: 0.55rem; margin: 0.4rem 0 0; grid-template-columns: minmax(0, 1fr); }
.device-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; min-width: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.2rem 1.3rem;
}
.device-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.device-head h3 { margin: 0; font-size: 1.8rem; font-weight: 600; }
.device-id { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.95rem; overflow-wrap: anywhere; }
.device-state { font-size: 1rem; white-space: nowrap; }
.device-state.online { color: var(--accent); }
.device-state.stale { color: var(--warn); }
.device-live { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 12rem)); gap: 0.55rem; justify-content: start; }
.device-card .tile { padding: 0.7rem 0.75rem; background: var(--panel); }
.device-card .tile.hero { grid-column: span 2; }
.device-card .tile.hero strong { font-size: clamp(2.4rem, 7vw, 3.6rem); color: var(--accent); }
.device-card .tile strong { font-size: 1.45rem; overflow-wrap: anywhere; }
.device-why { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.95rem; }
.profile-review { display: grid; gap: 0.4rem; margin-top: 0.75rem; }
.profile-review textarea, .profile-review input { width: 100%; }
.profile-id { display: grid; gap: 0.35rem; align-items: center; }
.device-job { margin: 0; color: var(--muted); }
.device-job:empty { display: none; }
.device-toggle { justify-self: start; }
.device-card:not(.is-open) .device-body { display: none; }
.device-card.is-quiet:not(.is-open) > :not(.device-head) { display: none; }
.device-card.is-quiet:not(.is-open) { padding: 0.55rem 0.9rem; gap: 0; }
.device-card.is-quiet:not(.is-open) .device-head h3 { font-size: 1.15rem; }
.device-card.is-quiet .device-head { cursor: pointer; }
.devices-head { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem; }
.devices-head h2 { margin: 0; }
#shop-setup {
  max-width: 36rem; width: calc(100% - 2rem); border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); color: var(--ink); padding: 1rem 1.1rem;
}
#shop-setup::backdrop { background: rgba(0, 0, 0, 0.55); }
#shop-setup h2 { margin: 0.8rem 0 0.4rem; }
.device-body { display: grid; gap: 0.35rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.device-fold { border-top: 1px solid var(--line); padding: 0.35rem 0 0.15rem; }
.device-fold[hidden] { display: none; }
.device-fold summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.device-fold > div:empty { display: none; }
.sniff-table { width: 100%; border-collapse: collapse; }
.sniff-table th, .sniff-table td { text-align: left; padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.sniff-table th { color: var(--muted); font-weight: 500; }
.sniff-hex { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.03em; }
.sniff-hex .chg { color: var(--accent); font-weight: 700; }
.sniff-pids { columns: 2; margin: 0.2rem 0 0.4rem; padding-left: 1.1rem; }
.sniff-pids li { break-inside: avoid; padding: 0.12rem 0; }
.device-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; min-width: 0; }
.device-sec h4 { margin: 0; font-size: 0.95rem; color: var(--muted); }
.device-sec .note { margin: 0; }
.device-kv th { color: var(--muted); font-weight: 500; white-space: pre; width: 45%; }
.device-kv td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.device-kv th, .device-kv td, .device-log th, .device-log td { padding: 0.3rem 0.35rem; font-size: 0.9rem; }
.boost-range-list .row { align-items: center; }
.boost-range-list input[type="text"] { flex: 1; min-width: 8rem; }
.boost-range-list input[type="number"] { width: 6rem; }
.device-log-wrap { overflow-x: auto; }
.device-log { font-variant-numeric: tabular-nums; }
.device-log th { color: var(--muted); font-weight: 500; }
.spark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem; }
.device-sparks .spark-grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.spark-cell { background: var(--panel); border-radius: 10px; padding: 0.5rem 0.6rem; display: grid; gap: 0.15rem; }
.spark-cell span { color: var(--muted); font-size: 0.8rem; }
.spark-cell strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 28px; cursor: crosshair; }
.device-sparks .spark { height: 84px; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark-cursor { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark-when, .spark-rate { color: var(--muted); font-style: normal; font-size: 0.8rem; }
.device-halt { margin: 0 0 0.4rem; }
.device-channels-label { margin: 0.2rem 0 0; font-weight: 600; }
.device-manage { padding-top: 0.6rem; border-top: 1px solid var(--line); }
.device-manage .field { margin: 0; }
.device-manage .field label { display: grid; gap: 0.3rem; }
.device-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.2rem 0.6rem; font-size: 0.92rem; }
.device-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.device-actions select { flex: 1; min-width: 9rem; width: auto; }
.device-screen-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem 0.7rem; }
.device-field { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--muted); }
.device-field input[type="range"] { width: 70%; vertical-align: middle; }
.screen-zones { grid-column: 1 / -1; height: 0.9rem; border-radius: 0.3rem; }
.ota-progress { display: grid; gap: 0.4rem; margin: 0.15rem 0 0.35rem; }
.ota-progress-label { font-size: 1.05rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.ota-bar {
  height: 16px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.ota-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.25s ease;
}
.ota-bar.indeterminate > i {
  width: 38%;
  animation: ota-slide 1.15s ease-in-out infinite;
}
@keyframes ota-slide {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(320%); }
}
.overlay-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.35rem; margin: 0.4rem 0 0.8rem; }
.overlay-picks label { display: flex; gap: 0.35rem; align-items: center; font-size: 0.9rem; }
.home-foot { color: var(--muted); font-size: 0.85rem; }
.display .tile strong { font-size: clamp(2.2rem, 8vw, 4.2rem); }
body.skin-mainline_dynolog { --accent: #d4a017; }
body.skin-dyno_dynamics { --accent: #3d8cda; }
header #who { display: none !important; }
.job-chip { position: relative; }
.job-open {
  display: inline-flex; align-items: center; gap: 0.45rem;
  max-width: min(28rem, 70vw); min-height: 40px; padding: 0.2rem 0.75rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--btn); color: var(--ink); cursor: pointer;
}
.job-open strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-open em { color: var(--muted); font-style: normal; font-size: 0.85rem; }
.job-panel {
  position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 40;
  width: min(22rem, 92vw); display: grid; gap: 0.45rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.job-panel label { display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.job-panel select, .job-panel button { width: 100%; }
.profile-id { grid-template-columns: minmax(0, 1.2fr) 6.5rem minmax(0, 1fr); }
.dm-profile { position: relative; }
.dm-profile-trigger {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0 0.35rem 0 0.65rem; border: 2px solid var(--line);
  border-radius: 999px; background: var(--panel); color: var(--ink);
  cursor: pointer; min-height: 40px;
}
.dm-profile-trigger-name {
  font-size: 0.85rem; font-weight: 600; max-width: 9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 560px) {
  body > header { position: static; }
  .dm-profile-trigger-name { display: none; }
  .dm-profile-trigger { padding: 0; width: 40px; height: 40px; }
}
.dm-avatar { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; background: var(--btn); }
.dm-avatar-lg { width: 48px; height: 48px; }
.dm-profile-menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); min-width: 16rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.4rem; display: flex; flex-direction: column; gap: 0.1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 40;
}
.dm-profile-menu[hidden] { display: none !important; }
.dm-profile-menu-header { display: flex; gap: 0.75rem; align-items: center; padding: 0.65rem 0.55rem 0.75rem; }
.dm-profile-name { font-weight: 600; }
.dm-profile-meta { font-size: 0.75rem; color: var(--muted); }
.dm-profile-menu > a, .dm-profile-menu > button[role="menuitem"] {
  display: block; width: 100%; text-align: left; padding: 0.55rem 0.65rem;
  border: none; border-radius: 6px; background: transparent; color: var(--ink); font: inherit;
}
.dm-profile-sep { height: 1px; background: var(--line); margin: 0.35rem 0.25rem; }
.dm-profile-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; padding: 0.35rem 0.4rem; font-size: 0.8rem; }
.dm-profile-theme > span { grid-column: 1 / -1; color: var(--muted); }
.dm-profile-theme button {
  border: 1px solid var(--line); background: var(--btn); color: var(--ink);
  border-radius: 6px; padding: 0.5rem 0.2rem; min-height: 44px; font-size: 0.75rem;
}
.dm-profile-theme button[aria-pressed="true"] { outline: 2px solid var(--accent); font-weight: 600; }
.pin-slot { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.35rem 0.4rem; }
.pm-err {
  position: fixed; left: 0; right: 0; bottom: 2.2rem; z-index: 40;
  display: flex; gap: 0.75rem; align-items: center; justify-content: space-between;
  padding: 0.65rem 1rem; background: #5c1a1a; color: #fff; font-size: 0.95rem;
}
.pm-err[hidden] { display: none; }
.pm-err-close {
  border: 0; background: transparent; color: inherit; font-size: 1.4rem;
  line-height: 1; min-height: 44px; min-width: 44px; cursor: pointer;
}
.status-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between;
  padding: 0.35rem 0.9rem; font-size: 0.78rem; color: var(--muted);
  background: var(--panel); border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
input[type="range"] { width: 100%; min-height: 44px; }
.fame-board { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1rem; }
.fame-card { min-height: auto; }
.fame-card .kvs { margin-top: 0.6rem; }
.social-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.7rem; }
.outbox-item { display: grid; gap: 0.35rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.outbox-item pre { white-space: pre-wrap; margin: 0; font: inherit; color: var(--ink); }

/* Signed out: only the sign-in panel shows. Kept last so nothing later overrides it. */
.pm-gate {
  min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 0.9rem;
  padding: 2rem; text-align: center;
}
body:not([data-public]):not(.pm-in) > :not(.pm-gate):not(script) { display: none !important; }
body.pm-in .pm-gate { display: none !important; }
.pm-gate h1 { margin: 0; font-size: 1.5rem; }
.pm-gate .note { max-width: 32rem; }
.pm-gate button { min-width: 16rem; min-height: 48px; font-size: 1rem; }
.pm-gate-mark { width: 72px; height: 72px; }

/* ---- widget dashboard ---- */
.dash-wrap { min-width: 0; }
.dash-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.dash-bar button, .dash-bar select { min-height: 48px; width: auto; }
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 56px; gap: 8px; }
.dw { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; min-width: 0; overflow: hidden; }
.dw-body { height: 100%; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.25rem; min-height: 0; }
.dw-title { color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-num { display: flex; align-items: baseline; gap: 0.35rem; flex: 1 1 auto; min-height: 0; }
.dw-num strong { font-size: clamp(1.6rem, 3.2vw, 3rem); font-variant-numeric: tabular-nums; line-height: 1; }
.dw-num em { color: var(--muted); font-style: normal; font-size: 0.85rem; }
.dw-src { color: var(--muted); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-dial { flex: 1; min-height: 0; width: 100%; }
.dw-segs { width: 100%; flex: 1; min-height: 24px; max-height: 96px; }
.dw-body[data-state="ok"] .dw-num strong { color: var(--accent); }
.dw-body[data-state="warn"] .dw-num strong { color: var(--warn); }
.dw-body[data-state="limit"] .dw-num strong { color: var(--danger); }
.dw-body[data-state="cold"] .dw-num strong { color: #4a8fe0; }
.dw-body[data-state="none"] .dw-num strong { color: var(--muted); }
.dw-body[data-state="limit"] { box-shadow: inset 0 0 0 2px var(--danger); border-radius: 12px; }
.dw-rows { display: grid; gap: 0.2rem; font-size: 0.9rem; }
.dw-rows > div { display: flex; justify-content: space-between; gap: 0.5rem; }
.dw-rows span { color: var(--muted); }
.dw-rows strong { font-variant-numeric: tabular-nums; }
.dw-rows em { color: var(--muted); font-style: normal; font-size: 0.8rem; }
.dw-rows [data-state="warn"] strong { color: var(--warn); }
.dw-rows [data-state="limit"] strong { color: var(--danger); }
.dw-diff { border-top: 1px solid var(--line); padding-top: 0.2rem; }
.dw-lamp { margin-top: auto; text-align: center; border-radius: 8px; padding: 0.25rem; font-size: 0.8rem; background: var(--bg); color: var(--muted); }
.dw-lamp.on { background: var(--danger); color: #fff; font-weight: 700; }
.dw-lamp.ok { background: var(--bg); color: var(--accent); }
.dw-bank { flex: 1; min-height: 0; display: flex; gap: 6px; align-items: stretch; }
.dw-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.dw-col em { font-style: normal; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.dw-col i { flex: 1; width: 100%; background: var(--bg); border-radius: 4px; position: relative; overflow: hidden; }
.dw-col b { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); }
.dw-col[data-state="warn"] b { background: var(--warn); }
.dw-col[data-state="limit"] b { background: var(--danger); }
.dw-col span { font-size: 0.72rem; color: var(--muted); }
.dw-col.hot span { color: var(--ink); font-weight: 700; }
.dw-col.hot span::before { content: "▲"; color: var(--danger); }
.dw-tyres { flex: 1; display: grid; gap: 6px; }
.dw-tyres.corners { grid-template-columns: 1fr 1fr; }
.dw-tyres.slick { grid-template-columns: repeat(3, 1fr); }
.dw-tyres > div { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dw-tyres span { font-size: 0.72rem; color: var(--muted); }
.dw-tyres strong { font-size: 1.2rem; }
.dw-tyres [data-state="cold"] { background: #1d3a5c; }
.dw-tyres [data-state="ok"] { background: #1d4a32; }
.dw-tyres [data-state="warn"] { background: #5c4413; }
.dw-tyres [data-state="limit"] { background: #6a1d1d; }
.dw-t-peaks .dw-rows strong { font-size: 1.1rem; }
.dw-t-chart .dw-body { padding: 0.4rem; }
.dw-t-chart .chart-panel { display: flex; flex-direction: column; height: 100%; gap: 0.3rem; }
.dw-t-chart .chart-panel canvas { flex: 1; min-height: 0; height: auto; width: 100%; background: var(--bg); border-radius: 10px; }
.dw-t-chart .chart-tools { justify-content: space-between; }
.dw-t-chart .pills button { min-height: 40px; }
.dash.editing .dw { outline: 2px dashed var(--accent); outline-offset: -2px; touch-action: none; cursor: grab; }
.dash.editing .dw-body { pointer-events: none; opacity: 0.75; }
.dw-t-afr .dw-segs + .dw-src, .dw-t-bar .dw-segs + .dw-src { margin-top: 0.2rem; }
.dw.dragging { z-index: 5; opacity: 0.85; cursor: grabbing; }
.dw-chrome { position: absolute; inset: 0; pointer-events: none; }
.dw-chrome button { pointer-events: auto; position: absolute; top: 4px; width: 48px; height: 48px; padding: 0; border-radius: 10px; font-size: 1.1rem; }
.dw-chrome .dw-opt { right: 56px; }
.dw-chrome .dw-del { right: 4px; }
.dw-resize { pointer-events: auto; position: absolute; right: 0; bottom: 0; width: 48px; height: 48px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 55%, var(--accent) 55%); border-bottom-right-radius: 12px; }
.dw-dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; min-width: min(420px, 92vw); }
.dw-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.dw-dialog .row { justify-content: flex-end; gap: 0.5rem; }
.dw-dialog button { min-height: 48px; }
.display-main .dash { grid-auto-rows: 64px; }
.display-main .dw-num strong { font-size: clamp(2.4rem, 6vw, 5rem); }
@media (max-width: 699px) {
  .dash { grid-template-columns: 1fr; }
}

/* Skins change look only; workflow and controls stay the same. */
body.skin-mainline_dynolog .dw { border-radius: 4px; background: #15181a; border-color: #3a3f44; }
[data-theme="light"] body.skin-mainline_dynolog .dw { background: #fbfaf5; border-color: #c9c3b0; }
body.skin-mainline_dynolog .dw-title { text-transform: uppercase; letter-spacing: 0.06em; }
body.skin-dyno_dynamics .dw { border-radius: 2px; border-width: 2px; }
body.skin-dyno_dynamics .dw-num strong { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(2rem, 4.2vw, 3.8rem); }
body.skin-dyno_dynamics .controls button { min-height: 56px; font-weight: 700; border-radius: 4px; }
.dw-t-retarder .dw-num strong, body.skin-dyno_dynamics .dw-t-retarder .dw-num strong { font-size: clamp(1.4rem, 2.4vw, 2.2rem); }

/* Dash datalog viewer (logview.js) */
body.lv-open { overflow: hidden; }
.lv-filerow { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.lv-wrap { position: fixed; inset: 0; z-index: 200; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; }
.lv-head { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.lv-head .note { flex: 1 1 18rem; min-width: 0; }
.lv-body { flex: 1; display: grid; grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr); min-height: 0; }
.lv-side { overflow: auto; border-right: 1px solid var(--line); padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.lv-side h4 { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--muted); }
.lv-main { overflow: auto; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.lv-overview, .lv-plot { width: 100%; display: block; border: 1px solid var(--line); border-radius: 6px; }
.lv-plot { cursor: crosshair; }
.lv-overview { cursor: grab; }
.lv-readout { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8rem; min-height: 1.2em; white-space: pre-wrap; }
.lv-search { width: 100%; box-sizing: border-box; }
.lv-check { display: flex; gap: 0.3rem; align-items: center; }
.lv-picker { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.86rem; }
.lv-group > summary, .lv-canid > summary { cursor: pointer; padding: 0.15rem 0; }
.lv-canid { margin-left: 0.6rem; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8rem; }
.lv-row { display: block; padding: 0.08rem 0 0.08rem 0.6rem; cursor: pointer; }
.lv-events { display: flex; flex-direction: column; gap: 0.2rem; max-height: 30vh; overflow: auto; }
.lv-ev { display: flex; gap: 0.25rem; }
.lv-ev button { flex: 1; text-align: left; font-size: 0.8rem; }
.lv-ev-pull button { border-left: 3px solid var(--accent); }
.lv-ev-manual button { border-left: 3px solid var(--warn); }
.lv-ev-dtc button { border-left: 3px solid var(--danger); }
.lv-empty { padding: 2rem; color: var(--muted); }
@media (max-width: 760px) { .lv-body { grid-template-columns: 1fr; grid-template-rows: 38vh 1fr; } .lv-side { border-right: 0; border-bottom: 1px solid var(--line); } }
.lv-canid > summary.lv-named { color: var(--accent); }
.lv-canid > summary.lv-unverified { color: #b26a00; font-style: italic; }
.profile-id .unverified { color: #b26a00; font-style: italic; }
/* 0.7.69 draft: per-signal CAN status */
.sig-status { display: inline-flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }
.sig-status.sig-verified select:first-child { border-color: var(--accent); }
.sig-status.sig-rejected select:first-child { border-color: var(--danger); text-decoration: line-through; }
.lv-sig-st { display: inline-flex; gap: 0.2rem; margin-left: 0.3rem; }
.lv-sig-st button, .lv-sig-st select { font-size: 0.72rem; padding: 0 0.3rem; }
.lv-row.lv-rejected { opacity: 0.55; text-decoration: line-through; }
.lv-row.lv-verified { color: var(--accent); }