.xvb, .xvs {
  --xb-bg: #0A0A0B; --xb-card: #141417; --xb-raised: #1B1B1E;
  --xb-line: #27272A; --xb-line2: #3F3F46;
  --xb-tx: #FAFAFA; --xb-tx2: #A1A1AA;
  --xb-accent: var(--pillar-accent, #CF8BE8); --xb-accent-rgb: var(--pillar-accent-rgb, 207, 139, 232);
  --xb-blue: var(--color-accent, #50A2FF); --xb-blue-rgb: var(--platform-dark-accent-rgb, 80, 162, 255);
  --xb-ok: var(--sev-live, #4ADE80);
  --xb-adv: var(--sev-adv, #FCD34D); --xb-warn: var(--sev-warn, #F59E0B); --xb-crit: var(--sev-crit, #F87171);
  --xb-crit-rgb: var(--sev-crit-rgb, 248, 113, 113);
  --xb-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  --xb-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --xb-dur: var(--dur-slow, 420ms);
}
.xvb__panel { --xb-lvl: var(--xb-crit); --xb-lvl-tx: var(--xb-crit); }
.xvb__panel[data-level="none"] { --xb-lvl: var(--xb-accent); --xb-lvl-tx: var(--xb-tx); }

.xvb__sr, .xvs__live { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.xvb__head { max-width: 720px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.xvb__head .rp-lede span { color: var(--xb-tx); }

.xvb__fig { margin: 0; border: 1px solid var(--xb-line); border-radius: 14px; background: var(--xb-card); overflow: hidden; }
.xvb__bar {
  display: flex; align-items: center; gap: 0.75rem; min-height: 52px; flex-wrap: wrap;
  padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--xb-line); background: var(--xb-raised);
}
.xvb__title { margin: 0 0 0 0.5rem; font-family: var(--xb-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xb-tx2); }
.xvb__toggle, .xvs__toggle {
  appearance: none; display: inline-flex; align-items: center; gap: 0.375rem; height: 40px; padding: 0 0.75rem; cursor: pointer; margin-left: auto;
  border: 1px solid var(--xb-line2); border-radius: 8px; background: var(--xb-card); color: var(--xb-tx);
  font: inherit; font-family: var(--xb-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
  transition: border-color var(--dur-fast, 160ms) var(--xb-ease);
}
.xvb__toggle:hover, .xvs__toggle:hover { border-color: var(--xb-blue); }
.xvb__toggle:focus-visible, .xvs__toggle:focus-visible { outline: 2px solid var(--xb-blue); outline-offset: 3px; }
.xvb__toggle svg, .xvs__toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.xvb__toggle .i-play, .xvs__toggle .i-play { display: none; fill: currentColor; stroke: none; }
.xvb.is-paused .xvb__toggle .i-play, .xvs.is-paused .xvs__toggle .i-play { display: block; }
.xvb.is-paused .xvb__toggle .i-pause, .xvs.is-paused .xvs__toggle .i-pause { display: none; }
.xvb:not(.is-js) .xvb__toggle, .xvb__toggle[hidden], .xvs:not(.is-js) .xvs__toggle { display: none; }

.xvb__stage {
  display: grid; gap: 1px; background: var(--xb-line);
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 19rem);
  grid-template-areas: "src mid alert" "src mid log";
  transition: opacity 600ms var(--xb-ease);
}
.xvb__panel.is-fade .xvb__stage { opacity: 0.25; }
.xvb__stage > * { background: var(--xb-card); padding: clamp(1rem, 2vw, 1.375rem); min-width: 0; }

.xvb__src { grid-area: src; list-style: none; margin: 0; display: grid; gap: 0.125rem; align-content: start; }
.xvb__src li {
  --xb-src: var(--pillar-accent, var(--xb-accent)); --xb-src-rgb: var(--pillar-accent-rgb, var(--xb-accent-rgb));
  display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.5rem; border-radius: 7px;
  font-size: 0.875rem; line-height: 1.3; color: var(--xb-tx2);
  transition: color var(--xb-dur) var(--xb-ease), background-color var(--xb-dur) var(--xb-ease);
}
.xvb__src i { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--xb-line2); transition: all var(--xb-dur) var(--xb-ease); }
.xvb__src li.is-on { color: var(--xb-tx); }
.xvb__src li.is-on i { border-color: var(--xb-src); background: var(--xb-src); box-shadow: 0 0 0 3px rgba(var(--xb-src-rgb), 0.16); }
.xvb__src li.is-hot { background: rgba(var(--xb-crit-rgb), 0.09); color: var(--xb-crit); }
.xvb__src li.is-hot i { border-color: var(--xb-crit); background: var(--xb-crit); box-shadow: 0 0 0 4px rgba(var(--xb-crit-rgb), 0.22); }
.xvb__src .xvb__grp {
  display: flex; gap: 0.5rem; margin-top: 0.625rem; padding: 0 0.5rem; font-family: var(--xb-mono); font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--xb-tx2);
}
.xvb__src .xvb__grp:first-child { margin-top: 0; }
.xvb__src .xvb__grp::before { content: ""; flex: none; width: 10px; height: 0; align-self: center; border-top: 1.5px solid var(--xb-src); }
.xvb__cid { margin-left: auto; padding-left: 0.375rem; font-family: var(--xb-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--xb-crit); opacity: 0; transition: opacity var(--xb-dur) var(--xb-ease); }
.xvb__src li.is-hot .xvb__cid { opacity: 1; }
.xvb.is-live .xvb__src li.is-hot i { animation: xvb-pulse 1.4s var(--xb-ease) 3; }

.xvb__mid { grid-area: mid; display: flex; flex-direction: column; gap: 0.875rem; }
.xvb__bhead { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; font-family: var(--xb-mono); font-size: 0.75rem; letter-spacing: 0.06em; }
.xvb__bname { color: var(--xb-tx2); text-transform: uppercase; }
.xvb__bstate {
  display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.1875rem 0.5rem; border-radius: 5px;
  border: 1px solid var(--xb-line2); color: var(--xb-tx); text-transform: uppercase; font-size: 0.6875rem; white-space: nowrap;
  transition: color var(--xb-dur) var(--xb-ease), border-color var(--xb-dur) var(--xb-ease);
}
.xvb__bstate::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--xb-accent); }
.xvb__bstate[data-state="alert"], .xvb__bstate[data-state="ack"] { color: var(--xb-crit); border-color: rgba(var(--xb-crit-rgb), 0.5); }
.xvb__bstate[data-state="alert"]::before, .xvb__bstate[data-state="ack"]::before { background: var(--xb-crit); border-radius: 1px; }

.xvb__board, .xvs__board {
  position: relative; padding: 7px; border-radius: 11px; background: #0D0D10;
  border: 1px solid var(--xb-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 32px -22px rgba(0, 0, 0, 0.9);
  transition: box-shadow 600ms var(--xb-ease), border-color 600ms var(--xb-ease);
}
.xvb__board canvas, .xvs__board canvas { display: block; width: 100%; border-radius: 6px; }
.xvb__board .led, .xvs__board .led { --led-size: clamp(1.125rem, 2.4vw, 1.75rem); --led-pitch: 3px; border-radius: 6px; min-height: 5.5rem; }
.xvb__canvas { aspect-ratio: 96 / 20; }
.led-host.xvb__board[data-led-color="crit"], .led-host.xvs__board[data-led-color="crit"] { border-color: rgba(var(--xb-crit-rgb), 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 34px -14px rgba(var(--xb-crit-rgb), 0.55); }
.led-host.xvs__board[data-led-color="warn"] { border-color: rgba(var(--sev-warn-rgb, 245, 158, 11), 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 34px -14px rgba(var(--sev-warn-rgb, 245, 158, 11), 0.5); }
.led-host.xvs__board[data-led-color="adv"] { border-color: rgba(var(--sev-adv-rgb, 252, 211, 77), 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 34px -14px rgba(var(--sev-adv-rgb, 252, 211, 77), 0.45); }
.led-host.xvb__board[data-led-color="ok"] { border-color: rgba(var(--sev-live-rgb, 74, 222, 128), 0.3); }

.xvb__route { position: relative; display: flex; align-items: center; gap: 0.5rem; font-family: var(--xb-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xb-tx2); }
.xvb__node { display: inline-flex; align-items: center; gap: 0.4375rem; white-space: nowrap; transition: color var(--xb-dur) var(--xb-ease); }
.xvb__node i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--xb-line2); background: var(--xb-card); transition: all var(--xb-dur) var(--xb-ease); }
.xvb__node.is-on { color: var(--xb-tx); }
.xvb__node.is-on i { border-color: var(--xb-crit); background: var(--xb-crit); }
.xvb__node--board i { border-radius: 2px; }
.xvb__node--board.is-on i { background: var(--xb-card); border-style: dashed; }
.xvb__link { position: relative; flex: 1; min-width: 1.5rem; height: 0; border-top: 1.5px solid var(--xb-line2); transition: border-color var(--xb-dur) var(--xb-ease); }
.xvb__link.is-on { border-top-color: var(--xb-crit); }
.xvb__link--proj { border-top-style: dashed; }
.xvb__link small { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-size: 0.625rem; letter-spacing: 0.04em; white-space: nowrap; color: var(--xb-tx2); }
.xvb__route.is-back .xvb__node--board i, .xvb__route.is-back .xvb__link--proj { border-color: var(--xb-line2); }
.xvb__route.is-back .xvb__node--board { color: var(--xb-tx2); }
.xvb__pkt { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--xb-crit); box-shadow: 0 0 0 3px rgba(var(--xb-crit-rgb), 0.25), 0 0 12px var(--xb-crit); opacity: 0; pointer-events: none; }
.xvb__pkt.is-on { opacity: 1; }

.xvb__trend { display: flex; flex-direction: column; gap: 0.625rem; flex: 1; }
.xvb__read { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.625rem; font-family: var(--xb-mono); }
.xvb__sid { flex-basis: 100%; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--xb-tx2); }
.xvb__read b { font-size: clamp(1.75rem, 3.4vw, 2.375rem); line-height: 1; font-weight: 500; color: var(--xb-lvl-tx); transition: color var(--xb-dur) var(--xb-ease); }
.xvb__now { margin-left: auto; font-size: 0.75rem; color: var(--xb-tx2); font-variant-numeric: tabular-nums; }
.xvb__plot { position: relative; flex: 1; min-height: 8.5rem; margin-right: 3.25rem; }
.xvb__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xvb__seg { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.xvb__seg--ok { stroke: var(--xb-accent); }
.xvb__seg--crit { stroke: var(--xb-crit); }
.xvb__area { fill: var(--xb-lvl); fill-opacity: 0.1; transition: fill var(--xb-dur) var(--xb-ease); }
.xvb__th, .xvb__base { position: absolute; left: 0; right: -3.25rem; height: 0; border-top: 1px dashed var(--xb-line2); }
.xvb__base { border-top-style: dotted; }
.xvb__th em, .xvb__base em {
  position: absolute; right: 0; bottom: 3px; font-style: normal; font-family: var(--xb-mono); font-size: 0.6875rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--xb-tx2); transition: color var(--xb-dur) var(--xb-ease);
}
.xvb__th.is-hit { border-top-color: var(--xb-crit); }
.xvb__th.is-hit em { color: var(--xb-crit); }
.xvb__head-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--xb-lvl); box-shadow: 0 0 0 4px rgba(250, 250, 250, 0.08), 0 0 16px var(--xb-lvl); opacity: 0; }
.xvb__head-dot.is-on { opacity: 1; }
.xvb__brk { opacity: 0; }
.xvb__brk.is-on { opacity: 1; }
.xvb__brk rect { fill: var(--xb-card); }
.xvb__brk path { fill: none; stroke: var(--xb-tx2); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.xvb__note { margin: 0; font-family: var(--xb-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xb-tx2); }

.xvb__alert { grid-area: alert; position: relative; }
.xvb__alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--xb-crit); transform: scaleY(0); transform-origin: top; transition: transform var(--xb-dur) var(--xb-ease); }
.xvb__alert.is-on::before { transform: none; }
.xvb.is-live .xvb__alert.is-on { animation: xvb-in var(--xb-dur) var(--xb-ease); }
.xvb__lvl {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.875rem; font-family: var(--xb-mono); font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--xb-tx2); transition: color var(--xb-dur) var(--xb-ease);
}
.xvb__lvl::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.xvb__alert.is-on .xvb__lvl { color: var(--xb-crit); }
.xvb__panel.is-acked .xvb__alert.is-on .xvb__lvl { color: var(--xb-ok); }
.xvb__panel.is-acked .xvb__lvl::before { border-radius: 50%; }
.xvb__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin: 0; }
.xvb__fields dt { font-family: var(--xb-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xb-tx2); }
.xvb__fields dd { margin: 0.125rem 0 0; font-family: var(--xb-mono); font-size: 0.875rem; color: var(--xb-tx); font-variant-numeric: tabular-nums; }
.xvb__alert.is-on .xvb__hot { color: var(--xb-crit); }
.xvb__panel[data-level="none"] .xvb__alert.is-on .xvb__hot { color: var(--xb-tx); }   .xvb__chain { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xvb__chain li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4375rem; font-size: 0.75rem; line-height: 1.25; color: var(--xb-tx2); text-align: center; transition: color var(--xb-dur) var(--xb-ease); }
.xvb__chain li + li::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; border-top: 1.5px solid var(--xb-line2); transition: border-color var(--xb-dur) var(--xb-ease); }
.xvb__chain li.is-on + li.is-on::before { border-top-color: var(--xb-crit); }
.xvb__chain li.is-proj::before { border-top-style: dashed; }
.xvb__chain i { position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--xb-line2); background: var(--xb-card); transition: all var(--xb-dur) var(--xb-ease); }
.xvb__chain li.is-on { color: var(--xb-tx); }
.xvb__chain li.is-on i { background: var(--xb-crit); border-color: var(--xb-crit); }
.xvb__chain li.is-proj i { border-style: dashed; border-radius: 3px; }
.xvb__chain li.is-proj.is-on i { background: var(--xb-card); }
.xvb__chain small { font-family: var(--xb-mono); font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--xb-tx2); }
.xvb.is-live .xvb__chain li.is-on i { animation: xvb-pop 520ms var(--xb-ease); }

.xvb__log { grid-area: log; display: flex; flex-direction: column; gap: 0.75rem; }
.xvb__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-family: var(--xb-mono); font-size: 0.75rem; }
.xvb__rows li { display: flex; gap: 0.625rem; align-items: center; padding: 0.3125rem 0.5rem; border-radius: 5px; background: var(--xb-raised); opacity: 0; transform: translateY(4px); transition: opacity var(--xb-dur) var(--xb-ease), transform var(--xb-dur) var(--xb-ease); }
.xvb__rows li.is-on { opacity: 1; transform: none; }
.xvb.is-reduced .xvb__rows li:not(.is-on), .xvb:not(.is-js) .xvb__rows li:not(.is-on) { display: none; }
.xvb__rows time { flex: none; color: var(--xb-tx2); font-variant-numeric: tabular-nums; }
.xvb__rows span { color: var(--xb-tx); min-width: 0; }
.xvb__rows i { flex: none; width: 3px; height: 0.875rem; border-radius: 2px; }
.xvb__rows .k-norm { background: var(--xb-accent); }
.xvb__rows .k-crit { background: var(--xb-crit); }
.xvb__rows .k-ack { background: var(--xb-ok); }
.xvb__rows .t-crit { color: var(--xb-crit); }
.xvb__export { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--xb-tx2); }
.xvb__csv { flex: none; font-family: var(--xb-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xb-tx); }

@keyframes xvb-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(var(--xb-crit-rgb), 0.28); } 50% { box-shadow: 0 0 0 7px rgba(var(--xb-crit-rgb), 0); } }
@keyframes xvb-in { from { transform: translateY(6px); } to { transform: none; } }
@keyframes xvb-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }

@media (max-width: 1100px) {
  .xvb__cid { display: none; }
  .xvb__stage { grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) minmax(0, 0.8fr); grid-template-areas: "src mid mid" "alert alert log"; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .xvb__alert { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; align-content: start; }
  .xvb__lvl { grid-column: 1 / -1; }
  .xvb__chain { margin-top: 0.25rem; align-self: start; }
}
@media (max-width: 720px) {
  .xvb__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "src" "mid" "alert" "log"; }
  .xvb__src { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.125rem 0.25rem; }
  .xvb__src li { font-size: 0.8125rem; padding: 0.375rem; gap: 0.5rem; }
  .xvb__src .xvb__grp { grid-column: 1 / -1; margin-top: 0.375rem; padding: 0 0.375rem; }
  .xvb__plot { min-height: 7.5rem; margin-right: 2.75rem; }
  .xvb__th, .xvb__base { right: -2.75rem; }
  .xvb__bar { padding: 0.5rem; }
  .xvb__board { padding: 5px; }
  .xvb__route { gap: 0.375rem; font-size: 0.625rem; letter-spacing: 0.03em; }
  .xvb__link { min-width: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xvb *, .xvb *::before, .xvb *::after, .xvs *, .xvs *::before, .xvs *::after { animation: none !important; transition: none !important; }
  .xvb__panel.is-fade .xvb__stage { opacity: 1; }
}

.xvs-stage { max-width: 1000px; }
.xvs {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1.25rem;
  padding: 1.25rem; border: 1px solid var(--xb-line); border-radius: 14px; background: var(--xb-card);
}
.xvs__controls { display: flex; flex-direction: column; gap: 1.125rem; min-width: 0; }
.xvs__row { display: flex; flex-wrap: wrap; gap: 1.125rem 1.25rem; }
.xvs__grp { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.xvs__k { margin: 0; font-family: var(--xb-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--xb-tx2); }
.xvs__btns { display: flex; flex-direction: column; gap: 0.375rem; }
.xvs__btn {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; width: 100%; min-height: 40px;
  padding: 0.5rem 0.75rem; border-radius: 8px; cursor: pointer; text-align: left;
  border: 1px solid var(--xb-line2); background: transparent; color: var(--xb-tx2);
  font: inherit; font-size: 0.875rem; line-height: 1.3;
  transition: border-color var(--dur-fast, 160ms) var(--xb-ease), color var(--dur-fast, 160ms) var(--xb-ease), background-color var(--dur-fast, 160ms) var(--xb-ease);
}
.xvs__btn small { font-family: var(--xb-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xb-tx2); }
.xvs__btn:hover { color: var(--xb-tx); border-color: var(--xb-blue); }
.xvs__btn[aria-pressed="true"], .xvs__opt[aria-pressed="true"] { color: var(--xb-tx); background: rgba(var(--xb-blue-rgb), 0.12); border-color: rgba(var(--xb-blue-rgb), 0.55); }
.xvs__seg { display: inline-flex; gap: 0.25rem; padding: 0.1875rem; border: 1px solid var(--xb-line2); border-radius: 10px; background: var(--xb-bg); }
.xvs__opt {
  appearance: none; min-height: 36px; padding: 0 0.75rem; border-radius: 7px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--xb-tx2); font: inherit; font-size: 0.8125rem; white-space: nowrap;
  transition: color var(--dur-fast, 160ms) var(--xb-ease), background-color var(--dur-fast, 160ms) var(--xb-ease);
}
.xvs__opt:hover { color: var(--xb-tx); }
.xvs__btn:focus-visible, .xvs__opt:focus-visible { outline: 2px solid var(--xb-blue); outline-offset: 2px; }
.xvs:not(.is-js) .xvs__controls { display: none; }
.xvs:not(.is-js) { grid-template-columns: minmax(0, 1fr); }

.xvs__view { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.xvs__scene {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 15rem; padding: 3.75rem 1.25rem 2.25rem; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--xb-line); background: linear-gradient(180deg, #121215 0%, #0E0E11 100%);
}
.xvs__scene[data-board="outdoor"] {
  padding: 3rem 1.25rem 3.75rem;
  background: linear-gradient(180deg, #13151B 0%, #0E0F13 62%, #0B0B0D 100%);
}
.xvs__scene[data-board="outdoor"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1.25rem; border-top: 1px solid var(--xb-line2); }
.xvs__where { position: absolute; left: 0.875rem; right: 6.75rem; top: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--xb-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xb-tx2); }
.xvs__toggle { position: absolute; right: 0.5rem; top: 0.5rem; height: 34px; z-index: 2; }
.xvs__mount { position: relative; width: 100%; display: flex; justify-content: center; }
.xvs__board { width: 75%; }   .xvs__scene[data-board="outdoor"] .xvs__board { width: 100%; }
.xvs__canvas { aspect-ratio: 96 / 20; }
.xvs__scene[data-board="outdoor"] .xvs__canvas { aspect-ratio: 128 / 20; }
.xvs__mount::before, .xvs__mount::after { content: ""; position: absolute; width: 2px; background: var(--xb-line2); }
.xvs__mount::before { left: calc(12.5% + 12%); }
.xvs__mount::after { right: calc(12.5% + 12%); }
.xvs__scene[data-board="indoor"] { padding-top: 4.5rem; }
.xvs__scene[data-board="indoor"]::before { content: ""; position: absolute; left: 8%; right: 8%; top: 3rem; border-top: 1px solid var(--xb-line2); }
.xvs__scene[data-board="indoor"] .xvs__mount::before, .xvs__scene[data-board="indoor"] .xvs__mount::after { bottom: 100%; height: 1.5rem; }
.xvs__scene[data-board="outdoor"] .xvs__mount::before, .xvs__scene[data-board="outdoor"] .xvs__mount::after { top: 100%; height: 2.5rem; width: 5px; border-radius: 1px; background: #2A2A30; }
.xvs__scene[data-board="outdoor"] .xvs__mount::before { left: 16%; }
.xvs__scene[data-board="outdoor"] .xvs__mount::after { right: 16%; }

.xvs__showing { margin: 0.25rem 0 0; font-family: var(--xb-mono); font-size: 0.875rem; line-height: 1.5; color: var(--xb-tx); overflow-wrap: anywhere; }
.xvs__showing-k { color: var(--xb-tx2); }
.xvs__pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.xvs__page {
  padding: 0.25rem 0.5rem; border-radius: 6px; border: 1px solid var(--xb-line); background: var(--xb-bg);
  font-family: var(--xb-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--xb-tx2);
  transition: border-color var(--dur-fast, 160ms) var(--xb-ease), color var(--dur-fast, 160ms) var(--xb-ease);
}
.xvs__page.is-now { color: var(--xb-tx); border-color: var(--xb-line2); }
.xvs__page::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.4375rem; border-radius: 1px; vertical-align: 0.0625rem; background: #F4F4F5; }
.xvs__page[data-color="adv"]::before { background: var(--xb-adv); }
.xvs__page[data-color="warn"]::before { background: var(--xb-warn); }
.xvs__page[data-color="crit"]::before { background: var(--xb-crit); }
.xvs__page[data-color="ok"]::before { background: var(--xb-ok); border-radius: 50%; }
.xvs__gas { margin: 0; padding: 0.5rem 0.75rem; border-left: 2px solid var(--xb-line2); font-size: 0.8125rem; line-height: 1.5; color: var(--xb-tx2); }
.xvs__gas b { color: var(--xb-tx); font-weight: 600; }
.xvs__gas[hidden] { display: none; }
.xvs__note { margin: 1rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--color-text-secondary, #A1A1AA); max-width: 70ch; }

@media (max-width: 860px) {
  .xvs { grid-template-columns: minmax(0, 1fr); }
  .xvs__btns { flex-direction: row; flex-wrap: wrap; }
  .xvs__btn { width: auto; }
}
@media (max-width: 720px) {
  .xvs { padding: 0.75rem; gap: 1rem; }
  .xvs__controls { padding: 0.25rem 0.25rem 0; }
  .xvs__scene, .xvs__scene[data-board="outdoor"] { min-height: 0; padding-left: 0.5rem; padding-right: 0.5rem; }
  .xvs__where { left: 0.75rem; }
  .xvs__scene[data-board="indoor"] { padding-top: 4.25rem; }
  .xvs__scene[data-board="indoor"]::before { left: 0.75rem; right: 0.75rem; top: 3rem; }
  .xvs__board, .xvs__scene[data-board="outdoor"] .xvs__board { width: 100%; padding: 4px; }
  .xvs__canvas, .xvs__scene[data-board="outdoor"] .xvs__canvas { aspect-ratio: 96 / 20; }
  .xvs__mount::before { left: 24%; }
  .xvs__mount::after { right: 24%; }
  .xvs__scene[data-board="indoor"] .xvs__mount::before, .xvs__scene[data-board="indoor"] .xvs__mount::after { height: 1.25rem; }
}