/* Shared top-rail ticker (used by all public pages).
   Self-contained — doesn't depend on page-level CSS variables so it
   drops into privacy / terms / refund etc. that don't ship the full
   dashboard palette. If a page DOES define these variables, they win
   via CSS var fallback pattern. */
:root {
  --tk-ink: #F2F4F8;
  --tk-ink-dim: #6C7686;
  --tk-line: rgba(255,255,255,0.09);
  --tk-cyan: #7CF9F0;
  --tk-purple: #A855F7;
  --tk-red: #EF4444;
  --tk-green: #22C55E;
  --tk-amber: #F59E0B;
}
.ticker {
  position: sticky; top: 0; z-index: 50; height: 38px;
  background: rgba(6,6,10,0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line, var(--tk-line));
  display: flex; align-items: center; overflow: hidden;
}
.ticker-pill {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 14px 0 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--cyan, var(--tk-cyan));
  border-right: 1px solid var(--line, var(--tk-line));
  height: 100%;
}
.ticker .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sig-green, var(--tk-green));
  box-shadow: 0 0 8px var(--sig-green, var(--tk-green));
  animation: dq-pulse 1.4s ease-in-out infinite;
}
.ticker-track-wrap {
  flex: 1; overflow: hidden; position: relative; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
}
.ticker-track {
  display: flex; align-items: center; gap: 0; white-space: nowrap;
  animation: dq-marquee 38s linear infinite;
  width: max-content; height: 100%;
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  color: var(--ink-dim, var(--tk-ink-dim));
  border-right: 1px solid rgba(255,255,255,0.04);
  height: 100%;
}
.ticker-glyph { font-size: 9px; line-height: 1; }
.ticker-label { font-weight: 700; letter-spacing: 0.12em; }
.ticker-label.cy { color: var(--cyan,   var(--tk-cyan));   }
.ticker-label.rd { color: var(--sig-red,  var(--tk-red));    }
.ticker-label.gn { color: var(--sig-green,var(--tk-green));  }
.ticker-label.am { color: var(--sig-amber,var(--tk-amber));  }
.ticker-label.pu { color: var(--purple, var(--tk-purple)); }
.ticker-name { color: var(--ink, var(--tk-ink)); font-weight: 500; }
.ticker-pct  { color: var(--ink, var(--tk-ink)); font-weight: 700; }

@keyframes dq-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes dq-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.18); }
}
@media (max-width: 880px) { .ticker-track { animation-duration: 60s; } }
@media (max-width: 520px) { .ticker-track { animation-duration: 80s; } }