/* Papan "WD Terbayar" beranda (templates/core/_paid_withdrawals.html), 5 Okt 2026.
   Token --tg-* (Theme B) lebih dulu, lalu token klasik untuk FORE77 (neon_cyber),
   sama seperti win-ticker-2026.css. Tema klasik berlatar terang belum dicek. */
.wd-paid {
  margin: 14px 0 0;
  padding: 16px;
  border: 1px solid var(--tg-panel-line, var(--line, #1f394a));
  border-radius: 14px;
  background: var(--tg-surface, var(--navy2, #12242f));
  color: var(--tg-panel-ink, var(--ink, #e6f2f0));
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
}
.wd-paid-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 12px;
}
.wd-paid-head > div { display: flex; align-items: baseline; gap: 6px; }
.wd-paid-head span { font-family: system-ui, sans-serif; color: var(--tg-panel, var(--gold, #2fe3a5)); font-size: 20px; font-weight: 800; }
.wd-paid-head h2 { margin: 0; color: inherit; font: 700 20px/1.2 system-ui, sans-serif; }
.wd-paid-live {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--tg-panel-ink-soft, var(--muted, #8ba7b5));
  font-size: 11px;
}
.wd-paid-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fd47c;
  box-shadow: 0 0 0 0 #2fd47c88;
  animation: wd-paid-pulse 1.8s ease-out infinite;
}
.wd-paid-viewport {
  --wd-row: 54px;
  overflow: hidden;
}
.wd-paid-viewport.is-moving {
  height: calc(var(--wd-row) * 5);
  -webkit-mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 22px), transparent);
}
.wd-paid-viewport.is-moving .wd-paid-track {
  animation: wd-paid-scroll calc(var(--wd-count, 10) * 3s) linear infinite;
}
.wd-paid:hover .wd-paid-track,
.wd-paid:focus-within .wd-paid-track { animation-play-state: paused; }
.wd-paid ul { margin: 0; padding: 0; list-style: none; }
.wd-paid li {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--wd-row);
  padding: 0 4px;
  border-bottom: 1px solid var(--tg-panel-line, var(--line, #1f394a));
  box-sizing: border-box;
}
.wd-paid-method {
  flex: 0 0 58px;
  overflow: hidden;
  padding: 6px 3px;
  border-radius: 8px;
  background: var(--tg-tile, var(--navy, #0f2230));
  color: var(--tg-panel-ink, var(--ink, #e6f2f0));
  font: 800 11px/1.2 system-ui, sans-serif;
  font-style: normal;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wd-paid-who,
.wd-paid-amount { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.wd-paid-who { flex: 1 1 auto; }
.wd-paid-amount { flex: 0 0 auto; align-items: flex-end; }
.wd-paid-who b { font-size: 13px; font-weight: 700; }
.wd-paid li small {
  color: var(--tg-panel-ink-soft, var(--muted, #8ba7b5));
  font-size: 11px;
  white-space: nowrap;
}
.wd-paid-amount b {
  color: var(--tg-panel, var(--gold, #2fe3a5));
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wd-paid-amount em { color: #2fd47c; font-style: normal; font-weight: 800; }
@keyframes wd-paid-scroll { to { transform: translateY(-50%); } }
@keyframes wd-paid-pulse { 70% { box-shadow: 0 0 0 7px #2fd47c00; } 100% { box-shadow: 0 0 0 0 #2fd47c00; } }
@media (max-width: 640px) {
  .wd-paid { margin: 12px 10px 0; padding: 12px; border-radius: 12px; }
  .wd-paid-head span, .wd-paid-head h2 { font-size: 15px; }
  .wd-paid-viewport { --wd-row: 50px; }
  .wd-paid li { gap: 10px; }
  .wd-paid-method { flex-basis: 52px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-paid-viewport.is-moving { height: auto; -webkit-mask-image: none; mask-image: none; }
  .wd-paid-viewport.is-moving .wd-paid-track { animation: none; }
  .wd-paid-track ul[aria-hidden] { display: none; }
  .wd-paid-live i { animation: none; }
}