/* 영상 도네이션 OBS 기본 테마. 아래 전역 클래스는 사용자 CSS의 공개 계약입니다. */
.vd-overlay {
  --vd-accent: #8ecdf5;
  --vd-waiting: var(--vd-accent);
  --vd-bg: #24272d;
  --vd-text: #f1f3f5;
  --vd-muted: #b5bac3;
  --vd-radius: 8px;
  --vd-font-size: 20px;
  box-sizing: border-box;
  width: min(100%, 520px);
  padding: 16px;
  display: grid;
  gap: 24px;
  color: var(--vd-text);
  font-family: 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
  font-size: var(--vd-font-size);
  line-height: 1.5;
  background: transparent;
  overflow-wrap: anywhere;
}
.vd-overlay * { box-sizing: border-box; }
.vd-overlay[data-visible='false'] { display: none; }
.vd-current, .vd-upcoming { min-width: 0; display: grid; gap: 10px; }
.vd-card {
  min-width: 0;
  margin: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--vd-radius);
  background: var(--vd-bg);
}
.vd-card--playing { background: #253440; }
.vd-heading, .vd-meta, .vd-timing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  min-width: 0;
}
.vd-label { color: var(--vd-accent); font-weight: 500; }
.vd-title { margin: 12px 0 8px; font-size: 1em; font-weight: 600; line-height: inherit; color: var(--vd-text); }
.vd-heading .vd-title { flex: 1 1 240px; min-width: 0; margin: 0; }
.vd-amount { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--vd-text); }
.vd-amount small { margin-left: 4px; font-size: 1em; color: var(--vd-muted); font-weight: 400; }
.vd-meta { color: var(--vd-muted); }
.vd-card--pending .vd-meta { margin-top: 8px; }
.vd-donor { min-width: 0; }
.vd-duration { margin-left: auto; font-variant-numeric: tabular-nums; }
.vd-timing { margin-top: 8px; }
.vd-timing-label { color: var(--vd-muted); }
.vd-time { margin-left: auto; font-size: 1em; line-height: inherit; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--vd-accent); }
.vd-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; min-width: 0; }
.vd-card--pending .vd-time { color: var(--vd-waiting); }
.vd-stale, .vd-partial { margin: 0; padding: 10px 14px; border-radius: var(--vd-radius); color: var(--vd-muted); background: var(--vd-bg); }
@media (max-width: 380px) {
  .vd-overlay { padding: 10px; }
  .vd-card { padding: 14px; }
}