/* --- TICKER TOP BAR --- */
.top-ticker{
  position: relative;               /* serve per posizionare la pill a destra */
  height: 40px;                     /* +10px */
  padding-block: 3px;               /* +3px di respiro */
  display:flex; align-items:center;
  background:#fff;                  /* light */
  border-bottom:1px solid #eee;
  overflow:hidden;
}
html.theme-dark .top-ticker{
  background:#000;                  /* dark: nero pieno */
  border-bottom:1px solid #111;
}

.ticker-wrapper{
  display:flex; gap:32px; align-items:center;
  white-space:nowrap;
  will-change: transform;
}

.ticker-item{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; line-height:1; color: var(--ink-800);
}
html.theme-dark .ticker-item{ color:#ddd; }

.ticker-item i.icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:3px;
  background: var(--accent); color:#fff;
  font-style:normal; font-size:10px;
  transform: translateY(-1px);
}

/* variazione: verde/rossa */
.var{ font-variant-numeric: tabular-nums; }
.var.up{ color:#15a34a; }
.var.down{ color:#ef4444; }

/* --- LOADING PILL (a destra) --- */
.loading-pill{
  position:absolute; inset-inline-end:12px; top:50%;
  transform: translateY(-50%);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px; font-weight:600;
  color:#f9f9f9; background: var(--accent);
  animation: pulseColor 1s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pulseColor{
  0%{ background: var(--accent); color:#fff; }
  50%{ background:#e9e9e9; color:#b30000; }
  100%{ background: var(--accent); color:#fff; }
}
html.theme-dark .loading-pill{
  animation: pulseColorDark 1s ease-in-out infinite;
}
@keyframes pulseColorDark{
  0%{ background: var(--accent); color:#fff; }
  50%{ background:#2a2a2a; color:#ffb3b3; }
  100%{ background: var(--accent); color:#fff; }
}

/* --- RESPONSIVE: nascondi su mobile --- */
@media (max-width: 768px){
  .top-ticker{ display:none; }
}