/* ============================================================
   Sponsored cards.
   The label has to survive a careless theme change, so it does not
   depend on colour alone: a border, a background AND text that says
   the word. Somebody scrolling fast, colour-blind, or on a cheap
   screen in sunlight still sees "Sponsored".
   ============================================================ */
.ad-card {
  position: relative;
  border: 1px solid var(--line-2, rgba(255,255,255,.13));
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--panel, #0e131d);
}
.ad-label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 12px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
  background: rgba(255,255,255,.035);
}
.ad-pill {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #98a2b8);
}
.ad-why {
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--muted-2, #6b7488); display: grid; place-items: center;
  /* 44px hit area without a 44px box - the icon stays small, the
     tappable region does not. */
  width: 44px; height: 44px; margin: -10px -12px -10px 0;
}
.ad-why svg { width: 16px; height: 16px; }
.ad-why-body { padding: 4px 2px 2px; }
.ad-why-body p { margin: 0 0 10px; line-height: 1.6; }
.ad-why-body p:last-child { margin-bottom: 0; }

[data-theme="light"] .ad-label { background: rgba(0,0,0,.03); }