/* ════════════════════════════════════════════════════════════════════════
   MT1 telemetry-cloud — OLED LOW-POWER THEME (html[data-theme="oled"])
   The negative of the e-ink theme: light ink on TRUE BLACK (#000 = pixels
   off on OLED/AMOLED). Design rules (docs/STYLE.md §9):
     · ~90% black & white: every lit pixel costs power — black surfaces,
       dim structural borders, off-white ink (pure #FFF causes halation and
       burns more power; text sits at ~93% white).
     · Basic GREEN / YELLOW / RED only at specific status points (dots,
       chips, fills, the hero word) — colored subpixels are also cheaper
       than white (white = R+G+B lit).
     · Same mono texture language as e-ink (hatch/dots = mostly-unlit area
       shading), borders over fills, radius 2px, no animation (no repaints).
     · No large lit areas, no inverted blocks (burn-in + power): emphasis is
       an accent ring + accent text, never a filled plate.
   Unlayered on purpose — beats every @layer rule in style.css/app.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
html[data-theme="oled"] {
  color-scheme: dark;

  --ink: #E6E6E6;      /* primary text — NOT pure white (halation + power) */
  --paper: #000000;    /* true black: pixels off */
  --line: #2E2E2E;     /* quiet structural borders — dim, cheap */
  --gray-25: #404040;  /* low-emphasis large elements                      */
  --gray-50: #808080;
  --gray-75: #BFBFBF;

  /* Status accents — the ONLY hues in the theme, ~85% brightness. */
  --acc-green: #30D158;
  --acc-yellow: #FFC53D;
  --acc-red: #FF5252;
  --acc-green-dim: #06230F;
  --acc-yellow-dim: #241D00;
  --acc-red-dim: #250705;

  --brand-gray-1: var(--ink);
  --brand-gray-2: var(--ink);
  --brand-gray-3: var(--gray-50);
  --brand-gray-4: var(--gray-25);
  --brand-gray-5: var(--paper);

  --bg: var(--paper);
  --bg-card: var(--paper);
  --bg-card-2: var(--paper);
  --border: var(--line);
  --text: var(--ink);
  --text-2: #9E9E9E;
  --muted: #757575;
  --accent: var(--acc-red);
  --accent-hi: var(--acc-red);
  --ok: var(--acc-green);
  --warn: var(--acc-yellow);

  --plate: var(--paper);
  --surface-recess: var(--paper);
  --surface-console: var(--paper);
  --surface-flat: var(--paper);
  --surface-lab: var(--paper);
  --hairline: var(--line);
  --bezel-hi: transparent;
  --bezel-lo: transparent;

  --lane-cluster: var(--line);
  --lane-console: var(--line);
  --lane-flights: var(--line);
  --lane-story: var(--line);

  /* Semantic status: green/yellow/red at status points, ink for the rest.
     "-dim" washes are near-black tints (tiny chip areas only). */
  --st-idle: var(--ink);            --st-idle-dim: var(--paper);
  --st-armed: var(--acc-yellow);    --st-armed-dim: var(--acc-yellow-dim);
  --st-flight: var(--acc-red);      --st-flight-dim: var(--acc-red-dim);
  --st-success: var(--acc-green);   --st-success-dim: var(--acc-green-dim);
  --st-syncing: var(--ink);         --st-syncing-dim: var(--paper);
  --st-warning: var(--acc-yellow);  --st-warning-dim: var(--acc-yellow-dim);
  --st-offline: var(--gray-50);     --st-offline-dim: var(--paper);
  --st-error: var(--acc-red);       --st-error-dim: var(--acc-red-dim);
  --st-on-dark: var(--paper);

  /* Chart series: ink; JS adds dash patterns + gray "raw" traces. */
  --series-1: #E6E6E6;  --series-2: #E6E6E6;  --series-3: #E6E6E6;
  --series-4: #E6E6E6;  --series-5: #E6E6E6;  --series-6: #E6E6E6;
  --series-7: #E6E6E6;  --series-8: #E6E6E6;
  --series-grid: #1A1A1A;  --series-axis: #9E9E9E;

  --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 2px;

  /* Texture library — ink strokes, mostly-unlit shading. */
  --tx-hatch: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 7px);
  --tx-hatch-back: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 7px);
  --tx-hatch-dense: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 4px);
  /* Progress fills use a DIM bold hatch: readable, mostly-unlit. */
  --tx-hatch-bold: repeating-linear-gradient(135deg, var(--gray-75) 0 4px, var(--paper) 4px 9px);
  --tx-horiz: repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 6px);
  --tx-vert: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 6px);
  --tx-dots: radial-gradient(var(--ink) 1.1px, transparent 1.1px);
  /* Accent textures (battery/SD fills: lit dots, mostly-off area). */
  --tx-dots-green: radial-gradient(var(--acc-green) 1.2px, transparent 1.2px);
  --tx-hatch-yellow: repeating-linear-gradient(135deg, var(--acc-yellow) 0 2px, transparent 2px 7px);
}

/* ── Base: true black, no glow, no motion (repaints cost power too) ─────── */
html[data-theme="oled"] body {
  background: var(--paper);
}
html[data-theme="oled"] *,
html[data-theme="oled"] *::before,
html[data-theme="oled"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}
/* Brand logo keeps its ORIGINAL colors (user request): it is small, mostly
   dark red — negligible OLED power — and anchors the brand on black. */
/* Irradiation illusion: light-on-black reads one weight bolder — soften the
   giant word. (Flight sparklines keep their status accent: tiny, semantic.) */
html[data-theme="oled"] .hero-word { font-weight: 700; }
/* Dim-on-idle (power + burn-in): app.js toggles .oled-dimmed after ~5 min
   without input. A black overlay costs nothing and darkens every lit pixel. */
#oled-dimmer {
  position: fixed; inset: 0; z-index: 3000; pointer-events: none;
  background: #000; opacity: 0; display: none;
}
html[data-theme="oled"].oled-dimmed #oled-dimmer { display: block; opacity: 0.5; }
html[data-theme="oled"] code { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] a { color: var(--ink); }
html[data-theme="oled"] :focus-visible { outline: 2px solid var(--ink); }

/* ── Buttons: dim outline at rest; accents only where semantics demand ──── */
html[data-theme="oled"] button:hover:not(:disabled) { filter: none; }
html[data-theme="oled"] .btn-primary {
  background: var(--paper); color: var(--acc-green);
  box-shadow: inset 0 0 0 2px var(--acc-green);
}
html[data-theme="oled"] .btn-danger {
  background: var(--paper); color: var(--acc-red);
  border: 4px double var(--acc-red); box-shadow: none;
}
html[data-theme="oled"] .btn-neutral,
html[data-theme="oled"] .btn-mini {
  background: var(--paper); color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
html[data-theme="oled"] .btn-neutral:hover:not(:disabled),
html[data-theme="oled"] .btn-mini:hover:not(:disabled) {
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
html[data-theme="oled"] .btn-mini.toggle[aria-pressed="true"] {
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink); font-weight: 800;
}
html[data-theme="oled"] button:disabled {
  background: var(--paper) !important; color: var(--gray-25) !important;
  box-shadow: inset 0 0 0 1px var(--gray-25); opacity: 1; border-style: dotted;
}
html[data-theme="oled"] .btn-unlock { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }

/* ── Pills / chips ───────────────────────────────────────────────────────── */
html[data-theme="oled"] .pill { background: var(--paper); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .conn-pill.connected {
  background: var(--acc-green-dim); color: var(--acc-green);
  box-shadow: inset 0 0 0 1px var(--acc-green);
}
html[data-theme="oled"] .conn-pill.connected .pill-dot { background: var(--acc-green); }
html[data-theme="oled"] .conn-pill.reconnecting {
  background: var(--acc-yellow-dim); color: var(--acc-yellow);
  box-shadow: inset 0 0 0 1px var(--acc-yellow);
}
html[data-theme="oled"] .conn-pill.reconnecting .pill-dot { background: var(--acc-yellow); }
html[data-theme="oled"] .admin-pill.set { background: var(--paper); color: var(--acc-green); box-shadow: inset 0 0 0 1px var(--acc-green); }
html[data-theme="oled"] .admin-pill.set .pill-key { background: var(--acc-green); }
html[data-theme="oled"] #theme-toggle[aria-pressed="true"] {
  color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 800;
}

/* ── ZONE 1 · HERO ───────────────────────────────────────────────────────── */
html[data-theme="oled"] .hero {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  border-inline-start: 6px solid var(--hue);
}
html[data-theme="oled"] .hero::after { display: none; }
/* The giant word is the ONE big colored element: a colored subpixel word is
   cheaper than a white one, and it is the glanceable state. */
html[data-theme="oled"] .hero-word { color: var(--hue); }
html[data-theme="oled"] .hero.banner-idle .hero-word,
html[data-theme="oled"] .hero.banner-syncing .hero-word { color: var(--ink); }
html[data-theme="oled"] .hero.banner-offline .hero-word { color: var(--gray-50); }
html[data-theme="oled"] .conn-chip { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .conn-connected { color: var(--acc-green); }
html[data-theme="oled"] .conn-error { color: var(--acc-red); }
html[data-theme="oled"] .conn-reconnecting { color: var(--acc-yellow); }
html[data-theme="oled"] .instr-link .uptime-bar-wrap { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .hu-pct { color: var(--acc-green); }

/* Device group offline: the few accents in the group go out (grayscale from
   app.css) + the solid rings turn dashed — texture carries the state. */
html[data-theme="oled"] .deck.dev-offline :is(.cluster, .console) {
  box-shadow: none;
  outline: 1px dashed var(--gray-50); outline-offset: -1px;
}
html[data-theme="oled"] .console-offline-note {
  background: var(--paper); color: var(--acc-yellow);
  box-shadow: inset 0 0 0 1px var(--acc-yellow);
}

/* ── Thumb dock ──────────────────────────────────────────────────────────── */
html[data-theme="oled"] .thumb-dock {
  background: var(--paper);
  border-block-start: 1px solid var(--line);
  box-shadow: none;
}

/* ── ZONE 2 · INSTRUMENT CLUSTER ────────────────────────────────────────── */
html[data-theme="oled"] .cluster {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  border-inline-start: 4px solid var(--line);
}
/* Battery: green lit-dot fill (mostly-off pixels) → yellow hatch → red. */
html[data-theme="oled"] .battery-body { border-color: var(--gray-50); background: var(--paper); }
html[data-theme="oled"] .battery-nub { background: var(--gray-50); }
html[data-theme="oled"] .battery-fill { background: var(--tx-dots-green) 0 0 / 5px 5px var(--paper); }
html[data-theme="oled"] .battery-fill.low { background: var(--tx-hatch-yellow) var(--paper); }
html[data-theme="oled"] .battery-fill.critical { background: var(--acc-red); }
html[data-theme="oled"] .fuel { border-color: var(--line); background: var(--paper); }
html[data-theme="oled"] .fuel-fill { background: var(--tx-dots) 0 0 / 5px 5px var(--paper); }
html[data-theme="oled"] .fuel-fill.warn { background: var(--tx-hatch-yellow) var(--paper); }
html[data-theme="oled"] .fuel-fill.crit { background: var(--acc-red); }
html[data-theme="oled"] .fuel::after {
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%);
}
html[data-theme="oled"] .fuel.untested { background-image: var(--tx-hatch); }
html[data-theme="oled"] .instr-foot.warn { color: var(--acc-yellow); }
html[data-theme="oled"] .instr-foot.crit { color: var(--acc-red); }
html[data-theme="oled"] .instr-foot.warn::before { content: "⚠ "; }
html[data-theme="oled"] .instr-foot.crit::before { content: "⚠ "; }
/* RSSI staircase: unlit steps stay dim, lit steps take the quality accent. */
html[data-theme="oled"] .rssi-bars i {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
html[data-theme="oled"] .rssi-bars.lvl1 i:nth-child(-n+1),
html[data-theme="oled"] .rssi-bars.lvl2 i:nth-child(-n+2),
html[data-theme="oled"] .rssi-bars.lvl3 i:nth-child(-n+3),
html[data-theme="oled"] .rssi-bars.lvl4 i:nth-child(-n+4) { background: var(--rssi-col, var(--ink)); }
/* Module LEDs: OK = green dot · DEAD = red ✕ · UNKNOWN = dim hollow. */
html[data-theme="oled"] .led { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .led::before { background: var(--led-c, var(--paper)); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .led-ok { color: var(--acc-green); }
html[data-theme="oled"] .led-ok::before { background: var(--acc-green); box-shadow: none; }
html[data-theme="oled"] .led-dead { color: var(--acc-red); box-shadow: inset 0 0 0 1px var(--acc-red); font-weight: 800; }
html[data-theme="oled"] .led-dead::before {
  content: "✕"; background: none; box-shadow: none; border-radius: 0;
  inline-size: auto; block-size: auto; font-size: 1em; line-height: 1;
}
html[data-theme="oled"] .led-unknown::before {
  background: var(--paper); box-shadow: none; border: 1px dashed var(--gray-50);
}
html[data-theme="oled"] .meter { background: var(--gray-25); }
html[data-theme="oled"] .meter i { background: var(--gray-75); }
html[data-theme="oled"] .meter i.low { background: var(--acc-yellow); }
html[data-theme="oled"] .meter i.critical { background: var(--acc-red); }

/* ── ZONE 3 · COMMAND CONSOLE ───────────────────────────────────────────── */
html[data-theme="oled"] .console {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  border-inline-start: 4px solid var(--line);
}
html[data-theme="oled"] .keyswitch {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
html[data-theme="oled"] .ks-btn { color: var(--gray-50); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .ks-btn small { color: var(--gray-50); }
html[data-theme="oled"] .ks-btn:hover:not([aria-checked="true"]) { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
html[data-theme="oled"] .ks-btn .ks-led { background: var(--paper); box-shadow: inset 0 0 0 1px var(--gray-50); }
/* Selected detent: accent ring + accent text — never a filled plate. */
html[data-theme="oled"] .ks-btn[data-state="idle"][aria-checked="true"] {
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
html[data-theme="oled"] .ks-btn[data-state="armed"][aria-checked="true"] {
  background: var(--acc-yellow-dim); color: var(--acc-yellow);
  box-shadow: inset 0 0 0 2px var(--acc-yellow);
}
html[data-theme="oled"] .ks-btn[aria-checked="true"] small { color: inherit; }
html[data-theme="oled"] .ks-btn[data-state="idle"][aria-checked="true"] .ks-led { background: var(--ink); box-shadow: none; }
html[data-theme="oled"] .ks-btn[data-state="armed"][aria-checked="true"] .ks-led { background: var(--acc-yellow); box-shadow: none; }
html[data-theme="oled"] .console-calib { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .cfg-actual.pending { color: var(--acc-yellow); font-weight: 800; }
html[data-theme="oled"] .cfg-actual.pending::before { content: "⧗ "; }
html[data-theme="oled"] #cfg-sync-chip.cfg-chip-ok { color: var(--acc-green); }
html[data-theme="oled"] #cfg-sync-chip.cfg-chip-pending { color: var(--acc-yellow); }
/* Danger zone: red hazard fence (thin lit stripes on black). */
html[data-theme="oled"] .danger-zone {
  background: var(--paper);
  border: 1px solid var(--acc-red);
  box-shadow: none;
  position: relative;
  padding-block-start: calc(12px + 8px);
}
html[data-theme="oled"] .danger-zone::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 8px;
  background: repeating-linear-gradient(135deg, var(--acc-red) 0 8px, var(--paper) 8px 16px);
  border-block-end: 1px solid var(--acc-red);
}
html[data-theme="oled"] .danger-label { color: var(--acc-red); }
html[data-theme="oled"] .confirm-panel {
  background: var(--paper);
  box-shadow: none; border: 1px solid var(--acc-red); border-inline-start-width: 5px;
}
html[data-theme="oled"] .confirm-panel .cf-type { background: var(--paper); border-color: var(--line); }

/* ── ZONE 4 · FLIGHT SELECTOR ───────────────────────────────────────────── */
html[data-theme="oled"] .flights { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .flight-row { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .flight-row:hover { background: var(--paper); }
html[data-theme="oled"] .flight-row.selected {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--ink);
  border-inline-start-color: var(--ink);
}
html[data-theme="oled"] .flight-row.selected::before { color: var(--ink); font-weight: 800; }
html[data-theme="oled"] .flight-row.acc-offline { border-inline-start-color: var(--gray-25); }
html[data-theme="oled"] .flight-row.v-device-only { opacity: 1; }
html[data-theme="oled"] .flight-row.v-device-only .fr-id,
html[data-theme="oled"] .flight-row.v-device-only .fr-onlydev { color: var(--gray-50); }
html[data-theme="oled"] .flight-row.v-device-only .fr-spark { opacity: 0.7; }
html[data-theme="oled"] .flight-row.live::after { background: var(--acc-red); box-shadow: none; }
html[data-theme="oled"] .fr-onair { color: var(--acc-red); }
html[data-theme="oled"] .fr-onlydev::before { background: var(--paper); border: 1px dashed var(--gray-50); box-sizing: border-box; }
html[data-theme="oled"] .btn-load {
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); font-weight: 800;
}
html[data-theme="oled"] .btn-load:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
html[data-theme="oled"] .btn-stop {
  background: var(--paper); color: var(--acc-red); border: 4px double var(--acc-red);
}
html[data-theme="oled"] .btn-stop:hover { background: var(--paper); }
html[data-theme="oled"] .fr-upbar { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .fr-upbar > i { background: var(--tx-hatch-bold); }
html[data-theme="oled"] .fr-uppct { color: var(--ink); }
/* Sync dots: done = green ● · in-progress = hollow ink · pending = dashed dim. */
html[data-theme="oled"] .sync-mini::before { background: var(--paper); border: 1px dashed var(--gray-50); box-sizing: border-box; }
html[data-theme="oled"] .sync-mini.ok::before { background: var(--acc-green); border: none; }
html[data-theme="oled"] .sync-mini.syncing::before { background: var(--paper); border: 1px solid var(--ink); }
/* State chips: colored TEXT + ring on black (never filled). */
html[data-theme="oled"] .state-chip { background: var(--paper); }
html[data-theme="oled"] .state-chip.s-flight { background: var(--acc-red-dim); color: var(--acc-red); }
html[data-theme="oled"] .state-chip.s-landed { background: var(--paper); color: var(--acc-green); }
html[data-theme="oled"] .state-chip.s-armed { background: var(--acc-yellow-dim); color: var(--acc-yellow); }
html[data-theme="oled"] .state-chip.s-ended_unclean { background: var(--paper); color: var(--acc-yellow); font-weight: 800; }
html[data-theme="oled"] .state-chip.s-ended_unclean::before { content: "⚠ "; }
html[data-theme="oled"] .state-chip.s-idle { background: var(--paper); color: var(--gray-50); }
html[data-theme="oled"] .skeleton-row {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--gray-25);
}

/* ── ZONE 5 · STORY (charts) ────────────────────────────────────────────── */
html[data-theme="oled"] .story { border-inline-start: 4px solid var(--line); }
html[data-theme="oled"] .altitude-hero,
html[data-theme="oled"] .film-card {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
}
html[data-theme="oled"] .altitude-hero:fullscreen, html[data-theme="oled"] .film-card:fullscreen,
html[data-theme="oled"] .chart-maximized { background: var(--paper); }
html[data-theme="oled"] .live-chip.live { background: var(--acc-red-dim); color: var(--acc-red); box-shadow: inset 0 0 0 1px var(--acc-red); }
html[data-theme="oled"] .live-chip.done { background: var(--paper); color: var(--acc-green); box-shadow: inset 0 0 0 1px var(--acc-green); }
html[data-theme="oled"] .live-chip.preview { background: var(--paper); color: var(--acc-yellow); box-shadow: inset 0 0 0 1px var(--acc-yellow); }
html[data-theme="oled"] .chart-subtoolbar {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
}
html[data-theme="oled"] .filter-bar { box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .filter-btn { background: var(--paper); color: var(--text-2); }
html[data-theme="oled"] .filter-btn + .filter-btn { box-shadow: inset 1px 0 0 var(--line); }
html[data-theme="oled"] .filter-btn:hover:not(.active) { background: var(--paper); color: var(--ink); }
html[data-theme="oled"] .filter-btn.active { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 800; }
html[data-theme="oled"] .phase-swatch { box-shadow: inset 0 0 0 1px var(--line); background-color: var(--paper); }
html[data-theme="oled"] .crosshair-readout {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink);
}
html[data-theme="oled"] .chart-fs-btn { border-color: var(--line); }
html[data-theme="oled"] .pipe-track { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .pipe-track > i { background: var(--tx-hatch-bold); }
/* Complete = green STIPPLE, not a solid lit bar (no filled element bigger
   than a chip — the ✓ and the green % already say "done"). */
html[data-theme="oled"] .pipe-lane.lane-complete .pipe-track > i { background: var(--tx-dots-green) 0 0 / 5px 5px var(--paper); }
html[data-theme="oled"] .pipe-lane.lane-complete .pipe-pct { color: var(--acc-green); }
html[data-theme="oled"] .pipe-lane.lane-pending .pipe-track > i { background: var(--paper); }
html[data-theme="oled"] .qnh-input, html[data-theme="oled"] .picker,
html[data-theme="oled"] .calib-grid input { background: var(--paper); border-color: var(--line); }

/* ── Uptime (F3) ────────────────────────────────────────────────────────── */
html[data-theme="oled"] .uptime {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  border-inline-start: 4px solid var(--line);
}
html[data-theme="oled"] .uptime .uptime-pct { color: var(--acc-green); }
html[data-theme="oled"] .uptime-bar-wrap { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }

/* ── States: toasts, stale, empty ───────────────────────────────────────── */
html[data-theme="oled"] .toast {
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), inset 5px 0 0 var(--gray-50);
}
html[data-theme="oled"] .toast.ok { box-shadow: inset 0 0 0 1px var(--line), inset 5px 0 0 var(--acc-green); }
html[data-theme="oled"] .toast.warn { box-shadow: inset 0 0 0 1px var(--acc-yellow), inset 5px 0 0 var(--acc-yellow); }
html[data-theme="oled"] .toast.warn::before { content: "⚠"; color: var(--acc-yellow); font-weight: 800; }
html[data-theme="oled"] .toast.error { box-shadow: inset 0 0 0 1px var(--acc-red), inset 5px 0 0 var(--acc-red); }
html[data-theme="oled"] .toast .toast-x { box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="oled"] .stale-badge {
  background: var(--paper); color: var(--acc-yellow); box-shadow: inset 0 0 0 1px var(--acc-yellow);
}
html[data-theme="oled"] .stale-badge::before { content: "⚠ "; font-weight: 800; }