/* Bench view (#/station): the PC app "Binho Flash Station" look (webui/css/theme.css + app.css), scoped to .stn.
   Every state colour is paired with a glyph and a word; nothing is truncated. 390 px phone .. 1440 px desktop. */
main:has(> .view.stn) { max-width: 1600px; }
.stn {
  color-scheme: dark;
  --s-bg: #000; --s1: #090c10; --s2: #10151b; --s3: #182028; --s4: #212b36;
  --s-line: #232d38; --s-line-strong: #364353; --s-line-soft: rgba(148,163,184,.10);
  --ink: #f4f7fa; --ink-2: #ccd5e0; --ink-3: #9dabbb; --ink-dim: #8996a6;
  --s-pass: #46e08a; --s-pass-deep: #2fbf70; --s-pass-wash: rgba(70,224,138,.11); --s-pass-edge: rgba(70,224,138,.55); --s-pass-glow: rgba(70,224,138,.28);
  --s-fail: #ff5b5b; --s-fail-deep: #e83f3f; --s-fail-wash: rgba(255,91,91,.12); --s-fail-edge: rgba(255,91,91,.60); --s-fail-glow: rgba(255,91,91,.30);
  --s-warn: #ffa630; --s-warn-deep: #ef8f12; --s-warn-wash: rgba(255,166,48,.12); --s-warn-edge: rgba(255,166,48,.55); --s-warn-glow: rgba(255,166,48,.28);
  --s-run: #4fa8ff; --s-run-wash: rgba(79,168,255,.12); --s-run-edge: rgba(79,168,255,.60); --s-run-glow: rgba(79,168,255,.22);
  --s-idle: #8e99a8; --s-idle-wash: rgba(142,153,168,.08); --s-idle-edge: rgba(142,153,168,.36);
  --s-mode: #c792ff; --s-mode-wash: rgba(199,146,255,.12); --s-mode-edge: rgba(199,146,255,.55);
  --s-unknown: #a6b0bf; --s-unknown-wash: rgba(166,176,191,.06); --s-unknown-edge: rgba(166,176,191,.42);
  --s-hand: #ffd166; --s-hand-edge: rgba(255,209,102,.70); --s-hand-wash: rgba(255,209,102,.10);
  --brand: #7cc4ff; --brand-2: #2f80d8; --s-focus: #8fd0ff;
  --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-sm: 7px; --r: 10px; --r-lg: 14px;
  --shadow-btn: 0 1px 0 rgba(255,255,255,.07) inset, 0 1px 2px rgba(0,0,0,.5);
  background: var(--s-bg); color: var(--ink); border-radius: var(--r-lg); padding: 12px; font-size: 15px; line-height: 1.45;
}
.stn * { text-overflow: clip !important; }
.stn :focus-visible { outline: 2px solid var(--s-focus); outline-offset: 2px; }
.stn h1, .stn h2, .stn h3 { margin: 0; }
.stn .stn-ink3 { color: var(--ink-3); font-size: 13px; }
.stn .mono { font-family: var(--mono); }

/* ---- header ---- */
.stn-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.stn-hdr-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.stn-hdr-app { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--ink); }
.stn-hdr-sub { font-size: 14px; color: var(--ink-3); }
.stn-agent-note { font-size: 13px; color: var(--s-warn); }
.stn-hdr-picker { flex: 1 1 260px; min-width: 0; }
.stn-hdr-picker .seg button { background: var(--s3); color: var(--ink); border-color: var(--s-line-strong); min-height: 44px; }
.stn-hdr-picker .seg button[aria-pressed=true] { border-color: var(--s-run); background: var(--s-run-wash); color: var(--ink); }
.stn-hdr-right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stn-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--s-line-strong); background: var(--s2); min-width: 0; }
.stn-chip-body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.stn-chip-label { font-weight: 700; font-size: 15px; }
.stn-chip-meta { font-size: 13px; color: var(--ink-3); font-family: var(--mono); overflow-wrap: anywhere; }
.stn-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--s-idle); flex: none; }
.stn-chip-device[data-present="yes"] { border-color: var(--s-pass-edge); background: var(--s-pass-wash); }
.stn-chip-device[data-present="yes"] .stn-dot { background: var(--s-pass); box-shadow: 0 0 0 3px var(--s-pass-wash), 0 0 10px var(--s-pass-glow); }
.stn-chip-device[data-present="no"] { border-color: var(--s-idle-edge); }
.stn-chip-device[data-present="unknown"] { border-color: var(--s-unknown-edge); border-style: dashed; }
.stn-chip-device[data-present="unknown"] .stn-dot { background: var(--s-unknown); }
.stn-chip-counter { gap: 10px; font-size: 16px; font-variant-numeric: tabular-nums; }
.stn-ctr { display: inline-flex; gap: 4px; align-items: baseline; font-weight: 700; }
.stn-ctr-pass, .stn-ctr-pass .stn-ctr-glyph { color: var(--s-pass); }
.stn-ctr-fail, .stn-ctr-fail .stn-ctr-glyph { color: var(--s-fail); }
.stn-ctr-div { color: var(--ink-3); }

/* ---- grid ---- */
.stn-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; align-items: start; }
@media (max-width: 1000px) { .stn-grid { grid-template-columns: minmax(0, 1fr); } }
.stn-left, .stn-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stn-card { background: var(--s2); border: 1px solid var(--s-line); border-radius: var(--r-lg); padding: 12px 14px; min-width: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset; }
.stn-card-h { font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 9px;
  display: flex; align-items: center; gap: 8px; }
.stn-card-h::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--brand); flex: none; }
.stn-card-h-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.stn-card-h-row .stn-card-h { margin-bottom: 0; }
.stn-card-sub-h { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 8px; }
.stn-card-note { font-size: 14px; color: var(--ink-3); }
.stn-card-note-block { margin: -3px 0 12px; max-width: 64ch; line-height: 1.45; }
.stn-note-admin { margin: -6px 0 10px; color: var(--s-warn); }
.stn-note-ro { border: 1px dashed var(--s-warn-edge); background: var(--s-warn-wash); color: var(--s-warn); border-radius: var(--r); padding: 8px 12px; font-weight: 650; font-size: 14px; }

/* ---- buttons ---- */
.stn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; min-height: 44px;
  border: 1px solid var(--s-line-strong); border-radius: var(--r); background: linear-gradient(180deg, var(--s4) 0%, var(--s3) 100%);
  color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; box-shadow: var(--shadow-btn); text-decoration: none; white-space: nowrap; }
.stn-btn:hover:not([disabled]) { background: linear-gradient(180deg, #27323f 0%, #1e2732 100%); border-color: #4b5867; }
.stn-btn[disabled] { background: #0f1319; border-color: var(--s-line); color: var(--ink-2); box-shadow: none; cursor: not-allowed; }
.stn-btn-glyph { font-size: 14px; line-height: 1; opacity: .9; }
.stn-btn-sm { padding: 5px 11px; min-height: 36px; font-size: 14px; border-radius: var(--r-sm); }
.stn-btn-ghost { background: transparent; color: var(--ink-2); box-shadow: none; }
.stn-btn-primary { background: linear-gradient(180deg, #2a6fc0 0%, #1b4f8f 100%); border-color: #3f86d6; color: #fff; font-size: 17px; font-weight: 750; min-height: 56px; }
.stn-btn-primary[disabled] { background: #10161e; border-color: var(--s-line); color: var(--ink-2); }
.stn-btn-auto { background: linear-gradient(180deg, #1c8250 0%, #135c39 100%); border-color: #2fb06f; }
.stn-btn-stop { background: linear-gradient(180deg, #3a1518 0%, #2a1012 100%); border-color: var(--s-fail-edge); color: #ffc9c9; font-size: 17px; font-weight: 750; min-height: 56px; }
.stn-btn-stop[disabled] { background: #0f1319; border-color: var(--s-line); color: var(--ink-2); }
.stn-btn-secondary { background: linear-gradient(180deg, var(--s4) 0%, var(--s3) 100%); }
.stn-btn-pass { background: var(--s-pass); border-color: var(--s-pass); color: #04120a; font-weight: 800; }
.stn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stn-actions .stn-btn { flex: 1 1 140px; }

/* ---- setup summary ---- */
.stn-setup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stn-setup-head .stn-card-h { margin: 0; }
.stn-setup-summary { display: grid; gap: 3px; margin-top: 8px; }
.stn-setup-line { display: flex; gap: 12px; font-size: 14px; line-height: 1.35; min-width: 0; }
.stn-setup-k { flex: 0 0 100px; color: var(--ink-3); font-weight: 600; }
.stn-setup-v { flex: 1 1 auto; min-width: 0; color: var(--ink); font-family: var(--mono); overflow-wrap: anywhere; }
.stn-setup-warn .stn-setup-k, .stn-setup-warn .stn-setup-v { color: var(--s-warn); }

/* ---- simulate ---- */
.stn-sim { margin-top: 10px; padding: 8px 10px; border: 2px dashed #a78bfa; border-radius: var(--r); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.stn-sim-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; min-height: 40px; cursor: pointer; color: var(--ink); font-size: 15px; }
.stn-sim-toggle input { width: 22px; height: 22px; accent-color: #a78bfa; }
.stn-sim-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stn .seg.compact button { min-height: 38px; background: var(--s3); color: var(--ink); border-color: var(--s-line-strong); font-size: 14px; }
.stn .seg.compact button[aria-pressed=true] { border-color: #a78bfa; background: rgba(167,139,250,.18); color: #fff; }
.stn[data-sim="1"] .stn-card-actions { border-color: #a78bfa; }
.stn .test-badge { background: #7c3aed; color: #fff; }

/* ---- service code row ---- */
.stn-scan-row { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content; gap: 10px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--s-line-soft); }
@media (max-width: 600px) { .stn-scan-row { grid-template-columns: minmax(0, 1fr) max-content; } .stn-scan-label { grid-column: 1 / -1; } .stn-scan-input { grid-column: 1 / -1; } }
.stn-scan-label { font-weight: 650; color: var(--ink-2); font-size: 14px; }
.stn-input { font: inherit; color: var(--ink); background: var(--s3); border: 1px solid var(--s-line-strong); border-radius: var(--r-sm); padding: 8px 10px; min-height: 44px; width: 100%; min-width: 0; }
.stn-input::placeholder { color: var(--ink-dim); }
.stn-scan-input { font-family: var(--mono); letter-spacing: .04em; }
.stn-scan-input::placeholder { font-family: inherit; letter-spacing: 0; }
.stn-scan-current { font-family: var(--mono); color: var(--ink-2); font-weight: 600; overflow-wrap: anywhere; }
.stn-scan-current[data-state="assigned"], .stn-scan-current[data-state="verified"] { color: var(--s-pass); }
.stn-scan-current[data-state="mismatch"] { color: var(--s-fail); font-weight: 700; }
.stn-scan-arm[data-armed="1"] { border-color: var(--s-run); color: var(--s-run); background: var(--s-run-wash); box-shadow: 0 0 0 3px var(--s-run-wash); }

/* ---- auto ---- */
.stn-auto { border-color: #2fb06f; }
.stn-auto-counts { font-size: 16px; font-weight: 700; }
.stn-auto-units { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.stn-auto-units li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: var(--r-sm); background: var(--s1); font-size: 14px; }
.stn-auto-units li[data-state="PASS"] .stn-au-glyph, .stn-auto-units li[data-state="PASS"] .stn-au-title { color: var(--s-pass); }
.stn-auto-units li[data-state="FAIL"] .stn-au-glyph, .stn-auto-units li[data-state="FAIL"] .stn-au-title { color: var(--s-fail); }
.stn-auto-units li[data-fault="1"] .stn-au-glyph, .stn-auto-units li[data-fault="1"] .stn-au-title, .stn-auto-units li[data-state="NO_UNIT"] .stn-au-title { color: var(--s-warn); }
.stn-au-title { font-weight: 750; }

/* ---- banner (PC section 7), shared with 1 Board Test / 2 Final Test ---- */
.stn-banner-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stn-banner { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 14px; border: 2px solid rgba(142,153,168,.36);
  background: rgba(142,153,168,.08); min-width: 0; color: #f4f7fa; position: relative; }
.stn-banner-glyph { font-size: 30px; line-height: 1; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.05); box-shadow: 0 0 0 1.5px currentColor inset; }
.stn-banner-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.stn-banner-title { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; font-size: clamp(26px, 3.3vw, 46px); font-weight: 800;
  line-height: 1.02; letter-spacing: -.01em; white-space: normal; overflow-wrap: break-word; }
.stn-banner-sub { font-size: 16px; font-weight: 550; line-height: 1.3; white-space: normal; overflow-wrap: break-word; }
.stn-banner-test { position: absolute; top: 8px; right: 10px; }
.stn-banner[data-state="WAITING"] { border-color: rgba(79,168,255,.60); background: linear-gradient(180deg, rgba(79,168,255,.16), rgba(79,168,255,.08)); }
.stn-banner[data-state="WAITING"] .stn-banner-title, .stn-banner[data-state="WAITING"] .stn-banner-glyph { color: #4fa8ff; }
.stn-banner[data-state="WAITING"] .stn-banner-sub { color: #ccd5e0; }
.stn-banner[data-state="FLASHING"], .stn-banner[data-state="TESTING"] { border-color: #4fa8ff; background: linear-gradient(180deg, rgba(79,168,255,.20), rgba(79,168,255,.10)); box-shadow: 0 0 0 4px rgba(79,168,255,.12); }
.stn-banner[data-state="FLASHING"] .stn-banner-title, .stn-banner[data-state="TESTING"] .stn-banner-title,
.stn-banner[data-state="FLASHING"] .stn-banner-glyph, .stn-banner[data-state="TESTING"] .stn-banner-glyph { color: #4fa8ff; }
.stn-banner[data-state="STOPPED"] { border-color: rgba(142,153,168,.36); background: rgba(142,153,168,.08); }
.stn-banner[data-state="STOPPED"] .stn-banner-sub { color: #ccd5e0; }
.stn-banner[data-state="SCAN"] { border-color: #4fa8ff; background: linear-gradient(180deg, rgba(79,168,255,.22), rgba(79,168,255,.10)); box-shadow: 0 0 0 4px rgba(79,168,255,.12); }
.stn-banner[data-state="SCAN"] .stn-banner-title, .stn-banner[data-state="SCAN"] .stn-banner-glyph { color: #4fa8ff; }
.stn-banner[data-terminal="1"], .stn-banner[data-state="MISMATCH"] { border-width: 0; padding: 18px 20px; }
.stn-banner[data-terminal="1"] .stn-banner-glyph, .stn-banner[data-state="MISMATCH"] .stn-banner-glyph { background: rgba(0,0,0,.14); box-shadow: 0 0 0 1.5px rgba(0,0,0,.25) inset; }
.stn-banner[data-state="MISMATCH"] { background: linear-gradient(180deg, #ff6d6d, #e83f3f); color: #170203; }
.stn-banner[data-state="PASS"] { background: linear-gradient(180deg, #55e896 0%, #2fbf70 100%); color: #04120a; box-shadow: 0 12px 34px -14px rgba(70,224,138,.28); }
.stn-banner[data-state="FAIL"] { background: linear-gradient(180deg, #ff6d6d 0%, #e83f3f 100%); color: #170203; box-shadow: 0 12px 34px -14px rgba(255,91,91,.30); }
.stn-banner[data-state="NO_UNIT"], .stn-banner[data-state="FAIL"][data-fault="1"] { background: linear-gradient(180deg, #ffb24a 0%, #ef8f12 100%); color: #170d01; box-shadow: 0 12px 34px -14px rgba(255,166,48,.28); }
.stn-banner[data-terminal="1"] .stn-banner-sub { font-weight: 650; }
@media (max-width: 600px) { .stn-banner { padding: 11px 13px; gap: 12px; } .stn-banner-glyph { width: 44px; height: 44px; font-size: 24px; } }

.stn-pass-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border: 1px solid var(--s-pass-edge); background: var(--s-pass-wash); border-radius: var(--r); }
.stn-ps-k { color: var(--ink-2); font-weight: 650; }
.stn .stn-ps-num { font-size: clamp(28px, 6vw, 48px); text-align: left; color: var(--s-pass); }
.stn-fail-strip { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 13px; border: 1px solid var(--s-fail-edge); background: var(--s-fail-wash); border-radius: var(--r); }
.stn-fail-strip-h { font-size: 14px; font-weight: 750; color: var(--s-fail); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.stn-fail-strip-items { display: flex; gap: 7px; flex-wrap: wrap; }
.stn-fail-strip[data-fault="1"] { border-color: var(--s-warn-edge); background: var(--s-warn-wash); }
.stn-fail-strip[data-fault="1"] .stn-fail-strip-h, .stn-fail-strip[data-fault="1"] .stn-fail-pill { color: var(--s-warn); border-color: var(--s-warn-edge); background: none; }
.stn-fail-pill { font-size: 14px; font-weight: 650; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--s-fail-edge); color: var(--s-fail); background: rgba(255,91,91,.08); white-space: nowrap; }

/* ---- progress ---- */
.stn-progress { border: 1px solid var(--s-line); background: var(--s2); border-radius: var(--r); padding: 10px 13px 11px; }
.stn-prg-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.stn-prg-stage { font-size: 16px; font-weight: 700; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.stn-prg-pct { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.stn-prg-time { font-size: 14px; color: var(--ink-2); font-family: var(--mono); white-space: nowrap; min-width: 13ch; text-align: right; }
.stn-prg-track { height: 12px; border-radius: 6px; background: var(--s1); border: 1px solid var(--s-line); overflow: hidden; }
.stn-prg-fill { height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--brand-2), var(--brand)); transition: width 220ms ease-out; }
.stn-progress[data-active="true"] .stn-prg-fill { background-image: linear-gradient(90deg, var(--brand-2), var(--brand)), repeating-linear-gradient(115deg, rgba(255,255,255,.16) 0 8px, rgba(255,255,255,0) 8px 17px); background-blend-mode: overlay; }
.stn-progress[data-done="pass"] .stn-prg-fill { background: linear-gradient(90deg, var(--s-pass-deep), var(--s-pass)); }
.stn-progress[data-done="fail"] .stn-prg-fill { background: linear-gradient(90deg, var(--s-fail-deep), var(--s-fail)); }
.stn-progress[data-done="pass"] .stn-prg-pct { color: var(--s-pass); }
.stn-progress[data-done="fail"] .stn-prg-pct { color: var(--s-fail); }
.stn-prg-bot { margin-top: 7px; }
.stn-prg-checks { font-size: 14px; color: var(--ink-3); }

/* ---- console ---- */
.stn-console-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.stn-console-head .stn-card-h { margin-bottom: 0; }
.stn-console-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stn-mini-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); font-weight: 600; cursor: pointer; min-height: 36px; }
.stn-mini-check input { width: 18px; height: 18px; }
.stn-console-body { position: relative; }
.stn-console-scroll { height: 340px; overflow-y: auto; overflow-x: hidden; background: var(--s1); border: 1px solid var(--s-line); border-radius: var(--r); padding: 8px 10px 44px; contain: layout paint; }
.stn-console { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.stn-log-line { display: grid; grid-template-columns: max-content 4ch 1fr; gap: 10px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.42; padding: 1px 4px; border-radius: 4px; }
@media (max-width: 600px) { .stn-log-line { grid-template-columns: 4ch 1fr; } .stn-log-ts { display: none; } }
.stn-log-ts { color: var(--ink-dim); white-space: nowrap; }
.stn-log-tag { white-space: pre; font-weight: 700; }
.stn-log-text { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; color: var(--ink-2); }
.stn-log-line[data-level="info"] .stn-log-tag { color: var(--ink-dim); }
.stn-log-line[data-level="step"] .stn-log-text { color: var(--ink); font-weight: 650; }
.stn-log-line[data-level="step"] .stn-log-tag { color: var(--s-run); }
.stn-log-line[data-level="step"] { border-top: 1px solid var(--s-line-soft); margin-top: 3px; padding-top: 3px; border-radius: 0; }
.stn-log-line[data-level="good"] .stn-log-text, .stn-log-line[data-level="good"] .stn-log-tag { color: var(--s-pass); }
.stn-log-line[data-level="warn"] .stn-log-text, .stn-log-line[data-level="warn"] .stn-log-tag { color: var(--s-warn); }
.stn-log-line[data-level="bad"] .stn-log-text, .stn-log-line[data-level="bad"] .stn-log-tag { color: var(--s-fail); }
.stn-log-line[data-level="bad"] { background: var(--s-fail-wash); }
.stn-log-line[data-level="debug"] .stn-log-text, .stn-log-line[data-level="debug"] .stn-log-tag { color: var(--ink-dim); }
.stn-console[data-debug="0"] .stn-log-line[data-level="debug"] { display: none; }
.stn-jump-latest { position: absolute; right: 14px; bottom: 12px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--brand); background: #0d1b2a;
  color: var(--brand); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

/* ---- right tabs ---- */
.stn-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; background: var(--s1); border: 1px solid var(--s-line); border-radius: var(--r-lg); }
.stn-tab { position: relative; flex: 1 1 auto; border: 1px solid transparent; background: transparent; color: var(--ink-2); font: inherit; font-size: 16px; font-weight: 650;
  padding: 8px 18px 9px; border-radius: var(--r); cursor: pointer; white-space: nowrap; min-height: 44px; }
.stn-tab:hover { color: var(--ink); background: var(--s3); }
.stn-tab[aria-selected="true"] { color: var(--ink); background: linear-gradient(180deg, var(--s4) 0%, var(--s3) 100%); border-color: var(--s-line-strong); }
.stn-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--brand); }
.stn-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ---- stage strip ---- */
.stn-stage-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
@media (max-width: 600px) { .stn-stage-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stn-stage { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 9px 12px; border: 1px solid var(--s-line); border-radius: var(--r); background: var(--s3);
  box-shadow: 3px 0 0 var(--s-idle-edge) inset; min-width: 0; min-height: 76px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.stn-stage:hover { border-color: var(--s-line-strong); background: var(--s4); }
.stn-stage-top { display: flex; align-items: center; gap: 6px; }
.stn-stage-idx { font-size: 13px; font-weight: 700; color: var(--ink-dim); font-family: var(--mono); white-space: nowrap; }
.stn-stage-glyph { font-size: 13px; line-height: 1; margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3);
  background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px var(--s-line-strong) inset; }
.stn-stage-name { font-size: 15px; font-weight: 650; color: var(--ink); line-height: 1.18; overflow-wrap: break-word; }
.stn-stage-status { font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--s-idle); margin-top: auto; }
.stn-stage[data-status="running"] { border-color: var(--s-run); background: var(--s-run-wash); box-shadow: 3px 0 0 var(--s-run) inset, 0 0 0 3px var(--s-run-wash); }
.stn-stage[data-status="running"] .stn-stage-status { color: var(--s-run); }
.stn-stage[data-status="running"] .stn-stage-glyph { color: #04120a; background: var(--s-run); box-shadow: none; }
.stn-stage[data-status="pass"] { border-color: var(--s-pass-edge); background: var(--s-pass-wash); box-shadow: 3px 0 0 var(--s-pass) inset; }
.stn-stage[data-status="pass"] .stn-stage-status { color: var(--s-pass); }
.stn-stage[data-status="pass"] .stn-stage-glyph { color: #04120a; background: var(--s-pass); box-shadow: none; }
.stn-stage[data-status="fail"] { border-color: var(--s-fail); box-shadow: 3px 0 0 var(--s-fail) inset; background: repeating-linear-gradient(135deg, rgba(255,91,91,.20) 0 6px, rgba(255,91,91,.06) 6px 13px); }
.stn-stage[data-status="fail"] .stn-stage-status { color: var(--s-fail); }
.stn-stage[data-status="fail"] .stn-stage-glyph { color: #170203; background: var(--s-fail); box-shadow: none; }
.stn-stage[data-status="fail"] .stn-stage-name { color: #ffdede; }
.stn-stage[data-status="stopped"] { box-shadow: 3px 0 0 var(--ink-3) inset; }
.stn-stage[data-status="stopped"] .stn-stage-status { color: var(--ink-2); }

/* ---- diagram ---- */
.stn-diagram-wrap { background: radial-gradient(120% 90% at 50% 0%, #0d1218 0%, var(--s1) 70%); border: 1px solid var(--s-line); border-radius: var(--r); padding: 10px; overflow: hidden; }
.stn-diagram-wrap svg { display: block; width: 100%; height: auto; max-width: 100%; }
.stn .dg-box { fill: var(--s2); stroke: var(--s-line-strong); stroke-width: 1.4; }
.stn .dg-frame { fill: rgba(0,0,0,.45); stroke: var(--s-line); stroke-width: 1.4; }
.stn .dg-wire { stroke: #7a8798; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stn .dg-wire-dotted { stroke-dasharray: 7 6; stroke-width: 2; }
.stn .dg-label { fill: var(--ink); font-family: system-ui, sans-serif; font-weight: 650; }
.stn .dg-sub { fill: var(--ink-3); font-family: system-ui, sans-serif; }
.stn .dg-wirelab { font-family: system-ui, sans-serif; font-weight: 600; }
.stn .dg-title { fill: var(--ink-2); font-family: system-ui, sans-serif; font-weight: 700; letter-spacing: .08em; }
.stn .dg-node[data-state="on"] > rect, .stn .dg-node[data-state="pass"] > rect { fill: var(--s-pass-wash); stroke: var(--s-pass); stroke-width: 2.4; }
.stn .dg-node[data-state="on"] .dg-label, .stn .dg-node[data-state="pass"] .dg-label { fill: var(--s-pass); }
.stn .dg-node[data-state="off"] > rect { fill: var(--s-idle-wash); stroke: var(--s-idle); stroke-width: 2; }
.stn .dg-node[data-state="off"] .dg-label { fill: var(--s-idle); }
.stn .dg-node[data-state="running"] > rect { fill: var(--s-run-wash); stroke: var(--s-run); stroke-width: 2.4; }
.stn .dg-node[data-state="running"] .dg-label { fill: var(--s-run); }
.stn .dg-node[data-state="fail"] > rect { fill: var(--s-fail-wash); stroke: var(--s-fail); stroke-width: 2.6; }
.stn .dg-node[data-state="fail"] .dg-label { fill: var(--s-fail); }
.stn .dg-node[data-state="unknown"] > rect { fill: var(--s-unknown-wash); stroke: var(--s-unknown-edge); stroke-width: 1.6; stroke-dasharray: 5 4; }
.stn .dg-node[data-state="unknown"] .dg-label { fill: var(--s-unknown); }
.stn .dg-node[data-state="mode"] > rect { fill: var(--s-mode-wash); stroke: var(--s-mode); stroke-width: 2.4; }
.stn .dg-node[data-state="mode"] .dg-label { fill: var(--s-mode); }
.stn .dg-node[data-hand="1"] > rect { stroke-dasharray: 8 5; }
.stn .dg-node[data-clickable="1"] { cursor: pointer; }
.stn .dg-node[data-clickable="1"]:hover > rect, .stn .dg-node[data-clickable="1"]:focus > rect { stroke: var(--s-focus); }
.stn .dg-hand-badge rect { fill: #241d05; stroke: var(--s-hand-edge); stroke-width: 1.2; }
.stn .dg-hand-badge text { fill: var(--s-hand); font-weight: 700; }
.stn-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 11px 0 0; padding: 10px 0 0; border-top: 1px solid var(--s-line-soft); }
.stn-legend li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.stn-lg-swatch { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 11px; font-weight: 800; line-height: 1; }
.stn-live-rows { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.stn-live-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 14px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s1); color: var(--ink-2); }
.stn-live-pill b { font-weight: 700; color: var(--ink); }
.stn-live-pill[data-src="hand"] { border-color: var(--s-hand-edge); border-style: dashed; background: var(--s-hand-wash); }
.stn-hand-tag, .stn-hand-tag-inline { font-size: 13px; font-weight: 750; letter-spacing: .04em; color: var(--s-hand); border: 1px dashed var(--s-hand-edge); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.stn-wire-notes { margin-top: 12px; display: grid; border: 1px solid var(--s-line); border-radius: var(--r); background: var(--s1); overflow: hidden; }
.stn-wire-note { display: grid; grid-template-columns: minmax(100px, 30%) 1fr; gap: 14px; font-size: 14px; line-height: 1.4; padding: 7px 12px; border-bottom: 1px solid var(--s-line-soft); }
.stn-wire-note:last-child { border-bottom: 0; }
.stn-wn-k { color: var(--ink-3); font-weight: 650; overflow-wrap: anywhere; }
.stn-wn-v { color: var(--ink-2); overflow-wrap: anywhere; }
.stn-wire-note[data-warn="1"] .stn-wn-v { color: var(--s-warn); }

/* ---- items, controls, ports ---- */
.stn-field-label { display: block; font-weight: 650; color: var(--ink-2); font-size: 14px; margin-bottom: 4px; }
.stn-item-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.stn-item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stn-controls-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.stn-ctl-group { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 8px 10px; border: 1px solid var(--s-line); border-radius: var(--r); background: var(--s1); min-width: 0; max-width: 100%; }
.stn-ctl-group-label { font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; min-width: 7ch; }
.stn-ctl { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; min-height: 40px; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--s-line-strong); border-radius: var(--r-sm); background: linear-gradient(180deg, var(--s4) 0%, var(--s3) 100%); box-shadow: var(--shadow-btn); color: var(--ink); cursor: pointer; }
.stn-ctl:hover:not([disabled]) { border-color: #4b5867; }
.stn-ctl[disabled] { background: #0f1319; border-color: var(--s-line); color: var(--ink-dim); box-shadow: none; cursor: not-allowed; }
.stn-ctl-glyph { font-size: 14px; color: var(--ink-3); width: 14px; text-align: center; }
.stn-ctl[data-tone="danger"] { border-color: rgba(255,91,91,.45); }
.stn-ctl[data-tone="danger"] .stn-ctl-glyph { color: var(--s-fail); }
.stn-ctl[data-tone="mode"] { border-color: var(--s-mode-edge); }
.stn-ctl[data-tone="mode"] .stn-ctl-glyph { color: var(--s-mode); }
.stn-ports-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.stn-port-btn { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; padding: 10px 14px; border: 1px solid var(--s-line-strong); border-radius: var(--r);
  background: linear-gradient(180deg, var(--s4) 0%, var(--s3) 100%); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.stn-pb-top { display: flex; align-items: center; gap: 9px; }
.stn-pb-name { font-weight: 700; white-space: nowrap; }
.stn-pb-state { font-size: 13px; font-weight: 800; letter-spacing: .07em; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.stn-pb-dev { font-size: 14px; color: var(--ink-3); overflow-wrap: anywhere; }
.stn-pb-caret { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.stn-port-btn[data-state="on"] { border-color: var(--s-pass-edge); background: var(--s-pass-wash); }
.stn-port-btn[data-state="on"] .stn-pb-state { color: #04120a; background: var(--s-pass); border-color: var(--s-pass); }
.stn-port-btn[data-state="off"] .stn-pb-state { color: var(--s-idle); }
.stn-port-btn[data-state="unknown"] { border-style: dashed; }
.stn-port-btn[data-state="unknown"] .stn-pb-state { color: var(--s-unknown); }
.stn-port-btn[data-src="hand"] { border-style: dashed; border-color: var(--s-hand-edge); }
.stn-menu-layer { position: fixed; inset: 0; z-index: 90; }
.stn-menu { position: fixed; min-width: 200px; background: #10151b; border: 1px solid #364353; border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.75); padding: 6px; z-index: 91; color: #f4f7fa; }
.stn-menu-h { font-size: 13px; font-weight: 700; color: #9dabbb; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px 8px; border-bottom: 1px solid rgba(148,163,184,.10); margin-bottom: 4px; }
.stn-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; min-height: 44px; border: 0; border-radius: 7px; background: transparent; color: #f4f7fa; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.stn-menu-item:hover:not([disabled]), .stn-menu-item:focus-visible { background: #212b36; }
.stn-menu-item[disabled] { color: #8996a6; cursor: not-allowed; }
.stn-mi-glyph { width: 16px; text-align: center; color: #9dabbb; }

/* ---- report ---- */
.stn-rpt-verdict { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-lg); min-width: 0; background: var(--s2); border: 1px solid var(--s-line); }
.stn-rpt-verdict[data-result="PASS"] { background: linear-gradient(180deg, #55e896 0%, var(--s-pass-deep) 100%); color: #04120a; border: 0; }
.stn-rpt-verdict[data-result="FAIL"] { background: linear-gradient(180deg, #ff6d6d 0%, var(--s-fail-deep) 100%); color: #170203; border: 0; }
.stn-rpt-verdict[data-result="NO_UNIT"], .stn-rpt-verdict[data-result="BENCH FAULT"] { background: linear-gradient(180deg, #ffb24a 0%, var(--s-warn-deep) 100%); color: #170d01; border: 0; }
.stn-rpt-verdict[data-result="PENDING"] { border-color: var(--s-run); color: var(--s-run); }
.stn-rv-glyph { font-size: 30px; line-height: 1; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.14); }
.stn-rv-text { display: flex; flex-direction: column; min-width: 0; gap: 3px; flex: 1 1 auto; }
.stn-rv-title { font-family: var(--display); font-size: clamp(26px, 3.2vw, 42px); font-weight: 800; line-height: 1.04; }
.stn-rv-sub { font-size: 16px; font-weight: 650; line-height: 1.3; }
.stn-kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); gap: 9px; }
.stn-kv { border: 1px solid var(--s-line); border-radius: var(--r-sm); background: var(--s1); padding: 9px 12px; min-width: 0; }
.stn-kv-k { font-size: 13px; color: var(--ink-3); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.stn-kv-v { font-size: 16px; font-weight: 700; font-family: var(--mono); overflow-wrap: anywhere; margin-top: 2px; }
.stn-count-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stn-count-tile { flex: 1 1 110px; border: 1px solid var(--s-line); border-radius: var(--r); background: var(--s1); padding: 10px 12px; text-align: center; }
.stn-ct-n { font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stn-ct-k { font-size: 13px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; font-weight: 650; margin-top: 2px; }
.stn-count-tile[data-tone="pass"] { border-color: var(--s-pass-edge); background: var(--s-pass-wash); }
.stn-count-tile[data-tone="pass"] .stn-ct-n { color: var(--s-pass); }
.stn-count-tile[data-tone="fail"] { border-color: var(--s-fail-edge); background: var(--s-fail-wash); }
.stn-count-tile[data-tone="fail"] .stn-ct-n { color: var(--s-fail); }
.stn-count-tile[data-tone="warn"] { border-color: var(--s-warn-edge); background: var(--s-warn-wash); }
.stn-count-tile[data-tone="warn"] .stn-ct-n { color: var(--s-warn); }
.stn-tbl-wrap { overflow-x: auto; border: 1px solid var(--s-line); border-radius: var(--r); background: var(--s1); max-width: 100%; }
table.stn-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.stn-tbl th { text-align: left; font-size: 13px; font-weight: 750; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; padding: 9px 12px; background: var(--s3); border-bottom: 1px solid var(--s-line-strong); white-space: nowrap; }
table.stn-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--s-line-soft); color: var(--ink-2); vertical-align: top; overflow-wrap: anywhere; }
table.stn-tbl tr:last-child td { border-bottom: 0; }
table.stn-tbl tbody tr[data-tone="fail"] td { background: var(--s-fail-wash); }
.stn-td-kind { font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--s-fail); white-space: nowrap; }
.stn-card[data-fault="1"] .stn-td-kind { color: var(--s-warn); }
.stn-card-faults { border-color: var(--s-warn-edge); }
.stn-card-faults .stn-td-item { color: var(--s-warn); }
.stn-td-item { color: var(--ink); font-weight: 700; font-family: var(--mono); }
.stn-td-result { font-weight: 750; white-space: nowrap; }
.stn-td-result[data-tone="pass"] { color: var(--s-pass); }
.stn-td-result[data-tone="fail"] { color: var(--s-fail); }
.stn-td-result[data-tone="none"] { color: var(--ink-3); }
.stn-td-rerun { display: flex; flex-wrap: wrap; gap: 6px; }
table.stn-tbl td.mono { font-family: var(--mono); color: var(--ink); font-weight: 700; }
.stn-rerun-btn { font: inherit; font-size: 13px; font-weight: 700; padding: 5px 12px; min-height: 32px; border-radius: 999px; border: 1px solid var(--s-run-edge); background: var(--s-run-wash); color: var(--s-run); cursor: pointer; white-space: nowrap; }
.stn-rerun-btn[disabled] { border-color: var(--s-line); color: var(--ink-2); background: #0f1319; cursor: not-allowed; }
.stn-fail-bin-body { font-size: 14px; color: var(--ink-2); }
.stn-summary { margin: 0; padding-left: 18px; color: var(--ink-2); }
.stn-search-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 8px; margin-bottom: 10px; }

/* ---- setup ---- */
.stn-opt-rows { display: flex; flex-direction: column; gap: 6px; }
.stn-check { display: flex; align-items: flex-start; gap: 11px; padding: 9px 12px; border: 1px solid var(--s-line); border-radius: var(--r); background: var(--s1); cursor: pointer; }
.stn-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--brand-2); }
.stn-check[data-on="1"] { border-color: var(--s-run-edge); }
.stn-check[data-danger="1"][data-on="1"] { border-color: var(--s-warn-edge); background: var(--s-warn-wash); }
.stn-check-body { display: flex; flex-direction: column; min-width: 0; }
.stn-check-label { font-weight: 650; color: var(--ink); }
.stn-check-hint { font-size: 14px; color: var(--ink-3); }
.stn-field-row { display: flex; flex-direction: column; gap: 4px; }
.stn-img-row { padding: 9px 12px; border: 1px solid var(--s-line); border-radius: var(--r); background: var(--s1); display: flex; flex-direction: column; gap: 4px; }
.stn-img-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stn-img-kind { font-weight: 700; color: var(--ink-2); min-width: 9ch; }
.stn-img-file { font-family: var(--mono); color: var(--ink); overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; }
.stn-img-file[data-empty="1"] { color: var(--s-warn); }
.stn-img-dir { font-size: 14px; color: var(--ink-3); }

/* ---- empty + help ---- */
.stn-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 220px; padding: 28px 18px; text-align: center;
  border: 1px dashed var(--s-line-strong); border-radius: var(--r-lg); background: var(--s1); }
.stn-empty-glyph { font-size: 28px; color: var(--ink-3); width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); border: 1px solid var(--s-line-strong); }
.stn-empty-h { font-size: 20px; font-weight: 700; }
.stn-empty-p { color: var(--ink-2); max-width: 46ch; }
.stn-help-topic h3 { font-size: 20px; font-weight: 750; margin-bottom: 9px; }
.stn-help-prose { color: var(--ink-2); line-height: 1.55; overflow-wrap: anywhere; }
.stn-help-prose p { margin: 0 0 9px; max-width: 74ch; }
.stn-help-prose b, .stn-help-prose strong { color: var(--ink); }
.stn-help-prose ul { margin: 0 0 9px; padding-left: 20px; }
.stn-help-prose table { width: 100%; border-collapse: collapse; margin: 2px 0 10px; border: 1px solid var(--s-line); background: var(--s1); }
.stn-help-prose td { padding: 8px 11px; border-bottom: 1px solid var(--s-line-soft); vertical-align: top; font-size: 14px; }
.stn-help-prose td:first-child { width: 30%; color: var(--ink); }
.stn-help-prose h2, .stn-help-prose h4 { font-size: 16px; font-weight: 750; color: var(--ink); margin: 14px 0 7px; }
.stn-help-prose code { font-family: var(--mono); font-size: 14px; color: var(--brand); background: rgba(124,196,255,.08); padding: 0 4px; border-radius: 4px; }
mark.stn-hit { background: rgba(255,209,102,.28); color: var(--ink); border-radius: 3px; padding: 0 2px; }

/* ---- toasts (PC toast.js) ---- */
.stn-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px; max-width: min(460px, calc(100vw - 32px)); pointer-events: none; }
.stn-toast { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,166,48,.55); background: #1d1608; color: #f4f7fa;
  box-shadow: 0 18px 48px rgba(0,0,0,.75); pointer-events: auto; }
.stn-toast-glyph { font-size: 20px; line-height: 1.1; color: #ffa630; flex: 0 0 auto; }
.stn-toast-body { min-width: 0; flex: 1 1 auto; }
.stn-toast-h { font-weight: 700; }
.stn-toast-p { font-size: 14px; color: #ccd5e0; overflow-wrap: anywhere; margin-top: 2px; }
.stn-toast[data-tone="bad"] { border-color: rgba(255,91,91,.60); background: #22090b; }
.stn-toast[data-tone="bad"] .stn-toast-glyph { color: #ff5b5b; }
.stn-toast[data-tone="good"] { border-color: rgba(70,224,138,.55); background: #07190f; }
.stn-toast[data-tone="good"] .stn-toast-glyph { color: #46e08a; }
.stn-toast[data-tone="info"] { border-color: rgba(79,168,255,.60); background: #0b1622; }
.stn-toast[data-tone="info"] .stn-toast-glyph { color: #4fa8ff; }
.stn-toast-x { border: 0; background: transparent; color: #9dabbb; font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; min-width: 32px; min-height: 32px; }

@media (max-width: 520px) {
  .stn { padding: 8px; border-radius: 10px; }
  .stn-card { padding: 10px 11px; }
  .stn-tab { padding: 8px 10px; font-size: 15px; }
  .stn-ctl { white-space: normal; text-align: left; }
  .stn-wire-note { grid-template-columns: 1fr; gap: 2px; }
}
/* R37: the visible reason next to the wiring diagram for every '?' / 'not read yet' (no hover on a touchscreen) */
.stn-diagram-why { margin: 0 0 10px; padding: 8px 12px; font-size: 14px; line-height: 1.45; color: var(--ink-2); border: 1px dashed var(--s-unknown-edge); border-radius: var(--r); background: var(--s-unknown-wash); }
.stn-diagram-why[data-why="read"] { border-style: solid; border-color: var(--s-line); background: var(--s1); }
.stn-diagram-why[data-why="offline"] { border-color: var(--s-fail, #ff6b6b); color: var(--ink); }
.stn-diagram-why[hidden] { display: none; }
.stn-diagram-why a { color: inherit; font-weight: 700; text-decoration: underline; }