/* Minimal, accessible, brand-aligned monetization styles */

:root{
  --ink-950:#0b0b0f; --ink-800:#171721; --ink-600:#2a2a3a;
  --violet-500:#7c5cff; --stone-200:#e7e8ec; --stone-400:#c8cad2; --white:#fff;
}

/* Modal shell */
.db-modal {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: color-mix(in oklab, black 50%, transparent);
  z-index: 9999; padding: 1rem;
}
.db-modal[hidden]{ display:none; }
.db-modal__panel{
  width: min(560px, 92vw); max-height: 86vh; overflow:auto;
  background: var(--ink-950); color: var(--white);
  border: 1px solid var(--ink-600); border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.db-modal__header{ display:flex; justify-content:space-between; align-items:center;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--ink-800);
}
.db-modal__title{ font-size: 1.125rem; margin:0; }
.db-modal__close{
  background: transparent; border:0; color: var(--stone-200);
  inline-size:44px; block-size:44px; border-radius: 10px; cursor:pointer;
}
.db-modal__close:focus-visible{ outline:2px solid var(--violet-500); outline-offset: 3px; }
.db-modal__body{ padding: 1rem 1.25rem 1.25rem; display:grid; gap:.75rem; }

/* Buttons */
.db-btn{ display:inline-flex; gap:.5rem; align-items:center; justify-content:center;
  min-inline-size: 44px; min-block-size: 44px; padding:.75rem 1rem; border-radius:12px;
  font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent;
}
.db-btn--primary{ background: var(--violet-500); color: var(--white); }
.db-btn--ghost{ background: transparent; color: var(--stone-200); border-color: var(--ink-600); }

/* Reward picker */
.reward-picker{ display:grid; gap:.5rem; }
.reward-picker .reward-free{ background: var(--ink-800); color: var(--white); }
.reward-picker .reward-paid{ background: var(--violet-500); color: var(--white); }

/* Affiliate card */
.affiliate-card{
  margin-block: .75rem; padding: .875rem 1rem; border:1px solid var(--ink-600);
  border-radius: 12px; background: var(--ink-950); color: var(--white);
}
.affiliate-card small{ color: var(--stone-400); display:block; margin-top:.5rem; }

/* Sticky disclosure (reserve height to avoid CLS) */
.db-disclosure{
  position: sticky; bottom: 0; background: var(--ink-800); color: var(--stone-200);
  font-size: .875rem; border-top: 1px solid var(--ink-600);
  padding: .5rem .75rem; z-index: 10;
}
.db-disclosure a{ color: var(--stone-200); text-decoration: underline; }