.exo-bridge-band {
  --br-text: var(--text, #f0eeef);
  --br-muted: var(--muted, #b1b1bc);
  --br-purple: var(--purple, #c0a5ea);
  --br-cardinal: #b82b4d;
  --br-label: #e09aab;
  --br-line: #573b49;
  --br-inset: #3b3038;
  --br-font: var(--font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 8px clamp(16px, 2vw, 72px);
  color: var(--br-text);
  font-family: var(--br-font);
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
}

.exo-bridge-band *,
.exo-bridge-band *::before,
.exo-bridge-band *::after {
  box-sizing: border-box;
}

.exo-bridge-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: min(100%, 3200px);
  margin-inline: auto;
  padding: 10px 12px;
  pointer-events: auto;
  color: var(--br-text);
  background: linear-gradient(140deg, #201b21, #16181d 45%, #1b1820);
  border: 1px solid var(--br-line);
  border-top: 2px solid var(--br-cardinal);
  border-radius: 16px;
  box-shadow: 0 10px 24px #0003, inset 0 1px 0 #c0a5ea1a;
}

.exo-bridge-band-above {
  margin-top: 2px;
  margin-bottom: 2px;
}

.exo-bridge-band-below {
  margin-top: 2px;
  margin-bottom: 10px;
}

.exo-bridge-brand {
  display: flex;
  align-items: flex-start;
  flex: none;
  gap: 5px;
  margin-right: 4px;
  cursor: help;
  border-radius: 6px;
}

.exo-bridge-word {
  font-family: "Avenir Next", var(--br-font);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d7c8df;
  line-height: 1.2;
}

.exo-bridge-er {
  margin-top: 1px;
  font-family: "Avenir Next", var(--br-font);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.14em;
  color: var(--br-purple);
  line-height: 1;
}

#exo-bridge-above-live,
#exo-bridge-below-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 280px;
  min-width: 0;
}

#exo-bridge-below-live {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.exo-bridge-band[data-collapsed="true"] #exo-bridge-below-live {
  flex-direction: row;
  align-items: center;
}

.exo-bridge-band[data-collapsed="true"] .exo-bridge-panel {
  padding-block: 6px;
}

.exo-bridge-seat,
.exo-bridge-tally,
.exo-bridge-chip {
  min-width: 0;
  border: 1px solid var(--br-inset);
  border-radius: 9px;
  background: linear-gradient(135deg, #201c21, #1b1c20);
  cursor: help;
}

.exo-bridge-seat {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
  flex: 1 1 210px;
  max-width: 440px;
  min-width: min(100%, 210px);
  padding: 7px 10px 8px;
}

.exo-bridge-pip {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #42424c;
}

.exo-bridge-pip[data-tone="live"] {
  background: var(--br-purple);
  box-shadow: 0 0 6px #c0a5ea99;
}

.exo-bridge-pip[data-tone="attention"] {
  background: var(--br-cardinal);
  box-shadow: 0 0 6px #b82b4d88;
}

.exo-bridge-kicker,
.exo-bridge-value,
.exo-bridge-meta {
  grid-column: 2;
  min-width: 0;
}

.exo-bridge-kicker {
  color: var(--br-label);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

.exo-bridge-value,
.exo-bridge-num,
.exo-bridge-shown,
.exo-bridge-job-id {
  color: var(--br-text);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.exo-bridge-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exo-bridge-flag {
  margin-left: 6px;
  color: var(--red-light, #ff99ac);
  font-weight: 620;
}

.exo-bridge-meta,
.exo-bridge-job-meta,
.exo-bridge-job-title {
  color: var(--br-muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.exo-bridge-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exo-bridge-job {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 2 1 260px;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  cursor: help;
}

.exo-bridge-job-text {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--br-text);
}

.exo-bridge-job-id,
.exo-bridge-job-meta {
  flex: none;
}

.exo-bridge-job-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exo-bridge-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.exo-bridge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.exo-bridge-usage {
  padding-top: 8px;
  border-top: 1px solid var(--br-inset);
}

.exo-bridge-tally,
.exo-bridge-chip {
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 6px 8px 7px;
}

.exo-bridge-tally {
  flex: 1 1 124px;
  max-width: 240px;
  min-width: min(100%, 124px);
}

.exo-bridge-chip {
  flex: 1 1 138px;
  max-width: 220px;
}

.exo-bridge-num {
  font-size: 18px;
  line-height: 1.15;
}

.exo-bridge-shown {
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exo-bridge-bar {
  display: block;
  height: 2px;
  margin-top: 5px;
  border-radius: 1px;
  background: var(--br-inset);
  overflow: hidden;
}

.exo-bridge-bar > span {
  display: block;
  height: 100%;
  width: var(--fill, 0%);
  background: var(--br-purple);
}

.exo-bridge-chip[data-low="true"] {
  box-shadow: inset 0 2px 0 var(--br-cardinal);
}

.exo-bridge-chip[data-low="true"] .exo-bridge-bar > span {
  background: var(--br-cardinal);
}

.exo-bridge-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  width: 100%;
  margin: 0;
  min-width: 0;
  color: var(--br-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.exo-bridge-strip b {
  color: var(--br-text);
  font-weight: 620;
}

.exo-bridge-toggle {
  appearance: none;
  flex: none;
  margin: 0 0 0 auto;
  border: 1px solid var(--br-line);
  border-radius: 8px;
  background: transparent;
  color: #d7c8df;
  padding: 5px 9px;
  min-height: 28px;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
}

.exo-bridge-toggle:hover {
  border-color: #8d5368;
  color: var(--br-text);
  background: #2a222c;
}

.exo-bridge-band :focus-visible {
  outline: 2px solid #d2b7ec;
  outline-offset: 3px;
}

.exo-bridge-float-tip {
  position: fixed;
  z-index: 40;
  max-width: min(340px, calc(100vw - 16px));
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--br-line, #573b49);
  border-radius: 9px;
  background: var(--panel-deep, #1f2026);
  color: var(--text, #f0eeef);
  font: 12px/1.45 var(--font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  letter-spacing: 0.01em;
  white-space: pre-line;
  box-shadow: 0 8px 24px #0006;
  pointer-events: none;
}

.exo-bridge-float-tip[hidden] {
  display: none !important;
}

@media (min-width: 2000px) {
  .exo-bridge-band { font-size: 14px; }
  .exo-bridge-word { font-size: 15px; }
  .exo-bridge-er { font-size: 10px; }
  .exo-bridge-kicker { font-size: 11px; }
  .exo-bridge-num { font-size: 22px; }
  .exo-bridge-shown,
  .exo-bridge-meta,
  .exo-bridge-job-meta,
  .exo-bridge-job-title { font-size: 13px; }
  .exo-bridge-panel { padding: 12px 16px; }
  .exo-bridge-seat { min-width: min(100%, 250px); }
  .exo-bridge-row { justify-content: space-between; }
  .exo-bridge-tally { flex-basis: 160px; min-width: min(100%, 150px); max-width: 360px; }
  .exo-bridge-chip { flex-basis: 200px; max-width: 420px; }
}

@media (min-width: 3200px) {
  .exo-bridge-band {
    font-size: 16px;
    padding-inline: 72px;
  }
  .exo-bridge-panel {
    padding: 14px 18px;
    border-radius: 18px;
  }
  .exo-bridge-word { font-size: 18px; }
  .exo-bridge-er { font-size: 11px; }
  .exo-bridge-kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
  }
  .exo-bridge-num { font-size: 28px; }
  .exo-bridge-shown { font-size: 16px; }
  .exo-bridge-meta,
  .exo-bridge-job-meta,
  .exo-bridge-job-title,
  .exo-bridge-strip { font-size: 14px; }
  .exo-bridge-toggle {
    font-size: 12px;
    min-height: 36px;
    padding: 7px 12px;
  }
  .exo-bridge-seat,
  .exo-bridge-tally,
  .exo-bridge-chip { padding: 10px 12px; }
  .exo-bridge-pip { width: 8px; height: 8px; }
  .exo-bridge-bar { height: 3px; }
}

@media (max-width: 720px) {
  .exo-bridge-seat,
  .exo-bridge-tally,
  .exo-bridge-chip { max-width: none; flex-basis: 140px; }
  .exo-bridge-job { flex-basis: 100%; }
}

@media (pointer: coarse) {
  .exo-bridge-toggle {
    min-height: 36px;
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exo-bridge-band,
  .exo-bridge-band *,
  .exo-bridge-float-tip {
    transition: none !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .exo-bridge-panel,
  .exo-bridge-seat,
  .exo-bridge-tally,
  .exo-bridge-chip,
  .exo-bridge-float-tip,
  .exo-bridge-toggle {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
  }
  .exo-bridge-kicker,
  .exo-bridge-word,
  .exo-bridge-er,
  .exo-bridge-meta,
  .exo-bridge-job-title,
  .exo-bridge-num,
  .exo-bridge-shown,
  .exo-bridge-value {
    color: CanvasText;
    background: transparent;
  }
  .exo-bridge-pip,
  .exo-bridge-bar > span {
    background: CanvasText;
    box-shadow: none;
  }
}