.exchange-brand-badge {
  --badge-bg: linear-gradient(135deg, #2b3447 0%, #1e2430 100%);
  --badge-fg: #dbe4f5;
  --badge-dot: #9aa8be;
  --badge-border: rgba(255, 255, 255, 0.24);

  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--badge-border);
  background: var(--badge-bg);
  color: var(--badge-fg);
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.exchange-brand-badge__dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--badge-dot);
  box-shadow: 0 0 8px var(--badge-dot);
  flex: 0 0 auto;
}

.exchange-brand-badge__short {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.92;
}

.exchange-brand-badge__label {
  font-size: 0.8rem;
  font-weight: 700;
}

.exchange-brand-badge--compact {
  padding: 0.2rem 0.56rem;
}

.exchange-brand-badge--compact .exchange-brand-badge__label {
  display: none;
}

.exchange-brand-badge--bybit {
  --badge-bg: linear-gradient(135deg, #173b55 0%, #1e5472 100%);
  --badge-fg: #def2ff;
  --badge-dot: #52b8ff;
  --badge-border: rgba(82, 184, 255, 0.36);
}

.exchange-brand-badge--binance {
  --badge-bg: linear-gradient(135deg, #4f3904 0%, #3a2b09 100%);
  --badge-fg: #ffeebf;
  --badge-dot: #f3ba2f;
  --badge-border: rgba(243, 186, 47, 0.44);
}

.exchange-brand-badge--hyperliquid {
  --badge-bg: linear-gradient(135deg, #311257 0%, #231342 100%);
  --badge-fg: #f0e4ff;
  --badge-dot: #ab84ff;
  --badge-border: rgba(171, 132, 255, 0.44);
}

/* Light theme: calmer, less noisy */
body:not(.dark-mode) .exchange-brand-badge {
  --badge-bg: #f4f6fb;
  --badge-fg: #2f3a4d;
  --badge-dot: #7285a8;
  --badge-border: #d9e1ee;
  box-shadow: none;
}

body:not(.dark-mode) .exchange-brand-badge__dot {
  box-shadow: none;
}

body:not(.dark-mode) .exchange-brand-badge--bybit {
  --badge-bg: #eef6ff;
  --badge-fg: #214663;
  --badge-dot: #399de3;
  --badge-border: #cfe2f7;
}

body:not(.dark-mode) .exchange-brand-badge--binance {
  --badge-bg: #fff9ea;
  --badge-fg: #5b4606;
  --badge-dot: #d9a421;
  --badge-border: #f0dfae;
}

body:not(.dark-mode) .exchange-brand-badge--hyperliquid {
  --badge-bg: #f6f0ff;
  --badge-fg: #4a2f70;
  --badge-dot: #8f66d4;
  --badge-border: #dfcff6;
}