/* ══ QUILLON TOPBAR THEME — "Glacier Aurora" · 2026-11-03 ══════════════════════════════════════
   Additive re-skin of the logged-in global top bar (.topbar-main in the TopBar component).
   Replaces the gold chrome (rgba(212,175,55) inline borders/glows, amber/yellow text, the gold
   balance gradient) with deep glacier ink + mint → ice → lilac accents.
   Signal colours are NOT touched: the K gauge (its wrapper is the z-index:200 box) keeps
   red / amber / emerald for critical / elevated / stable, and status dots keep their own hue.
   Remove the <link> to this file in index.html to get the gold back — nothing else changed.   */
:root {
  --qtb-ink-1: rgba(5, 18, 26, 0.94);
  --qtb-ink-2: rgba(9, 24, 40, 0.94);
  --qtb-ink-3: rgba(20, 16, 44, 0.94);
  --qtb-mint: #5eead4;
  --qtb-ice: #a5f3fc;
  --qtb-lilac: #c4b5fd;
  --qtb-line: rgba(94, 234, 212, 0.22);
  --qtb-fill: rgba(94, 234, 212, 0.07);
}

/* the bar itself: glacier glass + an aurora hairline along the bottom edge */
.topbar-main {
  background: linear-gradient(115deg, var(--qtb-ink-1) 0%, var(--qtb-ink-2) 55%, var(--qtb-ink-3) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 28px rgba(45, 212, 191, 0.10), 0 1px 0 rgba(165, 243, 252, 0.06) inset !important;
}
.topbar-main::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--qtb-mint) 20%, var(--qtb-ice) 50%, var(--qtb-lilac) 80%, transparent 100%);
  background-size: 200% 100%; opacity: .75;
  animation: qtb-aurora 14s linear infinite;
}
@keyframes qtb-aurora { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .topbar-main::after { animation: none; } }

/* gold inline styles (search button, pills, search overlay, result rows) → mint, property by
   property, so a dark panel that only has a gold BORDER keeps its solid background.
   React writes inline colours as "rgba(212, 175, 55, a)". The K gauge box is skipped. */
.topbar-main [style*="212, 175, 55"]:not([style*="z-index: 200"] *) { border-color: var(--qtb-line) !important; }
.topbar-main [style*="background: rgba(212, 175, 55"]:not([style*="z-index: 200"] *) { background: var(--qtb-fill) !important; }
.topbar-main [style*="background: linear-gradient(135deg, rgba(212, 175, 55"]:not([style*="z-index: 200"] *) {
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.16), rgba(196, 181, 253, 0.12)) !important;
}
.topbar-main [style*="box-shadow"][style*="212, 175, 55"]:not([style*="z-index: 200"] *) {
  box-shadow: 0 0 48px rgba(94, 234, 212, 0.16), 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

/* amber / yellow chrome text → mint & ice, outside the K gauge */
.topbar-main :is(.text-amber-400, .text-amber-300, .text-yellow-400, .text-yellow-300):not([style*="z-index: 200"] *) { color: var(--qtb-mint) !important; }
.topbar-main :is(.text-amber-100, .text-amber-200):not([style*="z-index: 200"] *) { color: #e0fbff !important; }
.topbar-main :is([class*="text-amber-400/"], [class*="text-amber-300/"]):not([style*="z-index: 200"] *) { color: rgba(165, 243, 252, 0.62) !important; }
.topbar-main [class*="hover:text-amber-300"]:not([style*="z-index: 200"] *):hover { color: var(--qtb-ice) !important; }

/* total balance: the gold gradient text becomes an aurora gradient */
.topbar-main [data-tb="balance"] .bg-clip-text {
  background-image: linear-gradient(90deg, var(--qtb-mint) 0%, var(--qtb-ice) 50%, var(--qtb-lilac) 100%) !important;
}
/* the thin vertical divider after the balance */
.topbar-main [class*="via-amber-500"] {
  background-image: linear-gradient(to bottom, transparent, rgba(94, 234, 212, 0.38), transparent) !important;
}